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

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