孙世瀚个人网站设计唐红杰Word文档格式.docx

孙世瀚个人网站设计唐红杰Word文档格式.docx

《孙世瀚个人网站设计唐红杰Word文档格式.docx》由会员分享，可在线阅读，更多相关《孙世瀚个人网站设计唐红杰Word文档格式.docx（17页珍藏版）》请在冰豆网上搜索。

Abstract

Withthedevelopmentofsocietyandeconomy,computerhasbeenappliedtovariousfieldsofsociallife.Atthesametime,theInternetasaninformationcommunicationBridgesconnectedtotheworldofcomputertechnology,andwebsiteasmainformsofnetworkinformationandisthemaincarrierforInternetinformation,itsanditsimportantpositionintheInternet,anditsanditsimportantrole.Bothathomeandabroadtorapidlydevelopandexpand,andtakenseriouslybypeopleandattention.TheInternethascompletelychangedtheworld,theworldoftheInternetthereisalimitlesspossibilities,andinthiscase,allwalksoflifeanditsindividuals,units,factories,enterprisesandsoonontheInternettobuildtheirownnetworkinformationplatform,toprotectournetworkresourcesandopenuptheirmarketsandconsumergroupsontheInternet,andconstructtheirowndigitalworldandstrengthenpeoplecommunicateindifferentregionsworldwide,andsoonactivitywillshowincreasinglyimportant.Thenallkindsofwebsiteshavemushroomedmiraculouslyappeargoodandevilpeoplemixedup,andthegoodandbadareintermingled.IncreasinglyriseoftheInternetandasaWebpageasthecarrierofthespreadandapplicationofnetworkinformation,makesthewebsiteconstructionandWebpagecreationdevelopmentspace,toalargeenterpriseproductssalesandafter-salesserviceandsolutions,andapersonalWebpagedevelopment,various,colourful,websiteconstructionandWebpagecreationhasbecomethehottesttopicinthefieldofcomputernetworks.

Basedontheneedsofthesocietynowadays,thispapermainlyintroduceshowtocreateastaticwebsite.Andintheprocessofestablishingpersonalwebsitegraduallyovertheyearsattheuniversityofunderstandingandstrengthenthelearningofallkindsofknowledgeaboutcreatingawebsite.Inmypersonalunderstanding,tocreateadistinctivepersonalwebsite,canhavetheirownpersonalityandcharacteristics.Inthiswaycanattractpeople.Onlyonegoal,thatis,doyourself.

Keywords：

person,Internet,WEB

目录

前言1

第1章网站制作的基础知识2

1.1建站工具2

1.2网站建设的三个阶段2

1.3网站设计步骤2

第2章制作网页4

2.1建立站点4

2.2制作首页4

2.2.1页面设置4

2.2.2网页布局5

2.2.3插入图像6

2.2.4插入多媒体6

2.2.5插入文本7

2.3建立子网页7

第3章网页链接8

3.1文本链接8

3.2图像链接8

3.3邮件链接9

3.4锚点链接9

第4章HTML语言11

4.1HTML语言结构11

4.2网页的基本代码11

4.3表格的基本语法12

4.4超链接代码12

第5章网站维护和测试13

结论14

致谢15

参考文献16

前言

人类已进入21世纪,科学技术突飞猛进,经济知识和信息产业初见端倪,特别是信息技术和网络技术的讯速发展和广泛应用,对社会的政治,经济,军事,文化等领域产生越来越深刻的影响,也正在改变人们的工作,生活学习,交流方式。

信息的获取,处理,交流和应用能力,已经成为人们最重要的能力之一。

在不久的将来知识经济将占世界经济发展的主导地位,国家综合国力和国际竞争能力越来越取决于教育发展,科学技术和知识创新的水平,教育在经济和社会发展过程中将呈现出越来越突出的重要作用。

随着Internet的出现，网络正在改变整个世界，由于Internet具有传播信息容量极大、形态多样、迅速方便、全球覆盖、自由和交互的特点，已经发展成为新的传播媒体，而将教育和网络相结合，将会更好的推动教育的发展。

