青春驿站网页设计范例ppt课件

1、青春驿站网页设计范例,1,第10章 网页设计范例,10.1 设计站点 10.2 10.3 制作主页 10.4 10.5 10.6 10.7 10.8 测试和上传站点,青春驿站网页设计范例,2,主要内容,本章我们将通过详细描述一个网站 “青春驿站”的建设过程，学习用Dreamweaver mx 2004制作一个完整的站点的步骤与关键技术。,青春驿站网页设计范例,3,本章重点,网站建设过程 网页设计常用技术,青春驿站网页设计范例,4,通过本章的学习，熟悉网站建设的全过程，掌握网页设计常用技术。,教学目标,青春驿站网页设计范例,5,“青春驿站”是一个流溢着青春气息的网站，网页的内容围绕着年青人喜欢的

2、主题展开。,10.1 设计站点,青春驿站网页设计范例,6,10.1.1 网站的总体结构,青春驿站网页设计范例,7,10.1.2 建立站点,本例是在E盘book文件夹下建立一个名为youngsite的站点。制作步骤如下： （1）先在E盘book文件夹下建立一个名为youngsite的文件夹，用来存放创建的网页；在youngsite文件夹下建立一个名为images的文件夹，用以存放站点中的图像，可以把要用的图片先放入该文件夹中。 （2）选择【站点】|【管理站点】，打开【管理站点】对话框，单击【新建】按钮，在弹出的下拉菜单中选择【站点】命令，在打开的【站点定义】对话框中做如图10.2所示的设置。此时

3、站点管理面板如图10.3所示。,青春驿站网页设计范例,8,图10.2 站点定义对话框,青春驿站网页设计范例,9,图10.3 站点管理面板,青春驿站网页设计范例,10,10.1.3 生成网页,1. 生成进站页面 (1) 选择菜单【文件】|【新建】，则弹出【新建文档】对话框，在该对话框中选择【常规】选项卡，在【类别】选项中选择【基本页】，然后在【基本页】列表框中选择HTML，单击【创建】按钮即创建一个HTML页面文档。 (2) 在文档工具栏的标题栏中，输入网页标题“进站页面”。 (3) 选择菜单【文件】|【保存】，则弹出【另存为】对话框，则将该页面以index.htm的名字保存在E:bookyou

4、ngsite中。,青春驿站网页设计范例,11,2生成主页及其它页面,以相同方法生成主页及其它页面，各个页面的名称及存储位置见图10.4所示。,图10.4 主页及其它页面,青春驿站网页设计范例,12,10.2 制作进站页面,打开进站页面文档index.htm，进行设计。 1用表格进行整体布局 选择菜单【插入】|【表格】或在插入工具栏中的【布局】类中选择表格按钮，则会出现【表格】设置对话框，插入一个4行1列宽度为800个像素的表格。,青春驿站网页设计范例,13,2添加网页元素,(1) 在表格中的第1行，输入“青春驿站”四个字，选择这四个字，在属性面板中进行设置，字体为“华文行楷”，大小为20。单元

