模板网站基本建站步骤

《模板网站基本建站步骤》由会员分享，可在线阅读，更多相关《模板网站基本建站步骤（82页珍藏版）》请在金锄头文库上搜索。

1、上机步骤,复习上节课教的网站基本步骤知识,1.创建文件夹用来存放网站各类资源pages/img/pic 2.把必须的资源分类存放在文件夹中.没用到的图片不要放进来。 3.在dreamweaver中创建站点。然后创建模板,通过表格设置页面结构，通过页面属性设置页面基本外观。并插入模板对象可编辑区域 4.由模板创建网页并保存。 5.返回模板设计超链接，更新整个网站。,在C盘根目录下建立一个文件夹，名字是“xxyyy”，xx是你的学号的后2位，yy是你的姓名。没有空格和标点符号。这个文件夹就是你的站点文件夹，网站建设所有用到的文件都将存放在这里。 命名举例：比如03张益达，14李秋水，22郭峰 学号

2、是一位数的，比如3号，前面一定要加零.比如是03.,在这个文件夹里再建两个文件夹，一个叫img的文件夹，img是image即图片的意思，将用来存放图片。另外一个叫pages，是用来存放网页的文件夹。 说明：img是英文单词“图像image”的简写。pages是英文页面的意思。,打开dreamweaver。它在桌面上是一个绿色的DW字样图标,如下图所示 单击最上面的“站点”菜单，选择“新建站点” 然后设置站点名称为你的学号加姓名。站点文件夹就是你刚才创建的那个文件夹。单击“本地站点文件夹”最右侧的文件夹图标即可设置。,下面8 ， 9 ， 10 ， 11一共4页的内容是老版Dreamweaver的

3、站点设置步骤，提供给使用老版的同学。在机房用cs5版本的可以直接跳过。,会出现站点建设对话框。在“为站点起名字”的栏目中，输入你的站点文件夹名字，比如wangluo109，然后单击“下一步”，选“否，我不想使用服务器技术”。,再单击下一步，在“您将把文件存储在计算机上的什么位置”的下面。单击右侧的黄色文件夹按钮（上图中红框内），选择到你在d盘下所选定的文件夹内。 或者直接改它的文件路径也行，如下所示,注意：这个路径必须和你在C盘下设置的你的站点目录一样！具体名字取你的文件夹名！,单击“下一步”，如上图所示，“如何连接到服务器”，选择“无” 再单击“下一步”，选“完成”,在C盘根目录下建立一个文

4、件夹，名字是“wangluo1xx”，1xx是你的学号的后三位，没有空格和标点符号。这个文件夹就是你的站点文件夹，网站建设中所有用到的文件都将存放在这里。 强调：不符合要求的，将被扣分！不要把你的姓名，完整学号等等加入文件夹的名字。而且记住：一定要是拼音，不要用汉字做文件夹名！,在正式开始操作之前的最后一个提醒： 如果你在操作中发现有一点失误，比如做错了一两步，不必叫我过来问这个怎么改回去，你只要撤销这两步错误的操作即可。 撤销上一步操作的快捷键是ctrl+Z 就是单击ctrl键不松开的同时单击一下Z键,我们今天一开始要用到6张图片，分别是1-1.jpg，1-2.jpg，2-1.jpg，2-2

5、.jpg，2-3.jpg，banner.jpg，beijing.gif。如下图。 它们在世博会主题文件夹内的网站图片文件夹内，请把它们单独找出来复制到你的C盘的站点文件夹下的img文件夹里,我在此再次强调：在网页中没有用到的图片，不要放到站点文件夹里。 站点文件夹内放的文件，必须是确定用到的图片和网页等文件。 有些同学把下载的文件夹、文件都放到站点文件夹里，这种做法是错误的！必须先进行挑选，确实选中要用的文件才放到站点文件夹中，其他所有文件一律放到站点文件夹外！,一个文件也不要多放！ 一定要按规则，按思路来管理你的站点文件夹，这样你以后的网站做大的时候才会有条理。 实际你自己设计网站的时候，也

