目  录

第一章  网页制作的目的································（1）
第二章  网页制作的硬件配置及软件工具··················（2）
 一、硬件要求·······································（2）
 二、软件工具·······································（2）
第三章  网页分析及初步设计····························（5）
 一、网页内容构成···································（5）
 二、网页格式构架···································（6）
第四章  网页制作的具体步骤····························（7）
 一、前期准备阶段···································（7）
 二、实质性制作阶段································（14）
 第五章  设计中所遇难题及解决方案·····················（16）
 第六章  结束语·······································（17）

 利用Dreamweaver等软件制作网页
 ***
 
 [摘要] 本文以本单位网页制作为例，从网页的结构规划到网页的制作步骤、所遇到的问题及解决的方案等方面，详细介绍了利用Macromedia dreamweaver MX 2004、Macromedia flash MX 2004、Macromedia Fireworks MX 2004及photo7.0等软件制作网页的基本过程。通过全文的介绍，能够使初学者对一般网页的制作方法有一个比较全面的了解和掌握。
 [关键词] Dreamweaver，网页，制作
 
 （序论）科学技术已将我们带进了一个现代化的信息时代，当今世界，信息众多，来源十分广泛，其中最大的信息传输途径莫过于Internet网络。学会制作网页，对于传播信息，宣传知识，方便生活、服务工作都有着十分重要的作用。本文着重介绍如何使用当今流行的几种软件制作出自已喜欢的网页。
 
第一章  网页制作目的
     本文制作的网站是一个公安公众信息网站，在该网站设立了“公安快讯”、“警务公开”、“政策法规”、“以案释法”、“服务指南”等有关栏目。该网站的制作，旨在通过对公安机关的部分工作信息、案件信息的介绍，使浏览者对公安机关的工作有一些基本性的了解，通过对典型案例的介绍和深刻剖析，促进全民法制意识的提高，在全社会形成人人学法、知法、懂法、守法的良好环境，推进全社会公平与正义；通过对法律法规的宣传及公安警务公开宣传法律知识、方便群众办事、加强警务监督，让人民群众更多地了解警务工作，理解公安民警，更加关心、支持公安工作，积极参与到维护社会稳定的行列中来，从而达到推进法制进步、推动公安工作健康发展的作用。
 
