网页设计实验指导书.doc

网页设计实验指导书 网页制作实验指导书目录实验一网页设计基础1【实验目的】1【实验环境】1【实验重点及难点】1【实验内容】1实验二 HTML语言（一）2【实验目的】2【实验环境】2【实验重点及难点】2【实验内容】2实验三 HTML语言（二）4【实验目的】4【实验环境】4【实验重点及难点】4【实验内容】4实验四 HTML语言（三）6【实验目的】6【实验环境】6【实验重点及难点】6【实验内容】6实验五 HTML语言（四）7【实验目的】7【实验环境】7【实验重点及难点】7【实验内容】7实验六 Dreamweaver的站点和文字编辑8【实验目的】8【实验环境】8【实验重点及难点】8【实验内容】8实验七 Dreamweaver的表单和超级链接10【实验目的】10【实验环境】10【实验重点及难点】10【实验内容】10实验八 Dreamweaver的表格布局11【实验目的】11【实验环境】11【实验重点及难点】11【实验内容】11实验九 Dreamweaver综合12【实验目的】12【实验环境】12【实验重点及难点】12【实验内容】12实验十 Dreamweaver的框架和行为13【实验目的】13【实验环境】13【实验重点及难点】13【实验内容】13实验十一 Dreamweaver的模版和CSS14【实验目的】14【实验环境】14【实验重点及难点】14【实验内容】14实验十二 Dreamweaver与Photoshop相结合使用15【实验目的】15【实验环境】15【实验重点及难点】15【实验内容】15实验十三 网站综合设计22【实验目的】22【实验环境】22【实验重点及难点】22【实验内容】22实验顺序实验名称课时实验类型实验一网页设计基础3基本验证实验二HTML语言（一）3基本验证实验三HTML语言（二）3基本验证实验四HTML语言（三）3基本验证实验五HTML语言（四）3综合设计实验六Dreamweaver的站点和文字编辑3基本验证实验七Dreamweaver的表单和超级链接3基本验证实验八Dreamweaver的表格布局3基本验证实验九Dreamweaver的Dreamweaver综合3综合设计实验十Dreamweaver的框架和行为3基本验证实验十一Dreamweaver的模版和CSS3综合设计实验十二Dreamweaver和Photoshop结合使用3综合设计实验十三网站综合设计3综合设计17实验一网页设计基础【实验目的】1掌握利用因特网进行信息游览、搜索，下载网页、图片、文字和文件； 2对给定的网站，能指出网站的链接结构、目录结构、页面布局方式。 【实验环境】WindowXP操作系统，机器联网。【实验重点及难点】熟练使用浏览器进行浏览、搜索、下载。【实验内容】1、根据网站制作的需要，从网上下载网页制作时需要的文字、小图片、动画及flash。 2、上网访问实际若干网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）、页面布局方式；在网上找出下列版面布局的结构形式： “T”结构布局“口”型（“国”字型）布局“三”型布局 对称对比布局 POP布局 拐角型布局 标题正文型 封面型（主题图片型）3、利用搜索引擎，浏览因特网上较为著名的5个网站，记录这些网站的名称、网站地址和以及相应的网页文件格式（扩展名）； 4、查看我院WWW网站主页的源代码，收藏到收藏夹中，将其设为主页，并指出该网站的链接结构、目录结构和页面布局方式。 实验二 HTML语言（一）【实验目的】1掌握的标记，和标记；2掌握使用标记设置网页背景颜色和文本颜色。学习使用分段标记；3掌握使用标记设置文字的属性；4掌握在网页中插入背景图片；5掌握在网页中插入水平线，并设置水平线的属性；6掌握在网页中插入背景音乐。 【实验环境】Windows xp【实验重点及难点】掌握字体、水平线等常用标记。【实验内容】1、制作一个简单的网页sy2-1.htm，用记事本编辑，内容为个人简介信息。 要求：l 搜索关键字为“个人”“主页”“简介”，标题为我的个人简介。 l 背景为#33ccff,文本颜色为黑色，文本需分段表示。 2、过记事本编辑网页sy2-2.htm，内容为李白的诗“静夜思”。要求：每行诗为一个段落，四行文字颜色不同，字体不同。 3、通过记事本编辑网页sy2-3.htm，实现如图页面。 4、通过记事本编辑网页sy2-4.htm，实现如下页面。图片自选，插入背景音乐“浮云.mp3”。5、通过记事本编辑网页sy2-5.htm，实现如下页面。实验三 HTML语言（二）【实验目的】1掌握给文字添加绝对超级链接，例如：和相对超级链接，例如：；2掌握使用标记；3掌握使用标记设置滚动字幕；4掌握使用列表标记。 【实验环境】Windows xp【实验重点及难点】掌握使用超级链接、列表、滚动字幕等HTML常用标记。【实验内容】1、制作一个网页sy3-1.htm，用记事本编辑。要求：l 网页名称为：超级链接练习l 以一张图片作为背景，并且设置图片固定。合理设置文字的颜色，和超级链接的颜色。 l 插入绝对链接至滁州学院主页。2、利用预格式化标签，输出如下图一段文字，在页面的顶部设置相对超级链接至页面底部，在页面的底部设置相对超级链接至顶部。3、用记事本编辑网页sy3-2.htm，实现如下页面。要求：l 网页名称为“滚动字幕”。l 滚动字幕范围为高200像素，宽180像素，向上滚动，鼠标移动到文字上方，停止滚动，鼠标移开，文字继续滚动。设置合适的滚动速度。l 文字居中对齐在滚动区域。4、用记事本编辑网页sy3-3.htm.htm，实现如下页面。要求：网页的名称为“表格练习”；网页有一个背景音乐，音乐自选。实验四 HTML语言（三）【实验目的】1掌握使用表格标记，设置表格属性。2掌握使用CSS标记，设置文字样式。 【实验环境】Windows xp【实验重点及难点】掌握CSS的基本使用。【实验内容】1、使用表格标签,制作如下图所示的页面。要求:l 表格内容水平居中对齐,垂直居中对齐，页面标题为音乐网站。.l 设置超级链接颜色l 点击播放,即可播放对应的音乐,音乐在网上下载。2、熟悉书本4041页的CSS语法，练习CSS的三种使用方式。l 外部样式表的使用l 内部样式表的使用l 内嵌样式的使用实验五 HTML语言（四）【实验目的】1掌握表单相关标记的使用； 2掌握3个页面的框架的定义和属性设置。 【实验环境】Windows xp。【实验重点及难点】掌握表单相关标记的使用，框架页面的定义。【实验内容】1、建立如下表单页面： 2、建立如下框架页面，相关图片建议试着自己制作，也可从网上下载。 实验六 Dreamweaver的使用 （一 站点和文字编辑）【实验目的】1掌握建立站点和站点内的文件，文件夹；2掌握在Dreamweaver中输入文字并设置文字属性；3掌握在Dreamweaver中插入水平线，和设置有序列表，无序列表；4掌握在Dreamweaver中插入相册。 【实验环境】Windows xp，Dreamweaver 8。【实验重点及难点】掌握Dreamweaver的基本操作，包括建立站点、设置文字属性、插入水平线、列表和相册等。【实验内容】1、建一个站点，放在磁盘最后一个盘符里。命名为“我的第一个网站”，包含以下几个文件和文件夹：主页（index.htm）；图片文件夹(images)；音乐文件夹(sound)等。2. 在“我的第一个网站”站点中，使用Dreamweaver建立如下网页，对文字信息进行如下格式设置：3、从网上下载关于琅琊山的图片和文字介绍，建立一个站点命名为“琅琊山简介”，建立一个主页，内容为琅琊山简介，合理设置图片和文字，页面要求有过渡效果。4、制作如下页面：图文混排实验七 Dreamweaver表单和超级链接 【实验目的】1掌握在Dreamweaver中建立站点。 2掌握如何创建热区，设置热区链接。3掌握在Dreamweaver中建立表单。4掌握建立锚点，实现同一页面的跳转。 【实验环境】Windows xp，Dreamweaver 8。【实验重点及难点】掌握在Dreamweaver中设置热区，建立表单、创建锚点和链接。【实验内容】1、从网上下载地图,练习热区,设置热区超级链接。2、建立如下表单页面。3.参考教材，制作一个页面介绍黄山，设置四种超级链接：绝对链接、相对链接、锚链接、邮件链接。实验八 Dreamweaver的表格布局【实验目的】1学会在Dreamweaver插入表格，设置表格属性；2掌握分别使用表格和布局视图，进行页面布局；3掌握在网页中使用层，设置透明FLASH。 【实验环境】Windows xp，Dreamweaver 8。【实验重点及难点】掌握在Dreamweaver中插入表格，进行页面布局，使用层和设置flash。【实验内容】1、使用Dreamweaver建立如下网页（歌曲自选，至少选择3首歌曲）。2、练习在Dreamweaver中用表格布局建立此页面/old/index2.php。用层插入一个透明flash动画。3、练习在Dreamweaver中用布局视图表格画出如下页面的结构图，主要考虑用表格如何将文字和图片布局成如下效果。实验九 Dreamweaver综合 【实验目的】1熟练掌握在Dreamweaver中的站点操作；2掌握列表的制作；3掌握制作跑马灯效果的方法；4掌握制作翻转图像。 【实验环境】Windows xp，Dreamweaver 8。【实验重点及难点】熟练掌握Dreamweaver的操作，能制作出常见的页面效果。【实验内容】1、根据上述所学制作简单个人网站实验十 Dreamweaver的框架和行为【实验目的】1掌握建立框架； 2掌握Dreamweaver中行为的使用。 【实验环境】Windows xp，Dreamweaver 8。【实验重点及难点】掌握Dreamweaver中框架和行为的使用。【实验内容】1、熟悉框架页面的制作。2、练习行为制作如下所示页面，并实现相应的行为。实验十一 Dreamweaver的模版和CSS【实验目的】1掌握创建一个简单的网站主页；2掌握模版的创建和使用；3掌握CSS样式。 【实验环境】Windows xp，Dreamweaver 8。【实验重点及难点】掌握模版和CSS在网站中的应用。【实验内容】1、课后题。自己创意构建一个网站主页。要求应包括：网站的标志、导航条、主题栏目、友情链接、跑马灯技术等。2、将第1题制作的网站另存为模版，使用此模版制作第二个页面，要求只修改文字内容不修改布局和图片。3、从网上下载一篇文章在此文章中实现三种CSS选择器类型：类、标签、超级链接CSS样式。可选择导出样式表或者只针对该文档。实验十二 Photoshop和Dreamweaver相结合的使用【实验目的】1掌握Photoshop中绘制网页布局；2掌握Photoshops和Dreamweaver整合制作网页。 【实验环境】Windows xp，Photoshop。【实验重点及难点】掌握Photoshop和Dreamweaver整合制作网页。【实验内容】1、制作班级主页。2、自己创意在Fireworks中绘制网页并导出，使用Dreamweaver打开编辑并添加内容。参考下图范例。实验十三 网站综合设计【实验目的】1能够根据用户需求，运用所学网页制作知识创建一个网站。2理解和运用所学知识体现网站设计中不同类型网站的特点。 【实验环境】Window XP，Dreamweaver 8。【实验重点及难点】综合运用所学知识制作出符合要求的网站，能体现出网站的特色。【实验内容】1、编写一个HTML页面，页面运行效果如下图所示。要求：（1）将页面背景图片设置为bg.jpg；（2）页面上添加三行文字，分别为“计算机应用基础”、“英语”和“市场营销”；（3）单击“计算机应用基础”、“英语”和“市场营销”，分别可以在新窗口打开“jsj.htm”、“yy.htm”和“”网站首页。2、编写一个HTML页面，该页面运行结果下图所示。要求：（1）页面标题为“个人信息”；（2）页面中第一行文字为二级标题；（3）图3中的所有表单控件添加在同一个表单中；（4）默认性别为“女”、班级为“计算机07”、密码为“111111”。3、设计一个HTML页面文件，效果如下图所示。要求：（1）第一行文字设置为三级标题并居中；（2）第二行文字加粗；（3）第三、第四行设置为如下图所示的效果。4、以下内容任选其一：（1）制作一个机关党建网站，制作主页、二级页面和三级页面。主页中栏目包括“首页 党建规章 机关党建 效能建设 党员风采 党员教育 党员文苑 文件汇编 热点话题 专题报道”，要求界面设计大方庄重，简洁明快，导航清晰。在800X600 或1204X768 分辨率下都能正常显示。可参考/welcome/、