《网页设计与制作基础》实验指导书.doc

实验一 网页的认识
实验目的
1、 掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；
2、 利用记事本来编辑HTML文档并浏览。
3、 熟悉HTML基本标记的使用。
实验环境
WindowsXP操作系统，内部组成局域网，外连Internet互联网。
实验重点及难点
u 熟悉HTML的结构、语法。
u 熟悉HTML基本标记的使用。
实验内容
1、 从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。
2、 收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。
3、 通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设为主页。
4、 制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”，内容为司空曙的《江村即事》，如下图所示。

5、 通过附录1的练习熟悉HTML基本标记的使用。（可参考第二章内容）
实验二 Dreamweaver基本操作（一）
实验目的
1、 熟悉Dreamweaver的工作环境并了解本地站点的建设和管理；
2、 熟悉网页文件的基本操作；
3、 熟练掌握在网页文件中文本、图像、超链接的添加和设置。
实验环境
WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。
实验重点及难点
u 文字的插入及设置。
u 图像的插入及设置。
u 各种超链接的创建。
实验内容
1、 使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几个文件和文件夹：图片文件夹（images）；音乐文件夹（sound）等。
2、 在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件，从提供的网页原始素材中把相关文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。

3、 在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为sy2-2.html，效果如图所示。
l 标题文字大小用<h1></h1>标记；
l 作者信息文字大小为24像素，字体为幼圆，颜色为红色；
l 古诗文字大小为24像素，字体为隶书，颜色为蓝色；
l 在作者信息后加一条水平线，居中，水平线宽度为浏览器的30%，水平线的粗细为20个像素，颜色为棕色；

4、 在站点“Dreamweaver基本操作”中对网页sy2-2.html按如下要求进行编辑并另存为sy2-3.html，效果如图所示。
l 插入背景图片：Welcome-Popup-Background.gif
l 在古诗左下方插入作者的照片：司空曙.jpg

5、 在站点“Dreamweaver基本操作”中从提供的网页原始素材中把相关文字复制到网页文件sy2-3.html中按要求进行编辑并另存为sy2-4.html，效果如图所示。
l 改“目录”下的列表符号类型为方框。
l 给“【注释】”下的条目加数字编号
l 以标题为热点创建空超链接
l 以图片为热点创建空超链接
l 以“大历十才子”为热点创建空超链接

6、 在站点“Dreamweaver基本操作”中新建一个名为sy3-1.html的网页文件，以作实验三制作留言簿备用。
7、 在站点“Dreamweaver基本操作”中对网页sy2-4.html按要求进行编辑并另存为sy2-5.html，如下图所示。
l 以标题和图片为热点的超链接均指向
l 为“目录”下的各条目创建书签，书签名为相应条目的拼音首字母。
l 在文档最后增加一行“如有诉求，请留言或邮件联系！谢谢！”的文字。
l 以“留言”为热点创建指向sy3-1.html的超链接。（使用相对路径，在新窗口中打开）。
l 以“邮件联系”为热点创建指向ggyx@的超链接。

实验三 Dreamweaver基本操作（二）
实验目的
1、 熟练掌握在网页文件中多媒体对象的添加和设置。
2、 熟练掌握在网页文件中表格的添加和设置。
3、 熟练掌握在网页文件中表单的添加和设置。
实验环境
WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。
实验重点及难点
u 多媒体对象的添加和设置。
u 表单及表单对象的添加及设置。
u 利用表格来归整表单。
实验内容
1、 为站点“Dreamweaver基本操作”中的网页文件sy2-5.html添加背景音乐：江村即事.mp3，要求循环播放，结果另存为sy3-2.html。
2、 在站点“Dreamweaver基本操作”中新建一个名为sy3-3.html的网页文件，在该网页文件中建立一个如图所示的表格，并在表格下方添加文字“让我们回到快乐的童年时光吧！”并嵌入音频文件“捉泥鳅”和插入Flash动画“拔萝卜”。

