基于HTML的网站设计(毕业论文简易版）

时间：2023-03-16 20:20:01 | 来源：电子商务

时间：2023-03-16 20:20:01 来源：电子商务

基于HTML的网站设计

摘要

随着网络技术的不断发展，网络应用已经渗透到人类社会的各个角落。作为网络世界的支撑点的网站，更是人们关注的热点：政府利用网站宣传自己的施政纲领，日益成为与百姓交流的直通车；企业利用网站宣传自己的形象，挖掘无限商机；个人利用网站展示个性风采，创建彼此沟通的桥梁。本文通过利用Dreamweaver的强大功能和HTML语言设计制作静态的个人网站，在Windows系统下Web工作环境下给出了网站的界面和程序。

关键词：

个人网站、HTML、Dreamweaver、Firework、Flash

The HTML website design

Abstract

With the development of the network techniques,the network application has already seeped through each corner of the human society.Websites,to sevre as the support of the cyberspace,became a focus which people pay more attention.The government makes use of website to advertise its administrative programme,make it an open traffic what communicate with common people increasingly;the enterprises make use of website to advertise its image,to exploit infinite business opportunities;the particular person use website to display their personality character,to build a bridge for connection and contaction with others.This article describes personal website which is made by using strong function of the software Dreamweaver and Hyper Text Mark Language,offer the interface and programs through Windows system and web environment.

Key word:

Personal website HTML Dreamweaver Firework Flash

目录

一、引言1

二、HTML语言和设计静态网站的工具2

（一）HTML语言2

（二）设计工具3

1．Dreamweaver3

2．Firework3

3．Flash4

（三）小结4

三、个人网站的设计和功能5

（一）网站的主题和素材5

（二）网站的布局设计5

（三）各个页面的设计和相关的代码6

1．主页6

2．从页8

（四）小结11

总结12

致谢13

参考文献14

---

一、引言

中国互联网历经10载的发展，商业网站无处不在，同时更有数以千万计的个人网站，顽强地生存着，等待未来突破的机会，据不完全统计中国个人网站已突破三千万。在网络高速发展的今天，网络带给大家的便利，是很明显的。网络上的网站分为很多种，主要是商业网站和个人网站，那什么是个人网站呢？人网站是指单个或多个以及团队成员因为兴趣相投共同建设一个非赢利性质的网站,但其收入也包括广告联盟等。一般个人网站一般是个人或者团体制作，有自己的空间，域名。

个人网站的设计过程先要了解设计的工具以及设计所需要的语言代码。这个设计主要是展现给大家一个简单的个人网站，了解设计网站的过程，以及实现的功能。本设计的主要页面包括主页，以及一些从页，从页主要有故事页面、像册页面、祈愿页面、留言页面等，再就是从页所包括的一些跳转页面。

设计的过程中，用到了Dreamweaver、Fireworks、Flash等软件，利用Dreamweaver的强大功能实现设计过程中的代码；而Fireworks展现给大家的是它可以快速简单的制作处理一些图片、导航条和一些按钮的强大的功能；再就是Flash，快速制作一些小动画，简单的文字动画，一些透明动画，使页面给人以从起来的感觉。设计的主要语言是HTML，通过语言的功能，使一些设计更加简单。

---

二、HTML语言和设计静态网站的工具

（一）HTML语言

HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。HTML语言是一种标记语言，简单易学。用HTML语言编写的网页实际上是一种文本文件，它以.htm或.html为扩展名，我们可以使用任何文本处理软件编写。

HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作.HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准.用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作ＷＷＷ（是World Wide Web的缩写，也可简写WEB、中文叫做万维网) 的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器显示出效果。HTML只是一个纯文本文件。创建一个HTML文档，只需要两个工具，一个是HTML编辑器，一个WEB浏览器。HTML编辑器是用于生成和保存THML文档的应用程序。WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。

所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术----通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接。

链接到HTML超文本文件时需要用到的一些标签。在HTML中每个用来作标签的符号都是一条命令、它告诉浏览器如何显示文本。这些标签均由"<"和">"符号以及一个字符串组成。而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画、播放声音。这些标签符号用“<标签名字 属性>”来表示。

一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置，

