计协（社团）静态网站毕业设计论文

1、滁州职业技术学院信息工程系 2010 届软件技术专业毕业论文 姓 名： 班 级： 07 软件（2）班 设计课题： 计协（社团）静态网站 指导教师： 2009 年 12 月 目 录 目目 录录 摘要.1 一、设计思想及准备工作.2 1.1设计思想.2 1.2准备工作.2 1.2.1 网站策划.2 1.2.2 素材准备.3 1.3网页设计考虑的问题.3 1.4网页制作的流程.4 1.5网站结果描述.5 二、开发工具与开发技术.5 2.1 开发工具.5 2.1.1 网页制作工具 dreamweaver 简介 .5 2.1.2 图形处理软件 .6 2.1.3 动画制作软件 .6 2.2 开发技术.6

2、2.2.1 网页和 html 语言 .6 2.2.2 css 简介.7 三、网站总体分析与设计.8 3.1网站系统分析.8 3.2主页设计.9 3.3背景分析.9 3.4网页设计的色彩.9 四、为什么选择 dreamweaver .9 五、详细设计方案.10 5.1 设置站点.10 5.2 页面制作.11 5.2.1 创建主页页面.11 5.2.2 其它页面的制作 .13 5.3 网站布局技术.14 5.4 创建并连接到外部 css 样式.15 5.4.1 创建新的 css 样式.15 5.4.2 附加外部 css 样式表.16 5.5 插入图像和媒体.16 5.5.1 图片的制作和插入图片.

3、16 5.5.2制作 flash .17 5.6 超级链接.18 5.6.1 链接分类.18 5.6.2 创建超级链接的快速方法.18 5.7 网页中特效的运用.19 5.8 整理站点.21 六、总结与体会.22 6.1 总 结.22 目 录 6.2 心得体会.22 致谢.23 参考文献.23 滁州职业技术学院软件技术专业毕业论文 1 摘 要 21 世纪是信息高速发达的时代，互联网实现了世界范围的网络间的互联和信息共享，并已全面介入 人类生产生活的方方面面，带动着人类社会的飞速发展，发挥着重要的作用。 随着我国计算机技术的发展与普及，国民已经离不开了网络，网络已经成为人与人之间交流的一种 形式

4、，他能够把事情的复杂化转为简单化。因此网站建设在互联网的应用上的地位显而易见，它已成为 信息社会的重要组成部分，从而倍受人们的重视。 网站的建设不仅能够使我们的活动有所改变，也为我们的工作和学习提供了服务。同时也大大地提 高了我院学生的交流效率，也增加了该社团的知明度，更重要的是为我院计算机爱好者提供了一个网络 生活空间，促进了我们对网络知识的进一步地学习。为了今后更好的方便大家联系、交流，特构建职院 计协之家网站。 通过该网站展示了计协信息、机构设置、协会新闻、学习园地、学习资料、问题集锦、休闲娱乐等 系列内容的介绍。网站制作工具是使用 dreamweaver 8.0、flash 8.0、f

5、ireworks 8.0、adobe photoshop 等， 网站是基于我院计算机协会成员及计算机爱好者为背景开发的，可以有效的实现网上资源共享和学习交 流。同时您也可以利用 qq 群和电子信箱经济而又快捷地与外界进行各种信息沟通。 规划并建设好一个学术性综合网站，并不是一件容易的事。这要求我们制作者要明确和熟悉设计的 对象和构成的要素。另外，将要着手确定网站的风格、布局、色彩搭配等，这就锻炼提高了我的网页制 作水平，美工、排版能力。 在论文中首先介绍了网站建设的相关知识，并根据以上知识制作网站。文中主要包括需求分析、网 站的总体设计、详细设计等，并通过流程图和文字加以解释说明。在论文中还包

6、括了部分网站制作的主 要程序代码。 滁州职业技术学院软件技术专业毕业论文 2 一、设计思想及准备工作 1.1 设计思想 通过网站，全面宣传，展示计算机协会活动风采、技术氛围、团体优点与特色，发布协会的重大活 动安排与日常工作特色，增强团体的知名度，使人们更多了解我们的团队,在 internet 上实现完成部分介绍 及宣传活动，提高计算机爱好者对我们的关注，加大交流团体。 由于我们的水平有限的，所以上面的有些特效都是从网上借鉴来的，例如相册、幻灯图等。总体来 说网站的布局，是统一的，这样在浏览的时候不至于显得太混乱。 1.2 准备工作 1.2.1 网站筹划 界面就是网站给浏览者的第一印象，往往决

7、定着网站的可看性，在确定网站的界面时要注意以下三 点： （1）栏目与板块编排 构建一个网站就好比写一篇论文，首先要列出提纲，才能主题明确、层次清晰。我们在动手制作网 页前，一定要考虑好栏目和板块的编排问题。 网站的题材确定后，就要将收集到的资料内容作一个合理 的编排。比如，将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是 一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安 排。在栏目编排时需要注意的是： 尽可能删除那些与主题无关的栏目； 尽可能将网站内最有价值的内容列在栏目上； 尽可能从访问者角度来编排栏目以方便访问者的浏览；

