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

《基于dreamweaver的个人网站的网页设计.docx》由会员分享，可在线阅读，更多相关《基于dreamweaver的个人网站的网页设计.docx（23页珍藏版）》请在冰豆网上搜索。

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

广东工业大学

华立学院

本科毕业设计（论文）

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

系部机电与信息工程学部

专业信息工程

年级班别09信息

（1）班

学号11030901008

学生姓名黄炎停

指导教师祝振宇

2013年6月

摘要

因特网是目前世界上最大的计算机互联网络，它遍布全球，将世界各地的各种规模的网络连成一个整体。

据估计，目前因特网已有数以千万计的网站，其内容范围跨越了政治、经济、文化、科学、生活等等各个领域，它已经成为人们快速获取、发布和传递信息的重要渠道。

因此，网站建设在互联网应用上的地位是显而易见的。

1991年8月6日，世界上第一个网站诞生。

它是由TimBerners-Lee所建立的，基于文本，包含几个链接的网站，现在依然在线，网址是http:

//info.cern.ch/。

从那以后，网页设计师们尝试了各种网页的视觉效果。

前期的网页由文本构成，加上一些小图片，毫无布局可言的标题与段落。

然而，随着科技的飞速发展，出现了表格布局，然后是Flash，最后是基于CSS的网页设计。

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

Dreamweaver原本由Macromedia公司所开发，但是Macromedia公司现已被Adobe公司收购，Dreamweaver也就成为AdobeDreamweaver。

我这次开发的是一个小型的个人网站，为了符合设计需求，结合各大网站内容以及形式而建设的，包括：

首页、日记、推荐大全、轻松一刻、留言、登录和注册等7大板块。

关键字：

网页设计，网站，个人网站，dreamweaver，html

Abstract

TheInternetisnowtheworld'slargestcomputerinterconnectednetworks,itisallovertheworld,aroundtheworldtobevariouskindsofthesizeofthenetworktogetherasawhole.CurrentestimatessuggestthattheInternethastensofmillionsofwebsitesandtheircontentrangeacrosspolitical,economic,cultural,scientific,andsoonallareasoflife,ithasbecomepeopletoquicklyget,distributionandtransferinformationimportantchannel.Thewebsiteconstruction,therefore,ontheInternetapplicationstatusisobvious.

OnAugust6,1991,theworld'sfirstwebsitewasborn.ItwasfoundedbyTimberners-lee,text-based,containsseverallinkstowebsites,nowstillonline,theurlishttp:

//info.cern.ch.Sincethen,webpagedesignerstriedavarietyofvisualeffects.Previouspageconsistsoftext,plusafewlittlepictures,nolayoutofheadingsandparagraphs.However,withtherapiddevelopmentofscienceandtechnology,theformlayout,thenaFlash,thelastisbasedontheCSSwebdesign.

Atpresent,mostusers,themostwidelyused,themostpowerfulisDreamweaverwebdesignsoftware,itsetwebsiteinawebpagecreationandmanagement,itisthefirstsetforprofessionalwebdesignersdevelopvisualwebdevelopmenttoolsinparticular,itcanbeusedtoeasilycreate,crossplatformandcrossbrowserlimitrestrictionsdynamicwebpages.DreamweaverdevelopmentbyMacromediacompaniesareoriginally,butMacromediacompanyhasbeenacquiredbyAdobe,DreamweaveralsobecomestheAdobeDreamweaver.

Thisdevelopmentisasmallpersonalsite,inordertocomplywiththedesignrequirements,combinedwiththecontentandformandconstruction,including:

homepage,diary,recommendedbooks,relaxedmoment,leaveamessage,loginandregistration,etc.7bigplate.

Keywords:

websiteDesign,website,personalwebsite,dreamweaver,html

1绪论

1.1课题需求

因特网是目前世界上最大的计算机互联网络，它遍布全球，将世界各地的各种规模的网络连成一个整体。

WorldWideWeb（简称WWW，中文译为万维网），作为因特网上一种先进的，易于被人们所接受的信息检索手段，目前已成为世界上最大的信息资源库。

据估计，目前因特网已有数以千万计的网站，其内容范围跨越了政治、经济、文化、科学、生活等等各个领域，其用户群十分庞大，是数以亿计的，它已经成为人们快速获取、发布和传递信息的重要渠道，已成为政府、企事业单位信息化建设中的重要组成部分。

例如通过网站，有需求的合作单位可以轻而易举地获取纸巾公司的相关信息，如公司的名称和地址、联系方式，更加重要的是了解公司的产品信息，例如产品种类与价格等等。

