青春驿站网页设计范例

1、网页设计范例网页设计范例编辑ppt第第10章章 网页设计范例网页设计范例 n10.1 10.1 设计站点设计站点n10.2 10.2 n10.3 制作主页n10.4 n10.5 n10.6 n10.7 n10.8 测试和上传站点网页设计范例网页设计范例编辑ppt 主要内容主要内容 本章我们将通过详细描述一个网本章我们将通过详细描述一个网站站 “ “青春驿站青春驿站”的建设过程，学的建设过程，学习用习用Dreamweaver mx 2004Dreamweaver mx 2004制作一个制作一个完整的站点的步骤与关键技术。完整的站点的步骤与关键技术。网页设计范例网页设计范例编辑ppt本章重点本章重

2、点 n网站建设过程网站建设过程n网页设计常用技术网页设计常用技术 网页设计范例网页设计范例编辑ppt 通过本章的学习，熟悉网站建设的全通过本章的学习，熟悉网站建设的全过程，掌握网页设计常用技术。过程，掌握网页设计常用技术。 教学目标教学目标 网页设计范例网页设计范例编辑ppt “青春驿站青春驿站”是一个流溢着青春气息的网站，是一个流溢着青春气息的网站，网页的内容围绕着年青人喜欢的主题展开。网页的内容围绕着年青人喜欢的主题展开。10.1 设计站点设计站点网页设计范例网页设计范例编辑ppt 10.1.1 网站的总体结构网站的总体结构 进入页面主页时尚话题心情文章热点讨论驿站留言头发的时尚城市的性格

3、服装百年图10.1 站点总体结构图 网页设计范例网页设计范例编辑ppt10.1.2 建立站点建立站点 本例是在本例是在E盘盘book文件夹下建立一个名为文件夹下建立一个名为youngsite的的站点。制作步骤如下：站点。制作步骤如下：（1）先在）先在E盘盘book文件夹下建立一个名为文件夹下建立一个名为youngsite的的文件夹，用来存放创建的网页；在文件夹，用来存放创建的网页；在youngsite文件夹下文件夹下建立一个名为建立一个名为images的文件夹，用以存放站点中的图像，的文件夹，用以存放站点中的图像，可以把要用的图片先放入该文件夹中。可以把要用的图片先放入该文件夹中。（2）选择）

4、选择【站点站点】|【管理站点管理站点】，打开，打开【管理站点管理站点】对话框，单击对话框，单击【新建新建】按钮，在弹出的下拉菜单中选择按钮，在弹出的下拉菜单中选择【站点站点】命令，在打开的命令，在打开的【站点定义站点定义】对话框中做如图对话框中做如图10.2所示的设置。此时站点管理面板如图所示的设置。此时站点管理面板如图10.3所示。所示。 网页设计范例网页设计范例编辑ppt图10.2 站点定义对话框网页设计范例网页设计范例编辑ppt图10.3 站点管理面板网页设计范例网页设计范例编辑ppt10.1.3 生成网页生成网页1. 生成进站页面生成进站页面(1) 选择菜单选择菜单【文件文件】|【新建

5、新建】，则弹出，则弹出【新建文档新建文档】对话框，在该对话框中选择对话框，在该对话框中选择【常规常规】选项卡，在选项卡，在【类类别别】选项中选择选项中选择【基本页基本页】，然后在，然后在【基本页基本页】列表列表框中选择框中选择HTML，单击，单击【创建创建】按钮即创建一个按钮即创建一个HTML页面文档。页面文档。(2) 在文档工具栏的标题栏中，输入网页标题在文档工具栏的标题栏中，输入网页标题“进站页进站页面面”。(3) 选择菜单选择菜单【文件文件】|【保存保存】，则弹出，则弹出【另存为另存为】对对话框，则将该页面以话框，则将该页面以index.htm的名字保存在的名字保存在E:bookyoun

