基于dreamweaver的个人网站的网页设计 - 图文

广东工业大学 华立学院

本科毕业设计（论文）

基于dreamweaver的个人网站的网页设计

系 部 机电与信息工程学部 专 业 信息工程 年级班别 09信息（1）班 学 号 11030901008 学生姓名 黄炎停 指导教师 祝振宇

2013年 6 月

摘 要

因特网是目前世界上最大的计算机互联网络，它遍布全球，将世界各地的各种规模的网络连成一个整体。据估计，目前因特网已有数以千万计的网站，其内容范围跨越了政治、经济、文化、科学、生活等等各个领域，它已经成为人们快速获取、发布和传递信息的重要渠道。因此，网站建设在互联网应用上的地位是显而易见的。

1991年8月6日，世界上第一个网站诞生。它是由Tim Berners-Lee所建立的，基于文本，包含几个链接的网站，现在依然在线，网址是http://info.cern.ch/。从那以后，网页设计师们尝试了各种网页的视觉效果。前期的网页由文本构成，加上一些小图片，毫无布局可言的标题与段落。然而，随着科技的飞速发展，出现了表格布局，然后是 Flash，最后是基于 CSS 的网页设计。

目前，用户最多、应用最广、功能最强大的的网页设计软件就是Dreamweaver，它集网页制作和管理网站于一身，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以非常容易地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver原本由Macromedia公司所开发，但是Macromedia公司现已被Adobe公司收购，Dreamweaver也就成为Adobe Dreamweaver。

我这次开发的是一个小型的个人网站，为了符合设计需求，结合各大网站内容以及形式而建设的，包括：首页、日记、推荐大全、轻松一刻、留言、登录和注册等7大板块。

关键字： 网页设计 ， 网站 ，个人网站， dreamweaver ， html

Abstract

The Internet is now the world's largest computer interconnected networks, it is all over the world, around the world to be various kinds of the size of the network together as a whole.Current estimates suggest that the Internet has tens of millions of websites and their content range across political, economic, cultural, scientific, and so on all areas of life, it has become people to quickly get, distribution and transfer information important channel.The website construction, therefore, on the Internet application status is obvious.

On August 6, 1991, the world's first website was born. It was founded by Tim berners-lee, text-based, contains several links to websites, now still online, the url is http://info.cern.ch.Since then, web page designers tried a variety of visual effects.Previous page consists of text, plus a few little pictures, no layout of headings and paragraphs. However, with the rapid development of science and technology, the form layout, then a Flash, the last is based on the CSS web design.

At present, most users, the most widely used, the most powerful is Dreamweaver web design software, it set web site in a web page creation and management, it is the first set for professional web designers develop visual web development tools in particular, it can be used to easily create, cross platform and cross browser limit restrictions dynamic web pages.Dreamweaver development by Macromedia companies are originally, but Macromedia company has been acquired by Adobe, Dreamweaver also becomes the Adobe Dreamweaver.

This development is a small personal site, in order to comply with the design requirements, combined with the content and form and construction, including: home page, diary, recommended books, relaxed moment, leave a message, login and registration, etc. 7 big plate.

Keywords: website Design , website , personal website, dreamweaver , html

目 录

1 绪论 ................................................................... 1

1.1课题需求 ...................................................................................................................... 1 1.2课题目的 ...................................................................................................................... 1 2 网页设计简述 ........................................................... 2

2.1网站与网页 .................................................................................................................. 2

2.1.1网站 ................................................................................................................... 2 2.1.2网页 ................................................................................................................... 3 2.2网页的名词解释 .......................................................................................................... 3 2.3网页的类型 .................................................................................................................. 4 2.4网页设计的语言 .......................................................................................................... 6

2.4.1 HTML .................................................................................................................. 6 2.4.2 JavaScrip ............................................................................................................ 7 2.5网页的配色 .................................................................................................................. 7 2.6网页的布局 .................................................................................................................. 8 3 网页设计软件介绍 ....................................................... 9

3.1 ADOBE DREAMWEAVER介绍 ........................................................................................ 9 3.2 ADOBE FLASH介绍 ..................................................................................................... 10 3.3 ADOBE PHOTOSHOP介绍 ............................................................................................ 11 4 主体设计 .............................................................. 13

4.1准备工作 .................................................................................................................... 13 4.2定义站点 .................................................................................................................... 14 4.3制作首页 .................................................................................................................... 14

4.3.1定义CSS样式 ................................................................................................. 15 4.3.2制作首页上部 ................................................................................................. 17 4.3.3制作首页中部 ................................................................................................. 17 4.3.4制作网页下部 ................................................................................................. 19

4.4制作网页模板 ............................................................................................................ 20

4.4.1制作模板的样式和上部 ................................................................................. 20 4.4.2制作模板网页中、下部 ................................................................................. 21 4.4.3创建可编辑区域 ............................................................................................. 21 4.5制作子页 .................................................................................................................... 22 4.6设置链接 .................................................................................................................... 23 结束语 .................................................................. 25 参考文献 ................................................................ 26

1 绪论

1.1课题需求

因特网是目前世界上最大的计算机互联网络，它遍布全球，将世界各地的各种规模的网络连成一个整体。World Wide Web(简称WWW，中文译为万维网)，作为因特网上一种先进的，易于被人们所接受的信息检索手段，目前已成为世界上最大的信息资源库。据估计，目前因特网已有数以千万计的网站，其内容范围跨越了政治、经济、文化、科学、生活等等各个领域，其用户群十分庞大，是数以亿计的，它已经成为人们快速获取、

发布和传递信息的重要渠道，已成为政府、企事业单位信息化建设中的重要组成部分。

例如通过网站，有需求的合作单位可以轻而易举地获取纸巾公司的相关信息，如公司的名称和地址、联系方式，更加重要的是了解公司的产品信息，例如产品种类与价格等等。这样的网站，对于厂家与商家而言都是不错的。厂家可以利用网站展示自身形象、为商家提供及时和有效的信息，从而开拓新的市场和提高市场占有率；商家可以通过网站选择到物美价廉的产品。

因此，网站建设在互联网应用上的地位是显而易见的，对人类活动有极其重要的影响。而网页设计作为网站建设重要的一环，有其极其重要的价值。 1.2课题目的

如今的社会，人们已经离不开了互联网，互联网已经成为人与人之间交流的一种极其重要的形式，它摆脱了时间与空间的限制。随着科技的迅速发展及网络用户要求的不断提高，网站向用户提供的服务将越来越丰富，越来越人性化。例如用户可以借助浏览器在网上获得信息，做到足不出户知天下；也可以在家里上网购物、炒股、聊天、办理银行转账、收发信件等。

网络的发展大趋势就是向个人网站发展。通过个人网站可以充分地向他人展示自我，将自己喜欢的文字、图像、影视等等放在个人网站上，以此展示自己的兴趣爱好；展示自己的才华，将自己的作品、言论等等放在个人网站上，让其他人知道你的长处；在商业营销方面，可以将各种产品摆放在个人网站上进行推荐，甚至直接买卖。

1

2 网页设计简述

2.1网站与网页

网站与网页是两个不同概念，网页是网站中的一页，但是网页有时就是一个网站，因为有些网站就只有一个页面。 2.1.1网站

网站(Website)是指因特网上一块固定的面向全世界发布消息的地方，由域名(也就是网址)和网站空间构成。网站开始是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，人们可以利用网站来提供相关的网络服务，或者通过网站来发布自己想要公开的资讯，其他人可以通过网页浏览器来访问网站，享受网络服务或者获取自己需要的资讯。衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度（俗称“网速”）、网站软件配置、网站提供服务等几方面考虑，最直接的衡量标准是这个网站的真实流量。网站建设包括网站策划、网页设计、网站推广、网站评估、网站运营、网站整体优化。

网站内容按可分为5种类型，即企业网站、门户网站、专业网站、职能网站、个人网站，下面将对这几种网站分别进行介绍。

