网页制作实训指导书.docx

网页制作实训指导书.docx

《网页制作实训指导书.docx》由会员分享，可在线阅读，更多相关《网页制作实训指导书.docx（40页珍藏版）》请在冰豆网上搜索。

网页制作实训指导书

《网页制作》

课程实验指导书

编者：

李志

《网页设计》实验课教学指导书

前言

本课程选择利用Dreamwraver、Flash、Fireworks网页制作软件，采取一体化教学，具有多媒体和专业的网页编辑二合一的独特优势。

《网页设计》是一门理论和实践操作相给合的课程，为了学生更好地把握网页设计的进程方式与进程技术，专门编写了实验课教学指导书，本书共有8个实验项目，17个知识点实验，其中：

Dreamwraver有5个实验项目，11个知识，Flash有1个实验项目,2个知识点实验,Fireworks有有1个实验项目,2个知识点实验。

综合讲述了网页制作中的网页编辑、Web图像制作和网页中动画设计的大体概念和大体操作技术。

同时，慢慢培育学生理论联系实际，认真观看试探，综合分析判定的能力及实际动手能力，才能真正学好本课程。

因此，实验是巩固和进展课堂知识的一个重要环节。

为了配合本课程的教学，配合教师的实践体会，为了高效地利用有限的上机时刻，提高上机效率，保证实验成效，依照以往教学工作体会，特自己编写这门课的实验指导书。

本实验指导书是我校《网页设计》这门课程上机实验指导的要紧依据。

通本书的实验

学习，不仅能够学到网页制作技术，而且能够领会到网页艺术的真理。

………………………………………………1

一、目的和要求…………………………………………………………1

二、预备知识……………………………………………………………1

三、实验内容……………………………………………………………1

…………………………………………………………2

…………………………………………………………5

一、目的和要求…………………………………………………………6

二、预备知识……………………………………………………………6

三、实验内容……………………………………………………………7

…………………………………………………………7

………………………………………………………10

一、目的和要求…………………………………………………………11

二、预备知识……………………………………………………………11

三、实验内容……………………………………………………………11

…………………………………………………………11

…………………………………………………………13

一、目的和要求…………………………………………………………14

二、预备知识……………………………………………………………14

三、实验内容……………………………………………………………14

…………………………………………………………14

…………………………………………………………17

一、目的和要求…………………………………………………………18

二、预备知识……………………………………………………………19

三、实验内容……………………………………………………………19

…………………………………………………………19

…………………………………………………………21

…………………………………………………………22

一、目的和要求…………………………………………………………24

二、预备知识……………………………………………………………24

三、实验内容……………………………………………………………24

…………………………………………………………24

…………………………………………………………25

一、目的和要求…………………………………………………………27

二、预备知识……………………………………………………………27

三、实验内容……………………………………………………………28

…………………………………………………………28

…………………………………………………………28

一、目的和要求…………………………………………………………29

二、预备知识……………………………………………………………29

三、实验内容……………………………………………………………29

…………………………………………………………29

…………………………………………………………31

实验1Dreamweaver大体操作1

一:

目的和要求

（1）把握Dreamweaver的启动方式,熟悉Dreamweaver的开发环境。

（2）把握成立站点的方式。

（3）把握创建站点内容的方式。

二：

预备知识

1：

Dreamweaver的启动及集成环境

双击桌面上启动MacromediaDreamweaver（MX2004）的快捷方式或单击“开始”按钮，选择“程序”,选取“MacromediaDreamweaver（MX2004）”能够创建Dreamweaver网页页面。

Dreamweaver启动后进入如图1-1所示的界面。

图1-1Dreamweaver启动后进入的界面

2：

利用Dreamweaver创建一个网页文件

创建一个Dreamweaver网页文件有三个要紧步骤：

（1）在Dreamweaver界面中新建文档

（2）选择“常规”->“大体页”->“HTML”

（3）将网页文件保留在预先创建的文件夹中

三：

实验内容

实验1-1

【题目】

构建站点的进程。

【分析】

网页的站点计划是搭建出清楚脉络结构的前提，在站点治理中进行的。

【实验步骤】

步骤1：

从菜单当选择“站点/治理站点”命名，点击“新建（N）”按钮，选择“站点（S）”,如图1-2所示:

图1-2“治理站点”对话框

步骤2：

站点名称的概念，站点的名称的作用是标识该站点。

如图1-3所示：

图1-3站点的命名

步骤3：

单击“下一步”,选择“否，我不想利用效劳器技术”单项选择按钮，如图1-4所示：

图1-4站点的概念

步骤4：

单击“下一步”,显现向导的下一个画面，询问如何利用文件。

选择“编辑我的运算机上的本地副本，完成后再上传到效劳器（推荐）”

单项选择按钮。

如图1-5所示：

图1-5指定站点的位置

步骤5：

单击“下一步”,询问用户是不是此刻指定站点上传效劳器。

如图1-6所示：

图1-6是不是配置上传效劳器

步骤6：

单击“下一步”,完成站点的设置。

如图1-7所示：

图1-7站点信息

实验1-2

