1、网页设计与制作网页设计与制作任务驱动式教程任务驱动式教程单元单元1 1创建站点与浏览网页创建站点与浏览网页教学环节教学环节【教学导航教学导航】1【操作准备操作准备】2【引导训练引导训练/引导训练考核评价引导训练考核评价】3【同步训练同步训练/同步训练考核评价同步训练考核评价】4【拓展训练拓展训练/拓展训练考核评价拓展训练考核评价】5【教学导航教学导航】教学目标教学目标（1 1）学会创建本地站点和管理本地站点）学会创建本地站点和管理本地站点（2 2）熟悉）熟悉Dreamweaver CS6Dreamweaver CS6的工作界面的工作界面（3 3）熟悉浏览器窗口的基本组成和网页的基本组成元素）熟
2、悉浏览器窗口的基本组成和网页的基本组成元素（4 4）了解网站与网页的相关概念）了解网站与网页的相关概念（5 5）认识网页的基本布局结构）认识网页的基本布局结构（6 6）了解一些制作网页、处理图像、制作动画的工具）了解一些制作网页、处理图像、制作动画的工具 本单元重点本单元重点（1 1）创建本地站点）创建本地站点（2 2）网页的基本组成元素和网页的布局结构）网页的基本组成元素和网页的布局结构 本单元难点本单元难点（1 1）网页的布局结构）网页的布局结构（2 2）网页的基本概念）网页的基本概念 教学方法教学方法 任务驱动法、分组讨论法、四步训练法（操作准备引导训练任务驱动法、分组讨论法、四步训练法
3、（操作准备引导训练同步训练拓展训练）同步训练拓展训练）课时建议课时建议 2课时（含考核评价）课时（含考核评价）【操作准备操作准备】1 1创创建所需的文件建所需的文件夹夹，拷，拷贝贝所需的所需的资资源源 在本地硬盘（例如在本地硬盘（例如D D盘）中创建一个文件夹盘）中创建一个文件夹“网页设计与制作网页设计与制作案例案例”，然后将光盘中的，然后将光盘中的“startstart”文件夹中文件夹中“Unit01Unit01”文件夹及其文件夹及其子文件夹和文件拷贝到该文件夹中。子文件夹和文件拷贝到该文件夹中。2 2启动启动Dreamweaver CS6Dreamweaver CS6 单击单击【开始开始】
4、【程序程序】【Adobe Dreamweaver CS6Adobe Dreamweaver CS6】菜菜单命令即可启动单命令即可启动Dreamweaver CS6Dreamweaver CS6。【引导训练引导训练】【任务任务1-11-1】创建创建“E E游天下游天下”站点并浏览网页站点并浏览网页 本单元本单元“引导训练引导训练”的任务卡如表的任务卡如表1-11-1所示。所示。【引导训练引导训练】创建一个名称为创建一个名称为“E E游天下游天下”的本地站点，站点文件夹为的本地站点，站点文件夹为“Unit01task01-1”Unit01task01-1”。【任务描述任务描述】【任务任务1-1-1
5、1-1-1】创建本地站点创建本地站点“E E游天下游天下”【任务实施任务实施】（1 1）打开）打开【站点设置对象站点设置对象】对话框对话框（2 2）在）在【站点设置对象站点设置对象】对话框中设置本地站点信息对话框中设置本地站点信息（3 3）保存创建的站点）保存创建的站点【引导训练引导训练】（1 1）熟悉）熟悉Dreamweaver CS6Dreamweaver CS6工作界面的基本组成。工作界面的基本组成。（2 2）熟悉）熟悉【文件文件】面板的组成。面板的组成。（3 3）了解）了解Dreamweaver CS6Dreamweaver CS6工作界面各个组成部分的主要工作界面各个组成部分的主要功
6、能。功能。【任务描述任务描述】【任务任务1-1-21-1-2】认识认识Dreamweaver CS6Dreamweaver CS6的工作界面的工作界面 【任务实施任务实施】1 1认识认识Dreamweaver CS6Dreamweaver CS6的标题栏的标题栏 标题栏用于显示网页文档的路径和名称。标题栏用于显示网页文档的路径和名称。2 2认识认识Dreamweaver CS6Dreamweaver CS6的菜单栏的菜单栏 Dreamweaver CS6 Dreamweaver CS6的菜单栏包含的菜单栏包含1010类菜单：文件、编辑、查看、插类菜单：文件、编辑、查看、插入、修改、格式、命令、
7、站点、窗口和帮助。入、修改、格式、命令、站点、窗口和帮助。3 3认识认识Dreamweaver CS6Dreamweaver CS6的的【文档文档】工具栏工具栏 【文档文档】工具栏中包含用于切换文档窗口视图的工具栏中包含用于切换文档窗口视图的“代码代码”、“拆拆分分”、“设计设计”、“实时视图实时视图”按钮和一些常用功能按钮。按钮和一些常用功能按钮。4 4认识认识Dreamweaver CS6Dreamweaver CS6的的【标准标准】工具栏工具栏 【标准标准】工具栏中包含网页文档的基本操作按钮，例如新建、打开、工具栏中包含网页文档的基本操作按钮，例如新建、打开、保存、剪切、复制、粘贴等按钮
8、。保存、剪切、复制、粘贴等按钮。【任务实施任务实施】5 5认识认识Dreamweaver CS6Dreamweaver CS6的的“文档文档”窗口窗口 【文档文档】窗口也称为文档编辑区，该窗口所显示的内容可以是代码、窗口也称为文档编辑区，该窗口所显示的内容可以是代码、网页，或者两者的共同体。用户可以在文档工具栏中单击网页，或者两者的共同体。用户可以在文档工具栏中单击【代码代码】、【拆分拆分】或者或者【设计设计】按钮，切换窗口视图。按钮，切换窗口视图。6 6认识认识Dreamweaver CS6Dreamweaver CS6的的“插入插入”面板面板 利用利用“插入插入”工具栏可以快速插入多种网页
9、元素，例如图像、动画、工具栏可以快速插入多种网页元素，例如图像、动画、表格、表格、DivDiv标签、超级链接、表单和表单控件等。标签、超级链接、表单和表单控件等。7 7认识认识Dreamweaver CS6Dreamweaver CS6的的【属性属性】面板面板 【属性属性】面板用于查看和更改所选取的对象或文本的各种属性，每面板用于查看和更改所选取的对象或文本的各种属性，每个对象有不同的属性。个对象有不同的属性。【属性属性】面板比较灵活，它随着选择对象不同面板比较灵活，它随着选择对象不同而改变，例如当选择一幅图像，而改变，例如当选择一幅图像，【属性属性】面板上将出现该图像的对应面板上将出现该图像
10、的对应属性。如果选择了表格则属性。如果选择了表格则【属性属性】面板会显示对应表格的相关属性。面板会显示对应表格的相关属性。【任务实施任务实施】8 8认识认识Dreamweaver CS6Dreamweaver CS6的面板组的面板组 Dreamweaver CS6 Dreamweaver CS6包括多个面板，这些面板都有不同的功能，将它包括多个面板，这些面板都有不同的功能，将它们叠加在一起便形成了面板组。面板组主要包括们叠加在一起便形成了面板组。面板组主要包括“插入插入”面板、面板、“CSCSS”S”面板、面板、“APAP元素元素”面板、面板、“标签检查器标签检查器”面板、面板、【文件文件】面
11、板、面板、“资源资源”面板和面板和“代码片断代码片断”面板等。面板等。9 9认识认识Dreamweaver CS6Dreamweaver CS6的的【文件文件】面板面板 网站是多个网页、图像、动画、程序等文件有机联系的整体，要有网站是多个网页、图像、动画、程序等文件有机联系的整体，要有效地管理这些文件及其联系，需要有一个有效的工具，效地管理这些文件及其联系，需要有一个有效的工具，【文件文件】面板面板便是这样的工具。便是这样的工具。1010认识认识Dreamweaver CS6Dreamweaver CS6的标签选择器的标签选择器 在文档窗口底部的状态栏中，显示环绕当前选定内容标签的层次结在文档
12、窗口底部的状态栏中，显示环绕当前选定内容标签的层次结构，单击该层次结构中的任何标签，可以选择该标签及网页中对应的构，单击该层次结构中的任何标签，可以选择该标签及网页中对应的内容。内容。【引导训练引导训练】（1 1）启动）启动Dreamweaver CS6Dreamweaver CS6，打开一个网页文档，打开一个网页文档0101.html0101.html。（2 2）浏览网页）浏览网页0101.html0101.html。（3 3）保存对网页）保存对网页0101.html0101.html的修改。的修改。（4 4）关闭网页）关闭网页0101.html0101.html。【任务描述任务描述】【任务
13、任务1-1-31-1-3】打开与保存网页文档打开与保存网页文档0101.html 0101.html【任务实施任务实施】1 1打开网页文档打开网页文档0101.html0101.html2 2浏览网页浏览网页在在Dreamweaver CS6Dreamweaver CS6主窗口中浏览网页的方法有三种：主窗口中浏览网页的方法有三种：（1 1）按）按F12F12快捷键。快捷键。（2 2）选择菜单）选择菜单【文件文件】【在浏览器中预览在浏览器中预览】【IExploreIExplore】。（3 3）单击）单击【文档文档】工具栏中工具栏中【在浏览器中预览在浏览器中预览/调试调试】按钮，在弹出按钮，在弹出
14、的快捷菜单中单击的快捷菜单中单击【预览在预览在IExploreIExplore】按钮。按钮。【任务实施任务实施】3 3保存网页文档保存网页文档 保存网页文档的方法主要有三种：保存网页文档的方法主要有三种：方法一：单击方法一：单击【标准标准】工具栏中的工具栏中的【保存保存】按钮或者按钮或者【全部保存全部保存】按钮。按钮。方法二：在方法二：在Dreamweaver CS6Dreamweaver CS6主窗口的选择命令主窗口的选择命令【文件文件】【保存保存】或者或者【保存全部保存全部】。方法三：按组合键方法三：按组合键“Ctrl+S”Ctrl+S”4 4关闭网页文档关闭网页文档 在在Dreamwea
15、ver CS6Dreamweaver CS6主窗口中，如果需要关闭打开的网页文档，选主窗口中，如果需要关闭打开的网页文档，选择命令择命令【文件文件】【关闭关闭】或者或者【全部关闭全部关闭】即可。如果页面尚未保即可。如果页面尚未保存，则会弹出一个对话框，确认是否保存。存，则会弹出一个对话框，确认是否保存。【引导训练引导训练】（1 1）认识浏览器窗口的基本组成。）认识浏览器窗口的基本组成。（2 2）认识网页的基本组成元素。）认识网页的基本组成元素。（3 3）认识网页的布局结构）认识网页的布局结构【任务描述任务描述】【任务任务1-1-41-1-4】在浏览器中浏览网页在浏览器中浏览网页0101.htm
16、l 0101.html【任务实施任务实施】1 1认识浏览器窗口的基本组成认识浏览器窗口的基本组成 浏览器窗口由网页标题、标准按钮、地址栏、网页和状态栏等部分浏览器窗口由网页标题、标准按钮、地址栏、网页和状态栏等部分组成。组成。2 2认识网页的基本组成元素认识网页的基本组成元素（1 1）文本）文本 文本是网页传递信息的主要元素，不仅传输速度快，而且可以根据文本是网页传递信息的主要元素，不仅传输速度快，而且可以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置，设置得风需要对其字体、大小、颜色、底纹、边框等属性进行设置，设置得风格独特的网页文本会给浏览者带来赏心悦目的感受。格独特的网页文本会给
17、浏览者带来赏心悦目的感受。（2 2）图像）图像 丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为般为jpgjpg格式和格式和gifgif格式，即以格式，即以jpgjpg和和gifgif为扩展名的图像文件。为扩展名的图像文件。【任务实施任务实施】（3 3）动画）动画 动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼球有效方法之一，目前网页中经常使用浏览者眼球有效方法之一，目前网页中经常使用SWFSWF动画和动画和GIFGIF图片。图片。（4 4）超级链接
18、）超级链接 超级链接是超级链接是WebWeb网页的主要特色，是指从一个网页指向另一个目网页的主要特色，是指从一个网页指向另一个目的端的链接。的端的链接。（5 5）导航栏）导航栏 导航栏是一组超链接的集合，用来指引用户跳转到某一页面或内导航栏是一组超链接的集合，用来指引用户跳转到某一页面或内容的链接入口，可以方便地浏览网页。容的链接入口，可以方便地浏览网页。（6 6）表单）表单 表单是用来接收用户在浏览器端输入的信息，然后将这些信息发表单是用来接收用户在浏览器端输入的信息，然后将这些信息发送到服务器端，服务器的程序对数据进行加工处理，这样可以实现一送到服务器端，服务器的程序对数据进行加工处理，这
19、样可以实现一些交互作用的网页。些交互作用的网页。【任务实施任务实施】（7 7）网站的）网站的LogoLogo Logo Logo是网站的标志、名片，例如搜狐网站的狐狸标志，如同商标一样，是网站的标志、名片，例如搜狐网站的狐狸标志，如同商标一样，LogoLogo是网站特色和内涵的集中体现。是网站特色和内涵的集中体现。（8 8）视频）视频 在网页中插入视频文件将会使网页变得更加精彩而富有动感。常用的在网页中插入视频文件将会使网页变得更加精彩而富有动感。常用的视频文件格式有视频文件格式有flvflv、rmrm、aviavi等。等。（9 9）其他元素）其他元素 网页中除了上述这些最基本的构成元素，还包
20、括横幅广告、字幕、计网页中除了上述这些最基本的构成元素，还包括横幅广告、字幕、计数器、音频等其他元素，它们不仅能点缀网页，而且在网页中起到十分数器、音频等其他元素，它们不仅能点缀网页，而且在网页中起到十分重要的作用。重要的作用。【任务实施任务实施】3 3认识网页的布局结构认识网页的布局结构 网站的布局实质上也就是网站的版式，通常有上下型、网站的布局实质上也就是网站的版式，通常有上下型、上中下型、左右型、左中右型等几种，中部通常分为左右上中下型、左右型、左中右型等几种，中部通常分为左右区块、左中右区块等多种布局。如图区块、左中右区块等多种布局。如图1-311-31所示的网页属于所示的网页属于上中
21、下型，其中部分为左右区块，右区块又分为左中右子上中下型，其中部分为左右区块，右区块又分为左中右子区块。区块。目前大部分网站一般使用表格和目前大部分网站一般使用表格和div+CSSdiv+CSS两种方式进行两种方式进行布局。布局。【引导训练考核实战引导训练考核实战】本单元的本单元的“引导训练引导训练”考核评价内容如表考核评价内容如表1-21-2所示。所示。表表1-21-2单元单元1 1“引导训练引导训练”考核评价表考核评价表 【同步训练同步训练】【任务描述任务描述】【任务任务1-21-2】赏析赏析“快乐旅游快乐旅游”网的主页网的主页 本单元本单元“同步训练同步训练”的任务卡如表的任务卡如表1-3
22、1-3所示。所示。【同步训练考核实战同步训练考核实战】本单元的本单元的“同步训练同步训练 ”考核评价内容如表考核评价内容如表1-51-5所示。所示。表表1-51-5单元单元1 1“同步训练同步训练 ”考核评价表考核评价表 【拓展训练拓展训练】【任务描述任务描述】【任务任务1-31-3】赏析赏析“爱旅游爱旅游”网的主页网的主页 本单元本单元“拓展训练拓展训练”的任务卡如表的任务卡如表1-61-6所示。所示。【拓展训练考核实战拓展训练考核实战】本单元的本单元的“拓展训练拓展训练 ”考核评价内容如表考核评价内容如表1-81-8所示。所示。表表1-81-8单元单元1 1“拓展训练拓展训练 ”考核评价表考核评价表 【单元小结单元小结】本单元通过赏析网页，认识了网页和网站、浏览器窗本单元通过赏析网页，认识了网页和网站、浏览器窗口的基本组成、网页的基本组成元素和网页的布局结构，口的基本组成、网页的基本组成元素和网页的布局结构，对制作网页的常用软件和网页的基本概念有了初步了解。对制作网页的常用软件和网页的基本概念有了初步了解。快乐学习、高效学习快乐学习、高效学习
