1、第十一章 综合实例,本章要点 网站创建前期准备工作 制作网站首页 制作、应用模板页和库项目 发布站点通过前面章节的学习，本章将制作一个综合实例，介绍网站定义、制作首页、制作模板和库等内容，使读者对网站建设的全过程有更为深入的理解。 11.1 网站前期准备工作 11.1.1 实例背景概述 本章实例介绍的综合实例是“火炬计划”网站。火炬计划是一项发展中国高新技术产业的指导性计划，于1988年8月经国务院批准，由国家科委组织实施。火炬计划的宗旨是：实施“科教兴国”战略，贯彻执行改革开放的总方针，发挥我国科技力量的优势与潜力，以市场为导向，促进高新技术成果商品化、高新技术商品产业化和高新技术产业国际化
2、。 11.1.2 明确网站风格及内容 网站整体颜色风格：根据火炬计划的项目特点，确定整体颜色风格以暗红色和明黄色相结合，显示出一种辉煌的气势。 网格主要内容：按照火炬计划实施的主要内容，可以把网站分为10个主要栏目：火炬计划、火炬项目、创业服务中心、留学人员创业园、大学科技园、软件基地、高新技术企业、科技兴贸、创新基金。网站首页需要体现的内容有：新闻动态、会员登录、站内检索、政策法规以及其他栏目主要内容等。根据网站内容基本上可以分为三级页面：首页、二级页面、内容页面。 确定了网站整体风格和网站的主要内容以后，可以在Fireworks或PhotoShop等图形图像软件中设计出网页的风格和具体的栏
3、目和内容的布局，然后准备好所有相关栏目的文字、图像、视频等需要发布的素材资料就可以开如在Dreamweaver8中制作网页了，以下小节将介绍在Dreamweaver8中制作网页的全过程。,11.2 创建本地站点 制作网站首先需要创建本地站点，合理的站点结构，能够提高工作效率。创建本地站点如下步骤进行。 1) 在Windows操作系统下，右键单击“开始”按钮，在快捷菜单中选择“资源管理器”命令。 2) 在左侧“文件夹”列表中选择所要创建站点的路径，在右侧窗口空白处，单击鼠标右键，在菜单中选择“新建文件夹”命令。 3) 右键单击“新建文件夹”，在菜单中选择“重命名”命令，输入文件夹名称“综合实例”
4、。 4) 双击“综合实例”文件夹，创建三个子文件夹，名为“Images、flash、hjjh”，分别设置为“图像、Flash动画、火炬计划栏目页”，如图11-1所示。图11-1 在“综合实例”文件夹内创建子文件夹,5) 启动Dreamweaver8程序，执行“站点管理站点”菜单命令。 6) 打开“管理站点”对话框，选择“新建站点”命令。 7) 打开“站点定义”对话框，在“站点名称”文件框中输入“火炬计划”；单击“本地根文件夹”后面的文件夹，在“选择站点火炬计划的本地根文件夹”对话框内，选择前面创建的“综合实例”文件夹，单击“选择”按钮返回“站点定义”对话框，如图11-2所示。图11-2 “站点
5、定义”对话框,8) 单击【确定】按钮，返回“管理站点”对话框，新建“火炬计划”站点即会显示在站点列表中，如图11-3所示。图11-3 “火炬计划”站点添加到列表中 9) 单击【完成】按钮，本地站点创建完成。 11.3制作Flash标识,1) 在Dreamweaver编辑窗口，单击属性面板中的【页面属性】按钮，打开“页面属性对话框，在对话框内“外观”区域设置大小为12像素，文本颜色为深灰色#333333，右、右、上、下边距均为0像素，如图11-26所示，单击【浏览】按钮，打开“选择图像源文件”对话框，选择images文件夹内的图像“bg-3.gif”,如图11-27所示，单击【确定】按钮，将背景
6、图像路径和文件名添加到“背景图像”文本框内。图11-26 设置外观属性,图11-27 选择背景图像 2) 在“分类”列表中选择“链接”选项，设置“链接颜色”和“已访问链接”颜色为深灰色#333333，“变换图像链接”为土黄色#CD911D，在“下划线样式”列表中选择“仅在图像时显示下划线”选项。 3)在“分类”列表中选择“标题编码”选项，在“标题”文本框内输入“中国火炬信息网”，在“编码”菜单中选择“简体中文（GB2312）”选项。 4) 单击【确定】按钮，完成页面属性设置。,5) 执行“窗口CSS样式”命令，打开CSS样式面板，如图11-28所示。可以看到刚才在页面属性中设置的属性，都已添加
7、到CSS样式面板上。其他还需要设置的CSS样式可以添加在同一CSS代码中，也可以另外创建一个样式表文件。在些，选择创建一个新的样式表文件，以方便管理和在其他页面应用。图11-28 CSS样式面板显示在页面属性中的设置 6) 单击CSS样式面板右下角的“新建CSS样式”按钮，弹出“新建CSS样式”对话框。在“选择器类型”区选择【标签】单选按钮，在“标签”菜单中选择“td”选项，在“定义在”区域选择“新建样式表文件”选项，如图11-29所示。,图11-29 “新建CSS样式”对话框 7) 单击【确定】按钮，弹出“保存样式表文件为”对话框。在“保存在”列表中选择“综合实例”文件夹，在“文件名”文本框
8、内输入“css”。 8) 单击【保存】按钮，打开“规则定义”对话框。设置大小为9pt，行高为18像素，颜色为深灰色#333333，如图11-30所示。图 11-30 “样式定义”对话框,9) 单击【确定】按钮，在CSS样式面板上可以看到新添加了css.css文件，如图11-31所示。图11-31 CSS样式面板中添加了css.css文件 10) 单击【新建CSS规则】按钮，打开“新建CSS规则”对话框，先选择【标签】单选按钮，在“标签”菜单中选择“input”选项，如图11-32所示。 图11-32 选择input标签项,11) 单击【确定】按钮，打开“规则定义”选项对话框，在“类型”区域设置
9、字体大小为“9pt”。在“分类”列表中选择“边框”选项，勾选“全部 相同”复选框，在“样式”菜单中选择“实线”选项，在“宽度”文本框内输入“1像素”，在“颜色”调色板中选择黑色，如图11-33所示。图11-33 设置边框样式,12) 单击【确定】按钮，返回“css.css样式管理”对话框。再次单击【新建】按钮，设置“select”标签字体大小和边框样式，操作步骤与“input”标签定义相同，这里不再重复。 13) 完成标签【select】按钮，返回“css.css规则管理”对话框。再次单击“新建”按钮，在“选择器类型”区域选择“类”单选按钮，在“名称”文本框内输入“.line1”，如图11-3
10、4所示。图11-34 “新建CSS规则”对话框 14) 单击【确定】按钮，打开【规则定义】对话框。在“行高”文本框内输入28，选择单位为“像素”，如图11-35所示。图11-35 设置line1的行高,15) 单击【确定】按钮，返回“css.css规则管理”对话框。同样方法制作名为“.line2”的类，其行高为16像素。完成返回“css.css规则管理”对话框，单击【完成】按钮，在CSS样式面板中即会显示css.css样式表下的所有项。 16) 有一些CSS样式，不能在样式定义对话框中完成定义和设置，需要在代码中手动添加。执行“文件打开”命令，从【打开】对话框中选择css.css文件，单击【打
11、开】按钮，在css.css编辑窗口，可以看到定义过的css样式。在“td”标签前面输入如下代码，用来定义滚动轴的样式。 BODY SCROLLBAR-FACE-COLOR：#FFECC7; SCROLLBAR-HIGHLIGHT-COLOR：#FFFFFF; SCROLLBAR-SHADOW-COLOR：#BC7C00;SCROLLBAR-3DLIGHT-COLOR：#BC7C00;SCROLLBAR-ARROW-COLOR：#BC7C00;SCROLLBAR-TRACK-COLOR：#FFFFF;SCROLLBAR-DARKSHADOW-COLOR：#FFFFFF;在代码结尾处输入如下代码，
12、定义特殊的链接状态。 A.a01:link Color:#333333; Text-decoration:none; A.a01:visited Color:#333333; Text-decoration:none; ,A.a01:hover Color:#333333; Text-decoration:none; 最终，css.css代码显示为： BODY SCROLLBAR-FACE-COLOR: #FFECC7; SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF; SCROLLBAR-SHADOW-COLOR: #BC7C00; SCROLLBAR-3DLIGHT-C
13、OLOR: #BC7C00; SCROLLBAR-ARROW-COLOR: #BC7C00; SCROLLBAR-TRACK-COLOR: #FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF; td font-size: 9pt;line-height: 18px;color: #333333; input border: 1px solid #000000;font-size: 9pt; ,select font-size: 9pt;border: 1px solid #000000; .line1 line-height: 28px; .line2 l
14、ine-height: 16px; A.a01:link color: #333333;text-decoration: none; A.a01:visited color: #333333;text-decoration: none; A.a01:hover color: #CC0000;text-decoration: underline; ,4) 单击“测试”按钮测试网站是否边接成功，如成功会弹出提示框。 5) 执行“窗中文件菜单命令，打开文件面板。单击“文件”面板上的上传按钮，即可上传网站，根据连接的速度和文件大小的不同，上传网站需要经过一段时间，上传的这些文件将构成远程站点。 6) 完成网站上传后，即可通过网址登录网站。 到这里，本章具有综合性的网站制作实例已经介绍完了，读者在学习网页制作过程中，要结合实例动手模仿制作一个完整的网页，加深对基本功能的认识。 11.9 实训 结合实例动手模仿制作一个完整的网站。 11.10 习题 1.做一个网站前期应该做哪些工作。 2.写一个网站的制作方案。,