6、gsite中。中。网页设计范例网页设计范例编辑ppt2生成主页及其它页面生成主页及其它页面以相同方法生成以相同方法生成主页及其它页面，主页及其它页面，各个页面的名称各个页面的名称及存储位置见图及存储位置见图10.4所示。所示。服装百年城市的性格头发的时尚热点讨论心情文章时尚话题主页图10.4 主页及其它页面网页设计范例网页设计范例编辑ppt10.2 制作进站页面制作进站页面打开进站页面文档打开进站页面文档index.htm，进行设计。，进行设计。1用表格进行整体布局用表格进行整体布局选择菜单选择菜单【插入插入】|【表格表格】或在插入工具栏中的或在插入工具栏中的【布局布局】类中选择表格按钮，则会

7、出现类中选择表格按钮，则会出现【表格表格】设置对话框，设置对话框，插入一个插入一个4行行1列宽度为列宽度为800个像素的表格。个像素的表格。 网页设计范例网页设计范例编辑ppt2添加网页元素添加网页元素 (1) 在表格中的第在表格中的第1行，输入行，输入“青春驿站青春驿站”四个字，选择四个字，选择这四个字，在属性面板中进行设置，字体为这四个字，在属性面板中进行设置，字体为“华文行华文行楷楷”，大小为，大小为20。单元格对齐方式为水平。单元格对齐方式为水平“居中对居中对齐齐”，垂直，垂直“居中居中”。(2) 在表格中的第在表格中的第2行和第行和第4行，分别输入如图行，分别输入如图10.5所示所示

8、的第的第2行文字行文字“青春的美丽青春的美丽”和最后一行文字和最后一行文字“欢欢迎你的到来迎你的到来”。选择这些文字，在属性面板中进行。选择这些文字，在属性面板中进行设置，字体和大小都为设置，字体和大小都为“默认默认”。单元格对齐方式为。单元格对齐方式为水平水平“居中对齐居中对齐”，垂直，垂直“居中居中”。(3) 选择菜单选择菜单【插入插入】|【图像图像】在表格中的第在表格中的第3行，插行，插入图像入图像43.jpg。网页设计范例网页设计范例编辑ppt3页面属性的设置页面属性的设置选择菜单选择菜单【修改修改】|【页面属性页面属性】，在打开的，在打开的页面属性对话框中进行设置，将背景颜色设页面属

