计协社团静态网站设计.doc

《计协社团静态网站设计.doc》由会员分享，可在线阅读，更多相关《计协社团静态网站设计.doc（28页珍藏版）》请在沃文网上搜索。

1、滁州职业技术学院信息工程系2010届软件技术专业毕业论文姓 名： 班 级： 07软件（2）班 设计课题： 计协（社团）静态网站 指导教师： 2009年12月目 录目 录摘要1一、设计思想及准备工作21.1设计思想21.2准备工作21.2.1网站策划21.2.2素材准备31.3网页设计考虑的问题31.4网页制作的流程41.5网站结果描述5二、开发工具与开发技术52.1开发工具52.1.1 网页制作工具Dreamweaver简介52.1.2 图形处理软件62.1.3 动画制作软件62.2开发技术62.2.1 网页和html语言62.2.2 CSS简介7三、网站总体分析与设计83.1网站系统分析83

2、.2主页设计93.3背景分析93.4网页设计的色彩9四、为什么选择DREAMWEAVER9五、详细设计方案105.1设置站点105.2页面制作115.2.1创建主页页面115.2.2其它页面的制作135.3网站布局技术145.4创建并连接到外部CSS样式155.4.1创建新的CSS样式155.4.2附加外部CSS样式表165.5插入图像和媒体165.5.1图片的制作和插入图片165.5.2制作FLASH175.6超级链接185.6.1链接分类185.6.2创建超级链接的快速方法185.7网页中特效的运用195.8整理站点21六、总结与体会226.1总 结226.2心得体会22致谢23参考文献2

3、3滁州职业技术学院软件技术专业毕业论文1摘 要21世纪是信息高速发达的时代，互联网实现了世界范围的网络间的互联和信息共享，并已全面介入人类生产生活的方方面面，带动着人类社会的飞速发展，发挥着重要的作用。随着我国计算机技术的发展与普及，国民已经离不开了网络，网络已经成为人与人之间交流的一种形式，他能够把事情的复杂化转为简单化。因此网站建设在互联网的应用上的地位显而易见，它已成为信息社会的重要组成部分，从而倍受人们的重视。网站的建设不仅能够使我们的活动有所改变，也为我们的工作和学习提供了服务。同时也大大地提高了我院学生的交流效率，也增加了该社团的知明度，更重要的是为我院计算机爱好者提供了一个网络生

4、活空间，促进了我们对网络知识的进一步地学习。为了今后更好的方便大家联系、交流，特构建职院计协之家网站。通过该网站展示了计协信息、机构设置、协会新闻、学习园地、学习资料、问题集锦、休闲娱乐等系列内容的介绍。网站制作工具是使用Dreamweaver 8.0、Flash 8.0、Fireworks 8.0、Adobe Photoshop等，网站是基于我院计算机协会成员及计算机爱好者为背景开发的，可以有效的实现网上资源共享和学习交流。同时您也可以利用QQ群和电子信箱经济而又快捷地与外界进行各种信息沟通。规划并建设好一个学术性综合网站，并不是一件容易的事。这要求我们制作者要明确和熟悉设计的对象和构成的要

5、素。另外，将要着手确定网站的风格、布局、色彩搭配等，这就锻炼提高了我的网页制作水平，美工、排版能力。在论文中首先介绍了网站建设的相关知识，并根据以上知识制作网站。文中主要包括需求分析、网站的总体设计、详细设计等，并通过流程图和文字加以解释说明。在论文中还包括了部分网站制作的主要程序代码。 1一、设计思想及准备工作 1.1设计思想 通过网站，全面宣传，展示计算机协会活动风采、技术氛围、团体优点与特色，发布协会的重大活动安排与日常工作特色，增强团体的知名度，使人们更多了解我们的团队,在Internet上实现完成部分介绍及宣传活动，提高计算机爱好者对我们的关注，加大交流团体。由于我们的水平有限的，所

6、以上面的有些特效都是从网上借鉴来的，例如相册、幻灯图等。总体来说网站的布局，是统一的，这样在浏览的时候不至于显得太混乱。1.2 准备工作 1.2.1网站筹划界面就是网站给浏览者的第一印象，往往决定着网站的可看性，在确定网站的界面时要注意以下三点：（1）栏目与板块编排构建一个网站就好比写一篇论文，首先要列出提纲，才能主题明确、层次清晰。我们在动手制作网页前，一定要考虑好栏目和板块的编排问题。 网站的题材确定后，就要将收集到的资料内容作一个合理的编排。比如，将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的

