《网页设计与制作教程》
实
验
指
导
书
班级姓名学号
实验一网页基础知识
一、实验目的
理解网页组成元素。
理解主页、静态网页、动态网页等概念。
了解常见的网页布局。
熟悉Dreamweaver CS6的桌面结构。
二、实验软硬件环境
一台接入Internet的计算机；Windows 7操作系统；Dreamweaver CS6、Flash CS6、Fireworks CS6软件。
三、实验内容
1．打开“九江学院”，并回答以下问题：
（1）该网页上有哪些网页元素组成？html网页设计实验心得
（2）在网站中打开5张不同内容风格的分页面，分析下它是静态网页还是动态网页，为什么？
（3）如果分页面中有图片，把图片下载到电脑中，如何操作？
2．查主页为“国字型”、“三字型”、“拐角型”、“封面型”、“Flash型”布局的网站各一个，并记录下网站地址。
3．查若干个与图1所示布局相似的网页并记录网址。
图1网页布局
4．启动Dreamweaver CS6，并完成以下操作：
（1）新建一个空白网页，并保存，存储名为myweb.html。
（2）在文档工具栏中，切换“设计”、“拆分”、“代码”、“实时视图”，理解它的功能。
（3）对“插入栏”、“属性面板”和各种组合面板进行折叠/展开，打开/关闭操作，熟悉使用。
（4）给网页输入标题栏标题：我的第一张网页。
（5）在网页中输入一首唐诗，并完成简单排版。
（6）保存网页，并用浏览器预览。
四、实验思考
1．动态网页与静态网页如何快速区分？
2．开发个人网站的首页，可以设计哪些栏目，试做一个布局草图。
实验二常见HTML标签与简单CSS的使用
一、实验目的
理解常见HTML标签在HTML文档中的作用。
掌握通过纯文本编辑器熟练编写简单HTML的技能。
掌握简单CSS的使用。
熟练掌握各种常用标签并利用其来实现网页的排版。
二、实验软硬件环境
一台接入Internet的计算机；Windows 7操作系统；Dreamweaver CS6、Flash CS6、Fireworks CS6软件。
三、实验内容
1．案例：唐诗欣赏
第一步：使用记事本编写网页“page01.htm l”，实现如图1所示效果。
操作提示：<p align="center">段落文字</p>
图1 关于唐诗的简单网页效果
第二步：使用记事本将网页“page01.htm l”另存为“page02.htm l”并按下列要求对新网页“page02.htm l”进行编辑，效果如图2所示。
要求：
●标题文字大小用<h2></h2>标记。
●作者信息文字大小为4，字体为幼圆，颜为红。
操作提示：<font size="4" color="red" face="幼圆">文字</font>
●古诗文字大小为4，字体为隶书，颜为蓝，字体加粗。
●在作者信息后加一条水平线，居中，水平线宽度为浏览器的50%，水平线的粗细为5像素，颜为棕。
操作提示：<hr align="center" color="brown" width="50%" size="5"/>
图2 简单美化后的网页效果
第三步：使用记事本将网页“page02.htm l”另存为“page03.htm l”并按以下要求对新网页“page03.htm l”
进行编辑，效果如图3所示。
要求：
●插入背景图片“bg01.jpg”。
操作提示：使用CSS样式，html { background-image:url(bg01.jpg);}
●在古诗左下方插入作者的照片“libai.jpg”并设置图片大小为宽100像素、高60像素。
操作提示：<img src="libai.jpg" width="100" height="60" />
●为网页添加背景音乐“lushan.mp3”。
操作提示：<bgsound src="lushan.mp3" />
图3 添加背景后的网页效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。