纯静态网页设计毕业论文

职业学院毕业设计

目录

第一章 前言 ........................................................................................................................................ 1

1．1课题来源 ............................................................................................................................... 1

1．2 网站开发项目需求分析 .............................................................................................. 1

第二章 网页制作概述 ........................................................................................................................ 2

2.1 网页的类型 ............................................................................................................................. 2

2.1.1 静态页面....................................................................................................................... 2

2.1.2 动态页面....................................................................................................................... 2

2.2 网页开发技术......................................................................................................................... 3

2.3 网页布局 .................................................................................................................................. 3

2.3.1 网页布局的基本概念 ................................................................................................ 4

2.3.2网页布局方法 ............................................................................................................... 6

2.3.2 网页布局技术 ............................................................................................................. 8

2.4网页配色 ................................................................................................................................... 8

2.5 网页设计流程......................................................................................................................... 9

第三章 涉及软件 ............................................................................................................................. 11

3.1 DreamWeaVer cs3介绍 ....................................................................................................... 11

3.2 DreamWeaVer cs3操作界面 .............................................................................................. 11

第四章 建立网页链接 .................................................................................................................... 12

4.1 文字链接 ................................................................................................................................ 12

4.2 图像链接 ................................................................................................................................ 13

4.3在HTML语言中建立网页链接 ....................................................................................... 14

I

职业学院毕业设计

第五章 结论 ................................................................................................ 错误!未定义书签。

致 谢 ................................................................................................................... 错误!未定义书签。

参考文献 .............................................................................................................. 错误!未定义书签。

II

职业学院毕业设计

第一章 前言

1．1课题来源

随着二十一世纪新兴科技的飞速发展，如今的信息产业正在经受着一个巨大的挑战，同时也面临着一个重大的机遇。就目前的科技发展水平而言，信息产业的发展已经不能够满足社会化大生产的要求，因此，各个国家集中人力、财力加大对信息技术产业的投入，以适应目前需要。可喜的是在这几十年的发展中我们有了互联网。互联网加大了我们了解世界的眼界，缩紧了人与人之间的距离，这就更容易的使我们走上信息化的道路。

互联网拉近了各个领域之间的距离，如今利用互联网来宣传已经是必不可少的工具，城市发展也需要互联网的宣传来带动自身的发展。

1.2网站开发项目需求分析

一个网站项目的确立是建立在各种各样的需求上面的，这种需求往往网站建设在Internet应用上的地位显的格外重要，它已成为政府、企事业单位信息化建设中的重要组成部分来自于客户的实际需求或者是出于自身发展的需要。在Internet飞速发展的今天，互联网已成为人们快速获取、发布和传递信息的重要渠道，正以一种前所未有的冲击力影响着人类的活动。它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显的格外重要，它已成为政府、企事业单位信息化建设中的重要组成部分。

1

淄博职业学院毕业设计

第二章 网页制作概述

2.1 网页的类型

网页有多种分类,我们笼统意义上的分类是动态和静态的页面,原则上讲静态页面多通过网站设计软件来进行重新设计和更改,相对的比较滞后，当然现在有网站管理系统，也可以生成静态页面~我们称这种静态页面为伪静态。动态页面通过网页脚本与语言自动处理自动更新的页面。

2.1.1 静态页面

静态页面是网页的代码都在页面中，不需要执行asp,php,jsp,.net等程序生成客户端网页代码的网页。静态页面不能自主管理发布更新的页面,如果想更新网页内容,要通过FTP软件把文件DOWN下来用网页制作软件修改（通过fso等技术例外）。但是静态页面最大的好处是下载速度快，因为不需要程序运算和数据库连接。常见的静态页面以.html、.htm为扩展名的。并非网站上没有动画的就是静态页面[3]。

2.1.2 动态页面