第二章  网页制作的硬件配置及软件工具
 一、硬件要求
 Microsoft Windows 的系统要求：
 Intel Pentium III 600 MHz 或更快的处理器或等效处理器
 Windows 98、Windows 2000、Windows XP 或 Windows .NET Server 2003
 至少 128 MB 的可用内存 (RAM)（建议采用 256 MB 内存）
 至少 275 MB 可用磁盘空间
 能达到 1024 x 768 像素分辨率的 16 位（数千种颜色）或更高分辨率的监视器（建议选择百万种颜色的监视器）
 二、软件工具
 （一）Macromedia dremweaver MX 2004
 Dreamweaver MX 2004 是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。无论您喜欢直接编写 HTML 代码的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver 都会为您提供帮助良多的工具，丰富您的 Web 创作体验。
 利用 Dreamweaver 中的可视化编辑功能，您可以快速地创建页面而无需编写任何代码。不过，如果您更喜欢用手工直接编码，Dreamweaver 还包括许多与编码相关的工具和功能。并且，借助 Dreamweaver，您还可以使用服务器语言（例如 ASP、ASP.NET、ColdFusion 标记语言 (CFML)、JSP 和 PHP）生成支持动态数据库的 Web 应用程序。
 （二）Macromedia flash MX 2004
 Flash 是一个创作工具，从简单的动画到复杂的交互式 Web 应用程序（如在线商场），它使您可以创建任何作品。通过添加图片、声音和视频，可以使您的 Flash 应用程序媒体丰富多彩。Flash 包含了许多种功能，如拖放用户界面组件、将动作脚本添加到论文的内置行为，以及可以添加到对象的特殊效果。这些功能使 Flash 不仅功能强大，而且易于使用。
 Flash MX 2004 Flash MX 2004 是 Web 设计人员、交互式媒体专业人员或开发多媒体内容的主题专家的理想工具。该版本注重于创建、导入和处理多种类型的媒体（音频、视频、位图、矢量、文本和数据）。
 Flash MX Professional 2004 Flash MX Professional 2004 针对的对象是高级 Web 设计人员和应用程序开发者。Flash MX Professional 2004 包含 Flash MX 2004 中的所有功能，同时还包含多个功能强大的新工具。它提供了对 Web 团队（由设计人员和开发人员组成）成员之间的工作流程进行优化的项目管理工具。外部脚本撰写和处理数据库中动态数据的能力及其它功能使得 Flash 特别适用于大规模的复杂项目，这些项目将使用 Flash Player 随各种 HTML 内容一起部署。
 Macromedia Flash Player 7是Flash动画的播放程序。默认情况下， Macromedia Flash Player 7 是随 Flash程序 一起安装的。Flash Player 确保可以在最大范围内，在各种平台、浏览器和设备上以一致的方式查看和使用所有 SWF 内容。
 （三）Macromedia Fireworks MX 2004
 Macromedia Fireworks MX 2004 是用来设计和制作专业化网页图形的终极解决方案。它是第一个可以帮助网页图形设计人员和开发人员解决所面临的特殊问题的制作环境。
 使用 Fireworks，您可以在一个专业化的环境中创建和编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像。在 Fireworks 中，可以在单个应用程序中创建和编辑位图和矢量两种图形。一切都可以随时进行编辑。除此之外，工作流可以实现自动化，从而满足耗费时间的更新和更改要求。
 Macromedia Fireworks MX 2004 是一款用来设计网页图形的应用程序。它所含的创新性解决方案解决了图形设计人员和网站管理员所面临的主要问题。Fireworks 中的工具种类齐全，使用这些工具，您可以在单个文件中创建和编辑矢量和位图图形。
 以前，网页设计人员需要在多达十个以上的应用程序之间来回跳转来操作具体任务，Fireworks 的问世使他们得以从中解脱出来。它提供的无破坏性的动态效果消除了设计人员由于在进行任何简单编辑之后都要从头开始重建网页图形而不免产生的沮丧心情。Fireworks 可生成 java script，从而使您可以很轻松地创建变换图像。高效的优化功能可在不牺牲品质的前提下缩减网页图形文件的大小。
 （四）photoshop 7.0
 photoshop是Adobe公司开发的一个具有良好的操作环境和强大的功能的图像编辑软件。例如，用户可以方便地用它进行“抠图”，可使用图层、图层蒙版、滤镜等功能，快速制作各种效果，可使用图像修饰工具对图像进行各种修饰，可以使用绘画工具进行绘画等等。photoshop 7.0是Adobe公司推出的最新版本的图像处理软件，它对以往版本有了很大改进，使其功能得到进一步增强：
 提供了两个全新的修复画笔工具。利用这两个工具可以自动保留图像的阴影、光照、纹理和其他属性的同时，轻而易举地去除画面中最细小的划痕、污点、皱纹和灰尘。
 提供了一个文件浏览器。该浏览器与ACDSee图片浏览器类似，用户可以利用它方便地浏览和打开图片。
 改进了画笔管理。系统不仅提供了更丰富的画笔类型，而且可为画笔设置更多的特性。如：用户可以为画笔设置形状动态、发散、纹理、颜色动态等特性。
 提供了更多的形状类型，如各种动物、边框、音乐符号、图形等。
 在原有Auto Levels（自动色阶）和Auto Contrast（自动对比度）的基础上又增加了Auto Color（自动色彩）命令，以方便用户调整偏色的图片。
 