8、辅助内容，如站点简介、版权信息等大 可不必放在主栏目里，以免冲淡主题。 另外，板块的编排设置也要合理安排与划分。板块比栏目的概念要大一些，每个板块都有自己的栏 目。 （2）目录结构与链接结构 网站的目录是指建立网站时创建的目录。例如：在用 dreamweaver 建立网站时都默认建立了根目录 和 images 子目录。目录的结构是一个容易忽略的问题，大多数制作者都是未经规划，随意创建子目录。 目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的维护，以后内容的扩充和 移植有着重要的影响。所以建立目录结构时也要仔细安排，比如： 不要将所有文件都存放在根目录下。有网站制作者为了方便

9、，将所有文件都放在根目录下。这 样就很容易造成：文件管理混乱，搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除， 哪些是相关联的文件，影响工作效率。 按栏目内容建立子目录。子目录的建立，首先按主栏目建立。新闻内容较多，需要经常更新的 可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，例如：协会简介、协会章 程等可以合并放在一个统一目录下。 在每个主目录下都建立独立的 images 目录。一般来说，一个站点根目录下都有一个默认地 images 目录。将所有图片都存放在这个目录里很是不方便，比如在栏目删除时，图片的管理相 当麻烦。所以为每个主栏目建立一个独立的 images 目录是方

10、便管理的。需要注意的还有：目录 的层次不要太深，不要超过 3 层；不要使用中文目录，可能对网址的正确显示造成困难；不要 使用过长的目录，太长的目录名不便于记忆；尽量使用意义明确的目录，以便于记忆和管理。 （3）网站的链接结构 网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。 形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接， 也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。 滁州职业技术学院软件技术专业毕业论文 3 一般的，建立网站的链接结构有两种基本方式： 树状链接结构（

11、一对一） ，这类似 dos 的目录结构，首页链接指向一级页面，一级页面链接指向 二级页面。这样的链接结构浏览时，一级级进入，一级级退出，条理比较清晰，访问者明确知道自己在 什么位置，不会“不知身在何处” ，但是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必 须回到首页再进行。 星状链接结构（一对多） ，类似网络服务器的链接，每个页面相互之间都建立有链接。这样浏览比 较方便，随时可以到达自己喜欢的页面。但是由于链接太多，容易使浏览者迷路，搞不清自己在什么位 置，看了多少内容。 因此，在实际的网站设计中，总是将这两种结构混合起来使用。网站希望浏览者既可以方便快速地 达到自己需要的页面，又

12、可以清晰地知道自己的位置。所以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接结构。关于链接结构的设计，在实际的网页制作中是非常 重要一环，采用什么样的链接结构直接影响到版面的布局。 1.2.2 素材准备 （1）搜索浏览，制作收集素材。 明确了网站的主题以后，你就要围绕主题开始搜集材料了。为了收集素材，除了身边现成的一些素 材，还需要到网上多查找素材。 有的图片可以自己用 photoshop、fireworks 制作设计。 对于一些实物素材，我们利用拍摄、扫描等帮助，处理成电脑文件以便设计时使用。 网络搜索找素材：利用网络搜索引擎，输入与主题相关的关键词进行搜索

13、下载，然后加以修改。 浏览网页选素材：逐个浏览搜索到的相关网页，寻找可以利用的材料。注意记录下选中的网页 地址，以便随时复制需要的资料。也可以及时下载保存看中的文字图片资料，在加以修改在使 用。 （2）整理素材，设计网页。 对收集的素材进行分类整理，并由此设置子网页栏目，一般不宜过多。将各类素材分别放入或 链接到相应网页中。对于网上素材的使用，采取下面两种做法： 对于重点素材，一般用复制、下载的方法放入自己的网页中，如自己各子网页的文字、图片等 中心内容。 对于相关的次要素材，尤其是内容丰富而繁杂的，用超链接的方法将整个网页链接到自己的网 页中，但不宜过多；还可以是整个网站的友情链接。这也是一

14、些中小型网站常用的丰富自己、 加强交流的好方法，给上网浏览者带来不少方便。 1.3 网页设计考虑的问题 当你在 internet 这个信息的海洋中尽情遨游时，会发现许许多多内容丰富、创意新颖、设计独特的网 页，见到这样漂亮可人的网页有点心动。但是网页设计时应考虑哪些方面的问题，包括网站功能和以及 访问者需要什么。你的整个设计都应该围绕这些方面来进行。 （1）页面内容要新颖 网页内容的选择要不落俗套，要重点突出一个“新”字，这个原则要求我们在设计网站内容时不能照抄 别人的内容，要结合设计主题的实际情况创作出一个独一无二的网站。放眼望去，网上从头到尾找不出 一丝“鲜”意。所以，我们在设计网页时，要