动态页面是通过执行asp、php、jsp、.net等程序生成客户端网页代码的网页。动态页面通常可以通过网站后台管理系统对网站的内容进行更新管理。发布新闻，发布公司产品，交流互动，博客，网上调查等，这都是动态网站的一些功能，也是我们常见的。动态网页是需要语言环境支持的，动态页面常见的扩展名有：.asp、 .php、 .jsp 、.cgi 等。动态页面的“动态”是网站与客户端用户互动的意思，而非网页上有动画的就是动态页面[4]。

动态网页是最常用的网站建设的一种表达形式，其优点在于可以根据先前所制定好的程序界面，根据用户的不同请求返回相应的数据。可以说是一对多的关系。从而达到资源的最大利用和节省服务器上的物理资源。如果今后需要改变站点风格，只需要重新制作前台所访问的数据即可。只要数据库结构不变，可以很快的进行改版的。

2

淄博职业学院毕业设计

2.2 网页开发技术

动态网页开发技术介绍——HTML、ASP、JSP、CGI、PHP。

HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。严格的来讲，HTML不能算做一门编程语言，因为它没有自己的数据类型，也没有分支、循环等控制结构。它的设计简单，结构灵活，允许在Web浏览器及其它兼容的应用程序中显示文本和图像，并且文档的某些部分可以成为超链接。完成后把这些文档保存为*.html文件，然后用浏览器打开。

HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器[5]。

在早期，动态网页技术主要采用CGI技术，即Common Gateway Interface(公用网关接口)。在早期，你可以使用不同的程序编写合适的CGI程序，如Visual

Basic,Delphi或C/C++等。虽然CGI技术成熟而且功能强大，但由于编程困难，效率低下，修改复杂等缺陷，所以有逐渐被新技术取代的趋势。

ASP全名Active Server Pages，是一个WEB服务器端的开发环境，利用它可以产生和运行动态的、交互的、高性能的WEB服务应用程序。ASP采用脚本语言VB Script（Java script）作为自己的开发语言。 ASP更精确的说是一个中间件，这个中间件将Web上的请求转入到一个解释器中，在这个解释器中将所有的ASP的Script进行分析，再进行执行，而这时可以在这个中间件中去创建一个*.html文件（静态网页）。 PHP是一种跨平台的服务器端的嵌入式脚本语言. 它大量地借用C,Java和Perl语言的语法, 并耦合PHP自己的特性,使WEB开发者能够快速地写出动态生成页面.它支持目前绝大多数数据库。还有一点，PHP是完全免费的[6]。

JSP 是Sun公司推出的新一代站点开发语言，他完全解决了目前ASP,PHP的一个通病－－脚本级执行（据说PHP4 也已经在Zend 的支持下，实现编译运行）。Sun 公司借助自己在Java 上的不凡造诣，将Java 从Java 应用程序 和 Java

Applet 之外，又有新的硕果，就是Jsp－－Java Server Page。Jsp 可以在Serverlet和JavaBean的支持下，完成功能强大的站点程序。

2.3 网页布局

网站主页就好象是宣传栏或者店面——对访问者产生第一印象，都希望尽量给人留下好的印象。

3

淄博职业学院毕业设计

一般来说，好的网站应该给人有这样的感觉：

干净整洁；

条理清楚；

网页

专业水准；

引人入胜。

网页应该力求抓住而不是淹没浏览者的注意力，过多的闪烁、色彩、下拉菜单框、图片等会让访问者无所适从——离开是最好的选择，就象一些商店，播放震耳欲聋的发烧音乐，你要做的唯一决定就是离开那里，越快越好。

2.3.1 网页布局的基本概念

最开始，网页呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思，可以创造出自己的设计方案。，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西，这样你创造出来的网页才能更好的被别人接受。

（1） 页面尺寸

由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。

4

淄博职业学院毕业设计

浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。

在网页设计过程中，向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。

（2）整体造型

造型就是创造出来的物体形象，这里是指页面的整体形象。这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。

对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。

（3）页头

