实验一网页的认识实验目的1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；2、利用记事本来编辑HTML文档并浏览；3、熟悉HTML基本标记的使用。
实验环境WindowsXP操作系统，内部组成局域网，外连Internet互联网。
实验重点及难点◆熟悉HTML的结构、语法。
◆熟悉HTML基本标记的使用。
实验内容1、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。
2、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。
3、通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设为主页。
4、制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”，内容为司空曙的《江村即事》，如下图所示。
5、通过附录1的练习熟悉HTML基本标记的使用。
（可参考第二章内容）实验二 Dreamweaver基本操作（一）实验目的1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理；2、熟悉网页文件的基本操作；3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。
实验环境WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。
实验重点及难点◆文字的插入及设置。
◆图像的插入及设置。
◆各种超链接的创建。
实验内容1、使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几个文件和文件夹：图片文件夹（images）；音乐文件夹（sound）等。
2、在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件，从提供的网页原始素材中把相关文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。
3、在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为sy2-2.html，效果如图所示。
●标题文字大小用<h1></h1>标记；●作者信息文字大小为24像素，字体为幼圆，颜色为红色；●古诗文字大小为24像素，字体为隶书，颜色为蓝色；●在作者信息后加一条水平线，居中，水平线宽度为浏览器的30%，水平线的粗细为20个像素，颜色为棕色；4、在站点“Dreamweaver基本操作”中对网页sy2-2.html按如下要求进行编辑并另存为sy2-3.html，效果如图所示。
●插入背景图片：Welcome-Popup-Background.gif●在古诗左下方插入作者的照片：司空曙.jpg5、在站点“Dreamweaver基本操作”中从提供的网页原始素材中把相关文字复制到网页文件sy2-3.html中按要求进行编辑并另存为sy2-4.html，效果如图所示。
●改“目录”下的列表符号类型为方框。
●给“【注释】”下的条目加数字编号●以标题为热点创建空超链接●以图片为热点创建空超链接●以“大历十才子”为热点创建空超链接6、在站点“Dreamweaver基本操作”中新建一个名为sy3-1.html的网页文件，以作实验三制作留言簿备用。
7、在站点“Dreamweaver基本操作”中对网页sy2-4.html按要求进行编辑并另存为sy2-5.html，如下图所示。
●以标题和图片为热点的超链接均指向/view/1121590.htm（使用绝对路径，在当前窗口中打开）。
●为“目录”下的各条目创建书签，书签名为相应条目的拼音首字母。
●在文档最后增加一行“如有诉求，请留言或邮件联系！谢谢！”的文字。
●以“留言”为热点创建指向sy3-1.html的超链接。
（使用相对路径，在新窗口中打开）。
●以“邮件联系”为热点创建指向ggyx@的超链接。
实验三 Dreamweaver基本操作（二）实验目的1、熟练掌握在网页文件中多媒体对象的添加和设置；2、熟练掌握在网页文件中表格的添加和设置；3、熟练掌握在网页文件中表单的添加和设置。
实验环境WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。
实验重点及难点◆多媒体对象的添加和设置。
◆表单及表单对象的添加及设置。
◆利用表格来归整表单。
实验内容1、为站点“Dreamweaver基本操作”中的网页文件sy2-5.html添加背景音乐：江村即事.mp3，要求循环播放，结果另存为sy3-2.html。
2、在站点“Dreamweaver基本操作”中新建一个名为sy3-3.html的网页文件，在该网页文件中建立一个如图所示的表格，并在表格下方添加文字“让我们回到快乐的童年时光吧！”并嵌入音频文件“捉泥鳅”和插入Flash动画“拔萝卜”。
3、打开站点“Dreamweaver基本操作”中的网页文件sy3-1.html，制作一个留言簿表单，效果如下图所示。
件中用表格来布局sy3-1.html网页文件中的留言簿，效果如下图所示。
实验四 CSS样式表实验目的1、了解CSS 的基本知识；2、熟悉“CSS样式”面板；3、掌握样式表的创建和应用。
实验环境WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。
实验重点及难点◆选择器的使用。
◆利用样式表对页面进行美化。
◆样式应用的优先级实验内容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 CS3软件，内部组成局域网，外连Internet互联网。
实验重点及难点◆利用布局表格来规划网页的设计。
◆利用框架来来设计网页。
◆利用表格、框架这两种布局工具来共同布局网页。
实验内容1、建立一个名为“布局表格与框架”的本地站点并在该站点中新建一个名为sy5-1.html的网页文件，利用布局表格来布局表单。
效果如图所示。
2、在本地站点“布局表格与框架”中新建一个名为sy5-2.html的网页文件，利用布局表格来和表格配搭使用来布局网页。
效果如图所示。
3、利用框架集和框架来规划在本地站点“布局表格与框架”建立的首页文件index.html，为目录内容“主讲课程”、“请您留言”建立超链接，分别链接到网页文件sy5-2.html、sy5-1.html,此外为目录内容“和我联系”建立电子邮件链接。
实验六基于CSS的网页布局设计实验目的1、CSS的页面分割技术、盒子模式和定位技术；2、熟悉层（AP Div）的基本操作并能利用层来定位页面元素；3、掌握模板的创建、编辑和应用。
实验环境WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。
实验重点及难点◆CSS盒模式和定位技术◆灵活利用层来实现网页元素的精确定位。
◆利用模板生成多个风格一致的网页。
实验内容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 CS3软件，内部组成局域网，外连Internet互联网。