3、 打开站点“Dreamweaver基本操作”中的网页文件sy3-1.html，制作一个留言簿表单，效果如下图所示。

4、 在站点“Dreamweaver基本操作”中新建一个名为sy3-4.html的网页文件，在该网页文件中用表格来布局sy3-1.html网页文件中的留言簿，效果如下图所示。

实验四 CSS样式表
实验目的
1、 了解CSS 的基本知识；
2、 熟悉“CSS样式”面板；
3、 掌握样式表的创建和应用。
实验环境
WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。
实验重点及难点
u 选择器的使用。
u 利用样式表对页面进行美化。
u 样式应用的优先级
实验内容
1、 创建本地站点“CSS样式表”，在该站点下有若干网页文件：人生最美是淡然.html和淡然.html。将网页文件淡然.html另存为sy4_1.html，将网页文件人生最美是淡然.html另存为sy4_2.html。
2、 对网页文件sy4_1.html的标题“淡然”做如下设置：字体为“华文行楷”，大小为50像素，颜色为#666666，并对该标题采用Glow滤镜进行特效处理：光晕颜色为蓝色，方向为45度。
3、 在网页文件sy4_1.html中建立内部样式.ziti：字体为“仿宋_GB2312”，大小为24像素，颜色设置为#666699，粗体。将该样式应用于sy4_1.html中表格上方的正文内容（不包括表格本身）。
4、 在网页文件sy4_1.html中建立内部样式.bg：字体为“隶书”，大小为24像素，颜色设置为#993366，粗体，背景颜色为#CCCCCC，表格的上边框是颜色为#003399的双线，表格的下边框是颜色为#669999的实线，表格的左边框是颜色为#FF6666的虚线，表格的右边框是颜色为#999999的点划线，表格所有框线的宽度均为8像素。将该样式应用于sy4_1.html中的表格部分。
5、 在网页文件sy4_1.html中更改超链接的样式，其中a:link定义为：字体：幼圆，颜色：#669999，修饰：无（无下划线）；a:visited，字体：华文行楷，颜色：#660033，修饰：无；a:hover：字体：幼圆，颜色：#FF0000，修饰：下划线；a:active：字体：华文新魏，样式：倾斜，颜色：#0000CC，修饰：删除线。
6、 建立外部样式表wenzi.css：字体为“楷体_GB2312”，大小为18像素，颜色设置为#996600，粗体。将该样式应用于sy4_1.html中表格下方的正文内容（不包括表格本身）。
7、 在网页文件sy4_1.html中为“淡然的释义”部分加上方块列表符号，并给这部分内容设置为字体颜色为#993333，背景颜色为#999999。
8、 使用内嵌样式使得第二段文字“淡然，常用义为淡泊……失意坦然”。”实现首行缩进两个字符。
9、 将外部样式表wenzi.css应用于网页文件sy4_2.html的正文部分。对标题“人生最美是淡然”做如下设置：字体为“华文行楷”，大小为50像素，颜色为#CC3366，并对该标题采用Shadow滤镜进行特效处理：光晕颜色为蓝色，方向为45度。
实验五 Dreamweaver网页布局（一）
实验目的
1、 熟悉布局表格的绘制和设置，掌握利用布局表格来规划网页的技能；
2、 熟悉框架集和框架的创建和编辑，掌握用框架来设计网页的技能；
实验环境
WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。
实验重点及难点
u 利用布局表格来规划网页的设计。
u 利用框架来来设计网页。
u 利用表格、框架这两种布局工具来共同布局网页。
实验内容
1、 建立一个名为“布局表格与框架”的本地站点并在该站点中新建一个名为sy5-1.html的网页文件，利用布局表格来布局表单。效果如图所示。

2、 在本地站点 “布局表格与框架”中新建一个名为sy5-2.html的网页文件，利用布局表格来和表格配搭使用来布局网页。效果如图所示。

