网页设计教程

1、网页设计教程 一、网页制作的基本概念 网页：是使用者能从浏览器中看到的每一个页面，也是组成整个全球信息网的基本组件。每一个页面都是一个文件。制作网页时，通常是以特定的主题，集合许多网页形成一个有组织的结构，这样的集合称为网站。一台计算机主机可同时存在多个这样的网站，每个网站都会存放在一个特定的地址，浏览者可依据这个地址找到想要浏览的网站。 在建立网站前，先要编辑网页，在将网页按一定的组织结构链接，从而形成网站。选择网页制作语言和网页制作工具是网页设计的首要问题。 网络是由两部分组成，一是多媒体技术应用在网络上的应用，网页设计上的应用，二是在网络的组织和管理。二、常用的网页制作软件1.网页编辑软

2、件 要制作网站首先要掌握网页编辑软件，常用的网页编辑软件有所见即所得的可视环境下的编辑软件：FrontPage：是Microsoft公司推出的办公软件之一是目前比 较流行的网页制作工具，与Office的其他软件具有高度的兼容性，它的操作规范、简洁，但网页制作的功能不如Dreamweaver强大。 Dreamweaver：由Macromedia公司推出大众化网页制作软件，具有可视化编辑界面，它排版能力较强，功能齐全操作灵活，专业性强，是大众化和专业设计人员都可使用的网页编辑软件。， 由于网页的页面中拥有多种类型的元素，如：文字、音频、视频、图像、动画等，因此要想制作出美观、生动的网页，仅靠一种软

3、件难以实现，必须结合多种软件才能实现。通常使用的软件有网页编辑软件、图形图像处理软件、动画制作软件等。简单的文档编辑工具：主要应用于HTML（称为超文本标记语言），一般是专业人员在编制网页中需要一些特殊的动态的显示效果时所使用的编辑语言，它可以用纯文本的编辑器编辑，如记事本应用程序软件等。其他工具：三、 DreamWeaver 8 工作界面属性面板其他浮动面板文档窗口标签选项栏插入工具栏菜单栏标题栏菜单栏：共有10个菜单插入工具栏: 是制作网页常用的一个栏目，在下拉式菜单中添加了“收藏夹”，可将经常使用的对象放在上面。标签选项栏文档口：包含了代码视图与设计视图的切换、查看文档及站点间传送文档的

4、相关命令与选项，其中最常用的是视图间的切换和文档的查看文档窗口：即编辑区，在此区域编辑网页内容属性面板：用于显示当前选定的网页元素的属性，并可在“属性”面板上进行修改。状态栏：显示当前正在编辑的文档的相关信息，制作者可以根据左侧的标签选择器非常容易的选取网页中的元素浮动面板组：四、用DreamWeaver8 制作网页的一般步骤1. 建立本地站点2. 收集网页制作的各种素材（文字、图像，动画，声音，影视等）3. 在相应网页中插入对象4. 改变对象的属性5. 输入文字6. 保存网页7. 定义远程站点8. 上传五、站点管理 站点是一系列文档按照某种结构，通过各种链接关联在一起，并存放用户在Inter

5、net上进行浏览的各种信息的物理位置。远程站点：存储在Internet服务器上的网页站点。 本地站点：建立在本地计算机硬盘上的站点 。 1. 设计与规划站点步骤：明确网站的功能，能够提供的服务和信息，构思网页的基本内容。根据网页内容规划站点结构。如：包含多少网页，各网页之间的关系，网页中用到的各种素材如何存放（公用素材库或分类素材库）。准备素材，并存放至相应素材库中。 2.创建本地站点 利用站点管理器可以创建和管理本地站点。3.管理本地站点六、收集网页素材 网页素材是指构成网页的各种元素，其中包括文字、图像、动画、声音、影视等各种媒体。在制作网页之前，必须收集制作网页的素材。一般收集的方法有：

6、自己制作和网上下载。对收集的素材可以保存在计算机的磁盘或光盘中，但值得注意的是，并非所有的素材都会插入到网页中，对要插入到网页中的素材，必须存放到该网页所在的站点里。 在站点中创建简单的网页一、在网页中添加文字1.文字输入2.设置文字格式l 首先选择要格式的文字。l在属性浮动面板中分别设定字体、大小、颜色、字形、对齐等。二、在网页中插入图像1. 将图片文件存入站点文件夹2. 插入图片 l选择插入图片的位置。 l选择插入面板中的图象命令。 l在网站文件夹中选择要插入的图片文件。 l单击确定按钮。3.设置图片的属性 三、项目列表1.创建项目列表或编号列表l将光标放置在文字行。l选择文本菜单的列表命

