网页页面设计教程（精选多篇）

推荐第1篇：网页设计教程

网页设计教程

一、创建名为Test1的站点，并在其中按如下要求设计简单网页Index.html，如图所示。

要求：

①设置网页标题为自己的学号，网页背景为bj1.jpg；

②插入一个3行3列的表格，表格边框宽度为1；

③第一行合并单元格，插入动画dh1.swf；

④第二行第一列标题的格式为蓝色、楷体、24Px、居中，正文缩进两个汉字、大小为18Px、左对齐；中间插入一个图片tx1.jpg，其宽度为260、高度320；第三列是一个表单，其中姓名和密码的字符宽度和最多字符数为12；

⑤第三行的字体大小为18px；“友情链接”链接到http://www.daodoc.com；“动画世界”链接到本地的Flash.swf；“申请加入”链接到本地的Apply.html，在新窗口中打开。

④表格第二列中间三个单元格合并，插入一个图片文件“dx2.jpg”和文字，图片宽300、高160，左对齐；创建名称为C的CSS：蓝色、18Px、楷体，用于格式化文字。 （2）Apply.html网页设计要求∶内容为一个表单；包括：姓名、性别、职业。其中姓名最多输入8个字符，性别要求用单选按钮，职业用下拉框，值分别为“学生”、“教师”和“工程师”，默认选中“学生”。

三、教材内容

四、食品与营养

五、我的家乡

推荐第2篇：网页前端页面设计方法论

做网页设计的心得体会

在果冻学院的这段时间我学到了很多东西，而其中我感觉收获最大的就是在网页设计方面，因为自己是在职业预估系统组做的是产品的前端页面的设计。关于页面设计方面大维老师和冷总讲了许多东西，体现刚需，抓住痛点等，这些我就不多说了，下面说说我自己在这其中的一些心得体会。

首先，我感觉最重要的就是网页整体设计要简洁

对于大部分网站的前端页面来说，就是为了满足用户的获取信息的需求，所以要目标明确、行为直接。在设计首页的时候，要力求整体简洁、朴素，色彩搭配均衡、和谐;页面布局大方，而且一定要注意协调、合理，字间距、行间距适度。同时，要强化网站的功能，切不可让图片背景图太过炫目，因此要屏弃杂乱无章图片、背景等，让用户在第一眼时不会受到过多的干扰，舒心的了解网站的功能。

其次，网页的设计要注重视觉效果

视觉要素是网页一个重要的表现手段，不同的颜色组合和网页结构排列表达出是不同的风格。一般冷色调可以用来表现简洁的风格，而暖色调则在表现时尚、流行等潮流元素上比较突出。很多人在进行网站设计的时候都只想到了自己的感受，忘记了网站用户的感受，比如一有人比较喜欢蓝色，于是在整个网站中都布局蓝色背景，诚然你看起来舒服了，但是将网站设计一个模型之后让其他人都来看一看，看看网站设计是否能够第一时间留住他们，如果连你的身边的人都不能够留住，那么说明你的网站设计还必须进行修改，而我们的视觉性要素就是要在不断修改的背景之下完成，让更多的人证明你的网站视觉设计确实吸引人。

第三，我们要知道网站的关系结构

不同的网站结构是不同的，只有知道网站的功能间的关系结构，才好在网页上突出主题。 网页的功能结构如果细分到每个页面，其中首页则是最重要的;再细分下去，就是下面网页结构要排列好。它们以不同的排列组合会产生不同结果，如果网页的重要性程度或者因果关系展现错了，就会让别人看着不舒服甚至看不懂。

第四，设计网页时要注意表达清楚自己的主旨 在制作页面时制作者可能感觉自己很好的把功能展现了，有时候这种感觉是基于你对于项目的了解所以你可以看懂你的页面设计，可是拿到不了解的人那里去他就可能看不懂，所以在表达意思的时候要清楚，直接点明，不要过于隐晦。同时在做完之后给不了解的人去看看，看别人能不能看懂，如果别人不能理解说明你的表达有问题，需要改进。

好了，以上四条就是我在制作前端页面的时候体会到的几点比较重要的东西，写下来和大家分享，有什么不合适的还请各位包涵。

推荐第3篇：网页设计制作教程

教你怎么设计制作网站

首先，可以告诉想设计制作网站或想从事网站制作相关行业的的朋友。做网站有很多种方式，不外乎自己开发，找人开发。找人开发这里就不说了，没有什么技术含量，准备好钱就可以了，自己做网站主要有下面两种方式：

做网站方法一（目前主流方式）

下载专业的网站内容网站管理来做，互联网发展到今天，做网站也变得非常简单和编辑，国内也出现了一批很专业的专门用于做网站的网站管理系统，比如pageadmin系统、shopex系统、discuz系统、worpre系统等都是很优秀做网站的程序（程序到官方网站下载，大家自己百度搜索），有的甚至支持多语言，多站点，总之有一句话说得好，站在巨人肩上会看的更高，一样道理，用专业的网站系统来做做网站就是一个非常省力，省时的过程，国内很多网站90%都是基于这些专业系统基础上搭建，当然，选中一个系统后你需要去熟悉这个系统功能你才能运用得很好，一般来说这些系统都不需要你具备专业的知识，只需要花几天时间看看教程就可以熟练运用并建站。

做网站方法二（专业人员必看） 这个也是本本要重点讨论的，这也是一个专业做网站人员必须掌握的方法，因为掌握下面基础，即使你用方法一来做网站，也能运用得更好，因为一把好剑也需要一个好的剑客。下面讨论一下成为一个网站从业人员必须掌握的知识：

第一阶段：开始时最好是学些图像编辑软件和基础网页脚本语法。 常用图片处理软件：Firework或photoshop 基础语法：HTML语法(百度一下：HTML入门)，CSS语法(百度一下：CSS入门)，javascript语法（百度一下：javascript入门），学好这些语法可以使您更了解网页制作的原理。结合教程边学习边练习，这最多花你几周时间。

第二阶段：有了上面的基础，你可以做一些简单的页面了。当然为了让网站做得更漂亮，功能更强大，你就需要学一些动态编程语言，常用的有ASP,PHP和ASP.NET,推荐后两种，因为Asp已经被淘汰，后两种程序区别自己上网搜索吧，本人更倾向于学习.NET，面向对象，功能太强了，微软的东西就是强悍。

第三阶段：结合你自己已掌握地知识来开发一些网站，比如自己开发一个简单企业网站，当你可以独立完成一个网站项目时候，你已经成为一个合理的网站建设人员了。

上面我们制作测试网站可以在自己电脑安装iis和对应软件（如php环境和asp.net环境）来运行并测试，网站做好了需要发布到网上给所有人浏览，我们就需要做下面几步：

1、申请域名，就是注册一个网址。

2、购买网站空间，有称为虚拟主机，用来放网站程序文件。

3、网站备案

国家要求国内任何一个网站必须进行工信部ICP备案，这个可以让你主机商给你代备案，一般都是免费的，你只需要提供资料给他们就可以。

做网站的流程大概就是上面几步，希望对大家有所帮助。

推荐第4篇：ps网页设计教程

ps网页设计教程

设计网页的方法很多，常见的有直接编写代码方法，利用可视化软件设计(例如DreamWeaver)法，利用中间软件实现格式转换法(例如Word生成HTML代码)，还有就是PS设计网页法。综合各种设计方法的优缺点，可以得出利用PS设计网页通常可以达到意想不到的效果，这不只是取决于他可以随意布局图片，更得意于其专业的图像处理能力。下面小编就给大家展示一下PS设计网页的独特之处。

工具/原料

Adobo PhotoShop

IE浏览器

方法/步骤

打开PS，新建空白文档，名称设置为“feifei工作室”，从预设大小下拉列表中选择 “1024 x 768”，模式设计为“RGB颜色”，内容设置为“白色”，点击“好”按钮完成文档的创建工作。

新建一名称为“框架”的图层，利用该图层实际整个网页的整体布局。首先选择“矩形选择工具”，然后将矩形的宽度设置为1024，高度设置为80，在文档的上下两侧各框选一部分内容并填充为黑色，从而使整个网页呈现“宽屏幕”效果。

在背景图层的上方新建一新图层，并命名为“背景颜色”。点击“矩形选择工具”，设置“宽度为400，高度为768，然后在窗口的左侧框选一部分内容，填充一种深绿色。然后点击“矩形选择工具”，设置“宽度为624，高度为768，然后在窗口的右侧框选一部分内容，填充一种浅绿色。填充两种颜色饱和度有一点差别的颜色，目地是产生较为明显的对比。

在“框架”图层之上再新建一图层，名称为“主体元素”。打开一张事先准备好的百合花图片，双击“背景”图层将其转换为“图层0”，点击“魔术棒”工具，在图片白色区域内点击，选择白色区域后，按下DEL键删除白色区域。然后拖放图片到图层“主体元素”上，位置如图所示。

然后选择“矩形选择工具”，设置“宽度为624，高度为768，然后在窗口中选择花朵右侧的一部分内容，并调整其亮度和对比度，使花朵的左右两侧呈现明显的对比。

对该页面进行细节的调整，增加一些导航栏，信息提示内容和版权信息等内容，最终制作完成的页面如图所示。

选择“切片”工具，然后对内容进行切分。切分的好处是有利于文件在网络上传输，同时在用切片工具划分内容时最好将需要被文字内容替换的部分进行独立分割。分割完成后的效果如图所示。

找到保存文件的位置，打开\"feifei工作室.html\"文件，然后在内容区域内点击鼠标右键，选择“查看源文件”，就会发现对应的网页内容已经生成。至此，利用PS设计网页内容完成。

推荐第5篇：动态网页设计视频全教程

动态网页设计视频全教程

【课程名称】《动态网页设计》 【授课老师】高振国老师 【课时总长】共35讲

12.3.3 维护数据库

18.2.1 创建表单 18.2.2 创建文本域 18.2.3 创建按钮

18.2.4 创建复选框和单选框 18.2.5 插入列表

推荐第6篇：网页设计与制作教程目录

网页设计与制作教程

目

录

第1章 网页设计与制作概述

1.1网络的基础知识

1.1.1 TCP/IP协议

1.1.2 IP地址 1.1.3域名地址 1.1.4统一资源定位器 1.2图形图像的基础知识

1.2.1位图与矢量图 1.2.2常用的图像格式 1.2.3常用的图形格式 1.3网页的布局知识

1.3.1网页的基本结构 1.3.2页面的布局原则和模式 1.4网页的色彩应用

1.4.1色彩属性与象征意义 1.4.2网页色彩的规划 1.5 HTML基础

1.5.1 HTML语言的基本结构 1.5.2 HTML语言的基本单位 1.5.3 HTML标记符基础 1.5.4文本格式标记符 1.5.5超链接标记符 1.5.6图像标记符 1.5.7表格标记符 1.5.7框架标记符 1.5.8表单标记符 1.5.9滚动条 1.6 CSS技术

1.6.1 什么是 CSS 1.6.2 在网页中使用 CSS 1.6.3 CSS 样式定义 1.6.4 CSS 属性 1.6.5 CSS 过滤器简介 1.7 JavaScript技术

1.7.1 JavaScript脚本嵌入HTML文档的方法 1.7.2使用客户端脚本习题一

第2章 DreamweaverCS6网页设计基础

2.1 Dreamweaver的工作环境

2.2构建Dreamweaver站点

2.2.1创建本地站点 2.2.2管理本地站点 2.2.3创建和管理本地站点中文件 2.3网页文本编辑

2.3.1正文文本的添加 2.3.2文本格式的设置 2.3.3页面属性的设置

2.3.4插入特殊字符 2.3.5插入空格 2.4 CSS样式设置

2.4.1创建CSS规则

2.4.2链接样式表 2.5制作一个简单网页

2.6 Dreamweaver工作环境的设置习题二

第3章 图像与多媒体

3.1图像的应用

3.1.1在网页中插入图像 3.1.2设置图像属性 3.2创建鼠标经过图像

3.3图像占位符及属性的设置 3.4插入flash动画 3.5音频的应用

3.5.1音频文件格式 3.5.2网页中添加音频 3.6视频的应用习题三

第4章 超级链接及其应用

4.1超链接概述

4.2创建文本超链接 4.3创建图像超链接 4.4创建电子邮件链接 4.5空链接习题四 第5章 网页的布局

5.1表格的应用

5.1.1插入表格 5.1.2表格的嵌套 5.2表格编辑及属性设置

5.2.1文档中的设置表格格式优先顺序 5.2.2选择表格及其它元素 5.2.3设置表格属性

5.2.4设置单元格、行或列属性 5.2.5编辑单元格、行或列 5.3应用APDiv布局页面 5.4APDiv与表格的相互转换 5.4.1将APDiv转换为表格 5.4.2表格转换为APDiv 5.5框架的应用

5.5.1创建框架集

5.5.2查看和设置框架集属性

5.5.3查看和设置框架属性 5.5.4设置框架中显示的网页 5.5.5嵌套的框架集 5.5.6框架的编辑习题五 第6章 表单的应用

6.1创建表单 6.2添加表单对象

6.2.1插入文本域

6.2.2插入单选按钮/单选按钮组 6.2.3插入复选框/复选框组 6.2.4插入选择框（列表/菜单） 6.2.5插入文件域 6.2.6插入按钮 6.3表单的提交

6.4应用表格布局表单实例

习题六

第7章 行为与脚本语言及模板和库的应用

7.1行为在网页中的应用

7.1.1行为、事件、动作

7.1.2添加行为

7.1.3Dreamweaver内置事件 7.2 JavaScript脚本

7.2.1 JavaScript脚本概述

7.2.2 JavaScript脚本语言特效 7.3创建与应用模板

7.3.1创建模板

7.3.2使用模板创建新网页 7.3.3修改模板

7.3.4文档从模板中分离 7.3.5设置模板的首选参数 7.4创建与应用库项目

7.4.1创建库

7.4.2在网页中应用库项目 7.4.3编辑并更新库页面

7.4.4将库项目从源文件中分离

习题七

第8章 站点的测试

8.1站点的测试 8.1.1检查浏览器兼容性 8.1.2.链接的检查与修正 8.1.3不同分辨率下的测试 8.1.4运行站点报告 8.1.5网站内容的编辑 8.2创建远程站点

8.2.1设置远程服务器 8.2.2连接远程站点 8.3文件的上传和下载

8.3.1文件的上传 8.3.2下载文件

8.3.3文件的取出与存回

习题八

第9章 FireworksCS6基础及其在网页制作中的应用

9.1 FireworksCS6基础

9.1.1认识FireworksCS6工作区

9.1.2文档管理

9.1.3使用布局工具 9.1.4各种面板 9.1.5常用工具

9.2绘制并编辑矢量图形

9.2.1绘制与编辑基本形状 9.2.2绘制与编辑自动形状 9.2.3自由变形形状 9.2.4复合形状 9.3创建并修饰位图图像

9.3.1创建位图图像 9.3.2编辑位图图像 9.3.3修饰位图 9.4创建并编辑文本

9.4.1创建文本 9.4.2选择文本 9.4.3编辑文本 9.5应用笔触和填充

9.5.1应用颜色工具 9.5.2应用和更改笔触 9.5.3应用和更改填充

9.5.4在笔触和填充中添加纹理 9.5.5应用样式 9.6应用动态滤镜

9.6.1应用动态滤镜 9.6.2调整动态滤镜 9.7使用切片和热点

9.7.1使用切片

9.7.2使用热点

习题九

第10章FlashCS6基本操作及在网页制作中的应用

10.1 FlashCS6的基本操作

10.1.1 FlashCS6的工作界面

10.1.2 Flash文档的创建、打开、保存 10.1.3面板组的使用 10.2时间轴的使用

10.2.1图层

10.2.2帧 10.2.3播放头 10.2.4场景

10.3元件、实例和库资源

10.3.1元件的创建

10.3.2实例

10.3.3库面板以及元件与实例的关系 10.4创建各种动画

10.4.1遮罩层动画 10.4.2引导层动画

10.4.3形状补间动画 10.4.4逐帧动画

10.5在动画中添加声音 10.6文本的使用

10.6.1传统文本字段

10.6.2使用文本布局框架(TLF)文本 10.7动作面板的使用

10.7.1动作面板的介绍 10.7.2动作脚本的基本元素 10.8 ActionScript基本语句

10.8.1时间轴控制命令 10.8.2浏览器/网络命令 10.9动作的应用

10.10测试发布Flash动画

10.10.1制作过程中的测试

10.10.2测试方法

10.10.3下载模拟测试 10.10.4发布影片 10.10.5优化Flash文档习题十

第11章 PhotoshopCS6基本操作及在网页设计中的应用

11.1 PhotoshopCS6基本操作

11.1.1 PhotoshopCS6的工作界面 11.1.2文件操作 11.1.3环境设置 11.1.4基本概念

11.1.5选区的创建与编辑

11.1.6利用画笔类工具绘制图像 11.1.7利用形状绘制工具绘制图像 11.1.8图像修饰工具的应用 11.1.9调色命令的高级应用 11.1.10图层样式 11.1.11文字图层 11.1.12滤镜 11.2页面设计与制作

11.2.1整体页面的制作 11.2.2制作导航栏 11.2.3制作网页内容板块 11.2.4制作网页页脚

习题十一

第12章网页制作工具集成及网页制作综合实训

12.1 Fireworks与Dreamweaver的集成 12.2使用Photoshop和Dreamweaver 12.2.1 Dreamweaver中处理Photoshop文件的工作流程

12.2.2创建智能对象 12.2.3更新智能对象 12.3 Dreamweaver与Flash的集成 12.4网页制作综合实训习题十二

推荐第7篇：万村网页页面更新操作指南

万村网页页面更新操作指南

一、登陆管理系统：

1、打开广德先锋网（http://www.daodoc.com/），在页面右侧中部“安徽先锋网电子政务系统”栏输入登陆账号密码。

点击确定后进入“安徽先锋网电子政务系统”

2、点击左侧主菜单内的“村级模板系统”。右侧出现该用户所在乡镇（村级用户登陆显示所属村）。

3、点击乡镇名称，出现村列表，然后点击需要管理的村后面的“进入管理”（可以在“进入管理”上点击鼠标右键选择“在新窗口中打开”，这样避免再管理其他村时需要重新登陆）。

进入村级管理页面如下：

二、栏目管理：

点击左侧菜单中的栏目管理，页面出现现有栏目列表。

1、栏目排序：列表中顺序列可以输入序号，点击“重新排序”后，栏目按照输入的序号排序。

2、新建栏目：点击“新建”，弹出新建栏目窗口。

输入栏目名称、序号，选择相应的显示类型，一般为默认的条目文章。点击“提交”，栏目新建成功。

三、内容管理：

点击左侧菜单中“内容管理”下面的相应栏目，右侧出现该栏目已有内容条目列表，直接点击现有条目后面“修改”、“删除”即可对现有内容进行修改和删除操作。列表前面的序号同栏目管理一样可对

其进行重新排序。

增加内容：点击列表上面的“增加”，出现增加内容对话框，输入标题和内容，文字内容最好先在word内排版（确定字体、字号、段落缩进，并将行间距设置为固定值，不要使用单倍行距），完成后拷贝黏贴到内容框。若要插入图片，请先点击内容区需要插入图片的位置，再点击编辑条上的插入图片图标，出现图片上传窗口（该功能不支持ie8浏览器），点浏览找到指定的图片（图片宽度控制在500像素以内），点确定上传图片，编辑完成后点“提交”，文章添加成功。

注：“本村概况”是单页面栏目，只能在首页显示最上面的一条内容，不建议添加多条，需要增加内容是请修改原来的条目。

推荐第8篇：网络教学页面设计中网页图标设计一般规律探究

网络教学页面设计中网页图标设计一般规律探究

摘要

目的 结合视觉空间工作记忆能力对网页图标设计作用的行为分析研究和神经加工机制研究，揭示网络教学页面设计中网页图标设计的相关规律。方法采用2x2实验，运用测试工具对一组被试者进行视觉测试，结果以平均分为基准分高低两个等级后，再分别把高低两组随机分两个小组，这样对比组和实验组在相同的环境下对两种界面运用了两种不同的网页图标进行设计的课件进行学习，最后测试学习效果。结果 学习成绩因视觉空间工作记忆能力的不同，课件界面设计运用的网页图标的不同而不同，因此网络课程的界面要素网页图标设计的视觉效果对界面设计来说是很重要的。 [关键字] 视觉空间工作记忆 工作记忆 网页图标

Abstract

Objective Working memory space is the ability to integrate visual website design role acts face analysis and neural proceing mechanisms study revealed teaching network design web page design logo related laws.Method using 2x2 experiment, using test tools for a group of learners a visual test results to the average level is divided into two sub-base grading, or to separate the two groups of two teams at random, so comparison group and experimental group in the same environment for two types of two different web logo design using two learning, Final test results good learning.Result Performance space for visual results of the different working memory capacity, software interface design of the website logo vary according to, and therefore the curriculum network interface elements website logo design visual effects for interface design is very important.

1.引言

当前,利用网络进行教学和远程教育是教育发展的一个方向。网络教学效果的好坏、成功与否与网络课程的设计与制作密切相关。网络课程是由一页一页的网页按照一定的顺序和结构组成的。页面既是网络课程的组成部分也是网络课程的呈现形式,所有的教学信息和资源都是通过页面呈现在学习者面前的。也就是说页面是学习者与网络资源的交互通道，而信息传输是否畅通很大程度上取决于页面的设计，页面吸引学习者，主要是吸引学习者的视觉冲击力，同时实现一种隐性的信息传播。因此, 网络课程页面设计的优劣, 直接影响到网络课程的质量和效果。网页面上的大部分信息都是由视觉感知的，很大一部分信息是通过视觉获取的。而工作记忆,它是一种对信息进行暂时加工和贮存的能量有限的记忆系统，在认知活动中起重要作用。根据Baddeley[2]的工作记忆理论，工作记忆是人类暂时处理和存储信息的假设性精神操作空间，由中央执行系统、语言回路、视觉空间模板等三个成分组成。而视觉空间模板，作为工作记忆的重要组成成分之一，它负责处理视觉空间信息。信息可以直接进入视觉空间模板（如直接知觉到的信息），也可以间接进入视觉空间模板（如从记忆中产生的表象）[2]。因此视觉空间工作记忆能力与网络教学页面设计的关系，对我们无疑具有很大的启发作用。

而在以前的很多课件中，其界面的表达元素多限于文本，随着计算机科学技术的发展，目前很多CD一ROM教学盘由于其存储容量（可达640M）的优势，大量采用图形界面。主要包括工作台（Deskiop）、图标（Icon）、按钮（Button）、窗口、下拉式菜单和图形式菜单等。然而图标，一种小型的、带有简洁图形的符号。它采用仿真、模拟的方法进行设计，用简洁的图形符号模拟现实世界中的事物，使学习者很容易和现实中的事物联系起来。例如使用形象的“放像机”图标，单击它可以观看活动图像、录像；用以“话筒”图标，单击它可以进行录音。作为图形界面的主要元素之一，它在计算机图形界面中起了相当重要的作用，它的视觉效果直接影响着页面的质量，影响着学习者的学习兴趣和学习效率。而图标在网络课程的界面中主要起到导航的作用。由于Internet的网络课程中大量地使用了超媒体信息系统，这种系统为学习者创造出了一种由学习者进行控制的学习环境，使学习者在学习过程中链接或访问信息有更大的伸缩性，从而更加适应学习者的个性化学习风格。但是超媒体信息系统也可能为学习者带来迷航的危险。那我们应如何根据不同学习者的不同视觉空间工作记忆能力设计好网页图标以降低迷航的可能性和导航系统的复杂程度呢？今天将通过实验来分析验证网络课程页面设计中关于图标设计的一般规律和特点。

2.理论依据与问题提出 2．1 理论依据

2.1.1工作记忆理论