第三章  网页分析及初步设计
 一、网页内容构成
 本网站总体结构上分为五个大部分：
 一是“网站首页”。版面上安排主要内容及一些常用信息，及其他部分（版面）的入口链接。
 二是“政策法规”。对常用的各种政策文件及法律法规进行宣传，以作为政法机关公正执法、人民群众依法办事的普法园地。
 三是“以案释法”。用人民群众身边的人和事，身边的案件，结合法律法规，深入细致、深入浅出地进行讲解、讨论。通过这种形象生动的宣传方式，进一步加深广大市民对法律法规的了解和理解，以提高广大群众知守率和守法意识。
 四是“服务指南”。
 二、网页格式构架
 总体构架。以“网站主页”为基础，通过在主页上建立链接，点击转入其他版块，浏览所需信息。
 1、网站主页结构。
 如图2-2-1,采取上下结构的框架集，上部分(topframe)放置具有本单位标识的文字或动画，给人以一目了然的感觉。同时，为方便到其他版块的链接，将其他几个栏目的链接入口也放在头部。框架的下半部分（mainframe）用“层”的方式又分为四块（见图2-2-1中1至4）：“1”区位于页面左侧，是“友情链接”区；“2”区设计为一幅新闻图片，其右侧则放置该幅图片信息的文字信息（滚动文字）；“3”区内放置一些常用的栏目及一些重要信息；“4”区则注明与网页制作主体相关的一些信息。
 topframe
 
 1  2
   3
   4
 图2-2-1 主页的结构示意图
 2、“政策法规”网页结构。
 如图2-2-2，采用“上方固定，左侧嵌套”的框架结构。
 
 Topframe
 Leftframe  mainframe
 图2-2-2 “政策法规”网页结构示意图
 “Topframe” 部位放置两幅GIF格式的动画；“leftframe”部位列出所有“政策法规”的标题，点击这些标题后，将所链接的内容在“mainframe”中打开，供用户浏览所点击标题的说细内容。
 3、“以案释法”网页结构。
 采取“上方固定”的上下框架结构。上方是一幅“打字机效果”的flash动画，下方（mainframe）用层分为左右两块，中间用线条隔开。侧列出案例标题，右侧层上用于显示左侧标题的链接内容。
 4、“服务指南”网页和“联系我们”网页。
 这两个网页均是利用主页的上下框架结构，通过点击主页上的对应链接按钮，将所链接的内容显示在下半部分，即将链接目标（target属性）设置为“mainframe”。
 