5、格对齐方式为水平“居中对齐”，垂直“居中”。 (2) 在表格中的第2行和第4行，分别输入如图10.5所示的第2行文字“青春的美丽”和最后一行文字“欢迎你的到来”。选择这些文字，在属性面板中进行设置，字体和大小都为“默认”。单元格对齐方式为水平“居中对齐”，垂直“居中”。 (3) 选择菜单【插入】|【图像】在表格中的第3行，插入图像43.jpg。,青春驿站网页设计范例,14,3页面属性的设置,选择菜单【修改】|【页面属性】，在打开的页面属性对话框中进行设置，将背景颜色设为绿色(#99CC33)，文本颜色设为白色(#FFFFFF)。,青春驿站网页设计范例,15,10.3 制作主页,青春驿站网页设计

6、范例,16,10.3.1 整体效果设计,主页采用T形布局，页面上部为横幅及网站标志，下方左半部分为导航区，右半部分为网页主体显示内容的布局。 主页的色彩以蓝绿色为主，给人以青春、旺盛的感觉。 整个页面共插入了六幅gif图像，其中四幅静态图像分别作为网页横幅部分、网页标志、表格单元格的背景，给页面添加了美感，容易使人产生联想；而在左下半部分的主菜单上方及作为网页主页部分的背景的动态gif图像的插入，赋予整个页面以动感，给人以明快的感觉。 主页中的文字采用的是浏览器的默认字体，即中文宋体和英文Times New Roman字体，显得整齐有序。,青春驿站网页设计范例,17,10.3.2 用表格进行整

7、体布局并设置,(1)插入一个3行1列，宽度为800个像素，边框粗细、单元格边距及单元格间距均为0的表格。 (2) 将光标置于表格第1行，选择【修改】|【表格】|【拆分单元格】，将单元格拆分成2列。拖动两列中间的框线，使左侧宽度大约在150像素。 (3) 将光标置于表格第1行中第1个单元格，选择【修改】|【表格】|【拆分单元格】，将单元格拆分成2行。 (4) 将光标置于表格第2行，选择【修改】|【表格】|【拆分单元格】，将单元格拆分成2列。,青春驿站网页设计范例,18,10.3.3 网页横幅及标志部分的设计,(1) 将光标置于第1行第2列单元格中，选择菜单【插入】|【图像】，插入图像5.gif，

8、调整大小到适当宽度。 (2) 将光标置于第1行第1列上面的单元格中，选择菜单【插入】|【图像】，插入图像text.gif。在属性面板上，设置图像居中，其余默认。 (3) 将光标置于表格的第3行，输入文字：Copyright 2005 ，All Rights Reserved 青春驿站。在属性面板上，设置文字居中，其余默认。 (4) 横幅部分的当前日期，是通过在代码中插入一段JavaScript代码来实现的。,青春驿站网页设计范例,19,10.3.4 导航区的设计,(1) 将光标置于左下方单元格中，选择菜单【插入】|【图像】，在该单元格上方插入图像ai01.gif，调整图像大小以适应单元格。 (

9、2) 将光标置于所插入图像的下方，选择菜单【插入】|【表格】，插入一个5行1列，宽度为140像素，边框粗细、单元格边距为0，单元格间距为20的表格。 (3) 在表格的各行分别输入文字：“驿站首页”，“时尚话题”，“心情文章”，“热点讨论”和“驿站留言”。在属性面板上设置文字字体为默认字体，大小为14，居中。,青春驿站网页设计范例,20,(4) 建立超级链接。选择“驿站首页”四个字，在属性面板的【链接】框中选择index1.htm（即本主页）。同理，设置“时尚话题” 链接到网页文件shishanghuati.htm；设置“心情文章” 链接到网页文件xinqingwenzhang.htm；设置“热

10、点讨论” 链接到网页文件rediantaolun.htm；在“驿站留言” 链接框中写入如下脚本：mailto:，即当单击该链接时，。,青春驿站网页设计范例,21,10.3.5 主体部分的设计,在主体部分包含导航区主菜单中对应选项中的主要内容，可以从这里快速点击进入浏览。,青春驿站网页设计范例,22,1利用表格布局,(1) 将光标置于主体区单元格中，即导航区右侧单元格，选择菜单【插入】|【表格】，插入一个4行2列，宽度为650像素，边框粗细为2，单元格边距及单元格间距为0，其余各项为默认的表格。调整表格各行到合适高度。 (2) 将光标置于上述表格的第2行第1列对应的单元格，选择菜单【插入】|【表

11、格】，插入一个6行1列，宽度为300像素，高为180像素，边框粗细、单元格边距及单元格间距均为0，居中对齐，其余各项为默认的表格。 (3) 将上一步制作的表格拷贝下来。分别粘贴到第2行第2列及第4行第1列对应的单元格中。,青春驿站网页设计范例,23,(4) 将光标置于第4行第2列对应的单元格中，选择菜单【插入】|【表格】，插入一个2行2列，宽度为320像素，边框粗细、单元格边距及单元格间距均为0，居中对齐，其余各项为默认的表格。选择菜单【修改】|【表格】将该表格第1行两个单元格合并。,青春驿站网页设计范例,24,2添加网页元素,(1) 添加单元格背景。将主体部分大表格的第1行及第3行加入背景图

12、片3rd_middle_left_bg1.gif (2) 添加图片。在主体部分大表格的第1行及第3行的单元格左侧插入图片heart_s.gif。 (3) 输入文字。在各单元格中输入对应文字，字体为默认字体，大小为14。,青春驿站网页设计范例,25,(4) 设置超级链接。将“时尚话题”下的“头发的时尚”、“城市的性格”和“服装百年”分别链接到toufashishang.htm，chengshidexingge.htm和fuzhuangbainian.htm；将“热点讨论”下的“大学生校外租房调查”链接到rediantaolun.htm；将“心情文章”下所有的各项均链接到xinqingwenzha

13、ng.htm。 (5) 将主体部分的表格加入背景图片。在表格属性面板的【背景】框中选择xmasbg4.gif。,青春驿站网页设计范例,26,10.3.6 添加页面动态效果,为了增强页面的显示效果及功能，可以在页面上适当地添加些JavaScript脚本。 在页面中添加JavaScript脚本，可以有两种方法，一种是使用Dreamweaver MX提供的行为功能，另一种是直接在网页HTML代码中使用标志直接写入JavaScript脚本。,青春驿站网页设计范例,27,1设置状态栏文本,(1) 选中当前主页文档index1.htm下部的标签选择器中的标签。 (2) 选择菜单【窗口】|【行为】，打开行为

14、面板。 (3) 单击面板中的按钮，从弹出菜单中选择【设置文本】|【设置状态栏文本】，。打开【设置状态栏文本】对话框。在该对话框中的文本框中输入文字“欢迎你的到来,光临属于你的、我的、大家的青春驿站!”，单击 【确定】按钮返回。 (4) 存盘预览，则可以看见在页面状态栏中显示的文字。,青春驿站网页设计范例,28,2显示当前日期,(1) 在【设计】视图中，将光标置于欲显示日期的单元格中。 (2) 切换到【代码】视图中，在光标所在位置输入如下代码： ,青春驿站网页设计范例,29,10.4 制作“时尚话题”页面,10.4.1 网页横幅的制作 1表格布局 插入一个1行2列宽度为800个像素的表格。 2插

15、入图像 在上述左侧单元格中插入图像text.gif，在右侧单元格中插入图像4.gif。,青春驿站网页设计范例,30,10.4.2 主体部分制作,1表格布局 (1) 将光标置于横幅下面，插入一个3行2列宽度为800像素的表格。 (2) 选中第3行两个单元格，选择菜单【修改】|【表格】|【合并单元格】。 2第1行第1列对应的单元格的设计 (1) 在该单元格中插入一个2行2列的表格。 (2) 在该表格的四个单元格中，顺次插入四个图像：fashion_left_1.jpg，fashion_left_2.jpg，fashion_left_3.jpg和fashion_left_4.jpg，构成一个完整的画

16、面。,青春驿站网页设计范例,31,3第1行第2列对应的单元格的设计,(1) 在该单元格中插入一个9行3列的表格。 (2) 合并第1行3个单元格,在合并后的单元格中插入图像fashion_titleright01.gif。 (3) 适当的调整下面8行各列的宽度。 (4) 分别在第2行、第4行和第6行的第1列单元格中插入图像index_image15_1.gif，index_image15_2.gif和index_image15_3.gif。,青春驿站网页设计范例,32,(5) 在其余单元格中输入文本。字体为默认字体，3个标题的字体大小为14，其余大小默认。 (6) 设置3个标题的超链接：“头发的

17、时尚”链接至toufashishang.htm；“城市的性格”链接至chengshidexingge.htm；“服装百年”链接至fuzhuangbainian.htm。,青春驿站网页设计范例,33,4第2行单元格的设计,(1) 在左侧单元格中插入图像linker.gif。 (2) 在右侧单元格中输入文本“【返回主页】”。 (3) 将“返回主页”链接至主页index1.htm。,青春驿站网页设计范例,34,5第3行单元格的设计,在该单元格中插入图像xjtu_05.jpg，并调整该图像的大小，使之占满整个单元格。,青春驿站网页设计范例,35,10.5 制作“头发的时尚”、“城市的性格”及“服装百年

18、”页面,“头发的时尚”、“城市的性格”及“服装百年”这三个页面同属“时尚话题”的下级页面，整体风格一致，故利用模板来创建。,青春驿站网页设计范例,36,10.5.1 创建“时尚话题模板”模板页,1新建HTML模板文档 选择菜单【文件】|【新建】，则弹出【新建文档】对话框。在该对话框中选择【常规】选项卡，在【类别】选项中选择【模板页】，然后在【模板页】列表框中选择【HTML模板】，单击【创建】按钮即创建一个HTML模板页文档。,青春驿站网页设计范例,37,2定义页标题,在文档工具栏的标题栏中，输入网页标题“时尚话题模板”,青春驿站网页设计范例,38,3网页横幅的制作,(1) 表格布局 插入一个1

19、行2列宽度为800个像素的表格。 (2) 插入图像 选择菜单【插入】|【图像】，在上述左侧单元格中插入图像text.gif，在右侧单元格中插入图像4.gif。,青春驿站网页设计范例,39,4主体部分制作,(1) 表格布局 光标置于横幅下面，插入一个3行2列宽度为800像素的表格，并适当调整表格中间的框线，使左侧列的宽度大约为330像素。 选中第3行两个单元格，选择菜单【修改】|【表格】|【合并单元格】。,青春驿站网页设计范例,40,(2) 第1行第1列对应的单元格的设计 在该单元格中插入一个2行1列的表格。 在该表格的第1行单元格中，插入图像fashion_titleright01.gif。

20、在该表格的第2行单元格中，插入一个3行1列，宽度为300像素，间距为10像素的表格。在表格的三个单元格中分别输入：“头发的时尚”，“城市的性格”和“服装百年”。并设置它们分别链接到网页：toufashishang.htm，chengshidexingge.htm和fuzhuangbainian.htm。,青春驿站网页设计范例,41,(3) 第1行第2列对应的单元格的设计 在该单元格中插入一个1行，1列的表格，准备作为文本的输入区域。 (4) 第2行单元格的设计 在左侧单元格中插入图像linker.gif。 在右侧单元格中输入文本“【返回主页】”。 将“返回主页”链接至主页index1.htm。

21、 (5) 第3行单元格的设计 在该单元格中插入图像xjtu_05.jpg，并调整该图像的大小，使之占满整个单元格,青春驿站网页设计范例,42,5定义模板的可编辑区域,(1) 页面标题部分是默认的可编辑区域，不用加以设置。 (2) 定义主体部分输入文本区域为可编辑区域 选中主体部分第1行第2列插入的准备输入文本区域的表格 选择菜单【插入】|【模板对象】|【可编辑区域】，打开【新建可编辑区域】对话框，在【名称】栏中输入“EditRegion1”。 单击【确定】按钮，关闭【新建可编辑区域】对话框。,青春驿站网页设计范例,43,6保存模板文档,将当前模板文档保存为shishangsample.dwt。

22、此时，在当前的youngsite站点的根目录中自动增加一个文件夹Templates，新保存的模板就在该文件夹中。,青春驿站网页设计范例,44,10.5.2 使用“时尚话题模板”创建文档,1创建“头发的时尚”页面 (1) 选择菜单【文件】|【新建】，则弹出【新建文档】对话框，在该对话框中选择【模板】选项卡。 (2) 选中【当模板改变时更新页面】选项，单击【创建】按钮，进入新文档设计视图。在该视图中，光标只能移动到可编辑区域。 (3) 改变文档标题为“头发的时尚”。 (4) 将光标移到EditRegion1，输入对应文字。 (5) 保存文档为toufashishang.htm。,青春驿站网页设计范

23、例,45,2创建“城市的性格” 和“服装百年”页面,按照 “1创建头发的时尚页面”的方法，来创建“城市的性格” 和“服装百年”页面， 只需将文档标题分别改变为“城市的性格”和“服装百年”；将文档分别保存为chengshidexingge.htm和fuzhuangbainian.htm。,青春驿站网页设计范例,46,10.6 制作“心情文章”页面,10.6.1 网页横幅的制作 1表格布局 插入一个1行2列宽度为800个像素的表格。 2插入图像 在上述左侧单元格中插入图像text.gif，在右侧单元格中插入图像5.gif。,青春驿站网页设计范例,47,10.6.2 主体部分制作,1表格布局 将光标

24、置于横幅下面，插入一个3行1列宽度为800个像素的表格。 2第1行单元格的设计 (1) 在该单元格中插入一个4行3列，宽为795，边框粗细为2的表格。 (2) 在该表格第1行第1列、第2行第3列、第3行第1列及第4行第3列对应的单元格内，各插入一个2行1列，宽度为250像素的表格。在表格的第1行输入文字标题，第2行输入对应正文 。,青春驿站网页设计范例,48,(3) 在该表格第1行第3列、第2行第2列、第3行第3列及第4行第2列对应的单元格内，依次插入四个图像：489.jpg，472.jpg，fullimage.jpg和phot065.jpg。 (4) 在第1行第2列对应的单元格内输入文字“心

25、情文章”，字体为“华文行楷”，大小为7，颜色为蓝色（#0099FF），居中。,青春驿站网页设计范例,49,3第2行单元格的设计 在该单元格中输入文本“【返回主页】”，居中。将“返回主页”链接至主页index1.htm 4第3行单元格的设计 在该单元格中插入图像huabian01.gif，居中。,青春驿站网页设计范例,50,10.7 制作“热点讨论”页面,10.7.1 网页横幅的制作 1表格布局 插入一个1行2列宽度为800个像素的表格。 2插入图像 在上述左侧单元格中插入图像text.gif，在右侧单元格中插入图像6.gif。,青春驿站网页设计范例,51,(3) 左侧单元格的设计 在该单元格插

26、入一个9行1列的表格，分别在第1、3、5、7、9行输入文字及插入图像soap1.jpg、ashtray1.jpg、soap2.jpg和ashtray2.jpg，在插入的过程中适当调整表格边线的位置，达到美观的效果。 3第2行单元格的设计 在该单元格中输入文本“【返回主页】”，居中。将“返回主页”链接至主页index1.htm。,青春驿站网页设计范例,52,10.7.2 主体部分制作,1表格布局 将光标置于横幅下面，插入一个2行1列宽度为800个像素的表格。 2第1行单元格的设计 (1) 将该单元格中拆分成2列。将第1列的宽度调整为大约136像素。 (2) 右侧单元格的设计 在该单元格插入一个6行1列边框为2的表格。在表格的第1行输入讨论的标题：“冰与火