静态网页设计

通过该网站展示了计协信息、机构设置、协会新闻、学习园地、学习资料、问题集锦、休闲娱乐等系列内容的介绍。网站制作工具是使用Dreamweaver 8.0、Flash 8.0、Fireworks 8.0、Adobe Photoshop等，网站是基于我院计算机协会成员及计算机爱好者为背景开发的，可以有效的实现网上资源共享和学习交流。同时您也可以利用QQ群和电子信箱经济而又快捷地与外界进行各种信息沟通。

规划并建设好一个学术性综合网站，并不是一件容易的事。这要求我们制作者要明确和熟悉设计的对象和构成的要素。另外，将要着手确定网站的风格、布局、色彩搭配等，这就锻炼提高了我的网页制作水平，美工、排版能力。

在论文中首先介绍了网站建设的相关知识，并根据以上知识制作网站。文中主要包括需求分析、网站的总体设计、详细设计等，并通过流程图和文字加以解释说明。在论文中还包括了部分网站制作的主要程序代码。

一、设计思想及准备工作

1.1设计思想

通过网站，全面宣传，展示计算机协会活动风采、技术氛围、团体优点与特色，发布协会的重大活动安排与日常工作特色，增强团体的知名度，使人们更多了解我们的团队,在Internet上实现完成部分介绍及宣传活动，提高计算机爱好者对我们的关注，加大交流团体。

由于我们的水平有限的，所以上面的有些特效都是从网上借鉴来的，例如相册、幻灯图等。总体来说网站的布局，是统一的，这样在浏览的时候不至于显得太混乱。

1.2 准备工作

1.2.1网站筹划

界面就是网站给浏览者的第一印象，往往决定着网站的可看性，在确定网站的界面时要注意以下三点：

（1）栏目与板块编排

构建一个网站就好比写一篇论文，首先要列出提纲，才能主题明确、层次清晰。我们在动手制作网页前，一定要考虑好栏目和板块的编排问题。网站的题材确定后，就要将收集到的资料内容作一个合理的编排。比如，将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。在栏目编排时需要注意的是：

尽可能删除那些与主题无关的栏目；
尽可能将网站内最有价值的内容列在栏目上；
尽可能从访问者角度来编排栏目以方便访问者的浏览；辅助内容，如站点简介、版权信息等大可不必放在主栏目里，以免冲淡主题。

另外，板块的编排设置也要合理安排与划分。板块比栏目的概念要大一些，每个板块都有自己的栏目。

（2）目录结构与链接结构

网站的目录是指建立网站时创建的目录。例如：在用Dreamweaver建立网站时都默认建立了根目录和Images子目录。目录的结构是一个容易忽略的问题，大多数制作者都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的维护，以后内容的扩充和移植有着重要的影响。所以建立目录结构时也要仔细安排，比如：

不要将所有文件都存放在根目录下。有网站制作者为了方便，将所有文件都放在根目录下。这样就很容易造成：文件管理混乱，搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，影响工作效率。
按栏目内容建立子目录。子目录的建立，首先按主栏目建立。新闻内容较多，需要经常更新的可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，例如：协会简介、协会章程等可以合并放在一个统一目录下。
在每个主目录下都建立独立的Images目录。一般来说，一个站点根目录下都有一个默认地Images目录。将所有图片都存放在这个目录里很是不方便，比如在栏目删除时，图片的管理相当麻烦。所以为每个主栏目建立一个独立的Images目录是方便管理的。需要注意的还有：目录的层次不要太深，不要超过3层；不要使用中文目录，可能对网址的正确显示造成困难；不要使用过长的目录，太长的目录名不便于记忆；尽量使用意义明确的目录，以便于记忆和管理。

（3）网站的链接结构

网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。一般的，建立网站的链接结构有两种基本方式：

●树状链接结构（一对一），这类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。这样的链接结构浏览时，一级级进入，一级级退出，条理比较清晰，访问者明确知道自己在什么位置，不会“不知身在何处”，但是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须回到首页再进行。

●星状链接结构（一对多），类似网络服务器的链接，每个页面相互之间都建立有链接。这样浏览比较方便，随时可以到达自己喜欢的页面。但是由于链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。

因此，在实际的网站设计中，总是将这两种结构混合起来使用。网站希望浏览者既可以方便快速地达到自己需要的页面，又可以清晰地知道自己的位置。所以，最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。关于链接结构的设计，在实际的网页制作中是非常重要一环，采用什么样的链接结构直接影响到版面的布局。

1.2.2 素材准备

（1）搜索浏览，制作收集素材。

明确了网站的主题以后，你就要围绕主题开始搜集材料了。为了收集素材，除了身边现成的一些素材，还需要到网上多查找素材。

有的图片可以自己用Photoshop、fireworks制作设计。
对于一些实物素材，我们利用拍摄、扫描等帮助，处理成电脑文件以便设计时使用。
网络搜索找素材：利用网络搜索引擎，输入与主题相关的关键词进行搜索下载，然后加以修改。
浏览网页选素材：逐个浏览搜索到的相关网页，寻找可以利用的材料。注意记录下选中的网页地址，以便随时复制需要的资料。也可以及时下载保存看中的文字图片资料，在加以修改在使用。

（2）整理素材，设计网页。

对收集的素材进行分类整理，并由此设置子网页栏目，一般不宜过多。将各类素材分别放入或链接到相应网页中。对于网上素材的使用，采取下面两种做法：
对于重点素材，一般用复制、下载的方法放入自己的网页中，如自己各子网页的文字、图片等中心内容。
对于相关的次要素材，尤其是内容丰富而繁杂的，用超链接的方法将整个网页链接到自己的网页中，但不宜过多；还可以是整个网站的友情链接。这也是一些中小型网站常用的丰富自己、加强交流的好方法，给上网浏览者带来不少方便。

1.3 网页设计考虑的问题

当你在Internet这个信息的海洋中尽情遨游时，会发现许许多多内容丰富、创意新颖、设计独特的网页，见到这样漂亮可人的网页有点心动。但是网页设计时应考虑哪些方面的问题，包括网站功能和以及访问者需要什么。你的整个设计都应该围绕这些方面来进行。

（1）页面内容要新颖

网页内容的选择要不落俗套，要重点突出一个“新”字，这个原则要求我们在设计网站内容时不能照抄别人的内容，要结合设计主题的实际情况创作出一个独一无二的网站。放眼望去，网上从头到尾找不出一丝“鲜”意。所以，我们在设计网页时，要把功夫下在选材上。选材要尽量做到“少”而“精”,又必须突出“新”，这样的网页一定会受到大家的欢迎。

（2）网页命名要简洁

由于一个网站不可能就是由一个网页组成，它有许多子页面，为了能使这些页面有效地被连接起来，用户最后能给这些页面起一些有代表性的而且简洁易记的网页名称。这样既会有助于你以后方便管理网页。在给网页命名时，最好使用自己常用的或符合页面内容的小写英文字母，这直接关系到页面上的连接。

（3）网页内容要易读

网站设计最重要的诀窍，恐怕就是你的网页要易读。这就意味着,你必须花点心思来规划文字与背景颜色的搭配方案。注意不要使背景的颜色冲淡了文字的视觉效果，别用花里胡哨的色彩组合，让人看起来你的网页来很费劲。一般来说，浅色背景下的深色文字为佳。另外，最好让文本左对齐，而不是居中。按当代中文的阅读习惯，文本大都居左的。当然，标题一般应该居中，因为这符合读者的阅读习惯。

（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

1.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是美国Macromedia公司开发的集网页制作和管理网站于一身的网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。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 代码示例：

<html>

<head>

<!--

#Layer1 {

position: absolute;

left:62px;

top:67px;

width:421px;

height:188px;

z-index:1;

}

-->

</style>

</head>

<body>

</body>

</html>

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文档部分代码：

<html>

<head>

<title>计协之家新闻</title>

</head>

<body >

<p align="left" class="zi2">为丰富校园生活，提高学生的游戏体育竞技水平，培养学生健康上网、文明上网的良好风气。同时通过本次比赛，向同学们展示网络的优势，为活动增添悬殊般的色彩。我们协会在本次电.....</p>

</div>

</body >

</html>

与上面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; }

