青春驿站网页设计范例.ppt

1、网页设计范例网页设计范例第第10章章 网页设计范例网页设计范例 n10.1 10.1 设计站点设计站点n10.2 10.2 制作进站页面制作进站页面n10.3 10.3 制作主页制作主页n10.4 10.4 制作制作“时尚话题时尚话题”页面页面n10.5 10.5 制作制作“头发的时尚头发的时尚”、“城市的城市的性格性格”及及“服装百年服装百年”页面页面 n10.6 10.6 制作制作“心情文章心情文章”页面页面n10.7 10.7 制作制作“热点讨论热点讨论”页面页面 n10.8 10.8 测试和上传站点测试和上传站点网页设计范例网页设计范例 主要内容主要内容 本章我们将通过详细描述一个网站

2、本章我们将通过详细描述一个网站 “青春驿站青春驿站”的建设过程，学习用的建设过程，学习用Dreamweaver Dreamweaver mxmx 2004 2004制作一个完整的制作一个完整的站点的步骤与关键技术。站点的步骤与关键技术。网页设计范例网页设计范例本章重点本章重点 n网站建设过程网站建设过程n网页设计常用技术网页设计常用技术 网页设计范例网页设计范例 通过本章的学习，熟悉网站建设的全通过本章的学习，熟悉网站建设的全过程，掌握网页设计常用技术。过程，掌握网页设计常用技术。教学目标教学目标 网页设计范例网页设计范例 “青春驿站青春驿站”是一个流溢着青春气息的网站，是一个流溢着青春气息的

3、网站，网页的内容围绕着年青人喜欢的主题展开。网页的内容围绕着年青人喜欢的主题展开。10.1 设计站点设计站点网页设计范例网页设计范例 10.1.1 网站的总体结构网站的总体结构 进入页面主页时尚话题心情文章热点讨论驿站留言头发的时尚城市的性格服装百年图10.1 站点总体结构图 网页设计范例网页设计范例10.1.2 建立站点建立站点 本例是在本例是在E盘盘book文件夹下建立一个名为文件夹下建立一个名为youngsite的的站点。制作步骤如下：站点。制作步骤如下：（1）先在）先在E盘盘book文件夹下建立一个名为文件夹下建立一个名为youngsite的的文件夹，用来存放创建的网页；在文件夹，用来

4、存放创建的网页；在youngsite文件夹下文件夹下建立一个名为建立一个名为images的文件夹，用以存放站点中的图像，的文件夹，用以存放站点中的图像，可以把要用的图片先放入该文件夹中。可以把要用的图片先放入该文件夹中。（2）选择）选择【站点站点】|【管理站点管理站点】，打开，打开【管理站点管理站点】对话框，单击对话框，单击【新建新建】按钮，在弹出的下拉菜单中选择按钮，在弹出的下拉菜单中选择【站点站点】命令，在打开的命令，在打开的【站点定义站点定义】对话框中做如图对话框中做如图10.2所示的设置。此时站点管理面板如图所示的设置。此时站点管理面板如图10.3所示。所示。网页设计范例网页设计范例图

5、10.2 站点定义对话框网页设计范例网页设计范例图10.3 站点管理面板网页设计范例网页设计范例10.1.3 生成网页生成网页1.生成进站页面生成进站页面(1)选择菜单选择菜单【文件文件】|【新建新建】，则弹出，则弹出【新建文档新建文档】对话框，在该对话框中选择对话框，在该对话框中选择【常规常规】选项卡，在选项卡，在【类类别别】选项中选择选项中选择【基本页基本页】，然后在，然后在【基本页基本页】列表列表框中选择框中选择HTML，单击，单击【创建创建】按钮即创建一个按钮即创建一个HTML页面文档。页面文档。(2)在文档工具栏的标题栏中，输入网页标题在文档工具栏的标题栏中，输入网页标题“进站页面进

6、站页面”。(3)选择菜单选择菜单【文件文件】|【保存保存】，则弹出，则弹出【另存为另存为】对对话框，则将该页面以话框，则将该页面以index.htm的名字保存在的名字保存在E:bookyoungsite中。中。网页设计范例网页设计范例2生成主页及其它页面生成主页及其它页面以相同方法生成以相同方法生成主页及其它页面，主页及其它页面，各个页面的名称各个页面的名称及存储位置见图及存储位置见图10.4所示。所示。服装百年城市的性格头发的时尚热点讨论心情文章时尚话题主页图10.4 主页及其它页面网页设计范例网页设计范例10.2 制作进站页面制作进站页面打开进站页面文档打开进站页面文档index.htm，

