第一篇：网站设计论文目录

目录

摘要................1

第一章 诸论............2

1.1设计思想..............2

1.2开发工具的选用及介绍............2

1.2.1

1.2.2

1.2.3

1.2.4

1.2.5HTML语言................2Macromedia DREAMWEAVER MX............2ASP.net..........3ADO.net..........5Microsoft SQL Server...........6

第二章 网站总体分析与设计..............9

2.1 网站结构分析................9

2.2 页面设计构思................9

2.3 数据库设计..........10

第三章 网站制作过程...............11

3.1 静态页面制作...............11

3.2 建立数据表..........15

3.3 Asp.net代码编写..........16

3.3.1 最新产品................17

3.3.2 产品信息................19

3.3.3 产品信息上传............21

3.3.4管理员登陆、注销...............24

3.3.5 在线留言的实现................26

第四章 系统使用说明与安装..............29 参考文献.................30 致谢...............31

第二篇：网站毕业设计论文目录

目录 前 言........................................................................................................................................................................2 第一章 绪论.............................................................................................................................................................4 1.1 网站建设的研究背景.................................................................................................................................4 1.2 网站建设的一般流程及其原则...............................................................................................................5 第二章 网站需求分析...........................................................................................................................................8 2.1 需求分析活动..............................................................................................................................................9 2.2 用户调查活动..............................................................................................................................................9 2.3 市场调研.....................................................................................................................................................10 第三章 网站设计工具.........................................................................................................................................11 3.1 DREAMWEAVER制作工具................................................................................................................................11 3.2 ADOBE PHOTOSHOP软件工具.........................................................................................................................12 3.3 HTML语言......................................................................................................................................................12 3.4 DIV+CSS..........................................................................................................................................................13 3.5 JAVASCRIPT代码...........................................................................................................................................13 3.6 淘宝客.........................................................................................................................................................15 第四章 网站总体规划........................................................................................................................................17 4.1 网站首页设计............................................................................................................................................17 4.2 网站内容设计............................................................................................................................................17 4.3 网站功能设计............................................................................................................................................18 4.4 网站结构设计............................................................................................................................................18 4.5 网站页面可视化设计...............................................................................................................................18 4.6 网站风格.....................................................................................................................................................18 4.7 网站的栏目和版块设计..........................................................................................................................19 第五章 网站页面实现........................................................................................................................................20 5.1 网站功能分析............................................................................................................................................20 5.2 首页设计.....................................................................................................................................................20 5.3 内页设计.....................................................................................................................................................23 5.4 部分技术实现............................................................................................................................................32 总 结........................................................................................................................................................................35 致 谢........................................................................................................................................................................36 参考文献.................................................................................................................................................................37

第三篇：个人网站设计论文

秦皇岛职业技术学院信息工程系

分类号： TP319

秦皇岛职业技术学院 课程设计（论文）

个人博客网页设计论文

学生姓专班指导教指导教师职名 王飞飞 业 计算机应用技术 级 1100103 师

称

目录

摘要 …………………………………………………………………………………2 前言 …………………………………………………………………………………3 第一章 关于网络的知识.............................................4

秦皇岛职业技术学院信息工程系

1.1 INTERNET的简介.................................................4 1.2 WWW的简介....................................................4 1.3网页基本构成元素..............................................5 1.4 制作网页前的准备..............................................5 第二章 网站制作实战...............................................6 2.1 站点..........................................................6 2.1.1 创建站点..................................................6 2.1.2 创建站点内容..............................................6 2.2 首页..........................................................7 2.2.1 设置首页布局和页面属性....................................7 2.2.2 查看和编辑头内容..........................................9 2.2.3 插入图像..................................................9 2.2.4 插入FLASH相册...........................................10 2.2.5 插入文本.................................................10 2.3 创建其它网页.................................................11 第三章 建立网页链接..............................................12 3.1 文字链接.....................................................12 3.2 图像链接.....................................................13 3.3在HTML语言中建立网页链接....................................14 第四章 网站测试与维护 …………………………………………………………17 结论………………………………………………………………………………18 参考文献 ……………………………………………………………………… 19 致谢………………………………………………………………………………20

