目录实验一网页设计基础实验 (2)实验二HTML语言应用 (4)实验三CSS样式表的应用---CSS的引用 (10)实验四Dreamweaver的使用、个人网站的制作 (13)实验五用框架、模板设计网页 (15)实验六表单制作 (19)实验一网页设计基础实验一、实验目的1．掌握网站设计的基本原则、网站及网页的基本风格与基本构图特点；2．了解网页布局的形式。
3.用记事本编写一个简单的网页。
二、实验内容1．上网访问实际若干电子商务网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）。
2．在网上找出下列版面布局的结构形式：⑴．“T”结构布局1."T"结构布局。
所谓"T"结构。
就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母"T",所以我们称之为"T"形布局。
这是网页设计中用的最广返的一种布局方式。
这种布局的优点是页面结构清晰，主次分明。
是初学者最容易上手的布局方法。
缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。
2."口"型布局。
这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。
这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。
缺点是页面拥挤，不够灵活。
也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。
3."三"型布局。
这种布局多用于国外站点，国内用的不多。
特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。
4.对称对比布局。
顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。
优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。
5.POP布局。
POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。
常用于时尚类站点，比如。
优点显而易见：漂亮吸引人进入internet找到以上各种布局，并写出各种版面布局网站的域名和所采用的版面布局形式找出使用大色块和抽象线条构图风格的网站（至少各2个）；例：大色块主页找出10个国内外著名企业或商务网站主页上的宣传标语或体现企业精神的代表性词句。
三、实验步骤与要求1）新建一个记事本文件本在其中输入如下代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>我的第一个网页</title></head><body><p>Hello World!</p></body></html>2）把记事本文件扩展名改为.html，双击运行。
实验二HTML语言应用一、实验目的:1．掌握常用的HTML语言标记；2．利用文本编辑器建立HTML文档，制作简单网页。
3．学习将其它格式的文档转换成HTML格式的文档二、实验内容：1．打开文本编辑器“记事本”中输入如下的HTML代码程序,建立一个具有基本结构标记的HTML 文件，然后以自己名字（用字母）另存为.htm文件，并在浏览器中运行。
<html><head><title>王辉的主页</title></head><body bgcolor="#f0ffFF"><br><!---换行---><h2><center>王辉的个人主页</center></h2><hr></body></html>2. 在以上程序的基础上一步一步的添加红色部分的语句并运行，浏览网页。
<html><head><title>王辉的主页</title></head><body bgcolor="#f0ffFF"><br><!---换行---><h2><center>王辉的个人主页</center></h2><hr><font size=6>我要变大</font><font size=7>我要更大</font><font color=blue>我要变成兰色</font><font color=#A52A2A>我要变成褐色</font></body></html>(3)增加移动字幕<html><head><title>王辉的主页</title></head><body bgcolor="#f0ffFF"><br><!---换行---><h2><center>王辉的个人主页</center></h2><hr><font size=5>字体变大</font><font size=6>字体要更大</font><font color=blue>字体变成兰色</font><font color=#A52A2A>字体变成褐色</font><hr><marquee>背景音乐浏阳河！</marquee><marquee height=40 width=100% bgcolor=f0ffff behavior="alternate"><font size=5>湖南民歌浏阳河</font></marquee><marquee height=90 width=100% bgcolor=f0fff0 direction=up scrollamount=1 ><br><br>浏阳河<br><br>弯过了几道弯<br><br>几十里水路到湘江<br><br><br>江边有个什么县哪<br><br><br>出了个什么人<br><br>领导人民得解放<br>啊依呀依子哟<br><br><br>浏阳河<br><br>弯过了九道弯<br><br>五十里水路到湘江<br><br>江边有个湘潭县哪<br><br>出了个毛主席<br><br>领导人民得解放<br><br>啊依呀依子哟</marquee><hr></body></html>4、建立表格<html><head><title>王辉的主页</title></head><body bgcolor="#f0ffFF"><br><!---换行---><h2><center>王辉的个人主页</center></h2><hr><font size=5>字体变大</font><font size=6>字体要更大</font><font color=blue>字体变成兰色</font><font color=#A52A2A>字体变成褐色</font><hr><marquee>背景音乐浏阳河！</marquee><marquee height=40 width=100% bgcolor=f0ffff behavior="alternate"><font size=5>湖南民歌浏阳河</font></marquee><marquee height=90 width=100% bgcolor=f0fff0 direction=up scrollamount=1 ><br><br>浏阳河<br><br>弯过了几道弯<br><br>几十里水路到湘江<br><br><br>江边有个什么县哪<br><br><br>出了个什么人<br><br>领导人民得解放<br>啊依呀依子哟<br><br><br>浏阳河<br><br>弯过了九道弯<br><br>五十里水路到湘江<br><br>江边有个湘潭县哪<br><br>出了个毛主席<br><br>领导人民得解放<br><br>啊依呀依子哟</marquee><hr><table border=1 bgcolor=#f0fff0 width="80%">我要建立表格<tr><th width=100% colspan="2">表格标题行</th><tr><td align=right height=40>第1行第1列右对齐</td> <td align=right>第1行第2列右对齐</td></tr><tr><td align=center>第2行第1列居中</td><td align=center>第2行第2列居中</td></tr><tr><td align=left>第3行第1列左对齐</td><td align=left>第3行第2列左对齐</td></tr></table><hr></body></html>5、插入图片<html><head><title>王辉的主页</title></head><body bgcolor="#f0ffFF"><br><!---换行---><h2><center>王辉的个人主页</center></h2><hr><font size=5>字体变大</font><font size=6>字体要更大</font><font color=blue>字体变成兰色</font><font color=#A52A2A>字体变成褐色</font><hr><marquee>背景音乐浏阳河！</marquee><marquee height=40 width=100% bgcolor=f0ffff behavior="alternate"><font size=5>湖南民歌浏阳河</font></marquee><marquee height=90 width=100% bgcolor=f0fff0 direction=up scrollamount=1 ><br><br> 浏阳河<br><br>弯过了几道弯<br><br>几十里水路到湘江<br><br><br>江边有个什么县哪<br><br><br>出了个什么人<br><br>领导人民得解放<br>啊依呀依子哟<br><br><br>浏阳河<br><br>弯过了九道弯<br><br>五十里水路到湘江<br><br>江边有个湘潭县哪<br><br>出了个毛主席<br><br>领导人民得解放<br><br>啊依呀依子哟</marquee><hr><table border=1 bgcolor=#f0fff0 width="100%">我要建立表格<tr><th width=100% colspan="2">表格标题行</th><tr><td align=right height=40>第1行第1列右对齐</td><td align=right>第1行第2列右对齐</td></tr><tr><td align=center>第2行第1列居中</td><td align=center>第2行第2列居中</td></tr><tr><td align=left>第3行第1列左对齐</td><td align=left>第3行第2列左对齐</td></tr></table><hr><p>我要插入图片,将图片newyork.bmp另存为newyork.jpg，并和此网页放在同一目录下<p><a href=""><img src=newyork.jpg> </a><p>点击以上图象可以到我们学校主页<hr></body></html>6、建立各种链接<html><head><title>王辉的主页</title></head><body bgcolor="#f0ffFF"><br><!---换行---><h2><center>王辉的个人主页</center></h2><hr><font size=5>字体变大</font><font size=6>字体要更大</font><font color=blue>字体变成兰色</font><font color=#A52A2A>字体变成褐色</font><hr><marquee>背景音乐浏阳河！</marquee><marquee height=40 width=100% bgcolor=f0ffff behavior="alternate"><font size=5>湖南民歌浏阳河</font></marquee><marquee height=90 width=100% bgcolor=f0fff0 direction=up scrollamount=1 ><br><br> 浏阳河<br><br>弯过了几道弯<br><br>几十里水路到湘江<br><br><br>江边有个什么县哪<br><br><br>出了个什么人<br><br>领导人民得解放<br>啊依呀依子哟<br><br><br>浏阳河<br><br>弯过了九道弯<br><br>五十里水路到湘江<br><br>江边有个湘潭县哪<br><br>出了个毛主席<br><br>领导人民得解放<br><br>啊依呀依子哟</marquee><hr><table border=1 bgcolor=#f0fff0 width="100%"><a name="#item">我要建立表格</a><tr><th width=100% colspan="2">表格标题行</th><tr><td align=right height=40>第1行第1列右对齐</td><td align=right>第1行第2列右对齐</td></tr><tr><td align=center>第2行第1列居中</td><td align=center>第2行第2列居中</td></tr><tr><td align=left>第3行第1列左对齐</td><td align=left>第3行第2列左对齐</td></tr></table><hr><p>我要插入图片,将图片newyork.bmp另存为newyork.jpg，并和此网页放在同一目录下<p><a href=""><img src=newyork.jpg> </a><p>点击以上图象可以到我们学校主页<hr><p><a href="">我要链接到中国教育科研网</a><p><a href="wang.htm">我要链接到自己的主页</a>做一名为wang.htm的网页,并和此网页放在同一目录下<p><a href="#item"> 我要链接到本页的第七行“我要建立表格”</a></body></html>7、改变网页背景图片，加入背景音乐。