页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。

（4）文本

文本在页面中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。

（5）页脚

页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。

（6）图片

图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位

5

淄博职业学院毕业设计

置成了整个页面布局的关键。而你的布局思维也将体现在这里。

（7）多媒体

除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。

2.3.2网页布局方法

网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。下面分别加以介绍。

（1）纸上布局法

许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出你页面的布局草图来。

首先，尺寸的选择。目前一般800X600的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者，你页面的尺寸以800X600的分辨率为准。

其次，造型的选择。先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了。选择一个形状作为整个页面的主题造型，我们选择圆形，因为它代表者柔和，和时尚流行比较相称，然后在矩形框架里随意画出来，你可以试者在增加一些圆形或者其它形状。这样画下来，你会发现很乱。其实，如果你一开始就想设计出一个完美的布局来是比较困难的，而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点，你不要担心你设计的布局是否能够实现。事实上，只要你能想到的布局都能靠现今的HTML技术实现。如图2-1和图2-2

图2-1 手绘布局图 图2-2 布局图

考虑到左边向左凹的弧线，为了取得平衡我们在页面右边增加了一个矩形，(也可以是一条线段) 如图2-3。

6

淄博职业学院毕业设计

图2-3 布局图的改善

然后，增加页头。一般页头都是位于页面顶部，所以我们为图3增加了一个页头，为了和左边的弧线和右边的矩形取得平衡，我们增加了一个矩形页头并让页头相交与左边的弧线，如图2-4。

图2-4 页头的图示

然后，增加文本。页面的空白部分加别加入文本和图形。因为在页面右边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调，如图2-5。

图2-5 文本的图示

最后，增加图片。图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方，如图2-6。

7

淄博职业学院毕业设计

图2-6 图片的图示

经过以上的几个步骤，一个时尚页面的大概布局就出现了。当然，它不是最后的结果，而是你以后制作时的重要参考依据。

（2）软件布局法

除了纸上布局，还可以利用软件来完成这些工作。如利用Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。

2.3.2 网页布局技术

（1）层叠样式表的应用

在新的HTML4.0标准中，CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。CSS有点复杂，但它的确是一个好的布局方法[7]。曾经无法实现的想法利用CSS都能实现。目前在许多站点上，层叠样式表的运用是一个站点优秀的体现。比如一些企业网站。

（2）表格布局

表格布局被广泛使用，已经成为一个潜在的标准。随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响[8]。对于表格布局，打开一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它(要所见即所得的软件)，会可以看到这个页面是如何利用表格的。

（3）框架布局

由于它的兼容性，框架布局并没有被所有人接受。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。

2.4网页配色

网站充斥着枯燥的设计，惠普、IBM、戴尔、微软，以及其他数不尽的网站（相似的布局，相似的配色）。这样一种标准化的界面可以使浏览更方便，但同时带给用户一种很世俗的体验，并不能与访客产生一种积极的联系。

面对这种单调的设计，有一种解决方法，就是使用颜色。可能没有其他设计

8

淄博职业学院毕业设计

元素能像颜色一样能影响人们对世界感受。颜色可以瞬间改变我们的情绪和意见。颜色会让我们感觉到舒适、敬畏，或者激动[9]。在界面设计中，颜色组合对设计非常有用。可以区分设计让用户更加难忘、引导用户使用户专注于交互、吸引用户使页面布局更舒适，更有魅力。

一旦有机会可以让网站更独特，就不能放弃。如果你的网站做的很醒目，那么用户可能会花更多时间浏览并且想是从哪里访问过来的，他们有可能记住这个网站并且下次再访问。可能没有比颜色更好的元素可以达到这样的效果了。人们会马上对颜色产生感觉：激动、高兴或者枯燥乏味。