摘 要

本论文主要是对个人网站的建立进行研究和探讨。作品的主要技术指标包括：

1、制作出一个具有静态技术的“个人网站”；

2、在制作的过程中，加强和 1

秦皇岛职业技术学院信息工程系

深化以前所学的关于网页设计的方法，同时更好的理解参考资料上的方法、理论和更好的利用Fireworks、Flash制作网站需要的一些图片和影片。

本设计的主要内容包括：

1、个人网站的设计思想，整体规划及相关基础知识；

2、个人网站的首页设计，包括简单的HTML语言及效果图；

3、个人网站的调试。

网页规划包含的内容很多，如网页的结构、栏目的设置、网页的风格、颜色搭配、版面布局、文字图片的运用等，也只有如此制作出来的网页才能有个性、有特色，具有吸引力。

网站主题就是所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，不可能像单独的网页那样做得内容少而单一。所以必须要找准一些自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给人留下深刻的印象。

关键词：技术指标

基本设计内容

网站规划 网站主题

前言

随着二十一世纪新兴科技的飞速发展，如今的交流与交往不再是那么的单调，看如今不曾再有五百里加急文件的传送，看如今已很少在出现写信、寄信。人们正在运用现世纪的高科技来增加自己的交际圈，来发展自己的人脉关系，秦皇岛职业技术学院信息工程系

同时，其它人也是通过高科技，悄悄的就能很容易地去了解，关注一个人。

正是因为人们的这些需求，所以出现了互联网，正是因为人们的需求，所以出现了如今的网络时代，网络通讯工具。来方便人们的交往，交际与沟通。也正是因为人们的需求，所以出现了个人博客，通过一人简单的网页来展现自己的独特魅力，自己的与众不同。真正的做到了“足不出户，便知天下人”。

互联网加大了我们了解世界的眼界，缩紧了人与人之间的距离，这就更容易的使我们走上了信息化的道路。

我觉得一个网站的开始，应该有一个大体的规划，网站的布局是最重要的，它起着一个网站成功与否的决定性作用，因为布局的好与坏，带来的是网站整体上的美观效果及应用。网站内容上也能决定着网站成功与否，一个网站上的每个字眼都可能决定着这个网站，因为你不知道哪个字就是吸引别人的内容，就是大家都追捧的话题，就是很潮的事物，所以内容上一定要谨慎。再有，就是网站的图片，一定要确准好路径，以免图像的丢失而不能再网站中显示，其次就是链接，在Dreamweaver中提供了很简单的链接命令，根据其提示操作即可。

我做了一个简单的个人博客的网站，通过这个网站能让大家更深的了解我，同时更重要的是锻炼自己的实践能力，巩固自己学习的知识，弥补自己学习的不足。

第一章 关于网络的知识

1.1什么是Internet Internet是由众多的计算机网络互联而成的互联网，它覆盖了全世界各地，3

秦皇岛职业技术学院信息工程系

它是采用开放系统协议的计算机通讯网络。然而，Internet不仅仅是计算机的互联网，它还是全球最大的信息资源宝库，它提供了包括科研、教育、文化娱乐、商业和信息交流等各种各样的服务，使得世界范围内的人与人之间的交流在时间和空间上变的更小了。

Web页浏览：这是目前利用最广泛、最直接的互联网服务，通过浏览WWW（万维网）中的网页，可以了解世界各地的新闻，查看最新的股市行情，最新的娱乐动态、科技发明，找到众多的就业信息„„几乎想找到什么样的信息，就有什么信息。正是有了WWW、Internet才会变得如此丰富多彩，才能走进千家万户。1.2 WWW的简介

WWW的全称为World Wide Web，含义是“环球网”，又称“万维网”、3W、Web。WWW是一个基于超文本（Hypertext）方式的信息检索服务工具。我们上网浏览到的网页就是这样的超文本，也就是HTML(Hypertext Mark-up Language,超文本标记语言)文件，这些网页檔被放置到WWW服务器上，并且都有一定的地址。当我们想浏览某个网站时，首先要在计算机上安装浏览器，如

