第11章 网站综合实例

《第11章 网站综合实例》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

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)打开“站点定义”对话框，在“站点名称”文件框中输入“火炬计划”；单击“本地根文件夹”后面的文件夹，在“选择站点火炬计划的本地根文件夹”对话框内，选择前面创建的“综合实例”文件夹，单击“选择”按钮返回“站点

5、定义”对话框，如图11-2所示。图11-2“站点定义”对话框8)单击【确定】按钮，返回“管理站点”对话框，新建“火炬计划”站点即会显示在站点列表中，如图11-3所示。图11-3“火炬计划”站点添加到列表中9)单击【完成】按钮，本地站点创建完成。11.3制作Flash标识1)在Dreamweaver编辑窗口，单击属性面板中的【页面属性】按钮，打开“页面属性对话框，在对话框内“外观”区域设置大小为12像素，文本颜色为深灰色#333333，右、右、上、下边距均为0像素，如图11-26所示，单击【浏览】按钮，打开“选择图像源文件”对话框，选择images文件夹内的图像“bg-

6、3.gif”,如图11-27所示，单击【确定】按钮，将背景图像路径和文件名添加到“背景图像”文本框内。图11-26设置外观属性图11-27选择背景图像2)在“分类”列表中选择“链接”选项，设置“链接颜色”和“已访问链接”颜色为深灰色#333333，“变换图像链接”为土黄色#CD911D，在“下划线样式”列表中选择“仅在图像时显示下划线”选项。3)在“分类”列表中选择“标题／编码”选项，在“标题”文本框内输入“中国火炬信息网”，在“编码”菜单中选择“简体中文（GB2312）”选项。4)单击【确定】按钮，完成页面属性设置。5)执行“窗口>CSS样式”命令，打开CSS样式面

7、板，如图11-28所示。可以看到刚才在页面属性中设置的属性，都已添加到CSS样式面板上。其他还需要设置的CSSＳ样式可以添加在同一CSS代码中，也可以另外创建一个样式表文件。在些，选择创建一个新的样式表文件，以方便管理和在其他页面应用。图11-28CSS样式面板显示在页面属性中的设置6)单击CSS样式面板右下角的“新建CSS样式”按钮，弹出“新建CSS样式”对话框。在“选择器类型”区选择【标签】单选按钮，在“标签”菜单中选择“td”选项，在“定义在”区域选择“新建样式表文件”选项，如图11-29所示。图11-29“新建CSS样式”对话框7)单击【确定