当你试图在一个充满饱和色调的页面上浏览信息时，你的眼睛会不断地返回那些亮的颜色。最强的视觉元素是最重要的。我们趋向于忘记那些深蓝、黄色和灰色，因为每天都看到。在那些用户需要长时间在线使用的 Web 应用程序中，注意这一点尤为重要。不是很强烈的配色可以使用户专注于工作和接收重要信息。当然完美的 Web 体验不能仅仅依靠颜色，结构、交互、布局等方面也必须协同工作，来创建可用、易用的网站和应用程序。但是颜色是平衡中的重要部分，不能忽略。

2.5 网页设计流程

网页设计是一个互动的过程，不仅是设计师构思设计就可以完成的。从客户提出需求到最终发布，期间需要客户与设计人员共同参与协商才可以，具体流程如下：

首先，获取客户需求和资料。在设计网站页面之前，设计师需要知道客户的需求，从而确定客户建立网站的目的。客户提出网站需求是非常重要的一个环节。没有详细的需求，设计人员无法凭空进行设计制作。在这个步骤中，双方的沟通与交流是非常重要的。

其次，确定网站内容。设计人员选择适合自己的图像编辑软件、动画制作软件和网页制作软件进行网页的初步设计，这中间可能还需要和客户进行多次沟通才能达到客户满意的效果。在具体设计时，设计人员应该为网站定位一个主题，从而保证所有网页都围绕这个主题进行设计制作，保证风格的和谐统一。

然后，申请域名和空间。使用该方法能够有效同步管理文件。还可以通过FTP软件连接到服务器空间上，然后上传发布文件。

最后，后期维护。一般静态网站上传后，如果客户方没有专业人员维护，这样就需要设计人员从客户方获取新资料进行定期或不定期的更新。如果是动态网站，设计人员需要负责培训客户方如何使用后台管理，这样客户就可以自己通过

9

淄博职业学院毕业设计

后台管理添加信息，设计人员只要及时更正动态网站的错误即可。

10

淄博职业学院毕业设计

第三章 涉及软件

3.1 DreamWeaVer cs3介绍

Dreamweaver CS3是Adobe(奥多比)公司收购Macromedia公司后最新推出的Creative Suite 3 设计套装中用于网页设计与制作的组件。作为全球最流行，最优秀的所见即所得的网页编辑器，Dreamweaver可以轻而易举地制作出跨操作系统平台，跨浏览器的充满动感的网页，是目前制作Web页站点,Web页和Web应用程序开发的理想工具。Dreamweaver，Fireworks，Flash被称为网页制作的“三剑客”，这三款工具相辅相承，是制作网页的最佳拍档

3.2 DreamWeaVer cs3操作界面

DreamWeaVer cs3界面设计友好，空间广阔，操作精微细致,是一种所见即所得的网页编辑器，既有效的减少了代码编写的工作量，也确保所设计文档的专业性和兼容性。，如图3.1所示。

图3.1

DreamWeaVer cs3操作界面

11

淄博职业学院毕业设计

第四章 建立网页链接

网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？这就是本章要讲的内容----网页的“链接”。“链接”，又称“超链接"（Hyperlink）,它作为网页的桥梁。网页中的很多对象都可以加入“链接”属性。在Dreamweaver 8中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共8种。

4.1 文字链接

“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。接下来结合我的个人网站为实例，来讲解如何为文字建立“链接”。操作步骤：

步骤1 、准备好已经制作完成的首页的各个栏目页面

步骤2、在Dreamweaver 中打开首页，之后反白选取作为“链接”的文字。

步骤3、观察“属性面板”，其中包括一个“链接”文本框。

步骤4、接下来需要把链接的位址加入到文本框中。

步骤5、在“链接”文本框下面还有一个“目标”下拉列表，从中可以选择链接网页显示的窗口方式，共有4种。如图：

步骤6、还可以设置一些“链接”的属性，单击“属性面板”中的“页面属

12

淄博职业学院毕业设计

性”，选择其中的“链接”分类，可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下划线样式”。