Internet Explorer或Netscape，然后在浏览器中输入网站的地址（网址），就可以进入网站进行浏览。在这些网页中，都有超连接，当将鼠标指针移动到某个地方（如文本或图像）时，鼠标指针就会变成一个小手形形状，单击它就可以连接到另个网页中，从而使得浏览者能在不同的信息之间动画和声音等信息。通跳转，我们之所以能在Internet的海洋中穿梭自如，正是超连接的功劳。

秦皇岛职业技术学院信息工程系

1.3网页基本构成元素

要学会制作网页，首先需要了解网页都是由什么元素构成的。文字：文本是构成网页的基本元素。一个最简单的网页可以只有几行文本。图片：正是有个各种美丽的图片，网页才变得多姿多彩。动画：如今，网页上的动画越来越多，最常用的有GIF动画、Flash动画等。超连接：如上所述，超连接几乎是必不可少的。一个没有超连接的网页，就如同汪洋大海中的一座孤岛，失去了与外界的一切联系。其它元素：还可以在网页中添加声音、视频等元素。1.4 制作网页前的准备

计算机必备：计算机速度够快，最好能够上网。操作系统：Windows 98/NT/Me/2000/XP.其它软件：看图软件ACDSee、图像处理软件Photoshop、上传工具CuteFTP、Fireworks、动画软件Flash等。

秦皇岛职业技术学院信息工程系

第二章 网站制作实战

2.1 站点 2.1.1 创建站点

要制作一个网站，第一步操作都是一样的，就是要创造一个“站点”，从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”，之后再选择其中的“站点”，再次弹出一个对话框，在文本框中输入自己已经企化好的网站名称“my web”。填好后，单击“下一步”，进入下一个步骤。由于我要做的是一个静态的网页，所以选择上面的一项“否，我不想使用服务器技术。单击“下一步”，进入下一个步骤。在此选项中有两个选择，选择推荐的“编辑我的计算机上的本地副本，完成后再上传到服务器”。底下的文本框允许在本地磁盘上指定一个文件夹，Dreamweaver将在其中储存站点檔的本地副本。单击该文本框后面的文件夹图示，之后单击“下一步“，进入下一个步骤。这一步是如何设置连接到远程服务器，弹出式菜单中有6中选择，这里选择“无”。而后“下一步”再“完成”，即可。2.1.2 创建站点内容

站点创建完成后，就可以创建Web页来填充站点了。在“右侧浮动面板组”中选择“檔/檔”面板，在弹出的菜单中选择“新建文件”，新建一个档后将其命名为“index.htm(或index.html),它就是未来的首页。

秦皇岛职业技术学院信息工程系

2.2 首页

2.2.1 设置首页布局和页面属性

一、设置首页布局

每个网站都会有一个首页，就功能上而言，它代表着一个网站的风格与特色，就网站架构上而言，它代表了网站的第一层架构，首页是打开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视Server端的设置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的居多。当然，后缀名为html也是正确的。具体设置方法是：右健单击“檔”浮动面板中的index.htm,在弹出的菜单中选择“设成首页”。操作步骤：

1、在“插入快捷栏”的“布局”分类中，单击“布局表格”按纽。

2、将变成“+”形状的鼠标游标放到编辑中网页上，在要绘制的地方进行拖动就可以进行创建了。（如果绘制的是第一个表格必须从网页的最左上角开始绘制）。“index”表格布局如下图：

秦皇岛职业技术学院信息工程系

二、设置首页的页面属性

首先双击“檔”浮动面板中的index.htm,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。

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

“index”首页设置的属性如下图所示：

秦皇岛职业技术学院信息工程系

2.2.2 查看和编辑头内容

一个网页文件结构上实际是由两部分组成，头（head）内容和主体（body）内容主体内容（body）是文檔的主要部分，也是包含文本和图像等的可见部分。头内容（head）是除文檔标题外的不可见部分，包含有文文件类型、语言编码、搜索引擎的关键的关键词和内容指示器以及样式定义等重要信息，这些元器并不是每个页面都需要的，例如，可以仅为主页提供关键词。2.2.3 插入图像