15、把功夫下在选材上。选材要尽量做到“少”而“精”,又必须突出 “新”，这样的网页一定会受到大家的欢迎。 （2）网页命名要简洁 由于一个网站不可能就是由一个网页组成，它有许多子页面，为了能使这些页面有效地被连接起来， 用户最后能给这些页面起一些有代表性的而且简洁易记的网页名称。这样既会有助于你以后方便管理网 页。在给网页命名时，最好使用自己常用的或符合页面内容的小写英文字母，这直接关系到页面上的连 接。 滁州职业技术学院软件技术专业毕业论文 4 （3）网页内容要易读 网站设计最重要的诀窍，恐怕就是你的网页要易读。这就意味着,你必须花点心思来规划文字与背景 颜色的搭配方案。注意不要使背景的颜色冲淡了

16、文字的视觉效果，别用花里胡哨的色彩组合，让人看起 来你的网页来很费劲。一般来说，浅色背景下的深色文字为佳。另外，最好让文本左对齐，而不是居中。 按当代中文的阅读习惯，文本大都居左的。当然，标题一般应该居中，因为这符合读者的阅读习惯。 （4）少用特殊字体 虽然你可以在你的 html 中使用特殊的字体，但是，你不可能预测你的访问者在他们的计算机上将 看到什么。在你的计算机里看起来相当好的页面，在另一个不同的平台上看起来可能非常糟糕。一些网 站设计员喜欢使用来定义特性，这虽然允许你使用特殊的字体，但是仍需要一些变通的方法，以免你所 选择的字体在访问者的计算机上不能显示。级联风格表 css 有助于解决

17、这些问题，但是只有最新版的浏 览器才支持 css。 （5）考虑浏览器的兼容性 当然现在 ie 所占的市场份额越来越大，但是我们仍然需要考虑到 mozilla firefox、netscape 以及 opera 这些浏览器用户。设计风格的考虑，如色彩的搭配，图形、线条的使用等等。要时刻为用户着想， 必须最少在几种不同类型的浏览器下测试网站，看看兼容性如何。 （6）网页风格要统一 网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯 穿全站。这样子用户看起来舒服、顺畅，会对你的网站留下一个“很专业”的印象。 （7）动画最多只用一个 大家都喜欢用 gif 动画来装饰

18、网页，它的确很吸引人，但我们在选择时，是否能确定必须用 gif 动 画，如果答否，那么就选择静止的图片，因为它的容量要小得多。同样的尺寸的 logo，gif 动画的容量 有 5k，而静止 logo 的只有 3k。虽然只有 2k 之差，但多起来，就会影响下载的速度，所以，如果有 些不是必须的，就选择最小的。 （8）善用图像 用户在网上四处漫游，你必须设法吸引和维护他们对你的主页的注意力。万维网的其中一个最重大 资源是其多媒体能力，所以我们无论如何要善加利用。主页上最好有醒目的图像、新颖的画面、美观的 字款，使其别具特色，令人过目不忘。注意图画可以弥补文字之不足，但并不能够完全取代文字。制作 主页

19、时，必须注意将图像所连接的重要信息或联接其他页面的指示用文字重复表达几次，同时要注意避 免使用过大的图像。 （9）使网站具有交互功能 一个静态网页始终给人一种呆板的感觉，缺少一种活力和生气。最好在网站上提供一些回答问题的 工具以及其他具有交互性能的设计，使得访问者能从网站上获得交互的信息，从而使访问者有一种参与 网络建设的新鲜感和成就感。 1.4 网页制作流程（如：图 1-1） 滁州职业技术学院软件技术专业毕业论文 5 确确定定 主主题题 需需求求 分分析析 总总体体 设设计计 搜搜索索整整 合合资资料料 特特效效技技 术术制制作作 页页面面 设设计计 效效果果 分分析析 制制作作 评评审审

20、整整合合 测测试试 修修改改评评 审审完完成成 图 1-1 1.5 网站结构描述 （如：图 1-2） 滁州职业技术学院软件技术专业毕业论文 6 首首页页 协协会会简简介介 协协会会简简述述 协协会会章章程程 管管理理制制度度 指指导导老老师师 协协会会概概况况 现现任任学学生生干干部部 技技术术交交流流科科目目 娱娱乐乐活活动动形形式式 协协会会品品牌牌活活动动 机机构构设设置置 软软件件技技术术部部 网网络络技技术术部部 设设计计制制作作部部 硬硬件件技技术术部部 事事务务秘秘书书处处 新新闻闻动动态态 协协会会新新闻闻 协协会会公公告告 软软件件编编程程应应用用 网网络络网网页页技技术术