企业网站：企业网站是为了展现公司产品和企业形象，以公司名义开发创建的网站，其内容、样式和风格等都为扩大销售渠道和展示企业自身形象。

门户网站：门户网站是一种综合性网站，涉及领域非常广泛，包含新闻和娱乐、文学、音乐、影视、体育等方面的内容，且具有论坛、评论等功能。

专业网站：专业网站具有很强的专业性，通常只涉及某一个领域，内容比较专业。如起点文学网站即是一个专业小说网站，前程无忧网是一个招聘专业网站平台。

职能网站：职能网站具有专门的功能，如政府职能网站等。目前大热的电子商务网站也属于这类网站，较有名的电子商务网站有淘宝网、京东和当当网等等。

个人网站：个人网站具有较强的个性化，是以个人名义开发创建的网站，以展现个人的个性，满足个人需求。

网站是由多个网页组成的，但不是网页的简单罗列组合，而是用超链接方式组成的既有鲜明风格又有完善内容的有机整体。

2

2.1.2网页

网页(web page)，是网站中的一页，是构成网站的基本元素，是承载各种网站应用的平台。网页是由多种元素构成的，其中最基本的元素是文本和图像，它们更是网页信息的主要载体，它们在网贞中起着非常重要的作用，是用户的第一印象。

各网页集合的初始网页叫主页（亦称首页或起始页），它是一个网站的起点站或者说主目录。通过主页，用户可以比较轻松地了解该网站提供的信息，从而易于浏览网站其他部分的内容。网页是一个文件，他存放在世界某个地方的某一部计算机中，而这部计算机必须是与互联网相连接的。网页会经由网址来识别与存取,当我们在网页浏览器输入网址后，经过一段复杂而又快速的程序，与网址相对应的网页文件会经过网络被传送到你的计算机，然后再通过网页浏览器解释网页的内容，再展示到你的眼前。 2.2网页的名词解释

站点：站点是一个管理网页文档的场所。

IP地址：IP地址作为路由寻址用的数字型标识，连接在因特网上的每一个主机分配的一个地址，它犹如主机的门牌号，独一无二的，可以让路由识别。

域名：域名是一种字符型标识，能够让人轻而易举地记住，它犹如是网站的地址，因特网中任何网站的域名都是全世界唯一的。如www .baidu.om就是百度网站的域名。

浏览器：浏览器是万维网服务的客户端浏览程序。可以向万维网服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。目前浏览速度最快的浏览器是谷歌公司的chrome浏览器。

导航条：导航条就如同一个网站的路牌，有了它，用户轻而易举地找到自己所想浏览的页面，不会在浏览网站时“迷路”，如图（2-2）所示：

图（2-2）：某网站的导航条

超链接：超链接在网页中起着非常重要的作用，主要用于将不同页面链接起来。用户单击含有超链接技术的文本、图像，甚至动画等等的载体，就能打开其指定的目标网页。

3

表单：表单是具有交互性的动态网页，常用于在注册网站会员和申请邮箱等活动时提交用户信息。如图（2-3）所示：

图（2-3）：申请QQ账户的表单

URL: URL（英文Uniform Resource Locator的缩写）是指全球统一资源定位器，使用URL路径，可以标识出位于互联网计算机中任意位置的文件。 2.3网页的类型

网页有多种分类,但是我们一般把它分为两大类：静态网页和动态网页。

所谓静态网页并不是是网页是静态不动的，它一样可以有各种动态效果的，如.GIF格式的动画、FLASH、滚动字幕等等，这些“动态效果”只是视觉上的。静态网页是用HTML代码来编写的网页，一般是以*.html或*.htm为模板来命名的，其代码都在网页之中。静态网页不需要经过程序运算与数据库连接，直接把这些静态的信息发送到用户的浏览器上了，这样减轻了服务器的负担，也就降低了数据库的成本，自然而然的也就提高了网页打开的速度了。

