《使用HTML和CSS开发Web网站教学资料》第九章 教案.docVIP

课程名: 使用HTML和CSS开发WEB网站 章节名: 第9章 使用Dreamweaver制作网页 编写 作者：学习 Connect. 1.生活案例 无 2.演示案例 无 3.教学备注 无 本章目标 1.What: 1.熟悉网页制作工具Dreamweaver工作界面 2.掌握在Dreamweaver中如何进行站点管理 3.掌握在Dreamweaver中如何创建和操作各种网页元素 4.掌握在Dreamweaver中如何操作表格和列表 掌握在Dreamweaver中如何操作表单和表单元素 2.Where Why How FAQ Check Connect 1.生活案例 无 2.演示案例 无 3.教学备注 无 Dreamweaver工作界面 what: Dreamweaver是美国M公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。“新建文档”对话框 选择【空白页】，并且【页面类型】为【HTML】，选择【布局】为【无】，单击【创建】将生成空白的HTML网页文档。 Where: Why: ４.How: 5.AQ: 6.check: 7.Connect: 生活案例 上网 演示案例 无 教学备注 无 站点管理 what: 站点是一个网站在由Dreamweaver管理时的本机副本，它表示这个网站内所有资源的集合。Dreamweaver可同时管理多个站点 2.Where: 3.Why: ４.How: 在【文件】面板中单击【管理站点】链接按钮 将弹出【管理站点】对话框 单击【新建】按钮，在菜单中选择【站点】命令，将弹出【站点定义】向导对话框， 在【您打算为您的站点起什么名字？】下方的文本框输入你想要的站点名称，如“我的站点”，站点的URL暂时不需要填写。单击【下一步】按钮，进入站点定义第二部分 在【您是否打算使用服务器技术？】下方的单选按钮组中，选择默认的第一项【否，我不想使用服务器技术。】，单击【下一步】按钮，进入站点定义第三部分 在【在开发过程中，您打算如何使用您的文件？】下方的单选按钮组中，选择默认的第一项【编辑我的计算机上的本地副本，完成后再上传到服务器】，在文件存储位置文本框中，输入事先新建的站点根文件夹的路径，如【D:\My Documents\MySite\】，单击【下一步】按钮，进入站点定义共享文件 在【您如何连接到远程服务器？】下方的列表框中选择第一项【无】，单击【下一步】按钮，进入站点定义总结。 单击【完成】按钮。此时，将回到【管理站点】对话框 单击【完成】按钮。此时可在【文件】面板中看到刚刚创建的站点【我的站点】及它的目录。 如果在站点根文件夹即【D:\My Documents\MySite\】中存在子文件夹或文件，在【文件】面板中可以看到站点的目录结构 也可以在【文件】面板中直接新建文件或文件夹。在站点名称上单击右键，执行【新建文件】或【新建文件夹】即可。在此新建【index.html】页面和【styles】文件夹，并选中【1.html】页面按【del】键将其删除。 查看站点根文件夹【D:\My Documents\MySite】 5.AQ: 6.check: 7.Connect: 1.生活案例 无 2.演示案例 无 3.教学备注 无 创建和操作各种网页元素 what: 2.Where: 3.Why: ４.How: 在【插入】面板中，提供一系列按钮，用于向网页中添加常见的页面元素 插入图片： 超链接： 5.AQ: 6.check: 7.Connect: 1.生活案例 无 2.演示案例 无 3.教学备注 无 操作表格和列表 what: 列表： 要创建列表，可先在文档中输入作为列表项目的多个段落，将这些段落选中，单击【属性】面板中的【项目列表】或【编号列表】按钮，这样可将这些选中的段落创建为无序列表或有序列表 2.Where: 3.Why: ４.How: 列表： 表格： 单击【插入】面板中的【表格】按钮，弹出【表格】对话框 可在插入的表格中，点击右键可使用合并行，合并列等属性 5.AQ: 6.check: 7.Connect: 1.生活案例 无 2.演示案例 无 3.教学备注 无 操作表单和表单元素 what: 使用【插入】面板中的【表单】选项卡 2.Where: 3.Why: ４.How: 5.AQ: 6.check: 7.Connect: 1.生活案例 无 2.演示案例 演示如下示例 3.教学备注 无 总结 what: Dreamweaver是业界被广泛使用的站点管理和页面制作的可视化工具。