实验五：Web制作—Dreamweaver
5.1 实验目的
? ? ? ? ? ? ? ? ? ? ? ? ?
了解DreamweaverCS4中，超文本标记语言HTML用于网页结构设计的概念。 了解CSS层叠样式表用于网页样式应用的概念。 了解JS（Javascript）用于网页行为的调用的概念。
掌握超文本标记语言HTML与网页的关系、熟悉最基本的HTML语言。 掌握HTML网页的基本设置、代码的基本应用。
掌握用表格、单元格和DIV（层）对网页进行布局的方式设计网页。 掌握各类超链接：文字、图片（图片包含热点）、书签、电子邮件的超链接。 掌握多媒体网页的制作、动画、图片、视频、声音的设置。 掌握网页中动态效果的制作以及背景图片、音乐的设置。 掌握框架网页的设计。
掌握表单技术：单行文本框、下拉菜单、单选按钮、复选框、文本区、提交和重置。 掌握网页设计中层的应用、行为设置、网页特效的应用。 掌握站点的建设、调试和发布。
5.2 实验范例
范例一：熟悉 Hypertext Markup Language
（1）简单网页的制作：将Dreamweaver范例一文件夹放置在桌面上，应用记事本软件打开“我的第一张网页”文件，输入下述HTML命令（注意：除了中文字之外，其余超文本标记语言全部换用英文、半角）
〈HTML〉 〈!--HTML文档开始--〉 〈HEAD〉 〈!--HTML文档头部分开始--〉
〈TITLE〉我的第一个网页+学生自己姓名〈/TITLE〉 〈!--设置标题栏--〉 〈/HEAD〉 〈!--HTML文档头部分结束--〉 〈BODY〉 〈!--HTML文档主体部分开始--〉 正常体 〈!—字题设置--〉 〈B〉粗体字〈/B〉 〈I〉斜体字〈/I〉 〈U〉加下划线〈/U〉 〈TT〉打字机风格字体〈/TT〉 〈SUP〉上标字体〈/SUP〉 〈SUB〉下标字体〈/SUB〉 〈S〉加删除线〈/S〉 〈EM〉强调文本〈/EM〉
〈STRONG〉加重文本〈/STRONG〉
〈BR〉 〈!—换行--〉 〈SMALL〉小字体〈/SMALL〉
1
〈BIG〉大字体〈/BIG〉
〈table border=\〉〈!—表格开始 框线粗1 宽度50%--〉 〈tr〉 〈!—表格第一行开始--〉 〈td width=\〉 〈!—表格第一列 宽470像素--〉 〈H1〉第1标题字体〈/H1〉 〈H2〉第2标题字体〈/H2〉 〈H3〉第3标题字体〈/H3〉 〈H4〉第4标题字体〈/H4〉 〈H5〉第5标题字体〈/H5〉 〈H6〉第6标题字体〈/H6〉
〈td〉 〈!—表格第二列开始--〉
--〉
〈/td〉 〈!—表格第二列结束--〉 〈/tr〉 〈!—表格第一行结束--〉 〈/table〉 〈!—表格结束--〉
〈HR〉 〈!—加水平线--〉 〈FONT SIZE=\〉红色6号字体〈/FONT〉 〈FONT SIZE=\〉蓝色6号字体〈/FONT〉
〈/BODY〉 〈!--HTML文档主体部分结束--〉 〈/HTML〉 〈!--HTML文档结束--〉
（2）保存为“my first web.htm” 在桌面上，然后用IE浏览器打开观察，对照样张如图5-1所示。
图5-1 简单的网页第一行第一列内容
〈p align=\〉 〈!—内容居中对齐--〉
〈img border=\src=\范例一/范例1图片.JPG\width=\
height=\〉 〈!—插入桌面/范例一/图片.JPG，图片边框为0，图片大小为350×280像素
思考：HTML（Hyper Text Markup Language ）即超文本标记语言，是 WWW 的描述语言，其结构特点？其头部和主体是哪两大部分？通常需要用什么软件浏览？
范例二：熟悉站点
2
（1）将Dreamweaver范例二文件夹移到C盘根目录下，打开Dreamweaver，菜单/站点/新建站点：在对话框内选择高级、网站名为自己姓名+站点1（如图中的王小小站点1）、本地根文件夹为范例二文件夹、默认图像文件夹为范例二文件夹内的images文件夹、在URL地址中输入默认本机虚拟服务器地址http://localhost 或http://127.0.0.1 、启用缓存，确定。见图5-2。
（2）调试一：设置服务器
在高级/分类/选择远程信息，由于将本机作为虚拟远程服务器，故在远程信息中选择/本地网络，见图5-3 设置服务器，远端文件夹是指站点文件存放的文件夹，所以这里为C:\\Dreamweaver范例二文件夹、维护同步信息与保存时自动上传：自动更新文件列表。
（3）调试二：测试服务器一
在高级/分类/选择测试服务器，如需创建动态网页，就必须指定想使用服务器技术，这里建议使用/ASP VBscript，访问本地/网络。
测试服务器文件位置：C:\\Dreamweaver范例二文件夹，使用自己现在所用的计算机默认URL来测试站点，如：http://localhost。
确定/完成，见图5-4 测试服务器一。 （4）调试三：测试服务器二
在Dreamweaver右下站点任务窗格中分别选择本地、远程和测试服务器并在测试服务器任务窗格中点击刷新按钮
、如站点设置正常则显示后台文件活动正常对话框，且站点文件夹显示红色，见图5-5 测试服务器二。
（5）在菜单/站点/管理站点对话框中可以对站点进行编辑、上传和删除。
（6）网页和站点其他文件均建立、放置在该站点中，images
图5-5 测试服务器二 图5-4 测试服务器一 图5-3设置服务器
图5-2 新建站点、设置对话框
文件夹仅仅放置图片文件，站点中对文件的管理也须在其中进行，如选中站点中某个文件后/快捷菜单/编辑/可以复制、剪切、粘贴、删除、重命名，然后可以在其中检查链接。
（7）因机房内计算机硬盘被保护，为保证以后实验的延续性，站点设置完成后需将站点导出：站点/管理站点/导出，C:\\上生成一个 “ .ste”文件，下课前将该文件与C:\\Dreamweaver范例二文件夹一起保存在自己U盘下，下次实验前将该2个文件复制回C盘原来位置。
思考：在Dreamweaver中本机虚拟服务器地址是什么？常用的服务器技术有哪些？为何说对网站文件的管理最好在站点内进行？
3
范例三：熟悉表格和单元格、字幕制作、图片与文字的格式
（1）打开Windows中的画图，图像属性：300×80像素、蓝色背景、然后添上自己姓名；宋体、黄色、26磅大小、居中、将该图像保存为JPG格式、文件名为自己姓名，保存在范例三的images文件夹内。
（2）将Dreamweaver范例三文件夹复制C盘根目录下，启动Dreamweaver，新建站点;“自己姓名+站点2”、站点默认文件夹为Dreamweaver范例三、图片文件夹为images。
（3）文件/新建/空白网页、页面类型/HTML/创建，点击底部的页面属性对话框窗口、设置网页标题为“排版网页”、保存在范例三文件夹内、网页文件名为“index”。 （4）插入1×2的布局表格、宽度900像素、在网页内居中（在表格属性窗口中设置）。按样张在表格中插入两幅图片“8.gif”和 “11.gif”，大小分别为300×80像素和600×80像素，其中将“8.gif”设置为原始图像、前面（1）所做的“自己姓名”图像为鼠标经过图像，将该网页保存为主页，浏览网页、是否切换显示图片“自己姓名.jpg”，见图5-6。
（5）插入2×6表格、框线1、表宽900像素、在网页内居中、在Dreamweaver中，网页的样式一般都要通过CSS样式进行设置，鼠标选择表格，在下方的属性窗口中对该表格单元格做新建/编辑“body table tr td”的CSS规则、框线蓝色，见下图5-7。
图5-6 布局表格设置
图5-7 对表格框线设置颜色的CSS规则
上述的“新建/编辑‘body table tr td’的CSS规则”可对本网页中所有的表格套用设置好的格式，如想按单元格为单位进行格式设置，则可在下方的属性窗口中改选“新建/编辑‘内联样式’的规则”，后续操作则与图5-6所示相同，如此就可对每个单元格进行单独样式设置。
（6）按样张分别输入文字“导航指南”、14磅、幼圆加粗，字体颜色和该单元格颜色参照样张，在右边的单元格中依次插入图片“cata_1”～“cata_5”，适当调整宽度，合并第二行然后插入图片“flowerbar.gif”，拉长，对“文学物语类”按钮设置超链接，当鼠标单击时打开本站点中的“文学.htm”网页。
4
（7）再在花边的下方添加一个2×2表格、框线1、表宽900像素、在网页内居中、（表格分别添置是为了更方便地控制单元格内容的布局）在第一列上单元格内插入图片“01.jpg”、在下单元格插入图片“14.jpg”，合并第二列、背景色#99FFFF、放置“网页介绍”文本；宋体、棕色、段落缩进2字。
（8）添加第四个表格，1×3、样式同上，左单元格图片“12.jpg”、中间图片“02.jpg”。 保存本网页、然后再另存为一个网页（做一个备份）
（9）在右边单元格添加字幕，楷体、36磅、红色、滚动向上，用编写HTML代码的方法来实现该功能：
首先在右单元格内输入文字“欢迎光临！”，光标停留在文字上，在下面单元格属性栏内设置水平对齐为居中，切换CSS样式，目标规
图5-8 单元格属性工具栏与CSS样式属性栏
则为新内联样式，设：楷体、红色、36磅大小，见图5-8，然后切换到代码视图，原代码如下：
〈td width=\楷体'; font-size: 36px;\〉欢迎光临! 〈/td〉注：单元格宽度为298，还有2点像素为左右两根蓝色框线所用，HTML语言前后都要用英文状态下的大于小于号括起，鼠标选定在“欢迎光临！”之前、换行；添加和改动如下：
〈marquee direction=\〉 欢迎光临！ 〈/marquee〉〈/td〉
滚动字幕的HTML代码为〈marquee〉 ****〈/marquee〉 ，中间*号表示要滚动的文字、direction=\表示滚动方向、style=\楷体\表示设置文字颜色用#加3组十六进制数表示、大小用font-size:数字+pt（磅）表示、字体用font-family: *体表示，中间用分号连接，整个style设置前后用双引号括起。
保存后浏览效果、如正常显示向上滚动则在“欢迎光临！”后换行、添加“设计者：自己姓名”、蓝色、18磅。
注意：万一滚动字幕失败并且改不回前一步正确样式，则删除该网页然后将（8）最后复制的备份网页改名为“index.htm”，再复制一份做备份。
思考：表格、单元格的关系，网页中文字、图片的排版主要依靠什么工具？框线的宽度设置为0，此时表格的作用是什么？网页、文字、表格等格式通常靠什么设置？
范例四：网页表单
（1）将Dreamweaver范例四文件夹复制C盘根目录下，启动Dreamweaver，新建站点;“自己姓名+站点3”、站点默认文件夹为Dreamweaver范例四、图片文件夹为images、新建一个空白的网页，保存为“表单.htm”。
（2）在网页中输入第一行文本“企事业单位联合招聘表”，字体“隶书”，蓝色，36磅，并使其居中，网页标题为“联合招聘表”、按样张设置网页背景图片。
5