第四章  网页制作的具体步骤
 一、前期准备阶段
 大量的制作工作实际上均在这一阶段内完成。这一阶段的任务就是根据前期的网页设计方案，对每个部分所需的文字、图像、动画等进行收集或制作，为正式制作完整的网页文件做好充分准备。
 （一）建立网站文件。
 1、启动Macromedia Dreamveaver MX 2004 程序；
 2、选择“站点”/“管理站点”菜单选项，打开“管理站点”对话框，在该对话框中，单击“新建”按钮，在弹出的菜单中选择“站点”选项，此时将打开站点定义对话框，切换到“高级”选项卡（如图4-1-1）。在左侧“分类”列表中选择“本地信息”选项，然后设置将“站点名称”设置为“xuhl”、同时根据计算机实际情况设置站点存放的“本地根文件夹”，单击“确定”按钮。返回到“管理站点”对话框，在该对话框中可以看到新建立的站点。如果用户希望更改设置，可以单击“编辑”按钮进行编辑。单击“完成”按钮关闭“管理站点”对话框，系统将自动在程序窗口右侧面板中打开“文件”面板。至此完成了站点的建立。
 
 图4-1-1
 （二）首页素材准备。
 着重介绍几个主要要素的制作过程：
 1、topframe内的图像和FLASH动画制作。
 从国际互联网上搜索gif格式的警徽图像和动画的背景图像“白云蓝天草原”（jpg格式），分别拷贝并存入网站xuhl目录下，文件名为“gh.gif”和“back.jpg”，以作备用。
  “海陵公安”Flash动画的制作：
 共分为三个阶段：
 第一阶段制作：
 （1）启动Flash MX2004程序，选择“文件”/“新建”菜单选项，在弹出的“新建论文”对话框中单击“常规”选项卡，在“类型”列表中选择“Flash论文”选项，单击“确定”按钮，创建一个新论文。
 （2）选择“修改”/“论文”菜单选项，在弹出的“论文属性”对话框中设置论文尺寸为750px×115px，“背景颜色”为白色（#FFFFFF），帧频为12fps，标尺单位为“像素”，单击“确定”按钮完成设置。
 （3）选择“视图”/“网格”/“显示网格”菜单选项，在工作区中显示网格，以便对图形进行精确定位。
 （4）选择“视图”/“对齐”/“对齐网格”菜单选项，使鼠标指针自动向网格对齐。
 （5）选择“视图”/“标尺”，打开标尺以作元件位置参考。
 （6）右击时间轴“图层1”，在快捷菜单中选择“插入图层”，增加“图层2”，同样方法，增加“图层3”、“图层4”和“图层5”。
 （7）选中“图层1”，选择“文件”/“导入”/导入到舞台”，从站点文件夹xuhl中选择背景文件“back.jpg”，单击“确定”，则在“图层1”上增加了背景图像。
 （8）选择“插入”/“新建元件”菜单选项，在弹出的“创建新元件”对话框中输入元件的名称为“海”，并选择元件的类型为“图形”，单击“确定”，进入元件编辑模式。
 （9）在左侧工具面板中选取“文字工具”“A”，在“属性”面板中将“文本类型”设为“静态文本”，字体大小设为“75”，文本颜色设定为“红色”（#FF0000），在工作区中拖曳鼠标，拖出一个固定文本区，在其中输入“海”字。在工具面板中选取“部分选择”工具，单击“海”，这时在“海”的四周出现蓝色的边框，用“部分选择”工具将“海”字的中心移到工作区的中心十字处。
 （10）重复（8）、（9）步骤，分别创建元件“陵”、“公”、“安”。
 （11）单击“图层1”第78帧，再右击，在弹出的快捷菜单中选择“插入帧”。以确保在整个Flash动画在播放中的所有背景图像均一致。
 （12）单击“图层2”的第1帧，选择“窗口”/“库”菜单选项，打开“库”面板，用鼠标将“海”元件拖放到“图层2”的工作区中，调整其位置上下居中，左右对着标尺的“150mm”处。在工具面板中选取“任意变形工具”，将“海”元件的宽度调整到最窄，在“属性面板”中的颜色下拉框中选择“Alpha”, 通过拉杆将其右侧框内的数据调节为“0%”。右击“图层2”的第20帧，从快捷菜单中选择“插入关键帧”，通过“任意变形工具”，将“海”元件调整成正方形，在下方“属性面板”中将“Alpha”的数值调整为“100%”。右击“图层2”的第一帧，在弹出的快捷菜单中选取“创建补间动画”，完成“海”元件第一阶段的动画制作。
 （13）重复步骤（12），分别在标尺的“300”处、“450”处和“600”处，创建“陵”元件、“公”元件和“安”元件，依次在“图层2”至“图层5”的第1帧至第20帧创建出4个元件的补间动画。
 第二阶段：
 （1）分别在“图层2”至“图层5”的第21帧和第44帧插入“关键帧”。
 （2）选中“图层2”的第21帧，将元件“海”字拖曳到工作区中标尺所指的“-250”处，将属性“Alpha”调整为“0%”；选中“图层2”的第44帧，将元件“海”拖曳至工作区标尺的“150”处（原始位置），将属性“Alpha”再调整为“100%”。
 （3）重复上一项步骤，分别将“陵”元件的第21帧和44帧，设置在标尺的“-50”和“300”处；将“公”元件的第21帧和第44帧设置在标尺的“800”和“450”处；将“安”元件的第21帧和第44帧设置在标尺的“1000”和“600”处。
 （4）分别在“图层2”至“图层5”的第21帧上创建“补间动画”。
 （5）分别在“图层2”至“图层5”的第45帧和46帧上“插入帧”。
 第三阶段：
 （1）分别将“图层2”的第47至48帧设置为“空白关键帧”，将“图层3”的第47帧至54帧、“图层4”的第47帧至60帧，“图层5”的第47帧至66帧均设置为“空白关键帧”。
 （2）分别在“图层2”的第49帧和75帧，“图层3”的第55帧和第75帧，“图层4”的第61帧和75帧，“图层5”的67帧和第75帧插入“关键帧”。
 （3）选中“图层2”的第49帧，选取“工具面板”中的“自由变形工具”，将“海”元件以元件中心为基准向四周拉大成220×220的正方形，将属性“Alpha”调整为“0%”。
 （4）同样的方法，分别在“图层3”的第55帧、“图层4”的第61帧、“图层5”的第67帧上将元件“陵”、“公”、“安”用任意变形工具放大为220×220的正方形元件。
 （5）在“图层2”的第49帧、“图层3”的第55帧、“图层4”的第61帧和“图层5”的第67帧上创建“补间动画”。将“图层2”至“图层5”的76帧至78帧均设置为空白帧。
 选择“文件”/“保存”，将文件保存在站点文件夹的根目录下。选择“文件”/“导出”/“导出影片”，将文件导出为“swf”格式的文件，保存在网站xuhl根目录下备用。至此整个Flash动画制作全部完成，
 2、几个链接按钮的制作。
 主页中“首页”、、“政策法规”、“以案释法”、“服务指南”、“联系我们”等链接按钮，是采用Dreamweaver MX 2004中的“滚动图片”功能制作的，所以必须先行利用photoshop7.0软件制作出所有翻转前后的图片。
 具体过程如下：
 （1）在网站xuhl下建立“anliu”文件夹，用于存放按钮图片。
 （2）打开photoshop7.0程序，选择“文件”/“新建”，在“预置尺寸”选“自定义”，将论文宽度设置为“6cm”，将高度设置为“0.9cm”，模式设置为“RGB颜色”，单击“确定”。选取“工具面板”中的“文字工具”，在空白论文中拖曳一个柜形文本输入区，输入文字“首页”，调整文字大小为“24点”，格式为“伪粗体”，垂直压缩为“70%”，字体颜色设为“深蓝色”。用“移动工具”将文字调整到适中位置。
 （3）选择“文件”/“另存为”，将文件名设为“sy1”,格式为“gif”， 保存在“anliu”文件夹下，单击“保存”，出现“要合并图层吗？”对话框，单击“确定”，出现“索引颜色”对话框，在“调板”选项框中选“实际”，在“强制”选项框中选“无”，单击“确定”，出现“GIF选项”对话框，选择“normal”，单击“确定”即可。完成存放在“anliu”文件夹下备用。
 （4）回到“photoshop7.0”编辑界面，选择“文字工具”，选取“首页”两字，将文字大小调整为“30点”，选择“图层”面板，点击“添加图层式样”图标进入“图层式样”对话框，选择“颜色叠加”选项，将颜色设置为“#9D0000”，再选择“内阴影”选项，再选择“投影”选项，将“投影角度”设置为“120度”，将投影的“距离”设置为“8个像素”，“大小”设置为“5个像素”，单击“确定”。参照步骤（3），将该图像存放在“anliu”文件夹下，文件名为“sy2”,文件格式为“gif”。
 （5）重复步骤（3）、（4），分别制作出 “政策法规”、“以案释法”、“服务指南”、“联系我们”的按钮图像，全部存在“anliu”文件夹下备用。文件名分别为“zcfg1.gif”、“zcfg2.gif”,“yasf1.gif”、“yasf2.gif”，“fwzn1.gif”、“fwzn2.gif”，“lxwm1.gif”“lxwm2.gif”。
 3、栏目图标的制作。
 主页上“图片新闻”、“公安快讯”、“警务公开”、“局长信箱”及“常用电话”、“友情链接”等图片,也是利用photoshop7.0软件制作的，制作方法与以上制作链接按钮的方法大体相同，只是将图像存为“jpg”格式。
 （二）“政策法规网页”的素材准备。
 1、标题动画的制作。
 （1）利用phtotshop7.0软件制作出“海陵公安”的图片，参照前述的方法。利用“滤镜工具”中的“渲染”功能内的“镜头光晕”效果，制作出光晕由小到大的8幅gif格式的图片，分别存入站点xuhl目录下falufagui/“海陵公安标题动画”文件夹内。
 （2）打开Macromedia Fireworks MX 2004软件，新建一个230×68的空白论文，分别将事先制作好的8幅gif图片导入，并转换为图形“元件”。打开“窗口”/“库”，可看见库面板中“元件1”至“元件8”。
 （3）切换到“帧和历史”面板，点击面板右上方的图标，选择“添加帧”，直添加到8帧。选中第1帧后，从“资源”面板中将“元件1”拖放到第1帧上，并调整好位置；再切换到“帧和历史”面板，选中第2帧，再从“资源”面板中将“元件2”拖放到第2帧上。这样，直到将8个元件分别拖放到8个帧上。
 （4）打开“优化”面板，选择“GIF动画”，然后将文件导出为GIF动画，存放在站点xuhl目录下falufagui/“海陵公安标题动画”文件夹内，文件名为“hlga.gif”。
 2、制作“返回首页”按钮图片。
 利用phtotshop7.0软件制作出“返回首页”图片，存为jpg格式的图片，存放在站点xuhl目录下falufagui文件夹内，文件名为“fanhuizhuyei.jpg”。
 （三）“以案释法网页”的素材准备。
 主要介绍标题flash动画的制作方法：
 该flash动画制作的是“打字机效果”。具体步骤如下：
 1、打开Macromedia flash MX 2004程序，新建一个空白论文，在属性面板中设置其尺寸为“850像素×150像素”，背景为黑色，帧频设置为“12 fps”。
 2、选择“视图”/“网格”/“显示网格”菜单选项，以便制作时精确定位文字。
 3、选择“视图”/“对齐”/“对齐网格”。
 4、选择“视图”/“图格”/“编辑网格”菜单选项，将网格的大小调整为“20px×20px”。
 5、双击“图层1”的名称，将图层重命名为text1。
 6、在工具面板中选取“文本工具”，在“属性”面板中设置文本类型为“静态文本”，字体为“黑体”、字体大小为“40”，颜色为红色“#FF0000”，在工作区中输入文本“泰州电大2001秋计算机班”（“2001”之间必须加空格，以保证每个数字占2个字符）。
 7、用鼠标右击图层的第25帧，在弹出的快捷菜单中选择“插入帧”选项。
 8、单击“时间轴”面板左下角的按钮，添加新图层“图层2”，并将该层重新命名为mask1，然后，在图层控制区中用鼠标右键单击该图层，在弹出的快捷菜单中选择“遮罩层”选项，将mask1图层设置为遮层。
 9、取消text1层和mask1图层的锁定状态。
 10、在工具面板中选取“矩形工具”，选择“窗口”/“设计面板”/“混色器”菜单选项，打开“混色器”面板，在其中设置“笔触颜色”为无、“填充颜色”为黄色，在mask1图层对应的第1帧工作区中绘制一个矩形，用“选择工具”将矩形移至第一个文字“泰”上。
 11、在mask1图层的第13帧上“插入关键帧”。
 12、在工具面板中选取“任意变形工具”，调整工作区中矩形的注册点，将其从中心位置调整到左侧。以注册点为基点，将矩形进行横向缩放，直到矩形全遮住第一行所有文字。
 13、单击mask1图层的第1帧，在“属性”面板中的“补间”下拉列表框中选择“形状”选项，创建补间动画。
 14、添加“图层3”，将其重命名为text2。添加“图层4”，并将其重命名为mask2，右键mask2，在弹出的快捷菜单中选择“遮罩层”选项，将mask2图层设置为text2的遮罩层
 15、参照步骤6至13，制作第2行文字“学员徐宏林毕业设计作品”的补间动画。
 16、添加“图层5”，并将其重命名为line。
 17、选择“插入”/“新建元件”菜单选项，新建一个名称为line的“图形”元件。在工具面板中选取“线条工具”，在“属性”面板中设置“笔触颜色”为黄色，“笔触高度”为5，并在工作区中绘制一条直线。
 18、选择“编辑”/“编辑论文”菜单选项或单击工作区左上角的“场景1”超链接，退出元件编辑模式。
 19、关闭mask1图层和mask2图层。
 20、打开“库”面板，用鼠标将line元件拖放到line图层的工作区中第1行的第一个字“泰”下。
 21、用鼠标右击line图层的第13帧，插入“关键帧”。
 22、将line元件拖放到第一行文字的最后一个字下面，然后用鼠标右击line图层的第1帧，在弹出的快捷菜单中选择“创建补间动画”选项。
 23、用鼠标右击line图层的第14帧，插入“关键帧”。
 24、将line元件拖到第2行文字的第一个字“学”下面。
 25、参照步骤22，为第2行文字创建补间动画。
 26、为text1和text2图层的文字设计渐隐效果（参照“首页”上“海陵公安”文字的制作方法）。
 27、选择“插入”/“场景”，新建一个场景，制作“以案释法”的动画（略）。
 28、选择“文件”/“导出”/“导出影片”，将该flash 导出存放在网站xuhl下的“yianshifa”文件夹内，文件名为“touwenzi2.swf”。
 （四）“服务指南网页”的素材准备。
 主要是将你所要向用户提供的服务内容进行收集、分类，作为该页制作时的资料。
 （五）“联系我们网页”的素材准备。
 同上，准备相关资料备用。
 二、实质性制作阶段
 这一阶段形象地说，就是组装阶段，也就是根据设计方案中所确定的网页结构，将“前期准备阶段”中所收集或制作的各种文字、图像、动画等信息按事先规划好的布局进行合理组装，精心调整，并设置相关链接，形成一个完整的网页。
 （一）“网站首页”制作。
 1、启动Macromedia Dreamveaver MX 2004 程序，选择“文件”/“新建”菜单选项，打开“新建论文”对话框，在“常规”选项卡中的“类别”列表中选择“框架集”选项，然后在“框架集”列表中选择“上方固定”项，最后单击“创建”即可。
 2、选择“文件”/“保存全部”，根据页面上所显示的加粗框子的位置，分别将三个框架文件保存为“index.htm”、“main.htm”和“top.htm”，存放在网站文件夹“xuhl”根目录下。
 3、重新打开网站首页文件“index.htm”，将光标放在上方框架内，选择“插入”/“布局对象”/“层”菜单选项，在上方框架内插入一个层，调整“层”的大小为“900px×200px”，在该层内插入一个2行5列的表格，选中第1行的5列单元格，进行合并。在合并后的第一行内，先后插入在“前期准备阶段”准备好国徽图像（gh.jif），和制作好的“海陵公安”flash动画(twj.swf)；在表格的第2行的5列内，分别插入事先制作好的存放在网站xuhl下 “anliu”文件夹内的按钮图像“sy1.gif”、“zcfg1.gif”、 “yasf1.gif”、 “fwzn1.gif”、“lxwm1.gif”。
 4、创建按钮链接。选中第1列“首页”图像，选择“插入”/“图像对象”/“鼠标经过图像”菜单，将“原始图像”选项选择为“anliu/sy1.gif”，“鼠标经过图像”选项栏内选择为“anliu/sy2.gif”，“替换文本”选项栏内填写“网站首页”，在“按下时，前往的URL”填写为“index.htm”，在属性面板中的“目标”（target）选择“_parent”选项。
 5、制作按钮下的横线。选择“插入”/“布局对象”/“层”菜单选项，再在网页上插入一个新层“层2”，调整“层”的大小为“900px×30px”，将该层移至头部表格的下方（该层实际上重叠在“层1”上），将光标放在“层2”内，选择“插入”/“HTML”/“水平线”菜单选项，在“层2”上插入2条水平线，选中第1条水平线，选择“修改”/“快速标签编辑器”菜单选项，将选项框内设置为“<hr color="#ff9900">”（橙色）。同样的方法，将第2条水平线设置为“蓝色”。
 6、在aminframe部位分别插入2个层，呈左右排列，分别构成main框架内的“友情链接”部分和需要在首页上直接显示和链接的重要信息部分（“图片信息”、“公安快讯”、“警务公开”、“局长信箱”和“常用电话”），左侧层设置为“185px×490px”，右侧的层宽度设置为“720px”，高度设置为“100%，”在属性面板中将该层的背景颜色设置为“#C2D2FC”（淡蓝色）。
 7、在左侧层中根据设计链接的多少插入一个2列、若干行的表格，第1行插入图像文件“youqinlianji.jpg”，第2行向下分别输入需链接网站的名称，然后分别为这些名称建立链接。在该层下插入一个“表单”，将需链接的派出所等单位纳入该表单内，在表单的上方插入一个层，适当调整大小并输入“本局各派出所”的字样。
 8、在右侧层中插入一个多行多列的表格，根据在“初步设计”阶段设计的结构，分别插入“图片信息”、“公安快讯”、“警务公开”、“局长信箱”和“常用电话”的图像，分别在它们的图像下输入内容文字并建立链接。下面稍稍详细介绍一下“图片信息”下的flash图像及“滚动文字”的制作：在“图片信息”图像的下一行中插入事先制作好的flash图像，在其右侧一列中输入该图片信息的内容说明文字，切换到“代码”界面，在该段文字前加上代码“<marquee direction="up" scrolldelay="200">”，文字后面加上“</marquee>”,对其滚动的方向和速度进行设置。
 9、最后用在该层上分别插入2条水平线和1条垂直的窄条状层（作竖线），将该层作适当的分隔，使内容的结构分布更加条理分明。
 （二）“政策法规”网页制作。
 因该网页制作的方法与“首页”所制作的方法基本相似，故省略。
 （三）“以案释法”网页制作（略）。
 （四）“服务指南”网页制作（略）。
 （五）“联系我们”网页制作（略）。
 
