网页设计与制作任务驱动式实用教程教学课件作者陈承欢教学资源01单元1浏览网页与创建站点1课件.doc

单元1　创建站点与浏览网页 【教学导航】 教学目标 （1）学会创建本地站点和管理本地站点 （2）熟悉Dreamweaver CS6的工作界面 （3）熟悉浏览器窗口的基本组成和网页的基本组成元素 （4）了解网站与网页的相关概念 （5）认识网页的基本布局结构 （6）了解一些制作网页、处理图像、制作动画的工具 本单元重点 （1）创建本地站点 （2）网页的基本组成元素和网页的布局结构 本单元难点 （1）网页的布局结构 （2）网页的基本概念 教学方法 任务驱动法、分组讨论法、四步训练法（操作准备－引导训练－同步训练－拓展训练） 课时建议 2课时（含考核评价） 【操作准备】 1．创建所需的文件夹，拷贝所需的资源 在本地硬盘（例如D盘）中创建一个文件夹“网页设计与制作案例”，然后将光盘中的“start”文件夹中“Unit01”文件夹及其子文件夹和文件拷贝到该文件夹中。 2．启动Dreamweaver CS6 单击【开始】→【程序】→【Adobe Dreamweaver CS6】菜单命令即可启动Dreamweaver CS6。 【引导训练】 【任务1-1】创建“E游天下”站点并浏览网页 本单元“引导训练”的任务卡如表1-1所示。 表1-1　单元1“引导训练”任务卡 任务编号 1-1 任务名称 创建“E游天下”站点并浏览网页 网页主题 E游天下 计划工时 60min 赏析网页任务描述 （1）通过赏析网页认识浏览器窗口的基本组成、认识网页的基本组成元素、认识网页的布局结构 （2）通过分析网页了解网页的相关概念和术语 任务实现流程分析 教师引导赏析网页－学生分组浏览指定的网站，分析网页的结构、色彩和组成元素－教师点评 配盘素材导引 原始文件位置：start\Unit01\task01-1 最终文件位置：result\Unit01\task01-1 【任务1-1-1】创建本地站点“E游天下” 【任务描述】 创建一个名称为“E游天下”的本地站点，站点文件夹为“Unit01\task01-1”。 【任务实施】 （1）打开【站点设置对象】对话框 （2）在【站点设置对象】对话框中设置本地站点信息 （3）保存创建的站点 【任务1-1-2】认识Dreamweaver CS6的工作界面 【任务描述】 （1）熟悉Dreamweaver CS6工作界面的基本组成。 （2）熟悉【文件】面板的组成。 （3）了解Dreamweaver CS6工作界面各个组成部分的主要功能。 【任务实施】 1．认识Dreamweaver CS6的标题栏 标题栏用于显示网页文档的路径和名称。 2．认识Dreamweaver CS6的菜单栏 Dreamweaver CS6的菜单栏包含10类菜单：文件、编辑、查看、插入、修改、格式、命令、站点、窗口和帮助。 3．认识Dreamweaver CS6的【文档】工具栏 【文档】工具栏中包含用于切换文档窗口视图的“代码”、“拆分”、“设计”、“实时视图”按钮和一些常用功能按钮。 4．认识Dreamweaver CS6的【标准】工具栏 【标准】工具栏中包含网页文档的基本操作按钮，例如新建、打开、保存、剪切、复制、粘贴等按钮。 5．认识Dreamweaver CS6的“文档”窗口 【文档】窗口也称为文档编辑区，该窗口所显示的内容可以是代码、网页，或者两者的共同体。用户可以在文档工具栏中单击【代码】、【拆分】或者【设计】按钮，切换窗口视图。 6．认识Dreamweaver CS6的“插入”面板 利用“插入”工具栏可以快速插入多种网页元素，例如图像、动画、表格、Div标签、超级链接、表单和表单控件等。 7．认识Dreamweaver CS6的【属性】面板 【属性】面板用于查看和更改所选取的对象或文本的各种属性，每个对象有不同的属性。【属性】面板比较灵活，它随着选择对象不同而改变，例如当选择一幅图像，【属性】面板上将出现该图像的对应属性。如果选择了表格则【属性】面板会显示对应表格的相关属性。 8．认识Dreamweaver CS6的面板组 Dreamweaver CS6包括多个面板，这些面板都有不同的功能，将它们叠加在一起便形成了面板组。面板组主要包括“插入”面板、“CSS”面板、“AP元素”面板、“标签检查器”面板、【文件】面板、“资源”面板和“代码片断”面板等。 9．认识Dreamweaver CS6的【文件】面板 网站是多个网页、图像、动画、程序等文件有机联系的整体，要有效地管理这些文件及其联系，需要有一个有效的工具，【文件】面板便是这样的工具。 10．认识Dreamweaver CS6的标签选择器 在文档窗口底部的状态栏中，显示环绕当前选定内容标签的层次结构，单击该层次结构中的任何标签，可以选择该标签及网页中对应的内容。 【任务1-1-3