7、时候，要仔细考虑，合理安排。在栏目编排时需要注意的是： 尽可能删除那些与主题无关的栏目； 尽可能将网站内最有价值的内容列在栏目上； 尽可能从访问者角度来编排栏目以方便访问者的浏览；辅助内容，如站点简介、版权信息等大可不必放在主栏目里，以免冲淡主题。另外，板块的编排设置也要合理安排与划分。板块比栏目的概念要大一些，每个板块都有自己的栏目。（2）目录结构与链接结构网站的目录是指建立网站时创建的目录。例如：在用Dreamweaver建立网站时都默认建立了根目录和Images子目录。目录的结构是一个容易忽略的问题，大多数制作者都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感

8、觉，但是对于站点本身的维护，以后内容的扩充和移植有着重要的影响。所以建立目录结构时也要仔细安排，比如： 不要将所有文件都存放在根目录下。有网站制作者为了方便，将所有文件都放在根目录下。这样就很容易造成：文件管理混乱，搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，影响工作效率。 按栏目内容建立子目录。子目录的建立，首先按主栏目建立。新闻内容较多，需要经常更新的可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，例如：协会简介、协会章程等可以合并放在一个统一目录下。 在每个主目录下都建立独立的Images目录。一般来说，一个站点根目录下都有一个默认地Images

9、目录。将所有图片都存放在这个目录里很是不方便，比如在栏目删除时，图片的管理相当麻烦。所以为每个主栏目建立一个独立的Images目录是方便管理的。需要注意的还有：目录的层次不要太深，不要超过3层；不要使用中文目录，可能对网址的正确显示造成困难；不要使用过长的目录，太长的目录名不便于记忆；尽量使用意义明确的目录，以便于记忆和管理。（3）网站的链接结构网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一

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

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

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

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

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

15、劲。一般来说，浅色背景下的深色文字为佳。另外，最好让文本左对齐，而不是居中。按当代中文的阅读习惯，文本大都居左的。当然，标题一般应该居中，因为这符合读者的阅读习惯。（4）少用特殊字体虽然你可以在你的HTML中使用特殊的字体，但是，你不可能预测你的访问者在他们的计算机上将看到什么。在你的计算机里看起来相当好的页面，在另一个不同的平台上看起来可能非常糟糕。一些网站设计员喜欢使用来定义特性，这虽然允许你使用特殊的字体，但是仍需要一些变通的方法，以免你所选择的字体在访问者的计算机上不能显示。级联风格表CSS有助于解决这些问题，但是只有最新版的浏览器才支持CSS。（5）考虑浏览器的兼容性当然现在IE所占

16、的市场份额越来越大，但是我们仍然需要考虑到Mozilla Firefox、Netscape以及Opera这些浏览器用户。设计风格的考虑，如色彩的搭配，图形、线条的使用等等。要时刻为用户着想，必须最少在几种不同类型的浏览器下测试网站，看看兼容性如何。（6）网页风格要统一网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子用户看起来舒服、顺畅，会对你的网站留下一个“很专业”的印象。（7）动画最多只用一个 大家都喜欢用GIF动画来装饰网页，它的确很吸引人，但我们在选择时，是否能确定必须用GIF动画，如果答否，那么就选择静止的图片，因为它的容量要小得多。

17、同样的尺寸的LOGO，GIF动画的容量有5K，而静止LOGO的只有3K。虽然只有2K之差，但多起来，就会影响下载的速度，所以，如果有些不是必须的，就选择最小的。（8）善用图像用户在网上四处漫游，你必须设法吸引和维护他们对你的主页的注意力。万维网的其中一个最重大资源是其多媒体能力，所以我们无论如何要善加利用。主页上最好有醒目的图像、新颖的画面、美观的字款，使其别具特色，令人过目不忘。注意图画可以弥补文字之不足，但并不能够完全取代文字。制作主页时，必须注意将图像所连接的重要信息或联接其他页面的指示用文字重复表达几次，同时要注意避免使用过大的图像。（9）使网站具有交互功能一个静态网页始终给人一种呆板

18、的感觉，缺少一种活力和生气。最好在网站上提供一些回答问题的工具以及其他具有交互性能的设计，使得访问者能从网站上获得交互的信息，从而使访问者有一种参与网络建设的新鲜感和成就感。1.4 网页制作流程（如：图1-1）图1-11.5网站结构描述 （如：图1-2）图1-2二、开发工具与开发技术本站主要使用Dreamweaver 8.0软件及Div+CSS、html进行网页的排版布局、使用fireworks 8.0和Photoshop CS处理图片及制作一些特效文字、Flash 8.0制作本站动画。2.1 开发工具2.1.1 网页制作工具Dreamweaver简介Dreamweaver是美国Macrome

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

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