第五章  设计中所遇难题及解决方案
 1、在网页编辑的界面下，整个布局的显示很正常，而在游览器中显示时，却出现显示重叠的现象。
 解决方法：在编辑状态下，将相关层的位置细心移动，再通过查看游览器中的效果反复进行调整。
 2、所制作的网页，在不同计算机上打开，所显示的效果不同，且有的显得比例失调。
 解决方法：各个计算机显示器的分辨率设置得不同，而造成以上原因，将显示器的分辨率调整为你制作网页所用的计算机的分辨率，即可解决这一问题。
 3、在制作flash动画过程中，有时会出现选择第1个关键帧后从属性面板中选择“形状”或“动作”，在两个关键帧之间创建不了补间动画。
解决方法：出现这种情况后，可以拖动鼠标选中将后一个关键帧到前一个关键帧之间的所有帧，然后右击鼠标，选择“创建关键帧”，即可。如仍然不行，则必须将每帧均设置为“关键帧”，耐心地制作每一帧，形成动画补间。
 
第六章  结束语
 这次毕业设计，是理论与实践的有机结合，它使我对这几年所学的知识有了一个较为全面的综合运用，使所学的东西在毕业设计中得到了进一步消化，得到了更好掌握。从这次毕业设计中，使我理解了“实践出真知”的哲学道理，也从中体会到了“学有所获”的无穷乐趣，更加知道了“学无止境”的深刻内涵。我要以此次毕业设计为契机，在今后的道路上，不断学习，不断实践，不断拓宽自已的视野，丰富自已的知识，增加自已的才干，以奉献社会，报效祖国。

相关论文