21、图图形形图图像像技技术术 硬硬件件维维护护技技术术 技技术术园园地地 i t 动动态态 活活动动风风采采 生生活活娱娱乐乐 资资源源共共享享 协协会会视视频频 计计算算机机协协会会网网站站（计计协协之之家家） 图 1-2 二、开发工具与开发技术 本站主要使用 dreamweaver 8.0 软件及 div+css、html 进行网页的排版布局、使用 fireworks 8.0 和 photoshop cs 处理图片及制作一些特效文字、flash 8.0 制作本站动画。 2.1 开发工具 2.1.1 网页制作工具 dreamweaver 简介 dreamweaver 是美国 macromedia

22、 公司开发的集网页制作和管理网站于一身的网页编辑器，它是第一 套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和 跨越浏览器限制的充满动感的网页。dreamweaver 是当前主流的站点和网页编辑器，其代码简洁、兼容性 和整体功能都很强。dreamweaver 的介入，使得网页一些部分的实现变得更加直观简便。 滁州职业技术学院软件技术专业毕业论文 7 2.2.2 图形处理软件 我们有 fireworks 和 photoshop 两种选择，adobe photoshop 在绘图、色彩调整等诸多方面有着出色的 功能，集成度高、适应面广和操作简便。他不仅提供强

23、大的绘图工具，可以直接绘制艺术图形，还能直 接从扫描仪，数码相机等设备中采集图像，并对他们进行编辑、修复、以及调整效果，同时可以改变图 像的颜色模式，并能在图像中制作艺术文字等。photoshop 中的高级绘图工具，可自动生成背景纹理、图 层效果，多种特殊效果滤镜，可创建多种艺术效果和绚丽的 web 图形并可直接在 photoshop 中定义和编辑 切片的工具透明控制，包括用于混合到任意背景中的边缘的仿色透明度。强大的彩色校正工具修复 画笔，可在消除瑕疵的同时保留色调和纹理图层。photoshop 的强大工具可以使操作者不管制作任何图像 都游刃有余。对于设计网页，photoshop 是不可或缺

24、的工具，是强大的图片处理工具，可谓是平面设计方 面的老大。 fireworks 是一款非常优秀的图形处理软件，它是 macromedia 公司专门为了网络图形而设计的一款软 件，它可以非常方便地制作出下拉菜单、图片热区等效果，而且网页图形的优化也非常专业。fireworks 是用来设计和制作专业化网页图形的应用软件，它提供了一个制作环境，可以在一个专业化的环境中创 建和编辑网页图形，对其进行动画处理，添加高级交互功能以及优化图像。它们使 fireworks 从概念到集 成上成为网页设计和开发过程的一个重要组成部分。 2.2.3 动画制作软件 动画制作肯定是 flash ，它是 macromed

25、ia 公司出品的 flash 是制作网页动画的利器。严格来说， f1ash 是网络多媒体制作工具而不是网页编辑工具。f1ash 是制作动感网页的权威。对于使用者来说，只 需很短时间的学习，就可以用它制作出美观的网页动画。可以让制作者随心所欲地实现各种创意，并且 可以和 javascript 一起创作出具有强大交互性的网页动画。 flash 是一种绘制矢量图形和创作互动多媒体动画的软件。用 flash 制作出来的动化是矢量的，不管 怎样放大、缩小，它还是清晰可见。 用 flash 制作的文件很小，这样便于在互联网上传输，而且它采用 了数据流技术，只要下载一部分，就能欣赏动画，而且能一边播放一边传

26、输数据。 交互性更是 flash 动 画的迷人之处，可以通过点击按钮、选择菜单来控制动画的播放。flash 创建的动画集可以插入到 html 文 档中，也可以单独制作网页。使网页的效果更加完美。正是有了这些优点，才使 flash 日益成为网络多 媒体的主流。 2.2 开发技术 2.2.1 网页和 html 语言 我们的网页是用 html 语言编写的一个网站，html 中文翻译为“超文本标记语言” ，所谓“超文本” 就是指页面内可以包含图片，链接，多媒体等非问字的元素，通过 html 语言将这些元素表示出来，就形 成了 html 代码。浏览器的工作主要是将这些标记语言进行“翻译” ，并按照定义的

27、格式显示出来，这就是 我们所看到的网页。 html 的结构包括头部（head） 、主体（body）两大部分，其中头部描述浏览器所需的信息，而主体 则包含所要说明的具体内容。 另外，html 是网络的通用语言,一种简单、通用的全置标记语言。它允许 网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是 什么类型的电脑或浏览器。 其主要特点如下： （1）简易性，html 版本升级采用超集方式，从而更加灵活方便。 （2）可扩展性，html 语言的广泛应用带来了加强功能，增加标识符等要求，html 采取子类元素的方 式，为系统扩展带来保证。 （3）平台无关性。虽然

28、pc 机大行其道，但使用 mac 等其他机器的大有人在，html 可以使用在广泛 的平台上。 下面是一个层的下面是一个层的 html 代码示例：代码示例： 滁州职业技术学院软件技术专业毕业论文 8 计协之家 2.2.2 css 简介 css (层叠样式表) 是一系列格式设置规则，它们控制 web 页面内容的外观。使用 css 设置页面格 式时，请将内容与表现形式分开。页面内容（即 html 代码）驻留在 html 文件自身中，而用于定义 代码表现形式的 css 规则驻留在另一个文件（外部样式表）或 html 文档的另一部分（通常为文件头 部分）中。使用 css 可以非常灵活并更好地控制具体的页

