网页设计实验指导书经济与管理学院二零一二年二月实验一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>五、实验心得体会主要包括在实验过程中学到了哪些东西；遇到了哪些困难，又是如何解决的；还有什么问题没有解决，分析其原因。
实验二本地站点的规划、创建和网页的编辑一、实验目的和要求1．熟悉站点的规划；2．掌握本地站点的建立和定义，熟悉站点窗口中各菜单的功能和作用；3．掌握在本地站点中新建网站文件夹与文件；4．熟悉Dreamweaver 8的工作环境；5．掌握在网页中插入文本、图像和编辑文本、图像的方法；6．学会给文字和图像创建超链接。
二、实验内容和步骤1．浏览国内几类典型网站，熟悉站点的规划、布局等方法。
政府类网站：商务部 /统计局 /政府网页链接 /govinfo/教育类网站：教育部 /清华大学 北京大学 门户类网站：新浪网网易 TOM 电子商务网站：B2B代表阿里巴巴 /B2C代表当当网 C2C代表淘宝网 Ebay中国（原易趣）2. 在网上找出下列版面布局的结构形式：（1）“同”字型结构布局（2）“国”字型结构布局（3）“匡”字型结构布局（4）“三”字型结构布局（5）“川”字型结构布局3．定义本地站点（1）单击【站点】【新建站点】命令，打开图2-1所示的站点定义窗口。
图2-1 图2-2（2）选择“基本”选项卡，在分类列表中选择本地信息选项开始定义站点。
■各选项的设置方法可参考下面的文字说明。
站点名称文本框：输入网站中文名称，如：风行科技(如图2-2)；单击【下一步】,弹出图2-3，选择【否，不想使用服务器技术】图2-3 图2-4单击【下一步】,弹出图2-4，指定网站所在的本地端文件夹位置单击按钮，选择E：\实验\单击【下一步】,弹出图2-5，在如何运用服务器技术中选择【无】单击【下一步】,弹出图2-6，完成。
图2-5 图2-6（3）按照上面的说明设置完成后，此时会弹出文件面板组，显示出如图2-7所示的本地的站点视图。
图2-7本地站点视图窗口3．新建网页文件目前我们在个人网站中只有image文件夹，没有其它的网页文件，那么接下来就是在网站文件夹中放入事先设计好的网页文件或重新创建网页文件。
(1)可根据网页主题及内容的多少，创建网页文件。
初期的设计可参考下例。
如图2-8所示。
图2-8 网站地图（2）根据设计的地图，在网站的站点窗口中新建网页文件，选择【文件】【新建文件】命令，此时新增加了默认名称为“untitled.htm”的网页文件，如图2-9所示。
（3）将“untitled.htm”的网页文件更名为“index.htm”, 回车。
4．修改、删除文件名。
直接选中要修改的文件，单击即可修改，或右击并从快捷菜单选择【重命名】。
直接选中要删除的文件，按delete键，或右击并从快捷菜单选择【删除】。
图2-9建立网页文件图2-10站点编辑窗口6．编辑网站内容（1）在定义了一个或多个本地端的站点之后，往往由于某种原因需要编辑网站的相关数据，这时打开图2-10编辑站点窗口，再按照下面的步骤操作。
（2）选择要修改的网站，完成修改网站的相关设置，完成后单击ok。
（3）回到编辑站点对话框，单击完成按钮结束工作。
7．创建ODBC连接（1）单击“开始”/“资源管理器”/“控制面板”/“管理工具”/“数据源”；（2）启动ODBC，在ODBC窗口中选择“系统DSM”；（3）单击“添加”，在“创建新数据源”对话框中选择“Microsoft Access Driver(*.mdb)”驱动；（4）单击“完成”，在出现的“ODBC Microsoft Access安装”对话框中输入数据源名及说明，并选择要进行链接的数据源；（5）单击“确定”即可建立DSN。