7、进行设计。，进行设计。1用表格进行整体布局用表格进行整体布局选择菜单选择菜单【插入插入】|【表格表格】或在插入工具栏中的或在插入工具栏中的【布局布局】类中选择表格按钮，则会出现类中选择表格按钮，则会出现【表格表格】设置对话框，设置对话框，插入一个插入一个4行行1列宽度为列宽度为800个像素的表格。个像素的表格。网页设计范例网页设计范例2添加网页元素添加网页元素(1)在表格中的第在表格中的第1行，输入行，输入“青春驿站青春驿站”四个字，选择四个字，选择这四个字，在属性面板中进行设置，字体为这四个字，在属性面板中进行设置，字体为“华文行华文行楷楷”，大小为，大小为20。单元格对齐方式为水平。单元格

8、对齐方式为水平“居中对齐居中对齐”，垂直，垂直“居中居中”。(2)在表格中的第在表格中的第2行和第行和第4行，分别输入如图行，分别输入如图10.5所示所示的第的第2行文字行文字“青春的美丽青春的美丽”和最后一行文字和最后一行文字“欢欢迎你的到来迎你的到来”。选择这些文字，在属性面板中进。选择这些文字，在属性面板中进行设置，字体和大小都为行设置，字体和大小都为“默认默认”。单元格对齐方式。单元格对齐方式为水平为水平“居中对齐居中对齐”，垂直，垂直“居中居中”。(3)选择菜单选择菜单【插入插入】|【图像图像】在表格中的第在表格中的第3行，插行，插入图像入图像43.jpg。网页设计范例网页设计范例3

9、页面属性的设置页面属性的设置选择菜单选择菜单【修改修改】|【页面属性页面属性】，在打开的，在打开的页面属性对话框中进行设置，将背景颜色设页面属性对话框中进行设置，将背景颜色设为绿色为绿色(#99CC33)，文本颜色设为白色，文本颜色设为白色(#FFFFFF)。网页设计范例网页设计范例10.3 制作主页制作主页网页设计范例网页设计范例10.3.1 整体效果设计整体效果设计主页采用主页采用T形布局，页面上部为横幅及网站标志，下形布局，页面上部为横幅及网站标志，下方左半部分为导航区，右半部分为网页主体显示内容的方左半部分为导航区，右半部分为网页主体显示内容的布局。布局。主页的色彩以蓝绿色为主，给人以

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

11、文字采用的是浏览器的默认字体，即中文宋体和英文体和英文Times New Roman字体，显得整齐有序。字体，显得整齐有序。网页设计范例网页设计范例10.3.2 用表格进行整体布局并设置用表格进行整体布局并设置(1)插入一个插入一个3行行1列，宽度为列，宽度为800个像素，边框粗细、单个像素，边框粗细、单元格边距及单元格间距均为元格边距及单元格间距均为0的表格。的表格。(2)将光标置于表格第将光标置于表格第1行，选择行，选择【修改修改】|【表格表格】|【拆分单元格拆分单元格】，将单元格拆分成，将单元格拆分成2列。拖动两列中间的列。拖动两列中间的框线，使左侧宽度大约在框线，使左侧宽度大约在150

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

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

14、的。代码来实现的。网页设计范例网页设计范例10.3.4 导航区的设计导航区的设计(1)将光标置于左下方单元格中，选择菜单将光标置于左下方单元格中，选择菜单【插入插入】|【图像图像】，在该单元格上方插入图像，在该单元格上方插入图像ai01.gif，调整图，调整图像大小以适应单元格。像大小以适应单元格。(2)将光标置于所插入图像的下方，选择菜单将光标置于所插入图像的下方，选择菜单【插入插入】|【表格表格】，插入一个，插入一个5行行1列，宽度为列，宽度为140像素，边框像素，边框粗细、单元格边距为粗细、单元格边距为0，单元格间距为，单元格间距为20的表格。的表格。(3)在表格的各行分别输入文字：在表

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

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