4-网页制作(DW)实验.docVIP

实验五：Web制作—Dreamweaver 5.1 实验目的 了解DreamweaverCS4中，超文本标记语言HTML用于网页结构设计的概念。 了解CSS层叠样式表用于网页样式应用的概念。 了解JS（Javascript）用于网页行为的调用的概念。 掌握超文本标记语言HTML与网页的关系、熟悉最基本的HTML语言。 掌握HTML网页的基本设置、代码的基本应用。 掌握用表格、单元格和DIV（层）对网页进行布局的方式设计网页。 掌握各类超链接：文字、图片（图片包含热点）、书签、电子邮件的超链接。 掌握多媒体网页的制作、动画、图片、视频、声音的设置。 掌握网页中动态效果的制作以及背景图片、音乐的设置。 掌握框架网页的设计。 掌握表单技术：单行文本框、下拉菜单、单选按钮、复选框、文本区、提交和重置。 掌握网页设计中层的应用、行为设置、网页特效的应用。 掌握站点的建设、调试和发布。 5.2 实验范例 范例一：熟悉 Hypertext Markup Language （1）简单网页的制作：将Dreamweaver范例一文件夹放置在桌面上，应用记事本软件打开“我的第一张网页”文件，输入下述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〉〈!—--〉〈SMALL〉〈/SMALL〉〈BIG〉〈/BIG〉〈table border=1 width=% id=table1〉〈!—--〉〈tr〉〈!—--〉〈td width=〉〈!—--〉〈〉〈/〉 〈〉〈/〉 〈〉〈/〉 〈〉〈/〉 〈〉〈/〉 〈〉〈/〉〈td〉〈!—--〉 〈p align=center〉〈!—--〉〈!—--〉〈!—--〉〈/tr〉〈!—--〉〈/table〉〈!—--〉〈!—--〉〈FONT SIZE=6 COLOR=red〉〈/FONT〉 〈FONT SIZE=+3 COLOR=#0000FF〉〈/FONT〉 〈/BODY〉〈!--HTML--〉〈/HTML〉〈!--HTML--〉HTML（Hyper Text Markup Language ）即超文本标记语言，是 WWW 的描述语言，结构头部主体两大部分（1）将Dreamweaver范例二文件夹移到C盘根目录下，打开Dreamweaver，菜单/站点/新建站点：在对话框内选择高级、网站名为自己姓名+站点1（如图中的王小小站点1）、本地根文件夹为范例二文件夹、默认图像文件夹为范例二文件夹内的images文件夹、在URL地址中输入默认本机虚拟服务器地址http://localhost 或 、启用缓存，确定。见图5-2。 （2）调试一：设置服务器 在高级/分类/选择远程信息，由于将本机作为虚拟远程服务器，故在远程信息中选择/本地网络，见图5-3 设置服务器，远端文件夹是指站点文件存放的文件夹，所以这里为C:\Dreamweaver范例二文件夹、维护同步信息与保存时自动上传：自动更新文件列表。 （3）调试二：测试服务器一 在高级/分类/选择测试服务器，如需创建动态网页，就必须指定想使用服务器技术，这里建议使用/ASP VBscript，访问本地/网络。 测试服务器文件位置：C:\Dreamweaver范例二文件夹，使用自己现在所用的计算机默认URL来测试站点，如：http://localhost。 确定/完成，见图5-4 测试服务器一。 （4）调试三：测试服务器二 在Dreamweaver右下站点任务窗格中分别选择本地、远程和测试服务器并在测试服务器任务窗格中点击刷新按钮 、如站点设置正常则显示后台文件活动正常对话框，且站点文件夹显示红色，见图5-5 测试服务器二。 （5）在菜单/站点/管理站点对话框中可以对站点进行编辑、上传和删除。 （6）网页和站点其他文件均建立、放置在该站点中，images文件夹仅仅放置图片文件，站点中对文件的管理也须在其中进行，如选中站点中某个文件后/快捷菜单/编辑/可以复制、剪切、粘贴、删除、重命名，然后可以在其中检查链接。 （7）因机房内计算机硬盘被保护，为保证以后实验的延续性，站点设置完成后需将站点导出：站点/管理站点/导出，C:\上生成一个 “ .ste”文件，下课前将该文件与C:\Dreamweaver范例二文件夹一起保存在自己U盘下，下次实验前将该2个文件复制回C盘原来位置。 思考：在Dreamweaver中本