Dreamweaver+CS+网页设计与制作指南

1、第16章公司网站制作案例本章案例以制作一个电力公司的网站和主导，系统讲解如何实现客户的需求，在整个过程中，按照“新建站点”|“制作模板”|“制作首页文件”|“制作子页文件”|“案例扩展分析”的流程，全面分析制作网站的过程。本章重要知识点：了解企业网站的制作流程掌握制作模板的流程掌握新建和修改CSS样式表的技巧熟悉走马灯的网页特效制作16.1 策划构思及设计流程在正式制作网站之前，先要了解客户的需求，网站终归是为了客户的需求而定制，为网站设计一个整体的策划书，这一点至关重要，很多人可能会忽略这一点。16.1.1 客户需求在客户的需求中，已详细说明了网站的栏目分配。16.1.2 网站策划根据客户所

2、提供的网站结构和需求，策划将网站的栏目分为“公司简介”、“电力动态”、“用电法规”、“业务公开”、“交流合作”、“多种产业”几类。整个页面以淡雅为主，主色调定为淡蓝绿色，突出电力安全、电力为民的主题。16.1.3 网站结构规划一般的企业网站会有一个引导页，可以用图片或动画来制作，但是电力行业的网站，一般都是直奔主题，避免太多的繁杂环节，主要体现了便民的特色，该网站就简单地左右分栏，清晰、简洁、明了，将网站的内容展示出来，因而在制作时一次性通过了客户的验收。16.1.4 准备所需素材在制作网站之前，先要准备制作网站所需的图片和文字资料，以及制作Banner中所使用的素材，包括体现的主题、文字、制

3、作好的图片和动画素材都放在images下。16.2 制作过程为尊重客户的意见及所有权，这里将网站名称和Logo用别的名称代替。本案例将详细讲解制作电力企业网站中，要注意的问题及要掌握的一些技巧。16.2.1 网站首页设计首先在Photoshop中，使用客户提供的图片及相关参照网址，设计出网站的首页图片小样。16.2.2 将图片切割为网页启动ImageReady程序，将设计好的首页图片，依据网页设计布局切割制作成网页，对于图片的分割，要尽量控制图片的大小在10KB以内，在保证图片质量的前提下，尽量减少切割数量，在图片导出之前，先要进行优化，这是非常必要的操作，这样可以大大减小图片的容量。16.3

4、 建立站点在使用分割的图片制作网页之前，首先需要建立一个新的站点，方便网站文件的操作。16.3.1 新建站点新建站点的具体操作步骤如下：（1）选择菜单命令“站点”|“新建站点”，弹出“站点定义为”对话框，并切换到“高级”选项卡，在对话框左侧分类下面的列表中“本地信息”所对应的选项中进行详细设置。（2）单击“确定”按钮，本例的站点成功建立完成。16.3.2 新建站点文件夹在站点中先创建如下文件夹，用来放置相关的文件：images：用来放置站点中的所有图片。style：用来放置站点使用的CSS样式表文件。html：用来放置站点中的所有HTML文件。flash：用来放置站点中的动画文件。temp：用

5、来放置站点中的图片及动画源文件。16.4 创建CSS样式在制作首页之前，要根据界面的风格创建相应的CSS样式。首先创建基本的标签样式，如body、table、td、p、input以及链接的基本样式。16.5 制作网站首页在站点的“文件”面板中，选中文件夹html，单击鼠标右键，新建一个文件，命名为index.htm，再结合CSS样式表的使用，创建一个与网页效果图相对应的首页文件。16.5.1 导入外部样式表（1）打开“文件”面板，双击index.htm名称，在文档窗口中编辑文件。（2）在制作之前先要从外部引入CSS样式。（3）打开“CSS样式”面板，并在空白处单击鼠标右键，在弹出的菜单中选择“

