Dreamweaver网页制作实验指导书doc.docx
《Dreamweaver网页制作实验指导书doc.docx》由会员分享，可在线阅读，更多相关《Dreamweaver网页制作实验指导书doc.docx（17页珍藏版）》请在冰点文库上搜索。
Dreamweaver网页制作实验指导书doc
《Dreamweaver网页制作》
实验指导书
主编教师：
张庆芳
实验一 全面了解网页
【实验目的】
1．掌握利用因特网进行信息游览、搜索，下载网页、图片、文字和文件；
2．对给定的网站，能指出网站的链接结构、目录结构、页面布局方式。
【实验环境】
Windowxp操作系统，机器联网。
【实验重点及难点】
熟练使用浏览器进行浏览、搜索、下载。
【实验内容】
1、根据网站制作的需要，从网上下载网页制作时需要的文字、小图片、动画及flash。
2、上网访问实际若干网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）、页面布局方式；在网上找出下列版面布局的结构形式：
⑴“T”结构布局
⑵“口”型（“国”字型）布局
⑶“三”型布局
⑷对称对比布局
⑸POP布局
⑹拐角型布局
⑺标题正文型
⑻封面型（主题图片型）
3、利用搜索引擎，浏览因特网上较为著名的5个网站，记录这些网站的名称、网站地址和以及相应的网页文件格式（扩展名）；
上交的作业：
创建站点，在站点中创建文件夹images用来专门存放图片，创建网站首页命名为index.html，将整个站点压缩后以姓名命名上传。
实验二DreamweaverCS3的基础知识（站点）
【实验目的】
学会创建与管理站点
【实验环境】
Windows系统专业版
【实验重点及难点】
掌握创建与管理站点的方法步骤。
【实验内容】
1、创建与管理站点，制作3个连接页面，学会使用站点地图
2、用HTML制作第一个网页。
制作一个简单的网页sy2-1.htm，内容为个人简介信息。
要求：
●搜索关键字为“个人”“主页”“简介”，标题为我的个人简介。
●背景为#33ccff,文本颜色为黑色，文本需分段表示。
实验三使用表格布局页面
【实验目的】
1．学会在Dreamweaver插入表格，设置表格属性；
2．掌握分别使用表格和布局视图，进行页面布局；
3．掌握在网页中使用层，设置透明FLASH。
【实验环境】
Windows系统专业版，Dreamweavercs3。
【实验重点及难点】
掌握在Dreamweaver中插入表格，进行页面布局，使用层和设置flash。
【实验内容】
1、使用Dreamweaver建立如下网页（歌曲自选，至少选择3首歌曲）。
2、练习在Dreamweaver中用布局视图表格画出如下页面的结构图，主要考虑用表格如何将文字和图片布局成如下效果。
实验四使用图像美化网页
【实验目的】
1．图像格式的获取
2．在网页中插入图像
3．设置图像属性
4．插入鼠标经过图像
5．插入导航条
6．创建网站相册
【实验环境】
Windows系统专业版
【实验重点及难点】
在网页中插入图像，并设置图像的相关属性，重点掌握如何制作鼠标经过图像、在网页中插入导航条的方法，学会利用dreamweaver的菜单命令创建网站相册。
【实验内容】
实验内容：
1、新建一个空白文档，导入素材文件（实验五\shui），文档中插入表格，在表格中插入相应的图形并创建一个导航条，最终效果如图
2、新建一个空白文档，导入素材文件（实验五\shui）创建如下图所示的网页文档。
实验五在网页中添加文本
【实验目的】
1．掌握在Dreamweaver中输入文字并设置文字属性；
2．掌握在Dreamweaver中插入水平线及特殊字符
2．掌握有序列表，无序列表的设置方法；
4．为文本添加超级链接。
【实验环境】
Windows系统，Dreamweavercs3。
【实验重点及难点】
重点：
文字属性的设置、特殊字符的插入、超级链接的设置
难点：
有序列表和无序列表的创建、超级链接的设置
【实验内容】
1、打开tdk.html网页文档（实验六\tdk\tdk.html），在网页中添加文本，设置文本属性，并在网页文档中添加版权符号，效果如下图。
2、打开上例中的效果文档，在文档中添加锚链接，并设置其超链接于网页文档的顶部。
实验六CSS样式的应用
【实验目的】
1．了解css样式的分类
2．掌握使用CSS标记，设置文字样式。
【实验环境】
Windows系统专业版
【实验重点及难点】
练习CSS的三种使用方式。
●外部样式表的使用
●内部样式表的使用
●内嵌样式的使用
【实验内容】
1、在实验六文件夹中有一个简单的网页文件1.html，要求给该网页添加自定义css样式，css样式要求为：
字体为“幼圆”，字号为36，字体颜色为红色，并且使得网页中正文的第二段文字应用该样式。
2、在文件夹中有一个简单的网页文件2.html，要求给该网页添加
标签css样式，css样式要求为：
字体为“幼圆”，字号为24，字体颜色为红色。
修改后保存覆盖原有文件。
3、阐述改变网页中超链接文本样式的几种的方式。
实验七模版
【实验目的】
1．掌握创建一个简单的网站主页；
2．掌握模版的创建和使用；
【实验环境】
Windows系统专业版，DreamweaverCS3。
【实验重点及难点】
掌握模版在网站中的应用。
【实验内容】
1、自己创意构建一个网站主页。
要求应包括：
网站的标志、导航条、主题栏目、友情链接、跑马灯技术等。
2、将第1题制作的网站另存为模版，使用此模版制作第二个页面，要求只修改文字内容不修改布局和图片。
实验八使用APDiv布局网页
【实验目的】
掌握层与时间轴的使用
【实验环境】
Windows系统专业版。
【实验重点及难点】
掌握层与时间轴的使用。
【实验内容】
1、制作一个浮动广告。
利用时间轴。
实验九使用框架布局网页
【实验目的】
1．掌握建立框架；
【实验环境】
Windows系统专业版，DreamweaverCS3。
【实验重点及难点】
掌握Dreamweaver中框架的使用。
【实验内容】
1、熟悉框架页面的制作。
实验十表单使用
【实验目的】
1．掌握在Dreamweaver中建立表单。
2．使用模板建立网站。
【实验环境】
Windows系统专业版，DreamweaverCS3。
【实验重点及难点】
掌握在Dreamweaver中建立表单，以及模板的使用。
【实验内容】
1、建立如下表单页面：
实验十一使用动态行为
【实验目的】
1．了解动态行为的概念
2．了解并掌握Dreamweavercs3自带的动态行为
3．掌握动态行为的创建、编辑方法。
【实验环境】
Windows系统专业版，DreamweaverCS3。
【实验重点及难点】
动态行为的创建、编辑方法
【实验内容】
图像交换行为的应用。
打开素材（实验十一\图像交互\txll.html），利用行为面板中的图像交换行为，设置网页，当鼠标经过小图像时，大图像位置出现其相应的大图像，鼠标移开该大图像不变，直到鼠标经过其他小图像。
实验十二网站的后期处理
【实验目的】
1．了解发布网站前的准备工作
2．掌握网站上传和维护所学要的软件
【实验环境】
Windows系统专业版，DreamweaverCS3。
【实验重点及难点】
掌握网站上传和维护的方法
【实验内容】
打开浏览器，打开“中国网格”网页中注册一个域名并申请一个空间，将自己制作的网站上传到空间中。
实验十三滤镜的使用
（一）
【实验目的】
1．熟悉Fireworks的工作界面；
2．掌握选择、位图和矢量工具箱的使用；
3．掌握组合路径的用法。
【实验环境】
Windows系统专业版，FireworksCS3。
【实验重点及难点】
掌握Fireworks中选择、位图和矢量工具箱的使用。
【实验内容】
1、利用工具箱绘制如下图形。
2、使用选取框工具制作羽化效果图。
3.自己创意制作一个导入页面，自己从网上下载素材，要求画面页色搭配和谐。
实验十四Fireworks的使用
（二）
【实验目的】
1、熟悉Fireworks的工作界面；
2、掌握选择、位图和矢量工具箱的使用；
3、掌握组合路径的用法。
【实验环境】
Windows系统专业版，FirworksCS3。
【实验重点及难点】
掌握Fireworks中选择、位图和矢量工具箱的使用。
【实验内容】
1、绘制如下图形。
2、绘制如下图形。
实验十五Fireworks的使用（三）
【实验目的】
1．掌握Fireworks滤镜效果；
2．掌握Fireworks蒙版；
3．掌握蒙版和切片工具结合使用。
【实验环境】
Windows系统专业版，FirworksCS3。
【实验重点及难点】
掌握Fireworks中滤镜、蒙版效果的使用。
【实验内容】
1、自己导入一副图片，练习“命令－创意”和“滤镜”中各种效果。
2、制作如下蒙版效果。
3、在Fireworks中接合蒙版和切片制作书本204页的“信息教育技术中心”横幅。
将制作好的横幅导入到Dreamweaver中进行编辑，最终制作如下网页。
要求：
鼠标移上文字颜色发生变化并出现下拉菜单。
将网页布局如下图所示。
实验十六Fireworks的使用（四）
【实验目的】
1．掌握Fireworks中绘制网页布局；
2．掌握Fireworks和Dreamweaver整合制作网页。
【实验环境】
Windows系统专业版，FirworksCS3。
【实验重点及难点】
掌握Fireworks和Dreamweaver整合制作网页。
【实验内容】
1、制作书本184页的班级主页。
2、自己创意在Fireworks中绘制网页并导出，使用Dreamweaver打开编辑并添加内容。
参考下图范例。
升级会员 