3、 利用框架集和框架来规划在本地站点 “布局表格与框架”建立的首页文件index.html，为目录内容“主讲课程”、 “请您留言”建立超链接，分别链接到网页文件sy5-2.html、sy5-1.html,此外为目录内容“和我联系”建立电子邮件链接。

实验六 Dreamweaver网页布局（二）
实验目的
1、 CSS的页面分割技术、盒子模式和定位技术；
2、 熟悉层（AP Div）的基本操作并能利用层来定位页面元素；
3、 掌握模板的创建、编辑和应用。
实验环境
WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。
实验重点及难点
u CSS盒模式和定位技术
u 灵活利用层来实现网页元素的精确定位。
u 利用模板生成多个风格一致的网页。
实验内容
1、 在本地站点“基于CSS的网页布局设计”中创建文件夹sy6。在sy6文件夹下创建两个文件：my.html和zzy.html。并将给定的多媒体文件放入相应的文件夹中。
2、 结合所学的CSS布局知识和AP Div（层）的知识，利用Dreamweaver对my.html进行设计编辑，效果如下图所示。

3、 编辑网页文件“zzy.html”，效果如下图所示。

4、 根据网页文件“拙政园.html”生成模板文件“my.dwt”。文件存放于sy6文件夹下。
5、 根据模板文件“my.dwt”创建网页文档“yhy.html”、“bssz.html”和“ly.html”，本地站点的网页文件my.html中的目录内容“拙政园”、“颐和园”、“避暑山庄”以及“留园”分别链接到网页文件“zzy.html”、“yhy.html”、“bssz.html”和“ly.html”。

实验七 行为和时间轴
实验目的
1、 了解行为、事件和动作的含义以及认识行为面板，掌握行为的编辑方法以及具体应用。
2、 了解时间轴、帧和关键帧以及通道的含义，掌握利用时间轴制作动态效果的网页。
实验环境
WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。
实验重点及难点
u 利用行为实现网页的交互效果。
u 利用时间轴实现网页的动态效果。
实验内容
1、 建一个名为“行为和时间轴”的本地站点，包含以下几个文件和文件夹：倡议书.html；图片文件夹（images），里面有若干图片文件。
2、 在站点“行为和时间轴”中新建一个网页“index.html”，效果如下图所示：

l 当单击文字“行为”时，效果如下图所示：

l 当单击文字“时间轴”时，效果如下图所示：

3、 在站点“行为和时间轴”中新建一个网页“交换图像.html”，在网页中实现交换图像和恢复交换图片的功能，即当鼠标指针位于图像“海豚.jpg”时，会自动变为“狗.jpg”；而当鼠标指针离开图像“狗.jpg”时，图像会自动变回“海豚.jpg”。效果如下图所示：
4、 当单击网页“交换图像.html”中的文字“请注意！”时，弹出一个浏览器窗口，显示一则倡议书。
5、 在站点“行为和时间轴”中新建一个网页“弹出信息.html”，可以实现一打开该页面就弹出一个信息窗口，信息窗口内容为“记得跟妈妈说声“谢谢”哦！”。效果如下图所示。

6、 当鼠标指针移向网页“弹出信息.html”中的生日蛋糕图片时，在状态栏显示“您许愿了吗？”。效果如下图所示。

7、 在站点“行为和时间轴”中新建一个网页“直线运动.html”，可以实现一打开该页面，一只蝴蝶就从页面左上角按直线飞到右下角。
8、 在站点“行为和时间轴”中新建一个网页“曲线运动.html”，可以实现一打开该页面，一只蝴蝶就从页面左上角按曲线飞到右上角，期间进行了俯冲和仰冲的动作。
9、 在站点“行为和时间轴”中新建一个网页“复杂运动.html”，可以实现一打开该页面，一条鱼儿在蓝色的海洋里欢快地游来游去。效果如下图所示。

