网页设计与制作任务驱动式教程教学全套课件第2版 陈承欢 电子课件 01单元1创建站点与浏览网页.ppt

《网页设计与制作任务驱动式教程教学全套课件第2版 陈承欢 电子课件 01单元1创建站点与浏览网页.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计与制作任务驱动式教程单元1创建站点与浏览网页教学环节【教学导航】1【操作准备】2【引导训练/引导训练考核评价】3【同步训练/同步训练考核评价】4【拓展训练/拓展训练考核评价】5【教学导航】教学目标（1）学会创建本地站点和管理本地站点（2）熟悉DreamweaverCS6的工作界面（3）熟悉浏览器窗口的基本组成和网页的基本组成元素（4）了解网站与网页的相关概念（5）认识网页的基本布局结构（6）了解一些制作网页、处理图像、制作动画的工具本单元重点（1）创建本地站点（2）网页的基本组成元素和网页的布局结构本单元难点（1

2、）网页的布局结构（2）网页的基本概念教学方法任务驱动法、分组讨论法、四步训练法（操作准备－引导训练－同步训练－拓展训练）课时建议2课时（含考核评价）【操作准备】1．创建所需的文件夹，拷贝所需的资源在本地硬盘（例如D盘）中创建一个文件夹“网页设计与制作案例”，然后将光盘中的“start”文件夹中“Unit01”文件夹及其子文件夹和文件拷贝到该文件夹中。2．启动DreamweaverCS6单击【开始】→【程序】→【AdobeDreamweaverCS6】菜单命令即可启动DreamweaverCS6。【引导训练】【任务1-1】

3、创建“E游天下”站点并浏览网页本单元“引导训练”的任务卡如表1-1所示。【引导训练】创建一个名称为“E游天下”的本地站点，站点文件夹为“Unit01task01-1”。【任务描述】【任务1-1-1】创建本地站点“E游天下”【任务实施】（1）打开【站点设置对象】对话框（2）在【站点设置对象】对话框中设置本地站点信息（3）保存创建的站点【引导训练】（1）熟悉DreamweaverCS6工作界面的基本组成。（2）熟悉【文件】面板的组成。（3）了解DreamweaverCS6工作界面各个组成部分的主要功能。【任务描述】【任务1

4、-1-2】认识DreamweaverCS6的工作界面【任务实施】1．认识DreamweaverCS6的标题栏标题栏用于显示网页文档的路径和名称。2．认识DreamweaverCS6的菜单栏DreamweaverCS6的菜单栏包含10类菜单：文件、编辑、查看、插入、修改、格式、命令、站点、窗口和帮助。3．认识DreamweaverCS6的【文档】工具栏【文档】工具栏中包含用于切换文档窗口视图的“代码”、“拆分”、“设计”、“实时视图”按钮和一些常用功能按钮。4．认识DreamweaverCS6的【标准】工具栏【标准】工具栏

5、中包含网页文档的基本操作按钮，例如新建、打开、保存、剪切、复制、粘贴等按钮。【任务实施】5．认识DreamweaverCS6的“文档”窗口【文档】窗口也称为文档编辑区，该窗口所显示的内容可以是代码、网页，或者两者的共同体。用户可以在文档工具栏中单击【代码】、【拆分】或者【设计】按钮，切换窗口视图。6．认识DreamweaverCS6的“插入”面板利用“插入”工具栏可以快速插入多种网页元素，例如图像、动画、表格、Div标签、超级链接、表单和表单控件等。7．认识DreamweaverCS6的【属性】面板【属性】面板用于查看和

6、更改所选取的对象或文本的各种属性，每个对象有不同的属性。【属性】面板比较灵活，它随着选择对象不同而改变，例如当选择一幅图像，【属性】面板上将出现该图像的对应属性。如果选择了表格则【属性】面板会显示对应表格的相关属性。【任务实施】8．认识DreamweaverCS6的面板组DreamweaverCS6包括多个面板，这些面板都有不同的功能，将它们叠加在一起便形成了面板组。面板组主要包括“插入”面板、“CSS”面板、“AP元素”面板、“标签检查器”面板、【文件】面板、“资源”面板和“代码片断”面板等。9．认识Dreamweav

7、erCS6的【文件】面板网站是多个网页、图像、动画、程序等文件有机联系的整体，要有效地管理这些文件及其联系，需要有一个有效的工具，【文件】面板便是这样的工具。10．认识DreamweaverCS6的标签选择器在文档窗口底部的状态栏中，显示环绕当前选定内容标签的层次结构，单击该层次结构中的任何标签，可以选择该标签及网页中对应的内容。【引导训练】（1）启动DreamweaverCS6，打开一个网页文档0101.html。（2）浏览网页0101.html。（3）保存对网页0101.html的修改。（4）关闭网页0101.htm

8、l。【任务描述】【任务1-1-3】打开与保存网页文档0101.html【任务实施】1．打开网页文档0101.html2．浏览网页在DreamweaverCS6主窗口中浏览网页的方法有三种：（1）按F12快捷键。（2）选择菜单【文件】→【在浏览器中预览】→【IExplore】。（3）单击【文档】工具栏中【在浏览器中预览