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

滁州职业技术学院信息工程系 2010 届软件技术专业毕业论文 姓 名 ： 班 级 ： 07 软件（ 2）班 设计课题 ： 计协（社团） 静态网站 指导教师 ： 2009 年 12 月 目 录 目 录 摘 要 . 1 一 、 设计 思想 及准备工作 . 错误 !未定义书签。 1.1 设计 思想 . 2 1.2 准备工作 . 2 1.2.1 网站策划 . 2 1.2.2 素材准备 . 3 1.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.1 网页和 html 语言 . 6 2.2.2 CSS 简介 . 7 三 、 网站总体分析与设计 . 8 3.1 网站系统分析 . 8 3.2 主页设计 . 9 3.3 背景分析 . 9 3.4 网页设计的色彩 . 错误 !未定义书签。 四、 为什么选择 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 图片的制作和插入图片 . 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世纪是信息 高速发达的时代 ，互联网实现了世界范围的网络间的互联和信息共享，并已全面介入人类生产生活的方方面面，带动着人类社会的飞速发展 ，发挥着重要的作用 。 随着我国 计算机技术的 发展与普及， 国民已经离不开了网络，网络已经成为人与人之间交流的一种形式，他能够把事情的复杂化转为简单化。因此网站建设在互联网的应用上的地位显而易见，它已成为信息社会的重要组成部分，从而倍受人们的重视。 网站的建设不仅能够使我们的活动有所改变，也为我们的工作和学习提供了服务。同时也大大地提高了我院学生的交流效率，也增加了该社团的知明度，更重要的是为我院计算机爱好者提供了一个网络生活空间，促进了我们对网络知识的进一步地学习。为了今后更好的方便大家联系、交流，特构建职院计协之家网站。 通过该网站展示了计协信息、机 构设置、协会新闻、学习园地、学习资料、问题集锦、休闲娱乐等系列内容的介绍。 网站制作 工具是使用 Dreamweaver 8.0、 Flash 8.0、 Fireworks 8.0、 Adobe Photoshop 等 ， 网站 是基于 我院计算机协会成员及计算机爱好者为 背景开发的，可以有效的实现网上 资源共享和学习交流 。同时您也可以利用 QQ 群 和 电子信箱经济而又快捷地与外界进行各种信息沟通。 规划并建设好一个学术性综合网站，并不是一件容易的事。这要求我们 制作者 要 明确和熟悉设计的对象和构成的要素 。另外，将要着手确定网站的风格、布局、 色彩搭配等，这就锻炼 提高 了我 的网页制作 水平，美工、排版能力。 在论文中首先介绍了 网站建设 的相关知识，并根据以上知识制作网站。文中主要包括需求分析、网站的总体设计、详细设计等，并通过流程图和文字加以解释说明。在论文中还包括了部分网站制作的主要程序代码。 滁州职业技术学院软件技术专业毕业论文 2 一、设计思想及准备工作 1.1 设计思想 通过网站，全面宣传，展示计算机协会活动风采、技术氛围、团体优点与特色，发布协会的重大活动安排与日常工作特色，增强团体的知名度，使人们更多了解我们的团队 ,在 Internet 上实现完成部分介绍及宣传活动，提高计算机 爱好者对我们的关注，加大交流团体。 由于 我们的水平有限的，所以上面的有些 特效 都是从网上借鉴来的，例如 相册、幻灯图等 。总体来说网站的布局，是统一的，这样在浏览的时候不至于显得太混乱。 1.2 准备工作 1.2.1 网站筹划 界面就是网站给浏览者的第一印象，往往决定着网站的可看性，在确定网站的界面时要注意以下三点： （ 1） 栏目与板块编排 构建一个网站就好比写一篇论文，首先要列出提纲，才能主题明确、层次清晰。我们在动手制作网页前，一定要考虑好栏目和板块的编排问题。 网站的题材确定后，就要将收集到的资料内容作一个合 理的编排。比如，将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。在栏目编排时需要注意的是： 尽可能删除那些与主题无关的栏目； 尽可能将网站内最有价值的内容列在栏目上； 尽可能从访问者角度来编排栏目以方便访问者的浏览；辅助内容，如站点简介、版权信息等大可不必放在主栏目里，以免冲淡主题。 另外，板块的编排设置也要合理安排与划分。板块比栏目的概念要大一些，每个板块都有自己的栏目。 （ 2） 目录结 构与链接结构 网站的目录是指建立网站时创建的目录。例如：在用 Dreamweaver 建立网站时都默认建立了根目录和Images 子目录。目录的结构是一个容易忽略的问题，大多数制作者都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的维护，以后内容的扩充和移植有着重要的影响。所以建立目录结构时也要仔细安排，比如： 不要将所有文件都存放在根目录下。有网站制作者为了方便，将所有文件都放在根目录下。这样就很容易造成：文件管理混乱，搞不清哪些文件需要编辑和更新，哪些无用的文件 可以删除，哪些是相关联的文件，影响工作效率。 按栏目内容建立子目录。子目录的建立，首先按主栏目建立。新闻内容较多，需要经常更新的可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，例如：协会简介、协会章程等可以合并放在一个统一目录下。 在每个主目录下都建立独立的 Images 目录。一般来说，一个站点根目录下都有一个默认地 Images目录。将所有图片都存放在这个目录里很是不方便，比如在栏目删除时，图片的管理相当麻烦。所以为每个主栏目建立一个独立的 Images 目录是方便管理的。需要注意的还有：目录的层次不 要太深，不要超过 3 层；不要使用中文目录，可能对网址的正确显示造成困难；不要使用过长的目录，太长的目录名不便于记忆；尽量使用意义明确的目录，以便于记忆和管理。 （ 3） 网站的链接结构 网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。 一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。一般的，建立网站的链接结构有两种基本方式： 树状链接结构（一对 一），这类似 DOS 的目录结构，首页链接指向一级页面，一级页面链接指向二滁州职业技术学院软件技术专业毕业论文 3 级页面。这样的链接结构浏览时，一级级进入，一级级退出，条理比较清晰，访问者明确知道自己在什么位置，不会“不知身在何处”，但是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须回到首页再进行。 星状链接结构（一对多），类似网络服务器的链接，每个页面相互之间都建立有链接。这样浏览比较方便，随时可以到达自己喜欢的页面。但是由于链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。 因此，在实际的网站设计中，总是将这两种结构混 合起来使用。网站希望浏览者既可以方便快速地达到自己需要的页面，又可以清晰地知道自己的位置。所以，最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。关于链接结构的设计，在实际的网页制作中是非常重要一环，采用什么样的链接结构直接影响到版面的布局。 1.2.2 素材准备 （ 1） 搜索浏览， 制作 收集素材。 明确了网站的主题以后，你就要围绕主题开始搜集材料了。为了收集素材，除了身边现成的一些素材，还需要到网上多查找素材。 有的图片 可以 自己用 Photoshop、 fireworks 制作设计 。 对于一些实物素材，我们利用拍摄、扫描等帮助，处理成电脑文件以便设计时使用。 网络搜索找素材：利用网络搜索引擎，输入与主题相关的关键词进行搜索 下载，然后加以修改 。 浏览网页选素材：逐个浏览搜索到的相关网页，寻找可以利用的材料。注意记录下选中的网页地址，以便随时复制需要的资料。也可以及时下载保存看中的文字图片资料 ，在加以修改在使用 。 （ 2） 整理素材，设计网页。 对收集的素材进行分类整理，并由此设置子网页栏目，一般不宜过多。将各类素材分别放入或链接到相应网页中。对于网上素材的使用，采取下面两种做法： 对于重点素 材，一般用复制、下载的方法放入自己的网页中，如自己各子网页的文字、图片等中心内容。 对于相关的次要素材，尤其是内容丰富而繁杂的，用超链接的方法将整个网页链接到自己的网页中，但不宜过多；还可以是整个网站的友情链接。这也是一些中小型网站常用的丰富自己、加强交流的好方法，给上网浏览者带来不少方便。 1.3 网页设计考虑的问题 当你在 Internet 这个信息的海洋中尽情遨游时，会发现许许多多内容丰富、创意新颖、设计独特的网页，见到这样漂亮可人的网页有点心动。 但是 网页设计时应考虑哪些方面的问题，包括网站功能和以及访问 者需要什么。你的整个设计都应该围绕这些方面来进行。 （ 1） 页面内容要新颖 网页内容的选择要不落俗套，要重点突出一个 “新 ”字，这个原则要求我们在设计网站内容时不能照抄别人的内容，要结合 设计主题 的实际情况创作出一个独一无二的网站。放眼望去，网上从头到尾找不出一丝 “鲜 ”意。所以，我们在设计网页时，要把功夫下在选材上。选材要尽量做到 “少 ”而 “精 ”,又必须突出 “新 ”，这样的网页一定会受到大家的欢迎。 （ 2） 网页命名要简洁 由于一个网站不可能就是由一个网页组成，它有许多子页面，为了能使这些页面有效地被连接起来，用户最后 能给这些页面起一些有代表性的而且简洁易记的网页名称。这样既会有助于你以后方便管理网页。在给网页命名时，最好使用自己常用的或符合页面内容的小写英文字母，这直接关系到页面上的连接。 （ 3） 网页内容要易读 网站设计最重要的诀窍，恐怕就是你的网页要易读。这就意味着 ,你必须花点心思来规划文字与背景颜色的搭配方案。注意不要使背景的颜色冲淡了文字的视觉效果，别用花里胡哨的色彩组合，让人看起来你的网页来很费劲。一般来说，浅色背景下的深色文字为佳。另外，最好让文本左对齐，而不是居中。按当代中文的阅读习惯，文本大都居左的。当然 ，标题一般应该居中，因为这符合读者的阅读习惯。 滁州职业技术学院软件技术专业毕业论文 4 （ 4） 少用特殊字体 虽然你可以在你的 HTML 中使用特殊的字体，但是，你不可能预测你的访问者在他们的计算机上将看到什么。在你的计算机里看起来相当好的页面，在另一个不同的平台上看起来可能非常糟糕。一些网站设计员喜欢使用来定义特性，这虽然允许你使用特殊的字体，但是仍需要一些变通的方法，以免你所选择的字体在访问者的计算机上不能显示。级联风格表 CSS 有助于解决这些问题，但是只有最新版的浏览器才支持 CSS。 （ 5） 考虑浏览器的兼容性 当然现在 IE 所占的市场份额越来越大，但 是我们仍然需要考虑到 Mozilla Firefox、 Netscape 以及 Opera这些浏览器用户。设计风格的考虑，如色彩的搭配，图形、线条的使用等等。要时刻为用户着想，必须最少在几种不同类型的浏览器下测试网站，看看兼容性如何。 （ 6） 网页风格要统一 网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子 用户 看起来舒服、顺畅，会对你的网站留下一个 “很专业 ”的印象。 （ 7） 动画最多只用一个 大家都喜欢用 GIF 动画来装饰网页，它的确很吸引人，但我们在选择时，是否能确 定必须用 GIF 动画，如果答否，那么就选择静止的图片，因为它的容量要小得多。同样的尺寸的 LOGO， GIF 动画的容量有 5K，而静止 LOGO 的只有 3K。虽然只有 2K 之差，但多起来，就会影响下载的速度，所以，如果有些不是必须的，就选择最小的。 （ 8） 善用图像 用户在网上四处漫游，你必须设法吸引和维护他们对你的主页的注意力。万维网的其中一个最重大资源是其多媒体能力，所以我们无论如何要善加利用。主页上最好有醒目的图像、新颖的画面、美观的字款，使其别具特色，令人过目不忘。注意图画可以弥补文字之不足，但并不能够完全取代文字 。制作主页时，必须注意将图像所连接的重要信息或联接其他页面的指示用文字重复表达几次，同时要注意避免使用过大的图像。 （ 9） 使网站具有交互功能 一个静态网页始终给人一种呆板的感觉，缺少一种活力和生气。最好在网站上提供一些回答问题的工具以及其他具有交互性能的设计，使得访问者能从网站上获得交互的信息，从而使访问者有一种参与网络建设的新鲜感和成就感。 1.4 网页制作流程 （如 ： 图 1-1） 确 定主 题需 求分 析总 体设 计搜 索 整合 资 料特 效 技术 制 作页 面设 计效 果分 析制 作评 审整 合测 试修 改 评审 完 成图 1-1 滁州职业技术学院软件技术专业毕业论文 5 1.5 网站结构描述 （如 ： 图 1-2） 首 页协 会 简 介协 会 简 述协 会 章 程管 理 制 度指 导 老 师协 会 概 况现 任 学 生 干 部技 术 交 流 科 目娱 乐 活 动 形 式协 会 品 牌 活 动机 构 设 置软 件 技 术 部网 络 技 术 部设 计 制 作 部硬 件 技 术 部事 务 秘 书 处新 闻 动 态协 会 新 闻协 会 公 告软 件 编 程 应 用网 络 网 页 技 术图 形 图 像 技 术硬 件 维 护 技 术技 术 园 地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 公司开发的集网页制作和管理网站于一身的网页编辑器，它是第一套针对专业网页设计师特别 发展 的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨滁州职业技术学院软件技术专业毕业论文 6 越浏览器限制的充满动感的网页。 Dreamweaver 是当前主流的站点和网页编辑器，其代码简洁、兼容性和整体功能都很强。 Dreamweaver 的介入，使得网页一些部分的实现变得更加直观简便。 2.2.2 图形处理软件 我们有 Fireworks 和 Photoshop 两种选择， Adobe Photoshop 在绘图、色彩调整等诸多方面有着出色的功能，集成度高、适应面广和操作简便。他不仅提 供强大的绘图工具，可以直接绘制 艺术 图形，还能直接从扫描仪，数码相机等设备中采集图像，并对他们进行编辑、修复、以及调整效果，同时可以改变图像的颜色模式，并能在图像中制作艺术文字等。 Photoshop 中的高级绘图工具，可自动生成背景纹理、图层效果，多种特殊效果滤镜，可创建多种艺术效果和绚丽的 web 图形并可直接在 Photoshop 中定义和编辑切片的工具透明控制，包括用于混合到任意背景中的边缘的仿色透明度。强大的彩色校正工具 修复 画笔，可在消除瑕疵的同时保留色调和纹理图层。 Photoshop 的强大工具可以使操作者不管制作任何图像都游刃有余。对于设计网页， Photoshop 是不可或缺的工具，是强大的图片处理工具 ， 可谓是平面设计方面的老大。 Fireworks 是一款非常优秀的图形处理软件，它是 Macromedia 公司专门为了网络图形而设计的一款软件，它可以非常方便地制作出下拉菜单、图片热区等效果，而且网页图形的优化也非常专业。 Fireworks是用来设计和制作专业化网页图形的应用软件，它提供了一个制作环境，可以在一个专业化的环境中创建和 编辑网页图形，对其进行动画处理，添加高级交互功能以及优化图像。它们使 Fireworks 从概念到集成上成为网页设计和开发过程的一个重要组成部分。 2.2.3 动画制作 软件 动画制作肯定是 Flash ，它是 Macromedia 公司出品的 Flash 是制作网页动画的利器。严格来说， F1ash是 网络 多媒体制作工具而不是网页编辑工具。 F1ash 是制作动感网页的权威。对于使用者来说，只需很短时间的学习，就可以用它制作出美观的网页动 画。可以让制作者随心所欲地实现各种创意，并且可以和JavaScript 一起创作出具有强大交互性的网页动画。 Flash 是一种绘制矢量图形和创作互动多媒体动画的软件。 用 flash 制作出来的动化是矢量的，不管怎样放大、缩小，它还是清晰可见。 用 flash 制作的文件很小，这样便于在互联网上传输，而且它采用了数据流技术，只要下载一部分，就能欣赏动画，而且能一边播放一边传输数据。 交互性更是 flash 动画的迷人之处，可以通过点击按钮、选择菜单来控制动画的播放。 Flash 创建的动画集可以插入到 html 文档中，也可以 单独制作网页。使网页的效果更加完美。 正是有了这些优点，才使 flash日益成为网络多媒体的主流。 2.2 开发技术 2.2.1 网页和 Html 语言 我们的网页是用 html 语言编写的一个网站， html 中文翻译为“超文本标记语言”，所谓“超文本”就是指页面内可以包含图片，链接，多媒体等非问字的元素，通过 html 语言将这些元素表示出来，就形成了html 代码。浏览器的工作主要是将这些标记语言进行“翻译”，并按照定义的格式显示出来，这就是我们所看到的网页。 HTML 的结构包括头部（ Head）、主体（ Body）两大部 分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 另外， HTML 是网络的通用语言 ,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。 其主要特点如下： （ 1） 简易性， HTML 版本升级采用超集方式，从而更加灵活方便。 （ 2） 可扩展性， HTML 语言的广泛应用带来了加强功能，增加标识符等要求， HTML 采取子类元素的方式，为系统扩展带来保证。 （ 3） 平台无关性。虽然 PC 机大行其道，但使用 MAC 等其他 机器的大有人在， HTML 可以使用在广泛的平台上。 下面是一个层的 HTML 代码示例： 滁州职业技术学院软件技术专业毕业论文 7 计协之家 2.2.2 CSS 简介 CSS (层叠样式表 ) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，请将内容与表现形式分开。页面内容（即 HTML 代码）驻留在 HTML 文件自身中，而用于定义代码表现形式的 CSS 规则驻留在另一个文件（外部样式表）或 HTML 文档的另一 部分（通常为文件头部分）中。使用 CSS 可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。 CSS 允许控制 HTML 无法独自控制的许多属性。 除设置文本格式外，还可以使用 CSS 控制 Web 页面中块级别元素的格式和定位。 CSS 的主要优点是 : 它提供了便利的更新功能；更新一处的 CSS 规则时，使用该已定义样式的所有文档的格式都会自动更新为新样式。 外部 CSS 样式表是一系列存储在一个单独的外部 CSS (.css) 文件（并非 HTML 文件）中的 CSS 规则。利 用文档文件头部分中的链接，该文件被链接到 Web 站点中的一个或多个页面。 内部（或嵌入式） CSS 样式表是一系列包含在 HTML 文档文件头部分的 style 标签内的 CSS 规则 字体大小的 css 的代码如下： Html 文档部分代码： 滁州职业技术学院软件技术专业毕业论文 8 计协之家新闻 为丰富校园生活，提高学生的游戏体育竞技水平，培养学生健康上网、文明上网的良好风气。同时通过本次比赛，向同学们展示网络的优势，为活动增添悬殊般的色彩。我们协会在本次电 . 与上面 html 文档匹 配的部分外部 CSS 代码： body font-family: 宋体 ,Arial, Helvetica, sans-serif； font-size: 13px； color: #333333； background-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 网站系统分析 根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站作如下划分： 协会简介：主要介绍 协会简述 、 协会章程 、 管理制度 、 指导老师 相关内容。 协会概况：主要介绍 现任学生干部 、 技术交流科目 、 娱乐活动形式 、 协会品牌活动 等。 机构设置：主要介绍协会各部门的职能和技术交流方向。 新闻动态 ：报道协会近期活动或技术交流动态，现象的介绍协会日常工作。 技术园地：聚集各种计算机相关的技术知识，以便计算机爱好者学习。 I T 动态：跟踪近期 IT 行业的最新技术和新闻等相关内容。 活动风采：直观的展现协会丰富多彩的活动相关效果图。 生活娱乐：相关笑话和美文以便大家在学习累时放松，调节情绪。 滁州职业技术学院软件技术专业毕业论文 9 资源共享：协会成员收集的好资料，资源共享，以便大家一起学习。 协会视频：协会相关活动或者技术视频。 3.2 主页设计 网站主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现社团的勃勃生气。 在主页的最下 面我们还弄了许多的友情链接图标，这样用户可以有更多的选择性。不会让用户感到本网站的单调。 我们还设计了视频图片和娱乐美文专区，用来增加网站的娱乐性，可以让网友能轻松愉快地欣赏本网站，这样也能让网友们能更喜欢本网站。 在最下面我们还制作了一些友情连接的图片，可以让网站不单调，使得网站更具实用性。 3.3 背景分析 想要在视觉化环境下制作复杂网页的专业网页制作， Dreamweaver 已经渐渐在网页编辑工具中崭露头角，成为专业人士编写网页的最佳选择。 可分成四个主题。分别是： 设计网页页面（ Dreamweaver 里 具有弹性的页面设计功能）； 搭配 Macromedia 其它产品一起使用 Dreamweaver（制作动画和图片不求人）； 自定义使用界面（享受个性化的使用经验）； 最后的加入 Dreamweaver 扩充程序（在网页中载入扩充高级功能）。 3.4 网页设计的色彩 人们常常感受到色彩对自己心理的影响，这些影响总是在不知不觉中发挥作用，左右我们的情绪。色彩的心理效应发生在不同层次中。有些属直接的刺激，有些要通过间接的联想，更高层次则涉及到人的观念，信仰，对于艺术家和设计者来说，无论哪一层次的作用都是不可忽视的。对于网页设 计者来说，色彩的心理作用尤其重要，因为用网络是在一种特定的历史与社会条件的环境下，即高效率，快节奏的现代生活方式的条件，这需要做网页时把握人们在这种生活方式用网络的一种心理需求。针对不同的主题来布置色彩，如健康类的网页就不能采用较为刺激的大红和黄，以及象征死亡和神秘的黑色和紫色，这样会造成一种紧张和某种程度的恐慌，所以我们所选的颜色是 统一“青绿”色，给网民们清爽舒服地感觉。 四、为什么选择 Dreamweaver Dreamweaver 是制作主页的好工具 .Dreamweaver 是可视化的网页制作工具，很容 易上手，可以让你轻松地制作出自己的网页。 Dreamweaver 在多媒体方面颇有建树的 Macromedia 公司推出的可视化网页制作工具，它与 Flash、 Fireworks 合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。其中， Dreamweaver 主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高， Flash用来制作精美的网页动画，而 Fireworks 用来处理网页中的图形。 复杂的说： Dreamweaver 是美国 Macromedia 公司开发的集网页制作和管理网站于一身的所见 即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 Dreamweaver 特点： （ 1） 最佳的制作效率 Dreamweaver 可以用最快速的方式将 Fireworks，或 Photoshop 等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页色调。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。 Dreamweaver 能与您喜爱的设计工具，如 Flash 等搭配，不需离开 Dreamweaver 便 可完成，整体运用流程自然顺畅。除此之外，只要单击便可使 Dreamweaver 自动开启 Firework 或 Photoshop 来进行编辑与设定图档的最佳化。 （ 2） 网站管理 滁州职业技术学院软件技术专业毕业论文 10 使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称， Dreamweaver 会自动更新所有连结。使用支援文字、 HTML 码、 HTML 属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 （ 3） 无可比拟的控制能力 Dreamweaver 是唯一提供 Roundtrip HTML、视觉化编辑与原始码编辑同步 的设计工具。它包含 Home Site 和 BBEdit 等主流文字编辑器。帧 (frames)和表格的制作速度快的令您无法想象。对于 CSS 的动态 HTML支援和鼠标换图效果，声音和动画的 DHTML 效果资料库可在 Netscape 和 Microsoft 浏览器上执行。使用不同浏览器检示功能， Dreamweaver 可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从 Dreamweaver 的网站在下载它的描述档，便可得知详尽的成效报告。 五、详细设计方案 5.1 设置站点 Web 站点是一组具有如相关主题、类似的设 计、链接文档和资源。 Dreamweaver8.0 是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。创建 Web 站点的第一步是规划。为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的。 执行以下操作： （ 1）启动 Dreamweaver 8.0： （ 2）选择“站点” “新建站点”（即，从“站点”菜单选择“管理站点”）。出现“站点定义”对话框。如图 5-1： （ 3）如果对话框显示的是“基本”选项卡，则单击“高级”。 出现“站点定义向导”的第一个界面，要求您为站点输入一个名称。 图 5-1 滁州职业技术学院软件技术专业毕业论文 11 （ 4）在文本框中，输入一个名称以设计课题名称英文缩写“ CEH_Site”。该名称可以是任何所需的名称。 （ 5） 然后 在下面的 “ 本地根目录文件夹 ” 和 “默认图像文件夹” 文本框中输入本地网站预保存的路径，单击 “确认 ”按钮。 （ 6） 随即在组合面板中弹出 “站点 ”面板，现在可以在其中添加页面了。 （ 7） 右键单击 “站点 ”面板中的根目录，在弹出菜单中选择 “新建文件 ”命令，把新建文件的名称改为“ index.html” 。 （ 8） 双击 index.html，进入页面编辑状态。 5.2 页面制作 5.2.1 创建主页页面 在全面考虑好网站的栏目，链接结构和整体风格之后，就可以正式动手制作首页了。有一句俗语： 良好的开端是成功的一半 。在网站设计上也是如此，首页的设计是一个网站成功与否的关键。人们往往看到第一页就已经有一个整体的感觉。是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，全凭首页的设计。所以，首页的设计和制作是绝对要重视和花心思的。首页设计大致如下： 整个网站 版面布局 都是用 div+css 布局的，有较好的灵活性； 色彩的搭配 主要统一用了“青绿”色调给人以清爽的感觉； div 布局的主要架构： 计协之家首页 /外部 CSS 链接路径 /导航栏 /网页中心部分（核心和内容） /新闻动态和协会概要及机构具体内容 /新闻幻灯图片 /协会概要及机构具体内容 /新闻动态 /公告和资源共享 滁州职业技术学院软件技术专业毕业论文 12 /公告版 /资源共享 /技术园地、娱乐和 IT 信息板块 /流动图片 /友情链接 /页脚内容 然后根据上文中 CSS 层叠样式表的定义格式，结合 div 布局架构经行合理的编写 CSS 样式表 页面中的相关特效可以结合下文经行对位填充，字体和边框都在 CSS 经行 了详细的编制。 最后首页基本就形成了（如：图 5-2） 滁州职业技术学院软件技术专业毕业论文 13 图 5-2 5.2.2 其它页面的制作 其他页面是在此主页面设计好的框架上加以修改，订好的 css 样式，添加一些内容和各页面该有的内容。 分页导航页（如： 图 5-3， IT 动态页面） 滁州职业技术学院软件技术专业毕业论文 14 图 5-3 具体内容页（如：图 5-4） 图 5-4 这样计算机协会的网页就制作完成。 5.3 网站布局技术 本站主要使用 div+css 布局。 DIV 本身就是容器性质的 ,你不但可以内嵌 table还可以内嵌文本和其它的 HTML代码； CSS是 Cascading 滁州职业技术学院软件技术专业毕业论文 15 style Sheets的简称，中文译作 “ 层叠样式表单 ” ，在主页制作时采用 CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者所有页数的网页的外观和格式。 Div+CSS 标准具有以下优点 : 因为采用 CSS布局， 不像 表格布局充满各种各样的属性和数字，而且很多 CSS 文件通常是共用的，从而大大缩减页面代码，提高页面浏览速度。 结构清晰，对搜索引擎更加友好。更容易被搜索引擎收录，具备搜索引擎 SEO的先天条件，配合优秀的内容和一些 SEO处 理，可以获得更好的网站排名。 兼容性更好，符合 web标准规范的发展趋势，可以在几乎所有的浏览器上都可以使用，不会出现在不同的浏览器中效果差距很大的情况。 缩短改版时间，因为网站的布局都是通过外部的 CSS 文件来控制，只要简单的修改几个 CSS文件就可以将许多网页的风格格式同时更新，不用再一页一页地更新了。 强大的字体控制和排版能力， CSS控制字体的能力比糟糕的 FONT标签好多了， CSS不再需要用 FONT标签或者透明的 1px图片来控制标题、改变字体颜色、字体样式等等。 提高易用性，使用 CSS可以结构化 HTML，例 如： p标签只用来控制段落， h1-h6 标签只用来控制标题，table标签只用来表现格式化的数据等等。 更好的扩展性。你的设计不仅仅用于 web浏览器，也可以发布在其他设备上，比如 PowerPoint等。 更灵活控制页面布局，通常页面的下载是按照代码的排列顺序，而表格布局代码的排列代表从上向下，从左到右，无法改变。而通过 CSS控制，您可以任意改变代码的排列顺序，比如将重要的右边内容先加载出来。 表现和内容相分离，干净利落，将设计部分剥离出来放在一个独立样式文件中，而网页主要来放置您的内容，你可以减少未来网页无效的 可能。 更方便搜索引擎收录，并获得更高的评价。用只包含结构化内容的 HTML代替嵌套的标签，主次分明，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价 (ranking)。 Table表格布局灵活性不大，你只能遵循 table tr td 的格式。而 div你可以 div ul li 也可以 ol li 还可以 ul li. Table表格布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而 Div 更能体现样式和结构相分离，结构的重构性强。 以前一些必须通过图片转换实现 的功能，现在只要用 CSS就可以轻松实现，从而更快地下载页面。 5.4 创建并连接到外部 CSS 样式 5.4.1 创建新的 CSS 样式 （ 1） 在 CSS样式面板中单击底部的“新建 CSS样式”功能按钮，或者右键单击面板，在弹出的快捷菜单中选择“新建 CSS样式”命令，打开“新建 CSS样式”对话框， 如： 图 5-5 图 5-5 滁州职业技术学院软件技术专业毕业论文 16 （ 2）在“名称”文本框中输入样式名称。 （ 3）在“选择器类型”域中选择样式的种类。 （ 4）设置完成后单击“确定”按钮。 5.4.2 附加外部 CSS 样式表 （ 1）打开 CSS样式面板。 （ 2）点击 CSS样式面 板底部的“附加样式表”打开“链接外部样式表”。图 5-6 图 5-6 （ 3）在“链接外部样式表”对话框上的“文件 /URL”域中输入所需要的文件。 （ 1） 在“添加为”域中选择“链接”或“导入”指定和创建用于将外部 CSS样式附加到文挡的标签。 （ 2） 完成后点击“确定”即可将所选择的 CSS样式表附加到当前文挡， （ 3） 在 CSS样式面板中显示该 CSS样式表 。图 5-7 图 5-7 5.5 插入图像和媒体 5.5.1 图片的制作和插入图片 （ 1） 图片处理 Firework 在网站中，除了配合 Flash 处理动画里的影片以外，主要是制作导航按 钮和 Banner，因为导航按钮采用的是悬停方式，所以每个按钮要同时做出两个版本。即原始状态和悬停状态。 Firework 在图片处理上使用了高光和阴影的效果，以突出按钮的立体感、变化感、和悬停感。 滁州职业技