图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。首先将游标停留在要插入图像的位置，然后单击“菜单栏”下面“插入快健栏”的下拉表，选择其中的“常用”类，则右侧将会显示该类中可以插入的对象快键按钮。左起第5个即为“图像：图像”按钮，单击它右侧的下拉列表，选择第1项“图像”。随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件，下面的“相对于”下拉表框中，可选择文件URL地址的类型，插入logo图像，如图所示:

秦皇岛职业技术学院信息工程系

最后单击“确定”按钮，即可完成插入图像的操作。2.2.4 插入FLASH相册

在Dreamweaver 8中，除了之前讲到的可以插入“图像”外，还可插入动画、声音、视频，FLASH相册等媒体元素，并且还可以在Dreamweaver自身内插入Macromedia Flash MX2004按钮和文本对象，以及进行相关的后期处理和添加设计备注等操作。在Dreamweaver 8文文件中，可以插入媒体文件包Flash 相册、QuickTime、AVI java、applet Active X控件以及各种格式的音频档。要在浏览器中播放放Flash 相册，必须在浏览器中集成“Flash 播放器（Flash Player）”。操场作步骤：

步骤1、将游标停留在要插入Flash的位置，然后单击菜单栏下面“插入”的下拉列表，选择其中的“FLASH”分类，找到图像查看器命令，单击弹出保存对话框，选择要保存的地方和名称，点击保存。

步骤

2、在Dreamweaver中将会产生一个flash相册，在Dreamweaver中的最右边将会有一个flash元素，一次将flash的属性修改，既可完成一个flash相册的制作。2.2.5 插入文本

文字是人类语言最基本的表达方式，在网页中，文本内容也可以说是重要的组成部分，它是最关键的因素。插入文本的两种方式：一种是在网页编辑窗口中直接用键盘敲入文本。另一种是复制文本的方式。直接使用Dreamweaver的文本复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作，10

秦皇岛职业技术学院信息工程系

具体步骤如下：打开文本编辑软件（如Microsoft Word），选中要复制的文本，它们将反白显示，执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C，之后切换回Dreamweaver,将游标停留在插入文本的位置，执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。这在我的“闲情逸致”中用到很多。2.3 创建其它网页

还有其它的几个网站与主页的制作相同，一个网页是图像和文字的组合。“相册”子页中的FLASH相册的插入和前面的介绍相同。

秦皇岛职业技术学院信息工程系

第三章 建立网页链接

网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？这就是本章要讲的内容----网页的“链接”。“链接”，又称“超链接"（Hyperlink）,它作为网页的桥梁。网页中的很多对象都可以加入“链接”属性。在Dreamweaver 8中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共8种。3.1 文字链接

“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。接下来结合我的个人网站为实例，来讲解如何为文字建立“链接”。操作步骤：

步骤1、准备好已经制作完成的首页的各个栏目页面

步骤

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

3、观察“属性面板”，其中包括一个“链接”文本框。步骤

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

步骤

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

步骤

6、还可以设置一些“链接”的属性，单击“属性面板”中的“页面 12

秦皇岛职业技术学院信息工程系

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

步骤

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

步骤

8、同理，按照以上步骤，再为“闲情逸致”和“个人主页”等其它栏制作指向对应栏目的链接。

至此，整个“文字链接”的实例就全就全部完成了。3.2 图像链接

“图像”也是常被使用的链接媒体，它和“文字链接”非常相似。为图像加入链接，首先应该在网页中插入“图像”，有关插入“图像”或“导航条”按钮的内容，接下来以我的网站“my web“为例，讲解如何建立“图像链接”。操作步骤：

步骤

1、首先仍然要准备好已经制作完成的首页和各个栏目的页面 步骤

2、在Dreamweaver中打开网站的首页，之后选取要制作“链接”的图像。

步骤

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

4、如果有需要，可以在“目标”下拉列表中选择“链接”网页显示 13

秦皇岛职业技术学院信息工程系 的窗口方式，分别为-blank、-parent、-self或-top。