（二）设计工具

1．Dreamweaver

Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择萤幕上的颜色可设定最接近的网页安全色。对於选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dremweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。
使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。

2．Firework

Firework也是 Macromedia 公司的产品，是真正的网页作图软件。Fireworks 与 Dreamweaver 结合很紧密，只要将 Dreamweaver 的默认图像编辑器设为 Fireworks ，那么在 Fireworks 里修改的文件将立即在 Dreamweaver 里更新。另一个功能是可以在同一文本框里改变单个字的颜色。当然，Fireworks 可以引用所有的 Photoshop的滤镜，并且可以直接将 PSD 格式图片导入。它是用来画图用的，它相当于结合了Photoshop ( 点阵图处理 ) 以及CorelDRAW (绘制向量图)的功能。网页上很流行的阴影、立体按钮...等等的效果，也只需用鼠标点一下，不必再靠什么KPT 之类的外挂滤镜。而且 Fireworks很完整的支持网页16进制的色彩模式，提供安全色盘的使用和转换，要切割图形、做影像对应(Image Map)、背景透明，要图又小又漂亮，在Fireworks 中做起来都非常方便，修改图形也是很容易的 。不需要再同时打开Photoshop和CorelDRAW...等等各类软件，切换来切换去的了。

3．Flash

Flash是web上重要的动画制作工具，是一种交互式矢量多媒体技术。 Flash的前身是Future Splash，是早期网上流行的矢量动画插件。它是基于矢量的图形系统，各元素都是矢量的，只要用少量向量数据就可以描述一个复杂的对象，占用的存储空间只是位图的几千分之一，非常适合在网络上使用。同时，矢量图像可以做到真正的无级放大。这样，无论用户的浏览器使用多大的窗口，图像始终可以完全显示，并且不会降低画面质量。

它使用插件方式工作。用户只要安装一次插件，以后就可以快速启动并观看动画，而不必像：Java那样每次都要启动虚拟机。由于Flash生成的动画一般都很小，所以，调用的时候速度很快。 Flash plug-in也不大，只有150KB左右，很容易下载并安装。

它还提供其他的一些增强功能。比如，支持位图、声音、渐变色、Alpha、透明等。拥有了这些功能，完全可以建立一个全部由Flash制作的站点。

Flash影片其实是一种“准”流（stream）形式文件。这就是说，在观看一个大动画的时候，可以不必等到影片全部下载到本地再观看，而是随时可以观看，哪怕后面的内容还没有完全下载到硬盘，也可以开始欣赏动画。

（三）小结

本章主要介绍了，HTML语言和设计静态网站的工具，如Dreamweaver、Firework、Flash，通过设计工具和语言的配合，可以容易的设计出一个网站。

三、个人网站的设计和功能

（一）网站的主题和素材

网站的主题也就是网站的题材，网站设计开始首先遇到的问题。本次设计的网站，是一个个人网站，名称是蓝天和绿地，在网站里创造属于自己的一片天空！选好了主题，那就围绕着主题，选择自己需要的素材，主要有图片和文字资料。图片主要有背景图片，导航图片，以及一些对象的图片，通过利用Firework图象处理工具对图片进行处理制作。主要的图片如下图所示：

文字材料就是网站里面要展现给大家内容，就是网站中想让别人看到的一些文字资料。主要的文字资料就是搜集的故事。

（二）网站的布局设计

设计版面布局就象传统的报刊杂志编辑一样，将网页看作一张报纸，一本杂志来进行排版布局。这次设计的网站，是左右布局的，所有的页面都采用了这个布局，如上图所示。

这个网站设计的主要颜色主要有3种：绿，白，棕。网站主要有2个导航，如上图所示的，在左布局和右布局的中间部分都有导航条。网站主要采用一个大的背景图片来总体规划了主要的布局分布，再就是利用表格的功能来细致的把每一部分都分割出来，填充上与其想要展现给大家的相关内容，使布局清晰明了。

在网站的页面里面，插入了2个透明 Flash和一个Flash，使页面更加精彩，更加绚丽多彩。相关的代码是：

<object

classid=" " codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" >

<param name="movie" value=" ">

<param name="quality" value=" ">

