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

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