29、面外观，从精确的布局定位到特定的字体和样 式。 css 允许控制 html 无法独自控制的许多属性。 除设置文本格式外，还可以使用 css 控制 web 页面中块级别元素的格式和定位。 css 的主要优点是: 它提供了便利的更新功能；更新一处的 css 规则时，使用该已定义样式的所有 文档的格式都会自动更新为新样式。 外部 css 样式表是一系列存储在一个单独的外部 css (.css) 文件（并非 html 文件）中的 css 规则。利用文档文件头部分中的链接，该文件被链接到 web 站点中的一个或多个页面。 内部（或嵌入式）css 样式表是一系列包含在 html 文档文件头部分的 styl

30、e 标签内的 css 规 则 字体大小的 css 的代码如下： html 文档部分代码：文档部分代码： 滁州职业技术学院软件技术专业毕业论文 9 计协之家新闻 为丰富校园生活，提高学生的游戏体育竞技水平，培养学生健 康上网、文明上网的良好风气。同时通过本次比赛，向同学们展示网络的优势，为活动增 添悬殊般的色彩。我们协会在本次电. 与上面与上面 html 文档匹配的部分外部文档匹配的部分外部 css 代码：代码： body font-family: 宋体,arial, helvetica, sans-serif; font-size: 13px; color: #333333; backgrou

31、nd-color:#ffffff; width:1000px; line-height: 1.6em; background:url(./images/bg.gif); padding:0; margin: 0; .zi font-size: 18px; font-weight: bold; .zi1color: #ff0000; .zi2font-size: 16px ; 三、网站总体分析与设计 3.1 网站系统分析 根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站作如下划 分： 协会简介：主要介绍协会简述、协会章程、管理制度、指导老师相关内容。 协会概况：

32、主要介绍现任学生干部、技术交流科目、娱乐活动形式、协会品牌活动等。 机构设置：主要介绍协会各部门的职能和技术交流方向。 新闻动态：报道协会近期活动或技术交流动态，现象的介绍协会日常工作。 技术园地：聚集各种计算机相关的技术知识，以便计算机爱好者学习。 i t 动态：跟踪近期 it 行业的最新技术和新闻等相关内容。 活动风采：直观的展现协会丰富多彩的活动相关效果图。 滁州职业技术学院软件技术专业毕业论文 10 生活娱乐：相关笑话和美文以便大家在学习累时放松，调节情绪。 资源共享：协会成员收集的好资料，资源共享，以便大家一起学习。 协会视频：协会相关活动或者技术视频。 3.2 主页设计 网站主页采

33、用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现社团的勃勃生气。 在主页的最下面我们还弄了许多的友情链接图标，这样用户可以有更多的选择性。不会让用户感到 本网站的单调。 我们还设计了视频图片和娱乐美文专区，用来增加网站的娱乐性，可以让网友能轻松愉快地欣赏本 网站，这样也能让网友们能更喜欢本网站。 在最下面我们还制作了一些友情连接的图片，可以让网站不单调，使得网站更具实用性。 3.3 背景分析 想要在视觉化环境下制作复杂网页的专业网页制作，dreamweaver 已经渐渐在网页编辑工具中崭露头角， 成为专业人士编写网页的最佳选择。 可分成四个主题。分别是： 设计网页页面（dreamw

34、eaver 里具有弹性的页面设计功能） ； 搭配 macromedia 其它产品一起使用 dreamweaver（制作动画和图片不求人） ； 自定义使用界面（享受个性化的使用经验） ； 最后的加入 dreamweaver 扩充程序（在网页中载入扩充高级功能） 。 3.4 网页设计的色彩 人们常常感受到色彩对自己心理的影响，这些影响总是在不知不觉中发挥作用，左右我们的情绪。 色彩的心理效应发生在不同层次中。有些属直接的刺激，有些要通过间接的联想，更高层次则涉及到人 的观念，信仰，对于艺术家和设计者来说，无论哪一层次的作用都是不可忽视的。对于网页设计者来说， 色彩的心理作用尤其重要，因为用网络是在

35、一种特定的历史与社会条件的环境下，即高效率，快节奏的 现代生活方式的条件，这需要做网页时把握人们在这种生活方式用网络的一种心理需求。针对不同的主 题来布置色彩，如健康类的网页就不能采用较为刺激的大红和黄，以及象征死亡和神秘的黑色和紫色， 这样会造成一种紧张和某种程度的恐慌，所以我们所选的颜色是统一“青绿”色，给网民们清爽舒 服地感觉。 四、为什么选择 dreamweaver dreamweaver 是制作主页的好工具.dreamweaver 是可视化的网页制作工具，很容易上手，可以让你 轻松地制作出自己的网页。dreamweaver 在多媒体方面颇有建树的 macromedia 公司推出的可视

