网页制作实训指导书.docx

1、网页制作实训指导书网页制作课程实验指导书编者：李 志网页设计实验课教学指导书前言本课程选择利用Dreamwraver、Flash、Fireworks网页制作软件，采取一体化教学，具有多媒体和专业的网页编辑二合一的独特优势。网页设计是一门理论和实践操作相给合的课程，为了学生更好地把握网页设计的进程方式与进程技术，专门编写了实验课教学指导书，本书共有8个实验项目，17个知识点实验，其中：Dreamwraver有5个实验项目，11个知识，Flash有1个实验项目,2个知识点实验,Fireworks有有1个实验项目,2个知识点实验。综合讲述了网页制作中的网页编辑、Web图像制作和网页中动画设计的大体概

2、念和大体操作技术。同时，慢慢培育学生理论联系实际，认真观看试探，综合分析判定的能力及实际动手能力，才能真正学好本课程。因此，实验是巩固和进展课堂知识的一个重要环节。为了配合本课程的教学，配合教师的实践体会，为了高效地利用有限的上机时刻，提高上机效率，保证实验成效，依照以往教学工作体会，特自己编写这门课的实验指导书。本实验指导书是我校网页设计这门课程上机实验指导的要紧依据。通本书的实验学习，不仅能够学到网页制作技术，而且能够领会到网页艺术的真理。 1一、目的和要求1二、预备知识1三、实验内容1 2 5一、目的和要求6二、预备知识6三、实验内容7 7 10一、目的和要求11二、预备知识11三、实验

3、内容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实验1 Dreamweaver大体操作1一:目的和要求 （1）把握Dreamweaver的启动方式,熟悉Dreamweaver的开发环境。（2）把握成立站点的方式。（3）把握创建站点内容的方式。二：预备知识 1：Dreamweaver的启动及集成环境 双击桌面上启

4、动Macromedia Dreamweaver （MX2004）的快捷方式或单击“开始”按钮，选择“程序”,选取“Macromedia Dreamweaver （MX2004）”能够创建Dreamweaver网页页面。Dreamweaver启动后进入如图1-1所示的界面。图1-1 Dreamweaver启动后进入的界面 2：利用Dreamweaver创建一个网页文件 创建一个Dreamweaver网页文件有三个要紧步骤： （1）在Dreamweaver界面中新建文档 （2）选择“常规”-“大体页”-“HTML” （3）将网页文件保留在预先创建的文件夹中三：实验内容实验1-1 【 题目 】 构建

5、站点的进程。 【 分析 】 网页的站点计划是搭建出清楚脉络结构的前提，在站点治理中进行的。 【 实验步骤 】 步骤1：从菜单当选择“站点/治理站点”命名，点击“新建（N）”按钮，选择“站点（S）”,如图1-2所示: 图1-2“治理站点”对话框 步骤2：站点名称的概念，站点的名称的作用是标识该站点。如图1-3所示：图1-3站点的命名 步骤3：单击“下一步”,选择“否，我不想利用效劳器技术”单项选择按钮，如图1-4所示：图1-4站点的概念步骤4：单击“下一步”,显现向导的下一个画面，询问如何利用文件。选择“编辑我的运算机上的本地副本，完成后再上传到效劳器（推荐）”单项选择按钮。如图1-5所示：图1

6、-5 指定站点的位置步骤5：单击“下一步”,询问用户是不是此刻指定站点上传效劳器。如图1-6所示：图1-6 是不是配置上传效劳器 步骤6：单击“下一步”,完成站点的设置。如图1-7所示：图1-7 站点信息实验1-2 【 题目 】 创建站点的内容。在Dreamweaver环境中创成立一个站点，治理网页文件、动画和图像文件、视频和音频文件等。 【 分析 】 网页文件、动画和图像文件、视频和音频文件别离放在不同的文件夹中。 【 实验步骤 】 步骤1：在创建一个新文件夹，命名为“MySite” 1）: “MySite”文件夹中，别离成立四个文件夹，别离命名为：imgages、 photos、music

7、、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：以上步骤是网页治理人员在Dr

8、eamweaver网站治理进程中经常使用的方式。 2：注意：网页文件的后缀是“.Html”或“.Htm”文件名 3：网页文件的源代码在“记事本”编辑器中编写，但要注意保留为后缀“.Html”或“.Htm”的网页文件 4：在网页设计进程中，常经常使用“”或“”文件为首页。实验2 Dreamweaver大体操作2一:目的和要求 （1）把握Dreamwerver网页设计的三种设计窗口切换方式。（2）把握网页的页面属性设置方式。（3）把握网页的文本属性设置方式。（4）把握网页的图像插入方式。（5）把握网页的超链接设置方式。二：预备知识 （1）把握Dreamwerver网页设计的三种设计窗口切换方式。即

9、：设计窗口、代码窗口、拆分窗口。（2）网页页面的属性设置：网页的长度、高度、背景颜色等等。（3）图像的属性设置：图像的像素、长度、高度、对照度、超链接等等。（4）文本的属性设置：文本的颜色、大小、字体、样式超链接等等。三:实验内容实验2-1 【 题目 】 网页页的属性设置。 【 分析 】 针对网页的外观、链接、题目等属性进行设置。 【 实验步骤 】 步骤1：“修改”菜单，选择“页面属性”（或在“属性”状态栏中单击“页面属性按钮” ），如图2-1所示：图2-1 页面属性外观步骤2：利用页面属性-外观，制作一张名为“”,如图2-2所示：图2-2 成效图步骤3：页面属性-链接设置：如图2-3所示图2

10、-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 【 分析 】 网页的文本和图像处置成效是不是得体，关系到整

11、张网页的美观程度。网页中的文本处置，要紧有文本大小，文本颜色、文本样式、对齐方式文本超链接等。网页中图像处置，要紧有图像大小、透明度、对齐方式、超链接等。 【 实验步骤 】 步骤1：在“”网页中输入文本内容，并选择文本内容。步骤2：在Dreamweaver界面的下方，设置文本属性,如图2-9所示：图2-9 属性设置步骤3：在网页“”中插入图片，单击“经常使用”选择图像。如图2-10所示:图 2-10 插入图片步骤4：在 Dreamweaver设计界面中单击所插入的图片，调整和修改图2-11所示的属性：图2-11 所示步骤5：阅读“” 。说明：图像的超链接，可分为整张图片做为超链接锚点，也能够将

12、图像的局部做为超链接锚点。在“图像属性”中的“地图” ，如图2-12所示:图 2-12实验3 表格与表单操作一:目的和要求 （1）把握HTML语言的语法基础。（2）把握HTML语言的标记与属性。（3）修改HTML语言的标记与属性值。（4）把握插入表格，修改表格的属性。（5）把握表单结合表格的利用。二：预备知识（1）表格的颜色、边框颜色、背景颜色、单元格的颜色、边框粗细、单元格间距、单元格边距等属性设置。（2）表单结合表格利用，能合理地操纵表单在网页中布局。常经常使用于用户注册或审请时，所提交的个人信息等等。三:实验内容实验3-1 【 题目 】 在网页中插入表格。设置表格的属性,如图3-1所示: