网页设计总流程之站点设计的八大完整步骤

   网页设计详细说起来可以分为规划-设计-开发-检测-上线这几个大的步骤，今天三把火科技就为网页初学者来整理一套完整的网页设计流程，希望能对大家有所帮助，下面就从八个点来说明：

一、网页设计规划站点
Web站点是一组具有同享特点（如相关主题、相似的规划或共同意图等）的链接文档。
本地站点：是本地硬盘中存放长途网站所有文档的地方（文件夹）。
树立网站的一般做法是：在要地硬盘中树立一个文件夹用来存放网站的所有文件，往后就在该文件夹中创立和修正文档。待网页规划和测验好之后，再把它们拷贝到网站上供阅读者阅读。

1、规划站点结构
注：规划站点的结构之前应先用笔绘出站点的结构图（如下图所示是一个典型的学校站点的结构图）


2、规划站点的阅读机制
一般可采用以下的办法：
创立返回主页的链接
显现网站专题目录
显现当时方位
查找和索引

反应（将网页创作者或网站管理员发布在网页上，或创立一个E-MAIL超级链接，以运用户能快速地将信息反应到网站中）

二、创立一个站点
步骤：
1、单击“文件”---“新建”---“站点”指令（或单击常用东西栏中“新建网页”按钮的下拉箭头，从翻开的下拉菜单中挑选“站点”指令）
2、挑选一种站点模板或向导

3、单击“确定”按钮

三、站点的基本操作
1、翻开站点：“文件”---“翻开站点”
2、删去站点：
办法一：在Windows资源管理器中删去一个站点
办法二：在FrontPage中删去站点，在“文件夹”视图或“网页”视图的“文件夹列表”中，右击站点所对应的目录，在方便菜单中单击“删去”指令
3、站点的设置

“东西”----“站点设置”，有“惯例”、“参数”、“高档”、“语言”、“导航”、“数据库”六个选项卡

第二节 运用表格进行网页布局
一、 刺进表格
1、单击常用东西上的“刺进表格”按钮
2、单击“表格”---“刺进”---“表格”指令
3、运用表格东西栏（“查看”—“东西栏”---“表格”指令）
4、由文本转化（“表格”—“转化”—“文本到表格”）一般以阶段为分行符号，以逗号或句号为分列符号。


二、   单元格的基本操作
1、挑选单元格（“表格”—“选定”—“单元格”）
Ctrl：可挑选不相邻的单元格
Shift：挑选多个相邻的单元格
2、刺进单元格（“表格”—“刺进”—“单元格”）
3、兼并单元格（“表格”—“兼并单元格”或“表格东西栏”上的“兼并单元格”按钮）
4、拆分单元格（“表格”—“拆分单元格”或“表格东西栏”上的“拆分单元格”按钮）


三、   填充单元格
1、文本与图画填充（“刺进”—“图片”）
2、对齐文本与图画（“表格”—“特点”—“单元格”，“水平对齐方法”、“垂直对齐方法”）
3、修正单元格布景（“表格”—“特点”—“单元格”，“布景”）
4、调整边框色彩（“表格”—“特点”—“单元格”，“边框”）
5、改动单元格尺度（“表格”—“特点”—“单元格”，“指定宽度”、“指定高度”）


四、修正表格的行与列
1、挑选行与列
2、刺进行与列（“表格”—“刺进”—“行或列”）
3、均分行与列（“表格东西栏”中的“平均分配行高”或“平均分配列宽”）
4、删去行与列（“表格东西栏”中的“删去单元格”按钮或“表格”—“删去单元格”指令）

第三节 运用结构规划网页布局

一、知道结构网页1、结构的概念结构网页是一种特别的网页，它将本身分红几个区域，每个区域称作一个结构窗口（一般简称为结构）
结构具有以下特性：
每个结构都能够独登时显现一个网页，各个结构窗口之间能够设立超链接。
每个结构窗口能够赋予一个姓名，以便其他URL作为方针调用。


2、结构的运用场合（如邮箱、论坛）
一般用结构来显现在同一个站点中的多个超链接，这样能够不必阅读器中的“后退”按钮而方便的进行阅读。
结构也适用于相似在线书籍的运用，将目录显现在左面的结构中，单击目录，右边结构中显现相关的章节


二、创立结构网页1、结构网页的创立
“文件”—“新建”—“网页”，挑选“结构网页”选项卡2、结构网页模板（10种） “设置初始网页”
“新建网页”