现在不仅很多大学和众多企业部门都已经建立了自己的网站，而且个人网站也如雨后春笋般大量的出现，通过计算机网络实现宣传、交流及资源的整合

第1章网站制作的基础知识

1.1建站工具

编辑网页的工具有很多，但是我们一般用的是Macromedia公司的网页制作三剑客来制作网页。

三剑客分别为DreamweaverCS3、fireworks、flash。

1.2网站建设的三个阶段

（1）网站的定位

即网站设计的最终目标及指导方针。

确立网站的主题，解决为谁设计、吸引谁，交流什么。

（2）制作网页

通过网页设计体现网站整体协调一致的风格。

网站的色彩基调、配色方案、页面色彩的格调、页面构图及图片、动画的处理等都要反复研究。

方便的导航设计使用户易于访问站点中的资源。

（3）网站的发布与维护

完成对网站所有文件的测试并上传到服务器，进行网站的推广和宣传，建立信息的收集反馈系统，及时更新网页。

1.3网站设计步骤

（1）设定网站主题并搜集资料

分析网站的访问对象是什么样的群体，确定网站要为访问者提供什么样的服务。

围绕网站设计要达到的目标，进一步决定网站展示的内容和网站要实现的功能。

（2）建立站点的目录结构

用来分类保存网站中的不同的资源，精心设计的网站目录结构有利于网站类容的扩充和移植需要。

很多初学者往往不注意建立站点的目录结构，所有的文件都保存在一个目录中，这给今后的网站维护和扩充带来了很大的困难。

例如，files保存非index之外是文件，images保存图片文件，sounds保存声音文件等等。

（3）建立网页的链接关系

网页的链接结构要层次清晰、访问方便快捷，就要设计网站中网页的链接关系。

用最少的点击打开网站内的任何一个网页，为用户提供最便捷的服务。

（4）页面设计与网页制作

网站图标、网页标题、导航栏设计、各页风格、页面规划、便捷的链接、合理使用框架、巧用背景色、合适的图片、网页空白。

（5）网站测试

已经建好的一个设计精美的网站在发布之前要进行严格的测试。

如果在测试过程中发现了错误，就要及时修改，在准确无误后，可正式在Internet上发布。

（6）网站发布

把制作好的网站发布到自己的服务器系统上，也可以使用上传工具把网站发布到ISP提供的虚拟主机上。

在国外或国内网站提供免费的主页空间和域名，上传后就可以使用浏览器访问自己的网站了

（7）推广宣传与后期维护

网页上传后，及时更新网站内容，为浏览者提供丰富、及时的信息。

网页的更新速度是衡量一个网站的主要目标。

同时为了增加网站的访问量，要采用各种方法加以推广。

例如在搜索引擎上注册，发布网络广告提供免费服务或者使用传统的促销媒介等等方式来推广网站。

第2章制作网页

2.1建立站点

选择“站点”，单击“管理站点”，单击“新建”，选择站点。

如图（2—1）：

图2-1站点的选择和设计

在按上图完成所填部分，在面板组就会出现站点等文件夹了。

在右边的面板组中选择“站点”文件名，右击“新建文件”，命名为“index”，完成首页的命名。

2.2制作首页

2.2.1页面设置

首先双击“index.html”,进入页面的编辑窗口。

右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。

在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项，右侧区域则显示各类中可以设置的项目。

首页设置的属性如图（2—2）所示：

图2-2CSS样式的选择

2.2.2网页布局

在网页布局中一般采用表格来进行布局。

下面简单介绍下表格的布局方式。

通过单击“插入”面板中的“常用”选项中的“表格”来打开“表格”对话框，对话框可分为“表格大小”、“页眉”、“辅助功能”三部分。

对表格的各项属性设置如图（2—3）所示：

图2-3插入表格

2.2.3插入图像

图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。

首先将游标停留在要插入图像的位置，通过单击“常用”栏中的“图像”的下拉按钮，单击第一个“图像”按钮，随即弹出“选择图像源文件”对话框。

从计算机磁盘中选择想要插入的图像文件。

如图（2—4）所示：

图2-4选这图片文件

2.2.4插入多媒体