【题目】

创建站点的内容。

在Dreamweaver环境中创成立一个站点，治理网页文件、动画和图像文件、视频和音频文件等。

【分析】

网页文件、动画和图像文件、视频和音频文件别离放在不同的文件夹中。

【实验步骤】

步骤1：

在创建一个新文件夹，命名为“MySite”

1）:

“MySite”文件夹中，别离成立四个文件夹，别离命名为：

imgages、

photos、music、style

2）：

说明：

如表1-1所示

文件夹名

说明

imgages

存放装饰性图片素材

photos

存放内容图片素材

music

存放音乐、视频素材

style

备用

表1-1

步骤2：

在文件面板中的“站点”项上单击鼠标右键。

如图1-8所示：

图1-8新建站点首页

步骤3：

选择“新建文件夹”,依次成立四个文件夹，imgages、photos、music、style，如图1-9所示：

图1-9建好的网站文件夹结构

步骤4：

创建网页文件。

如图1-10所示

图1-10成立好的网站结构

步骤5：

别离将图片素材、音乐素材、视频素材，寄存在imgages、photos、music文件夹中。

说明：

1：

以上步骤是网页治理人员在Dreamweaver网站治理进程中经常使用的方式。

2：

注意：

网页文件的后缀是“.Html”或“.Htm”文件名

3：

网页文件的源代码在“记事本”编辑器中编写，但要注意保留为后缀“.Html”或“.Htm”的网页文件

4：

在网页设计进程中，常经常使用“”或“”文件为首页。

实验2Dreamweaver大体操作2

一:

目的和要求

（1）把握Dreamwerver网页设计的三种设计窗口切换方式。

（2）把握网页的页面属性设置方式。

（3）把握网页的文本属性设置方式。

（4）把握网页的图像插入方式。

（5）把握网页的超链接设置方式。

二：

预备知识

（1）把握Dreamwerver网页设计的三种设计窗口切换方式。

即：

设计窗口、代码窗口、拆分窗口。

（2）网页页面的属性设置：

网页的长度、高度、背景颜色等等。

（3）图像的属性设置：

图像的像素、长度、高度、对照度、超链接等等。

（4）文本的属性设置：

文本的颜色、大小、字体、样式超链接等等。

三:

实验内容

实验2-1

【题目】

网页页的属性设置。

【分析】

针对网页的外观、链接、题目等属性进行设置。

【实验步骤】

步骤1：

“修改”菜单，选择“页面属性”（或在“属性”状态栏中单击“页面属性按钮”），如图2-1所示：

图2-1页面属性—外观

步骤2：

利用页面属性-外观，制作一张名为“”,如图2-2所示：

图2-2成效图

步骤3：

页面属性-链接设置：

如图2-3所示

图2-3网面属性--链接

步骤3：

创建名为“”。

如图2-4所示：

图2-4页网成效

步骤4：

创建页面“”与“”,选择“”页面中的“韶关市正式启动城镇居民医疗保险”文本，单击“经常使用”下的“超级链接”，如图2-5所示:

图2-5创建超链接

步骤5：

单击“超级链接”，如图2-6所示：

图2-6超级链接

步骤6：

预览网页，如图2-7所示：

图2-7与超链接图

说明：

超链接，能够利用文本与图像进行与页一张网页进行链接。

超链接必需是两张或两张以上的网页才能相互链接。

实验2-2

【题目】

网页中文本的属性设置、图像属性设置。

如图2-8所示：

图2-8

【分析】

网页的文本和图像处置成效是不是得体，关系到整张网页的美观程度。

网页中的文本处置，要紧有文本大小，文本颜色、文本样式、对齐方式文本超链接等。

网页中图像处置，要紧有图像大小、透明度、对齐方式、超链接等。

【实验步骤】

步骤1：

在“”网页中输入文本内容，并选择文本内容。

步骤2：

在Dreamweaver界面的下方，设置文本属性,如图2-9所示：

图2-9属性设置

步骤3：

在网页“”中插入图片，单击“经常使用”选择图像。

如图2-10所示:

图2-10插入图片

步骤4：

在Dreamweaver设计界面中单击所插入的图片，调整和修改图2-11所示的属性：

图2-11所示

步骤5：

阅读“”。

说明：

图像的超链接，可分为整张图片做为超链接锚点，也能够将图像的局部做为超链接锚点。

在“图像属性”中的“地图”，如图2-12所示:

图2-12

实验3表格与表单操作

一:

目的和要求

（1）把握HTML语言的语法基础。

（2）把握HTML语言的标记与属性。

（3）修改HTML语言的标记与属性值。

（4）把握插入表格，修改表格的属性。

（5）把握表单结合表格的利用。

二：

预备知识

（1）表格的颜色、边框颜色、背景颜色、单元格的颜色、边框粗细、单元格间距、单元格边距等属性设置。

（2）表单结合表格利用，能合理地操纵表单在网页中布局。

常经常使用于用户注册或审请时，所提交的个人信息等等。

三:

实验内容

实验3-1

【题目】

在网页中插入表格。

设置表格的属性,如图3-1所示: