1、实验一 用 Dreamweaver 制作简单网页一、实验目的1. 熟悉 Dreamweaver 界面和基本操作2. 掌握在 Dreamweaver 中创建网站、创建空白网页、保存网页的方法3. 掌握网页基本元素的插入和设置方法二、预备知识1. 文档窗口视图“代码”视图：是一个用于编写和编辑 XHTML、JavaScript、ASP 、PHP 等代码的手工编码环境，可在该视图中直接输入 XHTML 等代码制作网页。“设计”视图：是一个用于可视化编辑网页的设计环境，在该视图中显示的页面类似于在浏览器中看到的页面。“拆分”视图：将文档窗口一分为二，上面显示“代码”视图，下面显示“设计”视图，以方便对
2、照。2. 常用面板“插入”面板：位置紧接在菜单栏下面，包括“常用” 、 “布局” 、 “表单”等子面板，可用来在网页光标处插入各种网页元素。相应的功能也可由菜单“插入记录”完成。“属性”面板：位置在网页编辑区下面，用于显示或修改所选中的网页元素的属性，是 Dreamweaver 中最常用的面板。随着所选对象不同，属性面板呈现的参数也不同。“文件”面板：位置在网页编辑区右边，用于访问和管理网站内容。如图 1-1 所示。图 1-1 Dreamweaver 界面3. 创建站点在 Windows 资源管理器中创建目录作为站点目录，并在该目录下创建 images 目录，将所需要的图片等素材文件复制到 i
3、mages 目录下。注意：网站中的目录名和文件名应该用英文字母和数字，避免用中文，否则后面创建网页时可能会识别不出来。启动 Dreamweaver，选择“站点 ”菜单“新建站点”命令，进行设置。4. 创建网页及保存选择“文件”菜单“新建”命令，创建网页。选择“文件”菜单“保存”命令，保存网页。默认保存位置为站点目录，默认保存类型为“.html” 。注意：网页创建后，应该立即保存，这样以后在页面中插入的图片、链接可以以相对路径保存，避免网站上传后找不到图片、链接的情况发生。5. 设置页面属性在“属性”面板中单击“页面属性”按钮，可以设置如网页标题、页面文本字体格式、网页背景颜色或图像、链接文字颜
4、色和格式等页面属性。6. 插入网页基本元素添加文本：直接输入，可在“属性”面板中设置文本格式。插入表格：选择“插入记录”菜单“表格”命令，在光标处插入表格。可在“属性”面板中设置表格属性。插入图像：选择“插入记录”菜单“图像”命令，在光标处插入图像。可在“属性”面板中设置图像属性。添加链接：选择热点文字或图像，在属性面板中单击“链接”文本框右边的 ，选择站点目录下的文件，即可将热点链接到该文件。三、示例1. 启动 Dreamweaver在桌面上双击 Dreamweaver 图标 。2. 熟悉 Dreamweaver 窗口和基本操作操作 1：观察 Dreamweaver 的窗口组成。操作 2：显
5、示或隐藏面板界面上未显示的面板，可通过选择“窗口”菜单中相应的面板名显示出来（此时相应命令前有“” ） ，再执行一次同样的命令则隐藏面板。3. 创建网站操作 1：在 Windows 资源管理器中创建目录 D:WEBexperiment，作为站点目录；再在该目录下创建 images 目录，将所需要的图片等素材文件复制到 images 目录下。操作 2：选择“站点”菜单“新建站点”命令，在对话框中选择“高级”选项卡，如图 1-2 设置站点， “确定” 。完成站点创建。图 1-2 站点设置4. 创建空白网页并保存操作 1：选择“文件”菜单“新建”命令，在打开的对话框中，选“空白页” ， “页面类型”
6、选“HTML” ， “布局 ”选“无” ，单击“创建”按钮。操作 2：选择“文件”菜单“保存”命令，在打开的对话框中，会发现保存位置已经是站点目录 D:WEBexperiment，输入文件名“index” ，保存类型默认是“.html ”，单击“保存”按钮。此时可在右边的文件面板中看到名为“index.html”的文件（若看不到可选择“窗口”菜单“文件”命令显示文件面板） 。5. 观察 Dreamweaver 文档窗口的三个视图操作 1：单击“index.html ” 文档窗口的“代码”按钮，切换到代码视图，可以看到如图 6.1 所示的 Dreamweaver 自动生成的 XHTML 文档基本
7、结构，可在该视图中直接输入XHTML 代码制作网页。操作 2：单击“拆分”按钮，切换到拆分视图，可看到文档窗口一分为二，上面显示“代码”视图，下面显示相应的“设计”视图，方便对照。操作 3：单击“设计”按钮，切换到设计视图，这是 Dreamweaver 提供的可视化编辑视图，在 Dreamweaver 中设计网页主要在该视图进行。6. 设置页面属性操作 1：在属性面板中单击“页面属性”按钮，打开对话框。操作 2：单击“页面字体”右边的 按钮，若选项中没有“隶书” ，则选择“编辑字体列表” ，在“可用字体”中选择“隶书” ，单击 按钮，可以看到“选择的字体”中出现了“隶书” ，单击“确定”按钮。
8、再次单击“页面字体”右边的 按钮，可以看到“隶书”出现在选项中，选择“隶书” 。网页的默认字体设为隶书。操作 3：“大小”选择 24 像素，将网页的默认字体大小设为 24 像素。操作 4：“文本颜色”选择黑色（#000000） ，将网页的默认文本颜色设为黑色。操作 5：单击“背景图像”右边的“浏览”按钮，选择站点 images 目录下的“greenrabbit.jpg”文件，该图片将作为整个网页的背景。操作 6：在“分类”中单击“标题/编码” ，在“标题”文本框中输入“小白兔幼儿园” ，该标题将显示在浏览器标题栏上。操作 7：单击“确定”按钮，完成页面属性设置。7. 添加网页内容操作 1：在文
9、档窗口中输入“小白兔幼儿园” ，回车，回车。选中文字“小白兔幼儿园”，在属性面板中单击“居中对齐”按钮， “大小”输入 48，回车。操作 2：在文档窗口中单击“小白兔幼儿园”的下一行，选择“插入记录”菜单“表格”命令，在打开的对话框中，设置 1 行 4 列， “表格宽度”为 70%，下面 3 个文本框全部输入 0，单击“确定”按钮。在属性面板中， “对齐”选“居中对齐” ，则表格在页面中水平居中。操作 3：在表格的 4 个单元格中，依次输入“教育教学” 、 “招生信息” 、 “家园互动” 、“联系方式” 。选中 4 个单元格，在属性面板中单击“居中对齐”按钮，则文字在单元格中居中对齐。操作 4
10、：添加链接。选中文字“教育教学” ，在属性面板中单击“链接”文本框右边的 ，选择站点目录下的“education.html”文件， “确定” 。可以看到“链接” 文本框中出现“education.html ”文件名，这样就为文字“教育教学”创建了到网页“education.html ”的链接。选中文字“招生信息” ，在文件面板中将“recruit.html”文件拖曳到属性面板的“链接”文本框中，回车。这样就为文字“招生信息”创建了到网页“recruit.html”的链接，这是添加链接的另一种方法。为文字“家园互动”创建到“interaction.html ”的链接。为文字“联系方式”创建到“c
11、ommunication.html”的链接。操作 5：单击表格的下一行，选择“插入记录”菜单“表格”命令，在打开的对话框中，设置 1 行 2 列， “表格宽度”为 90%， “边框粗细” 为 0， “单元格边距”为 10， “单元格间距”为 10，单击“确定”按钮。在属性面板中， “对齐”选“居中对齐” 。操作 6：单击第一个单元格，选择“插入记录”菜单“图像”命令，选择站点images 目录下的 “children.jpg”文件， “确定” ， “确定” 。此时图像为原始大小，单元格自动调整宽高以恰好容纳图像。在属性面板中设宽为 240、高为 210。在文档窗口中单击一下，单元格重新调整。操
12、作 7：在右边单元格中输入并设置幼儿园简介文字。输入文字“幼儿园简介” ，回车。选中“幼儿园简介” ，在属性面板中单击“居中对齐”按钮， “大小”输入 30，回车。在“幼儿园简介”下一行输入以下文字：小白兔幼儿园位于上海市西南部，建于一九八六年十月，建筑面积 4000 平方米。拥有幼儿500 余名。建园以来，我们在上级幼教部门的关怀和领导下，以全国省、市教育工作精神和邓小平同志关于“教育要面向现代、面向世界、面向未来”的思想为指导，以贯彻两个幼教行政法规为依据，以“一切为了孩子”为办园宗旨，本着“幼儿至上、服务第一、团结求实、进取创新”精神，全面实施素质教育，使园所面貌发生了深刻的变化，先后荣
13、获了市先进单位和市示范幼儿园称号。8. 保存网页选择“文件”菜单“保存”命令。9. 打开网页操作 1：按 F12 键，可在 IE 浏览器中预览网页。操作 2：在 Windows 资源管理器中双击 “index.html”文件，打开网页，如图 1-3 所示。图 1-3 实验一示例网页图 1-4 实验一二练习网页四、练习按照图 1-4 所示样张完成网页，以文件名 “ex621.html”保存。具体要求如下：1. 网页默认字体“隶书” ，默认字体大小 24 像素，背景图像“police.jpg” ，网页标题“交通规则” 。2. 文字“欢迎学习交通规则”为白色、48 像素、居中对齐。3. 为左边一列各
14、章设置链接。4. 合并中间一列，输入图示文字。5. 合并右边一列，插入图片“safety.jpg” ，设宽 150、高 260。实验二 用 Dreamweaver 制作表单一、实验目的1. 了解表单的作用2. 了解 Dreamweaver 的常用表单项及其属性3. 掌握表单界面的设计方法二、预备知识1. 表单表单用于 Web 服务器和浏览器之间数据的双向流动，服务器通过表单从浏览器端收集信息，交由服务器端 CGI(Common Gateway Interface)程序处理后，将结果返回给浏览器。在网页中插入表单，就能实现网页的交互作用。要使表单真正起作用，必须结合服务器端CGI 程序一起使用。
15、本章不涉及编程，所以只是要求掌握表单界面的设计。2. 表单及表单项的插入方法有两种方法：选择“插入记录”菜单“表单”命令，表单及所有的表单项都可以在其中找到。选择“插入”面板“表单”子面板，表单及所有的表单项都可以在其中找到。3. 插入表单光标定位在要插入表单的地方。选择“插入记录”菜单“表单”“表单”命令，在光标处出现一个红色虚线框，这就是表单，可以看到下面的属性面板中出现表单属性。以后插入的属于这个表单的表单项都必须放在红框中，这样提交时才能作为一个整体提交。4. 插入文本域选择“插入记录”菜单“表单”“文本域”命令。文本域是一个单行文本框。5. 插入文本区域选择“插入记录”菜单“表单”“
16、文本区域”命令。文本区域是一个多行文本框。6. 插入复选框选择“插入记录”菜单“表单”“复选框”命令，插入一个复选框。7. 插入单选按钮选择“插入记录”菜单“表单”“单选按钮组”命令，插入一组单选按钮（默认2 个） 。由于单选按钮具有组内只能选一个的特性，因此建议用“单选按钮组”命令而不是各自为战的“单选按钮”命令。8. 插入列表/菜单选择“插入记录”菜单“表单”“列表/菜单”命令，插入一个列表框。 “菜单”即下拉式列表框，只占一行，单击下拉按钮 时显示列表选项，只允许选一项；“列表”可以指定占几行（“高度”属性） ，允许多选。9. 插入按钮选择“插入记录”菜单“表单”“按钮”命令，插入一个按
17、钮（默认为提交按钮） 。一个表单必须包含一个提交按钮，才能将各表单项内容提交给服务器。10. 插入跳转菜单选择“插入记录”菜单“表单”“跳转菜单”命令，插入一个下拉菜单，可以添加菜单命令并指定执行命令后转向的网页。 “跳转菜单”命令可以单独使用。三、示例1. 在站点目录下新建文件“register.html” ，作为小白兔幼儿园的入园报名网页操作 1：选择“文件”菜单“新建”命令，在打开的对话框中，选“空白页” ， “页面类型”选“HTML” ， “布局 ”选“无” ，单击“创建”按钮。操作 2：选择“文件”菜单“保存”命令，在打开的对话框中，会发现保存位置已经是站点目录 D:WEBexper
18、iment，输入文件名“register.html” ，单击“保存”按钮。2. 设置页面属性操作 1：在属性面板中单击“页面属性”按钮，打开对话框。操作 2：设置“页面字体”为“隶书” ， “大小”为 24 像素， “文本颜色”为墨绿色（#006600） 。操作 3：在“分类”中单击“标题/编码” ，输入“标题”为“小白兔幼儿园入园报名” 。操作 4：单击“确定”按钮，完成页面属性设置。3. 添加网页内容操作 1：在文档窗口中输入“入园报名” ，回车。选中文字，在属性面板中单击“居中对齐”按钮， “大小”输入 48，回车。操作 2：在“入园报名”的下一行，选择“插入记录”菜单“表单”“表单”命
19、令，在页面中插入一个空表单。操作 3：在表单虚线框中，选择“插入记录”菜单“表格”命令，在打开的对话框中，设置 7 行 3 列， “表格宽度”为 90%， “边框粗细”为 0， “单元格边距”为 0， “单元格间距”为 10，单击“确定”按钮。在属性面板中， “对齐”选“居中对齐” 。操作 4：在第一行第一个单元格中，输入“宝宝姓名：” ；第二个单元格中，选择“插入记录”菜单“表单”“文本域”命令，在弹出的对话框中单击“取消”按钮。操作 5：在第二行第一个单元格中，输入“宝宝出生日期：” ；第二个单元格中，选择“插入记录”菜单“表单”“文本域”命令，单击“取消”按钮。操作 6：在第三行第一个单
20、元格中，输入“宝宝性别：” ；第二个单元格中，选择“插入记录”菜单“表单”“单选按钮组”命令，在弹出的对话框中将第一行的“标签”和“值”均设为“男” ，第二行的“标签”和“值”均设为“女” ，单击“确定”按钮。鼠标在页面上“男”后单击，按 Del 键，现在两个选项在同一行上。操作 7：在第四行第一个单元格中，输入“家长姓名：” ；第二个单元格中，选择“插入记录”菜单“表单”“文本域”命令，单击“取消”按钮。操作 8：在第五行第一个单元格中，输入“所属小区：” ；第二个单元格中，选择“插入记录”菜单“表单”“列表/菜单”命令，单击“取消 ”按钮。在属性面板中单击“列表值”按钮，在如图 2-1 所
21、示的对话框中， “项目标签 ”下输入“长桥一村” ，单击 ，输入“长桥二村” ，单击 ，输入“罗阳一村” ， “确定” 。操作 9：在第六行第一个单元格中，输入“联系电话：” ；第二个单元格中，选择“插入记录”菜单“表单”“文本域”命令，单击“取消”按钮。操作 10：选中第七行前 2 个单元格，在属性面板上单击单元格合并按钮 。单击合并后的单元格，选择菜单“插入记录”“表单”“按钮”命令，单击“取消”按钮。光标放到提交按钮右边，输入一个全角空格，选择菜单“插入记录”“表单”“按钮”命令，单击“取消”按钮，在属性面板上设置“动作”为“重设表单” 。光标放到重置按钮右边，在属性面板上单击“居中对齐
22、”按钮。操作 11：鼠标单击“家长姓名”单元格，选择“修改”菜单“表格”“插入行”命令，图 2-1 所属小区列表值对话框图 2-2 实验二示例网页在“家长姓名”上方插入一行。在第一个单元格中，输入“宝宝简介：” ；第二个单元格中，选择“插入记录”菜单“表单”“文本区域”命令，单击“取消”按钮。操作 12：选中第三列的前 3 个单元格，在属性面板上单击单元格合并按钮 ，单击合并后的单元格，选择菜单“插入记录”“图像”命令，选择“catmum.jpg”文件， “确定”， “确定” ，在属性面板上设“宽”为 180、 “高”为 150。选中第三列的中间 2 个单元格，在属性面板上单击单元格合并按钮
23、，单击合并后的单元格，选择菜单“插入记录”“图像”命令，选择“dog1.jpg ”文件， “确定” ， “确定 ”，在属性面板上设“宽”为180、 “高”为 150。选中第三列的后 3 个单元格，在属性面板上单击单元格合并按钮 ，单击合并后的单元格，选择菜单“插入记录”“图像”命令，选择“dog2.jpg”文件，“确定” ， “确定” ，在属性面板上设“宽”为 180、 “高”为 150。4. 保存网页选择“文件”菜单“保存”命令。5. 打开网页按 F12 键，可在 IE 浏览器中看到如图 2-2 所示的网页。四、练习按照图 2-3 所示样张完成网页，以文件名 “ex631.html”保存。具体要求如下：1. 网页默认字体“楷体” ，默认字体大小 16 像素，网页标题“交通规则测试” 。2. 文字“交通规则测试”大小为 24 像素、居中对齐。3. 表单中设置表格（2 列） ，测试题放在表格中。图 2-3 实验二练习网页