<param name="wmode" value=" ">

<embed

src=""quality="high"

pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent">

</embed>

</object>

（三）各个页面的设计和相关的代码

1．主页

主页主要是展现给大家一个整体的目录，主要起到导航的作用，进行链接到别的分页。在页面看来主页主要有三部分的内容，一部分是链接进入故事页面和相册页面；一部分链接是，返回主页，再就是进入收藏，祈愿，留言各个页面；另外一部分是平时比较喜欢访问的网站，主要由平时喜欢看动漫和动画的网站，喜欢的搜索桌面图片的网站，喜欢听的音乐的网站，再就是喜欢的3D动画的人物的网站等组成的。各个链接都会连接到不同的界面，不同的界面有着不同的东西。主页的页面如下图所示：

与设计相关的代码是：

HTML标记分类：

　　文件结构标记(Document Structure Tags)

　　此类标记的目的是用来标示出文件的结构，主要的有：

　　<html>...</html>:标示html文件的起始和终止。

　　<head>...</head>:标示出文件标题区。

　　<body>...</body>:标示出文件主体区

　　区段格式标记(Block Formatting Tags)

　　此类标记的主要用途是将HTML文件中得某个区段文字,以特定格式显示，增加文件的可看度。主要的有：

　　<title>...</title>:文件题目。

　　<hi>...</hi>:i=1,2,...,6,网页标题。

　　<br>:强迫换行。

　　<p>...</p>:文件段落。

　　字符格式标记(Character Formatting Tags)

　　用来改变HTML文件文字的外观，增加文件的美观程度。主要有：

　　<b>...</b>:粗体字。

　　<i>...</i>:斜体字。

　　<tt>...</tt>:打字体。

<font>...</font>:改变字体设置。

文字格式： <FONT SIZE="+5 " COLOR="#00FFFF">文字</FONT>

　　<center>...</center>:居中对齐。

　　链接标记(Anchor Tag)

链接可以说是html超文本文件的命脉，html通过链接标记来整合分散在世界各地的图、文、影、音等信息。此类标记的主要用途为标示超文本文件链接(Hypertext Link)，主要有：

图片调用：<IMG SRC="文件名">

页面跳转：

〈A HREF="文件路径/文件名"></A>　

<a>...</a>:建立超级链接。

　 表格标记(Table Tags)

　　此类标记用制作表格。主要有：

　　<table>...</table>:定义表格区段。

　　<caption>...</caption>:表格标题。

　　<th>...</th>:表头。

　　<tr>...</tr>:表格列。

<td>...</td>:表格单元格。

2．从页

在故事这个页面里的主要的链接有返回主页和转到相册界面，再就是在网站里想要展现给大家故事的链接，在这里主要有4个故事，可以通过点击进入故事，自由自在的看故事。在这里展现的故事，主要是；两封叫人无法拒绝的情书、两只蚊子的爱情、小故事讲道理、8块5毛钱。主要的页面如下图所示：

在每个小故事的页面里，主要的布局和设计都和故事页面相同，但是在显示故事的那部分空间里我运用了表单，通过表单的多行，可以在小的空间里显示更多的内容，使页面给人以简洁、明了的感觉。表单的代码是：

表单标记(Form Tags)

此类标记用来制作交互式表单，主要的有：

<Form>...</form>:表明表单区段的开始与结束。

<input>:产生单行文本框、单选按钮、复选框等。

<textarea>...</textarea>:产生多行输入文本框。

<select>...</select>:标明下拉列表的开始与结束。

<option>...</option>:在下拉列表中产生一个选择项目。

在相册页面里的主要内容是返回主页和故事页面的链接，再就是在网站里展现给大家的相册里的图片，主要在这里分了五花八门，自己的相册，朋友的相册，动漫人物，明星的靓照等几个页面，每个页面都相互对应着不同的页面，展现出的也是不同的照片和图片，给人以不同的视觉感受。如下图所示：

在主页点击祈愿，就可以链接到祈愿页面。祈愿页面的内容主要是有一个测试，来测试你的人格是怎样的，在测试之前先许愿，通过选择的动物、颜色来判断你的人格。其他的内容就和前面介绍的页面一样了，在这里我就不重复介绍了。 祈愿页面的布局和设计，也和前面的几个页面一样，在这里我也不多说了。文字区域，利用的是和显示故事页面一样的多行表单。如下图所示：

