1、 毕 业 设 计 题目 基于 Dreamweaver的网页设计 年 月 日淄博职业学院毕业设计 I 摘 要 在 Internet 飞速发展的今天，互联网已成为人们快速获取、发布和传递信息的重要渠道，正以一种前所未有的冲击力影响着人类的活动。它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在 Internet 应用上的地位显的格外重要，它已成为政府、企事业单位信息化建设中的重要组成部分。 现今的社会，人们已经离不开了网络，网络 已经成为人与人之间交流的一种形式，它能够把事情的复杂化转为简单化，摆脱了时间和空间的限制。网站为很多人提供了一个网络生活空间，通过其网页展示了企业介绍、城
2、市文化、校园文化介绍、招商信息、加盟程序、留言等一系列内容的介绍。为了更好的宣传和服务于经济发展，我通过制作一个网站来介绍宣传一下我的家乡。本文比较系统的阐述了有关网站建设方面的相关理论知识及该网站开发设计，充分体现了计算机技术服务于经济建设的重要思想。 关键词 : 网站建设， Internet，城市发展淄博职业学院毕业设计 II Abstract In the Internet rapid development today, the Internet has become a people quickly get, release and transmit information, is
3、an important channel in an unprecedented wallop affect human activities. It in people politics, economy, life aspects played an important role. Therefore website construction in the Internet application status of especially important to show, and it has become the government, enterprises, an importa
4、nt part of informatization construction. Todays society, people have without the Internet, network has become between a form of communication, it can make things complicated to simplicity, get rid of the time and space restrictions. Web site for many people provides a network life space, through its
5、 web demonstrate the enterprise introduces, urban culture and campus culture introduction, investment promotion information, join procedure, introduced a series of content of the message. In order to better propaganda and in the service of the economic development, and I made a web site to introduce
6、 by propagandize the my hometown. In this paper expatiates relevant website construction related theory knowledge and the website development and design, fully embodies the computer technology to serve economic construction important thoughts. Keywords: “website construction“ “Internet“ “urban devel
7、opment“ 淄博职业学院毕业设计 III 目录 第一章 前言 . 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 网页布局技术 . 7 2.4 网页配色 . 8 2.5 网页设计流程 . 9 第三章 涉及软件 . 10 3.1 DreamWeaVer cs3 介绍 . 10 3.2 DreamWeaVer cs3
8、操作界面 . 10 第四章 建立网页链接 . 11 4.1 文字链接 . 11 4.2 图像链接 . 12 4.3 在 HTML 语言中建立网页链接 . 12 第五章 结论 . 15 致 谢 . 16 参考文献 . 17 淄博职业学院毕业设计 1 第一章 前言 1 1 课题来源 随着二十一世纪新兴科技的飞速发展，如今的信息产业正在经受着一个巨大的挑战，同时也面临着一个重大的机遇。就目前的科技发展水平而言，信息产业的发展已经不能够满足社会化大生产的要求，因此，各个国家集中人力、财力加大对信息技术产业的投入，以适应目前需要。可喜的是在这几十年的发展中我们有了互联网。互联网加大了我们了解世界的眼界，
9、缩紧了人与人之间的距离，这就更容易的使我们 走上信息化的道路。 互联网拉近了各个领域之间的距离，如今利用互联网来宣传已经是必不可少的工具，城市发展也需要互联网的宣传来带动自身的发展。 1.2 网站开发项目需求分析 一个网站项目的确立是建立在各种各样的需求上面的，这种需求往往 网站建设在Internet 应用上的地位显的格外重要，它已成为政府、企事业单位信息化建设中的重要组成部分 来自于客户的实际需求或者是出于自身发展的需要。 在 Internet 飞速发展的今天，互联网已成为人们快速获取、发布和传递信息的重要渠道，正以一种前所未有的冲击力影响着人类的活动。它在人们 政治、经济、生活等各个方面发
10、挥着重要的作用。因此网站建设在 Internet 应用上的地位显的格外重要，它已成为政府、企事业单位信息化建设中的重要组成部分。淄博职业学院毕业设计 2 第二章 网页制作概述 2.1 网页的类型 网页有多种分类 ,我们笼统意义上的分类是动态和静态的页面 ,原则上讲静态页面多通过网站设计软件来进行重新设计和更改 ,相对的比较滞后，当然现在有网站管理系统，也可以生成静态页面 我们称这种静态页面为伪静态。动态页面通过网页脚本与语言自动处理自动更新的页面 。 2.1.1 静态页面 静态页面是网页的代码都在页面中，不需要执行 asp,php,jsp,.net 等程序生成客户端网页代码的网页。静态页面不能
11、自主管理发布更新的页面 ,如果想更新网页内容 ,要通过 FTP 软件把文件 DOWN 下来用网页制作软件修改（通过 fso等技术例外） 。但是静态页面最大的好处是下载速度快，因为不需要程序运算和数据库连接。 常见的静态页面 以 .html、 .htm 为 扩展名的。并非网站上没有动画的就是静态页面 3。 2.1.2 动态页面 动态页面是通过执行 asp、 php、 jsp、 .net 等程序生成客户端网页代码的网页。动态页面通常可以通过网站后台管理系统对网站的内容进行 更新管理。发布新闻，发布公司产品，交流互动，博客，网上调查等，这都是动态网站的一些功能 ， 也是我们常见的。 动态网页是需要语
12、言环境支持的， 动态页面常见的扩展名有： .asp、 .php、 .jsp 、 .cgi 等。动态页面的 “ 动态 ” 是网站与客户端用户互动的意思，而非网页上有动画的就是动态页面 4。 动态网页是最常用的网站建设的一种表达形式，其优点在于可以根据先前所制定好的程序界面，根据用户的不同请求返回相应的数据。可以说是一对多的关系。从而达到资源的最大利用和节省服务器上的物理资源。如果今后需要改变站点风格，只 需要重新制作前台所访问的数据即可。只要数据库结构不变，可以很快的进行改版的。 淄博职业学院毕业设计 3 2.2 网页开发技术 动态网页 开发 技术介绍 HTML、 ASP、 JSP、 CGI、
13、PHP。 HTML（ HyperTextMark-upLanguage）即超文本标记语言，是 WWW 的描述语言。严格的来讲， HTML 不能算做一门编程语言，因为它没有自己的数据类型，也没有分支、循环等控制结构。它的设计简单，结构灵活，允许在 Web 浏览器及其它兼容的应用程序中显示文本和图像，并且文档的某些部分可以成为超链接。完成后把这些文档保存为 *.html 文件，然后用浏览器打开。 HTML 是网络的通用语言 ,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器 5。 在早期，动态网页技
14、术主要采用 CGI 技术，即 Common Gateway Interface(公用网关接口 )。在早期，你可以使用不同的程序编写合适的 CGI 程序，如 Visual Basic,Delphi 或 C/C+等。虽然 CGI 技术成熟而且功能强大，但由于编程困难，效率低下，修改复杂等缺陷，所以有 逐渐被新技术取代的趋势。 ASP 全名 Active Server Pages，是一个 WEB 服务器端的开发环境 ， 利用它可以产生和运行动态的、交互的、高性能的 WEB 服务应用程序。 ASP 采用脚本语言 VB Script（ Java script）作为自己的开发语言。 ASP 更精确的说是一
15、个中间件，这个中间件将 Web 上的请求转入到一个解释器中，在这个解释器中将所有的 ASP 的 Script 进行分析，再进行执行，而这时可以在这个中间件中去创建一个 *.html 文件（静态网页）。 PHP 是一种跨平台的服务器端的嵌入式脚本语言 . 它大量地借用 C,Java 和 Perl 语言的语法 , 并耦合 PHP 自己的特性 ,使 WEB开发者能够快速地写出动态生成页面 .它支持目前绝大多数数据库。还有一点，PHP 是完全免费的 6。 JSP 是 Sun 公司推出的新一代站点开发语言，他完全解决了目前 ASP,PHP的一个通病脚本级执行（据说 PHP4 也已经在 Zend 的支持下
16、，实现编译运行） 。 Sun 公司借助自己在 Java 上的不凡造诣，将 Java 从 Java 应用程序 和 Java Applet 之外，又有新的硕果，就是 Jsp Java Server Page。 Jsp 可以在 Serverlet 和 JavaBean 的支持下，完成功能强大的站点程序。 2.3 网页布局 网站主页就好象是 宣传 栏 或者店面 对访问者产生第一印象，都希望尽量给人留下好的印象 。 淄博职业学院毕业设计 4 一般来说，好的网站应该给人有这样的感觉： 干净整洁； 条理清楚； 网页 专业水准； 引人入胜。 网页应该力求抓住而不是淹没浏览者的注意力，过多的闪烁、色彩、下拉菜单
17、框、图片等会让访问者无所适从 离开是最好的选择，就象一些 商 店 ，播放震耳欲聋的发烧音乐，你要做的唯一决定就是离开那里，越快越好。 2.3.1 网页布局的基本概念 最开始，网页呈现在你面前的时侯 ，它就好像一张白纸，它需要你任意挥洒你的设计才思，可以创造出自己的设计方案。，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西，这样你创造出来的网页才能更好的被别人接受。 （ 1） 页面尺寸 由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的
18、页面范围变得越来越小。一般分辨率在 800x600 的情况下，页面的显示尺寸为： 780x428 个象素；分辨率在 640x480 的情况下，页面的显示尺寸为 :620X311 个象素；分辨率在 1024X768 的情况下，页面的显示尺寸为： 1007x600。从以上数据可以看出，分辨率越高页面尺寸越大。 浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。 在网页设计过程中，向下拖动页面是惟一给网页增加更多内容 (尺寸 )的方法。除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超
19、过三屏。如果需要在同一页面显示超过三屏的内容，那 么你最好能在上面做上页面内部连接，方便访问者浏览。 淄博职业学院毕业设计 5 （ 2）整体造型 造型就是创造出来的物体形象，这里是指页面的整体形象。这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于页面的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。 对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多 ICP 和政府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量，权威，
20、牢固，侵略等，许多大型的商业站点为显示它的权威性常以三角形为页面整体造型；菱形代表着平衡，协调，公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。 （ 3）页头 页头又可称之为页眉，页眉的作用是定义页面的主题。比如一个站点的名字多数都显示在页眉里。这样，访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及 旗帜广告。 （ 4）文本 文本在页面中出现都数以行或者块 (段落 )出现，它们的摆放位置决
21、定者整个页面布局的可视性。在过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着 DHTML 的兴起，文本已经可以按照自己的要求放置到页面的任何位置。 （ 5）页脚 页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。 （ 6）图片 图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。而你的布局思维也将体现在这里 。 （ 7）多媒体 除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。 淄博职业
22、学院毕业设计 6 2.3.2 网页布局方法 网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。下面分别加以介绍。 （ 1）纸上布局法 许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出你页面的布局草图来。 首先，尺寸的选择。目前一般 800X600 的分辨率为约 定俗成的浏览模式。所以为了照顾大多数访问者，你页面的尺寸以 800X600 的分辨率为准。 其次，造型的选择。先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了。选择一个形状作为整个页面的主题造型，我
23、们选择圆形，因为它代表者柔和，和时尚流行比较相称，然后在矩形框架里随意画出来，你可以试者在增加一些圆形或者其它形状。这样画下来，你会发现很乱。其实，如果你一开始就想设计出一个完美的布局来是比较困难的，而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点，你不要担心你设计的布局是否能够实 现。事实上，只要你能想到的布局都能靠现今的 HTML 技术实现。如图2-1 和图 2-2 图 2-1 手绘布局图 图 2-2 布局图 考虑到左边向左凹的弧线，为了取得平衡我们在页面右边增加了一个矩形，(也可以是一条线段 ) 如图 2-3。 图 2-3 布局图的改善 然后，增加页头。一般页头都是位于页面顶部，所以我们为图 3 增加了一个页头，为了和左边的弧线和右边的矩形取得平衡，我们增加了一个矩形页头并让