这样的网站，对于厂家与商家而言都是不错的。

厂家可以利用网站展示自身形象、为商家提供及时和有效的信息，从而开拓新的市场和提高市场占有率；商家可以通过网站选择到物美价廉的产品。

因此，网站建设在互联网应用上的地位是显而易见的，对人类活动有极其重要的影响。

而网页设计作为网站建设重要的一环，有其极其重要的价值。

1.2课题目的

如今的社会，人们已经离不开了互联网，互联网已经成为人与人之间交流的一种极其重要的形式，它摆脱了时间与空间的限制。

随着科技的迅速发展及网络用户要求的不断提高，网站向用户提供的服务将越来越丰富，越来越人性化。

例如用户可以借助浏览器在网上获得信息，做到足不出户知天下；也可以在家里上网购物、炒股、聊天、办理银行转账、收发信件等。

网络的发展大趋势就是向个人网站发展。

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

2网页设计简述

2.1网站与网页

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

2.1.1网站

网站（Website）是指因特网上一块固定的面向全世界发布消息的地方，由域名（也就是网址）和网站空间构成。

网站开始是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。

简单地说，网站是一种通讯工具，人们可以利用网站来提供相关的网络服务，或者通过网站来发布自己想要公开的资讯，其他人可以通过网页浏览器来访问网站，享受网络服务或者获取自己需要的资讯。

衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度（俗称“网速”）、网站软件配置、网站提供服务等几方面考虑，最直接的衡量标准是这个网站的真实流量。

网站建设包括网站策划、网页设计、网站推广、网站评估、网站运营、网站整体优化。

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

企业网站：

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

门户网站：

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

专业网站：

专业网站具有很强的专业性，通常只涉及某一个领域，内容比较专业。

如起点文学网站即是一个专业小说网站，前程无忧网是一个招聘专业网站平台。

职能网站：

职能网站具有专门的功能，如政府职能网站等。

目前大热的电子商务网站也属于这类网站，较有名的电子商务网站有淘宝网、京东和当当网等等。

个人网站：

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

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

2.1.2网页

网页（webpage），是网站中的一页，是构成网站的基本元素，是承载各种网站应用的平台。

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

各网页集合的初始网页叫主页（亦称首页或起始页），它是一个网站的起点站或者说主目录。

通过主页，用户可以比较轻松地了解该网站提供的信息，从而易于浏览网站其他部分的内容。

网页是一个文件，他存放在世界某个地方的某一部计算机中，而这部计算机必须是与互联网相连接的。

网页会经由网址来识别与存取,当我们在网页浏览器输入网址后，经过一段复杂而又快速的程序，与网址相对应的网页文件会经过网络被传送到你的计算机，然后再通过网页浏览器解释网页的内容，再展示到你的眼前。

2.2网页的名词解释

站点：

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

IP地址：

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

域名：

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

如www.baidu.om就是XX网站的域名。

浏览器：

浏览器是万维网服务的客户端浏览程序。

可以向万维网服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。

目前浏览速度最快的浏览器是谷歌公司的chrome浏览器。

导航条：

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

图（2-2）：

某网站的导航条

超链接：

超链接在网页中起着非常重要的作用，主要用于将不同页面链接起来。

用户单击含有超链接技术的文本、图像，甚至动画等等的载体，就能打开其指定的目标网页。

表单：

表单是具有交互性的动态网页，常用于在注册网站会员和申请邮箱等活动时提交用户信息。

如图（2-3）所示：

图（2-3）：

申请QQ账户的表单

URL:

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

2.3网页的类型

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

静态网页和动态网页。

所谓静态网页并不是是网页是静态不动的，它一样可以有各种动态效果的，如.GIF格式的动画、FLASH、滚动字幕等等，这些“动态效果”只是视觉上的。

静态网页是用HTML代码来编写的网页，一般是以*.html或*.htm为模板来命名的，其代码都在网页之中。

静态网页不需要经过程序运算与数据库连接，直接把这些静态的信息发送到用户的浏览器上了，这样减轻了服务器的负担，也就降低了数据库的成本，自然而然的也就提高了网页打开的速度了。

网站中长时间不需要更新的栏目宜用静态网页来实现，例如网站的导航栏目；网站如果不需要实时更新的话，也宜用静态网页来实现，例如产品种类与信息变更比较少的小规模公司或者展示型网站。

由于不跟数据库连接，静态网页不能自主管理发布更新的网页,信息更新速度相对比较缓慢。