21、图形处理软件，它是Macromedia公司专门为了网络图形而设计的一款软件，它可以非常方便地制作出下拉菜单、图片热区等效果，而且网页图形的优化也非常专业。Fireworks是用来设计和制作专业化网页图形的应用软件，它提供了一个制作环境，可以在一个专业化的环境中创建和编辑网页图形，对其进行动画处理，添加高级交互功能以及优化图像。它们使Fireworks从概念到集成上成为网页设计和开发过程的一个重要组成部分。2.2.3动画制作软件动画制作肯定是Flash ，它是Macromedia公司出品的Flash是制作网页动画的利器。严格来说， F1ash是网络多媒体制作工具而不是网页编辑工具。F1ash是制

22、作动感网页的权威。对于使用者来说，只需很短时间的学习，就可以用它制作出美观的网页动画。可以让制作者随心所欲地实现各种创意，并且可以和JavaScript一起创作出具有强大交互性的网页动画。Flash是一种绘制矢量图形和创作互动多媒体动画的软件。用flash制作出来的动化是矢量的，不管怎样放大、缩小，它还是清晰可见。 用flash制作的文件很小，这样便于在互联网上传输，而且它采用了数据流技术，只要下载一部分，就能欣赏动画，而且能一边播放一边传输数据。 交互性更是flash动画的迷人之处，可以通过点击按钮、选择菜单来控制动画的播放。Flash创建的动画集可以插入到html文档中，也可以单独制作网页

23、。使网页的效果更加完美。正是有了这些优点，才使flash日益成为网络多媒体的主流。2.2 开发技术 2.2.1网页和Html语言我们的网页是用html语言编写的一个网站，html中文翻译为“超文本标记语言”，所谓“超文本”就是指页面内可以包含图片，链接，多媒体等非问字的元素，通过html语言将这些元素表示出来，就形成了html代码。浏览器的工作主要是将这些标记语言进行“翻译”，并按照定义的格式显示出来，这就是我们所看到的网页。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 另外，HTML是网络的通用语言,一种简单、通

24、用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。其主要特点如下：（1）简易性，HTML版本升级采用超集方式，从而更加灵活方便。（2）可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。（3）平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上。下面是一个层的 HTML 代码示例： 计协之家 2.2.2 CSS简介CSS (层叠样式表) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CS

25、S 设置页面格式时，请将内容与表现形式分开。页面内容（即 HTML 代码）驻留在 HTML 文件自身中，而用于定义代码表现形式的 CSS 规则驻留在另一个文件（外部样式表）或 HTML 文档的另一部分（通常为文件头部分）中。使用 CSS 可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。CSS 允许控制 HTML 无法独自控制的许多属性。除设置文本格式外，还可以使用 CSS 控制 Web 页面中块级别元素的格式和定位。CSS 的主要优点是: 它提供了便利的更新功能；更新一处的 CSS 规则时，使用该已定义样式的所有文档的格式都会自动更新为新样式。外部 CSS 样式表是

26、一系列存储在一个单独的外部 CSS (.css) 文件（并非 HTML 文件）中的 CSS 规则。利用文档文件头部分中的链接，该文件被链接到 Web 站点中的一个或多个页面。内部（或嵌入式）CSS 样式表是一系列包含在 HTML 文档文件头部分的 style 标签内的 CSS 规则字体大小的css的代码如下：Html文档部分代码：计协之家新闻为丰富校园生活，提高学生的游戏体育竞技水平，培养学生健康上网、文明上网的良好风气。同时通过本次比赛，向同学们展示网络的优势，为活动增添悬殊般的色彩。我们协会在本次电.与上面html文档匹配的部分外部CSS代码：body font-family: 宋体,Ar

27、ial, 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;.zifont-size: 18px; font-weight: bold; .zi1color: #FF0000;.zi2font-size: 16px;三、网站总体分析与设计3.1网站系统分析根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从

28、内容上可对网站作如下划分： 协会简介：主要介绍协会简述、协会章程、管理制度、指导老师相关内容。 协会概况：主要介绍现任学生干部、技术交流科目、娱乐活动形式、协会品牌活动等。 机构设置：主要介绍协会各部门的职能和技术交流方向。 新闻动态：报道协会近期活动或技术交流动态，现象的介绍协会日常工作。 技术园地：聚集各种计算机相关的技术知识，以便计算机爱好者学习。 I T 动态：跟踪近期IT行业的最新技术和新闻等相关内容。 活动风采：直观的展现协会丰富多彩的活动相关效果图。 生活娱乐：相关笑话和美文以便大家在学习累时放松，调节情绪。 资源共享：协会成员收集的好资料，资源共享，以便大家一起学习。 协会视频

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

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

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

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