将光标移到要插入Flash动画的位置，选择“插入”面板中的“常用”选项卡单击“媒体”右侧的命令，再单击第一个“Flash”选项。

再从打开选择文件对话框中选择你所需要的Flash动画（*.swf），调整Flash动画的大小，既可以手动调整，也可以在下面的属性里添上我自己事先设置好的大小，如图（2—5）所示,在浏览器中，Flash动画才可以被看到，要想看看效果的话，只有按F12预览下。

图2-5选择图片插入媒体

2.2.5插入文本

文字是人类语言最基本的表达方式，在网页中，文本内容也可以说是重要的组成部分，它是最关键的因素。

插入文本的两种方式：

一种是在网页编辑窗口中直接用键盘敲入文本；

另一种是复制文本的方式。

直接使用Dreamweaver的文本复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作，具体步骤如下：

打开文本编辑软件（如MicrosoftWord），选中要复制的文本，执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C，之后切换回Dreamweaver,将游标停留在插入文本的位置，执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。

2.3建立子网页

制作子网页的一般步骤和首页的步骤差不多。

如果说你的首页中有标题的话，那么在子网页中也一定要和首页的位置是一样的。

在子网页中一般需要大量的文字叙述或者图片，这就需要做好细节工作了。

第3章网页链接

网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？

这就是本章要讲的内容----网页的“链接”。

“链接”，又称“超链接"

它作为网页的桥梁。

网页中的很多对象都可以加入“链接”属性。

在Dreamweaver中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文本链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“锚记链接”、“文件下载链接”和“跳转菜单”，共8种。

下面我所介绍将是在本网站中所能用到的链接方式。

3.1文本链接

“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。

接下来结合我的个人网站为实例，来讲解如何为文字建立“链接”。

将已经制作完成的首页的各个子网页准备好。

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

观察“属性面板”，其中包括一个“链接”文本框和“目标”文本框。

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

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

（“目标”文本框有四个选项。

分别为-blank、-parent、-self或top。

）点击“blank”表示链接目标出现在新打开的窗口。

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

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

3.2图像链接

“图像”也是常被使用的链接媒体，它和“文字链接”非常相似。

为图像加入链接，首先应该在网页中插入“图像”，有关插入“图像”或“导航条”按钮的内容，接下来以我的网站为例，讲解如何建立“图像链接”。

首先仍然要准备好已经制作完成的首页和各个栏目的页面在Dreamweaver中打开网站的首页，之后选取要制作“链接”的图像。

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

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

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

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

如果有需要，在栏目页面中制作“返回首页”的链接，使得单击后可以跳转回首页。

3.3邮件链接

为了保持访问者与网页制作人员之间的联系，应该建立指向电子邮件的链接。

选择要链接的元素。

单击“插入”面板“常用”选项卡中的“电子邮件链接”图标，在打开的对话框中输入E—mail地址就行了。

如图（3—1）所示。

或者在“链接”文本框中输入“mailto:

”加上邮件地址也可以的。

按下Ctrl+S保存网页，再按下F12预览，单击E—mail地址，看看能不能跳转到空的网页。

图3-1邮件连接

3.4锚点链接

锚点是在网页文档中设置的标记，这些标记通常放在文档的特定处。

锚点链接可以快速将访问者带到指定的位置。

创建到锚点的过程分为两步：

第一步创建命名锚记；

第二步创建到命名锚记的链接。

首先将光标放在你想要插入锚点的位置。

选择菜单“插入”中的“命名锚记”，在弹出的对话框中输入你想命名的锚记的名称，如图（3—2）所示。

锚记的名称不能为汉字。

单击“确定”按钮。

然后在网页文档中选择要建立链接的文本，之后在“属性”面板的“链接”文本中输入“#锚记名称”。

按下Ctrl+S保存网页，再按下F12预览，看看单击你所锚点的文本，能不能跳转到你想要的位置。

可以的话，至此，整个“锚点链接”的实例就全部完成了。

图3-2命名锚记

第4章HTML语言

4.1HTML语言结构

HTML是超文本标记语言的缩写。

它使用一些写在<

>

中的标记对文本格式、特性等进行描述，形成的文件称为超文本文件。