9、性对话框中进行设置，将背景颜色设为绿色为绿色(#99CC33)，文本颜色设为白色，文本颜色设为白色(#FFFFFF)。网页设计范例网页设计范例编辑ppt10.3 制作主页制作主页网页设计范例网页设计范例编辑ppt10.3.1 整体效果设计整体效果设计主页采用主页采用T形布局，页面上部为横幅及网站标志，下形布局，页面上部为横幅及网站标志，下方左半部分为导航区，右半部分为网页主体显示内容的方左半部分为导航区，右半部分为网页主体显示内容的布局。布局。主页的色彩以蓝绿色为主，给人以青春、旺盛的感觉。主页的色彩以蓝绿色为主，给人以青春、旺盛的感觉。整个页面共插入了六幅整个页面共插入了六幅gif图像，其中

10、四幅静态图像分图像，其中四幅静态图像分别作为网页横幅部分、网页标志、表格单元格的背景，别作为网页横幅部分、网页标志、表格单元格的背景，给页面添加了美感，容易使人产生联想；而在左下半部给页面添加了美感，容易使人产生联想；而在左下半部分的主菜单上方及作为网页主页部分的背景的动态分的主菜单上方及作为网页主页部分的背景的动态gif图图像的插入，赋予整个页面以动感，给人以明快的感觉。像的插入，赋予整个页面以动感，给人以明快的感觉。主页中的文字采用的是浏览器的默认字体，即中文宋主页中的文字采用的是浏览器的默认字体，即中文宋体和英文体和英文Times New Roman字体，显得整齐有序。字体，显得整齐有序

11、。网页设计范例网页设计范例编辑ppt10.3.2 用表格进行整体布局并设置用表格进行整体布局并设置(1)插入一个插入一个3行行1列，宽度为列，宽度为800个像素，边框粗细、单个像素，边框粗细、单元格边距及单元格间距均为元格边距及单元格间距均为0的表格。的表格。(2) 将光标置于表格第将光标置于表格第1行，选择行，选择【修改修改】|【表格表格】|【拆分单元格拆分单元格】，将单元格拆分成，将单元格拆分成2列。拖动两列中间列。拖动两列中间的框线，使左侧宽度大约在的框线，使左侧宽度大约在150像素。像素。(3) 将光标置于表格第将光标置于表格第1行中第行中第1个单元格，选择个单元格，选择【修改修改】|

12、【表格表格】|【拆分单元格拆分单元格】，将单元格拆分成，将单元格拆分成2行。行。(4) 将光标置于表格第将光标置于表格第2行，选择行，选择【修改修改】|【表格表格】|【拆分单元格拆分单元格】，将单元格拆分成，将单元格拆分成2列。列。网页设计范例网页设计范例编辑ppt10.3.3 网页横幅及标志部分的设计网页横幅及标志部分的设计 (1) 将光标置于第将光标置于第1行第行第2列单元格中，选择菜单列单元格中，选择菜单【插入插入】|【图像图像】，插入图像，插入图像5.gif，调整大小到适当宽度。，调整大小到适当宽度。(2) 将光标置于第将光标置于第1行第行第1列上面的单元格中，选择菜单列上面的单元格中

13、，选择菜单【插入插入】|【图像图像】，插入图像，插入图像text.gif。在属性面板。在属性面板上，设置图像居中，其余默认。上，设置图像居中，其余默认。(3) 将光标置于表格的第将光标置于表格的第3行，输入文字：行，输入文字：Copyright 2005 ，All Rights Reserved 青春驿站。在属性面青春驿站。在属性面板上，设置文字居中，其余默认。板上，设置文字居中，其余默认。 (4) 横幅部分的当前日期，是通过在代码中插入一段横幅部分的当前日期，是通过在代码中插入一段JavaScript代码来实现的。代码来实现的。网页设计范例网页设计范例编辑ppt10.3.4 导航区的设计导航

14、区的设计(1) 将光标置于左下方单元格中，选择菜单将光标置于左下方单元格中，选择菜单【插入插入】|【图像图像】，在该单元格上方插入图像，在该单元格上方插入图像ai01.gif，调整，调整图像大小以适应单元格。图像大小以适应单元格。(2) 将光标置于所插入图像的下方，选择菜单将光标置于所插入图像的下方，选择菜单【插入插入】|【表格表格】，插入一个，插入一个5行行1列，宽度为列，宽度为140像素，边框像素，边框粗细、单元格边距为粗细、单元格边距为0，单元格间距为，单元格间距为20的表格。的表格。(3) 在表格的各行分别输入文字：在表格的各行分别输入文字：“驿站首页驿站首页”，“时尚时尚话题话题”，

15、“心情文章心情文章”，“热点讨论热点讨论”和和“驿站留驿站留言言”。在属性面板上设置文字字体为默认字体，大小。在属性面板上设置文字字体为默认字体，大小为为14，居中。，居中。网页设计范例网页设计范例编辑ppt (4) 建立超级链接。选择建立超级链接。选择“驿站首页驿站首页”四个字，在四个字，在属性面板的属性面板的【链接链接】框中选择框中选择index1.htm（即本主（即本主页）。同理，设置页）。同理，设置“时尚话题时尚话题” 链接到网页文件链接到网页文件shishanghuati.htm；设置；设置“心情文章心情文章” 链接到网链接到网页文件页文件xinqingwenzhang.htm；设置

16、；设置“热点讨论热点讨论” 链接到网页文件链接到网页文件rediantaolun.htm；在；在“驿站留言驿站留言” 链接框中写入如下脚本：链接框中写入如下脚本：mailto:，即当单击该链接，即当单击该链接时，。时，。网页设计范例网页设计范例编辑ppt10.3.5 主体部分的设计主体部分的设计 在主体部分包含导航区主菜单中对应在主体部分包含导航区主菜单中对应选项中的主要内容，可以从这里快速点击选项中的主要内容，可以从这里快速点击进入浏览。进入浏览。网页设计范例网页设计范例编辑ppt1利用表格布局利用表格布局(1) 将光标置于主体区单元格中，即导航区右侧单元格，将光标置于主体区单元格中，即导航

17、区右侧单元格，选择菜单选择菜单【插入插入】|【表格表格】，插入一个，插入一个4行行2列，宽列，宽度为度为650像素，边框粗细为像素，边框粗细为2，单元格边距及单元格间，单元格边距及单元格间距为距为0，其余各项为默认的表格。调整表格各行到合适，其余各项为默认的表格。调整表格各行到合适高度。高度。(2) 将光标置于上述表格的第将光标置于上述表格的第2行第行第1列对应的单元格，列对应的单元格，选择菜单选择菜单【插入插入】|【表格表格】，插入一个，插入一个6行行1列，宽列，宽度为度为300像素，高为像素，高为180像素，边框粗细、单元格边像素，边框粗细、单元格边距及单元格间距均为距及单元格间距均为0，

18、居中对齐，其余各项为默认的，居中对齐，其余各项为默认的表格。表格。(3) 将上一步制作的表格拷贝下来。分别粘贴到第将上一步制作的表格拷贝下来。分别粘贴到第2行第行第2列及第列及第4行第行第1列对应的单元格中。列对应的单元格中。 网页设计范例网页设计范例编辑ppt(4) 将光标置于第将光标置于第4行第行第2列对应的单元格中，选择列对应的单元格中，选择菜单菜单【插入插入】|【表格表格】，插入一个，插入一个2行行2列，宽列，宽度为度为320像素，边框粗细、单元格边距及单元格像素，边框粗细、单元格边距及单元格间距均为间距均为0，居中对齐，其余各项为默认的表格。，居中对齐，其余各项为默认的表格。选择菜单

19、选择菜单【修改修改】|【表格表格】将该表格第将该表格第1行两个行两个单元格合并。单元格合并。 网页设计范例网页设计范例编辑ppt2添加网页元素添加网页元素(1) 添加单元格背景。将主体部分大表格的第添加单元格背景。将主体部分大表格的第1行行及第及第3行加入背景图片行加入背景图片3rd_middle_left_bg1.gif(2) 添加图片。在主体部分大表格的第添加图片。在主体部分大表格的第1行及第行及第3行行的单元格左侧插入图片的单元格左侧插入图片heart_s.gif。(3) 输入文字。在各单元格中输入对应文字，字体输入文字。在各单元格中输入对应文字，字体为默认字体，大小为为默认字体，大小为

20、14。网页设计范例网页设计范例编辑ppt(4) 设置超级链接。将设置超级链接。将“时尚话题时尚话题”下的下的“头发的头发的时尚时尚”、“城市的性格城市的性格”和和“服装百年服装百年”分别链分别链接到接到toufashishang.htm，chengshidexingge.htm和和fuzhuangbainian.htm；将；将“热点讨论热点讨论”下的下的“大学生校外租房调查大学生校外租房调查”链接到链接到rediantaolun.htm；将；将“心情文章心情文章”下所有的下所有的各项均链接到各项均链接到xinqingwenzhang.htm。(5) 将主体部分的表格加入背景图片。在表格属性将主

21、体部分的表格加入背景图片。在表格属性面板的面板的【背景背景】框中选择框中选择xmasbg4.gif。网页设计范例网页设计范例编辑ppt10.3.6 添加页面动态效果添加页面动态效果为了增强页面的显示效果及功能，可以在页面上适当为了增强页面的显示效果及功能，可以在页面上适当地添加些地添加些JavaScript脚本。脚本。在页面中添加在页面中添加JavaScript脚本，可以有两种方法，脚本，可以有两种方法，一种是使用一种是使用Dreamweaver MX提供的行为功能，另一提供的行为功能，另一种是直接在网页种是直接在网页HTML代码中使用代码中使用标志直接写标志直接写入入JavaScript脚本

22、。脚本。网页设计范例网页设计范例编辑ppt1设置状态栏文本设置状态栏文本 (1) 选中当前主页文档选中当前主页文档index1.htm下部的标签选择器中下部的标签选择器中的的标签。标签。(2) 选择菜单选择菜单【窗口窗口】|【行为行为】，打开行为面板。，打开行为面板。(3) 单击面板中的按钮，从弹出菜单中选择单击面板中的按钮，从弹出菜单中选择【设置文本设置文本】|【设置状态栏文本设置状态栏文本】，。打开，。打开【设置状态栏文本设置状态栏文本】对对话框。在该对话框中的文本框中输入文字话框。在该对话框中的文本框中输入文字“欢迎你的欢迎你的到来到来,光临属于你的、我的、大家的青春驿站光临属于你的、我

23、的、大家的青春驿站!”，单击，单击 【确定确定】按钮返回。按钮返回。 (4) 存盘预览，则可以看见在页面状态栏中显示的文字。存盘预览，则可以看见在页面状态栏中显示的文字。 网页设计范例网页设计范例编辑ppt2显示当前日期显示当前日期(1) 在在【设计设计】视图中，将光标置于欲显示日期的视图中，将光标置于欲显示日期的单元格中。单元格中。(2) 切换到切换到【代码代码】视图中，在光标所在位置输入视图中，在光标所在位置输入如下代码：如下代码：网页设计范例网页设计范例编辑ppt10.4 制作制作“时尚话题时尚话题”页面页面10.4.1 网页横幅的制作网页横幅的制作1表格布局表格布局插入一个插入一个1行

24、行2列宽度为列宽度为800个像素的表格。个像素的表格。2插入图像插入图像在上述左侧单元格中插入图像在上述左侧单元格中插入图像text.gif，在右侧单元格，在右侧单元格中插入图像中插入图像4.gif。网页设计范例网页设计范例编辑ppt10.4.2 主体部分制作主体部分制作1表格布局表格布局(1) 将光标置于横幅下面，插入一个将光标置于横幅下面，插入一个3行行2列宽度为列宽度为800像像素的表格。素的表格。(2) 选中第选中第3行两个单元格，选择菜单行两个单元格，选择菜单【修改修改】|【表格表格】|【合并单元格合并单元格】。2第第1行第行第1列对应的单元格的设计列对应的单元格的设计(1) 在该单

25、元格中插入一个在该单元格中插入一个2行行2列的表格。列的表格。(2) 在该表格的四个单元格中，顺次插入四个图像：在该表格的四个单元格中，顺次插入四个图像：fashion_left_1.jpg，fashion_left_2.jpg，fashion_left_3.jpg和和fashion_left_4.jpg，构成一个完整，构成一个完整的画面。的画面。网页设计范例网页设计范例编辑ppt3第第1行第行第2列对应的单元格的设计列对应的单元格的设计(1) 在该单元格中插入一个在该单元格中插入一个9行行3列的表格。列的表格。(2) 合并第合并第1行行3个单元格个单元格,在合并后的单元格中插入图像在合并后的

26、单元格中插入图像fashion_titleright01.gif。(3) 适当的调整下面适当的调整下面8行各列的宽度。行各列的宽度。(4) 分别在第分别在第2行、第行、第4行和第行和第6行的第行的第1列单元格中插入图像列单元格中插入图像index_image15_1.gif，index_image15_2.gif和和index_image15_3.gif。网页设计范例网页设计范例编辑ppt(5) 在其余单元格中输入文本。字体为默认字体，在其余单元格中输入文本。字体为默认字体，3个标题的字体大小为个标题的字体大小为14，其余大小默认。，其余大小默认。(6) 设置设置3个标题的超链接：个标题的超链

27、接：“头发的时尚头发的时尚”链链接至接至toufashishang.htm；“城市的性格城市的性格”链链接至接至chengshidexingge.htm；“服装百年服装百年”链链接至接至fuzhuangbainian.htm。网页设计范例网页设计范例编辑ppt4第第2行单元格的设计行单元格的设计(1) 在左侧单元格中插入图像在左侧单元格中插入图像linker.gif。(2) 在右侧单元格中输入文本在右侧单元格中输入文本“【返回主页返回主页】”。(3) 将将“返回主页返回主页”链接至主页链接至主页index1.htm。网页设计范例网页设计范例编辑ppt5第第3行单元格的设计行单元格的设计在该单元

28、格中插入图像在该单元格中插入图像xjtu_05.jpg，并调整，并调整该图像的大小，使之占满整个单元格。该图像的大小，使之占满整个单元格。网页设计范例网页设计范例编辑ppt10.5 制作制作“头发的时尚头发的时尚”、“城市的性格城市的性格”及及“服装百年服装百年”页面页面“头发的时尚头发的时尚”、“城市的性格城市的性格”及及“服装百年服装百年”这三个页面同属这三个页面同属“时尚话题时尚话题”的下级页面，整体风的下级页面，整体风格一致，故利用模板来创建。格一致，故利用模板来创建。 网页设计范例网页设计范例编辑ppt10.5.1 创建创建“时尚话题模板时尚话题模板”模板页模板页1新建新建HTML模

29、板文档模板文档 选择菜单选择菜单【文件文件】|【新建新建】，则弹出，则弹出【新建文新建文档档】对话框。在该对话框中选择对话框。在该对话框中选择【常规常规】选项卡，选项卡，在在【类别类别】选项中选择选项中选择【模板页模板页】，然后在，然后在【模板模板页页】列表框中选择列表框中选择【HTML模板模板】，单击，单击【创建创建】按钮即创建一个按钮即创建一个HTML模板页文档。模板页文档。网页设计范例网页设计范例编辑ppt2定义页标题定义页标题在文档工具栏的标题栏中，输入网页标在文档工具栏的标题栏中，输入网页标题题“时尚话题模板时尚话题模板” 网页设计范例网页设计范例编辑ppt3网页横幅的制作网页横幅的

30、制作(1) 表格布局表格布局插入一个插入一个1行行2列宽度为列宽度为800个像素的表格。个像素的表格。(2) 插入图像插入图像选择菜单选择菜单【插入插入】|【图像图像】，在上述左侧单元格中插入，在上述左侧单元格中插入图像图像text.gif，在右侧单元格中插入图像，在右侧单元格中插入图像4.gif。网页设计范例网页设计范例编辑ppt4主体部分制作主体部分制作(1) 表格布局表格布局 光标置于横幅下面，插入一个光标置于横幅下面，插入一个3行行2列宽度为列宽度为800像素像素的表格，并适当调整表格中间的框线，使左侧列的宽的表格，并适当调整表格中间的框线，使左侧列的宽度大约为度大约为330像素。像素

31、。 选中第选中第3行两个单元格，选择菜单行两个单元格，选择菜单【修改修改】|【表格表格】|【合并单元格合并单元格】。网页设计范例网页设计范例编辑ppt(2) 第第1行第行第1列对应的单元格的设计列对应的单元格的设计 在该单元格中插入一个在该单元格中插入一个2行行1列的表格。列的表格。 在该表格的第在该表格的第1行单元格中，插入图像行单元格中，插入图像fashion_titleright01.gif。 在该表格的第在该表格的第2行单元格中，插入一个行单元格中，插入一个3行行1列，宽度列，宽度为为300像素，间距为像素，间距为10像素的表格。在表格的三个单像素的表格。在表格的三个单元格中分别输入：

32、元格中分别输入：“头发的时尚头发的时尚”，“城市的性格城市的性格”和和“服装百年服装百年”。并设置它们分别链接到网页：。并设置它们分别链接到网页：toufashishang.htm，chengshidexingge.htm和和fuzhuangbainian.htm。网页设计范例网页设计范例编辑ppt(3) 第第1行第行第2列对应的单元格的设计列对应的单元格的设计在该单元格中插入一个在该单元格中插入一个1行，行，1列的表格，准备作为文本列的表格，准备作为文本的输入区域。的输入区域。(4) 第第2行单元格的设计行单元格的设计 在左侧单元格中插入图像在左侧单元格中插入图像linker.gif。 在右

33、侧单元格中输入文本在右侧单元格中输入文本“【返回主页返回主页】”。 将将“返回主页返回主页”链接至主页链接至主页index1.htm。(5) 第第3行单元格的设计行单元格的设计在该单元格中插入图像在该单元格中插入图像xjtu_05.jpg，并调整该图像的，并调整该图像的大小，使之占满整个单元格大小，使之占满整个单元格 网页设计范例网页设计范例编辑ppt5定义模板的可编辑区域定义模板的可编辑区域(1) 页面标题部分是默认的可编辑区域，不用加以设置。页面标题部分是默认的可编辑区域，不用加以设置。(2) 定义主体部分输入文本区域为可编辑区域定义主体部分输入文本区域为可编辑区域 选中主体部分第选中主体

34、部分第1行第行第2列插入的准备输入文本区域的列插入的准备输入文本区域的表格表格 选择菜单选择菜单【插入插入】|【模板对象模板对象】|【可编辑区域可编辑区域】，打开打开【新建可编辑区域新建可编辑区域】对话框，在对话框，在【名称名称】栏中输栏中输入入“EditRegion1”。 单击单击【确定确定】按钮，关闭按钮，关闭【新建可编辑区域新建可编辑区域】对话框。对话框。 网页设计范例网页设计范例编辑ppt6保存模板文档保存模板文档将当前模板文档保存为将当前模板文档保存为shishangsample.dwt。此时，在当前的此时，在当前的youngsite站点的根目录中自动增加站点的根目录中自动增加一个文

35、件夹一个文件夹Templates，新保存的模板就在该文件夹，新保存的模板就在该文件夹中。中。网页设计范例网页设计范例编辑ppt10.5.2 使用使用“时尚话题模板时尚话题模板”创建文档创建文档1创建创建“头发的时尚头发的时尚”页面页面(1) 选择菜单选择菜单【文件文件】|【新建新建】，则弹出，则弹出【新建文档新建文档】对话框，在该对话框中选择对话框，在该对话框中选择【模板模板】选项卡。选项卡。(2) 选中选中【当模板改变时更新页面当模板改变时更新页面】选项，单击选项，单击【创建创建】按钮，进入新文档设计视图。在该视图中，光标只能按钮，进入新文档设计视图。在该视图中，光标只能移动到可编辑区域。移

36、动到可编辑区域。(3) 改变文档标题为改变文档标题为“头发的时尚头发的时尚”。(4) 将光标移到将光标移到EditRegion1，输入对应文字。，输入对应文字。(5) 保存文档为保存文档为toufashishang.htm。 网页设计范例网页设计范例编辑ppt2创建创建“城市的性格城市的性格” 和和“服装百年服装百年”页面页面 按照按照 “1创建创建头发的时尚头发的时尚页面页面”的方法，的方法，来创建来创建“城市的性格城市的性格” 和和“服装百年服装百年”页面，页面，只需将文档标题分别改变为只需将文档标题分别改变为“城市的性格城市的性格”和和“服装百年服装百年”；将文档分别保存为；将文档分别保

37、存为chengshidexingge.htm和和fuzhuangbainian.htm。 网页设计范例网页设计范例编辑ppt10.6 制作制作“心情文章心情文章”页面页面10.6.1 网页横幅的制作网页横幅的制作1表格布局表格布局插入一个插入一个1行行2列宽度为列宽度为800个像素的表格。个像素的表格。2插入图像插入图像在上述左侧单元格中插入图像在上述左侧单元格中插入图像text.gif，在右侧单元格中，在右侧单元格中插入图像插入图像5.gif。网页设计范例网页设计范例编辑ppt10.6.2 主体部分制作主体部分制作1表格布局表格布局将光标置于横幅下面，插入一个将光标置于横幅下面，插入一个3行

38、行1列宽度为列宽度为800个像素个像素的表格。的表格。2第第1行单元格的设计行单元格的设计(1) 在该单元格中插入一个在该单元格中插入一个4行行3列，宽为列，宽为795，边框粗细，边框粗细为为2的表格。的表格。(2) 在该表格第在该表格第1行第行第1列、第列、第2行第行第3列、第列、第3行第行第1列及第列及第4行第行第3列对应的单元格内，各插入一个列对应的单元格内，各插入一个2行行1列，宽度列，宽度为为250像素的表格。在表格的第像素的表格。在表格的第1行输入文字标题，第行输入文字标题，第2行输入对应正文行输入对应正文 。网页设计范例网页设计范例编辑ppt(3) 在该表格第在该表格第1行第行第

39、3列、第列、第2行第行第2列、第列、第3行第行第3列及第列及第4行第行第2列对应的单元格内，依次插入四个图像：列对应的单元格内，依次插入四个图像：489.jpg，472.jpg，fullimage.jpg和和phot065.jpg。 (4) 在第在第1行第行第2列对应的单元格内输入文字列对应的单元格内输入文字“心情文章心情文章”，字体为字体为“华文行楷华文行楷”，大小为，大小为7，颜色为蓝色，颜色为蓝色（#0099FF），居中。），居中。网页设计范例网页设计范例编辑ppt3第第2行单元格的设计行单元格的设计在该单元格中输入文本在该单元格中输入文本“【返回主页返回主页】”，居中。将，居中。将“返

40、回主页返回主页”链接至主页链接至主页index1.htm4第第3行单元格的设计行单元格的设计在该单元格中插入图像在该单元格中插入图像huabian01.gif，居中。，居中。网页设计范例网页设计范例编辑ppt10.7 制作制作“热点讨论热点讨论”页面页面10.7.1 网页横幅的制作网页横幅的制作1表格布局表格布局插入一个插入一个1行行2列宽度为列宽度为800个像素的表格。个像素的表格。2插入图像插入图像在上述左侧单元格中插入图像在上述左侧单元格中插入图像text.gif，在右侧单元格中，在右侧单元格中插入图像插入图像6.gif。网页设计范例网页设计范例编辑ppt(3) 左侧单元格的设计左侧单元

41、格的设计在该单元格插入一个在该单元格插入一个9行行1列的表格，分别在第列的表格，分别在第1、3、5、7、9行输入文字及插入图像行输入文字及插入图像soap1.jpg、ashtray1.jpg、soap2.jpg和和ashtray2.jpg，在插入的过程中适当调整表格，在插入的过程中适当调整表格边线的位置，达到美观的效果。边线的位置，达到美观的效果。3第第2行单元格的设计行单元格的设计在该单元格中输入文本在该单元格中输入文本“【返回主页返回主页】”，居中。将，居中。将“返回主页返回主页”链接至主页链接至主页index1.htm。 网页设计范例网页设计范例编辑ppt10.7.2 主体部分制作主体部

42、分制作1表格布局表格布局将光标置于横幅下面，插入一个将光标置于横幅下面，插入一个2行行1列宽度为列宽度为800个个像素的表格。像素的表格。2第第1行单元格的设计行单元格的设计(1) 将该单元格中拆分成将该单元格中拆分成2列。将第列。将第1列的宽度调整为列的宽度调整为大约大约136像素。像素。(2) 右侧单元格的设计右侧单元格的设计在该单元格插入一个在该单元格插入一个6行行1列边框为列边框为2的表格。在表格的表格。在表格的第的第1行输入讨论的标题：行输入讨论的标题：“冰与火冰与火 大学生校外租房调大学生校外租房调查查”；在以下各行分别插入图像；在以下各行分别插入图像04062801c.jpg，04062801d.jpg，04062801e.jp