10、 把站点“行为和时间轴”的网页index.htm设为主页并在其中设置相应的超链接，如下图所示。

实验八 综合实验
实验目的
u 掌握本地站点的创建和管理以及熟悉网页文件的基本操作；
u 善于运用各种网页布局设计方法；
u 熟悉在网页中基本的网页元素（如文字、图片、超链接、多媒体元素、表格和表单等）的插入和相关的设置；
u 利用模板生成多个风格一致的网页；
u 通过行为实现网页的交互效果。
实验环境
u WindowsXP操作系统
u Dreamweaver软件
实验内容
u 设计一个小型的校园跳蚤市场的网站（教材第9章）。
附录1 HTML标记的使用
实验目的
1、 掌握HTML文档的结构及其制作规范。
2、 掌握文本段落格式标记，包括注释标记，分段标记，换行/不换行标记，标题标记，分节标记，水平线标记，文本居中标记等；
3、 掌握文字显示效果标记，包括字体标记，字符样式标记以及转义字符等；
4、 掌握列表格式标记，包括无序列表标记，有序列表标记等；
5、 掌握超链接的使用，包括锚点标记、页面跳转链接、书签超链接、下载文件链接以及电子邮件链接等；
6、 掌握图片标记，包括插入图片标记，图片超链接标记网页背景标记；
7、 掌握音频和视频标记，包括链接音频或视频文件、设置网页背景音乐标记，内嵌音频或视频播放插件等；
8、 掌握动态元素标记。
9、 掌握使用表格标记来创建和设置表格；
10、 熟悉表单标记并掌握利用这些标记来创建表单以及其中的各种表单域。
实验环境
WindowsXP操作系统，内部组成局域网，外连Internet互联网。
实验重点及难点
u 熟练掌握各种常用标记并利用其来实现网页的排版。
u 不规则表格的创建。
u 使用表格来布局表单。
实验内容
1、 创建目录sy2。
l 本次实验中所有网页文件均放在目录sy2下；
l 图片、音频文件分别放在sy2的子目录media子目录的images和music子目录下。
2、 通过记事本编辑网页sy2-1.html，实现如下页面：

3、 通过记事本对网页sy2-1.html按要求进行编辑并另存为sy2-2.html，效果如下图所示。
l 标题文字大小用<h1></h1>标记；
l 作者信息文字大小为4，字体为幼圆，颜色为红色；
l 古诗文字大小为4，字体为隶书，颜色为蓝色；
l 在作者信息后加一条水平线，居中，水平线宽度为浏览器的50%，水平线的粗细为20个像素，颜色为棕色；

4、 通过记事本对网页sy2-2.html按要求进行编辑并另存为sy2-3.html，效果如图所示。
l 插入背景图片：背景.jpg
l 在古诗左下方插入作者的照片：司空曙.jpg
l 为网页添加背景音乐：江村即事.mp3，要求循环播放

5、 通过记事本对网页sy2-3.html按要求进行编辑并另存为sy2-4.html，效果如图所示。
l 改“目录”下的列表符号类型为方框。
l 给“【注释】”下的条目加数字编号
l 以标题为热点创建空超链接
l 以图片为热点创建空超链接
l 以“大历十才子”为热点创建空超链接

6、 建立一个新网页文件并命名为liuyanbu.html，内容如下图所示。

7、 通过记事本对网页sy2-4.html按要求进行编辑并另存为sy2-5.html，如下图所示。
l 以标题和图片为热点的超链接均指向
l 为“目录”下的各条目创建书签，书签名为相应条目的拼音首字母。
l 设置方向向左、方式为scroll、活动字幕的滚动速度为3像素、内容为“如有诉求，请留言或邮件联系！谢谢！”的滚动字幕。
l 以“留言”为热点创建指向liuyanbu.html的超链接。（使用相对路径，在新窗口中打开）。
l 以“邮件联系”为热点创建指向ggyx@的超链接。