6、会像今天这个网站一样，先搜集很多资源，然后从中挑选出符合主题，适应站点需要的图片和文字，然后整理修改后放到站点文件夹内，最后才是粘贴到网页中来使用。,然后这时候我们该开始创建第一个页面。 不过今天我们要复习上次课的技术：模板 首先来认识3个概念，logo，banner和导航栏。 注意看下面两页PPT中的红色指示字。,网页组成的介绍,从上面可以看到 Logo一般是网站的标示，标志 Banner一般是网页上侧或者左侧的标志性长条，显示网站主题内容。常常有但不是必须有。 导航栏是主页上用于到达各个子页面的超链接的一个合集。,接下来我们进入今天的操作部分。请大家务必放慢节奏，细心一点。因为一旦做错，往

7、往需要返工从头再来。 所以在看步骤的时候一定要慢一点，细心认真一点。,我们今天要学习一种新技术：模板 在这里提醒一下，我们用F12键可以预览网页，但是不能预览模板。模板表面上和网页一样，实际上是一个网站的总的底板。它只能在Dreamweaver中的设计模式下看到。 所以不要在编辑模板的时候点F12.但是在编辑由模板创建的网页的时候，可以点F12预览 我们今天要学习用模板建网站的技术。,单击Dreamweaver左上角的“文件”菜单下的“新建”命令，在弹出的新建对话框中，选择“空白页”，然后选择“模板”或者选择 “空模板”-“html模板”-“无”。如下图。也行。 然后单击创建。,单击Dream

8、weaver上的“插入”菜单下的“表格”命令，插入一个4行1列的表格，表格宽度为960像素。边框，边距，间距必须都是0.然后单击确定。,此时页面最下方显示的是该表格的属性面板，如上图所示 如果不是，就在表格里单击一下，然后单击上图中左上角的标签即可 单击属性中的“对齐”，选择“居中对齐” 属性面板对我们来说很重要。很多修饰、操作都是在这里完成的。,此时你的Dreamweaver的面板的右侧应该有站点文件管理面板，如右上图所示。 双击img，你会看到里面列出了你复制到这里的图片文件 双击后如右下图所示,在页面主表格的第四行，是我们将来的页面底部的信息栏，是你的网站信息栏 请在这里输入你的站点编制

9、者信息，如学校，班级，姓名，联系方式等。 建议： 1.分别写为两行。详细点。 2.这些信息应该居中对齐。,在表格的第一行里面单击一下。然后单击Dreamweaver上方的“插入”菜单中的“图像”命令，找到你刚放到img文件夹中的banner.jpg图片，插入到表格第一行中 这个图片就是咱们今天的网站的banner 在表格的第二行里面单击一下，在这里插入一个1行6列的表格，宽度960像素，边框，边距，间距都是0。 在表格里插表格的操作方法和在页面里插表格的操作是一样的,在表格的第三行里面单击一下，在这里插入一个1行1列的表格，宽度960像素，边框，边距，间距都是0。 因为你插入的是一个0边框表格

10、，所以插入后在视觉上是感觉不到有什么区别的，也就是说，你看不出来你确实插入了表格，这很正常。,请在第三行的里面单击一下，确切地说，我是希望你能单击到你刚插入的那个1行1列的表格里面，如果你单击正确的话，属性面板上侧将如上图所示，从左向右数第二个，也是最后一个标签为亮白色 现在请单击从左向右数第二个，也是最后一个标签，单击后如下图所示,接下来请直接单击“插入”菜单，然后选择“模板对象”，选择“可编辑区域”。 然后会问你是否确定。选确定即可。 完成后属性面板上侧的标签应如下图所示,然后在页面上表格外面的任意空白处单击一下，单击哪里都行。 你会在Dreamweaver最下面的属性面板的最下面看到“页

11、面属性”按钮。单击它。,会弹出如上图所示的界面。单击“背景图像”右侧的“浏览”按钮,会出现如上图所示的界面。请找到你的站点文件夹下的img文件夹，并双击打开，然后如右图所示，双击选中里面的beijing.gif文件。就设好了网页的背景图片,现在选中页面中的表格。你可以用鼠标左键选中表格，看到页面左下角的反白色，就是选中了。或者在表格内单击，然后单击属性面板上最左边的标签。 然后单击背景颜色，就像是上图中“大小”的右边的右边的灰色小方块，单击后会出现一个如上图所示的颜料盘 把你的鼠标左键按着不动，向上拖，鼠标会变成吸管的样子。拖到“城市”两个字上，然后松手,或者在“背景颜色”框右侧的白色空白栏里