步骤

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

步骤

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

步骤

7、在栏目页面中制作“返回首页”的链接，使得单击后可以跳转回首页。

至此，整个“图像链像”的实例就全部完成了。3.3在HTML语言中建立网页链接

一、文字链接

在HTML语言中用超链接标记指向一个目标。其基本格式为：举个简单的“文本链接”的实例，该实例相对应的HTML代码如下所示。

a href-“index2.html”target=”-blank”>平面设计（新开窗口，-blank)

相册（原窗口，默认为空）

留言

第四篇：公司网站目录

公司网站的相关内容

一、公司首页

1、董事长致辞（另存）

2、图片：包头分公司厂房、生产动态（另存）

3、产品展示（另存）

二、关于我们1、2、企业文化（另存）企业产品、销售领域及模式（另存）

三、新闻中心

1、公司生产的水煤浆添加剂获得ISO9001：2008质量管理体系认证。（文另存，附证书写真）

2、包头分公司二期工程动工。（文另存，附鸟瞰图）

四、产品展示

风格就采纳现有风格，网站建成后，把里面现有的图片置换掉就完成了（梁经理附图片）。

五、技术中心板块

将该板块分成以下6个小版块：分别为添加剂技术、制浆技术、气化技术、燃烧技术、综合技术、相关标准。添加剂技术板块发布跟添加剂有关的文章，制浆技术板块发布跟水煤浆制浆相关的文章，如：气化技术板块发布跟煤气化相关的文章，如：燃烧技术板块板块发布跟水煤浆燃烧相关的文章，如：综合技术板块发布于煤化工相关的文章相关标准

以上每个板块通过不断完善，增加各种学术性文章，使得技术中心板块的内容充实。

六、技术支持板块

湖南东盈煤化工技术研究所概况。（文另存）

七、技术论坛

发动尽可能多的人注册会员，然后各个会员提问、或发表言论，然后其他会员跟帖，或回答问题、或评论，发表意见看法等等。有人气论坛才能搞起来。

八、联系我们

1、湖南总公司

销 售 热线：0730-8237777

办公室 ：0730-821500

1传真：0730-8189000

地址：湖南省岳阳市云梦路1号

邮编：4140002、包头分公司

销 售 热线： 0472-2534468

办公室： 0472-2534496

传真： 0472-253449

3地址：内蒙古包头市稀土高新技术开发区南绕城48公

里处（神华包头煤化工东面）。

邮编：0140103、公司网址：admin@hn-dykj.com

建议增加如下内容：

九、人才管理

招聘信息

十、友好往来

尊敬的客户：

欢迎您访问我们的网站，如果您有什么意见和建议，请在以下列表中填入您的要求，发送给我们，您将会在最短的时间内得到我们的答复。

请您留言：

姓名：

公司名称：

电话号码：

地址：

E-mail地址：

OICQ号码：

友好往来可并入技术论坛）

留言内容：（

第五篇：计算机个人网站设计论文

浅谈计算机个人网站建设及运用

13级 计算机 刘润

摘要：个人网站在现在的个人生活中可以起到非常重要的作用，本文主要介绍了个人网站设计规划，库文件和模板文件的制作，利用模板制作网页，制作网页特效的制作并使用ASP＋IIS＋Access技术实现了我的网站的各种功能，其中和数据库的连接使用到了ODBC技术等。通过此次的学习能快速掌握个人网站设计制作的基本技巧和基本网站建设过程。

关键词：网站；网页制作；模版

引 言

在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们的政治、经济、生活等方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet海洋中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设居Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设、个人网站建设中的重要组成部分，从而倍受人们的重视。个人网站已成为同学们讨论最热门的话题，适用于想通过建立网站交友、突出自我个性的广大网站制作爱好者。

主要介绍了个人网站设计规划，库文件和模板文件的制作，利用模板制作网页，制作网页特效的制作等。通过此次的学习能快速掌握个人网站设计制作的基本技巧和基本网站建设过程。

首页中主要涉及了个人简介，照片匣子，我的作品，友情链接等。

一、个人网站设计规划

