《网页设计与制作教程》实验指导书班级姓名学号实验一网页基础知识一、实验目的理解网页组成元素。
理解主页、静态网页、动态网页等概念。
了解常见的网页布局。
熟悉Dreamweaver CS6的桌面结构。
二、实验软硬件环境一台接入Internet的计算机；Windows 7操作系统；Dreamweaver CS6、Flash CS6、Fireworks CS6软件。
三、实验内容1．打开“九江学院”官网，并回答以下问题：（1）该网页上有哪些网页元素组成？（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 添加背景后的网页效果第四步：使用记事本将网页“page03.htm l”另存为“page04.htm l”并按以下要求对新网页“page04.htm l”进行编辑，效果如图4所示。
要求：●给标题设置超链接，链接到百度文库，即“”，同时要求链接能在新窗口打开。
操作提示：<a href="" target="_blank">链接文字</a>●给图片设置超链接，链接到百度百科，即“”。
操作提示：<a href=""><img /></a>图4 添加链接后的网页效果第五步：使用记事本将网页“page04.htm l”另存为“page05.htm l”并在<body>标签的下一行添加如下几行JavaScript代码试试看。
<script type="text/javascript">alert("欢迎欣赏古诗！");alert("九江是一个人杰地灵的地方，这里有庐山、鄱阳湖、青阳腔戏曲...");</script>2．仿照案例，以陈寅恪的诗《忆故居》为主题，利用HTML语言制作一个网页。
忆故居陈寅恪渺渺钟声出远方，依依林影万鸦藏。
一生负气成今日，四海无人对夕阳。
破碎山河迎胜利，残馀岁月送凄凉。
松门松菊何年梦，且认他乡作故乡。
注：陈寅恪（1890.7.3-1969.10.7），字鹤寿，江西九江市修水县义宁客家人，生于湖南长沙，祖籍福建上杭。
中国现代最负盛名的集历史学家、古典文学研究家、语言学家、诗人于一身的百年难见的人物，与叶企孙、潘光旦、梅贻琦一起被列为清华百年历史上四大哲人。
九江学院两南山建有陈寅恪故居。
四、实验思考1．在Internet上任意找一些网页并查看其源代码，然后分析说明在这些网页中出现最多的标签是什么？对照所查看的网页效果说明这些标签在网页中分别起什么作用？2．通过检索工具检索JavaScript相关知识，然后总结说明JavaScript脚本代码之所以广泛应用在网页中是因为它有哪些方面的优势？实验三常见表单标签与CSS的使用一、实验目的掌握HTML常见表单标签的使用。
掌握CSS的使用。
熟练掌握各种常用标签并利用其来实现网页的排版。
熟练掌握CSS的使用，包括选择器的使用、属性的使用等。
二、实验软硬件环境一台接入Internet的计算机；Windows 7操作系统；Dreamweaver CS6、Flash CS6、Fireworks CS6软件。
三、实验内容1．案例：使用CSS制作简洁表单效果第一步：使用记事本创建一个命名为“formAndCss.html”的HTML文档，然后直接输入以下代码到网页代码的<body>标签内，请读者预览此时的网页并查看其效果。
需要输入的HTML代码：<div id="stylized" class="myform"><form id="form" name="form" method="post" action="index.html"><h1>用户注册</h1><p>欢迎您注册成为本站会员，请认真填写各项信息</p><label>用户名<span class="small">设置便于记忆的用户名</span></label><input type="text" name="username" id="username" /><label>姓名<span class="small">添加您的姓名</span></label><input type="text" name="name" id="name" /><label>出生日期<span class="small">添加您的出生日期</span></label><input type="date" name="birthday" id="birthday" /><label>电子邮箱<span class="small">添加有效的电子邮箱</span></label><input type="email" name="email" id="email" /><label>密码<span class="small">最少6个字符</span></label><input type="password" name="password" id="password" /><button type="submit">提交</button><div class="spacer"></div></form></div>第二步：将以下CSS代码输入到“formAndCss.html”网页代码的<head>标签中（也可以单独存储到CSS文件中），网页在Google Chrome浏览器的效果如图1所示。
至此，可以看出通过合理的使用CSS可以实现与使用表格标签一样的网页布局效果，但是，需要注意的是，不同浏览器对CSS的支持程度不一致，编写CSS代码时需要考虑代码在各浏览器之间的兼容性问题。
因此，在设计与制作网页的过程中也不必过分追求CSS 的使用。
![《网页设计与制作》实践大纲和实习指导书[1]](https://img.taocdn.com/s1/m/8c48d8e55ef7ba0d4a733be0.png)
