1、g. 单击“完成”关闭“管理站点”对话框。（3） 创建基于表格的页面布局a. 查看设计草样。图形设计人员已经提供了 Web 页面设计草样，其中包括一些内容区域和图形方案。在后面的部分，将使用 Dreamweaver 制作此设计页面。b. 选择“文件”“新建”， 在“新建文档”对话框的“常规”选项卡上，从“类别”列表中选择“基本页”，从“基本页”列表中选择“HTML”，然后单击“创建”。保存新页面为index.html。c. 在新文档顶部的“文档标题”文本框中，键入 Cafe Townsend。d. 在页面上单击一次，在页面左上角放置插入点。选择“插入”“表格”。在“插入表格”对话框中，执行下面
2、的操作： 在“行数”文本框中，输入 3。 在“列数”文本框中，输入 1。 在“表格宽度”文本框中，输入 700。 在“表格宽度”弹出式菜单中，选择“像素”。 在“边框粗细”文本框中，输入 0。 在“单元格边距”文本框中，输入 0。 在“单元格间距”文本框中，输入 0。e. 单击“确定”。 一个三行一列的表格即出现在文档中。该表格的宽度为 700 像素，边框、单元格边距和单元格间距均为 0。f. 单击一次该表格右侧取消对它的选择。g. 选择“插入”“表格”以插入另一个表格。在“插入表格”对话框中，对第二个表格执行下面的操作： 在“行数”文本框中，输入 1。 在“列数”文本框中，输入 3。h. 单
3、击“确定”。 第二个表格（该表格具有一行三列）即出现在第一个表格下方。i. 单击该表格右侧取消对它的选择。j. 通过选择“插入”“表格”，然后在“插入表格”对话框中输入以下值来插入第三个表格：k. 单击“确定”。 第三个表格（该表格具有一行一列）即出现在第二个表格下方。l. 选择“查看”“表格模式”“扩展表格模式”。m. 在第一个表格的第一行内单击一次，在“属性”检查器（“窗口”“属性”）的“单元格高度”文本框中输入 90，然后按 Enter 键。n. 用同样的方法将第一个表格的第二行的“单元格高度”设为166，第三行的“单元格高度”设为24。o. 在第二个表格的第一列内单击一次，在“属性”检
4、查器的“单元格宽度”文本框中输入 140，然后按 Enter 键。p. 用同样的方法将第二个表格的第二列的“单元格宽度”设为230，第三列的“单元格宽度”设为330。q. 最后，在最后一个表格（该表格包含一行和一列）内单击一次，在“属性”检查器的“单元格高度”文本框中输入 24，然后按 Enter 键。r. 单击“文档”窗口顶部的“退出扩展表格模式”链接，返回到“标准”模式，保存页面。s. 在文档窗口中，在第一个表格的第一行内单击一次，选择“插入”“图像对象”“图像占位符”， 在“图像占位符”对话框中，执行下面的操作： 在“名称”文本框中，键入 banner_graphic。 在“宽度”文本框
5、中，输入 700。 在“高度”文本框中，输入 90。 单击颜色框并从颜色选择器中选择红棕色 （#993300）。 保留“替换文本”文本框为空。t. 单击“确定”， 保存页面。（4） 向页面添加内容a. 在第二个表格的第一个单元格内单击一次，单击标签选择器中的 标签（单元格标签）以选择该单元格。在“属性”检查器（“窗口”“属性”）中，在“背景颜色”文本框内输入十六进制值 #993300，然后按 Enter 键。同样，将第二个单元格的颜色设置为十六进制值 #F7EEDF，将第三个表格单元格的颜色更改为浅棕色。b. 选择“修改”“页面属性”， 在“页面属性”对话框的“外观”类别中，单击“背景颜色”颜
6、色框，然后从颜色选择器中选择黑色 （#000000）。单击“确定”并保存页面。c. 双击页面顶部的图像占位符 banner_graphic，在“选择图像源文件”对话框中，浏览至您定义为站点根文件夹的 cafe_townsend 文件夹中的 images 文件夹，选择 banner_graphic.jpg 文件并单击“确定”。d. 在第一个表格的第三行（低于刚插入的横幅图形两行，彩色表格单元格之上）内单击一次，选择“插入”“图像”， 在“选择图像源文件”对话框中，浏览至 cafe_townsend 文件夹中的 images 文件夹，选择 body_main_header.gif 文件，然后单击“
7、确定”。e. 在页面上最后一个表格的最后一行（彩色表格单元格之下）中单击一次，在“文件”面板（“窗口”“文件”）中，找到 body_main_footer.gif 文件（它位于 images 文件夹中），将该文件拖到最后一个表格的插入点。f. 在由三列组成的表格（第一个浅棕色表格单元格）的中间一列内单击一次，在“属性”检查器（“窗口”“属性”）中，从“水平”弹出式菜单中选择“居中对齐”，然后从“垂直”弹出式菜单中选择“顶端”。该操作将表格单元格的内容对齐到单元格的中间，并使单元格的内容从单元格顶端开始。g. 按一次 Enter 键，单击“文件”面板中的“资源”选项卡，或选择“窗口”“资源”，
8、在“资源”面板中，选择 street_sign.jpg 文件，将 street_sign.jpg 文件拖到中心位置的表格单元格中的插入点，单击“资源”面板底部的“插入”。h. 在第一个表格的第二行内单击一次，在“属性”检查器（“窗口”“属性”）中，从“水平”弹出式菜单中选择“居中”，然后从“垂直”弹出式菜单中选择“居中”。 选择“插入”“媒体”“Flash”， 在“选择文件”对话框中，浏览至站点的 cafe_townsend 根文件夹中的 flash_fma.swf 文件，选择该文件，然后单击“确定”。 在“属性”检查器（“窗口”“属性”）中单击“播放”可以开始Flash 文件播放，单击“停止
9、”可以结束 Flash 文件播放。i. 在由三列组成的表格的中间一列中放置的图形之上单击一次，选择“插入”“Flash 视频”，在“插入 Flash 视频”对话框中，从“视频类型”弹出式菜单中选择“渐进式下载视频”。 在 URL 文本框中，单击“浏览”，浏览至 cafe_townsend_home.flv 文件（位于站点的 cafe_townsend 根文件夹中），并选择该 FLV 文件。从“外观”弹出式菜单中选择 Halo Skin 2，在“宽度”文本框中键入 180，在“高度”文本框中键入 135 ，然后按 Enter 键。单击“确定”关闭对话框并将 Flash 视频内容添加到 Web 页
10、面。j. 在“文件”面板中，找到 sample_text.txt 文件（在 cafe_townsend 根文件夹中）并双击该文件的图标，在 Dreamweaver 中打开它，选择所有文本，然后选择“编辑”“复制”以复制该文本。单击文档右上角中的 X 关闭 sample_text.txt 文件。k. 在由三列组成的表格的第三个表格单元格（包含图形和 Flash 视频的列的右侧的单元格）内单击一次，选择“编辑”“粘贴”。“属性”）中，从“垂直”弹出式菜单中选择“顶端”。这会将刚刚粘贴的文本沿表格单元格的顶端对齐。l. 在由三列组成的表格的第一列（红棕色的列）中单击一次，键入单词 Cuisine，按
11、空格键并键入 Chef Ipsum，接着键入单词Articles、Special Events、Location、Menu、Contact Us，在每个单词之间留一个空格。m. 在插入点仍旧处于由三列组成的表格的第一个单元格中时，在标签选择器中单击 “属性”）中，从“垂直”弹出式菜单中选择“顶端”，将刚刚键入的文本沿表格单元格的顶端对齐。n. 选择在由三列组成的表格的第一个单元格中键入的单词 Cuisine，请小心只选择单词 Cuisine，不要选中它后面的空格。在属性检查器中（“窗口”“属性”），单击“链接”文本框旁的文件夹图标，在“选择文件”对话框中，浏览至 menu.html 文件（与
12、index.html 文件处于同一个文件夹中），并单击“确定”。o. 重复上一步，为作为导航而键入的每个单词或一组单词建立链接。还需要创建 6 个链接：为 Chef Ipsum、Articles、Special Events、Location、Menu 和 Contact Us 分别创建一个链接。p. 按 F12 键，主浏览器启动（如果尚未运行）并显示索引页面。2. 制作框架结构网站框架的最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。采用框架结构制作一个网站，合理布局导航区和目录区，在窗口间正确链接各网页。（1） 创建框架集a. 选择“文件”“新建”
13、，在“新建文档”对话框中，选择“框架集”类别。从“框架集”列表选择“上方固定，左侧嵌套 ”框架集，单击“创建”。b. 如果出现“框架标签辅助功能属性”对话框，请为每个框架完成此对话框，然后单击“确定”。c. 选择“窗口”“框架”，在“框架”面板中单击框架最外边的边框选择框架集。将框架边框从“设计”视图的底边拖入“设计”视图的中下位置，增加一个横向框架。d. 编辑完成后如下图所示，有四个框架。e. 在“框架”面板（“窗口”“框架”）中单击框架集的最外边边框，在“属性”检查器（“窗口”“属性”）中，单击第一行，将“行”中的数值更改为90，单位选择“像素”；单击第三行，将“行”中的数值更改为24，单
14、位选择“像素”。在“文档”工具栏的“标题”字段中，键入框架集文档的名称：Cafe Townsend。f. 在“框架”面板中单击单击topFrame框架和mainFrame框架的分隔线，在“属性”检查器（“窗口”“属性”）中，单击第一列，将“列”中的数值更改为140，单位选择“像素”。g. 在“框架”面板中单击第三行的框架，在“属性”检查器（“窗口”“属性”）中的“框架名称”中输入“bottomFrame”。h. 选择“文件”“保存全部”， 在“设计”视图中框架集的周围将出现粗边框，在出现的对话框中输入index文件名。对随后出现的topFrame框架，输入top文件名，leftFrame框架，
15、输入left文件名, mainFrame框架，输入main文件名, rightFrame框架，输入right文件名, bottomFrame框架，输入bottom文件名。本次将保存一个框架集文件，四个框架文件。（2） 向框架中添加内容a. 在“框架”面板中单击topFrame框架，在“设计”视图中插入一个三行一列的表格，用于布置页面的页头部分，在该表格中插入相关的内容。b. 在“框架”面板中单击leftFrame框架，在其中插入一个一行一列的表格，用于布置页面的索引部分，在该表格中插入相关的内容。c. 在“框架”面板中单击mainFrame框架，在其中插入一个一行两列的表格，用于布置页面的内容
16、部分，在该表格中插入相关的内容。d. 在“框架”面板中单击bottomFrame框架，在其中插入一个一行一列的表格，用于布置页面的页尾部分，在该表格中插入相关的内容。e. 选择“文件”“保存全部”，保存文件。（3） 设置链接目标a. 在“设计”视图中，选择leftFrame框架中的一个用作链接的对象，在属性检查器的“目标”弹出式菜单中，选择“mainFrame”作为链接的文档应在其中显示的框架。“框架集”“编辑无框架内容”， 在“文档”窗口中，像处理普通文档一样键入或插入内容，用于在不支持框架的基于文本的浏览器和较旧的图形浏览器中显示内容。c. 再次选择“修改”“编辑无框架内容”以返回到框架集
17、文档的普通视图。d. 选择“文件”六、注意事项本任务应上机反复练习，直到熟练掌握Dreamweaver的基本操作，并对表格、层和框架有足够的认识为止。七、实验报告或上机要求不撰写实验报告，根据实验内容上机验证。网页程序设计实验指导书实验项目二：CSS层叠样式表设计及JavaScript入门（12学时）通过本实验课程的学习和实践，使学生了解CSS层叠样式表语言，掌握静态网页制作的全过程。按照多模块有机结合、循序渐进的方式开展实验，有效的培养和提高学生网站设计的基本编程能力和网页布局、美化等能力。1、制作一个JavaScript程序2、制作网页对话程序3、实时显示系统日期程序设计1. 使用 CSS
18、 设置页面格式（1） 完成实验一的“仿照实例设计一个网站作品”。（2） 使用 CSS 设置页面格式”“新建”， 在“基本页”列中选择“CSS”，然后单击“创建”，将该页保存（“文件”“保存”）为 cafe_townsend.css。b. 在样式表中键入以下代码：pfont-family: Verdana, sans-serif;font-size: 11px;color: #000000;line-height: 18px;padding: 3px;c. 保存样式表。d. 单击index.html选项卡，选择在页面中的第一段文本，在“属性”检查器中查看，并确保使用段落标签设置了该段落的格式。同
19、样，在第二段文本上使用段落标签。e. 在“CSS 样式”面板（“窗口”“CSS 样式”）中，单击位于面板右下角的“附加样式表”按钮。在“附加外部样式表”对话框中，单击“浏览”并浏览到上一节创建的 cafe_townsend.css 文件，单击“确定”。f. 在“CSS 样式”面板中，单击面板右下角的“新建 CSS 规则”， 从“选择器类型”选项中选择“类”， 在“名称”文本框中输入 .bold，在“定义在”弹出式菜单中，选择 cafe_townsend.css，单击“确定”。 在“CSS 规则定义”对话框中，执行下面的操作： 在“字体”文本框中，输入 Verdana, sans-serif。
20、在“大小”文本框中，输入 11，并在紧靠其右的弹出式菜单中选择像素。 在“行高”文本框中，输入 18，并在紧靠其右的弹出式菜单中选择像素。 从“粗细”弹出式菜单中选择“粗体”。 在“颜色”文本框中，输入 #990000。g. 单击“确定”，单击“CSS 样式”面板顶部的“所有”按钮。h. 在“文档”窗口中，选择第一段中文本的前四个单词：Cafe Townsends visionary chef，在“属性”检查器（“窗口”“属性”）中，从“样式”弹出式菜单中选择“bold”。同样，将“bold”类样式应用到第二段的前四个单词。i. 在cafe_townsend.css 选项卡单击，在.bold
21、类样式后面定义一个新规则，键入以下代码：.navigation j. 保存 cafe_townsend.css 文件。k. 在index.html选项卡单击，在“CSS 样式”面板中，确保选中了“全部”模式，选择新的 .navigation 规则，然后单击面板右下角的“编辑样式”。 从“大小”弹出式菜单中选择 16，然后从紧靠其右的弹出式菜单中选择像素。 从“样式”弹出式菜单中选择“正常”。 从“修饰”列表中选择“无”。 在“颜色”文本框中，输入 #FFFFFF。l. 单击“确定”。m. 在“CSS 样式”面板中，确保选中了 .navigation 规则，然后单击“显示列表视图”。 单击 ba
22、ckground-color 属性右边的列，输入十六进制值 #993300，按 Enter 键。在display 属性右边的列中单击一次，从弹出式菜单中选择 block。在 padding 属性右边的列中单击一次，输入值 8px，按 Enter 键。在width 属性右边的列中单击一次，在第一个文本框中输入 140，从弹出式菜单中选择像素，按 Enter 键。n. 保存并关闭 cafe_townsend.css文件。o. 打开 index.html 页，单击单词 Cuisine 将插入点置于该单词中的某个位置，在标签选择器中，单击最右边的 “属性”）中，从“样式”弹出式菜单中选择“naviga
23、tion”。 对于导航条中的每个链接，重复同样的操作。p. 保存该页面，然后按F12在浏览器中预览该页面。2. 制作层结构网站用层替换上面例子中的表格，制作一个布局基本相同的页面。（1） 创建新文档a. 在 Dreamweaver 中，新建一个html文件命名为index_css.html。b. 在新文档顶部的“文档标题”文本框中，键入 Cafe Townsend。（2） 创建层a. 从“插入”栏中选择“布局”模式，单击“绘制层”， 将任意大小的层拖动到页面上，然后释放鼠标按钮。单击该层左上角的选择柄，确保选中它。“属性”）中执行以下操作： 单击“层编号”文本框，然后将该层重命名为 banne
24、r_graphic。 在“宽 （W）”文本框中，输入 700px。 在“高 （H）”文本框中，输入 90px。 在“左 （L）”文本框中，输入 20px。 在“上 （T）”文本框中，输入 20px。 按 Enter 键。b. 用同样的方法，添加新层。选中新层后，在“属性”检查器中执行以下操作： 单击“层编号”文本框，然后将该层重命名为 flash_fma。 在“高 （H）”文本框中，输入 166px。 在“上 （T）”文本框中，输入 111px。 按 Enter 键c. 选择“查看”“可视化助理”“CSS 布局背景”。d. 在flash_fma层下面新添三个层，使用“属性”检查器执行以下操作：
25、 选择第一个层，将它命名为 header，并将它的大小设置为宽 700 像素，高 24 像素，按 Enter 键。 选择第二个层，将它命名为 center_content，然后将它的大小设置为宽 700 像素，高 350 像素，按 Enter 键。 选择第三个层，将其命名为 footer，并将它的大小设置为宽 700 像素，高 24 像素，按 Enter 键。e. 选择 header 层，并拖动选择柄，直到 header 层直接定位到 flash_fma 层之下。f. 选择并拖动 center_content 层和 footer 层，直到center_content 层定位到 header层之
26、下、footer 层定位到center_content之下。g. 当各层就位后，通过选择“查看”“可视化助手”并取消选择“CSS 布局背景”来禁用“CSS 布局背景”。h. 在层的右侧单击一下，确保取消选择所有内容。i. 在“插入”栏的“布局”类别中，单击“绘制层”并将另一个层拖动到 center_content 层的内部单击新层的选择柄，确保选中该层。在“属性”检查器中执行以下操作： 单击“层编号”文本框，然后将该层重命名为 navigation。 在“宽 （W）”文本框中，输入 140px。 在“高 （H）”文本框中，输入 350px。j. 使用键盘上的向上箭头键移动该 navigation 层，直到它恰好适合 center_content 层。k. 在 center_content 层中创建另一个层，选中新层后，在“属性”检查器中执行以下操作： 单击“层编号”文本框，然后将该层重命名为 flash_video。 在“宽 （W）”文本框中，输入 230px。l. 拖动 flash_video 层或使用键盘上的方向键定位该层。m. 在 center_content 层中再创建一个层，选中新层后，在“属性”检查器中执行以下操作： 单击“层编号”文本框，然后将该层重命名为 text。 在“宽 （W）”文本框中，输入 330px。n. 拖动 text 层或使用键盘上的方向键