随着网络技术的飞速发展，越来越多的个人拥有了自己的网站，为了设计一个有效的，引人注目的站点，应该有计划，有步骤地完成一系列操作。在动手建立网站以前，对网页进行完整，详尽的整体设计是至关重要的。个人网站设计制作主要包括以下几个步骤。

（一）确定网站的主题

对于主题的选择主要按下列三个条件去考虑，本例所讲的是一个个人介绍性质的网站，主体就是介绍个人的相关信息。

1、主题要小而精。一般来说，个人主页的选材定位要小，内容要精。

2、对于个人网站来说主题最好是自己擅长或者喜爱的内容。这样在制作时，才不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有热情，很难设计制作出优秀的作品。

3、主题不要太滥或者目标太高。

如果主题已经确定，就可以围绕主题给该网站起一个名字，网站名称也是网站设计的一部分，而且是关键的要素。

（二）确定网站的目录结构

网站的目录是指建立网站时创建的目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对站点本身的上传维护以及以后的内容的扩充和移植有着重要的影响。

本站只是个人介绍性质的页面，主要是静态的几个页面，因此在建立目录的时候，可以将其中的页面文件直接放在根目录下，所有的图片可以放在images文件夹中。

下面是建立目录结构的建议：

1、不要将所有文件都存放在根目录下。

2、按栏目内容建立子目录。

3、在每个主目录下都建立独立的images目录。

4、目录的层次不要太深。

（三）确定网站的整体风格

风格是指站点的整体形象给浏览者的综合感受，包括站点的标志，色彩，字体，标语，版面布局，内容价值，存在意义，站点荣誉等诸多因素。本站采用白色，绿色等为主的色调，绿色具有清爽，理想，希望，生长的含义,采用这种明亮的绿色，和褐色的沉稳,营造了一个清晰明块，充满无限希望与活力的氛围。

从整体风格的角度来看，下面就是一个好的网站标准：

1、简洁实用：这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所想得到的信息传送给他就是最好的，所以要去掉所有冗余的东西。

2、整体性好：一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的。

3、网站形象突出：一个符合美的标准的网页是能够使网站的形象得到最大限度的提升的。页面用色协调，布局符合形式美的要求：布局有条理，使网页富有可欣赏性。

4、交互式强：发挥网络的优势，使每个使用者都参与到其中来，这样的设计才能算是成功的设计。

（四）确定网站主要栏目和布局

因为每台显示器分辨率不同，所以同一个页面的大小可能出现640*480像素，800*600像素，1024*768像素等不同尺寸。本站的所有页面采用800*600像素制作。

通常版面布局按照如下步骤进行。

1、草案

新建页面就像一张白纸，没有任何表格，框架和约定俗成的东西，可以尽可能地发挥想象力，用一张白纸和一支铅笔将想到的景象画上去，当然用作图软件Photoshop，Fireworks等都可以。这属于创作阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓既可。尽可能多画，几张，最后选定满意的作为继续创作的样板。

2、粗略布局

在草案的基础上，将确定需要放置的功能模块安排到页面上。必须遵循出重点，平衡协调的原则，将网站标志，主要栏目等最重要的模块放在最显眼，最突出的位置，然后再考虑次要模块的排放。

根据本站的主要栏目确定了本站的布局草图。我们可以把顶部导航区作top库文件，在制作其他网页文件时直接引用。在本站中的其他页面风格和栏目相似，如果每次都重新设定网页结构以及导航条，各类图标就显得非常麻烦，可以利用Dreamweaver先制作一个模板，然后利用模板再来创建其他的页面。

二、创建个人网站站点

在制作网页前，要先为网页定义一个个人网站站点，用来存放站点中所有网页文件及附属文件。建设站点前先将配套的素材文件夹复制到本地硬盘上，在本地硬盘上创建个人网站，具体操作步骤如下。

1、选择【站点】|【管理站点】命令，弹出【管理站点】对话框，在【管理站点】对话框中，单击【新建】按钮，然后从弹出的菜单中选择【站点】。如下图3-1所示：

图3-1 管理站点

图3-2 输入站点名称