36、化网页制 作工具，它与 flash、fireworks 合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最 佳选择。其中，dreamweaver 主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高， flash 用来制作精美的网页动画，而 fireworks 用来处理网页中的图形。 复杂的说：dreamweaver 是美国 macromedia 公司开发的集网页制作和管理网站于一身的所见即所得 网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地 制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 dreamweaver 特点

37、： （1）最佳的制作效率 dreamweaver 可以用最快速的方式将 fireworks，或 photoshop 等档案移至网页上。使用检色吸管工具 选择荧幕上的颜色可设定最接近的网页色调。对于选单，快捷键与格式控制，都只要一个简单步骤便可 完成。dreamweaver 能与您喜爱的设计工具，如 flash 等搭配，不需离开 dreamweaver 便可完成，整体运 滁州职业技术学院软件技术专业毕业论文 11 用流程自然顺畅。除此之外，只要单击便可使 dreamweaver 自动开启 firework 或 photoshop 来进行编辑 与设定图档的最佳化。 （2）网站管理 使用网站地图可以

38、快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称， dreamweaver 会自动更新所有连结。使用支援文字、html 码、html 属性标签和一般语法的搜寻及置 换功能使得复杂的网站更新变得迅速又简单。 （3）无可比拟的控制能力 dreamweaver 是唯一提供 roundtrip html、视觉化编辑与原始码编辑同步的设计工具。它包含 home site 和 bbedit 等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想象。对于 css 的动 态 html 支援和鼠标换图效果，声音和动画的 dhtml 效果资料库可在 netscape 和 microsof

39、t 浏览器上 执行。使用不同浏览器检示功能，dreamweaver 可以告知您在不同浏览器上执行的成效如何。当有新的浏 览器上市时，只要从 dreamweaver 的网站在下载它的描述档，便可得知详尽的成效报告。 五、详细设计方案 5.1 设置站点 web 站点是一组具有如相关主题、类似的设计、链接文档和资源。dreamweaver8.0 是一个站点创建 和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 web 站点。创建 web 站点的第 一步是规划。为了达到最佳效果，在创建任何 web 站点页面之前，应对站点的结构进行设计和规划。决 定要创建多少页，每页上显示什么内容，页面布

40、局的外观以及页是如何互相连接起来的。 执行以下操作： （1）启动 dreamweaver 8.0： （2）选择“站点”“新建站点” （即，从“站点”菜单选择“管理站点” ） 。出现“站点定义”对话框。 如图 5-1： （3）如果对话框显示的是“基本”选项卡，则单击“高级” 。 出现“站点定义向导”的第一个界面，要 求您为站点输入一个名称。 滁州职业技术学院软件技术专业毕业论文 12 图 5-1 （4）在文本框中，输入一个名称以设计课题名称英文缩写“ceh_site” 。该名称可以是任何所需的名称。 （5）然后在下面的“本地根目录文件夹”和“默认图像文件夹”文本框中输入本地网站预保存的路径， 单

41、击“确认”按钮。 （6）随即在组合面板中弹出“站点”面板，现在可以在其中添加页面了。 （7）右键单击“站点”面板中的根目录，在弹出菜单中选择“新建文件”命令，把新建文件的名称改为 “index.html” 。 （8）双击 index.html，进入页面编辑状态。 5.2 页面制作 5.2.1 创建主页页面 在全面考虑好网站的栏目，链接结构和整体风格之后，就可以正式动手制作首页了。有一句俗语： 良好的开端是成功的一半。在网站设计上也是如此，首页的设计是一个网站成功与否的关键。人们往往 看到第一页就已经有一个整体的感觉。是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在 站点上，全凭首页的设

42、计。所以，首页的设计和制作是绝对要重视和花心思的。首页设计大致如下： 整个网站版面布局都是用 div+css 布局的，有较好的灵活性； 色彩的搭配主要统一用了“青绿”色调给人以清爽的感觉； div 布局的主要架构： 计协之家首页 /外部 css 链接路径 滁州职业技术学院软件技术专业毕业论文 13 /导航栏 /网页中心部分（核心和内容） /新闻动态和协会概要及机构具体内容 /新闻幻灯图片 /协会概要及机构具体内容 /新闻动态 /公告和资源共享 /公告版 /资源共享 /技术园地、娱乐和 it 信息板块 /流动图片 /友情链接 /页脚内容 滁州职业技术学院软件技术专业毕业论文 14 然后根据上文中