网站中长时间不需要更新的栏目宜用静态网页来实现，例如网站的导航栏目；网站如果不需要实时更新的话，也宜用静态网页来实现，例如产品种类与信息变更比较少的小规模公司或者展示型网站。由于不跟数据库连接，静态网页不能自主管理发布更新的网页, 信息更新速度相对比较缓慢。在没有人工去更新的时候，用户在任何时候、任何

4

地方、采用任何方式浏览该页面，所看到的浏览结果都一模一样的。如果想更新网页内容,需要通过人工更新，通过FTP软件把文件下载下来，再用网页制作软件修改。

总之，静态网页比较适合于用来发布无需用户参与、无需自动更新的静态文本内容。 与静态网页相对应的是动态网页，所谓动态网页并不是指会动的网页就是动态网页，它一样也可以是静态的，页面是纯文字内容的。动态网页是通过网页脚本与语言自动处理、自动更新的网页，它会依据不同的客户和不同的时间发送不同的网页给用户，它们是以网络中的数据库为依据的。动态页面的主要功能是把储存在数据库中的内容，以动态的形式展现给用户，并把用户的数据存储在数据库中，留在以后使用，动态网页的信息更新的速度比较快。在动态网站中的程序的操作都是在服务器中执行的，通过网络发送给用户的只是在这些程序中运算得到的结果，这样一来，对用户的服务器的要求会比较低，然而服务器在完成用户的请求的时候，需要从数据库中找到和用户要求相对应的一些数据，这样一来，需要占用很大的服务器资源。随着后台的数据库储存的内容不断的丰富和访问的人数不断的增多，会不断的增加服务器的压力，最终，网页加载的速度就会变的很慢。动态网页一般以*.asp、*.aspx、*.php、或*.jsp作为模板来命名的。动态网页一般需要配合数据库，以实现非常强大的功能，比较常见的表现形式有：论坛和网购、留言板、聊天室、校友录等等。

随着数据库和各种脚本技术的发展，越来越多的网站都开始采取动态网页技术来设计。在动态网页中， Web服务器能够与用户进行交互，按照用户的需要来动态地、即时地构造页面。例如，在论坛中，用户发新帖或者回复等等的行为，会让网站服务器运行程序，自动处理信息，按照流程更新页面，从而轻而易举地更新网页。

静态网页和动态网页之间并不如名称那样充满矛盾，相反它们可以像阴阳那样组合出和谐的太极图。为了网站适应搜索引擎检索的需要，即使采用动态网页技术，也可以将网页内容转化为静态网页来发布。

动态网页可以采用动静结合的原则，适合采用动态网页的地方用动态网页，有需要使用静态网页，那么静态网页相关内容则可以考虑用静态网页的方法来实现。例如一个网站的导航栏目一般不会在短时间内更改的，就算浏览这个网站不同的页面，它的导航栏目都是一样的，因此，导航栏目比较适合采用静态网页技术。再例如网站的一部分图片，这些图片存在于不同页面，如果采用动态网页技术，则每次打开新页面都会重新下载这些图片，这不仅加重了服务器的负担，也提高了对用户网速的要求；如果采用静态

5

网页技术，就可以这些大量重复使用的图片缓存在用户的客服端中，减少了系统的消耗，降低对服务器的压力，提高网页打开的速度。

总之，在同一个网站上，同时采用动态网页技术和静态网页技术是很普遍的。 2.4网页设计的语言

网页设计中所涉及的语言高达十几种，这里就简单介绍比较常见的两种语言，它们分别是HTML、JavaScrip。 2.4.1 HTML

HTML（英语Hypertext Markup Language的缩写）即超文本标记语言，它是在文本文件的基础上加系列标记，描述其格式、颜色、字体、文字大小，再加上声音、图像、甚至是视频等形成精彩的页面。严格的来讲，它并不是编程语言，没有分支、循环等控制结构，只是一些能够让浏览器看懂的标记。

HTML的结构标识一般来说，都是双向标识，书写规则是<标识名><／标识名>。一个标准的HTML文档如下所示：