1 / 15

第十一章 综合实例

第十一章 综合实例. 本章要点 · 网站创建前期准备工作 · 制作网站首页 · 制作、应用模板页和库项目 · 发布站点 　　通过前面章节的学习，本章将制作一个综合实例，介绍网站定义、制作首页、制作模板和库等内容，使读者对网站建设的全过程有更为深入的理解。 11.1 网站前期准备工作 11.1.1 实例背景概述

darcie
Download Presentation

第十一章 综合实例

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第十一章 综合实例 • 本章要点 • ·网站创建前期准备工作 • ·制作网站首页 • ·制作、应用模板页和库项目 • ·发布站点 • 　　通过前面章节的学习，本章将制作一个综合实例，介绍网站定义、制作首页、制作模板和库等内容，使读者对网站建设的全过程有更为深入的理解。 • 11.1 网站前期准备工作 • 11.1.1 实例背景概述 • 本章实例介绍的综合实例是“火炬计划”网站。火炬计划是一项发展中国高新技术产业的指导性计划，于1988年8月经国务院批准，由国家科委组织实施。火炬计划的宗旨是：实施“科教兴国”战略，贯彻执行改革开放的总方针，发挥我国科技力量的优势与潜力，以市场为导向，促进高新技术成果商品化、高新技术商品产业化和高新技术产业国际化。 • 11.1.2 明确网站风格及内容 • 网站整体颜色风格：根据火炬计划的项目特点，确定整体颜色风格以暗红色和明黄色相结合，显示出一种辉煌的气势。 • 网格主要内容：按照火炬计划实施的主要内容，可以把网站分为10个主要栏目：火炬计划、火炬项目、创业服务中心、留学人员创业园、大学科技园、软件基地、高新技术企业、科技兴贸、创新基金。网站首页需要体现的内容有：新闻动态、会员登录、站内检索、政策法规以及其他栏目主要内容等。根据网站内容基本上可以分为三级页面：首页、二级页面、内容页面。 • 确定了网站整体风格和网站的主要内容以后，可以在Fireworks或PhotoShop等图形图像软件中设计出网页的风格和具体的栏目和内容的布局，然后准备好所有相关栏目的文字、图像、视频等需要发布的素材资料就可以开如在Dreamweaver8中制作网页了，以下小节将介绍在Dreamweaver8中制作网页的全过程。

  2. 11.2 创建本地站点 • 制作网站首先需要创建本地站点，合理的站点结构，能够提高工作效率。创建本地站点如下步骤进行。 • 1)　在Windows操作系统下，右键单击“开始”按钮，在快捷菜单中选择“资源管理器”命令。 • 2)　在左侧“文件夹”列表中选择所要创建站点的路径，在右侧窗口空白处，单击鼠标右键，在菜单中选择“新建>文件夹”命令。 • 3)　右键单击“新建文件夹”，在菜单中选择“重命名”命令，输入文件夹名称“综合实例”。 • 4)　双击“综合实例”文件夹，创建三个子文件夹，名为“Images、flash、hjjh”，分别设置为“图像、Flash动画、火炬计划栏目页”，如图11-1所示。 • 图11-1 在“综合实例”文件夹内创建子文件夹

  3. 5)　启动Dreamweaver8程序，执行“站点→管理站点”菜单命令。5)　启动Dreamweaver8程序，执行“站点→管理站点”菜单命令。 • 6) 打开“管理站点”对话框，选择“新建→站点”命令。 • 7) 打开“站点定义”对话框，在“站点名称”文件框中输入“火炬计划”；单击“本地根文件夹”后面的文件夹，在“选择站点火炬计划的本地根文件夹”对话框内，选择前面创建的“综合实例”文件夹，单击“选择”按钮返回“站点定义”对话框，如图11-2所示。 • 图11-2 “站点定义”对话框

  4. 8) 单击【确定】按钮，返回“管理站点”对话框，新建“火炬计划”站点即会显示在站点列表中，如图11-3所示。 • 图11-3 “火炬计划”站点添加到列表中 • 9)　单击【完成】按钮，本地站点创建完成。 • 11.3制作Flash标识

  5. 1) 在Dreamweaver编辑窗口，单击属性面板中的【页面属性】按钮，打开“页面属性对话框，在对话框内“外观”区域设置大小为12像素，文本颜色为深灰色#333333，右、右、上、下边距均为0像素，如图11-26所示，单击【浏览】按钮，打开“选择图像源文件”对话框，选择images文件夹内的图像“bg-3.gif”,如图11-27所示，单击【确定】按钮，将背景图像路径和文件名添加到“背景图像”文本框内。 • 图11-26　设置外观属性

  6. 图11-27 选择背景图像 • 2)　在“分类”列表中选择“链接”选项，设置“链接颜色”和“已访问链接”颜色为深灰色#333333，“变换图像链接”为土黄色#CD911D，在“下划线样式”列表中选择“仅在图像时显示下划线”选项。 • 3)在“分类”列表中选择“标题／编码”选项，在“标题”文本框内输入“中国火炬信息网”，在“编码”菜单中选择“简体中文（GB2312）”选项。 • 4)　单击【确定】按钮，完成页面属性设置。

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

  8. 图11-29 “新建CSS样式”对话框 • 7)　单击【确定】按钮，弹出“保存样式表文件为”对话框。在“保存在”列表中选择“综合实例”文件夹，在“文件名”文本框内输入“css”。 • 8) 单击【保存】按钮，打开“规则定义”对话框。设置大小为9pt，行高为18像素，颜色为深灰色#333333，如图11-30所示。 • 图 11-30 “样式定义”对话框

  9. 9)　单击【确定】按钮，在CSS样式面板上可以看到新添加了css.css文件，如图11-31所示。9)　单击【确定】按钮，在CSS样式面板上可以看到新添加了css.css文件，如图11-31所示。 • 图11-31 CSS样式面板中添加了css.css文件 • 10)　单击【新建CSS规则】按钮，打开“新建CSS规则”对话框，先选择【标签】单选按钮，在“标签”菜单中选择“input”选项，如图11-32所示。 • 图11-32　选择input标签项

  10. 11) 单击【确定】按钮，打开“规则定义”选项对话框，在“类型”区域设置字体大小为“9pt”。在“分类”列表中选择“边框”选项，勾选“全部 \相同”复选框，在“样式”菜单中选择“实线”选项，在“宽度”文本框内输入“1像素”，在“颜色”调色板中选择黑色，如图11-33所示。 • 图11-33 设置边框样式

  11. 12)　单击【确定】按钮，返回“css.css样式管理”对话框。再次单击【新建】按钮，设置“select”标签字体大小和边框样式，操作步骤与“input”标签定义相同，这里不再重复。12)　单击【确定】按钮，返回“css.css样式管理”对话框。再次单击【新建】按钮，设置“select”标签字体大小和边框样式，操作步骤与“input”标签定义相同，这里不再重复。 • 13)　完成标签【select】按钮，返回“css.css规则管理”对话框。再次单击“新建”按钮，在“选择器类型”区域选择“类”单选按钮，在“名称”文本框内输入“.line1”，如图11-34所示。 • 图11-34 “新建CSS规则”对话框 • 14)　单击【确定】按钮，打开【规则定义】对话框。在“行高”文本框内输入28，选择单位为“像素”，如图11-35所示。 • 图11-35 设置line1的行高

  12. 15)　单击【确定】按钮，返回“css.css规则管理”对话框。同样方法制作名为“.line2”的类，其行高为16像素。完成返回“css.css规则管理”对话框，单击【完成】按钮，在CSS样式面板中即会显示css.css样式表下的所有项。15)　单击【确定】按钮，返回“css.css规则管理”对话框。同样方法制作名为“.line2”的类，其行高为16像素。完成返回“css.css规则管理”对话框，单击【完成】按钮，在CSS样式面板中即会显示css.css样式表下的所有项。 • 16)　有一些CSS样式，不能在样式定义对话框中完成定义和设置，需要在代码中手动添加。执行“文件>打开”命令，从【打开】对话框中选择css.css文件，单击【打开】按钮，在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;｝ • 　在代码结尾处输入如下代码，定义特殊的链接状态。 • A.a01:link{ • Color:#333333; • Text-decoration:none; • } • A.a01:visited{ • Color:#333333; • Text-decoration:none; • }

  13. 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-COLOR: #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; • }

  14. select { • font-size: 9pt; • border: 1px solid #000000; • } • .line1 { • line-height: 28px; • } • .line2 { • line-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; • }

  15. 4) 单击“测试”按钮测试网站是否边接成功，如成功会弹出提示框。 • 5) 执行“窗中>文件>菜单命令，打开文件面板。单击“文件”面板上的上传按钮，即可上传网站，根据连接的速度和文件大小的不同，上传网站需要经过一段时间，上传的这些文件将构成远程站点。 • 6) 完成网站上传后，即可通过网址登录网站。 • 到这里，本章具有综合性的网站制作实例已经介绍完了，读者在学习网页制作过程中，要结合实例动手模仿制作一个完整的网页，加深对基本功能的认识。 • 11.9 实训 • 结合实例动手模仿制作一个完整的网站。 • 11.10 习题 • 1.做一个网站前期应该做哪些工作。 • 2.写一个网站的制作方案。

More Related