下载文档原格式
第九章网页制作实验指导实验一使用记事本建立HTML文件一、实验目的及任务要求1.实验目的了解HTML语言的基本概念和HTML文件的基本结构，掌握常用HTML标记意义和语法，学会使用记事本编辑简单的HTML文件。
2.任务要求使用记事本编辑简单的HTML文件“刘翔.html”（图9-1），其中包括设置网页标题、建立表格、插入图片等。
图9-1 刘翔的个人小档案二、实验所需素材实验素材\第9章\第1节三、实验练习利用所给素材，使用记事本建立HTML文件“刘翔.html”（图9-1）。
在浏览器中打开、查看设计的网页。
实验二在FrontPage的Web页中插入文本、图片、水平线等对象，并用表格定位一、实验目的及任务要求1.实验目的掌握在FrontPage2003中新建站点和网页，在网页中插入文本、图片、水平线等对象的方法；掌握利用表格对文字、图片等内容进行定位的方法。
2.任务要求使用FrontPage2003新建一个站点，并在其中新建网页。
利用所给素材制作一个关于历届奥运会吉祥物的网页（图9-2），要求使用表格进行定位，插入文本、图片和水平线等对象。
图9-2 历届奥运吉祥物二、实验所需素材实验素材\第9章\第2节三、实验练习建立站点Web1，根据所给素材制作一个反映2008年北京奥运会吉祥物“福娃”的网页，保存为“2008奥运会吉祥物.htm”。
要求使用表格定位网页内容，插入素材中的文字、图片等，还可以插入水平线。
可以使用任何学到的知识进一步美化网页。
实验三插入文本、图片的超链接，并设置图片对象的格式一、实验目的及任务要求1.实验目的掌握在FrontPage2003中插入文本、图片的超链接，以及设置图片对象格式的基本方法。
2.任务要求打开实验二创建的站点Web1，编辑主页（index.htm），插入标题、水平线、文本、图片，以及文本、图片的超链接，并设置图片的对象格式，如图9-3所示。
图9-3 奥运会吉祥物二、实验所需素材本实验及实验练习所需素材文件同实验二三、实验练习打开实验二创建的站点Web1，以奥运吉祥物为内容，设计主页（index.htm），插入文本、图片的超链接，并在浏览器中打开该站点，浏览网页，测试超链接。
网站设计上机实验报告实验六：用CSS控制网页显示样式学生姓名：学生学号：学生院系：学生班级：一、实验目的掌握用CSS样式表控制网页显示样式的方法二、实验内容利用CSS样式表实现个人的主页（图片可另选）三、实验环境硬件环境：PC微机软件环境：Windows 操作系统、文本编辑器四、实验步骤1、打开记事本；2、输入能够生成规定的html文件，保存为ex5-1.html文件；3、双击ex5-1.html文件，在浏览器中查看结果。
五、源代码：<html><head><title>邓森的个人主页</title><meta http-equiv=Content-Type content="text/html;charset=gb2312"><style type=text/css>a:link {font-size:9pt;text-decoration:none}a:visited {font-size:9pt;text-decoration:none}a:active {font-size:9pt;text-decoration:none}a:hover {color:red;text-decoration:none}body {font-size:9pt;line-height:14pt} table {font-size:9pt;line-height:14pt} tr {font-size:9pt} td {font-size:9pt}.e{font-size:16pt;font-family:"MS Sans Serif";text-decoration:none}</style></head><body bgColor=#ffffff leftMargin=0 background="1.jpg" topMargin=0><br> </br><tr><td ><font size= 5 color="green">欢迎来到邓森的主页</font></td><tr><div align=center><center><table cellPadding=4 width=852 border=0 name="nav"><br> </br><tr><td ><font size= 20 color="red">恰似故人来</font></td><tr><tr><td style="border-right: 1px ridge;border-top: 1px ridge:border-left: 1px ridge;border-bottom: 1px ridge" align=middle width=103 bgColor=#a7d6ba>团结</td><td style="border-right: 1px ridge;border-top: 1px ridge:border-left: 1px ridge;border-bottom: 1px ridge" align=middle width=103 bgColor=#a7d6ba>进取</td><td style="border-right: 1px ridge;border-top: 1px ridge:border-left: 1px ridge;border-bottom: 1px ridge" align=middle width=103 bgColor=#a7d6ba>友谊</td><td style="border-right: 1px ridge;border-top: 1px ridge:border-left: 1px ridge;border-bottom: 1px ridge" align=middle width=103 bgColor=#a7d6ba>开朗</td><td style="border-right: 1px ridge;border-top: 1px ridge:border-left: 1px ridge;border-bottom: 1px ridge" align=middle width=103 bgColor=#a7d6ba>奋斗</td><td style="border-right: 1px ridge;border-top: 1px ridge:border-left: 1px ridge;border-bottom: 1px ridge" align=middle width=103 bgColor=#a7d6ba>成功</td><td style="border-right: 1px ridge;border-top: 1px ridge:border-left: 1px ridge;border-bottom: 1px ridge" align=middle width=103 bgColor=#a7d6ba>主页</td></tr></table></center></div><div align=center><center><table cellSpacing=0 cellPadding=0 width=720 border=0><tr><td width=718 bgColor=#ffffff colspan=2><hr color=#abslef size=5></td></tr> <tr><td width=105 bgColor=#ffffff rowspan=3><img border="0" src="非主流.jpg" width="150" height="360"></td><td width=613><p align=center><font color=#ff6c26><span class=e><></span></font><font color=#008000 size="4">精彩人生</font><font color=#ff6c26><span class=e><></span></font></p></td></tr><tr><td width=613><div align=center><center><table cellspacing=0 cellPadding=0 width="85%" border=0><tr><td width="100%"><table borderColor=#ffffff cellPadding=2 width="100%" border=1><table borderColor=#70b8e2 width="100%" colspan=2><img border="0" src="bbb.jpg" width="510" height="32"></td><tr><tr><td borderColor=#70b8e2 width="23%"><font size=4>小学时代</fornt></td> <td borderColor=#70b8e2 width="77%"><font size=4>我是一个开朗活泼的孩子</fornt></td></tr><tr><td borderColor=#70b8e2 width="23%"><font size=4>初中时代</fornt></td> <td borderColor=#70b8e2 width="77%"><font size=4>我是一个快乐和天真的孩子</fornt></td></tr><tr><td borderColor=#70b8e2 width="23%"><font size=4>高中时代</fornt></td> <td borderColor=#70b8e2 width="77%"><font size=4>情窦初开的年代里，我叛逆，却努力着</fornt></td></tr><tr><td borderColor=#70b8e2 width="23%"><font size=4>大学时代</fornt></td> <td borderColor=#70b8e2 width="77%"><font size=4>我奋斗者</fornt></td></tr> <tr><td borderColor=#70b8e2 width="23%"><font size=4>未来</fornt></td><td borderColor=#70b8e2 width="77%"><font size=4>我希望这那将是蔚蓝的一片</fornt></td></tr><tr><td borderColor=#70b8e2 width="23%"><font size=4>老去</fornt></td><td borderColor=#70b8e2 width="77%"><font size=4>坐在树下，倾情的回忆</fornt></td></tr></tr></table></center></div></td></tr></table></center></div></td></tr></table></center></div></body></html>六、截图。
实习一网页设计（HTML）一、实习目的1.了解HTML文档结构；2.初步掌握基本标记的使用；3.能够运用文本编辑器制作简单网页。
二、实习内容1.学习EditPlus文本编辑器的使用。
2.使用EditPlus制作只有一行文字的网页，了解HTML文档结构，并在IE浏览器中打开编写的网页文件，查看运行效果；3.在网页中添加多段文本内容，并对页面格式进行设置排版，制作一个简单文字内容的网页；4.在网页中添加图片，并对页面格式进行设置排版，制作一个简单图文内容的网页；5.制作一个索引网页，建立与前面网页之间的超连接；6.制作一个简单的个人主页。
三、预备知识1.网页的基本组成；2.HTML语言：常用HTML标记及其属性；标记作用常用属性Html 网页文件标记Body 页面标记bgcolor,background,textP 段落标记alignbr 换行标记H1～h6 标题标记alignHr 水平线标记size,width,colorFont 字体标记size,face,colorimg 图像标记Src,height,width,alt,aligna 超链接标记Href3.网页制作方法。
四、实习步骤1.学习EditPlus文本编辑器的使用打开EditPlus显示如图1-1界面，通过“文件”→“新建”→“html网页”新建一个页面，如图1-2所示。
在代码区中最外层是html标记，html标记中包含了head标记和body标记，实习中我们只改head标记中内嵌的title标记中的文本，制作页面的内容通过相关标记在body中标记。
在工具栏中分两行，第一行是编辑器的工具栏，第二行是快捷插入标记的工具栏。
现在鼠标分别停留在第二行的工具上，注意提示并记录，以备后用；特别强调颜色工具只是直观输入颜色编码（用在给颜色相关属性赋值中）。
图1-1 editplus界面图1-2 新建html 网页界面2.使用EditPlus制作一行文字的网页●使用EditPlus新建一个空白网页，观察网页的基本结构，了解基本结构所用标记的作用，保存文件，在IE浏览器中查看网页运行效果。
HTML/CSS/JavaScript 标准教程准教程：：实例版实例版（（第2版）上机手册注：本上机手册即为书中习题三的集合。
第1章三、上机题/问答题（1）简述HTML、CSS、JavaScript在网页设计中所扮演的角色。
（2）用HTML、CSS、JavaScript设计一个简单的网页。
（3）写出你的学习计划，怎样才能学好HTML、CSS、JavaScript代码。
第2章三、上机题/问答题（1）HTML文档结构是怎样的？（2）标记有哪些类型？（3）编写HTML文档有哪些注意事项？*（4）简述一个HTML文档的基本结构（5）用HTML语言编写符合以下要求的文档：标题为“练习文档”，在浏览器窗口用户区内显示“这时课后练习题参考答案及效果/（5）的答案”。
（6）自己动手写一个简单的HTML文档，完成后的效果如图2-8所示。
（CDROM/习题参考答案及效果/02/1.html）第3章三、上机题/问答题（1）打开记事本，编写一个带有标题的头部文件。
（2）在第1小题的基础上，编写网页的主题文件，并给网页设置背景颜色。
（3）用HTML代码制作如下效果的网页。
（CDROM/习题参考答案及效果/03/1.html）第4章三、上机题/问答题（1）打开记事本，给网页添加几段文字信息，并设置文字的段落格式、字体、颜色等属性。
（2）简要说明段落格式和字符格式各包括哪些选项。
（3）用HTML语言制作如下效果的网页（CDROM/习题参考答案及效果/04/1.html）（4）用HTML语言制作如下效果的网页（CDROM/习题参考答案及效果/04/2.html）第5章三、上机题/问答题（1）用有序列表和无序列表的嵌套制作如下所示页面（CDROM/习题参考答案及效果/05/1.html）（2）用HTML语言制作如下网页（CDROM/习题参考答案及效果/05/2.html）（3）用有序列表和无序列表的嵌套制作一个简单的页面。
第6章三、上机题/问答题（1）用HTML语言制作如下网页（CDROM/习题参考答案及效果/06/1.html）（2）用HTML语言制作如下网页（CDROM/习题参考答案及效果/06/2.html）（3）建立一个含有超链接的网页。
网页设计实验指导书经济与管理学院二零一二年二月实验一HTML标记的基本语法一、实验目的和要求1．熟悉HTML文件的编辑环境；2．掌握HTML中与文字、图像、页面、表格、表单和框架等的基本标记。
3．学会使用HTML设计出文本与图像相结合的较为复杂的页面。
二、实验内容1、根据如表1-1所示的表格写出完整的HTML代码；其中，《网络原理》和《网页设计与制作》课程的详细说明文件分别为该网页所在目录的net.htm和web.htm，需要为表中的书名设置相应的超级链接，以便在点击后可跳转到相应的说明页上。
2、编写出实现如图1-1所示页面效果的关键html代码，要求点击左边各目录项，相应的链接会显示在右下的帧中，并且适当填加特效如：背景图片、图像、动画等（也可自行设计效果）。
图1-1 个人网站首页3、编写出实现如图1-2所示页面效果的关键html代码，其中各子项目都做了超链接，链接的目标文件自行指定。
图1-2 列表效果图三、实验步骤1．打开任何一种文本编辑工具，可以是附件中的记事本，也可以是rontPage/Dreamweaver 的代码窗口。
2．按各种不同标签的语法规则，输入合法的代码。
3．输入完成后保存代码文件，文件后缀为.htm/.html。
4．在IE浏览器中打开保存的文件，看看是否能完成自己想要的设置。
四、程序代码（在实验报告中写出）（1）<table width="500" border="1"><caption>课程表</caption><tr><td><div align="center">课号</div></td><td><div align="center">课程名</div></td><td><div align="center">学分</div></td></tr><tr><td><div align="center">1002201</div></td><td><div align="center"><u>《网络原理》</u></div></td><td><div align="center">6</div></td></tr><tr><td><div align="center">1003302</div></td><td><div align="center"><u>《网页设计与制作》</u></div></td><td><div align="center">5</div></td></tr><tr><td><div align="center">1003507</div></td><td><div align="center">《管理学原理》</div></td><td><div align="center">5</div></td></tr></table>2.还没弄3.<!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=gb2312" /><title>无标题文档</title><style type="text/css"><!--.STYLE1 {font-family: "宋体";font-size: xx-large;}.STYLE4 {font-family: "宋体"; font-size: xx-large; font-weight: bold; }.STYLE5 {font-family: "宋体";font-size: x-large;}.STYLE6 {font-family: "新宋体"; font-size: x-large; }--></style></head><body><ul><li><h1><span class="STYLE1">列表项目1</span></h1><ol><li class="STYLE6"><a href="常用/新建文件夹/市场营销.doc">子列表项1</a></li><li class="STYLE6"><a href="常用/新建文件夹/市场营销.doc">子列表项2</a></li></ol></li></ul><ul><li><p class="STYLE4">列表项目2</p><ol><li class="STYLE5"> <a href="常用/新建文件夹/市场营销.doc">子列表项1</a></li><li class="STYLE5"><a href="常用/新建文件夹/市场营销.doc">子列表项2</a></li></ol></li></ul></body></html>五、实验心得体会主要包括在实验过程中学到了哪些东西；遇到了哪些困难，又是如何解决的；还有什么问题没有解决，分析其原因。
网页设计实习指导书（54学时for 信计）邹青编信息工程学院二００六年八月实习一掌握HTML的格式一、实习目的1. 掌握网页的基本结构及必须的标记；2. 了解Web页面中特殊字符及颜色的显示，掌握页面整体颜色配比。
3. 学会并掌握从网上获取HTML的知识及下载网页元素；二、实习要求1. 掌握网页的基本结构，熟悉html、head、body、title基本标记2. 了解Body标记的BackColor、BackGround、Text、Link、VLink、ALink属性，特殊字符的显示3. 用记事本完成简单的网页4. 学会从InterNet上获取网页元素三、实习内容及方法1. 网页基本结构<html> ……表示网页的开始<head> ……网页头，用来保存对网页的一些注释及规定一些动作<title>网页标题</title> ……在浏览器标题栏显示的内容</head> ……结束网页头<body> ……正文开始正文……显示在浏览器中的内容</body> ……正文结束</html> ……网页结束2. 用记事本建立一个简单的网页第一步：从开始菜单栏中启动记事本；第二步：在记事本中输入一下内容<html><head><title>我的第一个网页</title></head><body>Hollo, World!!!!</body></html>第三步：在文件菜单中单击保存→选择保存类型为：所以类型→输入文件名为test.html→单击确定按钮；第四步：找到刚才建立的文件，双击打开，浏览自己的网页3. Body属性的使用及特殊字符的显示。
用记事本建立一个网页sec.htm，内容如下：<html><head><title>我的第二个网页</title></head><body BGColor＝#cccccc Text=blue Link=black ALink=redVLink=green>我的<友情链接><a href=””>搜狐</a><br><a href=” ”>西北农林科技大学</a><br><a href=” http://127.0.0.1”>我自己</a></body></html>4. 从网上保存3个自己感兴趣的页面及10张图片到自己的软盘上。
《网页设计与制作》（DIV+CSS）职业技术学院信息工程系目录实训1：从基础开始 (1)实训2：摄影师个人布局 (6)实训3：生物研究中心布局 (10)实训4：教育公司布局 (22)实训1：从基础开始实训名称：成绩：实训日期：年月日实训报告日期：年月日一、实训目的1、掌握CSS的各种选择器及其各自的使用方法；2、掌握CSS的继承性与层叠特性以及它们的作用。
二、实训容实例制作三、实训环境Adobe Dreamweaver CS5四、实训步骤、过程1、动手体验CSS首先建立HTML文件，构建最简单的页面框架，其容包括标题和正文部分，每一个部分又分别处于不同的模块中，代码如下所示：<!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=gb2312" /><title>体验CSS</title><link href="sheet1.css" rel="stylesheet" type="text/css" /></head><body><h1>畅思网络</h1><img src="Pictures/1.jpg" width="128" height="128"><p id="p1">首先建立HTML文件，构建最简单的页面框架，其容包括标题和正文部分，每一个部分又分别处于不同的模块中。
《计算机网络技术与应用》 上机实验指导手册计算机网络课程组中国石油大学（华东）计算机与通信工程学院2012年9月目 录实验一 HTML简单网页制作 (1)实验二 FrontPage网页设计 (4)实验三 GIF动画设计与制作 (6)实验四 Web网站架设与发布 (8)实验五 网络连接管理 (11)实验六 网络共享与远程桌面 (14)实验七 网络常用命令 (17)实验八 VMware虚拟机使用 (20)实验九 网络嗅探与报文分析 (23)实验十 DNS域名服务 (27)实验十一 DHCP动态主机配置服务 (30)实验十二 Proxy代理服务 (34)实验十三 VPN组建与管理 (37)实验十四 电子邮件服务 (40)实验十五 FTP文件下载 (43)实验一 HTML简单网页制作一、实验目的学习HTML制作网页的基本方法，掌握HTML的基本语法和文档结构，制作简单网页，形成网页设计的直观印象。
二、实验环境记事本、写字板或EditPlus等文本编辑器，IE/火狐/遨游等浏览器。
三、实验原理1、Web服务和HTML语言概述Web服务（WWW）是目前应用最广的一种基本互联网应用，它基于HTML语言，通过URL全球资源定位标识，将全世界的Web服务和其它资源链接起来。
Web服务基于客户机/服务器方式而工作，作为服务器端的Web站点通过HTML超文本标记语言把信息组织成为图文并茂的超文本，提供给作为客户端的浏览器。
HTML是互联网上的通用语言，是HyperText Markup Language的缩写，即超文本标记语言，1993年出现1.0版，历经了2.0版、3.2版、4.0版，目前已经出现HTML5.0。
网页制作者使用它可以建立包含文本、表单、图片、音/视频、动画等内容的复杂网页，这些页面可以在公开发布后被互联网上任何用户浏览。
HTML文件是由一系列标记组成的纯文本文件，不需要专门的软件来建立HTML文件，掌握HTML语言语法后只需要通用字处理器软件（如Word、记事本、写字板等等），就可以创建HTML文件而生成网页。
本文部分内容来自网络整理，本司不为其真实性负责，如有异议或侵权请及时联系，本司将立即删除！== 本文为word格式，下载后可方便编辑和修改！ ==css实验指导书篇一：HTML实验指导书HTML网页设计基础实验指导书实验一网页设计基础及HTML基本标签【实验目的】1．掌握利用因特网进行信息游览、搜索，下载网页、图片、文字和文件；2．对给定的网站，能指出网站的链接结构、目录结构、页面布局方式；3．掌握HTML的基本标签<HTML><HEAD> <BODY><TITLE><MTEA>标记；【实验环境】Window xp操作系统，机器联网。
【实验重点及难点】熟练使用浏览器进行浏览、搜索、下载。
【实验内容】1、根据网站制作的需要，从网上下载网页制作时需要的文字、小图片、动画及flash。
2、上网访问实际若干网站，了解各网站的风格（主题图形形象、导航是否清晰，整体色调的搭配是否协调，主题是否突出等）、页面布局方式；在网上找出下列版面布局的结构形式：⑴“T”结构布局⑵“口”型（“国”字型）布局⑷ 对称对比布局⑻ 海报型布局3、利用搜索引擎，浏览因特网上较为著名的5个网站，记录这些网站的名称、网站地址和以及相应的网页文件格式（扩展名）；4、查看我院WWW网站主页的源代码，收藏到收藏夹中，将其设为主页，并指出该网站的链接结构、目录结构和页面布局方式。
5、构建最简合法的HTML文档“我的第一个网页”：（1）从开始菜单启动记事本；（2）在记事本中，录入一个最简合法HTML文档；（3）设置该文档在最终在浏览器中显示的标题为“我的第一个网页”；（4）在页面添加可见的文本“我的第一个网页”；（5）使用记事本的菜单“文件”→“保存”，在“另存为”对话框中，在“保存类型”下拉列表中选择“所有文件”，录入“文件名”myfirstpage.htm，单击“保存”按钮将该页面保存到实验文件夹。
南阳理工学院HTML+CSS上机实验指导书（2011 版）软件学院· .NET 教研室2011.8目录实验一熟悉HTML 网页如何手工制作 (3)实验二熟悉HTML 网页和各种标签 (3)实验三熟悉使用DREAMWEAVER制作HTML 网页的方法 (4)实验四列表标签和超链接标签 (4)实验五网页表格的制作 (5)实验六网页表单的制作 (5)实验七熟悉CSS基本结构一 (6)实验八熟悉CSS基本结构二 (6)实验九熟悉CSS基本结构三 (7)实验十熟悉CSS基本结构三 (7)实验十一熟悉DREAMWEAVER使用（一） (8)实验十二熟悉DREAMWEAVER使用（二） (9)实验一熟悉HTML 网页如何手工制作【实验目的】熟悉HTML 的基本结构和常用标记，使用记事本编写网页文件。
【实验内容】建立一个简单的HTML 文件，并输入相应的内容，要求使用相应标签对网页内容进行排版。
排版中涉及到的标签包括：标题标签、字体标签、分段标签等。
【实验步骤】1、打开记事本程序，编写网页的基本结构2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行排版设置3、将文件保存为*. Html4、用浏览器打开所保存的网页文件，在浏览器中显示效果5、根据结果重新调整原代码6、重复步骤4，步骤 5实验二熟悉HTML 网页和各种标签【实验目的】熟悉HTML 的基本结构和常用标记，使用记事本编写网页文件。
【实验内容】建立一个简单的HTML 文件，并输入相应的内容，要求使用相应标签对网页内容进行排版。
进一步，向网页中加入图片，使用相应标签对网页进行美化。
网页美化中涉及到的标签包括：图像标签、超链接标签等。
【实验步骤】1、打开记事本程序，编写网页的基本结构2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行排版设置3、将文件保存为*. Html4、用浏览器打开所保存的网页文件，在浏览器中显示效果5、根据结果重新调整原代码6、向网页中加入图片，利用相应标签对图片进行设置，达到美化网页效果7、重复步骤4，步骤 5实验三熟悉使用Dreamweaver 制作HTML 网页的方法【实验目的】熟悉使用Dreamweaver制作HTML 网页的方法【实验内容】使用Dreamweaver建立一个站点，然后建立简单的HTML 文件，并输入相应的内容，要求使用相应标签对网页内容进行排版，同时注意掌握Dreamweaver 的使用方法。
【实验步骤】1、打开Dreamweaver程序，建立站点，新建一个网页文件2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行排版设置3、将网页文件保存，注意查看文件所在位置4、按F12 键，使用浏览器打开所保存的网页文件，在浏览器中显示效果5、根据结果重新调整原代码6、向网页中加入图片，利用相应标签对图片进行设置，达到美化网页效果7、重复步骤4，步骤 5实验四列表标签和超链接标签【实验目的】掌握网页中列表标签和超链接标签的使用方法【实验内容】通过编写代码和可视化两种方式进行练习建立一个基本的HTML 文件设计网页中列表标签设计网页中的超链接标签【实验步骤】1、打开Dreamweaver程序，建立站点，新建一个网页文件2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行试验内容要求的设置3、将网页文件保存，注意查看文件所在位置4、按F12 键，使用浏览器打开所保存的网页文件，在浏览器中显示效果5、根据结果重新调整原代码6、向网页中加入图片，利用相应标签对图片进行设置，达到美化网页效果7、重复步骤4，步骤 5实验五网页表格的制作【实验目的】掌握网页中表格的制作方法【实验内容】建立一个基本的HTML 文件网页中表格设置单元格合并【实验步骤】1、打开记事本程序，编写网页的基本结构2、用<table>、<tr>、<td>等标签在网页中建立相应的表格3、改变表格中border、width 、height 等属性4、文件保存为*. Html5、浏览器打开所保存的网页文件，显示修改后的效果6、根据结果重新调整源代码实验六网页表单的制作【实验目的】掌握网页中表单的制作方法【实验内容】建立一个基本的HTML 文件网页中表单制作设置各种表单控件【实验步骤】1、打开记事本程序，编写网页的基本结构2、利用<form> 标签在网页中插入表单，制作一个调查问卷表，该表单主要包括单行文本框，单选钮、复选框，选择下拉框、文本域等表单元素3、文件保存为*. Html4、浏览器打开所保存的网页文件，显示修改后的效果5、根据结果重新调整源代码实验七熟悉CSS 基本结构一【实验目的】了解CSS 的基本结构掌握在网页中加入CSS的方法【实验内容】练习CSS 的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用【实验步骤】1、打开记事本程序，编写网页的基本结构2、编写一段CSS 代码3、使用三种不同的方法将编写的CSS 代码加入网页中4、浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中5、根据结果重新调整源代码实验八熟悉CSS 基本结构二【实验目的】掌握CSS 的布局方法【实验内容】练习CSS 的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用利用Div+CSS 方法对网页进行布局【实验步骤】1、打开记事本程序，编写网页的基本结构2、编写一段CSS 代码3、使用三种不同的方法将编写的CSS 代码加入网页中4、浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中5、根据结果重新调整源代码6、重新建立一个网页7、向网页中插入三个Div 标签，结合CSS 实现定位8、文件保存为*. Html9、浏览器打开所保存的网页文件，显示修改后的效果10、根据结果重新调整源代码11、根据结果重新调整源代码实验九熟悉CSS 基本结构三【实验目的】掌握CSS 中设置背景的方法【实验内容】练习CSS 的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用编写CSS 代码，对网页的背景进行设置，设置网页的背景图片【实验步骤】1、打开记事本程序，编写网页的基本结构2、编写一段CSS 代码3、使用三种不同的方法将编写的CSS 代码加入网页中4、浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中5、根据结果重新调整源代码6、编写相应的CSS 代码，将网页的背景颜色分别设置为红色、绿色、蓝色7、文件保存为*. Html8、浏览器打开所保存的网页文件，显示修改后的效果9、根据结果重新调整源代码10、重新建立一个网页11、编写CSS 代码，为网页添加背景图片，使图片不平铺12、修改CSS 代码，使图片在水平方向平铺13、修改CSS 代码，使图片在垂直方向平铺14、修改CSS 代码，使图片同时在水平和垂直方向平铺15、文件保存为*. Html16、浏览器打开所保存的网页文件，显示修改后的效果17、根据结果重新调整源代码实验十熟悉CSS 基本结构三【实验目的】掌握CSS 中设置字体和文本样式的方法【实验内容】练习CSS 的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用编写CSS 代码，对网页的字体和文本样式进行设置【实验步骤】1、打开记事本程序，编写网页的基本结构2、编写一段CSS 代码3、使用三种不同的方法将编写的CSS 代码加入网页中4、浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中5、根据结果重新调整源代码6、向网页中插入一段文字7、编写相应的CSS代码，对文本字体进行设置，分别将其设置为“TimesNew Roman”、“宋体”、“黑体”8、修改CSS代码，对字体大小进行设置9、修改CSS代码，设置文本段落缩进10、修改CSS 代码，设置文本对齐方式，分别将文本设置为左对齐、右对齐、居中对齐11、文件保存为*. Html12、浏览器打开所保存的网页文件，显示修改后的效果13、根据结果重新调整源代码实验十一熟悉Dreamweaver 使用（一）【实验目的】掌握Dreamweaver的基本使用方法掌握在Dreamweaver创建站点的方法掌握在Dreamweaver中添加页面元素的方法【实验内容】在本地磁盘建立文件夹，在此基础上利用Dreamweaver建立自己的站点，并为站点设置主页文件，进而向主页中添加文本、图像、超链接等元素。
【实验步骤】1、在本地磁盘建立“newsite”文件夹2、启动Macromedia Dreamweaver 83、利用Dreamweaver 8将“newsite”文件夹设置为站点4、建立站点首页index.html5、对首页进行编辑，向其中添加文本、插入图像、超链接，并设置相应的格式6、文件保存为*. Html7、浏览器打开所保存的网页文件，显示修改后的效果8、根据结果重新调整源代码实验十二熟悉Dreamweaver 使用（二）【实验目的】掌握在Dreamweaver中使用表格的方法掌握在Dreamweaver中使用表单的方法掌握在Dreamweaver中使用CSS 的方法【实验内容】在Dreamweaver中建立基本HTML 页，分别向其中插入表格、表单，并对其格式进行设置；利用CSS样式面板对网页进行美化。
【实验步骤】1、在本地磁盘建立“newsite”文件夹2、启动Macromedia Dreamweaver 8 3、建立基本HTML 页4、对页面进行编辑，向其中添加表格，对表格属性进行设置5、向页面中加入表单，进而向表单中添加单行文本框，单选钮、复选框，选择下拉框、文本域等表单元素6、利用CSS样式面板对网页中的文本内容进行设置，包括设置字体、字体大小、网页背景颜色等7、文件保存为*. Html8、浏览器打开所保存的网页文件，显示修改后的效果9、根据结果重新调整源代码。