工作记忆（working memory）：属程序性记忆、短时记忆，是一短暂时刻的知觉，是一系列操作过程中的前后连接关系，后一项活动需要前项活动为参照。依赖于大脑前额叶皮层神经环路的功能，尤其是谷氨酸神经元与多巴胺神经元之间的平衡。对脑高级功能的意义，通常是在过去的经历与当前的行动之间提供时间和空间的连续性，对于思维运算、下棋、弹钢琴以及无准备的即席演讲等都是十分重要的。在工作记忆受损时，难以记住事件正确的前后关系。一个典型的例子就是回忆一个新的七位数的电话号码。你能回忆出来的数字的个数称为你的“数字广度”。对大多数人来说，它通常只有六到七个。换句话说，工作记忆的能力是有限的。某些脑损伤的病人只有极小的数字记忆广度，除了他们听到的最后一个字母外，别的一概回忆不起来，但他们的意识却正常。事实上，他们的长时记忆可能并未受到损害。1974年，Baddeley和Hitch在模拟短时记忆障碍的实验基础上提出了工作记忆的三系统概念，用“工作记忆”代替了原来“短时记忆”的概念。Baddeley认为工作记忆指的是一种系统，它为复杂的任务比如言语理解、学习和推理等提供临时的储存空间和加工时所必需的信息，工作记忆系统能同时储存和加工信息，这和短时记忆概念仅强调储存功能是不同的。Baddeley在短时记忆基础上提出的一个记忆模型。它的功能是:在进行复杂认知活动时 ,暂时存储和操纵信息 。经近些年的实验验证 ,它是一个相当成功的模型 。国内的朱滢、崔耀、张达人 的工作都涉及这方面。工作记忆分成三个子成分，分别是中枢执行系统、视空初步加工系统和语音环路。大量行为研究和神经心理学上的许多证据表明了三个子成分的存在，有关工作记忆的结构和作用形式的认识也在不断地丰富和完善。人们发现工作记忆与语言理解能力、注意及推理等联系紧密，工作记忆蕴藏智能的玄机。视空间工作记忆（visuo-spatial working memory），用于存贮视觉和（或）空间的信息，主要负责产生、操作和保持视觉映象，是工作记忆的重要组成部分。然而查看了大量的文献资料，发现与言语工作记忆相比 ,对视空间工作记忆的研究较少 。梁凤华等[8]的研究综述中提到视觉空间工作记忆加工模式有整合加工模式、平行加工模式及双重存贮加工模式。

2.1.2 视空间工作记忆

Luck 和Vogel 研究认为视觉工作记忆以完全整合的形式贮存大约3 或4 个客体,记忆容量受物体数量的限制但相对地不受可区分的组成这些物体的特征的数量所限制,每一个客体可以包含无限的可区分的特征[8再引用]。这些研究均表明视觉记忆是以整合的方式存贮特征的,存贮的容量大约为3 或4 个客体且不受客体所包含特征数量的限制。这种将视觉记忆中多个元素组合成一个单元的概念实际上是记忆中组块概念的一个特例。视觉记忆通过各种分组和组织方式使越来越多的信息融合到一个组块当中,使大量的信息得到了记忆。记忆的容量受到组块数量的限制 ,然而记忆范围实际上是不受每个组块所含信息数量的限制 ,对于含有多个特征的客体,客体数量而不是呈现的相关特征的数量限制记忆成绩。 尽管许多研究支持了特征整合理论 ,但同时有许多证据表明 ,如果不经过额外的努力特征在视觉记忆中可能不会以整合的形式得到保持。如Rensink提出的一致性理论认为在没有注意参与的情况下 ,一个很显然的物体将被知觉成它的各个组成部分。许多研究者发现了不符合系列搜索的证据 。又有研究者认为视觉是通过直接感知视觉景象结构中突显的特殊特性而给某种可能的联结进行编码的。这个假设得到了神经生理学研究的支持 , De Valois等对猴子的研究表明在初级视皮层中 ,V1区的大多数细胞在 10°～90°范围内有各自的方位偏好 ,同一个刺激可能因其呈现的位置不同而发生兴奋或抑制效应 ,或者完全没有任何作用 。Stefurak和Boynton 也得出对特征的视觉记忆是分离的 ,特征之间的联结经常很难维持 。他们采用局部呈现测试研究范式:用 5s 时间呈现彩色轮廓的动物 ,3s或15s之后是一个单目标测试的再认实验 ,他们发现当禁止使用言语编码时 ,对于颜色和形状的记忆是良好的 ,但是对于颜色和形状之间联结性的记忆却相对较弱。在另一个实验中他们指导被试单独注意某个维度(或者颜色或者形状) ,发现无关维度的同时变化不影响再认成绩。Treisman在一系列使用彩色字母合成脑知觉匹配实验中发现 ,在不同的组合中当测试时呈现了同样的特征 ,但在特征的匹配上有了改变时 ,辨别的错误率最高 。Simons 的研究也得出了类似的结论 。Simons在研究中采用以下测试范式:先呈现4 张实物或抽象形状的图片,然后进行匹配任务测试。发现当改变图片的总体结构时 ,被试几乎总是能注意到这种变化;而只改变目标本身或交换两个图片的位置 ,被试就难以觉察到这种变化 ,且图片交换位置时成绩最低。这些研究均表明了对特征记忆的独立性 ,人们能很好地记忆某个客体中的特征 ,但对特征间的呈现关系的记忆却很弱。当任务要求对这些关系进行记忆时 ,需要注意的参与。 2.2问题的提出

图标在计算机图形界面中起了相当重要的作用，从1981年Xerox Star系统开始，到2003出现的BeOS Zeta系统，每一系统都有不同的图标。在网络教学迅速发展的今天,网络课程页面设计体现出它的重要性,作为页面的一个重要元素－网页图标（icon），它的设计也是致关重要的．在目前关于网络课程的页面设计还存在许多不足,关于图标设计方面的研究也是比较少.对于图标的的认知主要依靠视觉加工,因此猜测视觉空间工作记忆能力不同的人对于图标的认知与理解也不同,即视觉空间工作记忆能力与图标的认知存在密切的关系，但究竟有什么样的关系还要进行进一步的研究．为了更细化的了解视觉空间工作记忆能力与网页图标（icon）的关系，本研究试图以视觉空间工作记忆能力不同的学生为研究对象，研究其在不同图标学习条件中的学习效果．

2.2.1研究假设

1.视觉空间工作记忆能力高的学习者在文字标注图标学习条件中将比在没有文字标注的图标学习条件的学习效果好。

2.视觉空间工作记忆能力低的学习者在文字标注图标学习条件下将比在没有文字标注的图标学习条件中的学习效果好。

3.在文字标注图标学习条件中进行学习，视觉空间工作记忆能力高的学习者学习效果好于视觉空间工作记忆能力低的学习者。

4.在没有文字标注的图标学习条件中进行学习，视觉空间工作记忆能力高的学习者比视觉空间工作记忆能力低的学习者的学习效果好。

5.视觉空间工作记忆能力高的学习者在文字标注图标学习条件中的学习效果将比视觉空间工作记忆能力低的学习者在没有文字标注的图标学习条件中的学习效果好。

6.视觉空间工作记忆能力高的学习者在没有文字标注的图标学习条件的学习效果比视觉空间工作记忆能力低的学习者在文字标注图标学习条件中的学习效果好。

3.研究方法 3.1被试

从A市B县C小学中随机抽样60名四年级的学生。这些学生使用过计算机，且有过作为多媒体教学对象的经历。

3.2实验材料

本实验的材料为视觉空间工作记忆能力测试工具和两个它的界面运用了不同网页图标设计而成的课件以及用来测试学习效果的测试卷。

3.2.1 视觉空间工作记忆测试工具

测试工具是引用Kim.h.s开发的空间整合测试工具，然后我们用flash软件来实现Kim.h.s开发的空间整合测试工具的效果。它的整个测试过程是向被试呈现20对由点线构成的图片，每对图片有三张，每张图片中点的个数和排列分布是一样的，。在呈现图片时，每对图片的前两张都是每张各呈现2秒钟后再出现第三张图片，在出现第三张图片后进行判断前两张图片是否能联结成第三张图片，能的话话点击能，不能的话点击否，然后点击确定。这里的判断时间为4s钟，判断确定后会出现下面一对由点和线构成的图片。这里如果超时还未作出判断的话，也将会出现下一对要判断的图片。被试判断的同时后台也进行判断被试判断的是否正确并进行统计正确的个数，为来得及进行判断的作判断错误的处理，在最后显示被试判断的个数。经sp11.0分析，可信度为Alpha为=0.50。

3.2.2 不同形式图标条件下的学习课件

两个学习课件是运用flash软件制作的，界面运用了界面的一重要元素网页图标（icon）做导航，每页用了5个左右。两个课件内容和布局都是一样的，但页面设计时使用两个不同的图标，即纯粹的图标形式和和带有文字说明的图标，经sp11.0分析，可信度Alpha为=0.69。

3.2.3 学习结果测试题

学习结果测试题是根据课件内容及课件的界面特点设计的，有生字注音,内容填空,关于图标所表示的意思的选择题和填空题。经sp11.0分析，可信度为Alpha=0.65。

3.3实验设计和程序

本实验是2x2的实验，视觉空间工作记忆能力和课件是自变量,被试学习效果为因变量。实验是在A市B县一所名叫C的小学进行，实验环境为该校计算机机房，被试者每人一台电脑。首先运用视觉空间工作记忆能力测试工具对学生进行测试，在做正式测试之前首先让他们进行练习，使被试熟悉测试工具的使用。测试之后根据测试结果以平均基准分为高低两个等级。再把视觉空间记忆能力高的学生随机分成两组，把视觉空间记忆能力低的学生也随机分成两组。然后在条件相同的情况下实验组和对比组分别运用网络课程界面为纯粹的图标形式的课件和网络课程的界面为文字和图标有机结合形式的课件进行学习，学习时间为15分钟，学习之后，学生根据学习的课件的内容以及课件的页面特点填写设计好的测试卷，最后统计数据并进行分析。

3.4实验实施过程

实验在A市B县一所小学进行，实验整个过程一直有本人，该学校一名计算机老师以及该校60名四年级学生参与。实验先后分两次进行。首先，选定一个时间，利用10分钟对被试进行视觉空间工作记忆能力的测试。在测试前，研究者先对测试工具的运用进行讲解说明，使被试清楚软件的使用，减小误差。然后让学生运用测试工具进行测试。这一实验材料的指导语为“这是一个视觉记忆测试。在屏幕上将出现一系列图片,每张图片都是由点和线组成的，呈现两张后，再呈现第三张，前两张可能能联结成第三张，可能不能，再呈现第三张后请你既准确又迅速的作出判断，这里判断的时间为4s钟，前两张图片每张呈现的时间为2s钟。2s钟后将被掩蔽，接着出现第二张。判断完这一组图片或4s后仍没作出判断的话将会出现下一组图片，呈现的时间以前面的都一样，请大家集中注意力，认真做好测试。正式测试前让被试练习几次 ,直到被试理解主试给予的任务并顺利做出反应为止 ,然后正式实验。视觉刺激(即图片)呈现在计算机屏幕的中央。视觉空间工作记忆能力的值为被试判断正确的个数，等测试完成后，让被试将自己判断正确的个数（也就是测试工具最后记录显示的数字）记录下来上交给本人。

根据测试结果数据，使用sp11.0工具算出视觉空间记忆能力的中央值，中央值为11，然后根据中央值将视觉空间工作记忆能力分成高低两组，把中央值大于等于11的定义为视觉空间记忆能力高，小于11的定义为视觉空间记忆能力低。在此基础上再分别把高低两组随机分成两组。然后再把其中的高低两个组定为实验组，把另外的高低两个小组定为对比组。在第二天的某一节课，让实验组运用界面为纯粹图标形式的课件进行学习，对比组则运用界面上的图标带有文字的课件进行学习，大家学习的时间均为15分钟。在实验开始之前，我对学习的总体目标等做了些讲解。实验过程当中出现了许多状况，被试注意力不集中，影响了测试和学习的效果；还有个别同学不遵守纪律，影响旁边同学（环境变量）；还有在做测试卷时还出现询问旁边同学；还有各被试之间的水平存在差异等这些变量都将导致实验的误差。

3.5数据处理

运用sp11.0软件进行双变量分析，并统计分析的有效度设定为α=.05。

4．结果

视觉空间记忆能力高低不同的的被试利用不同的两种课件进行学习，所得的学习效果如表1所示。

表1 视觉空间记忆能力高低不同的被试运用不同课件进行学习的效果表 Total 能力高 能力低

M SD N M SD N SD N M

有文字图标 16 9.63 0.806 15 7.13 1.302 31 8.42 1.649

6.33 2.024 14 5.86 1.512 29 6.10 1.780

无文字图标 15

从上表可以看出视觉空间记忆能力高的学习者，运用了界面以有文字的图标设计的课件的人数N=16，平均值M=9.63，集团间标准偏差 SD=0.806，运用了界面以纯粹图标的形式设计的课件的人数N=15，平均值M=6.33，集团间标准偏差SD=2.024。视觉空间记忆能力低的学习者，运用了界面以有文字的图标设计的课件的人数N=15，平均值M=7.13，集团间标准偏差SD=1.302，运用了界面以纯粹图标的形式设计的课件的人数N=14，平均值M=5.86，集团间标准偏差SD=1.512。说明视觉空间工作记忆能力高的学习者在文字标注图标学习条件下学习效果明显好于在没有文字标注的图标学习条件中的学习效果。视觉空间记忆能力低的学习者在文字标注图标学习条件下学习效果明显好于在没有文字标注的图标学习条件中学习效果。均在文字标注图标学习条件下进行学习，视觉空间记忆能力高的学习者学习效果明显好于视觉空间工作记忆能力低的学习者。均在没有文字标注的图标学习条件中进行学习，视觉空间记忆能力高的学习者与视觉空间工作记忆能力低的学习者的学习效果无明显差别，即不论视觉空间工作记忆能力高还是低的学习者对无文字标注的纯粹的图标的理解能力都差不多，无明显差别。 视觉空间工作记忆能力高的学习者在文字标注图标学习条件下的学习效果明显好于视觉空间工作记忆能力低的学习者运用了界面导航以纯粹图标的形式设计的课件的学习效果。视觉空间工作记忆能力低的学习者在文字标注图标学习条件下的学习效果好于视觉空间工作记忆能力高的学习者运用了界面导航以纯粹图标的形式设计的课件的学习效果。

这些说明了视觉空间工作记忆能力低的学生和视觉空间工作记忆能力高的学习者均对有文字标注的图标的理解程度比对无文字标注的图标的理解程度要好。即对于不论是视觉空间工作记忆能力高还是低的学习者来说，有文字标注的图标比无文字标注的图标易于理解和记忆。

Source 能力

课件

能力 * 课件

注：*P

Type III Sum of Squares 43.363 51.582 59.619

df

15 1 11

Mean Square 2.891 51.582 5.420

F P .146 .000 .009

1.548

27.626 2.903

从该表格可以看出在其他条件相同的情况下，由于课件的不同，即课件界面运用了不同网页图标（icon）进行设计，学习效果有显著性差异，有效度为P=0.000，假设被肯定；视觉空间工作记忆能力单方面因素的不同，学习效果没有显著性差异，有效度为P=0.146，假设被否定；能力和课件这二因素有显著的交互作用，视觉空间记忆能力因素和课件因素相互影响，视觉空间工作记忆能力不同的学习者运用不同的课件，学习效果有显著性的差异，有效度为P=0.009，研究假设被肯定。

5．分析和讨论

5.1视觉空间工作记忆能力与网页图标（icon）设计的关系

对视觉空间工作记忆能力高低不同被试运用界面以不同网页图标进行设计的课件进行学习的学习效果的研究后发现，假设

1、假设

2、假设5被肯定，也说明了无论对于视觉空间工作记忆能力高的学习者还是低的学习者，有文字标注的图标比纯粹的图标易于理解记忆。由于年龄，受教育程度，知识经验等因素的不同，人的接受信息的能力、认知特点、思维方式也不同，对于低年级的学生来说，年龄小，知识经验少，接受信息的能力低，偏重于对具体形象的认知材料的识记。这一阶段学生对具体形象化的图象易于接受，不过要对图标有一定的理解为基础才达到预期目标的。就如一个房子的图标，像低年级的学生由于知识经验的限制，看到房子小图标大部分学生只能联想到实物房子，而想不到是表示返回首页的意思，所以加以文字说明，这样才能很好的理解。假设3被肯定，因为在对有文字标注的图标的理解的基础上，视觉空间工作记忆能力高和低的被试者在视觉加工能力，视觉辨别和视觉记忆上存在差异。假设4被否定，可能原因为由于图标没加文字说明，低年级的学生不理解其意思，且有可能在测试视觉空间工作记忆能力时，测试工具中界面图片显示的时间过短，被试者来不及反应，也可能在测试时，外界因素如学生注意力不集中，周围其他被试者等对视觉空间工作记忆能力的测试造成较大的影响。

5.2网页图标（icon）设计的一般特点及规律

根据人的视觉记忆容量，我们在网络课程页面设计时，一张页面应该放置网页图标个数为5-10个。图标，一种小型的、带有简洁图形的符号，它是采用仿真、模拟的方法进行设计，用简洁的图形符号模拟现实世界中的事物，使学习者很容易和现实中的事物联系起来。实验表明图标模拟现实世界中的事物，代表的意思要简洁明了，能让学习者一看就可以想到正确的意思的话，页面设计时运用到的图标，设计除了美观外，所要表达的意思也要和课件相符，且图标既要形象又要易于理解，如设计的图标加了文字说明的更直观，易于理解、辨别和记忆！根据视觉视觉工作记忆加工的方式——特征是以整合的方式进行存贮，或是特征以平行的方式进行存贮，在不超过视觉记忆容量的情况下，网页图标应多设计几个能表现图标要表达的意思的特征，这样视觉记忆通过各种分组和组织方式使越来越多的信息融合到一个组块当中,使大量的信息得到了记忆，让人更容易理解图标所要表达的意思。还有设计网页图标时一定要根据不同人的视觉空间记忆能力的不同，以及不同人的不同文化水平等，来设计网页图标，使它所包含的信息易于记忆和理解，能使学习者很容易和现实中的事物联系起来，明白图标所要表达的意思。

6结论与建议

根据本研究结果看，无论是视觉空间工作记忆能力高还是低 ,都是运用界面上的导航为文字标注的图标的课件进行学习得到的效果，比运用界面上的导航为纯粹的图标形式的课件进行学习得到的效果要好。这是由于低年级的学生接受能力低，理解能力低，知识经验不足的特点，运用文字进行说明，更易于理解，这样导航就比较清楚，不至于迷航，节省了许多时间，也提高了学习效率。这一结果中可以看出，人的认知特点和接受能力以及理解能力，知识经验与年龄和受教育程度有着很密切的关系。因此我们应该根据年龄、认知水平等的的不同，来设计图标。如针对低年级学生我们可以在图标的旁边加上小字进行说明，高年级的学生我们可以设计成当光标一移到图标上就出现文字说明等这些方法。为了美观，对部分的成人，我们也可以运用纯粹的图标形式。但只要可能,尽量使用文本来增强用户界面的图标效果．针对图标使用清楚、明确的文本标注提高图标的异读性，这样学习者在学习时就能目的明确的通过图标链接到要学习的内容，不至于迷航浪费不必要的时间。以最简单的学习路径学到要学的内容。对于加了文字标注的图标，请使用简单的和分隔清楚的字体，因为无论大小如何，您选择的字体样式都可能会影响可读性。只要可能，请尽量使用大多数用户都熟悉的、字符容易辨认的标准字体。每个单词的字母之间都应该保留空间，应该避免单词挤在一起。对于文字标注的内容，可以是描述操作的文本，也可以是表示链接的内容的文本。总的来说，我们在设计图标时，一定要注意在考虑其美观之外，还要使得它所要表示的意思清晰，简洁明了，易于理解，让人一看就能正确的联想到所要表示的意思。

7不足

对于视觉空间工作记忆能力与网页图标（icon）设计的研究，由于研究水平与实验条件的限制，存在了一些不足：

（1）实验对象，虽然按照视觉空间工作记忆能力测试结果进行随机分组，但是可能由于学生自身的条件、环境、测试工具等问题，测试结果可能出现些偏差，造成对后面的实验数据和分析产生影响。

（2）所选实验对象对于运用课件进行学习的经历少，所以对于课件的运用操作存在许多问题，不同学生存在的差异也挺大。

参考文献：

[1]Baddeley AD, Hitch G.Working memory[A].Bower GA.Recent advances in learning and motivation[C].New York: Academic Pre, 1974.6472667.[2]鲁忠义.工作记忆和语篇的阅读理解[N].河南师范大学学报教育科学版，2000年7月，第2卷，第3期 [3]沈模卫 易宇骥 张峰.n_back任务下视觉工作记忆负荷研究[J].心理与行为研究2003，(3):166-170 [4]吴海霞,张琴珠.人类的认识记忆在网上课程设计的应用[J ] .教育技术研究,2000 [5]谢幼如等.多媒体教学软件设计[M ].北京: 电子工业出版社.1998.8: 73～ 107.[6]袁南辉等.浅谈多媒体CA I 课件友好界面的设计[J ].电化教育研究, 2000.12: 50～ 52.[7]谢舒潇 叶长茂.浅谈网络课程的页面设计.高等理科教育[J]2004(1):101-102,104 [8]梁凤华 曹立人.视觉工作记忆研究进展[J].人类工效学，2004年6月，第10卷，第2 期

[9]刘晓平王兆新 陈湘川 张达人.视觉工作记忆中的子系统3[N].心理学报 2003 ,35 (5) :598～603 [10]张达人 唐孝威.工作记忆中央系统中视听记忆的实验研究[J].自然科学进展，第9卷，第3期 [11]禤宇明 傅小兰.视觉工作记忆中的特征捆绑*[J].心理科学进展，2005，13（4）：421~427 [12]周静 赵志靖.格式塔理论在网络教学页面设计中的应用[J].中国电化教育总第222期 [13]明章静 傅德荣.多媒体CAI课件的界面设计[J]《中国电化教育》1996.11 [14]宋永健 张朕.工作记忆研究的现状[N] 大 学 学 报 (教 育 科 学 版) ，2004 年 10月 第26 卷 第 5 期

推荐第9篇：网页设计的黄金比例你知道吗？【网页设计教程】

网页设计的黄金比例你知道吗？【网页设计教程】

作者: 一网学

最后更新时间：2015-08-19 10:22:52 作为一个网页设计师开始一个项目时经常会考虑到网页的布局，虽然现在很多人倾向使用 Grid c框架（如960，blueprint），但有时也需要设计一些独特的布局。今天我们要探讨如何将黄金分割理论运用到网页设计中，大部分涉及到的技术 也同样适用于其他的设计或艺术类工作，当然主要还是针对于网站设计布局。 黄金比例

它的值大约等于1.618。黄金分割从文艺复兴时就开始了。那个时代的艺术家 对黄金分割十分推崇，并且广泛运用在各种设计作品上，数百年来，在建筑、雕塑、绘画等领域都可以看到黄金分割的身影，今天我们同样可以将它运用在数字艺术上。

黄金分割是一个数学的术语，所以开始可能不是很好理解。我们可以简单举例讲解，假设有两个线段a和b，如果它们的长度a+b/a的值等于a/b，即a+b/a=a/b=1.618，那么黄金分割就成立了，a和b中间就是黄金分割点。 黄金分割的运用

以一个960px宽度的网页设计布局为例，假如我们要将这个网页分成两栏，如何才能找到他们的黄金分割点呢？

非常简单，从上面的数学公式我们知道a+b/a=1.618，960px就相当于a+b的值，所以只要用960/1.618=593，所以593px的位置就是黄金分割点。这样两栏的网页布局，左边栏宽度设为593px，右边栏宽度设为367px（960-593）就可以了。

这个方式同样适用于一些非固定的弹性的网页布局，只要通过同样的计算公式得到相应数值用相对单位（如百分比）表示即可，这样的网页设计是令人感觉最自然的。你也可以进一步将网页分成3栏、4栏。

当然黄金分割比例只是在设计上的一个指导而已，如果你可以打破这个规则又能保持网页设计页面的自然平衡也是可以的，作为一个通常的规则，经常把黄金比例用5：3来代替，虽然不是非常精确，但是却更直观和方便使用。

三分法

就像前面说过的一样，在设计网页时，不应该完全拘泥于某个设计理论，网页设计不需要完全遵循1.618这个数值。三分法是运用黄金分割的一个简单实用的方法。

