dreamweaver+cs4+网页设计与制作指南 第16章.ppt

第16章 公司网站制作案例 本章案例以制作一个电力公司的网站和主导，系统讲解 如何实现客户的需求，在整个过程中，按照“新建站点”|“制作 模板”|“制作首页文件”|“制作子页文件”|“案例扩展分析”的流程 ，全面分析制作网站的过程本章重要知识点： l了解企业网站的制作流程 l掌握制作模板的流程 l掌握新建和修改CSS样式表的技巧 l熟悉走马灯的网页特效制作 16.1 策划构思及设计流程 在正式制作网站之前，先要了解客户的需求，网站终归 是为了客户的需求而定制，为网站设计一个整体的策划书， 这一点至关重要，很多人可能会忽略这一点 16.1.1 客户需求 在客户的需求中，已详细说明了网站的栏目分配 16.1.2 网站策划 根据客户所提供的网站结构和需求，策划将网站的栏目 分为“公司简介”、“电力动态”、“用电法规”、“业务公开”、“交 流合作”、“多种产业”几类整个页面以淡雅为主，主色调定 为淡蓝绿色，突出电力安全、电力为民的主题 16.1.3 网站结构规划 一般的企业网站会有一个引导页，可以用图片或动画来 制作，但是电力行业的网站，一般都是直奔主题，避免太多 的繁杂环节，主要体现了便民的特色，该网站就简单地左右 分栏，清晰、简洁、明了，将网站的内容展示出来，因而在 制作时一次性通过了客户的验收。

16.1.4 准备所需素材 在制作网站之前，先要准备制作网站所需的图片和文字 资料，以及制作Banner中所使用的素材，包括体现的主题、 文字、制作好的图片和动画素材都放在images下 16.2 制作过程 为尊重客户的意见及所有权，这里将网站名称和Logo 用别的名称代替本案例将详细讲解制作电力企业网站中， 要注意的问题及要掌握的一些技巧 16.2.1 网站首页设计 首先在Photoshop中，使用客户提供的图片及相关参照 网址，设计出网站的首页图片小样 16.2.2 将图片切割为网页 启动ImageReady程序，将设计好的首页图片，依据网 页设计布局切割制作成网页，对于图片的分割，要尽量控制 图片的大小在10KB以内，在保证图片质量的前提下，尽量 减少切割数量，在图片导出之前，先要进行优化，这是非常 必要的操作，这样可以大大减小图片的容量 16.3 建立站点 在使用分割的图片制作网页之前，首先需要建立一个新 的站点，方便网站文件的操作 16.3.1 新建站点 新建站点的具体操作步骤如下： （1）选择菜单命令“站点”|“新建站点”，弹出“站点定义 为”对话框，并切换到“高级”选项卡，在对话框左侧分类下面 的列表中“本地信息”所对应的选项中进行详细设置。

（2）单击“确定”按钮，本例的站点成功建立完成 16.3.2 新建站点文件夹 在站点中先创建如下文件夹，用来放置相关的文件： limages：用来放置站点中的所有图片 lstyle：用来放置站点使用的CSS样式表文件 lhtml：用来放置站点中的所有HTML文件 lflash：用来放置站点中的动画文件 ltemp：用来放置站点中的图片及动画源文件 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样式”面板，并在空白处单击鼠标右键 ，在弹出的菜单中选择“附加样式表”命令；或单击“附加样式 表”按钮，弹出“链接外部样式表”对话框。

16.5.1 导入外部样式表 （4）单击“浏览”按钮，选择CSS样式文件所有路径， 导入CSS样式表文件，并选中“添加为”之后的“链接” 单选按 钮 （5）单击“确定”按钮，即成功在文件中导入了CSS样 式表 16.5.2 设置网页标题 首先设置网页的标题，在文档头部输入标题的名称 16.5.3 设置页面属性 选择菜单命令“修改”|“页面属性”，弹出“页面属性”对话 框，从中设置跟踪图像 设置跟踪图像，可以使界面在制作过程中布局分配更加 合理科学 16.5.4 制作头部表格 首页界面是按800*600的分辩率设计的，所以表格的宽 度，都是按照界面中的设计设置为778px 16.5.5 制作公告栏 在头部表格下制作公告栏，作为紧急通知公告栏，并做 成走马灯的样式 16.6 制作正文表格 在公告栏制作完毕后，开始制作正文表格部分，正文表 格按照界面的设置，主要分为左右两个栏目，再从右侧分为 上、左、右的格式 16.6.1 左侧栏的制作 详细操作步骤如下： （1）建立一个2列1行的表格 （2）设置2列表格垂直对齐为“顶端”，第1列表格设置 宽度为“195px” l制作“用电业务指南”表格 l制作“站内搜索”表格 l制作“用电报装流程图”表格 16.6.2 制作Banner 将正文表格的右侧分为3个部分，上部为Banner区；下 部分为左右，制作栏目内容。

16.6.3 制作行业动态 接上面的操作步骤继续制作正文部分 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 制作电力行业相关链接 在相关法规下面制作“相关链接”的表格，此处与整体界 面风格统一，制作方法同“相关法规” 这样正文部分的表格全部制作完成 16.7 制作尾部版权 制作尾部版权部分，也采用清新简洁的样式 16.8 调整页面 通过上面几节，页面已基本制作完成，但是在浏览器中 查看效果时，发现页面的整体效果不是太理想，主要是下部 分的表格在底端没有对齐。

16.9.1 创建模板 应用制作好的首页创建该站点的模板 16.9.2 使用库 在模板中，导航栏是不可编辑区域，可以在二级模板或 其他的模板中使用，为了方便日后的调用，在此将导航栏创 建为库 16.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样式，此时应 注意样式，尽量要做到每一个都是有效的，不要建立大量无 用的 16.12.3 更新网页模板 在制作好案例中的几个页面以后，在浏览时，会发现在 页面的左侧比右侧内容多时不是很搭配，在模板中设置左侧 栏的背景色 16.13 本章小结 网页制作需要多加，在提高制作水平的同时，也能 提高自己的审美观和统筹调配能力，为今后制作难度高的网 站打下坚实的基础。