青春驿站网页设计范例介绍.pptVIP

第10章 网页设计范例 ; ;本章重点 ; ; “青春驿站”是一个流溢着青春气息的网站，网页的内容围绕着年青人喜欢的主题展开。; ;10.1.2 建立站点 ;图10.2 站点定义对话框;图10.3 站点管理面板;10.1.3 生成网页;2．生成主页及其它页面;10.2 制作进站页面;2．添加网页元素 ;3．页面属性的设置;10.3 制作主页;10.3.1 整体效果设计;10.3.2 用表格进行整体布局并设置;10.3.3 网页横幅及标志部分的设计 ;10.3.4 导航区的设计; (4) 建立超级链接。选择“驿站首页”四个字，在属性面板的【链接】框中选择index1.htm（即本主页）。同理，设置“时尚话题” 链接到网页文件shishanghuati.htm；设置“心情文章” 链接到网页文件xinqingwenzhang.htm；设置“热点讨论” 链接到网页文件rediantaolun.htm；在“驿站留言” 链接框中写入如下脚本：mailto:luqin@163.com，即当单击该链接时，将发送电子邮件到luqin@163.com邮箱。;10.3.5 主体部分的设计 ;1．利用表格布局;(4) 将光标置于第4行第2列对应的单元格中，选择菜单【插入】|【表格】，插入一个2行2列，宽度为320像素，边框粗细、单元格边距及单元格间距均为0，居中对齐，其余各项为默认的表格。选择菜单【修改】|【表格】将该表格第1行两个单元格合并。 ;2．添加网页元素;(4) 设置超级链接。将“时尚话题”下的“头发的时尚”、“城市的性格”和“服装百年”分别链接到toufashishang.htm，chengshidexingge.htm和fuzhuangbainian.htm；将“热点讨论”下的“大学生校外租房调查”链接到rediantaolun.htm；将“心情文章”下所有的各项均链接到xinqingwenzhang.htm。 (5) 将主体部分的表格加入背景图片。在表格属性面板的【背景】框中选择xmasbg4.gif。;10.3.6 添加页面动态效果;1．设置状态栏文本 ;2．显示当前日期;10.4 制作“时尚话题”页面;10.4.2 主体部分制作;3．第1行第2列对应的单元格的设计;(5) 在其余单元格中输入文本。字体为默认字体，3个标题的字体大小为14，其余大小默认。 (6) 设置3个标题的超链接：“头发的时尚”链接至toufashishang.htm；“城市的性格”链接至chengshidexingge.htm；“服装百年”链接至fuzhuangbainian.htm。 ;4．第2行单元格的设计;5．第3行单元格的设计;10.5 制作“头发的时尚”、“城市的性格”及“服装百年”页面;10.5.1 创建“时尚话题模板”模板页;2．定义页标题;3．网页横幅的制作;4．主体部分制作;(2) 第1行第1列对应的单元格的设计 ① 在该单元格中插入一个2行1列的表格。 ② 在该表格的第1行单元格中，插入图像fashion_titleright01.gif。 ③ 在该表格的第2行单元格中，插入一个3行1列，宽度为300像素，间距为10像素的表格。在表格的三个单元格中分别输入：“头发的时尚”，“城市的性格”和“服装百年”。并设置它们分别链接到网页：toufashishang.htm，chengshidexingge.htm和fuzhuangbainian.htm。;(3) 第1行第2列对应的单元格的设计 在该单元格中插入一个1行，1列的表格，准备作为文本的输入区域。 (4) 第2行单元格的设计 ① 在左侧单元格中插入图像linker.gif。 ② 在右侧单元格中输入文本“【返回主页】”。 ③ 将“返回主页”链接至主页index1.htm。 (5) 第3行单元格的设计 在该单元格中插入图像xjtu_05.jpg，并调整该图像的大小，使之占满整个单元格 ;5．定义模板的可编辑区域;6．保存模板文档;10.5.2 使用“时尚话题模板”创建文档;2．创建“城市的性格” 和“服装百年”页面 ;10.6 制作“心情文章”页面;10.6.2 主体部分制作;(3) 在该表格第1行第3列、第2行第2列、第3行第3列及第4行第2列对应的单元格内，依次插入四个图像：489.jpg，472.jpg，fullimage.jpg和phot065.jpg。 (4) 在第1行第2列对应的单元格内输入文字“心情文章”，字体为“华文行楷”，大小为7，颜色为蓝色（#0099FF），居中。;3．第2行单元格的设计 在该单元格中输入文本“【返回主页】”，居中。将“返回主页”链接至主页index1.htm 4．第3行单元格的设计