通过浏览器解释标记的含义，显示文件的内容。

下面来介绍一下网页的HTML代码结构:

<

!

......>

标记用于定义注释的内容，注释的内容在浏览器中不显示。

html>

......<

/html>

标记定义HTML文件（网页），用于浏览器识别网页文件。

网页文件的所有内容都在<

标记中。

head>

/head>

标记定义网页的头部信息。

头部定义包括网页的简介和为搜索引擎提供相关信息等内容。

title>

/title>

标记用来定义网页的标题，网页的标题显示在浏览器的标题栏中，也用于搜索引擎的按标题查找。

此标记位于<

body>

/body>

标记中定义的内容是页面正文。

标记中包含的文本如果不设置格式标示符，浏览器将忽略所有空格和回车。

4.2网页的基本代码

hn>

/hn>

标题标记，添加在文本的两边会使文本显示出不同的标题风格。

p>

/p>

段落标记，定义文本的段落。

br>

换行标记。

hr>

水平线标记，使网页中出现分隔线。

address>

/address>

标记用来定义网页页脚的版权信息，其中内容是倾斜的。

center>

/center>

标记是在该标记范围内的内容强制居中对齐。

4.3表格的基本语法

tablewidth="

75%"

border="

1"

tr>

td>

&

nbsp;

/td>

/tr>

/table>

表格的所有内容都在<

table>

中，表格的行数有<

标记的个数确定，表格的列数有<

的个数所确定。

单元格中的内容都在<

中。

4.4超链接代码

超链接是通过<

a>

/a>

标记定义的，定义文本超链接或图片超链接是必须指定所链接的目标位置。

通过<

标记的href属性的值来确定链接的目标位置。

格式为：

ahref=目标页面文件名>

描述文字<

文字链接<

ahref-“dh.html”target=”-blank”>

href:

是<

标记的一种属性，该属性中的URL等于链接目标文件的地址。

Target:

也是<

标记的一种属性，相当于Dreamweaver“属性面板”中的“目标”，它的值等于-blank,效果是在新窗口中打开。

如果想要进行图片超链接的话，只需要像这样就可以了。

ahref="

dh.html"

target="

-blank"

imgsrc="

images/dh.jpg"

的标记中插入图片文件和该图片文件所链接的目标位置。

第5章网站维护和测试

网站建成后并不意味着网站建设的结束，网站内容需要不断更新，并且网站发布前要进行细致周密的测试，以保证正常浏览和使用。

主要测试内容：

（1）、服务器稳定性、安全性。

（2）、程序软件的测试。

（3）、网页兼容性测试，如浏览器、显示器。

（4）、根据需要的其他测试。

网站发布后也要定时的对网站进行维护，以保证网站的正常浏览和使用。

主要的维护内容有：

（1）、服务器及相关软硬件的维护，对可能出现的问题进行评估，制定响应时间。

（2）、数据库维护，有效地利用数据是网站维护的重要内容，因此数据库的维护要受到重视。

（3）、内容的更新、调整等。

（4）、制定相关网站维护的规定，将网站维护制度化、规范化。

结论

在本次设计的全过程中，我对三年所学的知识有了一个比较系统的认识和理解。

涉及了各方面的知识，大大扩展了我的知识面，同时是我学会了如何使用所学的知识去解决一些实际的问题。

在设计中我深知自己掌握的知识还远远不够，掌握的一些理论知识应用到实践中去，总会出现这样或那样的问题，不是理论没有掌握好，而是光知道书本上的知识是远远不够的，一定要把理论知识和实践结合起来。

把学到的知识应用到时间中去，多做多练，才可以把理论的精华发挥出来。

知识不是知道，了解就好，一定要去应用它，发展它，让它在现实生活中得到充分的应用，从而解决一些问题，这才是学习的根本目的。

而且知识又不是单一的，它是互相联系的，学科与学科之间都有着内在的联系。

计算机是一门非常复杂且庞大的学科，一项课题往往需要多项技术才可以完成的。

在设计阶段，通过对课题的深入分析与研究，迫使我对技术有了一定的了解。

计算机技术的高速发展，使我深深地认识到只有不断的加