6、附加样式表”命令；或单击“附加样式表”按钮，弹出“链接外部样式表”对话框。16.5.1 导入外部样式表（4）单击“浏览”按钮，选择CSS样式文件所有路径，导入CSS样式表文件，并选中“添加为”之后的“链接” 单选按钮。（5）单击“确定”按钮，即成功在文件中导入了CSS样式表。16.5.2 设置网页标题首先设置网页的标题，在文档头部输入标题的名称。16.5.3 设置页面属性选择菜单命令“修改”|“页面属性”，弹出“页面属性”对话框，从中设置跟踪图像。设置跟踪图像，可以使界面在制作过程中布局分配更加合理科学。16.5.4 制作头部表格首页界面是按800*600的分辩率设计的，所以表格的宽度，都是按

7、照界面中的设计设置为778px。16.5.5 制作公告栏在头部表格下制作公告栏，作为紧急通知公告栏，并做成走马灯的样式。16.6 制作正文表格在公告栏制作完毕后，开始制作正文表格部分，正文表格按照界面的设置，主要分为左右两个栏目，再从右侧分为上、左、右的格式。16.6.1 左侧栏的制作详细操作步骤如下：（1）建立一个2列1行的表格。（2）设置2列表格垂直对齐为“顶端”，第1列表格设置宽度为“195px”。制作“用电业务指南”表格制作“站内搜索”表格制作“用电报装流程图”表格16.6.2 制作Banner将正文表格的右侧分为3个部分，上部为Banner区；下部分为左右，制作栏目内容。16.6.3

8、 制作行业动态接上面的操作步骤继续制作正文部分。16.6.4 制作停电公告（1）在行业动态表格下方，制作停电公告的表格。（2）合并第1行中的两个单元格，插入停电公告的图片。（3）设置第2行第1列的单元格为水平居中，宽度为“135px”，并插入图片“mt_0.jpg”。16.6.4 制作停电公告（4）设置第2行第2列垂直对齐为“顶端”，通过插入表格设置最新的8条停电公告。（5）表格的设置同“行业动态”，不同的是在偶数的单元格中的细条的图片、奇数条数前的小图片，以及代表“更多”的图片。16.6.5 制作相关法规在Banner下方的表格的第2列单元格中，设置相关法规的表格。16.6.6 制作电力行业

9、相关链接在相关法规下面制作“相关链接”的表格，此处与整体界面风格统一，制作方法同“相关法规”。这样正文部分的表格全部制作完成。16.7 制作尾部版权制作尾部版权部分，也采用清新简洁的样式。16.8 调整页面通过上面几节，页面已基本制作完成，但是在浏览器中查看效果时，发现页面的整体效果不是太理想，主要是下部分的表格在底端没有对齐。16.9.1 创建模板应用制作好的首页创建该站点的模板。16.9.2 使用库在模板中，导航栏是不可编辑区域，可以在二级模板或其他的模板中使用，为了方便日后的调用，在此将导航栏创建为库。16.10 应用模板创建子栏目由制作好的模板创建子栏目页面，流程是：从模板新建网页|编

10、辑可编辑区域。16.10.1 从模板新建网页具体操作步骤如下：（1）选择菜单命令“文件”|“新建”，弹出“新建文档”窗口，左侧选择第3项|“模板中的页”，在站点所在下拉列表中选择当前站点的名称，并在站点的模板下拉列表中选择index，并选中右下角“当模板改变时更新页面”复选框。（2）单击“创建”按钮，应用模板创建了一个未命名的文件“Untitled-1”文档，将其保存为intro.htm。16.10.2 编辑左栏可编辑区域在左侧的可编辑区域设置页面。16.10.3 编辑右栏可编辑区域在右部的可编辑区域进行界面的修饰，以及栏目内容的设置。16.11 应用模板制作三级页面同上一节的制作方法，应用模板制作三级页面，三级页面左侧可编辑区域与子栏目相同，在右侧的可编辑区域有所区别，三级页面保存为intro_info.htm。16.12.1 准备相关素材本案例是一个电力行业方面的企业网站，大家可以亲手根据讲解制作网站的模板，以及在制作过程中遇到的CSS样式表。在制作过程中，需要用到的图片、文字、Flash动画，应根据界面的设计先制作好，特别是在Flash动画中用到的图片更是要精雕细琢，精细中更见设计者的制作水平。16.12.2 定制CSS样式在制作之初，不可能一下子将所有的CSS样式全部想到，而会在制作过程中，随时增加和修改CSS样式