在没有人工去更新的时候，用户在任何时候、任何地方、采用任何方式浏览该页面，所看到的浏览结果都一模一样的。

如果想更新网页内容,需要通过人工更新，通过FTP软件把文件下载下来，再用网页制作软件修改。

总之，静态网页比较适合于用来发布无需用户参与、无需自动更新的静态文本内容。

与静态网页相对应的是动态网页，所谓动态网页并不是指会动的网页就是动态网页，它一样也可以是静态的，页面是纯文字内容的。

动态网页是通过网页脚本与语言自动处理、自动更新的网页，它会依据不同的客户和不同的时间发送不同的网页给用户，它们是以网络中的数据库为依据的。

动态页面的主要功能是把储存在数据库中的内容，以动态的形式展现给用户，并把用户的数据存储在数据库中，留在以后使用，动态网页的信息更新的速度比较快。

在动态网站中的程序的操作都是在服务器中执行的，通过网络发送给用户的只是在这些程序中运算得到的结果，这样一来，对用户的服务器的要求会比较低，然而服务器在完成用户的请求的时候，需要从数据库中找到和用户要求相对应的一些数据，这样一来，需要占用很大的服务器资源。

随着后台的数据库储存的内容不断的丰富和访问的人数不断的增多，会不断的增加服务器的压力，最终，网页加载的速度就会变的很慢。

动态网页一般以*.asp、*.aspx、*.php、或*.jsp作为模板来命名的。

动态网页一般需要配合数据库，以实现非常强大的功能，比较常见的表现形式有：

论坛和网购、留言板、聊天室、校友录等等。

随着数据库和各种脚本技术的发展，越来越多的网站都开始采取动态网页技术来设计。

在动态网页中，Web服务器能够与用户进行交互，按照用户的需要来动态地、即时地构造页面。

例如，在论坛中，用户发新帖或者回复等等的行为，会让网站服务器运行程序，自动处理信息，按照流程更新页面，从而轻而易举地更新网页。

静态网页和动态网页之间并不如名称那样充满矛盾，相反它们可以像阴阳那样组合出和谐的太极图。

为了网站适应搜索引擎检索的需要，即使采用动态网页技术，也可以将网页内容转化为静态网页来发布。

动态网页可以采用动静结合的原则，适合采用动态网页的地方用动态网页，有需要使用静态网页，那么静态网页相关内容则可以考虑用静态网页的方法来实现。

例如一个网站的导航栏目一般不会在短时间内更改的，就算浏览这个网站不同的页面，它的导航栏目都是一样的，因此，导航栏目比较适合采用静态网页技术。

再例如网站的一部分图片，这些图片存在于不同页面，如果采用动态网页技术，则每次打开新页面都会重新下载这些图片，这不仅加重了服务器的负担，也提高了对用户网速的要求；如果采用静态网页技术，就可以这些大量重复使用的图片缓存在用户的客服端中，减少了系统的消耗，降低对服务器的压力，提高网页打开的速度。

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

2.4网页设计的语言

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

2.4.1HTML

HTML（英语HypertextMarkupLanguage的缩写）即超文本标记语言，它是在文本文件的基础上加系列标记，描述其格式、颜色、字体、文字大小，再加上声音、图像、甚至是视频等形成精彩的页面。

严格的来讲，它并不是编程语言，没有分支、循环等控制结构，只是一些能够让浏览器看懂的标记。

HTML的结构标识一般来说，都是双向标识，书写规则是。

一个标准的HTML文档如下所示：

mainbody

就像这个文档一样，HTML文档都是必须以开始，以结束，它还通常有一个head元素和一个body元素，并且3对标签在个网页文档中有且只能出现一次，不能重复使用。

其中为文件标识，表示此文件是HTML格式的文件，是一个网页文件。

以上3对标签在个网页文档中只能出现一次，而不能重复使用。

2.4.2JavaScrip

JavaScript是一种跨平台、基于对象的脚本语言，由JavaScript核心语言、JavaScript客户端扩展和JavaScript服务器端扩展3部分组成。

它与Java是两种完全不相同的语言，前者是脚本语言,而后者是一种编译型的语言。

含有JavaScript脚本代码的文档如下所示：

其中，之间就是JavaScript的脚本代码。

2.5网页的配色

色彩是很有力的工具，其视觉效果非常引人注目，能够让平平无奇的东西，瞬间生动活泼起来;也能够让生动活泼的东西，瞬间平平无奇。

