实验二 使用HTML主要元素制作网页
一、
实验目的：
1. 熟悉Dreamweaver CS3设置网页页面的属性，即文件头中各项属性的值
2. 使用Dreamweaver CS3文本属性面板，设置设计窗口中的文本的显示格式和样式。 3. 使用Dreamweaver CS3插入图像，并能设置图像的属性。
二、 三、
实验内容：
使用Dreamweaver CS3插入主要HTML元素并设置属性
实验要求：
1． 了解Dreamweaver CS3的菜单、工具栏、面板组等界面，掌握定制适合自己的工作区的方法； 2． 熟练使用Dreamweaver CS3在网页中操作图片、列表、表格、表单和框架。
四、 五、 实验学时：2学时 实验步骤：
第1步：在硬盘上为本实验建立文件夹，文件夹名称为mySite。 第2步：启动Dreamweaver CS3，使用实验一的步骤和方法创建一个名为“我的个人网站”的站点。
第3步：在你的站点中创建如图2-1所示的站点文件结构。
图2-1
第4步：打开index.html,使用文件头设置菜单，如图2所示，设置该网页文件的文件头如下五个方面的信息。
? 设置该网页的文字编码方式为GB2312，
? ? ? ?
关键词（keywords）包含“网页设计，软件开发，电子商务”，
网页的介绍性文本是“***的个人主页，关于软件开发的一个网站” 设置网页每隔5秒钟刷新1次 设置网页的标题体“***”的个人主页
- 5 -
图2-2
第5步：使用代码窗口察看HTML文件的头标记的内容，如图2-3所示。
图2-3 HTML文件的头标记的内容
第6步：在图2-1图中myself文件夹中，新建index.html网页文件，并打开该文件。
第7步：在index.html文件中输入如图2-4所示的页面内容，然后按F12预览一下你自己介绍自己网页文件。
图2-4 我的个人介绍的内容
- 6 -
第8步 在网络上找一张图片，然后使用Dreamweaver CS3插入到图2-4的网页界面中，创作出如图2-5所示的界面。
图2-5 插入自己图片后的个人主页
第9步，切换到HTML代码窗口，熟悉以上网页中各个HTML标记及其属性。
图2-6 熟悉HTML标记及其属性的标签
第10步：在myself文件夹中，新建一个名为“list.html”的网页文件，在其中输入如图2-7所示的数据目录的层次结构。
- 7 -
1. 绪论：《网页设计基础》简介 I. 因特网先锋 o 里克利德 o 拉里·罗伯茨 o 蒂姆·伯纳斯·李 II. Web发展简史 i. Web 1.0和Web 2.0 AJAX 异步Javascript和XML IM 即时通讯工具 RSS 丰富站点照耀 Blog 网络日志 Web标准与Web标准化 ? 结构 ? HTML ? XHTML ? XML ? 表现 ? CSS ? 行为 ? DOM ? ECMAScript III. 推荐学习资料 o 参考书 o 浏览器 o 网站 2. 第一章：Web基础与概览 3. 第二章：超文本标记语言HTML 4. 第三章：可扩展的超文本标记语言XHTML 5. 第四章：层叠样式表CSS 6. 第五章：Java脚本Javascript
图2-7 要完成的列表
第11步：切换到HTML代码窗口，熟悉以上网页中各个HTML标记及其属性。
ii. 六、 实验体会：
- 8 -