12、输入这个橙色的颜色代码，如上图所示。 #F89B40 这次世博会的主题是橙色和草绿。所以我选择用这个橙色做网页的背景颜色 操作正确的话，表格背景会变成如下页图的橙色。操作错误请重做。做到正确为止,上面这个图没取好。不一定要变灰。有如图的橙色即可。,单击文件菜单，保存 将此文件保存为你的站点模板。保存的时候为它起名为temp。 如上图所示，点保存即可。,Temp是英文模板的单词template的缩写。以后你自己建站的时候，用什么名字都行。有人喜欢用模板的拼音，muban，也有人用自己的姓名。总之你能记住这是你的模板文件就行。因为以后网站越做越大，一个网站可能有多个模板，到时候模板的名字还是挺重要

13、的，得让你自己能看懂，知道这个是干嘛用的。,你的站点文件此时刷新一下，应该如右图 刷新就是点文件面板上那个蓝色的带箭头的圆圈。右图中中上部，从左向右数第二个 我画红框那里,模板到现在就算告一段落了。请关闭此模板。 不知道操作的，最简明的办法是单击“文件”菜单下的“关闭”命令。,再次提醒一下，我们用F12键可以预览网页，但是不能预览模板。模板表面上和网页一样，实际上是一个网站的总的底板。它只能在Dreamweaver中的设计模式下看到。 所以不要在编辑模板的时候点F12.但是在编辑由模板创建的网页的时候，可以点F12预览 接下来就是用模板创建网站中页面的步骤,现在尝试新建页面，如下图所示。单击文

14、件，-新建，选“模板中的页”，站点选你的站点名称，右边应该只有一个temp，就是你刚刚建立好的模板。然后单击创建。 再次提醒一下，今天创建的所有网页都是由这个模板创建的。也就是说，今天接下来建立六个页面的步骤都是如下图所示。而不是上周的步骤。,下面是我过去的一个截图，和上一页操作是一样的。给大家做个演示 单击文件，新建，先选择“新建文档”对话框左侧的“模板中的页”，然后选择你的站点名称和对应的你刚建好的站点模板即可,在表格第三行单击一下。 因为你是从模板里面创建的，其实第三行以外你应该是点不了的。 在表格第三行单击一下。 插入图像，把img文件夹中的1-1.jpg插入这里。然后单击一下键盘上的

15、方向键-，就是向右，然后按组合键shift+enter，具体操作为先点着shift键不松，然后再点enter，这样就切换到下一行了，然后插入图片1-2 这两个图片是按计划要做第一页的内容的。,记住，他们是有顺序的，1-1在1-2的上面。 插入后点F12，将此页面保存到pages文件夹里。将此页面保存为1.html 咱们一般都是html页面。所以你在输入名字的时候，只要输入一个1就行了，如下图,下面大家跟我一起来设计一个“河南馆”的页面，给大家一点建议思路。这个页面将作为2.html 首先，你必须清楚你的页面用的图片的基本属性。 你在一个图片上单击右键，选属性，再点“摘要”，就能找到你的图片的宽

16、，高属性了。,第二个页面做成“河南馆”的页面。我让你在一开始放在img文件夹里的2-1，2-2，2-3都是“河南馆”的图片。 我们要把这三张图片和“河南馆”的文字相配合,河南馆有三张图片。下面的单位都是像素。 2-1，宽500，高308 2-2，宽150，高112 2-3，宽500，高312 而我们页面的表格的宽度为960像素 三个图片明显第二个最小，第一和第三最大。我的思路是，编辑一个表格，把各个元素放进去。,正式步骤： 首先从模板temp创建一个页面，就像第42页的步骤那样。 然后在第三行里面单击一下鼠标左键，然后在这里插入一个表格，5行1列，边框，边距，间距都是0,在这个新插入的表格的第一行里单击右键，选择“表格“-”拆分单元格”，如上图，拆为三列。,我打算在第一行里把河南馆的logo居中，左右各出一段说明。 表格整体宽度为960，logo图片的宽度是150。另外要留出左右各10像素，共计20像素的空间。所以两段文字的总宽度为960-150-20=790 因为两段文字长短不一，经过试验，我决定左侧文字宽度220，右侧文字宽度570 整体：220+170+570=960像素,