当浏览者打开一个网页时，网页给其留下的第一印象既不是网站丰富的内容，也不是网站合理的版面布局，而是网页中的色彩。

色彩运用和搭配是否成功，在一定程度上决定网页界面风格是否形成，也决定了设一个网站的是否优秀。

总而言之，在设计网页时必须重视网页的配色。

“白纸黑字”是永远的主题。

网页界面以白色为背景的居多，因为白色给人的感觉是干净和简洁，同时又是一种百搭色，它可以和多种颜色配上黑色最为突出。

以白色为背景色、配上黑色的字，可以让页面视觉自然、流畅，有利于突出页面的重点，也有利于整个界面的配色，更容易为大多数人认可和掌握。

那么让我们看看使用白色为背景色的优秀网站，如图（2-4）。

图（2-4）：

XX主页

2.6网页的布局

一般来说，好的网站应该给人干净整洁、条理清楚的感觉，而能否做到这一点，就由网页的布局所决定，也就是说布局设计可以让浏览者更加清晰地“读懂”网站，从而轻而易举地找到自己所需要的资源在那个位置。

在网页布局时通常有两种方法，也就是纸上布局法和软件布局法。

纸上布局法：

就是在纸上打草稿。

先在纸上画出草图，对网页布局进行规划，以方便设计，易于设计出优秀的网页。

软件布局法：

一般是说使用Photoshop来完成软件的布局。

Photoshop在图像编辑、处理方面的功能十分强大，它可以对颜色、图像等进行方便的处理，并且它的图层功能，可以让设计者设计出无法在纸上实现的效果。

网页布局大致可分为“国”字型、拐角型、“T”字型、“L”字型、综合框架型、Flash型、变化型，这里就不一一介绍了。

3网页设计软件介绍

网页设计的软件一般有三种类型，其中以AdobeDreamweaver为代表的网页制作软件，以AdobeFlash为代表的网页动画制作软件，以AdobeFireworks为代表的网页图像处理软件。

这三款软件合在一起被称为网页制作三剑客。

不同的设计者有不同的软件使用习惯，加上网站不同的设计要求，设计者都是选择自己适用的软件，而我比较喜欢的网页设计软件搭配是AdobeDreamweaver和AdobeFlash，还有AdobePhotoshop。

3.1AdobeDreamweaver介绍

Dreamweaver原本由著名的Macromedia公司所开发，但是Macromedia公司现已被Adobe公司收购，Dreamweaver也就正式改名为AdobeDreamweaver。

Dreamweaver刚开始只支持Mac（也就是苹果公司的电脑系统），后来开发了Windows版本的，而随着Macromedia被Adobe收购后，Adobe也开始有计划地开发Linux版本的。

目前，用户最多、应用最广、功能最强大的的网页制作软件就是Dreamweaver，它集网页制作和管理网站于一身，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以非常容易地制作出跨越平台限制和跨越浏览器限制的充满动感的网页，是目前制作网页站点、网页和网页应用程序开发的理想工具。

不管是初学者，还是专业的网页设计员，都可以使用Dreamweaver容易地制作出精美的网页，甚至可以编写出各种各样的复杂的网页应用程序。

作为一种网页设计软件，Dreamweaver使用所见即所得的接口，提供了强大的可视化编辑网页功能，用户可以将文本、图像、动画和视频等等的媒体元素插入网页，并使用表格以及框架等布局技术为这些媒体元素布局。

Dreamweaver的优点就是它的兼容性，它可以与Fireworks、Flash、Photoshop、Playback等等的设计软件兼容，从而可以用最快速的方式将兼容软件的文档移动到网页上。

Dreamweaver同时还可以直接开启Firework或Photoshop来进行编辑与设定图档的最佳化。

这些优点使Dreamweaver的网页制作效率非常之高。

在AdobeDreamweaverCS5的工作界面中，包括【标题栏】、【菜单栏】、【工作区】、【属性】、【面板组】等等的组成部分，如图（3-1）所示：

图（3-1）：

AdobeDreamweaverCS5的工作界面

3.2AdobeFlash介绍

网页动画主要包括Flash动画和GIF动画，其中Flash动画制作首选AdobeFlash软件。

AdobeFlash是目前应用最广泛的多媒体动画制作软件，它可以将各种音乐、声效和动画有机地融合在一起，制作出非常不错的动画。

它在动画制作方面也有一整套十分强大的功能，例如从动画的绘制、动作的实现、编程控制以及最后动画的输出等，它都可以完全满