.zi1{color: #FF0000;}

.zi2{font-size: 16px ;}

三、网站总体分析与设计

3.1网站系统分析

根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站作如下划分：

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

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）网站管理

使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，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

（4）在文本框中，输入一个名称以设计课题名称英文缩写“CEH_Site”。该名称可以是任何所需的名称。

（5）然后在下面的“本地根目录文件夹”和“默认图像文件夹”文本框中输入本地网站预保存的路径，单击“确认”按钮。

（6）随即在组合面板中弹出“站点”面板，现在可以在其中添加页面了。

（7）右键单击“站点”面板中的根目录，在弹出菜单中选择“新建文件”命令，把新建文件的名称改为“index.html”。

（8）双击index.html，进入页面编辑状态。

5.2页面制作

5.2.1 创建主页页面

在全面考虑好网站的栏目，链接结构和整体风格之后，就可以正式动手制作首页了。有一句俗语："良好的开端是成功的一半"。在网站设计上也是如此，首页的设计是一个网站成功与否的关键。人们往往看到第一页就已经有一个整体的感觉。是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，全凭首页的设计。所以，首页的设计和制作是绝对要重视和花心思的。首页设计大致如下：

整个网站版面布局都是用div+css布局的，有较好的灵活性；
色彩的搭配主要统一用了“青绿”色调给人以清爽的感觉；
div布局的主要架构：

<html>

<head>

<title>计协之家首页</title>

</head>

<body >

</div>

<div id="nav_time"></div> //导航栏

<div id="mid"> //网页中心部分（核心和内容）

<div id="work_left"> //新闻动态和协会概要及机构具体内容

<div id="photo_News"></div> //新闻幻灯图片

<div id="overview"></div> //协会概要及机构具体内容

</div>

<div id="news_gg"> //新闻动态

</div>

<div id="work_right"> //公告和资源共享

<div id="pro"></div> //公告版

<div id="pro"></div> //资源共享

</div>

<div id="tec"> //技术园地、娱乐和IT信息板块

</div>

</div>

<div id="photo" ></div> //流动图片

</div>

<div id="link"></div> //友情链接

<div id="footer"> </div> //页脚内容

</div>

</body>

</html>

然后根据上文中CSS层叠样式表的定义格式，结合div布局架构经行合理的编写CSS样式表
页面中的相关特效可以结合下文经行对位填充，字体和边框都在CSS经行了详细的编制。
最后首页基本就形成了（如：图5-2）

图5-2

5.2.2 其它页面的制作

其他页面是在此主页面设计好的框架上加以修改，订好的css样式，添加一些内容和各页面该有的内容。

分页导航页（如：图5-3，IT动态页面）

图5-3

具体内容页（如：图5-4）

图5-4

这样计算机协会的网页就制作完成。

5.3网站布局技术

本站主要使用div+css布局。

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码；CSS是Cascading 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样式

在CSS样式面板中单击底部的“新建CSS样式”功能按钮，或者右键单击面板，在弹出的快捷菜单中选择“新建CSS样式”命令，打开“新建CSS样式”对话框，如：图5-5

图5-5

（2）在“名称”文本框中输入样式名称。

（3）在“选择器类型”域中选择样式的种类。

（4）设置完成后单击“确定”按钮。

5.4.2附加外部CSS样式表

（1）打开CSS样式面板。

（2）点击CSS样式面板底部的“附加样式表”打开“链接外部样式表”。图5-6

图5-6

（3）在“链接外部样式表”对话框上的“文件/URL”域中输入所需要的文件。

在“添加为”域中选择“链接”或“导入”指定和创建用于将外部CSS样式附加到文挡的标签。
完成后点击“确定”即可将所选择的CSS样式表附加到当前文挡，
在CSS样式面板中显示该CSS样式表。图5-7

图5-7

5.5插入图像和媒体

5.5.1图片的制作和插入图片

（1）图片处理

Firework在网站中，除了配合Flash处理动画里的影片以外，主要是制作导航按钮和Banner，因为导航按钮采用的是悬停方式，所以每个按钮要同时做出两个版本。即原始状态和悬停状态。

Firework在图片处理上使用了高光和阴影的效果，以突出按钮的立体感、变化感、和悬停感。
Firework在处理Banner的时候采用横幅与网站图标一体的方式处理，将二者整体化，不仅方便排版，也方便浏览者浏览。
Firework在图片输出的时候采用JPEG（ISO国际标准图像压缩）格式。这是目前网络较为流行的图片格式，文件小，传输速度快，图片清晰。输出品质为80，无平滑。

（2）插入图片

点击要插入图片的地方，然后点击插入-图像，然后就弹出“选择图像源文件”框（如：图5-8）。在图片文件夹中选择要插入的图片就可以了。

图5-8

5.5.2制作FLASH

一个吸引人的网站一定有一个华丽的FLAH过场动画，这样不仅给浏览者深刻的印象，同时突出了网站的特点与风格。但FLASH相对DW制作较复杂，设计到帧、时间轴、剪辑、按钮等方面。下面是我这个FLASH制作过程的简单介绍：

（1）虽然FLASH采用了流控制技术，但考虑到基带网的速度和本身FLASH的文件大小，我还是采用目前流行的先下载后观看的方式，以保证音效和动画的流畅性。并且加装了一个进度条，随时检测下载速度和时间，让浏览者做到心中有数。只有当进度达到100％时，动画开始按钮才出现，浏览者单击按钮，动画随即开始。整个下载部分的动画放在一个剪辑中，不仅节省内存，而且方便库的管理。

（2）FLASH动画设计风格为简洁、动感、时尚。

（3）FLASH影片所有素材、按钮、剪辑、声音全部导入库中，时间轴上只有各个剪辑的层，从而节约了内存，方便管理。

（4）影片导出时增加了保护功能，增加了影片的安全性，防止他人盗用修改影片。矢量图的品质为100，保证了影片图像的质量，并且声音的输出格式为mp3采样标准为128Kbps双声道立体声，该标准接近CD标准，这样虽然增加了影片的大小，但是保证了声音的效果。同时输出的还有影片大小报告。

5.6超级链接

作为网站肯定有很多的页面，如果页面之间彼此是独立的，那么网页就好比是孤岛，这样的网站是无法运行的。为了建立起网页之间的联系我们必须使用超级链接。称“超级链接”，是因为它什么都能链接，如：网页、下载文件、网站地址、邮件地址……等等。

5.6.1链接分类

按目标端点的类型分类：内部链接、外部链接、锚点链接、E-mail链接。
按文挡路径分类：绝对路径链接、相对路径链接、根相对路径链接。
按原锚的对象类型分类：文本链接、非文本链接

5.6.2创建超级链接的快速方法

（1）使用属性面板创建。

在文挡窗口中选中要创建链接的文本或图象等。在属性面板链接域中直接输入要链接的文件名称。图5-9

图5-9

（2）直接创建

在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。

①在网页中选中要做超级链接的文字或者图片。

②在属性面板中单击住指向文件按钮不放，在直接将其拖出，拖到右侧文件导航中选中要链接的页面。（如下图）

图5-9

③按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型。

5.7网页中特效的运用

网页特效的运用在整个网站中并不是最重要的，但也是不可取少的，它在一定程度上起到了画龙点睛的作用！也许你会说，有没有特效无所谓，只要网页构思好，网页页面设计的得好就可以了！这种想法是不对的，过多的网页特效会使得页面显得杂乱而且不整洁，但是适度的网页特效却能使网页更具有灵动性，更能吸引人的眼球！

在我们的网站的不同页面中分别运用了一些网页特效，是从网上下载的网页特效的代码，具体如下：

走马灯灯效果

效果：该特效的效果和幻灯片播放效果类似，多个图片循环出现，不停互换。

在所有页面中都有体现。

图5-10

新闻图片切换

效果：自动有序、有时间段的进行图片切换，也可以点击下面的图片序列进行切换。

具体代码参见网站，效果如：图5-11（正在切换中的效果）：

图5-11

制作透明背景的FLASH应用

点击要插入FLASH的地方，然后点击插入-媒体-FLASH选择要插入的FLASH动画。如果想让FLASH的背景透明，还有设置FLASH的参数那么设置这个参数之后FLASH的背景就是透明的了。图5-12

图5-12

主要应用于网页顶部，代码如下：

</object>

（其中：“707”为FLASH的宽度，“128”为FLASH的高度，“Flash/banner.swf”为FLASH的存在路径，“<param name="wmode" value="transparent">”是对FLASH背景进行透明化。）

网页过渡效果的应用

主要应用于整个网页，代码如下：

（其中：“Duration=3”表示网页动态过滤的时间为3秒，“Transition=19”表示网页过渡的方式值为19，即为从左上角向右下角展开。）

5.8 整理站点

网页做完以后往往不能马上发布，还需要检验下网页之间的链接是否准确，文件是否冗等，有时还需要掌握整个站点的结构以备日后的修改。

（1）查看站点地图

站点地图用查看链接关系和导航关系，在小型站点和整齐有序的站点中一般不起太多的作用。

①在Dreamweaver 8.0窗口菜单下的“站点地图”命令，打开“站点”面板。

②单击“站点”面板的展开/折叠按钮，Dreamweaver会显示出站点的结构图。

（2）检查超链接情况

链接检查不仅仅在此外使用，当在站点窗口中移动一个文件的时候，Dreamweaver也会问我们是否需要扫描结果显示出来，还会询问是否要更新链接。

在“站点”面板中选择“站点”菜单下的“检查站点范围的链接”命令。

Dreamweaver会弹出“链接检查器”面板。检查完毕后，可让用户查看不同类型的链接情况，还可以保存链接检查结果。

六、总结与体会

总结

课题设计学习法首先要求自己有足够的耐心，对于任何一个练习都要反复推敲，目的只有一个，就是理解实例所涉及的所有知识点，只有这样你才算有所收获。典型的方法是反复练习，并尝试用不同的方法完成练习，并对所涉及的知识点进一步探索，以求理解更多的功能、参数、选项和方法；其二，要有清醒的头脑和明确的学习方向。当你学习掌握了足够的练习制作后，应该及时对所学的知识进行总结和归纳，发现规律，进一步推敲软件的整体结构和知识体系，这样才会真正有所提高。

在毕业设计中搜集计算机各种技能知识和照片的时候,我花了很多时间和精力,但我觉得都是值得的.因为我看了很多计算机的知识和很多网页布局,觉得网页设计不是一个简单的事。首先它存在一种设计的思维和色彩搭配，再者就是根据不同的行业就要求不同的专业效果，最后就是布局必须做好强有力的构思！

设计体会

对于现在的社会，科技的飞速发展已经成为社会发展的标志。其中计算机的发展可谓快中之快，而在计算机的发展中计算机网络的发展又是首当其冲的。计算机网络从为我们所知，到现在才经历的短短的几年时间，在这几年中随着计算机网络的广泛应用，特别是Internet的普及和发展，网络已经成为了不可或缺的通信手段。不论是最新的新闻信息、新产品的出台、新游戏的发布、最新的各种IT动态，包括等候就业人才的个人简历，我们都是可以通过网络来获得。但是什么为这所有的一切提供平台的呢。我们又是通过什么来获取这些消息的呢——对就是网页。现如今，数以万计的网站以网页的方式提供了丰富、精彩的信息。在人类社会进入信息时代的时候，在网络成为通信的主要手段的时候，在计算机网络普及的今天，网页也在它自己的岗位上做出了突出的贡献。网页是我们在网络上的“带言人”。我们将什么样的信息传达给浏览者，要讲述什么要的事情，网页在这里起着重用的作用。

网页设计是伴随着网络的快速发展而快速兴起.

由于人们使用网络的频繁而网页作为上网的主要依托就变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。网页设计直接面对的是大量用户,随时都会反馈回来对网页的批评建议等，可以根据实际情况进行修改，这样做可以使使用者用起来更加的方便。

在制作网页的过程中,我有一些体会:

（1）整体性好: 一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的。

（2）网站形象突出: 一个符合美的标准的网页是能够使网站的形象得到最大限度的提升的。

（3）页面用色协调，布局符合形式美的要求: 布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次。当然雅俗共赏是人人都追求的

等天晴i

关注

19
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
静态网页设计

目录摘要 1一、设计思想及准备工作 1.1 设计思想 21.2 准备工作 21.2.1网站策划 21.2.2素材准备 31.3网页设计考虑的问题1.4 网页制作的流程 41.5 网站结果描述 5二、开发工具与开发技术 52.1开发工具 52.1.1网页制作工具Dreamweaver简介 52.1.2图形处理软件 62.1.3 动画制作软件 62.2开发技术 62.2.1网页和html语言 62.2.2CSS简介 7三、
复制链接

扫一扫