2、弹出【站点定义】对话框，如果对话框显示的是【高级】选项卡，则单击【基本】选项卡，弹出【站点定义向导】的第一个界面，要求为站点输入名称。如图3-2所示.3、单击【下一步】按钮，出现向导的下一个界面，询问是否要使用服务器技术。选择【否，我不想使用服务器技术】选项，指示目前该站点是一个静态站点，没有动态页面。

4、单击【下一步】按钮，打开一个对话框，在文本框中输入站点路径。

5、单击【下一步】按钮，询问是否使用远程服务器，这里选择【无】，因为将整个站点制作完成以后再上传。

6、单击【完成】按钮，即出现【管理站点】对话框，其中显示了新建的站点。

7、单击【完成】按钮，关闭【管理站点】对话框。现在，已经为站点定义了一个本地根文件夹，就可以在站点中制作网页了，当制作完成以后，就可以上传到服务器上供大家浏览了。

三、制作网页模板

因为本网站中的几个页面都要用到相同的页面元素和排版方式，因此可以使用模板以避免重复地在每个页面输入或修改相同的部分，在网站改版的时候，只要改变模板，就能自动更改所有基于这个模板的网页。

（一）制作库文件

在Dreamweaver中，库项目是可以重复使用的项目之一，库的用途和模板类似，都是可将同一内容用于不同的网页，库文件具体制作步骤如下。

1.选择【文件】|【新建】命令，新建一空白网页。

2.选择【插入】|【图像】命令，弹出【选择图像源文件】对话框，选择lbi.jpg。3.单击【确定】按钮，即可插入图像。

4.选择【文件】|【另存为】命令，弹出【另存为】对话框，在【文件名】文本框中输入文件名3.lbi，在【保存类型】中选择【库文件（* lbi）。

5.单击【保存】按钮，至此库文件制作完成。

（二）制作模板

使用模板创建文档可使站点具有统一的结构和外观。无论是新建站点还是更新已有站点，如果要使站点中的所有页面都共有某种特色，则模板非常有用。使用模板可以个次修改若干页面，而不用对新页面逐个设置属性。制作模板具体步骤如下。

1.选择【文件】|【新建】命令，弹出【新建文档】对话框，在【常规】选项卡中选择

【模板页】类别中的【HTML模板】选项。如图4-1.图4-1 HTML

模板

2.单击【创建】按钮，创建一空白模板网页。选择【窗口】|【资源】命令，打开资源面板，在资源面板中选择images/bj_01.jpg文件。如图4-2

图4-2 打开文件 3.单击【插入】按钮，即可插入库文件。

4.将光标置于库文件的下边，选择【插入】|【表格】命令，弹出【表格】对话框，并设置【行数】、【列数】，【表格宽度】设置为1005像素，单击【确定】按钮即可插入需要的表格。

5.将光标置于第1行单元格中单击鼠标面板中【背景图像】文本框右边的 图标，弹

出【选择图像源文件】对话框，从中选择图像文件夹中的images/bj_01.jpg文件，如图4-3所示.图4-3 选择文件

6.单击【确定】按钮，即可插入背景图像

7.用PHOTOSHOP CS2制作图片Bj-04.jpg，如图4-4

图4-4 制作图片

8.按需要分别插入图片，使其组合成一个完整的页面背景.9.预览，效果如图4-5所示

图4-5 效果图

（三）设置模板可编辑区

1.接上一节，将鼠标置于文档想创建可编辑区域的位置。

2.选择【插入】|【模板对象】|【可编辑区域】命令，弹出【新建可编辑区域】对话框，在对话框中，将【名称】设置为index_1,如图4-6所示.图4-6 创建可编辑区域

3.单击【确定】按钮，即可创建可编辑区域，如图4-7所示.图4-7 可创建区域

（四）用模板制作网页说明

可以利用模板快速的制作出大量的风格类似的网页，当模板改变时，所有基于模板的网页也随之改变，这样能有效的实现网站的更新。

四、利用模板制作网页

（一）制作登录主页

1.切换到【显示代码视窗】，在代码视图状态下，在和