43、 css 层叠样式表的定义格式，结合 div 布局架构经行合理的编写 css 样式表 页面中的相关特效可以结合下文经行对位填充，字体和边框都在 css 经行了详细的编制。 最后首页基本就形成了（如：图 5-2） 滁州职业技术学院软件技术专业毕业论文 15 图 5-2 5.2.2 其它页面的制作 其他页面是在此主页面设计好的框架上加以修改，订好的 css 样式，添加一些内容和各页面该有的内 容。 分页导航页（如：图 5-3，it 动态页面） 图 5-3 具体内容页（如：图 5-4） 图 5-4 滁州职业技术学院软件技术专业毕业论文 16 这样计算机协会的网页就制作完成。 5.3 网站布局技术 本

44、站主要使用 div+css 布局。 div 本身就是容器性质的,你不但可以内嵌 table 还可以内嵌文本和其它的 html 代码；css 是 cascading style sheets 的简称，中文译作“层叠样式表单”，在主页制作时采用 css 技术，可以有效地对页面的 布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可 以改变同一页面的不同部分，或者所有页数的网页的外观和格式。 div+css 标准具有以下优点: 因为采用 css 布局，不像表格布局充满各种各样的属性和数字，而且很多 css 文件通常是共用的， 从而大大缩减页面代码，提高页面浏览速

45、度。 结构清晰，对搜索引擎更加友好。更容易被搜索引擎收录，具备搜索引擎 seo 的先天条件，配合优 秀的内容和一些 seo 处理，可以获得更好的网站排名。 兼容性更好，符合 web 标准规范的发展趋势，可以在几乎所有的浏览器上都可以使用，不会出现在 不同的浏览器中效果差距很大的情况。 缩短改版时间，因为网站的布局都是通过外部的 css 文件来控制，只要简单的修改几个 css 文件就 可以将许多网页的风格格式同时更新，不用再一页一页地更新了。 强大的字体控制和排版能力，css 控制字体的能力比糟糕的 font 标签好多了，css 不再需要用 font 标签或者透明的 1px 图片来控制标题、改变

46、字体颜色、字体样式等等。 提高易用性，使用 css 可以结构化 html，例如：p 标签只用来控制段落，h1-h6 标签只用来控制标题， table 标签只用来表现格式化的数据等等。 更好的扩展性。你的设计不仅仅用于 web 浏览器，也可以发布在其他设备上，比如 powerpoint 等。 更灵活控制页面布局，通常页面的下载是按照代码的排列顺序，而表格布局代码的排列代表从上向 下，从左到右，无法改变。而通过 css 控制，您可以任意改变代码的排列顺序，比如将重要的右边 内容先加载出来。 表现和内容相分离，干净利落，将设计部分剥离出来放在一个独立样式文件中，而网页主要来放置 您的内容，你可以减少

47、未来网页无效的可能。 更方便搜索引擎收录，并获得更高的评价。用只包含结构化内容的 html 代替嵌套的标签，主次分明， 搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。 table 表格布局灵活性不大，你只能遵循 table tr td 的格式。而 div 你可以 div ul li 也可以 ol li 还可以 ul li. table 表格布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而 div 更能体现样式和结构相分离，结构的重构性强。 以前一些必须通过图片转换实现的功能，现在只要用 css 就可以轻松实现，从而更快地下载页面。 5

48、.4 创建并连接到外部 css 样式 5.4.1 创建新的 css 样式 （1）在 css 样式面板中单击底部的“新建 css 样式”功能按钮，或者右键单击面板，在弹出的 快捷菜单中选择“新建 css 样式”命令，打开“新建 css 样式”对话框，如： 图 5-5 滁州职业技术学院软件技术专业毕业论文 17 图 5-5 （2）在“名称”文本框中输入样式名称。 （3）在“选择器类型”域中选择样式的种类。 （4）设置完成后单击“确定”按钮。 5.4.2 附加外部 css 样式表 （1）打开 css 样式面板。 （2）点击 css 样式面板底部的“附加样式表”打开“链接外部样式表”。图 5-6 图

49、5-6 （3）在“链接外部样式表”对话框上的“文件/url”域中输入所需要的文件。 （1）在“添加为”域中选择“链接”或“导入”指定和创建用于将外部 css 样式附加到文挡的 标签。 （2）完成后点击“确定”即可将所选择的 css 样式表附加到当前文挡， （3）在 css 样式面板中显示该 css 样式表 。图 5-7 滁州职业技术学院软件技术专业毕业论文 18 图 5-7 5.5 插入图像和媒体 5.5.1 图片的制作和插入图片 （1）图片处理 firework 在网站中，除了配合 flash 处理动画里的影片以外，主要是制作导航按钮和 banner，因为导 航按钮采用的是悬停方式，所以每个

50、按钮要同时做出两个版本。即原始状态和悬停状态。 firework 在图片处理上使用了高光和阴影的效果，以突出按钮的立体感、变化感、和悬停感。 firework 在处理 banner 的时候采用横幅与网站图标一体的方式处理，将二者整体化，不仅方便排版， 也方便浏览者浏览。 firework 在图片输出的时候采用 jpeg（iso 国际标准图像压缩）格式。这是目前网络较为流行的图 片格式，文件小，传输速度快，图片清晰。输出品质为 80，无平滑。 （2）插入图片 点击要插入图片的地方，然后点击插入-图像，然后就弹出“选择图像源文件”框（如：图 5-8） 。在图 片文件夹中选择要插入的图片就可以了。