表单的代码我在这里也不说了，和故事页面的一样。

留言页面也是在主页里面，点击留言图片就可以链接到。我的留言页面，没有设计数据库，而是直接通过EMAIl链接，把留言转到了直接发送邮件与联系。这样简单又明了，也容易操作，设计也简单。

代码是：

<a href=mailto: > </a>

其他的页面，主要就是喜欢的链接，可以通过点击图片和文字进入一些与图片和文字有关的网站，主要链接的有动画，桌面图片，音乐，三维图片等。喜欢的链接这些对象是通过表格来进行布局的，通过表格分割插入图片，再通过图片进行超链接，链接到与其相关的网站，相当于友情链接。

（四）小结

这一章主要介绍了所有页面的设计，内容，以及相关的代码。通过Flash制作的动化和透明插件，Fireworks的图片处理，再加上一系列的代码，使设计更加简单，使页面更加吸引人，让人看了比较舒服。

总结

通过这次的设计，制作一个个人网站，只要利用好设计工具和了解HTML的语言功能，还是可以轻松的设计出来的。想要设计出一个漂亮的功能强大的个人网站，那要把所有软件的功能，都能很好的发挥出来，那样就需要很多专业的知识。

设计过程中，需要的软件工具主要是Dreamweaver、Fireworks、Flash等，它们都有自己特有的强大功能，Dreamweaver主要是通过界面的事物设计来生成HTML语言代码，使设计更加简单，再就是它可以快速简单的连接到Fireworks和Flash，两个强大的图片处理制作工具和简单快速的制作动画透明Flash。Fireworks，它结合了一些图像处理软件的功能，使图片处理制作更加简单；而Flash支持位图、声音、渐变色、Alpha、透明等功能。

设计虽然完成了，但是还是存在着一些问题，主要是没有设计与数据库相关的功能，留言功能没有链接到数据库。设计的留言功能，链接的是个人的网易邮箱。再就是设计并不是很完美，一些功能并没有实现，一些页面也没有设计链接，也没有注册用户界面。想要展现一个功能多多的网站，还是需要学习更多的知识。

致谢

首先衷心感谢我的指导老师董斌老师，在这几个月的时间里，他对我论文的调研、论文的进度都给予了认真的指导，在论文的撰写过程中也提出了许多中肯的意见。董斌老师热心的辅导、严谨的作风给我留下了深刻的印象。值此论文完成之际，谨向指导老师致以诚挚的敬意和衷心的感谢。

另外，在论文期间，我还得到了院领导、各位老师热心帮助，在此表示诚挚的感谢。

感谢我的父母、亲人对我的支持，他们在生活中照顾我，在精神上给我动力，使我能够顺利完成学业。

参考文献

[1] 山东省教育厅组编 《计算机文化基础》 2004年7月第1版

石油大学出版社 2004年7月 引用部分：290页---316页

[2] 刘艳丽 主编 《网页设计与制作实用教程》2003年7月第1版

高等教育出版社 2005年5月

[3] 作者：（美）塞尔达曼（Zeldman J.） 译者：傅捷 王宗义 祝军

《网站重构(应用Web标准进行设计)》 电子工业出版社 2005-4出版

[4] 作者：马月 《网站界面设计》 北京理工大学出版社2006年8月第1版

[5] 作者：张贵明 《网站与网页设计》 清华大学出版社

[6] 作者：仲治国 《巧用整站程序建网站》 电子工业出版社2007年1月第1版

[7] 作者：姜韡 吴涛 《网站全程设计技术》 清华大学出版社 2003年5月第1版

[8] 作者：严亚丁、(挪威)科特 《网站规范化设计实例精讲》

人民邮电出版社 2005-10

[9] 作者：(美国)法伊夫等著 译者：汪青青 《无线网站管理实战》科学出版社

[10] 作者：何秀明 王伟光 郑庆荣 等 编著 《Dreamweaver8网页设计与热门网站制作》

电子工业出版社 2007年4月第1版