个人网站设计论文
第一章 网站制作的基础知识
1.1建站工具
编辑网页的工具有很多，但是我们一般用的是Macromedia公司的网页制作三剑客来制作网页。三剑客分别为Dreamweaver CS3、fireworks、flash。
1.2网站建设的三个阶段
（1）、网站的定位  即网站设计的最终目标及指导方针。确立网站的主题，解决为谁设计、吸引谁，交流什么。
（2）、制作网页  通过网页设计体现网站整体协调一致的风格。网站的彩基调、配方案、页面彩的格调、页面构图及图片、动画的处理等都要反复研究。方便的导航设计使用户易于访问站点中的资源。
（html网页设计论文3）、网站的发布与维护  完成对网站所有文件的测试并上传到服务器，进行网站的推广和
宣传，建立信息的收集反馈系统，及时更新网页。
1.3网站设计步骤
（1）、设定网站主题并搜集资料  分析网站的访问对象是什么样的体，确定网站要为访问者提供什么样的服务。围绕网站设计要达到的目标，进一步决定网站展示的内容和网站要实现的功能。
（2）、建立站点的目录结构  用来分类保存网站中的不同的资源，精心设计的网站目录结构有利于网站类容的扩充和移植需要。很多初学者往往不注意建立站点的目录结构，所有的文件都保存在一个目录中，这给今后的网站维护和扩充带来了很大的困难。例如，files保存非index之外是文件，images保存图片文件，sounds保存声音文件等等。
（3）、建立网页的链接关系  网页的链接结构要层次清晰、访问方便快捷，就要设计网站中网页的链接关系。用最少的点击打开网站内的任何一个网页，为用户提供最便捷的服务。
（4）、页面设计与网页制作  网站图标、网页标题、导航栏设计、各页风格、页面规划、
便捷的链接、合理使用框架、巧用背景、合适的图片、网页空白。
（5）、网站测试  已经建好的一个设计精美的网站在发布之前要进行严格的测试。如果在测试过程中发现了错误，就要及时修改，在准确无误后，可正式在Internet上发布。
（6）、网站发布  把制作好的网站发布到自己的服务器系统上，也可以使用上传工具把网站发布到ISP提供的虚拟主机上。在国外或国内网站提供免费的主页空间和域名，上传后就可以使用浏览器访问自己的网站了
（7）、推广宣传与后期维护  网页上传后，及时更新网站内容，为浏览者提供丰富、及时的信息。网页的更新速度是衡量一个网站的主要目标。同时为了增加网站的访问量，要采用各种方法加以推广。例如在搜索引擎上注册，发布网络广告提供免费服务或者使用传统的促销媒介等等方式来推广网站。
第二章  制作网页
2.1 建立站点
选择“站点”，单击“管理站点”，单击“新建”，选择站点。如图（2—1）：
 
图2—1     
在按上图完成所填部分，在面板组就会出现站点等文件夹了。在右边的面板组中选择“站点”文件名，右击“新建文件”，命名为“index”，完成首页的命名。
2.2 制作首页
2.2.1 页面设置
首先双击“index.html”,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项，右侧区域则显示各类中可以设置的项目。首页设置的属性如图（2—2）所示：
图2—2
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的文本复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作，具体步骤如下：打开文本编辑软件（如Microsoft Word），选中要复制的文本，执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C，之后切换回Dreamweaver,将游标停留在插入文本的位置，执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。
2.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
第四章  HTML语言
4.1HTML语言结构
HTML是超文本标记语言的缩写。它使用一些写在<>中的标记对文本格式、特性等进行描述，形成的文件称为超文本文件。通过浏览器解释标记的含义，显示文件的内容。下面来介绍一下网页的HTML代码结构:
<!......>标记用于定义注释的内容，注释的内容在浏览器中不显示。
<html>......</html>标记定义HTML文件（网页），用于浏览器识别网页文件。网页文件的所有内容都在<html>......</html>标记中。
<head>......</head>标记定义网页的头部信息。头部定义包括网页的简介和为搜索引擎提供相关信息等内容。
<title>......</title>标记用来定义网页的标题，网页的标题显示在浏览器的标题栏中，也用于搜索引擎的按标题查。此标记位于<head>......</head>标记中。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。