33、式将Fireworks，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页色调。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具，如Flash等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。（2）网站管理使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用支援文字、HTML码、HTML属性标签

34、和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 （3）无可比拟的控制能力Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含Home Site和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想象。对于CSS的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成

35、效报告。五、详细设计方案5.1设置站点Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。Dreamweaver8.0是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。创建 Web 站点的第一步是规划。为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的。 执行以下操作：（1）启动 Dreamweaver 8.0：（2）选择“站点”“新建站点”（即，从“站点”菜单选择“管理站点”）。出现“站点定义”对话框。如图5-1：（3）如果对话框显

36、示的是“基本”选项卡，则单击“高级”。 出现“站点定义向导”的第一个界面，要求您为站点输入一个名称。图5-1（4）在文本框中，输入一个名称以设计课题名称英文缩写“CEH_Site”。该名称可以是任何所需的名称。（5）然后在下面的“本地根目录文件夹”和“默认图像文件夹”文本框中输入本地网站预保存的路径，单击“确认”按钮。（6）随即在组合面板中弹出“站点”面板，现在可以在其中添加页面了。（7）右键单击“站点”面板中的根目录，在弹出菜单中选择“新建文件”命令，把新建文件的名称改为“index.html”。（8）双击index.html，进入页面编辑状态。5.2页面制作5.2.1 创建主页页面 在全面

37、考虑好网站的栏目，链接结构和整体风格之后，就可以正式动手制作首页了。有一句俗语：良好的开端是成功的一半。在网站设计上也是如此，首页的设计是一个网站成功与否的关键。人们往往看到第一页就已经有一个整体的感觉。是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，全凭首页的设计。所以，首页的设计和制作是绝对要重视和花心思的。首页设计大致如下： 整个网站版面布局都是用div+css布局的，有较好的灵活性； 色彩的搭配主要统一用了“青绿”色调给人以清爽的感觉； div布局的主要架构：计协之家首页 /外部CSS链接路径 /导航栏 /网页中心部分（核心和内容） /新闻动态和协会概要及机构具体内容

38、/新闻幻灯图片 /协会概要及机构具体内容 /新闻动态 /公告和资源共享 /公告版 /资源共享 /技术园地、娱乐和IT信息板块 /流动图片 /友情链接 /页脚内容 然后根据上文中CSS层叠样式表的定义格式，结合div布局架构经行合理的编写CSS样式表 页面中的相关特效可以结合下文经行对位填充，字体和边框都在CSS经行了详细的编制。 最后首页基本就形成了（如：图5-2）图5-25.2.2 其它页面的制作其他页面是在此主页面设计好的框架上加以修改，订好的css样式，添加一些内容和各页面该有的内容。分页导航页（如：图5-3，IT动态页面）图5-3具体内容页（如：图5-4）图5-4这样计算机协会的网页就

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

40、晰，对搜索引擎更加友好。更容易被搜索引擎收录，具备搜索引擎SEO的先天条件，配合优秀的内容和一些SEO处理，可以获得更好的网站排名。 兼容性更好，符合web标准规范的发展趋势，可以在几乎所有的浏览器上都可以使用，不会出现在不同的浏览器中效果差距很大的情况。 缩短改版时间，因为网站的布局都是通过外部的CSS文件来控制，只要简单的修改几个CSS文件就可以将许多网页的风格格式同时更新，不用再一页一页地更新了。 强大的字体控制和排版能力，CSS控制字体的能力比糟糕的FONT标签好多了，CSS不再需要用FONT标签或者透明的1px图片来控制标题、改变字体颜色、字体样式等等。 提高易用性，使用CSS可以结构化HTML，例如：p标签只用来控制段落，h1-h6标签只用来控制标题，table标签只用来表现格式化的数据等等。 更好的扩展性。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint等。 更灵活控制页面布局，通常页面的下载是按照代码的排列顺序，而表格布局代码的排列代表从上向下，从左到右，无法改变。而通过CSS控制，您可以任意改变代码的排列顺序，比如将重要的右边内容先加载出来。 表现和内容相分离，干净利落，将设计部分剥离出来放在一个独立样式文件中，而网页主要来放置您的内容，你可以减少未来网页无效的可能。