步骤7、至此，第1个栏目的链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，当鼠标放在“放松心情”这4个文字上时将变成手形，并且浏览器窗口下面的状态区中会显示链接到的网页的位址，单击文字，页面会立即跳转到第1个栏目中，这表示链接已经制作成功了。

步骤8、同理，按照以上步骤，再为“闲情逸致”和“个人主页”等其它栏制作指向对应栏目的链接。

至此，整个“文字链接”的实例就全就全部完成了。

4.2 图像链接

“图像”也是常被使用的链接媒体，它和“文字链接”非常相似。为图像加入链接，首先应该在网页中插入“图像”，有关插入“图像”或“导航条”按钮的内容，接下来以我的网站“my web“为例，讲解如何建立“图像链接”。操作步骤：

步骤1、首先仍然要准备好已经制作完成的首页和各个栏目的页面

步骤2、在Dreamweaver中打开网站的首页，之后选取要制作“链接”的图像。

步骤3、观察“属性面板”，在“链接”文本框中输入链接的文字位址。

步骤4、如果有需要，可以在“目标”下拉列表中选择“链接”网页显示的窗口方式，分别为-blank 、-parent 、-self或 top。

步骤5、至此，第1个栏目的图像链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，将鼠标放在“动画制作”4个文字上时将变成手形，同时浏览器窗口下面的状态区中会显示出链接到的网页的地址，并且会显示出“替代”文本“动画制作”，单击文字，页面会立即跳转到第3个栏目中，这表示链接已经制作成功了。

步骤6、同理，按照以上步骤，再为其它几幅图像制作指向对应栏目的链接。

13

淄博职业学院毕业设计

步骤7、在栏目页面中制作“返回首页”的链接，使得单击后可以跳转回首页。

至此，整个“图像链像”的实例就全部完成了。

4.3在HTML语言中建立网页链接

一、文字链接

在HTML语言中用超链接标记指向一个目标。其基本格式为：举个简单的“文本链接”的实例，该实例相对应的HTML代码如下所示。

a href-“”target=”-blank”> 平面设计（新开窗口，-blank)

href=”>相册（原窗口，默认为空）

留言

解释 ：« href:是标记的一种属性，该属性中的URL等于链接目标文件的地址。« Target:也是标记的一种属性，相当于Dreamweaver“属性面板”中的“目标”，它的值等于-blank,效果是在新窗口中打开。除此之外还包括其它3种：-parent,-self和-top。这和Dreamweaver中“目标”下拉列表中的内容是一模一样的。« 文本内容：如代码实例中的“平面设计”。这些文本将放在使用了链接属性href和目标属性target的 与标记之间，产生了链接的效果。

二、图像链接

举个简单的“图像链接”的实例。该实例相对应的ＨＴＭＬ代码所示。

（新开窗口，-blank）

height=”18”border=”0”>（原窗口，默认为空）

a href=”3d/”>

解释：仔细观察代码可以发现，“图像链接”与“文本链接”惟一的差别就

14

淄博职业学院毕业设计

在于与之间的内容。“文本链接”中与之间的内容是文字内容，而“图像链接”中就肯定是图片内容了。之前讲过，插入图片使用“

三、Ｅ－Ｍail链接

该实例相对应的“ＨＴＭＬ”代码如下所述。

给我写信

解释：只需使href 等于“mailto：邮件地址？subject=主题＂即可，其中subject为可选项，“？subject=主题”也可以不加。 本次设计用Macromedia公司开发的专业HTML编辑器Dreamweaver,对Wed站点、Web页和Web应用程序进行设计、编码和开发。利用Dreamweaver中的可视化编辑功能，用户可以快速创建页面而无须编写任何代码。并且。借助Dreamweaver，还可以使用服务器语言（例如：ASP,,ColdFusion标记语言（CFML），JSP，PHP）。本设计的页面不是很精美，这写些不足之处还待后期的开发和改进。

15