51、图 5-8 5.5.2 制作 flash 一个吸引人的网站一定有一个华丽的 flah 过场动画，这样不仅给浏览者深刻的印象，同时突出了网 站的特点与风格。但 flash 相对 dw 制作较复杂，设计到帧、时间轴、剪辑、按钮等方面。下面是我这个 flash 制作过程的简单介绍： （1）虽然 flash 采用了流控制技术，但考虑到基带网的速度和本身 flash 的文件大小，我还是采用 目前流行的先下载后观看的方式，以保证音效和动画的流畅性。并且加装了一个进度条，随时检测下载 滁州职业技术学院软件技术专业毕业论文 19 速度和时间，让浏览者做到心中有数。只有当进度达到 100时，动画开始按钮才出现，

52、浏览者单击按钮， 动画随即开始。整个下载部分的动画放在一个剪辑中，不仅节省内存，而且方便库的管理。 （2）flash 动画设计风格为简洁、动感、时尚。 （3）flash 影片所有素材、按钮、剪辑、声音全部导入库中，时间轴上只有各个剪辑的层，从而节 约了内存，方便管理。 （4）影片导出时增加了保护功能，增加了影片的安全性，防止他人盗用修改影片。矢量图的品质为 100，保证了影片图像的质量，并且声音的输出格式为 mp3 采样标准为 128kbps 双声道立体声，该标准接 近 cd 标准，这样虽然增加了影片的大小，但是保证了声音的效果。同时输出的还有影片大小报告。 5.6 超级链接 作为网站肯定有很

53、多的页面，如果页面之间彼此是独立的，那么网页就好比是孤岛，这样的网站是 无法运行的。为了建立起网页之间的联系我们必须使用超级链接。称“超级链接” ，是因为它什么都能链 接，如：网页、下载文件、网站地址、邮件地址等等。 5.6.1 链接分类 按目标端点的类型分类：内部链接、外部链接、锚点链接、e-mail 链接。 按文挡路径分类：绝对路径链接、相对路径链接、根相对路径链接。 按原锚的对象类型分类：文本链接、非文本链接 5.6.2 创建超级链接的快速方法 （1）使用属性面板创建。 在文挡窗口中选中要创建链接的文本或图象等。在属性面板链接域中直接输入要链接的文件名称 。图 5-9 图 5-9 （2）

54、直接创建 在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。 在网页中选中要做超级链接的文字或者图片。 在属性面板中单击住指向文件按钮不放，在直接将其拖出，拖到右侧文件导航中选中要链接的页面。 （如下图） 滁州职业技术学院软件技术专业毕业论文 20 图 5-9 按 f12 预览网页。在浏览器里光标移到超级链接的地方就会变成手型。 5.7 网页中特效的运用 网页特效的运用在整个网站中并不是最重要的，但也是不可取少的，它在一定程度上起到了画龙点 睛的作用！也许你会说，有没有特效无所谓，只要网页构思好，网页页面设计的得好就可以了！这种想 法是不对的，过多的网页特效会使得页

55、面显得杂乱而且不整洁，但是适度的网页特效却能使网页更具有 灵动性，更能吸引人的眼球！ 在我们的网站的不同页面中分别运用了一些网页特效，是从网上下载的网页特效的代码，具体如下： 走马灯灯效果走马灯灯效果 效果：该特效的效果和幻灯片播放效果类似，多个图片循环出现，不停互换。 在所有页面中都有体现。 滁州职业技术学院软件技术专业毕业论文 21 图 5-10 新闻图片切换新闻图片切换 效果：自动有序、有时间段的进行图片切换，也可以点击下面的图片序列进行切换。 具体代码参见网站，效果如：图 5-11（正在切换中的效果）： 图 5-11 制作制作透明透明背景的背景的 flash应用应用 点击要插入 fla

56、sh 的地方，然后点击插入-媒体-flash 选择要插入的 flash 动画。如果想让 flash 的 背景透明，还有设置 flash 的参数那么设置这个参数之后 flash 的背景就是透明的了。图 5-12 滁州职业技术学院软件技术专业毕业论文 22 图 5-12 主要应用于网页顶部，代码如下： （其中：“707”为 flash 的宽度， “128”为 flash 的高度， “flash/banner.swf”为 flash 的存在路径， “”是对 flash 背景进行透明化。 ） 网页过渡效果的应用网页过渡效果的应用 主要应用于整个网页，代码如下： （其中：“duration=3”表示网页动态过滤的时间为 3 秒， “transition=19”表示网页过渡 的方式值为 19，即为从左上角向右下角展开。 ） 5.8 整理站点 网页做完以后往往不能马上发布，还需要检验下网页之间的链接是否准确，文件是否冗等，有时还 需要