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

实验一 网页的认识 实验目的 掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件； 利用记事本来编辑HTML文档并浏览。 熟悉HTML基本标记的使用。 实验环境 WindowsXP操作系统，内部组成局域网，外连Internet互联网。 实验重点及难点 熟悉HTML的结构、语法。 熟悉HTML基本标记的使用。 实验内容 从网上（如网页制作大宝库 HYPERLINK 等）下载网页制作时需要的小图片、动画及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，如下图所示。 以标题和图片为热点的超链接均指向/view/1121590.htm（使用绝对路径，在当前窗口中打开）。 为“目录”下的各条目创建书签，书签名为相应条目的拼音首字母。 在文档最后增加一行“如有诉求，请留言或邮件联系！谢谢！”的文字。 以“留言”为热点创建指向sy3-1.html的超链接。（使用相对路径，在新窗口中打开）。 以“邮件联系”为热点创建指向 HYPERLINK mailto:editor@ewen.cc ggyx@的超链接。 实验三 Dreamweaver基本操作（二） 实验目的 熟练掌握在网页文件中多媒体对象的添加和设置。 熟练掌握在网页文件中表格的添加和设置。 熟练掌握在网页文件中表单的添加和设置。 实验环境 WindowsXP操作系统，Dreamweaver软件，内部组成局域网，外连Internet互联网。 实验重点及难点 多媒体对象的添加和设置。 表单及表单对象的添加及设置。 利用表格来归整表单。 实验内容 为站点“Dreamweaver基本操作”中的网页文件sy2-5.html添加背景音乐：江村即事.mp3，要求循环播放，结果另存为sy3-2.html。 在站点“Dreamweaver基本操作”中新建一个名为sy3-3.html的网页文件，在该网页文件中建立一个如图所示的表格，并在表格下方添加文字“让我们回到快乐的童年时光吧！”并嵌入音频文件“捉泥鳅”和插入Flash动画“拔萝卜”。 打开