7、令。l选择项目列表方式或编号列表方式。2.设置列表属性 利用文本菜单中列表命令中的属性命 令设置列表属性。四、插入其他对象1.插入日期利用插入面板中的日期命令。2.插入鼠标经过图像。（翻转图像）l选择插入面板中的图象命令中的鼠标 经过图像。l在对话框中选择原始图像。l再选择鼠标经过图像。l设定其他参数。五、设置页面属性利用修改菜单的页面属性命令。1.改变页面标题2.定义页面背景图像3.定义页面颜色4.设置文本颜色5.定义页面边距六、保存页面 网页应保存为超文本形式，其扩展名为.htm。文件要保存在站点内，站点主页的文件名为index.htm。六、预览 按F12键。第四讲 页面布局规划一、创建表

8、格 选择插入面板中的常用或布局选项卡，单击其中的表格按钮，出现对话框 ，确定行数和列数等选项后，按确定按纽引入表格。 l 选择表格元素。 选择整个表格 选择行或列 选择单个单元格 选择不相邻的单元格l 设置表格的属性 宽度、高度和边框 表格的对齐方式 填充和间距 背景颜色、边框颜色和背景图案l 设置表格单元格的属性 合并单元格或拆分单元格 单元格的对齐方式 标题和不换行 背景和背景颜色l 设置预置表格类型二在布局中使用布局表格和单元格l绘制布局表格和单元格l在布局单元格中添加内容第五讲：链接和导航一、基本概念 超级链接是从源端点到目标端点的一种链接，也可称为锚。其中源端点是超级链接的起始端点，

9、称为源锚；目标端点是超级链接的链接对象，称为目标源。1.外部链接 目标端点是本站点之外的站点或文档。2.内部链接 目标端点是本站点中的其他文档。3.电子邮件链接 启动电子邮件程序，其中收信者地址已经在创建此超级链接时指定，框内已经填好的地址就是链接的地址。4.局部链接（锚点链接） 目标端点是文档中的命名锚。5.空链接或脚本链接6.热区链接二、设置链接颜色 利用页面属性对话框设定链接的颜色。（修改中页面属性）1.未访问链接的文本颜色 利用框中的链接设定。2.已访问链接的文本颜色利用框中的已访问链接设定。3.正在访问链接的文本颜色利用框中的活动链接设定。第五讲：使用表单 表单可以实现访问者同Int

10、ernet服务器之间的交互，它对数据的收集和显示都是一种必要的组织方式。一个完整的表单应包含两个组件：在网页中进行描述的表单对象；服务器的应用程序（用于对收集的信息进行保存和处理）。1.表单的域 用于定义表单的开始和结束。表单域属于不可见元素，若希望在文档窗口中见到表单域，可在插入面板的表单选项卡中选择表单命令。2.表单对象 也称表单控件，是表单用以在网页中描述对象的工具。表单对象必须插入表单域中，否则这些对象在浏览器中将无法正常工作。表单对象包括文本框、按钮、复选框、单选钮、弹出菜单、列表、文件域、图像域、隐藏域和跳转菜单。二、创建表单1.创建表单域2.定义表单属性表单名称:用于定义表单名字

11、。动作：用于指定处理表单信息服务端的公共网关接口程序。在此实际是指定一个URL地址或mailto地址。方法：指定一个表单数据发送的方法。三、添加和设置表单对象1.文本域2.文本区域3.单选按钮4.复选按钮5.列表框6.文件域7.按钮8.隐藏域9.跳转菜单第七讲： 层和时间轴一层 在网页中层好比是网页中的容器，不同对象可以放置于不同的层中。每个层可以输入文字，插入图像、动画、表单、各种插件等页面元素，各层还可以相互层叠。利用层可以做出各种移动效果和重叠效果。1.创建层2.调整层的大小3.移动层4.在层中插入对象5.多层操作6.层的嵌套7.设置层的属性8.层的显示和隐藏9.层和表格的转换二时间轴

12、利用时间轴面板将层中的内容制作成一些移动动画。1.创建时间轴直线动画2.创建弧线动画3.创建自由路线动画4.添加、删除时间线第八讲：行为一、行为概述 行为是用来实现网页交互的一种途径，通过行为可以使网页感知外界信息，并对这些信息做出响应。一般来说，行为是通过响应某一具体事件而采取的动作，它由动作和事件组成。当我们把一个事件和一个动作组合成一个行为，并把这个行为赋予一个页面元素，从而使该元素发生行为中的事件后，就会执行相应行为中动作。1.事件 所谓事件是指触发动作的条件，可以是鼠标事件或键盘事件等。通常由浏览器来定义，它可以被附加到各种页面元素上或HTML标记中。也就是说，事件内容由要附加行为的对象和浏览器的类型所决定。2.动作 发生事件后的响应。它是由JavaScript代码来编写的。Dreamweaver提供了许多内置的行为动作，以方便用户直接使用，而无需编写代码。二、行为操作1.行为面板 行为面板是对象添加行为的主要界面，可以利用窗口菜单的行为命令进行调用。由于不同元素