三、结构网页的保存和翻开
结构网页的保存包含结构网页本身的保存和结构窗口中网页的保存。1、结构网页的保存
“文件”—“保存文件”或“结构”—“保存网页”2、结构网页的翻开“结构”—“在新窗口中翻开网页”


四、 结构网页的特点1、结构网页的特点“文件”—“特点”
“结构间距”、“显现边框”
2、结构的特点“结构”—“结构特点”


五、调整结构布局1、调整结构窗口的巨细（用鼠标拖动或在“结构特点”对话框中调整）2、结构的拆分
办法一：“结构”—“拆分结构”（按行或按列拆分）
办法二：用鼠标拖动拆分（按Ctrl键）
3、结构的删去“结构”—“删去结构”


六、方针结构
当在结构网页的某一个结构中界说超链接时，需求指定被链接的网页显现在哪一个结构中，即指定超链接的方针结构。

挑选要设置超链接的文字或图画，“刺进”—“超链接”，单击“方针结构”、“更改方针结构”

第四节 运用导航栏
一、界说导航结构
在网页内添加导航栏之前，先树立该站点的导航结构
“视图”—“导航”按钮
二、知道导航栏特点
“刺进”—“导航栏”按钮
“父层”：创立指向当时网页上一级网页的超链接，并将上一级网页的标题称号显现在导航栏内。
三、创立导航栏（要在阅读器中才可看到实践导航栏作用）


四、创立同享边框
用创立导航栏的办法只能在一个网页中创立导航栏，若需求导航栏呈现在站点内多个网页的相同方位，则可将导航栏刺进网页的同享边框内。
右击修正窗口，单击“同享边框”指令
操练二、运用结构规划一个企业网站的布局

要求有如下内容：关于我们、商品展示、在线订货、网上留言、联系我们、产品目录、友情链接等。

第五节 网页布局功能的运用

一、创立布局表格 1、创立布局表格翻开一个空白网页，并切换到“规划”视图下，单击“表格”菜单中的“布局表格和单元格”指令，随后在右侧弹出一个使命窗口，在该使命窗口下面程序提供了多种表格布局模板，在此单击其间需求的模板即可将该模板添加到网页中。


2.制作布局表格　假如你对模板中提供的布局表格不太满足，还能够用手艺制作的办法创立一个布局表格。创立时首先在“新建表格和单元格”项中单击“制作布局表格”，随后将指针移到操作窗口最左端，然后拖动鼠标即可制作表格。


3、设置表格特点　刺进表格后，还需对表格特点进行设置。在“表格特点”项中设置该表格所需的特点。　　提示：在设置表格时，假如要想掩盖网页的默许边距，并让布局表格跨到文档窗口的边缘，能够将表格中的各个边距的特点都设置为0。
　　
在规划结构时常常需求调整某一行或列的特点，这时能够通过表格中列宽和行高的标签来完结。在操作窗口中单击布局表格需求调整的边框，每一侧都会呈现显现列宽和行高的标签。每个标签都包含一个下拉箭头，如更改行高度时，单击此下拉箭头弹出一个下拉菜单，挑选“更改行高”指令，在弹出的“行特点”对话框中从头输入该行高度值即可。
操练三、运用布局功能规划学校网站　　
要求包含有以下内容：学校简介、学校新闻、教育教学、学生六合、学校论坛、教师之家等

第六节     网页布局规划

一、文本的美化（“格局”—“字体”）
1、输入文本
2、美化文本（设置文本字体、字号）注：字符的巨细共有6级，其间默许级别是3。3、设置文本作用4、改动文本色彩5、设置字符间距


二、运用边框与暗影（“格局”—“边框与暗影”）1、设置边框2、设置暗影


三、 运用列表（“格局”—“项目符号和编号方法”）
1、添加项目列表 。
项目列表也称为无序列表，它将在项现在添加标志符号。能够将图片作为新的项方针志。常常运用的项目符号有3种：实心黑点、空心圆圈和实心方块。


2、添加编号列表
在网页中的内容存在次序关系时，可运用编号列表。
3、添加界说列表
界说列表就是在网页内界说词汇、术语的列表，详细的界说内容将以首行缩进的方法呈现在列表的下一行。（格局东西栏的“样式”—“界说的术语”，输入要词汇、术语，按回车键）
4、设置嵌套列表
要树立组合列表，能够先生成第1级列表，然后再生成第2级列表，依此类推。


树立组合列表的详细操作步骤如下：（1）先生成第1级列表（2）将光标移动到拥有第2级列表的第1级列表项意图结尾，然后按回车键。将呈现一个空的列表行。
（3）单击“格局东西栏”中的“添加缩进”图标。该行变为一个空白行，是没有列表编号或项目符号的。再单击一次“添加缩进”图标。（4）此刻再依照树立列表的办法结构第2级列表。
（5）输入第2级列表。输入过程中每次接回车键就主动生成第2级列表项目。（6）第2级列表输入结束后，将光标移到别的方位或者用鼠标在页面的空白处单击一下即可完结第2级列表的设置操作。


嵌套列表能够转变为可折叠纲要，这样在阅读器中阅读时，就能够翻开或折叠纲要中的各个级次。生成可折叠纲要的详细操作步骤如下：（l）按生成复合列表的办法结构好这个复合列表所有的列表级次。
（2）挑选“格局”菜单中的“项目符号和编号方法”指令，翻开“项目符号和编号方法”对话框，或者在列表中单击右键，从弹出的菜单中挑选“列表特点”指令。
（3）在翻开的对话框中，选中“启用可折叠纲要”复选框。（4）单击“确定”按钮。
操练四、规划一个介绍阳江景色及特产的网页

要求：规划一个网页介绍阳江的景色及特产，要用到折叠列表的方法来分别介绍阳东、阳西、阳春等的不同区域的景色名胜及特产。

第七节   网页装饰规划
一、添加图画
在阅读器中，能处理的图片格局只有GIF、JPEG格局和PNG格局等少数几种图片。
1、GIF格局图片    GIF格局最多能支持256种色彩（8位色彩）。能够具有通明、动画等特别作用。
2、JPEG格局文件    JPEG格局能够处理高达1670万种色彩（24位色彩），所以在需求显现细微的变化和运用很多的色彩处理照片时常常运用这种格局保存文件。

刺进本地计算机上的图画（“刺进”—“图片”—“来自文件”，“从计算机挑选一个文件”）
刺进WEB上的图画（“刺进”—“图片”—“来自文件”，“从WEB阅读器来挑选网页或文件”）
二、处理图画
1、取舍图画（“图片”东西栏—“取舍”按钮）
2、设置通明布景（“图片”东西栏—“设置通明色”按钮）
三、添加文本（“图片”东西栏—“文本”按钮）
四、保存图画
注：默许情况下，当时站点的图画文件保存在Images文件夹中


五、运用特别作用
1、调整图片的亮度和对比度
2、图片的翻转与旋转
3、图片的冲蚀和黑白处理
4、凹凸作用


六、设置图片对齐方法（“图片特点”—“外观”—“布局”—“对齐方法”）
七 运用水平线
水平线是贯穿网页宽度的细灰条，用于分隔文本或加侧重符。添加水平线后，能够修正其特点来更改宽度、高度、对齐方法和色彩。假如网页运用了主题，则会运用图形来替代水平线以匹配主题。
1、刺进水平线
2、设置水平线特点
八、 修正网页布景（“格局”—“布景”）
1、调整布景色彩
2、调整布景图案
九、创立交流图画（DW 2004）
1、刺进交流图画（“刺进”—“图画目标”—“鼠标通过图画”）
“原始图画”、“鼠标通过图画”、“按下时，前往的URL”

2、预览交流图画：F12

第八节   创立超链接

一、与当时站点的链接（“刺进”—“超链接”，“查找”当时站点的文件夹方位）
二、与空白网页的链接（“刺进”—“超链接”，“创立一网页并链接到该网页”）
三、与电子信箱的链接（“刺进”—“超链接”，“制造发送电子邮件的超链接”）
四、与Web的链接（“刺进”—“超链接”，“运用WEB阅读器来挑选网页或文件”，ALT+TAB，则网页地址主动添加到URL中）

五、修正链接色彩（“网页特点”—“布景”，“色彩”—“超链接”、“已拜访的超链接”、“当时超链接”）

   六、运用图画地图
月 1、创立热门
   在图片中创立热门的详细操作步骤如下：

   选中要树立热门的图片。图片被选中后，四周将呈现8个控制方块，并且“图片东西栏”被激活。

在“图片东西栏”中，挑选热门的形状的图标。能够挑选长方形、圆形或多边形。
将鼠标移动到图片中。这时，鼠标指针变成一支笔的模样。

用鼠标左键单击图片中要树立热门的区域并拖动鼠标来制作热门。尽量让热门和图片上的特征区域相配合

（   热门制作结束，图片中将呈现该热门的边框。翻开“刺进超链接”对话框，树立到热门上的超链接的过程与树立到文本上的超链接的过程基本相同。
操练五、规划一个介绍国际闻名景色的网站

要求：用到嵌套列表、结构、超链接、图画热门等技术。