网页制作实训指导书Word格式.docx
《网页制作实训指导书Word格式.docx》由会员分享，可在线阅读，更多相关《网页制作实训指导书Word格式.docx（40页珍藏版）》请在冰豆网上搜索。
…………………………………………………………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
一、目的和要求…………………………………………………………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环境中创成立一个站点，治理网页文件、动画和图像文件、视频和音频文件等。
网页文件、动画和图像文件、视频和音频文件别离放在不同的文件夹中。
【实验步骤】
在创建一个新文件夹，命名为“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建好的网站文件夹结构
创建网页文件。
如图1-10所示
图1-10成立好的网站结构
别离将图片素材、音乐素材、视频素材，寄存在imgages、photos、music文件夹中。
1：
以上步骤是网页治理人员在Dreamweaver网站治理进程中经常使用的方式。
注意：
网页文件的后缀是“.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-4所示：
图2-4页网成效
创建页面“”与“”,选择“”页面中的“韶关市正式启动城镇居民医疗保险”文本，单击“经常使用”下的“超级链接”，如图2-5所示:
图2-5创建超链接
单击“超级链接”，如图2-6所示：
图2-6超级链接
步骤6：
预览网页，如图2-7所示：
图2-7与超链接图
超链接，能够利用文本与图像进行与页一张网页进行链接。
超链接必需是两张或两张以上的网页才能相互链接。
实验2-2
网页中文本的属性设置、图像属性设置。
如图2-8所示：
图2-8
网页的文本和图像处置成效是不是得体，关系到整张网页的美观程度。
网页中的文本处置，要紧有文本大小，文本颜色、文本样式、对齐方式文本超链接等。
网页中图像处置，要紧有图像大小、透明度、对齐方式、超链接等。
在“”网页中输入文本内容，并选择文本内容。
在Dreamweaver界面的下方，设置文本属性,如图2-9所示：
图2-9属性设置
在网页“”中插入图片，单击“经常使用”选择图像。
如图2-10所示:
图2-10插入图片
在Dreamweaver设计界面中单击所插入的图片，调整和修改图2-11所示的属性：
图2-11所示
阅读“”。
图像的超链接，可分为整张图片做为超链接锚点，也能够将图像的局部做为超链接锚点。
在“图像属性”中的“地图”，如图2-12所示:
图2-12
实验3表格与表单操作
（1）把握HTML语言的语法基础。
（2）把握HTML语言的标记与属性。
（3）修改HTML语言的标记与属性值。
（4）把握插入表格，修改表格的属性。
（5）把握表单结合表格的利用。
（1）表格的颜色、边框颜色、背景颜色、单元格的颜色、边框粗细、单元格间距、单元格边距等属性设置。
（2）表单结合表格利用，能合理地操纵表单在网页中布局。
常经常使用于用户注册或审请时，所提交的个人信息等等。
实验3-1
在网页中插入表格。
设置表格的属性,如图3-1所示:
升级会员 