三分法是用两条水平线和垂直线将构图在水平和垂直方向上三等分。这四条线交叉会形成四个点，这四个点称之为关键点，重要的设计元素最好放置在这四个 地方。很多网页设计已经在不知不觉中运用了三分法，如网站重要的信息（logo、导航栏）会放置在左上角，右上角可能会放置重要性稍微低一点的的内容。当 你在考虑放置标题、按钮和链接的位置时，就可以考虑用三分法来做参考了。当然，同样要灵活运用，不要“严格遵循”。

黄金矩形（Golden Rectangle）

在网页设计布局时，根据功能的不同将网页分成几个矩形，这些矩形的大小参照黄金分割比例，这样就形成了很多黄金矩形。这些矩形可以解决你在网页设计 布局中碰到的大部分困惑，比如你可以通过这些黄金矩形来决定flash或者图像该放在首页的什么地方，也可以决定侧边栏、网站底部内容的位置。一些电子商 务网站在设计产品的展示时尤其可以参考一下黄金矩形。

我们要为一个950px宽度局中页面来设计栏目，根据黄金比例原则，可以这样设计：这样的Web布局具有一定的平衡感，整个页面也比较和谐。

现在的页面布局一般都是比较弹性的设计，因为这样页面可以充满浏览者的屏幕空间，而不管视窗的大小尺寸是多少，这对于那些高分辨率宽屏的用户来说是有意义的。而对于坚持固定像素宽度的设计者来说，1024*768就是王道，摒弃了两端的使用人群。即使是固定宽度的设计，减掉浏览器的滚动条宽度和浏览者打开了工具栏的宽度之后，水平宽度就显得不够用了：

许多设计师在设计版面的时候都是随意制定一下宽度就开始他们的设计，往往会出现挑选的宽度没有考虑到说要表现的内容，在后期出现内容问题的时候就很受限制。还有很多开发人员在实现页面的时候，并没有完全依靠视觉效果图来实现，有时就大致量了一下然后根据以往经验来定制宽度，而这种宽度往往不能很好的适应他们的内容，所以，这时候，黄金比例的使用就很重要了。

黄金比例不仅在大的布局上可以使用，在小的栏目设计中也可以灵活使用。可以细化到很小的设计元素，比如一块图片信息展示区域：

根据内容反向推导出大的区域宽度，例如网页的首页上需要放一个宽度为500的banner图片，那么我们可以用黄金比例算出整个网页可以选择的合适宽度：500*1.62=810px，并不一定要是950或者800这些被很多人推崇的页面宽度。 推荐阅读：

怎样快速设计出一个极简风格网站【网页设计教程】 过渡的艺术！20个精巧微妙的渐变色网页设计 QQ空间怎样设计让广告动起来【网页设计】

推荐第10篇：PS设计网页立体效果图标阴影网页设计教程

最终效果

这里是作品预览图.点击此处预览全图.

新建PSD文件

1 开始创建文档(Ctrl+N); 高和宽均为1200 像素.

使背景图层可编辑

2 按照默认设置, Photoshop将会锁定背景图层因此你不能进行编辑.为了使它可编辑, 在图层面板双击背景图层 (如果图层面板未激活,按下F7触发).另外一种方法, 你可以在背景层上击右键,选择 “背景图层”.一旦双击之后, 将会弹出对话框默认如下显示).输入你背景图层的名字按下确定; 之后我们可以自由的编辑背景层.

创建背景层

3 现在我们的背景层可以编辑了,双击图层缩略图增加渐变图层样式; 根据下图设置样式参数.

4 创建新图层(Ctrl+Shift+N) 命名为 “header background“.选择矩形选区工具(M) 在画布顶端绘制矩形选区;选区大概150px高,宽度与画布相同.

5 使用任意颜色填充选区(Alt+Backspace)增加图层样式.

6 建立新层 (Ctrl+Shift+N) 标志为 “navigation background“.重复4 – 5步, 只是这次的选区只有50px高, 宽度仍然与画布一致,并且一定要放置在上面选区的下方.

7 填充选区(Alt+Backspace),任意颜色均可,并且增加一对图层样式,(颜色渐变以及描边选项).

你看到的应该是这样.

创建顶部

8 建立新层 (Ctrl+Shift+N)标志位”header“,选择矩形选区工作,在菜单栏调整宽度为850px 高度为150px.

9 将选区置于画布中央, 确保选区的底部在”navigation background”图层的描边之上.

10 填充选区 (Alt+Backspace) 选择任意颜色, 然后增添以下样式.

增加顶部文字

11 使用横排文字工具添加网站的标题和口号.设置参照下图.

效果看起来应该是这样的.

创建导航栏

12 创建新图层(Ctrl+Shift+N) 命名为 “navigation“.使用矩形选区工具(M),设置固定大小: 850px 宽 和 50px 高.

13 在顶部下面新建选区, 填充任意颜色.

14 现在,为你的 “navigation”层增加3种样式.

看起来应该是这样的.

15 使用横排文字工具(T) 在你的导航栏上面增加导航链接.

增添导航经过按钮

16选择圆角矩形工具(U) 设置半径为10px.

17 画出一个小矩形大小为80px x 50px.

18 使用矩形工具(M)在刚才圆角矩形的上半部分再画一个矩形.填充同样的颜色.

19在图层面板右击选择新建的图层并且复制.将新复制的图层180度旋转,编辑>变换 >旋转 180.最后, 使用移动工具将两个新建的图形紧挨在一起并且处于同一水平线上.

o

20 使用矩形选区工具切除不想要的部分.在新建的图层下半部份新建一个选区, 按下 Del键清除.

21 使用移动工具(V) 和方向键对齐两个图形, 确保它们不是直接重叠.按照下图所示, Ctrl + 点击图层面板中的缩略图载入较小图形的选区.

22 切换到较大图层按下del键清除不想要的部分.重复上述步骤,你将看到以下图形.

改变链接经过样式

23当你的链接经过按钮一旦完成你可以删除副本, 然后重命名为”nav hover“.现在开始,为它增加一组图层样式.

24 将 “nav hover”层移至 navigation 文字图层下方.将文字的颜色改为白色(#FFFFFF).

25 在你”nav hover” 按钮图层的下方, 新建一个图层(Ctrl+Shift+N) 命名为 “nav hover extra“.在本层上, 使用椭圆选区工具新建一个小圆,颜色设置为#A3002F.

26切除椭圆被导航栏挡住的下半部分,调整到合适位置之后再复制一份.

看起来应该是这样的.

创建内容区域

27 建立新图层(Ctrl + Shift + N) 命名为 “content area“.使用矩形选区工具, 新建选区宽度为850px , 与我们平时的框框一样,高度可以根据你的内容增加.填充任意颜色并且调整样式.

28 拖移”content area(内容区域)”图层到”navigation(导航)” 层下方然后使用移动工具(V)调整内容区域,是它与导航栏相交的部分像凹凸不平的线.

创建搜索框

29 新建图层(Ctrl+Shift+N) 命名为 “search field“在导航区域的右边新建矩形选区.

30 选择 编辑 >填充(Shift+F5) 填充白色(#FFFFFF), 增加描边样式.

31 使用横排文字工作在搜索区域插入文字.

32 紧挨着搜索区域的地方,使用矩形选区工具(M)新建另外矩形.

33 填充任意颜色并且为图层加入渐变叠加和描边两种图层样式; 根据下面图片设置.

看起来应该是这样的.

创建特色区域

34 建立新层 (Ctrl+Shift+N)命名为”featured area“,使用圆角矩形工具新建矩形,圆角半径为10px.

35 使用多边形工具(L) 创建锐利的箭头指向左上部分.为箭头填充同样的颜色.

36 现在为你的特色区域图层增加一对图层样式(渐变叠加和描边) .

填充特色区域内容

37 建立新层(Ctrl+Shift+N) 命名为 “featured border” 使用矩形选区工具(U), 在特色区域里面新建矩形.

38 按Ctrl键点击区域缩略图载入选区, 然后点击”旋转>修改 >收缩”.收缩区域威10px, 然后按下OK.

39 载入你想要的图片 (我使用一些花的图片), 打开ps, 复制图片到你的剪切板(Ctrl + C).确保我们上一步创建的选区仍然处于激活状态,点编辑 >粘贴入(Shift+Ctrl+V).图片就会粘贴到选区里面.

40 在图片右侧增加虚拟的标题和文字.

创建内容区域的三维绸带

41 使用和导航经过按钮类似的方法创建左边部分, 区别在于这次重叠区域更加长,并且是水平调整(如果需要请重新跳回阅读).

42 在绸带的结尾部分(右手边),使自定义形状工作(L)创建三角形 然后按下del键删除不需要部分.最后, 增添图层样式和虚拟文字.

43 复制三维绸带,点击图层选择编辑 >变换>水平翻转.使用移动工具调整(V) 到右边; 他们将作为侧边栏的标题部分

44 在每个标题下面增加文字或者一两张图片.

创建页脚

45 再次创建鼠标经过按钮(或者, 你可以简单复制上面已经做过的).

46 根据下图颜色列表更改渐变样式.

47 合并并且旋转该层,通过 编辑>变换 >逆时针旋转90°.移动到图层左边.

48 复制该图形通过编辑>变换>水平翻转.移动到图层另外一边.

49 将两个图形合并到同一个层(Ctrl+E), 放大其中任一个图形 (Z) , 类似下图创建选区,选择编辑>自由变形(Ctrl+T).

50 选择中间的锚点拖拉到画布的另外一边.

看起来应该类似这样.

51 最后,使用横向文字工具写入你页脚的信息.

第11篇：网页设计教程ASP入门教程静态网页和动态网页

网页设计教程-ASP入门教程静态网页和动态网页

静态网页与动态网页的区别在于Web服务器对它处理方式不同。了解这种区别对于ASP概念的理解至关重要。

1、静态网页

静态网页是标准的HTML文件，其文件扩展名是。htm或。html。它可以包含HTML标记、文本、Jave小程序、客户端脚本以及客户端ActiveX控件，但这种网页不包含任何服务器端脚本，该页中的每一行HTML代码都是在放置到Web服务器前由网页设计人员编写的，在放置到Web服务器后便不再发生任何更改，所以称之为静态网页。

步骤1：Web浏览器请求静态网页。

步骤2：Web服务器查找静态网页。

步骤3：Web服务器将静态网页发送到请示浏览器。

当用户单击Web页上的某个链接、或在浏览器中选择一个书签、或在浏览器的“地址”框中输入一个URL地址并单击“转到”时，浏览器向Web服务器发送一个页请求。

Web服务器收到该请求，通过文件扩展名（。htm或html）判断出是HTML文件请求，并从磁盘或存储器中获取适当的HTML文件。

Web服务器将HTML文件发送到浏览器，由浏览器对该HTML文件进行解释，并将结果显示在浏览器窗口中。

2、动态网页

动态网页与静态网页之间的区别在于：动态网页中的某些脚本只能在Web服务器上运行，而静态网页中的任何脚本都不能在Web服务上运行。当Web服务器接收到对静态网页的请求时，服务器将该页发送到请求浏览器，而不进一步的处理。当Web服务器接收到对动态网页的请求时，它将做出不同的反映：它将该页传递给一个称为应用程序服务器的特殊软件扩展，然后由这个软件负责完成页。应用服务软件与Web服务器软件一并安装、运行在同一台计算机上。

步骤1：Web浏览器请求动态网页。

步骤2：Web服务器查找该页并将其传递给应用程序服务器。

步骤3：应用程序服务器查找该页中的脚本命令并完成页。

步骤4：应用程序服务器将完成的页传递回Web服务器。

步骤5：Web服务器将完成的页发送到请求浏览器。

当用户单击Web页上的某个链接、在浏览器中选择一个书签、或在浏览器的“地址”框中输入一个URL地址并单击“转到”时，浏览器向Web服务器发送一个页面请求。

Web服务器收到该请求，通过文件扩展名（。asp）判断出是动态网页文件请求，并从磁盘或存储器中获取适当页然后将该页传递给相应的应用程序服务器。

应用程序服务器查找该页中的脚本命令，并通过在服务器上执行这些脚本命令最终完成页，然后将脚本程序代码从页上删除，由此得到的结果是一个静态网页。

应用程序服务器将所生成的页传递回Web服务器。

Web服务器将该页发送到浏览器，当该页到达客户端计算机时，所包含的全部内容都是纯HTML代码，由Web浏览器对这些HTML代码进行解释，并将结果显示在浏览器窗口中。

第12篇：网页设计学习教程 环球大学生智库

Chapter 1

网页设计基础概述 通 过本章的学习，读者可以了解网站和网页的有关概念、网页设计流程和网页制作软件的基本知识等，并可以认识网页设计的步骤与原则，为设计制作网页打下良好的基础。 重点提示：

 网站制作的常用软件  网站设计的流程  网页的基本组成元素  申请免费空间与发布网站

Chapter 1

网页设计基础概述

互联网的诞生和快速发展，给网页设计师提供了广阔的设计空间。相对传统的平面设计来说，网页设计具有更多的新特性和更多的表现手段，借助网络这一平台，将传统设计与电脑、互联网技术相结合，实现网页设计的创新应用与技术交流。网页设计是传统设计与信息、科技和互联网结合而产生的，是交互设计的延伸和发展，是在新媒介和新技术支持下的一个全新的设计创作领域。

如今的网页设计往往要结合动画、图像特效与后台的数据交互等，而Dreamweaver CS

3、Photoshop CS3和Flash CS3作为Adobe公司经典的常用网页设计软件，是目前网页制作的首选工具。它们具有强大的网页设计、动画制作和图像处理功能，在静态页面设计、图片设计和网站动画设计等方面，都可以使网站设计人员的思想体现得淋漓尽致。

1.1 全面认识网页

在进行网页设计之前，需要对网页的一些基础知识进行了解，对网站的运行原理与制作过程有一个宏观把握。并从零开始，一步一步体验综合应用Dreamweaver CS

3、Photoshop CS

3、Flash CS3等软件进行网页设计，感受网站设计的无穷乐趣，从而踏上网页制作之路。

1.1.1 网站、网页和主页

网站（Website）是指在因特网上根据一定的规则使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布（或浏览）想要公开的资讯，或者利用网站来提供相关的网络服务。

现在的许多公司都拥有自己的网站，他们利用网站来进行宣传、产品资讯发布和招聘等。如图1-1所示即为中央电视台的门户网站。

网页（Web Page）是构成网站的基本元素，是承载各种网站应用的平台。

网页实际上是一个文件，存放在世界某个角落的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当用户在浏览器地址栏中输入网址之后，经过一段复杂而又快速的程序运作，网页文件就会被传送到用户的计算机中，再通过浏览器解释网页的内容，最终展示到用户的眼前。

网页有多种分类，笼统意义上的分类是动态页面和静态页面。

静态页面多通过网站设计软件来进行重新设计和更改，技术实现上相对比较滞后。当然，现在的某些网站管理系统也可以直接生成静态页面，这种静态页面通常可称为伪静态。静态页面内容是固定的，其后缀名通常为.htm、.html、.shtml等，如图1-2所示。

动态页面是通过执行ASP、PHP、JSP等程序生成客户端网页代码的网页，通常可通过网站后台管理系统对网站的内容进行更新和管理，如发布新闻、发布公司产品、交流互动、博客和网上调查等，都是动态网站功能的一些具体表现。

3 Dreamweaver+Photoshop+Flash网页设计全方位学习

Part 1网络知识基础篇

图1-1 中央电视台主页

图1-2 静态页面

动态页面的常见扩展名通常有.asp、.aspx、.php、.jsp、.cgi等，如图1-3所示。 网站主页（Home Page）也可以理解为网站的封皮，因此也被称为首页，它是整个网站的主索引页。网站首页名称是特定的，一般为index.htm、index.html、default.htm、default.html、default.asp或index.asp等。如图1-4所示即为新起点工作室的网站主页。

图1-3 动态页面

图1-4 新起点工作室网站首页

网站、网页和主页是3个功能不同但又紧密联系的概念，一个网站由多个网页元素构成，若干个网页又通过主页链接成一个完整的网站系统。

1.1.2 HTML的组成及语法

HTML（Hyper Text Markup Language，超文本标记语言）是用来描述WWW上超文本文件的语言，HTML文件可对多平台兼容，通过网页浏览器能够在任何平台上阅读。

HTML能够将Internet中的文字、声音、图像、动画和视频等媒体文件有机地组织起来，最终向用户展现出五彩缤纷的页面。此外，它还可以接收用户信息，与数据库相连，实现用户的查询请求等交互功能。

1．HTML语言的组成

HTML文档由HTML、HEAD和BODY三大元素构成。

Chapter 1

网页设计基础概述

是最外层的元素，表示文档的开始，即浏览器从开始解释。是HTML文件头标记符，即文档头，包含对文档基本信息（包含文档标题、文档搜索关键字、文档生成器等属性）描述的标记。位于首部下面，用于定义一个HTML文档的主体部分，包含对网页元素（文本、表格、图片、动画和链接等）描述的标记。

下面通过记事本程序来创建一个名为index.html的HTML文件，具体的操作步骤如下。

Step1 打开记事本程序之后，将自动创建一个名为“文本文档.txt”的文本文件，在其中输入代码，如图1-5所示。

Step2 在程序代码输入完毕之后，选择【文件】→【另存为】命令，打开【另存为】对话框，将其保存为扩展名为.html格式的文件，如图1-6所示。

Step3 双击打开新创建的index.html文件，在IE浏览器中预览所创建的网页，如

图1-7所示。

2．HTML的语法

图1-5 输入代码

图1-6 保存为网页格式

图1-7 页面预览

HTML语法由标签（Tags）和属性（Attributes）组成。标签又称标记符，HTML是影响网页内容显示格式的标签集合，浏览器主要根据标签来决定网页的实际显示效果。在HTML中，所有的标签都用尖括号括起来。

标签可分为单标签和双标签两种类型。

（1）单标签

单标签的形式为，最常见的如强制换行标签、分隔线标签、插入文本框标签。

（2）双标签

双标签的形式为对象，如定义“奥运”两字大小为5号，颜色为红色的标签为：奥运。

需要说明的是：在HTML语言中大多数是双标签的形式。

HTML中常用的标签如下：  和

标签

在HTML文档中无法用多个回车、空格和Tab键来调整文档段落的格式，要用HTML标签来强制换行和分段。（即Break）是换行标签，它是单独出现的。的作用相当于回车符。

即Paragraph（段落）。

标签用于划分段落，作用是插入一个空行，可以单

5 Dreamweaver+Photoshop+Flash网页设计全方位学习

Part 1网络知识基础篇

独使用，也可以成对使用。

 显示图片标签

标签常用的属性有src（图片资源链接）、alt（鼠标悬停说明文字）和border（边

框）等。

 „标题栏标签

标签用来给网页命名，网页的名称将被显示在浏览器的标题栏中。  创建链接标签

标签常用的属性有href（创建超文本链接）、name（创建位于文档内部的书签）、target（决定链接源在什么地方显示，参数有_blank、_parent、_selft和_top）等。

 „创建表格标签 标签常用的属性有cellpadding（定义表格内距，数值单位是像素）、cellspacing（定义表格间距，数值单位是像素）、border（表格边框宽度，数值单位是像素）、Width（定义表格宽度，数值单位是像素或窗口百分比）、background（定义表格背景）、和（表格中一个表格行的开始和结束）；和（表格中行内一个单元格的开始和结束）。

 „创建表单的标签

标签常用的属性有action（接收数据的服务器的url）、method（HTTP的方法，有post和get两种方法）和onsubmit（当提交表单时发生的内部事件）等。  „创建滚动字幕标签

在和标签内放置贴图格式则可实现图片滚动。常用的属性有direction（滚动方向，参数有up、down、left和right）、loop（循环次数）、scrollamount（设置或获取介于每个字幕绘制序列之间的文本滚动像素数）、scrolldelay（设置或获取字幕滚动的速度）、scrollheight（获取对象的滚动高度）等。

 生成注释标签

注释的目的是为了便于他人阅读代码，注释部分只在源代码中显示，并不会出现在浏览器中。

上面列举了HTML中最常用的几种标签和解释，对于初学者来说并不需要全部背出来，简单的了解即可。在后面的学习中将会发现，Dreamweaver标签库可以很方便地帮助用户找到所需的标签，并根据列出的属性参数使用它。

1.1.3 网页设计的基本原则

在网页设计工作开始之前，需要先了解网页的运行环境和阅读对象等，另外，还要注意设计专家有哪些关键技巧？又有哪些陷阱要避免？这对设计出来的页面是否是人们喜闻乐见、流连忘返起关键作用。

一个优秀的页面一般需要遵循如下原则：  明确内容

首先应该考虑网站的内容，包括网站功能和用户需求，整个设计都应该围绕这些方面来进行。不了解网页用户的需求，设计出的网络文档几乎毫无意义，如要设计一个网上电子交

Chapter 1

网页设计基础概述

易系统，就没有必要罗列一些文学艺术等内容，否则只会引起用户的反感。

 色彩和谐统一

网页设计要达到传达信息和审美两个目的，悦人的网页配色可以使浏览者过目不忘。网页色彩设计应该遵循“总体协调，局部对比”的原则。初学者往往驾驭不好颜色的搭配，因此，在学习各种色彩理论的同时，还应多参考一些著名网站的用色方法，对于设计出美丽的网页起到事半功倍的效果。

 打开速度要快

相信大家都遇到过这样的情况，好不容易从搜索引擎中找到了感兴趣的链接，却最终因迟迟打不开而放弃。根据统计，一般人从选择要看的页面算起，经过Internet的下载到下载完毕，可以忍受的时间大约只有30秒。

网页打开速度除了跟服务器性能和带宽容量有关之外，更多的是与网页文件大小和代码优劣等有直接关系。因此，一定要注意网页的大小应控制在50KB以内为宜，太多、太大的图像往往会影响网页下载速度。因此，需要在网页的设计过程中对图片进行优化，在图像质量与显示速度两方面取得一个平衡。

 导航明朗

导航的项目不宜过多，一般用5～9个链接比较合适，可只列出几个主要页面。如果信息量比较大，确实需要建立很多导航链接时，则尽量采用分级目录的方式列出，或者建立搜索的表单，让浏览者通过输入关键字即可进行检索。

 定期更新

除了及时更新内容之外，还需要每隔一定时间对版面、色彩等进行改进，让浏览者对网站保持一种新鲜感，否则就会失去大量的浏览者。

平台的兼容性

最好在不同的浏览器和分辨率下进行测试，基本原则是确保在IE 5以上的版本中都有较好效果，在1024×768和800×600的分辨率下都能正常显示。此外，还需要在网页上尽量少使用Java和ActiveX编写的代码，因为并不是每一种浏览器都能很好地支持它们。

1.2 网页制作的常用软件

网页所包含的内容除了文本外，还常常有一些漂亮的图像、背景和精彩的Flash动画等，以使页面更具观赏性和艺术性。在网页中方便地添加这些元素，需要借助一些网页制作常用软件。

1.2.1 网页布局软件Dreamweaver CS3 Dreamweaver是一款极为优秀的可视化网页设计制作工具和网站管理工具，支持当前最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash和Shockwave等多媒体格式，以及动态

7 Dreamweaver+Photoshop+Flash网页设计全方位学习

Part 1网络知识基础篇

HTML和基于团队的Web创作等，在编辑模式上允许用户选择可视化方式或源码编辑方式。

借助Dreamweaver CS3软件，用户可以快速、轻松地完成设计、开发、维护网站和Web应用程序设计的全过程。Dreamweaver CS3是为设计人员和开发人员构建的，它提供了一个在直观可视布局界面中工作还是在简化编码环境中工作的选择。与Photoshop CS

3、Illustrator CS

3、Fireworks CS

3、Flash CS3 Profeional和Contribute CS3软件等的智能集成，有效地确保了用户有一个有效的工作流。

Dreamweaver CS3新功能中包含了CSS工具，可用于构建动态用户界面的Ajax组件，以及与其他Adobe软件的智能集成。

Dreamweaver CS3网页编辑软件的启动界面如图1-8所示。

图1-8 Dreamweaver CS3的启动界面

1.2.2 图形图像处理软件Photoshop CS3 Photoshop是一款著名的图像处理软件，它功能强大，操作界面友好，使用它可以加速从想象创作到图像实现的过程，因此，它得到了广大第三方开发厂家的支持，也赢得了众多用户的青睐。

Photoshop CS3为Adobe公司的核心产品，它不仅完美兼容了Windows Vista操作系统，更重要的是它新增加了几十个全新特性，如支持宽屏显示器的新式版面、集20多个窗口于一身的dock、占用面积更小的工具栏、多张照片自动生成全景、灵活的黑白转换、更易调节的选择工具、智能的滤镜、改进的消失点特性和更好的32位HDR图像支持等。另外，Photoshop CS3首次开始分为两个版本，分别是常规标准版和支持3D功能的Extended（扩展）版。

Photoshop CS3图形图像处理软件的启动界面如图1-9所示。

图1-9 Photoshop CS3的启动界面

Chapter 1

网页设计基础概述

1.2.3 动画制作软件Flash CS3 Flash软件可以实现由一帧帧的静态图片在短时间内连续播放而造成的视觉效果，是表现动态过程、阐明抽象原理的一种重要媒体。尤其在以抽象教学内容为主的课程中，更具有特殊的应用意义，如在医学CAI课件中使用设计合理的动画，不仅有助于学科知识的表达和传播，使学习者加深对所学知识的理解，同时也可为课件增加生动的艺术效果。

在Flash CS3中，工具栏变成CS3通用的单双列，面板可以缩放成图标，也可以是半透明的图层。另外，在编程方面也有不少改进，如对导入AI文件的支持、可以导入分层的PSD文件、决定哪些层需被导入等。此外，还可以保留图层上的组、样式、蒙板、智能滤镜和路径的可编辑性等。Flash CS3动画制作软件的启动界面如图1-10所示。

图1-10 Flash CS3启动界面

1.2.4 软件间的相互关系

如果网页中只有静止的图像，那么即使这些图像再怎么精致，也会让人感觉网页缺少生动性和活泼性，会影响视觉效果和整个页面的美观。因此，在网页的制作过程中往往还需要适时地插入一些动态图像。

使用Photoshop，除了可以对网页中要插入的图像进行调整处理外，还可以进行页面的总体布局并使用切片导出。对网页中所出现的GIF图像按钮也可使用Photoshop CS3进行创建，以达到更加精彩的效果。如图1-11所示即为用Photoshop绘制的几个网页按钮。

图1-11 用Photoshop绘制的网页按钮

Photoshop还可以为创建Flash动画所需的素材进行制作、加工和处理，使网页动画中所表现的内容更加精美和引人入胜。

在一般网页设计中，使用Flash主要是制作具有动画效果的导航条、Logo以及商业广告条等，动画可以更好地表现设计者的创意。由于学习Flash本身的难度不大，而且制作含有Flash动画的页面很容易吸引浏览者，所以Flash动画已成为当前网页设计中不可缺少的元素。 Dreamweaver是一款可视化的网页制作软件，它包含了可视化编辑和HTML编辑的软件包。在Dreamweaver中可以对HTML的网页文件进行视图的可视化编辑，以使没有HTML

9 Dreamweaver+Photoshop+Flash网页设计全方位学习

Part 1网络知识基础篇

基础的初学者也能轻松地制作出网页，大大降低了网页制作的难度。对于专业的设计者，使用Dreamweaver可以在不改变原有编辑习惯的同时，充分享受可视化编辑带来的益处。 在网页设计中，Dreamweaver主要用于对页面进行布局，即将已经创建完成的文字、图像和动画等元素在Dreamweaver中通过一定形式的布局整合为一个页面。此外，在Dreamweaver中还可以方便地插入ActiveX、JavaScript、Java和Shockwave等，从而使设计者可以创建出具有特殊效果的精彩网页。

1.3 网站设计的流程

网站建设开发的大致流程为：首页效果出来→确认→提出修改意见→确定前台→后台数据库开发及编程→前、后台数据库对接→网站测试→网站交付准备→网站完成。

在网站协议订好后，首页部分会根据具体复杂程度出具一个效果图，用户可在此效果图的基础上提出修改意见（当然也可以完全否决，因为这仅是一个初稿）。在前台效果图确定之后，设计师们开始开发网站后台，来实现用户在网站建设中所要实现的功能。在完成后台建设后开始进行前后台对接，也即把前台具体的界面按钮跟后台代码相匹配，这样的界面才能有效地发挥其作用。

在前、后台对接好之后，由于各种各样的原因，总会有或多或少的漏洞或错误出现，此时的后期网站测试就尤其重要，这是高质量网站出炉的必要条件。但往往一些小型公司会忽视这一点，致使小毛病造成大错误，要么网站打不开，要么打开很慢，要么造成网站的数据丢失，俗语说的好：“小洞不补，大洞吃苦。”后期网站测试对网站的质量保证起着举足轻重的作用，这也是网站制作公司对客户负责任的态度问题。

在网站建设测试完成之后，即可把所有网站的源程序打包发给客户，客户就可以拥有自己的网站了。同时，还需要把FTP的用户和密码以及网站后台管理密码交付给客户，客户把网站“搬”上网，数据传到服务器中。至此，网站交付成功之后，网站制作公司的任务就可以过渡到网站及网络维护了。

1.3.1 注册域名与申请空间

在当今信息爆炸的时代，域名被誉为网络时代的“环球商标”，是企业、机构或个人进入国际互联网必不可少的身份证明，也是宣传企业产品，提高企业知名度的重要手段。

网站的命名其实也很有学问，一个好的名字可以为商业网站带来巨大的利润。个人网站的命名也应有新意，切中主题，使之能够引起浏览者注意，而又不落俗套。

1．注册域名

域名是企业、机构或个人的网络标识，是通过计算机登录网络的企业、机构或个人在该Internet网中的地址。国际域名分为.com、.net和.org 3种。其中，最具商业价值的是.com域名，拥有一个涵义深刻且简单易记的域名，是一个网站成功的首要前提。

Chapter 1

网页设计基础概述

国际域名的资源十分有限，为保证更多企业、机构或个人申请的要求，各个国家和地区在域名最后加上了国家标识段，由此形成了各个国家和地区自己的国内域名，如中国.cn、日本.jp等。另外，还有中文域名，如中文国际域名（中文.com）和CNNIC中文通用域名（中文.cn）等（国际域名很显然具有更高的级别）。

注册域名是企业机构或个人在互联网上建立自己网站的第一步，只有注册了域名，才能在互联网上让客户知道自己的位置。

2．申请空间

一个完整的网站系统其实就是一组文件，它提供给网络用户浏览。这些文件要占据一定的硬盘空间，即所谓的网站空间。除一些大型网站和占用空间大的站点采用自己建设的Web服务器外，一般建站的用户均采用虚拟主机来完成，因此，一般的网站空间也叫虚拟主机。 一般来说，企业网站的空间通常都较小，多采用100MB～200MB左右的空间即可。用以提供影视下载、在线点播服务等娱乐性质的网站要大一点。大型网站往往需要用户自己组建Web服务器。

当网页的选题确定好之后，还需要确立网站的总体结构。总体结构的确立至关重要，它是网站设计能否成功的关键所在。如果对网站的总体结构了如指掌，设计起来就会得心应手，游刃有余。但如果网站的总体结构比较混乱，在设计的过程中也难免会颠三倒四，无法将自己的想法表达出来，这样的网站一般不会很成功。网页的组织结构一般采用树型结构。

1.3.2 新建站点与收集资源

域名申请好了，网站空间也有了，但这时刚建立的站点却是空的，此时就可以开始进行网站规划，用专门的网站开发软件创建站点。网站规划就像软件开发中的系统设计环节，往往需要用户花费大量时间详细规划，但“磨刀不误砍柴功”，总比出了问题再去修改要好

得多。

网站规划包括确定站点的结构目录和图像、多媒体文件存放的位置、导航条的数目、网页整体风格、色调等。当用户在确定好站点目标之后，即可开始收集有关网站的资源信息。 网站所包含的资源信息一般有如下几种：  文字资料

文字是一个网站的主体，如果离开了文字，即使再华丽的图片，浏览者也会觉得不知所云。所以要制作一个成功的网站，必须提供足够的文字资料。

 图片资料

图文并茂的介绍才会使浏览者不觉得枯燥无味。文字解说的同时加上适当的图片，可以给浏览者留下更深刻的印象。

 动画资料

动画可以增加页面的动感效果，让网站设计者所表现的内容更加栩栩如生。

 其他资料

即不属于文字、图片和动画资料的其他一些资料，如需要提供给浏览者下载的软件、视

11 Dreamweaver+Photoshop+Flash网页设计全方位学习

Part 1网络知识基础篇

频、音乐文件、交互表格以及其他演示资料等。

现在网页上大部分图片和动画都是用Photoshop和Flash两个软件完成的。使用Photoshop软件可以制作各种静态按钮、实现网页背景特效，而使用Flash软件则可以在低文件传输速率下实现高质量的动画传输，而且只要求用户在浏览器中安装Flash插件就可以了。

在图片和动画都制作好之后，还需要用Dreamweaver网页编辑软件将图片和动画整合到一起，并将其发布成网页的形式，以便准确无误地传送到浏览者那里。

现在的网站几乎都是通过数据库进行驱动的，因此，用户如果想要访问其中的数据，就需要用到ASP、JSP、PHP等语言进行网页编程（这不是本书涉及的内容，有兴趣的读者可以参考其他相关书籍）。

1.3.3 实现FTP服务器的上传与下载

FTP（File Transfer Protocol，文件传输协议）的主要作用就是让用户连接上一个远程服务器（这些服务器上运行着FTP服务器程序），查看远程服务器有哪些文件，并把文件从远程服务器上复制到本地计算机，或把本地计算机的文件发送到远程服务器中去，这个过程就是FTP的服务器上传与下载。

FTP传输可以用Windows中的FTP命令，也可以借助于一些专门的FTP软件，如著名的LeapFTP软件、FlashFXP软件和CuteFTP软件等，下载与上传都支持文件续传和远程文件直接编辑等功能。如图1-12所示即为LeapFTP软件的主窗口界面，如图1-13所示即为FlashFXP软件的主窗口界面，如图1-14所示即为CuteFTP软件的主窗口界面。

一个网页的成功与否，很重要的一个因素在于它的构思，只有好的创意及丰富翔实的内容，才能让网站充满生机。

在网站发布运行之后，还需要经常对站点进行维护。除更新网页内容和优化网站功能之外，往往还需要改进网站布局、色彩和特效等，让网站与时俱进，紧跟时代的潮流。此外，还需要不定期地删除那些过期的滞留文件，并定时备份数据库以防不测。

图1-12 LeapFTP的主窗口

图1-13 FlashFXP的主窗口

Chapter 1

网页设计基础概述

图1-14 CuteFTP的主窗口

1.4 网页的基本组成元素

在制作自己的网站之前，先要确定自己网页的内容。个人网页的设计内容可从自己的专业或兴趣爱好方面多做些考虑，如自己在计算机、书法和绘画等方面有独到的工夫，即可以此专题作为网站的内容；如果只想构建一个论坛、Blog、网上商城等网站，则可以通过一些ASP、CGI、PHP、JSP等网站源程序，经过简单的设置与调试即可实现。

在对自己未来的网页有了一个初步的构思后，还需要有丰富的内容去充实。网页的基本组成元素有文字内容、图片和超级链接3个。而Internet的最迷人之处就在于它的信息极大丰富，如果一个网站只有漂亮的外观而实质内容很少，就不会有多少人在网页中停留。但需要注意的是，网站的内容必须合法。

1.4.1 网页中的文本

文本是网页中最基本的元素，也是网页的主体，规划合理、美观的文本能带给浏览者一种清新的感觉。文本的添加方式既可以手工逐字逐句地输入，也可以把别的应用程序中的文本直接粘贴到网页编辑窗口中。

在网页中输入文本时，要考虑到字体的通用性问题，也即用户电脑对字体的兼容性，所以最好选用系统自带的某种字体。除需要设计与页面搭配的美观字体外，还需要设置一种默认的字体，以便在用户电脑不支持这种字体时可以使用其他指定的字体替代。

此外，文本的大小、颜色和其他样式也需要仔细考虑，然后再配合精美的图片，才能创造精美的页面。如图1-15所示即为网易论坛的文字风格。

1.4.2 网页中的图片与动画

图片在网页中的作用也是无可替代的，一幅精美合适的图片，往往可以胜过10篇洋洋洒

13 Dreamweaver+Photoshop+Flash网页设计全方位学习

Part 1网络知识基础篇

洒的文字。如图1-16所示即为中国古曲网的首页，在页面中文本搭配了适当的图片，使得页面经典古朴又充满着现代流行气息。

图1-15 网易论坛的文字风格

图1-16 中国古典网的图文风格

1.4.3 网页中的动画

一个引人注目的网站，仅有文字和图片是远远不够的，也很难吸引浏览者的目光。适当地添加一些精美的网络动画，不仅可以让网页如虎添翼，而且可以使展示的内容变得栩栩如生。如图1-17所示即为可口可乐公司网页中的动画。

图1-17 可口可乐公司网页中的动画

此外，绝大多数网站还需要有一个属于自己的漂亮的Logo。Logo就是网站的形象标志，网站Logo就是指网站标志，像公司名片上印上的公司标志一样，通常企业网站的Logo与公司标志相同。当然，如果是新成立的公司，还没有自己的标志，也可以选择设计一个Logo，根据网站的需要也可以选择另外设计一个网站专用的Logo，设计费用根据用户的实际要求高低和难易度来商议。

对于某些具有商业性质的网站而言，在主页面或浏览量较大的页面上还会有一些Banner。Banner是指横幅广告或通栏广告，在网页中，除了小图片、图标和文字外，通常还有一个占较大篇幅和重要位置的广告位，往往称其为Banner。

Chapter 1

网页设计基础概述

1.5 申请免费空间与发布网站

要建立一个网站，就需要选择用何种方法来实现它。现在可用来设计网站的方法很多，可以使用HTML语言来编辑，也可以使用网页制作工具（如Macromedia Dreamweaver MX、Microsoft FrontPage等）来设计网站。对初学者来说，可以下载ASP、ASP.Net、CGI、PHP、JSP等网站源程序，不用花费太多时间就可以制作出一个漂亮的网站。当然，如果对源代码比较熟悉，也可以对网站进行修饰，制作出高水平的网站。

1.5.1 申请免费空间流程

目前大型门户网站提供的博客和邮箱空间一般都很大，但提供免费空间服务的服务器已经不多了。一些网站为了增加自己网站的点击量，宣传自己的产品，提供免费空间就成了一种有效的宣传手段。其实现在的收费空间也不贵，而且提供了稳定快速、多项扩展的服务，是企业用户的最佳选择。但对于个人主页，免费空间已经足够了。

用户只要在搜索引擎（如百度http://www.daodoc.com，搜狐http://www.daodoc.com等）中输入关键字“免费空间”，就可以找到一些提供免费空间的网站，如免费空间网（http://www.daodoc.com/freespace）就是专门定期发布一些申请免费空间的链接的网站，这些免费空间可以方便用户试用，从而寻找一个相对较好的网站空间。

这里选用bbsgood论坛（地址为http://bbs.bbsgood.com/freehost.asp）提供的空间作为示范，讲解申请免费空间的流程，如图1-18所示。该网站提供的免费空间是100MB，支持ASP动态网页和一些常用的组件（如上传组件、图片水印组件等）。

图1-18 申请免费空间

具体的操作步骤如下。

Step1 单击页面上【注册】按钮，打开【BBSGOOD的服务条款和说明】页面，仔细阅读后单击【同意】按钮，进入新用户注册页面，如图1-19所示。

Step2 单击【确定】按钮进入空间申请页面，在其中可以选择服务器类型（网通或电信）、确定域名、设定ftp密码等，如图1-20所示。

15 Dreamweaver+Photoshop+Flash网页设计全方位学习

Part 1网络知识基础篇

图1-19 输入注册信息

图1-20 申请空间信息

Step3 填写完申请信息后单击页面下方的【已经确认，马上申请GO】按钮，即可出现一个申请提交成功的提示。 Step4 一般情况下，在提交申请成功后24小时空间就可以开通，此时重新登录网站，即可出现如图1-21所示的管理页面，提示已经注册成功。 Step5 此时打开IE浏览器，并在地址栏中输入“http://***.my.bbsgood.com”，即可看到刚申请空间的首页，如图1-22所示即为虚拟主机开通成功的提示页面。

图1-21 注册成功

图1-22 主机开通成功

Step6 单击页面中的【进入管理】超链接，即可进入如图1-23所示的空间管理页面。 Step7 在其中输入FTP账号密码，进入空间的管理面板页面，如图1-24所示，在其中可以进行查看站点空间占用信息、修改默认首页和域名绑定等各项操作。

图1-23 虚拟主机管理

图1-24 虚拟主机管理面板

Chapter 1

网页设计基础概述

虽然在虚拟主机控制面板中并不能进行Web方式的文件上传和下载等操作，但这并不影响什么，用户可以用FTP工具进行更为方便的文件传输。

1.5.2 在免费空间发布网站

免费空间开通之后，即可把制作好的网站发布到空间中。在BBSGOOD论坛提供的免费空间中可以使用FTP方式上传文件，操作非常方便。

下面以FlashFXP 3.52为例，讲述通过FTP工具上传网站文件到空间中的方法。 具体的操作步骤如下。

Step1 双击桌面上的【FlashFXP】图标，打开FlashFXP的主窗口。

Step2 选择【会话】→【快速连接】命令，打开【快速连接】对话框，在其中输入服务器地址、用户名和密码等，其他项默认为空，如图1-25所示。

Step3 单击【连接】按钮，连接指定的远程FTP服务器。

Step4 连接成功之后，打开用户申请的网站空间，从主窗口右侧可以发现已经有3个默认生成的文件目录，其中web是网站默认的根目录，如图1-26所示。

图1-25 FlashFXP的主窗口

图1-26 登录申请的web空间

Step5 双击打开网站空间的根目录web文件夹，主窗口左侧即为本地文件目录。在其中选择全部要上传的文件，单击鼠标右键，在弹出的快捷菜单中选择【传送】命令，即可将要上传的文件传输到网站空间中。

1.5.3 网站的宣传与推广

即使内容再丰富、功能再全面的网站，如果缺乏足够的宣传和推广，也不会引起网友们的关注。要想提高网站的知名度，就必须对网站进行必要的宣传和推广。

1．注册搜索引擎

搜索引擎（如百度、Google、网易、新浪等）是专门提供信息检索和查询的网站，它们是网友查询信息和冲浪的最佳去处，因此，在搜索引擎中注册是宣传和推广网站的首选方法，

17 Dreamweaver+Photoshop+Flash网页设计全方位学习

Part 1网络知识基础篇

并且注册的搜索引擎越多，网站被检索、访问到的机会就越大，如图1-27所示为百度网站提供的网站登录页面。但是，若要让网站排名靠前，就必须支付一定的费用。

搜索引擎的数目成千上万，如果用户逐个去注册，势必会浪费大量的时间，此时如果采用专门用于网站推广的软件进行批量注册，则无疑是省时省力的最佳选择。

用于网站推广的软件有很多，下面以“网站推广专家”为例，讲述网站的批量注册的方法。

具体的操作步骤如下。

Step1 从网上下载并安装好“网站推广专家”之后，双击桌面上的【网站推广专家】快捷图标，即可打开“网站推广专家”的主窗口，如图1-28所示。

图1-27 注册搜索引擎

图1-28 网站推广专家

Step2 在“网站信息”栏中输入用户的基本资料和网站信息，再在“选择引擎”选项中选中要登录注册的搜索引擎。 Step3 单击“自动提交”选项中的【发送】按钮，“网站推广专家”即可自动向用户选择的搜索引擎中提交注册的网站信息，并在提交登录完成之后，生成一份完整的HTML格式的登录报告。

“网站推广专家”的下载地址是http://www.daodoc.com/websubmit.exe，类似的网站推广软件还有“登录奇兵”和SubmitWolf等。

2．与其他网站做友情链接

现在的网站一般都提供有专门的友情链接页面，可以找一些与自己网站内容类似的站点，先主动把别人的网站加入自己的友情链接，再给对方的管理员发送邮件，并请求对方把自己的网站也加入到对方的友情链接中。一般情况下，这种可以为双方站点都起到宣传作用的协作方式，对方是不会拒绝的。

3．使用广告交换链接

使用广告交换链接也是一种不错的网站宣传方式。一般要先在提供服务的网站上免费注册成为会员，并提交自己网站的相关信息，然后会得到一段服务代码，将代码复制到自己网站主页的适当位置即可。广告交换链接一般都拥有1∶10的高交换比例，即他人网站链接在自己的主页上显示一次，那么自己的站点链接就会在其他10个网站上显示。

除上述几种方式之外，还可以利用新闻组、邮件签名、留言板、聊天室、论坛等来发布

Chapter 1

网页设计基础概述

网站宣传信息。当然，利用传统媒体如报纸、电视和广播等来宣传网站也是不错的选择，但相对网络宣传而言费用较高，只适合那些大型的商业网站。

1.6 总结与经验积累

基础知识的学习，读者往往会觉得不太实用，但“万丈高楼平地起”，只有掌握牢固网页设计的基本理论，才能在以后较高级复杂的学习中触类旁通，运用自如。

一般来说，组成网页的元素包括文字、图形、图像、声音、动画、影像、超级链接以及交互式处理等，但网页的基本组成元素为文字、图形和超级链接。在网站开发的前期准备阶段，主要完成拟定网页主题、搜集相关资料，规划网页内容和绘制结构草图等几个方面的工作。在中期设计阶段，主要是利用各种网页制作工具制作网页，并不断地进行上传与测试，直到最后制作完毕。在网站后期维护阶段，除需要进行发布和推广应用之外，还要根据需要对网页进行更新与维护。

经过对网页基本知识系统的学习，相信初学者对于网页设计已有大致的了解。对接触过网页设计的读者而言，也会对网页基础理论有一个重新认识。

知识问答

问：在网上经常看到一些滚动字幕和Flash，请问它们属不属于动态网页呢？ 答：GIF格式的动画、Flash和滚动字母等，这些只是视觉上的“动态效果”，与动态网页是不同的概念。

动态网页是指和数据库有紧密关联的网页。由很多动态网页组成的网站就是动态网站，能使动态网页正常使用的空间就是动态空间，动态网站一般都会有网站管理后台。相反，静态网页和数据库没有关系，由很多静态网页组成的网站就是静态网站，这样的网站没有网站管理后台，所以不能对网站的内容进行增、删、改操作。

只能让静态网页正常使用，不能支持数据库和动态网页正常使用的空间就是静态空间，静态空间一般不支持数据库。动态网页比静态网页高级。

问：如果想把家里的电脑当服务器，做好网站后让别人访问，可以吗？

答：可以。但需要先到电信部门申请一个固定的公网IP，并把域名指向该IP。如果没有固定IP，也可以使用动态域名解析的客户端（如花生壳www.oray.net是国内比较先进和稳定的动态域名解析客户端软件）。此外，还需要安装一些服务器组件，如IIS等。这样，服务器就可以运行了。

但是，由于家庭网络一般都是ADSL的，其特性决定了上传速率是下载速率的1/2，也即上传速率是1MB，这就意味着对外访问只有1MB的带宽，所以这是个很大的问题。还有就是在家建站时，一定要重视病毒防护和黑客入侵。

第13篇：25个非常棒的Photoshop网页设计教程

1.Clean Style Portfolio Layout

2.Create an Elegant Photography Web Layout in Photoshop

3.Create a Portfolio Web Layout in Photoshop

4.How to Make a Vibrant Portfolio Web Design in Photoshop

5.Clean Blog Layout in Photoshop

6.Photo Gallery Website Layout in Photoshop

7.Create a Movie Video Streaming Website

8.How to Build a Stylish Portfolio Web Design Concept

9.Create a Modern Lab Theme Web Design in Photoshop

10.Create an Extremely Simple Dark Web Design in Photoshop

11.How to Create a Sleek Grid Based Website Design

12.How to Create a Vintage Photoshop Website Layout

13.Create a Simple Clean Portfolio Layout in Photoshop

14.3D Portfolio Dark Layout in Photoshop

15.Design a Clean and Colorful Ecommerce Layout in Photoshop

16.Design an Innovative Portfolio Site Using Alternative UI/UX

17.Design a Sleek Mobile App Website

18.Design a Warm, Cheerful Website Interface in Adobe Photoshop

19.Impreive Videographer Website Portfolio Layout in Photoshop

20.How to Create a WordPre Theme in Photoshop

21.Design a Bold and Vibrant Portfolio

22.Create an Elegant Patterned Web Design in Photoshop

23.Design a Clean Corporate Website Layout

24.Design a Textured \"Coming Soon\" Web Page in Photoshop

25.How to Create a Colorful Busine Web Layout

第14篇：Dreamweaver CS5自学教程第一课：网页设计基础

Dreamweaver CS5网页制作教程笔记

该教程使用Dreamweaver CS5作为开发工具，结合老师的网站开发经验，为大家讲解网页制作的每个环节。希望通过本套课程的学习，大家能灵活运用Dreaweaver完成网站的开发。课程分为12课共118节视频讲解，并随光盘附带课程素材、板书及相关软件。

第一课：网页设计基础

1-1 网站的概述

1-2 初识Dreamweaver

1-3 Dreamweaver CS5的用户界面

插入面板显示方式的调整切换

网页显示比例 大小尺寸 占用数据空间

1-4 网页文件的基本操作

1、创建网页文件

2、网页文件的保存 保存快捷键 Ctrl+S 网页保存的名字必须是字母或数字

修改后没有保存的文件名带* 注：网站首页文件的命名一般用“index.html”，首页的文档命名如下

3、网页预览

主要浏览器预览的快捷键是F12

浏览器可以通过以上方式添加

1-5 设置网页外观属性

1、页面属性的设置

网页空白区域单击后，点击“页面属性”，对相关要素进行设置

3、添加字体

1-6 创建站点

1、站点也叫做根目录，是是一个文件夹，是网站的网页和所有素材存储的地方。

2、创建站点:站点的名称用中文，站点的文件夹名称用英文。

3、新建网页保存:新建的网页保存命名必须用英文

1-7 设置默认图像文件夹

1、在站点根目录创建图片素材存储的文件夹

文件夹的命名一定不能用中文，最好使用“images”命名

2、设置images文件夹为网站图片储存的默认文件夹

3、网页中插入图片时，点击保存确定，电脑中任何储存位置的图片素材都会被自动复制保存到站点根目录下的images文件夹中。

1-8 站点的管理

1、双击打开所要编辑的网页

2、新建网页的另一种方法：点击站点，右击新建文件 ，单击命名新建的网页文件。 用同样的方式可以新建文件夹。

网页文件在不同文件夹之间移动时，需要更新网页的链接才能保证网页中的链接有效。

子文件夹中创建新网页的方式与上边的 创建方式相同。

3、不同站点之间的切换

4、站点的复制或删除

1-9 补充（Dreamweaver CS5的安装）

第15篇：DW建站怎么制作设计网页终极教程

一、定义站点

1、在任意一个根目录下创建好一个文件夹（我们这里假设为E盘），如取名为MyWeb。***备注：网站中所用的文件都要用英文名。

2、打开Dreamweaver，选择“站点—新建站点”，打开对话框。在站点名称中输入网站的名称（可用中文），在本地根文件夹中选择刚才创建的文件夹（E:web）。然后确定即可。 ***备注：再次打开Dreamweaver，会自动找到刚才设立的站点。如果有多个站点，可以在菜单“站点—打开站点”中去选择。

二、创建页面

1、在本地文件夹E:\\MyWeb下面的空白处，按右键选“新建文件”，这样就建好了一个页面，默认的文件名为untitled.htm。htm就表示这个网页文件是一个静态的HTML文件。给它改名为index.htm。

***网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。

2、双击index.htm进入该页面的编辑状态。在标题空格里输入网页名称，按右键选页面属性，打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背影图像，超级链接的颜色（一般默认即可），其他都保持默认即可。

3．此时光标位于左上角，可输入一句话，如“欢迎来到我的主页”。选取文字，用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间。

4．如要选取字体，则选择字体中的最后一项：编辑字体列表。然后在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。 ***在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用，因为别人电脑上未装就看不到。如果需要用的话，要做成图片后再使用。 ***在网页上打入空格的办法是：把输入法调为全角。

***在网页上换行的办法是：shift+Enter。只按Enter则为换段。

三、为页面添加图片

1、在本地文件夹E:\\MyWeb下面的空白处，按右键选“新建文件夹”，这样建立了一个文件夹，用它来放图片，可以改名为tu或pic或images都可以。

2、用菜单“窗口/对象”打开对象面板，点击“插入图像”，在对话框里选要插入的图片。如果会出现对话框：“你愿意将该文件复制到根文件夹中吗？”，必须选“是”，然后将它保存到刚建好的文件夹里。

3、选中该图片，打开属性面板，可以在上面为图片取名，重新设置图片的高、宽，拖住图片角上的点可以变大小。按住shift键，再拖动角上的点，可以使图片保持宽高比例拉伸。如要恢复这原始大小，则单击右下角的“重设大小”按钮。

4、“链接”可以直接在这里输入地址。“替代”是图片的说明，即鼠标指向图片所显示的文字；“边框”是图片边框宽度，“对齐”是对齐方式。

四、添加超级链接

1、为文字添加链接。

比如，在页面上输入“我的文章”，然后将其选中，打开属性面板，在“链接”一格中，选择它所要链接到的页面即可。后面一格“目标”我们一般常用的是self即打开的新窗口代替了现开的窗口；或是选择blank即打开新窗口。

2、为图片添加链接

与上面文字的链接同理，插入图片，然后在属性面板中的链接一格中选择即可。 ****图片可以创建不同的多个链接。方法如下：

在属性面板中的“地图”一项下面有一些图形，比如点击方形，光标变成十字，在图片上画一个蓝色矩形的热区，此时在属性面板上可以为这个热区设置链接地址，鼠标指向会显示。同样，再用圆形设置一个热区，就可以再为该图片设置其他链接了。

3、添加E-mail链接

选中需要添加E-mail链接的文字或图片，打开属性面板，在“链接”一格中输入填写邮件地址。格式如下：mailto:邮件地址。注意中间不空格。

4、如果链接到浏览器无法打开的文件，例如exe、Zip等文件，那么浏览者在点击这个链接的时候，就会实现文件下载、或是在线播放的功能。

五、表格的使用

1、点击插入/表格，打开表格面板进行设置。行数、列数、宽度、边框等，“单元格填充”为单元格内侧与内容的距离；“单元格间距”为单元格之间的距离，单位均为像素。

2、插入表格后，在表格的边框上点击一下，可以全选整个表格。然后在下面的属性面板里可以进行各种设置。

3、把光标移到其中一个单元格，此时看到的属性面板，就是单元格的属性面板。也可以进行各种关于单元格的操作。如背景色、背景图、边框、合并、拆分等。

六、关于表格的其他操作 一制作细线表格 原理：

1、选中整个表格，设置其背景为黑色（该颜色即表格线的颜色）。

2、选中所有单元格，设置其背景为白色。二自动格式化表格

1、先制作好一张表格，然后选中。

2、选菜单中的命令/格式化表格。即可以其中选择预设好的一些表格样式。 三一像素分割条

1、插入一个1行1列，宽为200像素，边框边距均为0的表格。

2、选中表格，设置表格高为1像素，并设置一个背景色（即所要的线条颜色）。

3、切换到代码和设计窗口，将代码 删除。

七、用表格构建完整的页面

一网页顶部（一般包括图标、广告、导航菜单）

1、创建一个1行2列，宽为760像素，边框及边距均为0的表格。

2、选中表格，设置排列方式为居中对齐，背景色为#3366CC。

3、将光标置于左边单元格中，设置其水平排列为左对齐，垂直排列为顶端对齐，然后插入一张图像，一般在此插入的是网站的图标，即logo。

4、将光标置于右边单元格中，设置其宽度为500，水平排列为居中对齐，垂直排列为中间，然后插入图像，一般是网页广告，即banner。

5、将光标置于刚完成的表格之后，插入/表格，创建一个1行1列，宽为760像素，边框及边距均为0的表格。

6、选中刚创建的表格，设置排列方式为居中对齐，背景色为#005173。

7、在该表格中依次插入多个图像，作为导航条菜单。

二网页中部（左边栏目列表、中间网站新闻、右边栏目列表）

1、在导航条表格后面，插入/表格，创建一个1行3列，宽为760像素，边框及边距均为0的表格。并设置排列方式为居中对齐，背景色为#FFFFFFF。

2、将光标置于左边单元格中，设置其宽度为18%，水平排列为居中对齐，垂直排列为顶端对齐，然后插入一张图像，插入一个导航条。

3、将光标置于刚插入的图片后，插入/表格，插入一个12行1列，宽为90%的表格。设置其单元格间距为1，背景色为#CCCCCC。

4、将光标放在表格第一个单元中，设置其高为20，背景色为#FFFFFF。插入/图像，插入一个导航文字前面的小点。同样设置其他11个单元格，这样左边的栏目分类列表就完成了。

5、将光标置于主体表格的中间单元格中，设置其宽度为66%，水平排列为居中对齐，垂直排列为顶端对齐，然后插入/图像，插入一个导航条。

6、将光标置于图像后，插入/表格，插入一个4行1列，宽为95%的表格。设置其单元格间距为1，背景色为#CCCCCC。

7、将光标置于表格的第一个单元格中，拖动鼠标，将4个单元格都选中，设置高为60，背景色为#FFFFFF。

8、将光标置于主体表格右边的单元格中，设置其宽度为16%，水平排列为居中对齐，垂直排列为顶端对齐，插入/图像，插入一个导航条。

9、将光标置于图像后，插入/表格，插入一个7行一列，宽为90%的表格。设置其间距为1，背景色为#CCCCCC。

10、按住Ctrl键，用鼠标点击刚插入的表格的第

1、

3、

5、7单元格，然后设置它们的高为55，背景色为#FFFFFF。

11、选中第

2、

4、6单元格，设置其高为6，背景色为#FFFFFF。

12、切换到源代码窗口，将第

2、

4、6单元格中的空格符号“ ”删除。 三网页底部（一般包括版权信息及其他相关内容）

1、将光标置于主体表格后，插入/表格，创建一个2行2列，宽为760像素，边框及边距均为0的表格。

2、选中表格，设置排列方式为居中对齐，背景色为#3366CC。

3、将光标置于表格第1行的左边单元格中，设置其宽度为50%，水平排列为默认，垂直排列为基线，背景色为#FFFFFF，然后输入版权信息，内容颜色随便。

4、将光标置于表格第1行右边单元格中，插入/图像，插入一个圆角图像，在它后面输入Email字样，设置其大小和颜色为1和#FFFFFF。

5、插入/表单对象/文本域，插入一个文本域，宽度可以随意。

6、插入/图像，插入一个GO的图像。

7、设置页属性。点击菜单修改/页面属性，在标题一栏中输入标题，并选择背景图像，将顶部边界设为0。

***将整个网页分部分放到不同的表格中组合而成，还可以加快浏览器读取页面的时间。；因为浏览器是读完整个表格后才显示内容的，所以最好不要框在整个一个表格中。

八、用布局表格构建完整的页面

1、单击插入/布局，里面的布局视图按钮，就切换到布局视图状态（默认为标准视图）。也可以用菜单里的查看/表格视图/布局视图来进入。

2、先单击绘制布局表格按钮，然后在页面中像绘图一样创建出布局表格。

3、就像上一个例子一样，先绘制好网页的顶部，再中部，再底部的大表格。

4、再单击绘制布局单元格按钮，然后在已经绘制好的布局表格中，再绘制布局单元格。

5、返回到标准视图，在已经划分好的表格里，再插入嵌套的小的表格，把页面再细化，就可以完成整个页面的设计了。

****注意把整个页面都放在一个大的布局表格中，因为这样的网页浏览速度会很慢。应该按照页面的版面和内容划分出几个布局表格，然后在其中分别插入布局单元格。

九、层的使用

1、点击插入/层。也可以点击图标，然后拖动鼠标创建出一个层。

3、选中创建的层，看属性面板。“层编号”和“标签”都使用默认即可。“层编号”是编程时需要用的，我们现在一般不用。“上”即距页面上边界的距离；“左”是距左边界的距离。“z轴”是层的顺序，数字大的叠加在数字小的上面。 ****如不设置颜色时，层是透明的。

4、点中层左上角的小方框可以随意拖动层，大小也可以调节。

5、“溢出”一栏中，当文字多于层的大小时，visible(超出的部分照样显示)、hidden(超出部分隐藏)、scroll(不管有否超出，都显示滚动条)、auto(有超出时才出现滚动条)。

6、点击菜单窗口/其他/层，此时将出现层管理窗口。可以在其中修改层的名称和Z轴值，也可以点击眼睛图标使层可见或不可见。还有一个防止重叠的选项。

7、层的对齐。按住shift键，同时选中几个层。然后用修改/对齐，用这里的选项。

8、嵌套层。⑴首先在文档中插入一个层。⑵将光标置于该层内，然后继续插入一个层，就得到了嵌套层。⑶里面的叫子层，外面的父层。它们的Z轴顺序是一样的。拖动父层时，子层也会相对移动。移动子层时，父层不会随之移动。

十、了解时间轴

1、点击菜单中的插入/层，插入一个层。

2、在层中插入图片，如一张飞机的图片。（这里的图片也可以是一张小动画的.gif图像）

3、点击菜单中的窗口/其他/时间轴，打开时间轴窗口。

4、选中页面上创建的层，用鼠标按住层左上角的小方框图标，将层拖放到时间轴的第1帧中。这时自动创建了一个长度为15帧的时间轴。

5、选中时间轴上的第1帧，将页面中的层拖放到页左上角，即动画开始时的位置。

6、选中时间轴上第15帧，可以拖动该帧至任意长度，如30帧。

7、选中第30帧，将层拖放到页面的右下方，此时窗口中显示出层从第1帧到第30帧的运动轨迹。(此时运动为直线)

8、可以点中第15帧，右键选“增加关键帧”，在选中第15帧的状态下，拖动层到页面中下方。

9、勾选“自动播放”项。十

一、制作滚动公告牌

1、在页面上插入一个层，然后为层设置一个背景，作为公告版的框架。

2、然后在创建的层中插入嵌套层，将嵌套层移动到父层的下方。

3、在嵌套层中输入文本，并将其居中排列。

4、打开时间轴面板，将子层作为对象添加到面板中。

5、为子层创建一个向上移动的路径，将其移动到父层的上方。

6、拖动最后一关键帧，增长动画时间，然后勾选“自动播放”和“循环”两项。

7、选定父层，在其属性面板中将“溢出”属性设置为“hidden”。十

二、在页面中运用flash动画

1、点击插入中的Flash按钮，即可为页面插入一个动画。也可以选菜单插入/媒体/Flash来完成这一步。

2、选中已插入的动画，看属性面板。这里可以设置它的宽、高，也可以通过拖动来改变大小。

3、可以在这里点击“播放”来预览动画。十

三、让插入的flash动画变透明

1、当网页上已经有背景，或是想要在一张图片上再插入flash动画，而flash动画本身也有背景色，所以会影响美观，这时我们要把它做成透明动画。

2、如在页面上插入一张图像。

3、在图像上插入一个层，在层中插入好所需要的flash动画。

4、选中flash动画，在属性面板中点击“参数”按钮。

5、在“参数”的左面一格输入“wmode”。在右面“值”一格输入“transparent”。 十

四、在页面中播放声音

1、在完成全页面以后，如果要为该页添加背景音乐，注意背景音乐一般是*.midi文件，这样的声音文件十分小，易于快速下载，其他格式不适合作为背景音乐。

2、在页面中所有表格之外，（注意此时编辑窗口左下方的标签选择栏中仅显示这一项，或是在左下角点一下，这样才能保证这个行为是添加在整个页面上的）。点击行为窗口上的“+”按钮，（或用菜单 窗口/行为，打开行为窗口。）

3、从弹出菜单中选择“播放声音”。打开一个对话框。

4、在这个对话框里用“浏览”选择要播放的声音，并确定。

5、这时行为面板上自动显示了事件为onload，动作为播放声音。点击这一行，中间出现一个按钮。点击按钮，可以设置这个声音在什么事件下播放。可以选择“显示事件”/“IE5.0。

6、我们常用的如Onload（当页面载入时）、OnClick（单击鼠标）、OnMouseOver（鼠标移到对象上）、OnUnload(当关闭页面时)等。

7、该行为也可以设置在图片上、文字链接上。在文字链接上播放声音之前，先为文字添加一个空链接，即选中文字，在链接一格里输入一个“#”符号。

十五、弹出窗口

1、首先制作一个准备在小窗口中显示的页面（比如a.htm）,由于这个弹出窗口不能太大，所以内容要少一些。

2、打开一个制作好的页面，把光标移到页面中所有我表格以外，点击行为窗口上的“+”按钮，从弹出菜单中选择“打开浏览器窗口”一项。

3、在对话框中里输入相应的设置。要显示的URL即a.htm，窗口宽度和高度自己定，单位为像素。属性中的各项参数需要就打勾。

4、设置完毕后，点“确定”。此时行为窗口中将显示打开浏览窗口这个行为，触发条件为Onload，如果不是要这项，就自己设置。

5、该行为也可以设置在图片上、文字链接上。。

6、可以用这个方法来表示对浏览者的打开时的欢迎、网站公告、离开时的告别语等。十

六、控制状态栏信息

1、打开页面，选中一张图片。

2、点击行为窗口上的“+”号按钮，选择设置文本/设置状态条文本。

3、在对话框里的“消息”一栏里，输入需要显示的话，如对这张图片的介绍。

4、可以设置行为的触发条件为OnMouseOver（鼠标移到对象上），这样当鼠标经过这张图片的时候，状态栏将出现相关的信息。

5、如果需要鼠标在移开后，这个信息消失，那么再次使用这个行为，在“消息”一栏里什么都不写，然后把触发条件改为OnMouseOut（鼠标移开）。

6、同样可以在一段文字上设置该行为。或是设置在整个页面上也可以。 十

七、弹出信息

1、打开一个制作好的页面，点左下角项。点击行为窗口上的“+”按钮，从弹出菜单中选择“弹出信息”一项。

2、在设置窗口中“消息”一栏里输入想显示的消息即可。

3、触发条件设置为Onload（当页面载入时），就可以用来作为打开页面的欢迎信息。如设为OnUnload(当关闭页面时)，就可以作为用户关闭页面时送别信息。

4、也可以在某一段文字上设置弹出信息。比如一段文字不愿让人复制，就选中整段文字，注意此时左下角显示〈P〉，即段落。

5、然后同样操作，消息可以输入版权之类的语句。只是设置触发条件为OnBeforeCopy（按右键时触发）,或OnCopy（按右键选复制时触发）。 十

八、动态图片按钮

1、准备好两张同样大小的图片，常用的方法是如一张为灰度照片，一张为彩色照片。或一张是按钮凹下的样式，一张是按钮凸起的样式。

2、举例：插入一个3行1列的表格，设置宽度为180像素。

3、将光标置于第一行，插入一张灰度的图片。

4、在属性面板中“链接”一栏里输入需要链接的地址，并给图片加上名称，如tu1.

5、点击行为窗口上的“+”按钮，从弹出菜单中选择“交换图像”。

6、此时在“图像”一栏中已显示要交换的图像，然后在“庙宇原始档为”一栏里选择好交换后的那张图。

7、下面有两个参数，“预先载入图像”和“鼠标滑开时恢复图像”，都要选中。

8、同样方法创建另外两个动态按钮。

十九、用框架布局页面

框架由两个主要部分组成——框架集和单个框架。

1、点击插入中的框架，即显示出已定义的13种框架的样式。我们上—中—下结构为例。

2、点击“上—中—下”框架结构的图标，此时在页上插入上下两个框架，将整个页面分割成了3部分。我们分别在上面输入“上”，在中间输入“中”，在下面输入“下”。

3、先保存一下。点击菜单中的文件/保存全部。这时首先保存框架集文件，可以自己修改名字，如kuangjia.htm。然后将分别保存框架集中的其他页面。在保存对应的页面的时候，该部分会以虚线框起来，这样可将上面部分保存为shang.htm。下面部分保存为xia.htm。中间部分保存为zhong.htm。

4、至此，我们保存了四个页面，分别是框架集，和组成框架集的上、中、下三个页面。所以，其实这个框架是由四个页面组成的，所以用框架会降低一点用户浏览的速度。

5、点击窗口/其他/框架，打开框架的面板。在这里单击某个框架，即可选中该框架。当框架被选中时，编辑窗口中对应的框架出现虚线。

6、如：选中上面topframe,此时属性面板上显示的是上面这个框架的属性。同样选中中间框架和下面框架，也可以分别设置它们的属性。

7、在编辑窗口中，将鼠标放在两框架之间的边框上，光标将变成上下箭头形，此时点击边框，选中的是整个框架集。

8、此时属性面板上出现的是整个框架组的属性。可以在此设置框架集是否有边框、宽度及颜色等。不过最为重要的是可以在这里设置框架集中各个框架的大小。

9、在属性面板的右面的图示上选中上面框架，设置它的行为80像素，边框为0。

10、选中下面框架，设置行高为30像素，边框为0。

11、选中中间框架，设置行高为1，单位为相对。（相对的意思是：当前行相对于其他行所占的比例。设为1就是指占据除上和下以后的所有浏览窗口剩余空间。

12、举例：将光标置于上面框架topFrame上，右键选页面属性，设置背景色为#FF6600。然后插入/表格，插入一个1行2列，边框边距都为0的表格。设置第1个单元格的宽度为116像素，然后插入一张图片。将第2个单元格设置为水平对齐方式为居中，垂直排列方式为底部，然后依次输入“狮子座”、“魔蝎座”、“双子座”字样。

13、将光标置于中部框架mainFrame中，右键选页面属性，设置背景色为#FFFFCC。然后插入一张大图像。

14、将光标置于下面框架bottomFrame中，右键选页面属性，设置一个背景图像。

15、另外做好三个页面，作为“狮子座”、“魔蝎座”、“双子座”所要链接的页面。

16、选中“狮子座”，在属性中为它设置好要链接的页面，然后在“目标”里选“mainframe”，即该内容在中间那个框架中显示。

17、同样设置“魔蝎座”、“双子座”的链接。二

十、跳转菜单

1、点击主菜单中的插入/表单对象/跳转菜单，也可以用插入/表单，中的跳转菜单图标，来调出跳转菜单设置窗口。

2、首先在“文本”一栏里输入“请选择相关网站”字样。然后点击窗口上的“+”号按钮。这时菜单里多了一个选项，这个选项没有链接，仅作为跳转菜单的说明文字。

3、在文一栏里输入需要的网站，如“新浪”，然后在“选择时，前往URL”一栏里输入网站链接地址http://www.daodoc.com，此时，菜单项一栏里又多了一个选项，这个选项对应一个网的链接地址。

4、使用同样方法，在菜单中添加其他一些选项及对应的链接。还可以用“上”“下”的按钮，来调整它们的顺序。

5、设置窗口的“菜单之后插入前往按钮”一项先不要选择。选中“更改URL后选择第一个项目”一项，这样当使用跳转菜单到某个页面后，如果返回到跳转菜单页面，此时页面中的跳转菜单默认显示的依旧是第1项内容。

6、设置完毕后点击“确定”即可。

****因为跳转菜单是一个表单，所以其实是先插入了表单（红色虚线区域），然后在表单中再插入了下拉菜单。

7、想修改选项，可以选中页面上的下拦菜单，此时点击属性面板中的“列表值”，即可修改各项内容了。

8、当选中跳转菜单时，行为窗口中也出现行为。双击该行为，也可以进入设置窗口，可以重新对其进行设置。

9、如果“菜单项”里的第一项就是链接，而不是上面所说的一句提示的话，那么就要选中“选项“中的“菜单之后插入前往按钮”。添加一个“前往”按钮。 二十

一、运用插件（Dreamweaver功能扩展）

1、首先下载好需要的插件，此处举例用的是Animate Browser Window。这是一个动态改变窗口的大小的插件。打开Dreamweaver Extension Manager，安装下载好的插件。

2、启动Dreamweaver，在做好的页面上，右击左下角〈body>，然后点击行为窗口中的“+”号按钮，在其中选择“Animate Browser Window”，然后在其中做相应的设置。这里设置窗口打开之前高宽均为0，打开后为填满屏幕。触发条件为onLoad。 二十

二、滚动字幕

1、把光标插入点放在需要插入滚动字幕的地方。

2、点击插入面板的“标签选择器 ”。

3、选择 marquee标签，点击“插入”按钮。然后关闭“标签选择器 ”。

4、转换到代码视图。把光标插入点放在 两个marquee标签之间。

5、选择“窗口”/“标签检查器”。可以在“标签检查器”中设置标签的各种用法。

6、点击behavior设置项右边的下拉箭头，选择滚动字幕内容的运动方式。其中三个选项意思分别是：Alternate：内容在相反两个方向滚来滚去。Scroll：内容向同一个方向滚动。Slide：内容接触到字幕边框就停止滚动。

7、direction属性设置字幕内容的滚动方向。四个选项意思为：down：向下运动。Left：向左运动。Right：向右运动。Up：向上运动。

8、scrollamount属性设置字幕滚动的速度。一般设为1。

9、scrolldelay属性设置字幕内容滚动时停顿的时间，单位为毫秒。如果要让滚动看起来流畅，数值应该尽量小。实例中设置为1毫秒。

10、width属性设置滚动字幕的宽度。这个任意，比如设置为300。

11、onMouseOver事件设置鼠标移动到滚动字幕时的动作，常设置为停止滚动。onMouseOut事件设置鼠标离开滚动字幕时的动作，常设置为开始滚动。这个两项不能选，只能手工输入。在onMouseOver后面输入“this.stop();” 在onMouseOut后面输入“this.start();”

12、style属性设置字幕内容的样式。实例中设置字幕文字大小，也要手工输入“font:12px;”。

13、loop属性设置字幕内容滚动次数，默认值为无限。“-1”也为无限。

14、全部代码：滚动字幕内容 二十

三、创建CSS样式表

1、在网页上输入一些文字。

2、打开“CSS样式”面板，也可以用“窗口/CSS样式”打开。

3、面板下方有四个按钮，分别是附加样式、新建样式、编辑样式、删除样式。

4、点击“新建样式”，打开对话框。输入名称，注意名称前有一个点号。如取名为.zi(中文名不行)。类型：创建自定义样式，定义在：仅对该文档。

5、此时再打开一个对话框，在左边的分类里选择“类型”，然后在右面设置字体为宋体，大小为14像素，颜色任意。然后确定。

6、选中页面上的文字，然后点击窗口里的样式.zi。此时这段文字就应用了CSS样式。

7、如要对刚才定义的CSS样式进行修改，可以点中它，然后点下面的编辑样式按钮。二十

四、创建动态链接样式表

1、点击“新建CSS样式”对话框，在“定义在”一栏选择“仅对该文档”，在“类型”一栏里选择“使用CSS选择器”。

2、当样式表类型选择“使用CSS选择器”时，下拉菜单的名字变成了“选择器”，表示输入内容为CSS选择符，单击下拉按钮，可以看到动态链接的4种状态。a:link——超级链接的正常状态； a:visited——访问过的超级链接状态。

a:hover——光标移至超级链接上时的状态； a:active——选中超级链接的状态。

3、接下来对这几种状态分别设定，首先从下拉菜单中选择a:link，点击“确定”按钮后弹出样式表设置窗口，设定该样式无下划线，颜色为#FF6600（橙色）。

4、用同样方法设定a:visited，设定其为无下划线，颜色为#FFFF00（黄色）。

5、接下来设定a:hover，设定其为有划线，颜色为#FF6600（橙色）。

6、a:active不用设置，它会自动依照a:hover而定。

7、在网页上输入一句话，在属性面板中设定它的链接为“#”。即可。

****注意：必须按照这样a:link、a:visited、a:hover、a:active的顺序来设置，否则不会出现预期的效果。

如果我们需要一个页面上有两个或更多的链接效果，可以用以下方法：

1、点击新建样式按钮，样式类型选“使用CSS选择器”，在“选择器”一栏里，直接输入a.link2:link，接着设置a.link2:link为红色无下划线。

2、继续定义下面两个样式。名称都直接输入，分别设定它们为a.link2:visited，紫色无下划线。 a.link2:hover，蓝色有下划线。

3、此时在“CSS样式”选项下多了一个名称为link2的自定义样式。

4、在页面中输入一段话，为它添加一个#链接，选中这个链接，然后点击样式表窗口中的样式link2，将此样式应用在该链接上。

5、同样方法可以制作同一页面上的不同链接格式。

****为保持一种风格，同一页面上不宜建立过多的链接样式。 二十

五、外部样式表

***在不同的页面中应用相同的样式表。

1、新建样式表，取名，然后类型选“创建自定义样式”，定义在选“新建样式表文件”。

2、确定后，打开保存外部样式表的窗口。然后把它保存到本地站点中即可。

3、此时，可以看到样式表窗口中新增了一个样式表文件，文件的后缀名为c

4、如果当前页面中的一个内部样式表要导出为外部样式表文件，以便供其他页面使用，可以点击样式表窗口右上角的灰色的图标，选“导出样式表”，此时可以为样式取名和保存为一个外部文件。

5、当其他页面需要使用外部样式表时，可以点样式表窗口中的第一个按钮“附加样式表”，打开窗口，然后选择外部样式表文件，在添加为里选“链接”，确定即可。二十

六、其他CSS ****CSS里的背景，是设置文字背景、表格背景图等。

****CSS里的区块，是指设置文本的文字间距、对齐方式、下标、上标、排列方式等。 ****CSS里的盒子，是指设置图片和文本内容之间的空白距离，以及图文混排的方法。 ****CSS里的边框，是指设置表格文本区、按钮等的美化。

****CSS里的列表，是指设置列表项样式。即那种提纲式的一段话。 ****CSS里的定位，是指设置页面中图片的相对和绝对定位。

****CSS里的扩展，其中的光标，可以设置光标的样式，可以设置为hand（手型）、crohair（十字型）、text（“I”型）、wait（等待型）、default（默认型）、help（帮助型），还有各种方向的箭头型。

****CSS里的扩展，其中的过滤器，可以用来做CSS滤镜特效，即用来加工图片的透明、发光等。但效果不太明显，还是用专门加工图片的软件来完成比较好。

二十七、创建网上相册

1、首先要安装好FireworksMX软件。

2、加工好所需要放在网上的照片，把它们加工成一样大小，放在一个文件夹里。

3、点击菜单中的命令/创建网站相册，打开设置窗口。

4、输入相册标题，副标信息，其他信息（以后也可再修改）。“源图像文件夹”，选择刚才保存照片的文件夹。

5、“目标文件夹”，单击“浏览”按钮选择当前站点目录。（即将照片全部保存到站点里来）

6、“缩略图大小”一项，可以根据需要选择，“显示文件名称”一项，选中会在生成的相册中显示每个图片的文件名。

7、“列”一格是每一行显示的图片数，默认为5，可以自己改动。

8、下面两个“格式”一般都选“品质较高”。

9、选中“为每张图片建立导览页面”一项。确定即可。 二十

八、定制网页过渡功能

*****网页过渡是指当浏览者进入或离开网页时，页面呈现的不同的刷新效果，比如卷动、百叶窗等。网页看起来会更具有动感，不过也要注意适可而止，否则太花哨的变化也容易引起浏览者的反感。步骤：

1、打开一个页面，单击菜单中的插入/文件头标签/Meta，会弹出Meta对话框。

2、在对话框中的属性选项的下拉列表中选HTTP-equivalent选项，在值一格中键入Page-Enter，表示进入网页时有网页过渡效果。

3、在内容一格中键入 Revealtrans(Duration=4,Transition=2),Duration=4 表示网页过渡效果的延续时间为4秒，Transition表示过渡效果方式，值为2时表示圆形收缩。

4、输入完后单击确定，存盘。这样当我们点击一个超链接进入这个页面时就可以看到效果了。

5、另外还有二十多种效供你选择，只要将Transition的值改为相应的效果的代号即可，具体效果和设置如下表所示

效果 Transition 效果 Transition 盒状收缩 0 溶解 12 盒状展开 1 左右向中部收缩 13 圆形收缩 2 中部向左右展开 14 圆形展开 3 上下向中部收缩 15 向上擦除 4 中部向上下展开 16 向下擦除 5 阶梯状向左下展开 17 向左擦除 6 阶梯状向左上展开 18 向右擦除 7 阶梯状向右下展开 19 垂直百叶窗 8 阶梯状向右上展开 20 水平百叶窗 9 随机水平线 21 横向棋盘式 10 随机垂直线 22 纵向棋盘式 11 随机 23 二十

九、库的应用

****网站中有些内容需要反复使用，比如自己制作的一个网站图标等，此时将这个组件存为在库里，可以随时调用。

1、打开一个页面，选择需要保存的组件，比如一个图标。

2、点击菜单窗口/资源，打开资源窗口。然后在其中选最下面一本书样的按钮，打开库面板。

3、点击下面的新建按钮，就将刚才选中的图标保存到库里了，此时还可以给它取名。

4、在一个新页面上要应用库里的内容时，打开库面板，选中需要用的图标，然后点击下面的“插入”即可。

三

十、用模板迅速完成站点（首页或内部某一页）

1、首先规划好自己想要制作的网站，要把它的各项链接的内容都设计好。如我的网站： 首页上的链接有：网页版、动画版、请留言、关于我、联系我、许愿瓶

网页版上的链接有：站长简介¦ ¦教研论文¦ ¦课堂寻真¦ ¦原创课件¦ ¦心海撷贝¦ ¦留影人生¦ ¦给我来信¦ ¦雁过留声¦ 动画版上的链接与网页版相同。

以下再链接到各种文章或课件的页面。如“课堂寻真”链接到全是教案标题的页面，然后由每一个教案标题，再链接到放这个教案的页面。其他同理。

2、下载好比较适合自己规划的、所喜欢的网页模板，（模板网站比较好的如：http://www.daodoc.com ）一般它都包括两个文件：一个是index.htm，另一个一般是命名为images的文件夹，即我们所说的用来放置图片的。

3、定义好站点，然后将这两个文件（夹）复制到站点文件夹下。

4、双击index.htm文件，即进入首页的编辑状态。然后就可以修改这个页面让它符合自己的需要。这样即可完成首页。 三十

一、将已有的网页保存为模板

****用于在一个网站中有大量重复出现的页面时。（在新建和使用模板之前一定要定义好站点）

1、选择某一页，点击文件/另存为模板，将当前页面保存为一个模板。此时打开了“另存模板”窗口，为该模板取名，然后保存。

2、此时可以发现在站点中自动创建了一个名为Templates的文件夹，在该目录中存有我们保存的模板。其扩展名为.dwt

3、这个模板目前在被运用时，是无法修改的。所以要设定模板的可编辑区域。

4、比如，在当前模板页面中，需要让页面中间部分可编辑，这样使用模板时就可以在其中添加内容了。选中页面中间部分的表格单元格（按住CTRL键在单元格里单击），点击主菜单中的插入/模板对象/可编辑区域。此时会打开对话框，在其中为模板取名，然后确定。

5、此时所定义的可编辑区域被浅蓝色线条框起来，并且左上角还有该区域的名称。将模板文件保存并关闭。

6、点击主菜单中的文件/新建，在新建页面窗口中点击上方的“模板”选项。

7、此时在“模板用于”一栏中列出了当前定义的站点，选中某个站点，在窗口中间一栏中显示的是该站点拥有的模板文件。选中某个模板，在“预览”一栏中可以预览该模板。然后点“创建”按钮，就新建了一个页面。

8、在出现的新页中，除可编辑区域外，其他部分是不能进行修改的。三十

二、上传自己的网站

1、申请网站空间，然后将它上传到网上。目前基本上没有免费空间，免费空间也都需要放置广告，或是申请一个收费空间，它都会提供十天左右的试用期，可以作为网站测试来用一下。

2、在点击申请后，会出现要求注册的表格，一般包括用户名、密码、邮箱、联系电话、省份、主页的名称、主页的类别、主页的简介等。

3、全部填完之后，即可得到以下几项：①用户名（刚才填写）②密码（刚才填写）③FTP上传地址 ④主页地址（有时是将以上几项发送到所填写的邮箱）

4、下载并安装FTP上传软件，可以用CuteFtp（昆山视窗/软件 可以下载，免费）

5、打开CuteFtp软件，点击主菜单中的文件/站点管理器。

6、在打开的对话框中填写好FTP上传地址、FTP站点用户名称、FTP站点密码，然后点击连接，就可以连接到站点服务器。（第二次打开就自动连接，不用再填写了）

7、连接好以后，在页面上出现框架，左边为本地计算机上的文件，右边为远程计算机，只要将左边的文件（即做好的网站文件）一个个拖动到右边，即完成了上传。三十

三、宣传自己的网站

如何让网站地址让别人知道，方法有二：

1、用专门的软件，可以将网站登录到各大搜索引擎。

2、手工登录。如打开百度（www.daodoc.com）,在下面有个链接“网站登录”，点击后会被要求填写网站地址、名称、内容等，然后就被收入百度的搜索引擎了，这样别人就可以搜索到你的网站了。其他网站登录同理。

第16篇：网页设计与制作教程第三次测试答案

1、以下关于FLASH为补间动画分布对象的描述中，正确的是（ ）。(A) A、用户可以快速将某一帧中的对象分布到各个独立的层中，从而为不同层中的对象创建补间动画 B、每个选中的对象都将被分布到单独的新层中，没有选中的对象也分布到各个独立的层中

C、没有选中的对象将被分布到单独的新层中，选中的对象则保持在原来的位置 D、用户可以快速将全部帧中的对象分布到各个独立的层中，从而为不同层中的对象创建补间动画

2、在FLASH中，执行“视图=〉隐藏边缘”命令的作用是（ ）。(A) A、隐藏被选择对象的突出显示状态 B、隐藏被选择对象的外框轮廓 C、隐藏被选择对象的填充区域

D、隐藏被选择对象的线条

3、以下关于FLASH逐帧动画和补间动画的说法正确的是（ ）。(B) A、两种动画模式Flash都必须记录完整的各帧信息 B、前者必须记录各帧的完整记录，而后者不用

C、前者不必记录各帧的完整记录，而后者必须记录完整的各帧记录 D、两种动画模式Flash都不用记录完整的各帧信息

4、在FLASH中，分离操作不会对被分离的对象造成以下后果（ ）。(D) A、切断元件的实例和元件之间的关系

B、如果分离的是动画元件，则只保留当前帧

C、将位图图像转换为填充对象 D、将位图图像转换为矢量图形

5、在Flash的MP3 压缩对话框中的音质选项中，如果要将电影发布到 Web 站点上，则应选（ ）。(C)(A) A、中 B、最佳

C、快速 D、无所谓

6、在FLASH中，关于导入PNG格式文件，下面说法错误的是（ ）。(B) A、导入为电影剪辑，并保留原有层表示将PNG 文件导入为电影剪辑，它所包含的所有帧和层都将出现在电影剪辑元件内

B、导入到当前场景的新层表示将PNG 文档导入到当前Flash 文档单个的新层中，该层将位于所有层的下面

C、如果要将 Fireworks 的 PNG 文件导入为单个的图像，则可以选中作为单个扁平化的位图导入复选框

D、如果选中可单个扁平化的位图导入复选框，所有其他选项都不可用

7、下面关于从浏览器打印电影和从Flash 播放器打印电影的说法错误的是（ ）。(D) A、从Flash播放器打印电影,可以指定Flash电影中的哪些帧可以被打印 B、从Flash播放器打印电影,可以确定帧的打印区域

C、从Flash播放器打印电影,可以给电影剪辑中的打印帧附加Print 动作

D、从浏览器打印电影肯定比从Flash播放器打印电影效果好

8、在FLASH中，两个关键帧中的图像都是形状则这两个关键帧之间可以创建的补间动画是（ ）。(C) A、运动补间动画

B、位置补间动画 C、形状补间动画 D、透明度补间动画

9、在FLASH中，对于那些具有复杂颜色效果和包含渐变色的图像，例如照片，最好使用那种方式进行压缩（ ）。(A) A、JPEG压缩 B、无损压缩 C、有损压缩 D、都不可以

10、以下关于FLASH帧锚记和注释的说法正确的是（ ）。(D) A、帧锚记和注释的长短都将影响输出电影的大小

B、帧锚记和注释的长短都不影响输出电影的大小

C、帧锚记的长短不会影响输出电影的大小，而注释的长短对输出电影的大小有影响 D、帧锚记的长短会影响输出电影的大小，而注释的长短对输出电影的大小不影响

11、在FLASH中，如果一个对象是以100%的大小显示在工作区中，选择工具箱中的“缩放”工具，并按下Alt键，使用鼠标单击，则对象在工作区中将显示的比例是（ ）。(A) A、50% B、100% C、200% D、400%

12、在FLASH中，如果要将FreeHand文档中的每一层都转换为Flash 电影中的关键帧应该是FreeHand导入设置对话框的（ ）。(B) A、层选项中选 Layers（层）选项

B、层选项中选Keyframes（关键帧）选项 C、层选项中选 Flatten（扁平）选项 D、没有这个功能

13、在FLASH中，使用钢笔工具创建路径时，关于调整曲线和直线的说法错误的是（ ）。(B) A、当用户使用次选工具单击路径时，定位点即可显示

B、使用次选工具调整线段可能会增加路径的定位点

C、在调整曲线路径时，要调整定位点两边的形状，可拖动定位点或拖动正切调整柄 D、拖动定位点或拖动正切调整柄，只能调整一边的形状

14、在Flash的测试模式中，不能以“列表显示对象”命令来显示的是（ ）。(C)(B) A、帧

B、电影剪辑的实例名 C、目标路径

D、对象类型（形状、电影剪辑或按钮）

15、在FLASH中，将舞台上的对象转换为元件的步骤是（ ）。(A) A、a.选定舞台上的元素 b.单击\"修改〉 转换为元件\"，打开转换为元件对话框 c.填写转换为元件对话框，并点击确定

B、a.单击\"修改〉 转换为元件\"，打开转换为元件对话框 b.选定舞台上的元素 c.填写转换为元件对话框，并点击确定

C、a.选定舞台上的元素,并将选定元素拖到库面板上 b.单击\"修改〉转换为元件\"，打开转换为元件对话框 c.填写转换为元件对话框，并点击确定

D、a.单击\"修改>转换为元件\"，打开转换为元件对话框 b.选定舞台上的元素,并将选定元素拖到库面板上 c.填写转换为元件对话框，并点击确定

16、当Flash 导出较短小的事件声音（例如按钮单击的声音）时，最适合的压缩选项是（ ）。(A) A、ADPCM 压缩选项 B、MP3 压缩选项 C、Speech 压缩选项 D、Raw 压缩选项

17、在FLASH中，设置电影属性时，设置电影播放的速度为12fps，那么在电影测试时，时间轴上显示的电影播放速度应该可能是（ ）。(B) A、大于12fps B、小于等于12fps C、等于12fps D、小于12fps

18、在Internet Explorer 浏览器中，来播放Flash 电影（swf 格式的文件）的技术是（ ）。(D) A、DLL B、COM C、OLE D、Active X

19、下面对FLASH将舞台上的整个动画移动到其他位置的操作说法错误的是（ ）。(D) A、首先要取消要移动层的锁定同时把不需要移动的层锁定

B、在移动整个动画到其他位置时，需要使绘图纸标记覆盖所有帧 C、在移动整个动画到其他位置时，对不需要移动的层可以隐藏

D、在移动整个动画到其他位置时，不需要单击时间轴上的编辑多个帧按钮 20、关于Flash影片舞台的最大尺寸，下列说法正确的是（ ）。(C) A、可以设置到无限大 B、1000px × 1000px C、2880px × 2880px D、4800px × 4800px

21、Flash 影片播放速率最大可以设置到（ ）。(C) A、99 B、100 C、120 D、150

22、在FLASH中，使用钢笔工具创建路径时，关于调整曲线和直线的说法错误的是（ ）。(B) A、当用户使用次选工具单击路径时，定位点即可显示

B、使用次选工具调整线段可能会增加路径的定位点

C、在调整曲线路径时，要调整定位点两边的形状，可拖动定位点或拖动正切调整柄 D、拖动定位点或拖动正切调整柄，只能调整一边的形状

23、在Flash中，单选钮的的初始状态是未选中的话，则（ ）。(B) A、initialState=TRUE B、initialState=FALSE C、initialState=YES

D、initialState=CHOOSED

24、以下关于FLASH按钮元件时间轴的叙述，正确的是（ ）。(B) A、按钮元件的时间轴与主电影的时间轴是一样的，而且它会通过跳转到不同的帧来响应鼠标指针的移动和动作

B、按钮元件中包含了4帧，分别是Up、Down、Over和Hit帧 C、按钮元件时间轴上的帧可以被赋予帧动作脚本 D、按钮元件的时间轴里只能包含4帧的内容

25、以下关于用FLASH制作形状补间动画，使用形状提示，能获得最佳变形效果的说法中正确的是（ ）。(B) A、在复杂的变形动画中，不用创建一些中间形状，而仅仅使用开始和结束两个形状 B、确保形状提示的逻辑性

C、如果将形状提示按逆时针方向从形状的右上角位置开始，则变形效果将会更好 D、确保形状提示的逻辑和效果

26、在FLASH中，默认时Flash影片帧频率是（ ）。(B) A、10 B、12 C、15 D、25

27、下面对创建FLASH蒙板操作的说法错误的是（ ）。(B) A、通过蒙板的小孔来显示的内容的层在蒙板层的下面

B、对于蒙板上的位图图像、过渡颜色和线条样式等，Flash都将忽略 C、蒙板上的任何填充区域都将是不透明的，非填充区域都将是透明的 D、在蒙板上没有必要创建有过度颜色的对象

28、在Flash中，用以绘制笔直的斜线的绘图工具是（ ）。(A) A、使用铅笔工具，按住Shift 键拖动鼠标 B、使用铅笔工具，采用伸直绘图模式 C、直线工具 D、钢笔工具

29、在FLASH中，下面关于导入视频说法错误的是（ ）。(C) A、在导入视频片断时，用户可以将它嵌入到Flash 电影中 B、用户可以将包含嵌入视频的电影发布为Flash 动画 C、一些支持导入的视频文件不可以嵌入到Flash 电影中

D、用户可以让嵌入的视频片断的帧频率同步匹配主电影的帧频率 30、在Flash MX中，要绘制精确的直线或曲线路径，可以使用（ ）。(B) A、铅笔工具 B、钢笔工具 C、刷子工具

D、油漆桶工具

31、下面关于打印Flash电影说法错误的是（ ）。(C) A、打印Flash 矢量图形时，可以在任意尺寸上获得清晰的打印效果 B、打印低分辨率的位图图像时，受到像素的影响 C、不可以从浏览器打印Flash电影 D、Flash 播放器的打印功能允许用户打印电影中的目录、联票、单篇、收据、发票或其他文档

32、以下关于使用FLASH元件的优点的叙述，不正确的是（ ）。(D) A、使用元件可以使发布文件的大小显著地缩减 B、使用元件可以使电影的播放更加流畅 C、使用元件可以使电影的编辑更加简单化 D、使用元件可以使编辑实例

33、在Internet Explorer浏览器中，是通过（ ）来播放Flash 电影（swf 格式的文件）的。(D) A、DLL库 B、COM程序 C、OLE对象

D、Active X插件

34、不同版本的Flash编辑文件（.FLA）是完全兼容的。(错)

35、在Flash中，分离操作会将被分离的对象由位图图像转换为矢量图形。(对)(错)

36、在Flash中，关键帧是指在动画中定义的更改所在的帧。(对)

37、在Flash中，一般来说逐帧动画文件量比补间动画小。(错)

38、作为发布过程的一部分，Flash 将自动执行某些电影优化操作。(对)

39、在Flash中，引导层是用层名称左侧的辅助线图标表示的。(对) 40、在Flash中，在制作电影时，背景层将位于时间轴的最底层。(对)

41、FLASH的工具箱一般放在屏幕的左边,由四个部分组成,它们分别是工具 查看 颜色 选项。(对)

42、在Flash中，引导层不出现在发布的 SWF 文件中。(对)

43、作为发布过程的一部分，Flash 将自动执行某些电影优化操作。(对)

44、在Flash中，可以在时间轴中排列关键帧，以便编辑动画中事件的顺序。(对)

45、在Flash中，为了在绘画时帮助对齐对象，可以创建引导层。(对)(错)

46、在Flash中，工具箱中选取颜色的工具是（ ）工具。(吸管)

47、在Flash中，执行“视图=》隐藏边缘”命令的作用是隐藏被选择对象的（ ）状态。(突出显示)

48、在Flash中，有两种类型的声音事件声音和（ ）声音。(流式)

49、在Flash中，如果一个对象是以100%的大小显示在工作区中，选择工具箱中的“缩放”工具，按下Alt键，使用鼠标单击，则对象将以（ ）比例显示在工作区中。(50%) 50、在缺省条件下，Flash影片播放的帧频率是（ ）帧/秒。(12)

第17篇：frontpage2000网页制作教程(完全版)

第 一 课 从一个网页开始

Frontpage2000教程 第 二 课 编辑网页 Frontpage2000教程 第 三 课 使用图形 Frontpage2000教程 第 四 课 超链接 Frontpage2000教程 第 五 课 使用表格 Frontpage2000教程 第 六 课 组件的使用 Frontpage2000教程 七 课 使用框架 Frontpage2000教程 第八课 使用多媒体 Frontpage2000教程 第九课 站点操作 Frontpage2000教程 第十课 表单设计 Frontpage2000教程 第十一课 创建讨论组 Frontpage2000教程 第十二课 站点的发布

frontpage2000教程 第 一 课 从一个网页开始

作者：未知

阅读人次：5527

文章来源：未知

发布时间：2004-11-20

网

友评论(7)条

认识Frontpage2000

你是否紧跟时代的潮流上了网？你在聊天室里是否听过别人聊起自己的个人主页，你会不会觉得自己没有个人主页就落伍了？有没有想过自己也要做一个主页？想过？那你还瞎呆在那里干什么？赶快阅读本教程，你就该学会制作自己的主页了。

本教程教你学会使用微软公司的Frontpage2000，学会干什么？当然是做你的个人主页啦。或许你认为制作主页是一门很深奥的工作，需要懂得大量的计算机知识。我现在要告诉你，你错了。在这个流行图形操作系统的今天，制作主页不再需要你去学习复杂，烦躁的HTML语言了，你只需要知道一个概念：主页（也称网页，怎么样称呼都无所谓）就象一张白纸，你可以在上面写字，画画等等，通过自己的设计，那张白纸可以变成很漂亮。做主页时就是这个概念，只不过我们写字，画画是用笔和白纸，而做主页我们是用鼠标，键盘和Frontpage

当然制作网页的工具不单只有Frontpage2000，还有许许多多好用的工具。但是对于初学者来说，Frontpage2000是最好不过了，因为它操作简单，方便使用，最适合初学者。或许你下了决心要做一个专业网页制作人员，要学会更多更专业的网页制作工具，但是我还是希望你先学习使用Frontpage2000，打好扎实的基础怎么样也好一点对吧。

学习本教程之前，你要准备好：电脑一部，当然包括鼠标和键盘，不然还了得，还有就是你的电脑要装上Frontpage2000，因为一边阅读教程一边实际操作总要好一些吧。

Frontpage2000可以从微软的Office2000里进行安装，Office2000哪里有？现在盗版之风吹遍大江南北，不用我介绍了吧：）

具体安装方法：把Office2000光盘塞入光驱，在安装向导出现选择要安装的文件时，选择Frontpage2000“从本机运行”（如图1）。

（图1）

（图2）

另外Office2000附带了一些好看的字体文件，在选择安装文件时，你也可以在文件列表下面的“Office2000工具”中选择安装（如图2）。

安装好了Frontpage2000，我们就可以开始学习了。努力，奋斗。

第一章

认识Frontpage2000

安装好Frontpage2000后你可以在Windows的开始菜单运行它。

首先我们来认识一下Frontpage2000的操作界面（如图3）。

（图3）

对于初学者来说，一看到有那么多的菜单和那么多的按纽，不禁会吓一大跳：“太复杂了，我看我还是不行了。”哈哈，请你放心，你太抬举Frontpage2000了，其实它没什么，就那么一点，你完全可以“征服”它的，给自己一点信心。

我们来把Frontpage2000的界面划分成两半，你可以看见图3上面有一条红线，当然在你的Frontpage2000上面是没有的，这只是笔者自己画上去的，为了大家好区分。

好的，那么我们看图3，我们把红线以上的那部分叫控制窗，红线以下的叫制作窗。

控制窗包括常见的那些“文件，编辑”菜单，虽然看上去挺多挺复杂，但是它大部分常用的命令都归到了下面一栏的按纽栏中去了。你看，在流行图形操作界面的今天，我们是多么地幸福啊：）下面一栏为属性栏，我们可以用这栏来定置文字和图片的属性等等。

制作窗包括编辑区和切换按纽。我们就把编辑区当做是一张白纸吧，你可以在上面写字（用键盘打字）和画画（插入图片），具体操作我们将在下几章学习。编辑区左下角有三个按纽，我们把它们叫做切换按纽：点“普通”按纽，就会出现默认的编辑区。点“HTML”按纽，编辑区就会变成一个满是英文（？！）的窗口，我们可以在这里编辑HTML，但是对于初学者，笔者不建议你去乱动。做好了网页的时候，我们可以点一下“预览”按纽来观看自己做的网页，不满意可以再点“普通”按纽回到编辑区修改。

另外当你第一次运行Frontpage2000的时候，你会看到编辑区左边会有另外的一栏，灰色的，上面有几个按纽，它叫“视图”栏。它可以让你更方便地查看网页的大小，连接等等。但是有时我们会觉得它妨碍了我们的工作，使编辑区看起来很窄很不舒服，为了不让它妨碍我们工作，我们可以点击控制窗菜单栏里的“编辑→视图”（如图4），使它消失，要使用的时候再重复点击一次使它出现，真方便

（图4）

到此为止，我们就已经和Frontpage2000交上朋友了，慢慢地，我们要进一步控制它，让它全心全意为我们服务。

Frontpage2000教程 第 二 课 编辑网页

作者：未知

阅读人次：19327

文章来源：未知

发布时间：2004-11-20

网

友评论(3)条

视图与模式

（一）

现在进入FRONTPAGE。单击任务栏“开始”按钮，选择“程序”选项，单击“MICROSOFT FRONTPAGE”选项就可以了。 可能你会发现FRONTPAGE界面和WORD很相似[图一]，这是因为编辑WEB页面和编辑WORD文档有很多同样的设置，这些设置所用的图标和WORD中的是一样的。

[图一]FrontPage2000 界面

视图中的组框是用来切换视图的，单击里面的小图标就可以切换到不同的视图。FRONTPAGE共有6种视图[如左]，使用不同的视图可以从不同的侧面查看设计的WEB站点。对一个WEB站点而言，不断更新是很重要的。随着站点的成长，维护站点的工作量会越来越大。建立站点可能很快，但是如果没有这6种视图的帮助，维护起来就很困难了。

这些视图的使用不用一下就全部掌握，只要知道有这些视图就可以了。

Frontpage2000教程 第 三 课 使用图形

作者：未知

阅读人次：6495

文章来源：未知

发布时间：2004-11-20

网

友评论(3)条

插入图形

如果有一个图形，怎么把它放到网页上呢？

首先要看你的图形是什么格式的，也就是它扩展名是什么 只有扩展名为GIF和JPEG的图形文件才能成为我们的页面的一部分。因为这两种图形格式不仅应用广泛，而且有利于节省存贮空间。

如果图形不是这种格式，使用了其它格式的图形文件，在保存网页时FRONTPAGE会提示做格式转换，FRONTPAGE可以自动进行格式转换。

现在可我们看看怎么插入图形 选择“插入”菜单的“图片”命令，单击“来自文件”按钮。

在默认情况下，FRONTPAGE认为你要插入的图片总是放在你建立的站点的目录或它的子目录下的。可以说,站点就是一个目录。我们把编辑的许多网页文件放在同一个目录下，我们称这个目录为站点的主目录。这些网页引用的图形一般也放在这个目录下。当然，我们也可以在这个目录下建立其他的子目录，再把所有的图形放在子目录里。所以搜索下拉列表只允许在主目录和主目录下的子目录进行选择。

如果要插入的图片不在主目录下, 在“选择文件”对话框中进行选择。

选择好文件以后，单击“确定”按钮，回到“图形”对话框。单击“确定”按钮，图形就插入了。现在单击“常用”工具栏的“保存”按钮。

在“另存为”对话框中输入新的web页文件的名字，单击“保存”按钮。

出现了一个对话框, 因为我们刚才插入的文件不在站点内，现在FRONTPAGE要把它复制到站点内，可是使用什么名字，放在站点的哪个目录下呢，就要在这设置了，单击“改变文件夹”按钮，

另外这儿还在需要时对图形的格式进行转换。单击“位置”按钮，在默认情况下，图形被保存在站点的主目录下，现在我们选择IMAGE目录，单击“确定”按钮。回到“嵌入式文件”窗口，再单击“确定”。这样，图形就保存在站点内了。

我们还可以从INTERNET上插入一个图形。

选择“插入”菜单的“图片”命令， 在URL栏内输入图片的地址，单击“确定”按钮。由于是插入网上的图片，因此在插入图形以后，应该保存一下网页，使图形存到站点内。

您可能说,我不会画画，插入图片容易，可是编辑图片就不容易了。没关系，FRONTPAGE自己带有许多剪贴画，你可以把它们插入到自己的网页。

选择“插入”菜单的“图片”命令， 选择“剪贴画”。

你看，各种剪贴画都分类放好了。你可以自由地选择。

不过，插入后别忘了保存网页，把剪贴画复制到站点目录下。

Frontpage2000教程 第 四 课 超链接

作者：未知

阅读人次：7003

文章来源：未知

发布时间：

2004-11-20 网友评论(5)条

用文本和图形建立链接

怎样才能自己做的网页相互联系起来呢?也就是说让别人点页面上的图形或文本就跳转到其他页面呢？

在网页里，我们把这种点击后会进行页面切换的网页界面元素叫超链接。

先来看一下用文字来建立链接。

首先创建一个指向站点内其他网页的超链接。

选择“插入”菜单的“超链接”命令，在文件列表框内选择“页面1.htm”文件，注意在URL文本框中显示了该文件的地址。

单击“确定”按钮.超链接就制作成功了。

我们切换到预览模式（单击预览按钮），

当我们把鼠标指向“主页”两字时鼠标变成手形，单击它，我们就切换到主页了。

那么为什么不在普通模式下试呢？：因为普通模式主要是用来编辑网页的，当我们在普通模式把鼠标指向“主页”两字时鼠标没有变成小手状，因此不能进行页面切换。 不过如果按住CTRL键，鼠标就变成了小手状。这时单击就可以进行切换了。也就是说在普通模式中按住CTRL键才能激活超链接。

我们也可以将超链接指向其他站点的网页。选中作为超链接的文本，单击“常用”工具栏的“超链接”按钮单的超链接命令是一样的。

，这和选择插入菜

在“创建超链接”对话框里，在URL地址栏直接输入要连接的网页或网站的地址。 如果不清楚要作超链接的地址，只要单击URL地址框后面的放大镜

单击“确定”按钮就可以了。

就可以用浏览器在INTERNET上查找要链接的网页，FRONTPAGE会自动记录你找到的地址。

我们还可以改变已经设置好的超链接。首先确认是普通模式，在要改变的超链接下单击鼠标右键，选择“超链接属性”命令，输入新的URL地址就可以了。

要想取消超链接，删除所有URL地址框里的内容就可以了。

还有一种超链接，可以链接电子邮件。这样可以使你的网上朋友通过Email及时与你联系，这是一个网站站长和网友交流的重要手段。

首先选中要作为超链接的文本，一般文本就是你的邮箱地址，单击“超链接”按钮，单击“信封”按钮，输入你的邮箱地址，

单击“确定”按钮，退出对话框， 选择“确定”，这时超链接就建立好了。我们试一下，切换到预览模式，单击邮件链接，

这样OUTLOOK被激活了，现在就可以发Email了。

刚才讲的都是用文本建立超链接，怎么用图形来建立链接呢？ 其实图形超链接和文字超链接的制作方法是一样的，只要在建立超链接时选择图形就可以了。

首先选中超链接的图形，单击箭头图形，单击“常用”工具栏“超链接”按钮，选择主页文件“页面1.htm”，单击“确定”按钮.在普通模式中，按住CTRL键，单击箭头图形，就跳到主页页面了。

Frontpage2000教程 第 五 课 使用表格

作者：未知

阅读人次：7876

文章来源：未知

发布时间：2004-11-20

网

友评论(4)条

创建表格

在FRONTPAGE的诸多功能中，制表功能也是一个很重要的方面。我们不仅利用表格显示一些有规律的数据，而且还经常对表格中的单元格进行调整，在其中放入文本和图形，达到对网页进行布局的目的。

我们来看看这个网页，这是在普通模式里的效果。

文本被分成左右两栏了。文本周围有虚线包围。这些虚线实际上就是表格的框线，我们利用表格把网页分为了左右两栏。

我们切换到预览模式，框线没有了。

在普通模式看到的虚线可以便于我们编辑。由于表格框线的宽度是0，所以它在普通模式里是虚线显示的，而在浏览器里它就不显示出来。也就是说用一个看不见的表格把文字分开。

怎样创建表格呢？

首先把插入点调整到要插入表格的位置，单击“常用”工具栏“插入表格”按钮，拖动鼠标，直到高亮的格子的行列数与你要插入的表格相同为止。这里我们用3乘4的，也就是3行4列的。

实际上这种方法创建单元格只能将各单元格行高和列宽设置为一样的，如果要在创建表格时对表格进行设置，可以使用插入表格命令。 设置好插入点后，选择“表格”菜单的“插入”命令，单击“表格”命令，

将行数设置为3，列数设置为4，将边框粗细设置为5，将单元格间距设为3，确认指定宽度复选框选中，并选择单位为百分比， 设置百分比为80，使表格宽度为浏览器宽度的80%，单击“确定”按钮。

新建的表格边框变粗了。这是因为我们刚才设置了边框的粗细为3，另外单元格之间的分割线也变宽了，这是因为我们设置了单元格间距的结果。我们的设置也自动变为了下一次创建表格的默认设置。

还有一种创建表格的方法，你可以直接把表格画出来。

选择“查看”菜单的“工具栏”命令，单击其中的“表格”选项，这时就会显示“表格”工具栏。

单击“手绘表格”按钮，用拖动鼠标的方法画一个表格。 双击鼠标退出画表格状态。

如果画错了就单击“擦除”按钮，在要擦除的线条上拖动，这时线条会变红，

放开鼠标，线条就被擦除了。

表格工具栏的其他按钮都与表格菜单的各条命令相对应，它们的使用方法也是一样的。

Frontpage2000教程 第 六 课 组件的使用

作者：未知

阅读人次：11095

文章来源：未知

发布时间：2004-11-20

网

友评论(3)条

使用字幕

这种滚动文字我们称为字幕。它特别醒目，我们经常使用它来发布一些站点的通知或提示信息。

其实创建字幕很简单。我们把插入点放到要使用字幕的位置，选择“插入”菜单的“组件”命令，单击“字幕”选项，

在文本框中输入要滚动的文字，单击“确定”按钮。字幕不动，这是因为我们现在是在普通模式下，我们单击“预览”选项卡切换到预览视图，字幕的滚动效果就呈现出来了。

字幕的字体、字号、字颜色是可以调整的。我们在要调整字体字体、字号或字颜色的字幕上单击鼠标右键，选择“字体”命令进入“字体”对话框，

把字大小改为5，字颜色改为绿色。当然在这里你也可以选择“字符间距”选项卡改变字符的间距，单击“确定”按钮。这时字符的外观就改变了。

其实，对字幕的字符串外观进行设置和对普通字符串的设置是一样的。只不过字幕字符串是一个整体罢了。

除了可以调整字幕的外观外，字幕的背景颜色、滚动速度等都是可以调整的。

我们在字幕上单击鼠标右键，选择“字幕属性”命令，进入“字幕属性”对话框。

下面，我一项项给您介绍：

“方向”组框用来指定字幕是向哪个方向滚动，现在的设置表示从右向左滚动；

“速度”组框用来调整字幕滚动的速度；

“延迟”表示字幕每滚动一步的时间间隔是多少毫秒；

“数量”表示字幕每滚动一步的距离是多少像素；

“表现方式”是调整字幕滚动的具体效果，你可以自己试试；

“重复”组框用来对滚动效果的循环次数进行选择；

“背景颜色”用来调整字幕的背景颜色；

“大小”用来设置字幕的宽度与高度。你可以使用像素来控制字幕的实际大小，也可以使用百分比来设置字幕的宽度，这时字幕的实际大小是根据浏览器窗口大小的百分比来计算的；

“文本对齐方式”组框是用来调整字幕和它所在行文字的对齐方式的。里面有三种对齐方式的效果。

象字幕效果是动态HTML的一种功能，它是制作网页的一种标准。不过动态HTML并不是所有版本的浏览器都支持。比如字幕效果只有在Internet Explorer 4.0与Netscape Communicator 4.0以上版本才能看出来，而在低版本的浏览器上它们不过是普通文本罢了。

Frontpage2000教程 七 课 使用框架

作者：未知

阅读人次：9338

文章来源：未知

发布时间：2004-11-20

网

友评论(3)条

创建框架

你见过布告栏吗？就是那种有一个大的栏框，里面张贴着各种各样的布告的框架。布告栏可以把一个版面分成几个部分，在每一个部分里可以张贴不同的内容。

在我们的FRONTPAGE中，也可以制作这样的“布告栏”。在FRONTPAGE中我们把它叫做框架，它可以把一个浏览器窗口分成几个区域，每一个部分可以显示不同的网页。看，这些就是用框架制作的网页：

这是一个双框架网页，它把浏览器空间分成了两个框架，左框架和右框架分别显示了不同的两个网页。

这是一个三框架的网页，它分为三个框架，上面、左面和右面的框架都放着一个单独的网页。

我们还可以把不同框架的网页相互联系起来：

回到双框架网页中，单击左框架中的“显示主页内容”，这时在右面的框架里就会显示当前网站的主页。

刚才我们单击了左框架的超链接，它就要显示链接到的网页，可是显示在右面的框架里。这是因为右框架是左框架的目标框架，在FRONTPAGE中，一个框架的链接内容总是显示在它的目标框架里。

我们现在就来制作一个框架网页：

选择“文件”菜单的“新建”命令，单击“网页”按钮，选择“框架网页”选项卡，

在这里列出了十种框架布局模板，你可以根据自己的需要选用。单击“目录”模板，在预览部分显示了框架网页的布局，上面的说明告诉我们左面的超链接内容在右面显示，这样我们就知道右框架是左框架的目标框架。有了这些信息你能够选择合适的框架模板了。 单击“确定”按钮。

我们建立的框架网页上有按钮。

这是因为刚才我们创建了一个框架网页，但是并没有指定在各个框架里显示哪个网页，就好像我们做了一个布告栏，但是并没有向里面张贴布告一样，而这些按钮就是用来让我们指定在框架里显示哪个网页的。

Frontpage2000教程 第八课 使用多媒体

作者：未知

阅读人次：4647

文章来源：未知

发布时间：2004-11-20

网

友评论(3)条

使用音频

网页除了显示图形和文字之外，还能实现多媒体功能。

对多媒体的良好支持是FRONTPAGE的一个突出的特色。我们能够很容易的在网页里播放音频和视频。

我们从最简单的嵌入音频开始。 我们选择“插入”菜单的高级命令，单击“插件”选项，

在打开的“插件”属性对话框中单击“数据源浏览”按钮，选择要播放的音频文件，我们可以选择扩展名为WAV、MID、SND、AU的音频文件，

单击“确定”按钮。

在普通模式下，为了表示插入音频的位置，FRONTPAGE就会使用这样的插头标记。

现在我们切换到预览模式，音乐就自动播放了。

现在插头变成一个播放器了。

这个播放器名字叫ACTIVE MOVIE，它是Internet Explorer浏览器自带的一个媒体播放插件。浏览器检测到我们在网页里插入了一个音频文件，就会在插入音频的位置显示一个ACTIVE MOVIE播放器，并用它来播放音频。

最新版本的Inter Explorer 和 Netscape Navigator都带了播放多媒体的必要插件，不过如果浏览者的浏览器没有带插件或没有安装，我们最好给他们一个不能播放文件的提示信息。

在刚才插入的音频文件图标上右单击鼠标健，选择“插件属性”命令，

在“浏览器不支持插件时显示的消息”文本框中输入“对不起，您的浏览器不支持这种文件格式的播放.”，这样，当使用的浏览器不能播放音频时，浏览者就会在网页上看到提示信息。

我们可以改变音频图标的大小：单击音频图标，拖动图标四周的小黑点，图标就变大了，切换到预览模式，播放控件就也变大了。这和改变图片的大小是一样的操作方法。

我们也可以精确的调整插件在网页中显示的大小：在普通模式下的音频图标上右单击鼠标健，选择“插件属性”命令，

我们只要修改“大小”部分的数值就可以调整插件的大小。

“布局”部分中：对齐方式用来调整插件与网页中其他文字的对齐方式。这也和图片的对齐方式一样；水平和垂直间距用来是用来调整插件与周围文本的距离的，变框粗细是用来设置图标边界的宽度的。

现在我们把“隐藏插件”选项选中，

把浏览器不支持插件时显示的消息去除，单击“确定”按钮。

切换到预览模式。 插件没有了，音乐却在播放。这说明插件仍然在播放音频文件，只不过被隐藏起来罢了。刚才我们还除去了浏览器不支持插件时显示的消息，这样就实现了网页的背景音乐。

我们也可以使用插入音频的方法。嵌入要使用插件来播放音频文件，离开了插件，嵌入的文件就不能够正常的播放。而插入则不同，它在播放多媒体时并不依赖插件，只和我们使用的浏览器有关。目前，Internet Explorer支持对插入的音频的播放，而Netscape Navigator还不能支持。也就是说，目前插入的音频只能在Internet Explorer上播放，不过以后情况会有所改变。

好了，现在我们来看一看怎么插入音频：在网页内右单击鼠标健，选择“网页属性”，

单击背景音乐框的浏览按钮，

选择插入的音频文件，单击“确定”按钮，

在默认情况下，不限次数复选框是选中的，表示文件将不断循环播放， 单击\"确定\"按钮。

还可以设置播放的次数。 再次进入”网页属性“对话框，去除不限次数复选框的选中，这是我们就可以调整播放次数了。

因为插入的音频不使用插件播放，所以播放的方式是事先设置好的，在浏览网页时，用户是控制不了的。

使用音频还有一种方法，就是链接音频。我们现在选中“播放音频”文字，单击“常用”工具栏“超链接”按钮，选择音频文件，

单击“确定”按钮。

现在我们用浏览器来看一看：单击超链接，音频文件就在独立的ACTIVE MOVIE中播放了；

我们用鼠标右键单击超链接我们还能选择“目标另存为”命令将音频文件下

Frontpage2000教程 第九课 站点操作

作者：未知

阅读人次：6891

文章来源：未知

发布时间：2004-11-20

网

友评论(3)条

创建新站点

我们讲了这么多的网页设计技巧，现在就可以进入创建站点的学习了。

用FRONTPAGE创建站点是很容易的。首先，我们来看一下创建一个只包含一个网页的站点。

选择“文件”菜单的“新建”选项，单击“站点”命令，这时新建站点对话框就弹出来了，

在“指定新站点位置”文本框中输入新站点的位置，单击“只有一个网页的站点” 图标，单击“确定”按钮。

这就建立好站点了，我们现在来看一下新的站点里有什么，单击“视图”工具条的“文件夹”按钮。

在文件夹列表里有一个网页文件，名字叫做“index.htm”。我们知道，每一个站点都要有一个主页，这个主页也是一个网页文件。浏览者访问站点时首先进入的就是站点的主页。主页的名字在一般情况下就叫做“index.htm”。就是说我们新建只包含一个网页的站点时，FRONTPAGE就自动为我们创建了站点的主页了。这个新建的站点主页时空的，我们可以向里面添加内容。

在文件列表里除了主页之外，还有文件夹。新建站点时，FRONTPAGE都会在站点所在位置下新建两个文件夹，一个是“images”另一个是“_private”。

我们在编辑站点时可以在“image”文件夹里放置站点用到的图片。

“private”文件夹比较特殊，其中的文件对浏览者来说是隐含的，我们可以把一些不想让浏览者看到的网页文件放在这个文件夹里，比如：我们可以在这个文件夹里存放注册用户的个人信息。

尽管每一个站点都要有一个主页，不过创建站点时我们仍然可以从一个空站点开始：

选择“文件”菜单的“新建”命令，单击“站点”选项，

在“新建站点”对话框里，我们可以选择“空站点”图标来创建一个空站点。

“新建站点”对话框中还有许多其他图标，这是FRONTPAGE提供的用来创建站点模板或向导。我们创建只有一个网页的站点或者创建空站点，都是从头开始来创建一个站点，这就好像盖房子一样，首先画图纸。然而，有许多的房子都具有相似的结构和用途，所以我们可以用一张图纸盖很多相似的房子，这样就节省了许多工作。

同样的，尽管站点的风格千差万别但是有许多站点的功能和结构都是一样的，如果我们从头开始建立站点的话，就要做许多重复劳动，这时，我们就可以使用模板或向导来建立站点。

模板和向导的作用就好像盖房子的图纸一样，我们不必每次建立站点时都从头开始。

我们单击“个人站点”图标，

用它可以迅速创建一个个人站点，输入站点所在的位置，单击“确定”按钮，

你看，这就是我们刚才创建的个人站点。个人站点模板已经为我们规划好了站点的目录和建立了相关的页面。

现在我们点击一下“文件夹”按钮，

双击index.htm图标，

看，这就是我们的个人站点的主页。

哎，好象有许多文字都不对，没关系，这些文字都是可以改变的，现在写的是文字的用途，比如“主题”文字就是用来写网站标题的地方，我们只要把它改为自己喜欢的标题就可以了。

返回到“文件夹”模式，

双击photo.htm。 也可以把风景图片换成自己的照片，只要在新建站点的基础上进一步修改就可以做出自己的个人站点了。 这不仅节省了许多力气，同时也给了初学者一个良好的出发点。我想，你会喜欢用模板和向导来创建站点的。

那么模板和向导有什么区别呢？

我们安装软件时，一步步的用对话框提示我们完成安装过程的程序就是一个向导。在FRONTPAGE里，向导也是一种模板，不过它是一种特殊的模板，它会以对话框的形式辅助你完成站点的创建过程。

现在我们选择“文件”菜单的“新建”选项，单击“站点”命令，

你看，FRONTPAGE提供了两个向导：公司展示向导、讨论站点向导，使用起来都很方便，你有兴趣也可以利用向导建立一个站点。

Frontpage2000教程 第十课 表单设计

作者：未知

阅读人次：10210

文章来源：未知

发布时间：2004-11-20

网

友评论(3)条

搜索表单

上一课我们学习了站点操作，在结合网页的编辑技巧，相信你已经可以制作一个自己的站点了。不过我们要把站点设计的更好，还需要继续学习。比如说，搜索网页。

你看这一个网页，在网页中有一个搜索文本框，里面可以输入文本，同时还有“开始搜索”和“重新填写”两个按钮。这是一个最简单的搜索表单。

它是将搜索表单发布到WEB服务器并在浏览器中看到的结果。我们在自己的计算机上编辑完站点以后，可以先把站点的文件拷贝到一个大家都可以访问的服务器上，这样别人就可以通过浏览这个服务器来来访问我们的站点。这个过程就好像把工厂生产的产品拿到商店里让大家选购一样。我们把这个过程叫做站点的发布。我们把站点的WEB页拷贝到一个服务器上让大家访问，为了把这个放WEB页的服务器和其他服务器区分开，我们就把它叫做WEB服务器。 我们试一下就知道这个发布到WEB服务器的搜索表单有什么用了。

现在我们在“搜索”文本框中输入“Test”，单击网页上的“开始搜索”按钮。

网页上多出了一个表格。这个多出的表格列出了我们网站中所有出现了“TEST”的网页，以及这些网页的修改日期、大小、和与关键字匹配的紧密程度。

这个网页是一个进行关键字搜索的网页。现在我们自己也做一个这样的搜索表单我们首先在要插入这样的搜索表单的位置单击，使插入点放到指定位置，选择“插入”菜单的“组件”子菜单，单击“搜索表单”，进入“搜索表单属性”对话框。

在“搜索表单属性”选项卡里，我们可以改变搜索表单的文本框和按钮的提示，现在我们把“输入框的标签”改为“在网站中搜索：”，

单击“搜索结果”选项卡，

在这里我们可以设置显示查询结果时要显示哪些信息，以及信息的格式，我们选中“显示文件大小”和“选中文件日期”复选框，单击“确定”按钮。

搜索表单显示在指定位置了。除了搜索文本框的提示信息之外，它的外观和刚才的搜索表单并没有什么不同。现在我们单击“预览”选项卡，切换到预览模式，在“在网站中搜索：”中输入“FRONTPAGE”，单击“开始搜索”按钮。

没有反应？ 我们看一下预览窗口的标题：“该网页中存在着需要保存或发布后才可正常预览的元素”。这说明我们的搜索表单在发布到WEB服务器之前是不能正常工作的。

我们来看一看表单的工作原理。首先说说搜索表单和普通网页有区别：搜索表单可以让我们输入字符串，还可以查询关键字。而普通网页只能让浏览者通过选择超链接的方法进行选择，察看指定的网页，这些网页都是事先设计好的，在浏览时并不改变。但是搜索表单的查询结果可以不一样，每次查询都会改变网页的显示内容，这也就是说搜索表单在浏览时显示是可以改变的。

我们再来看一下表单的工作过程：

1.首先，用户输入要查询的关键字，然后单击“开始搜索”按钮，浏览器就会把用户输入的信息发送到WEB服务器，这个过程叫做提交；2.接着WEB服务器受到信息之后就进行查询找到相关的网页，提取它们的大小、名字的等信息，并把这些信息格式化为WEB网页； 3.最后，服务器再把格式化后的网页发回用户的浏览器，这时用户就看到查询到的信息了，我们把这个过程叫做表单处理。

也就是说，表单处理的过程是在WEB服务器上完成的。正是因为这个道理，我们如果不把搜索表单发布到服务器就不能正常使用搜索表单的功能。

Frontpage2000教程 第十一课 创建讨论组

作者：未知

阅读人次：5164

文章来源：未知

发布时间：2004-11-20

网

友评论(4)条

创建讨论组（上）

上节课我们学习了表单方面的内容，利用表单的各个字段，可以设计出各种各样的在浏览者和站点之间进行交互的网页。其中讨论组就是应用得很广泛的一种。

看，这就是一个讨论组站点，

在这里可以让浏览者对一个话题进行讨论。浏览者可以阅读别的浏览者发送的文章，也可以对阅读的文章进行回复。浏览者还可以发送一篇新文章。使用搜索表单，浏览者可以迅速的找到要自己感兴趣的文章。

讨论组的创建使用了框架、表单、FRONTPAGE组件等功能。要从头创建一个讨论组确实不容易。不过使用FRONTPAGE提供的讨论组向导，建立一个讨论组还是很愉快的一件事情。

我们单击“文件”菜单，选择“新建”选项，单击“站点”命令，进入“新建”对话框，

单击“讨论站点”图标，将“添加到当前站点”复选框选中，这样我们就可以在前站点下添加讨论组了，单击“确定”按钮

这时文件夹列表多了几个文件，这些就是我们讨论组所用的网页。

我们再来看看多出的这几个文件各有什么作用：

 “article_welc.htm”是讨论组的欢迎网页；

 “article_nav.htm”是讨论组的导航栏网页；

 “article_post.htm”是浏览者发送文章用的表单网页；

 “article_cfrm.htm”是表单的确认网页；

 “article_topic.htm”是讨论组的所有文章的目录；

 “article_frm.htm”是一个框架网页，在这个网页里可以同时显示讨论组的目录、导航栏和文章内容；

 “article_search.htm”是搜索文章的网页。

只要你愿意，你可以像编辑普通网页一样，修改这些网页，添加你需要的内容。

我们发布站点之后，在浏览器里浏览站点。

在这里我们就可以通过“发表新文章”和“搜索”超链接来发表文章和搜索已有文章。

现在我们单击“发表新文章” 超链接，

这时确认表单就出现了，告诉浏览者他们发送的文章已经成功地发送到了服务器。

现在我们单击“刷新整页”按钮进入讨论组的框架网页。

在这个网页的上方是讨论组的导航栏框架内容网页，左方把文章和对文章的回复以目录的形式列了出来。我们单击左方的文章，

如果单击“回复”超链接我们还可以对当前阅读的文章进行回复。

Frontpage2000教程 第十二课 站点的发布

作者：未知

阅读人次：9583

文章来源：未知

发布时间：2004-11-20

网

友评论(3)条

建立站点服务器

我们在设计好站点之后，就可以将站点发布到WEB服务器了。只要安装个人WEB服务器，就可以建立自己的WEB服务器了。

在WINDOWS安装盘里有一个Add-ons\\PWS目录，这个目录存放着WINDOWS个人网站服务器的装文件，我们执行这个目录下的“SETUP.EXE”应用程序就可以安装个人网站服务器。在安装完毕后，在WINDOWS任务栏的右方就会有个人网站服务器的图标出现。此时系统会提示我们要重新启动计算机。

重新启动计算机后，我们双击个人网站服务器图标，进入个人WEB管理器，“HTTP：//xiaosong”就是我们的个人网站的地址。

我们来看看怎么把自己的站点发布到新建立好的个人网站服务器。刚安装好的个人网站服务器还需要配置FRONTPAGE的服务器扩展。

配置FRONTPAGE的服务器扩展有几个好处：

首先，如果我们不配置FRONTPAGE的服务器扩展，那么有的网页功能就无法实现，比如：查询表单、计数器、一些可插入的组件都无法正常工作。

其次，服务器扩展程序还可以自动为我们更新文件和超链接。在每次我们发布站点的时候，服务器扩展程序都会自动比较待发布的本地站点和服务器上的站点，找出其中的不同之处并做相应的更新。

最后在配置FRONTPAGE的服务器扩展之后，我们还可以以HTTP的形式发布我们的站点，甚至可以直接在FRONTPAGE里编辑服务器上的站点。

要配置FRONTPAGE的服务器扩展，首先要安装服务器扩展管理器。这是OFFICE2000安装对话框，

这是OFFICE2000安装是的一个对话框，在这里我们可以选择安装OFFICE2000的哪些部件。单击“MICSOFT FRONTPAGE FOR WINDOWS”下拉列表，单击“服务器扩展管理表单”，选择“从本机运行全部程序”，这样服务器扩展管理表单就会被安装到计算机里。

用同样的方法选中“服务器扩展源工具”，单击“开始更新”，完成安装后，服务器扩展管理器就被装入计算机里了。

再来讲讲怎么配置FRONTPAGE的服务器扩展：单击“开始菜单”，选择“程序”，单击“MICROSOFT OFFICE工具”，选择“服务器扩展管理器”，这时我们就进入了服务器扩展的管理控制台。

第18篇：网页设计

燕山大学

电子商务法论文

题目：网络链接引发的著作权案

学院（系）：经济管理学院年级专业：09级电子商务学号：090105070023学生姓名：郭振宏

指导教师：胡心专

日期：2011/4/1

4网络链接引发的著作权案

摘要：链接是互联网上快捷地传递和获取信息的一种技术手段，是互联网的重要功能。上网者通过链接获取的网上信息存在侵权问题时，一般应当追究上载该信息网站的法律责任，提供搜索引擎链接服务的网络经营者不承担侵权责任。但是，如果该网站经营者明知其他网站网页上含有侵权内容的信息，还继续提供该种服务，则应承担侵权责任。

关键词：非法链接；著作权保护

1、刘京胜诉搜狐侵犯著作权案

2000年10月，原告刘京胜在上网访问被告搜狐公司的搜狐网站时，发现通过点击该网站“文学”栏目下的“小说”，即进入搜索引擎页面。根据页面提示顺序点击“外国小说@(5064)”、“经典作品(86)”、“唐吉诃德——[西班牙]塞万提斯”、“译本序言”后，可在页面上看到其翻译作品《唐吉诃德》。于是，原告刘京胜申请北京市公证处对以上上网的操作过程、路径和终端监视器上显示的页面内容进行公证，后据此于24日向北京市第二中级人民法院提起诉讼。11月6日，被告向北京市公证处申请按照原告上网的过程、路径进行公证。15日，被告向北京市公证处申请对上述网站访问《唐吉诃德》中文版的过程和路径进行公证。被告两次公证的目的在于证明：1.该作品不是其搜狐网站上载，亦不在搜狐网站的网页上，而是通过搜狐网站的搜索引擎进入他人的网页后才看到该作品;2.直接访问、网站，即可看见载有原告翻译作品的网页;3.由于搜狐网站与上述三个网站有链接关系，所以能通过搜狐网站访问这三个网站载有原告翻译作品的网页。

11月23日，本案开庭审理时，原告当庭明确要求被告断开与上载其翻译作品的网站的链接。被告以法律未规定链接是侵权为由拒绝。30日，被告才断开链接。

裁判结果：北京市第二中级人民法院认为：根据《中华人民共和国》第十二条的规定，原告对《唐吉诃德》享有翻译作品著作权，应当受到法律保护。未经许可使用其作品，是对著作权的侵害。当得知侵权行为发生或可能发生时，任何与该侵权行为或结果有一定关系的人，都应当采取积极的措施，防止侵权结果扩大。

被告向公众提供搜索引擎服通过搜索引擎与侵权网站发生了临时链接，其虽然难以控制搜索引擎的特定搜索结果及其附带的临时链接，但完全有能力控制对特定网站或网页的链接。原告提起侵权诉讼时，虽因了解两种技术的不同而将搜狐公司链接行为指控为上载，但毕竟将自己是涉案作品的著作权人、其权利被侵害以及希望尽快制止侵权的意思表示清

楚。被告收到起诉书后，没有及时断开链接，使侵权结果得以扩大，起到了帮助侵权人实施侵权的作用。依照著作权法第四十五条第(八)项的规定，被告应当对自己的这种行为承担侵权的法律责任。

2、娱乐基地诉百度MP3深层次链接

2006年4月7日，杭州原创音乐网站“娱乐基地”向北京市第一中级人民法院正式起诉，控告百度、新浪和雅虎MP3搜索引擎侵犯其著作权，并要求每家公司赔偿其经济损失500万元。 “娱乐基地”指出，百度等3家公司通过搜索技术直达“娱乐基地”网站的下载后台，将本该付费下载歌曲的绝对地址开发给网民免费下载。“娱乐基地”认为百度等搜索引擎公司的行为给其造成了经济损失。

“娱乐基地”称，百度提供的“深层链接”，其链接的是数据库的MP3文件，这使得网民无须打开被链接网站的页面就能免费下载，百度从中获取巨大的商业利益，而无需承担上传、保存、编辑等劳力财力支出。“娱乐基地”需要为此承受各种硬件资源，维护网站的成本每年高达数千万元。由于搜索引擎提供免费MP3下载，“娱乐基地”在数字音乐方面得不到任何收益。因此诉至法院，要求百度、雅虎、新浪三个被告立即停止侵权、公开赔礼道歉，并各自赔偿经济损失计500万元。

百度方面则认为，侵权的是提供盗版资源下载的网站，而非搜索公司。百度只为网民提供搜索结果，但无法判断搜索到的东西是否侵权。

2007年1月，持续了10个月的娱乐基地诉百度 MP3 深层链接侵权案有了庭审结果：北京市第一中级人民法院驳回娱乐基地对百度的诉讼。

网络服务商免责：提供链接、搜索服务，接到通知停止链接、不明知不承担责任。 对于搜索链接服务商的责任，《信息网络传播条例》第二十三条规定了免责条件，即网络服务提供者为服务对象提供搜索或链接服务，在接到权利人的通知书后断开与侵权作品的、表演、录音录像制品的链接的不承担责任；但是明知或者应知所链接的作品侵权的，应承担共同责任。

3、法律与网络共同发展

互联网是一个高速发展的全新行业，对于浩瀚的信息来说，搜索引擎使其从混乱无序、随意的状态，转变成有规律、系统的世界。链接则将网上的关联内容同时呈现，又排列有序，使普通用户可以轻松得到需要的信息，最大程度的发挥了互联网对信息的传递功能。

对于这个日新月异的互联网领域，法律是不可能事无巨细的超前规定的。各国目前都在对搜索、链接服务引起侵权责任进行探讨，但都还没有明确的规定。美国的DMCA为了鼓励搜索服务，提供了“安全港”原则，使ISP在接到通知后，只要删除被主张权利的作品，或停止链接该作品，即可免去承担侵权责任的危险。但在其Napster判决中，提供侵权内容链接的行为，却又被认定为侵权的帮助行为。使其对搜索、链接的态度更加难以判断。

相信随着互联网SP业务发展的不断成熟，在不久的将来，我国法律对于搜索、链接的问题，必然会做出明确的规定。

参考文献：

【1】《反不正当竞争法》

【2】《著作权法》

【3】陈坚《试析非法链接的著作权间接侵权责任，中国政法大学硕士学位》

【4】王迁：《论网络环境中版权直接侵权的认定标准（上）》，载于《东方法学》2009年第二期，第一页

第19篇：设计网页

1、设计在线（新闻绝对是业界最及时的）

2、视觉中国（新新设计师的代表性网站，有些杂，速度也不快）

3、设计前沿（从事工业设计的同胞们必去）

4、设计师家园（建筑与室内设计师非去不可）

5、亚洲CI网（网站本身不怎么样，但是论坛非常不错，高手云集）

6、V6DP（论坛，年轻设计师的天下）

7、ad110.com（云集非常多大师作品以及他们的网站导航）

8、Arting365（有些不错的独门信息及作品）

9、台湾创意设计中心（了解台湾设计的必去站点）.tw/

10、肖勇（中央美院教师的网站，有些信息值得阅读）

设计师值得去的十大新网站

1、DDC传媒（强调数字艺术的综合性网站，2004年底成立）.cn

2、ad110.com（云集非常多大师作品以及他们的网站导航，2004年底成立）

3、鲜创意（综合性网站，2005年初成立）

4、数字艺术（搜狐数码频道的分栏目，2005年初成立）

digi.it.sohu.com

5、涂鸦王国（自由开方性质的网上涂鸦站点，2004年底成立）poobbs.com

6、中国美术家（非常全面，但是速度非常慢，2005年初成立）.cn

9、视觉同盟网（综合性网站，2004年成立）

10、中国广告协会（不说了，看题目就知道，2005年初成立）

第20篇：网页设计

网面设计

第一次作业

1.在不同类型的旅游网站中，制作风格接近于正统的商业网站类型，但带有旅游网站活泼、轻快的特点的是（ D ）。

1.2.3.4.景点类网站

旅行社网站

户外运动俱乐部网站

旅游服务类网站

2.Flash输出的网络动画文件格式是（A ）。

1.2.3.4.swf

mov

wav fla

3.Flash中，时间轴的用途是（

D）。

1.2.3.4.开启新文件

关闭旧文件

存储旧文件

制作动画情节

4.Dreamweaver CS5中有很多面板，其中用于管理本地站点文件和文件夹的面板是（ A ）。

1.

2.3.4.文件面板

插入面板

属性面板

行为面板

5.下列哪个是Photoshop图像最基本的组成单元（ D ）。

1.2.3.4.节点

色彩空间

路径

像素

6.在Photoshop CS中，下面哪种工具可以选取要操作的局部图像？（ D ）

1.2.3.4.吸管

抓手

铅笔

魔棒

7.Photoshop CS存储文件时，默认的文件格式是（ A ）。

网面设计

1.2.3.4.PSD

BMP

PDF

JPEG

8.HTML网页源文件的文件类型是（B ）。

1.2.3.4.可执行文件

文本文件

二进制数据文件

二进制多媒体文件

9.下面不是Web服务程序的是（A ）。

1.2.3.4.Word

Apache

IIS

Tomcat

10网站可以划分为不同的类型，如果按照网站的服务分类，则“七匹狼服饰”网站属于的类型是（A ）。

1.2.3.4.展示型网站

内容型网站

电子商务型网站

门户型网站

11 对于在网络上播放的动画,最合适的帧频率是（ B ）。

1.2.3.4. 8fps

12fps

24fps

48fps

12 打开Dreamweaver CS5后，如果工作界面中没有出现属性面板。可执行（ B ）菜单中的“属性”命令将其打开。

1.2.3.4. 查看

窗口

命令

站点

13 常用来接收用户在浏览器端的输入数据，然后将这些信息发送到服务器端的页面元素是（D ）。

网面设计

1.2.3.4. 文本

图像

表格

表单

14 网站可以划分为不同的类型，如果按照网站的服务分类，则“京东商城”网站属于的类型是（C ）。

1.2.3.4. 展示型网站

内容型网站

电子商务型网站

门户型网站

常用来接收用户在浏览器端的输入数据，然后将这些信息发送到服务器端的页面元素是（D ）。

1.2.3.4.

第二次作业  文本

图像

表格

表单

 1北京邮电大学网络教育学院网站属于（A ）。

1.2.3.4. 互动学习类教育网站

主题资讯类教育网站

教育科研类教育网站

综合类教育网站

 2 下列关于CSS的说法错误的是（D ）。

1. CSS的全称是Cascading Style Sheets，中文的意思是“层叠样式表”

2.CSS的作用是精确定义页面中各元素以及页面的整体样式

3.CSS样式不仅可以控制大多数传统的文本格式属性，还可以定义一些特殊的HTML属性

4.使用Dreamweaver CS5只能可视化创建CSS样式，无法以源代码方式对其进行编辑

 3.下面关于个人网站设计的叙述错误的是（ C ）。

1. 个人网站设计时需要考虑浏览器的兼容性问题

网面设计

2.为了使网站生动，个人网站设计可以考虑使页面具有交互性

3.为了使网站生动，个人网站设计应该较多地使用动画

4.设计个人网站时要少用特殊字体

 4.下面关于Spry框架的叙述错误的是（B ）。

1.2.3.4. Spry框架可用来布局网页元素

Spry框架是是由HTML标签生成的

利用Spry框架可以制作菜单栏

利用Spry框架可以制作选项卡式面板

 5.下列选项中关于在Dreamweaver CS5中的AP元素的说法错误的是（ D ）。

1.2.3.4. AP元素是一种 HTML 页面元素，用户可以将其定位在页面上的任意位置

一个网页可以有多个AP元素、各个AP元素可以重叠、可以设定是否可见等

对AP元素的基本操作包括：AP元素的插入和嵌套、AP元素的操作和属性设置等

AP Div标签是定义Web页面的内容中的逻辑区域的标签

 6.下面不符合门户网站设计要点的是（ C ）。

1.2.3.4. 要有清晰的导航设计

尽量使用模板进行设计

各个子页面的风格及配色方案必须一致，不能有差异

可以用特殊的颜色标注出要突出显示的内容

 7 下列关于库项目的说法错误的是（ D ）。

1.2.3.4. 库项目可以看成是网页上能够被重复使用的“零件”

利用库项目同样可以实现对文档风格的维护

在不同文档中放入相同的库项目时，可以得到完全一致的效果

不可以将多个文档内容的组合定义成库项目

 8 某用户在用模板做的页面无法插入层，其原因可能是（B ）。

1.2.3.4.层不可能插入用模板做的页面

该用户没有定义可编辑区域

只能先插入表格，再将表格转换成层

该用户没有定义锁定区域

 9要使表格的边框不显示，应设置border的值是（ A ）。

1.2.3.4. 0

1 2 3

网面设计

 10使用Dreamweaver CS5制作页面时，在网页中插入表格，表格的对齐方式不包括（ D ）。

1.2.3.4. 左对齐

居中对齐

右对齐

分散对齐

11 以下不应是餐饮类网站设计风格的是（ C ）。

1.2.3.4. 大方、简洁，操作方便

唯美、优雅

业务包罗万象

庄重、大气，典雅高贵

12 在HTML页面上编写JavaScript代码时，应编写在（ B ）标签中。

1.2.3.4. 和

和

和

和

《网页页面设计教程.doc》

将本文的Word文档下载到电脑，方便编辑。

推荐度：

点击下载文档