（任务1）创建“单元1”站点并浏览网课件.pptx

1、网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）网页设计与制作任务驱动教程 （第3版）网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）2单元1 创建站点与浏览网页【任务1-1】创建“单元1”站点并浏览网页网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）3【任务1-1-1】创建本地站点“单元1”创建一个名称为创建一个名称为“单元单元1”的本地站点，站点的本地站点，站点文件夹为文件夹为“Unit01task01-1”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）4在在Dreamweaver

2、CC的主界面中，单击【站点】的主界面中，单击【站点】【新建站点】菜单命令，【新建站点】菜单命令，打开【站点设置对象】对打开【站点设置对象】对话框，如图话框，如图1-3所示。所示。（1 1）打开【站点设置对象】对话框）打开【站点设置对象】对话框图1-3 【站点设置对象】对话框网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）5（2 2）在【站点设置对象】对话框中设）在【站点设置对象】对话框中设置本地站点信息置本地站点信息在【站点设置对象】对话框的在【站点设置对象】对话框的“站点名称站点名称”文本框中输入站点名称文本框中输入站点名称“单元单元1”，在，在“本地本地站点文件夹

3、站点文件夹”文本框中输入完整的路径名称文本框中输入完整的路径名称“D:网页设计与制作案例网页设计与制作案例Unit01”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）6（3 3）保存创建的站点）保存创建的站点在【站点设置对象】对在【站点设置对象】对话框中单击【保存】按钮，话框中单击【保存】按钮，保存创建的站点，更新站点保存创建的站点，更新站点缓存。此时在【文件】面板缓存。此时在【文件】面板中可以看到新创建的本地站中可以看到新创建的本地站点点“单元单元1”中的文件夹和文中的文件夹和文件，如图件，如图1-5所示。所示。图1-5 新创建的本地站点“单元1”中的文件夹和文

4、件网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）7（1）熟悉）熟悉Dreamweaver CC工作界面的基本组成。工作界面的基本组成。（2）熟悉【文件】面板的组成。）熟悉【文件】面板的组成。（3）了解）了解Dreamweaver CC工作界面各个组成部工作界面各个组成部分的主要功能分的主要功能。【任务1-1-2】认识Dreamweaver CC 的工作界面网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）8Dreamweaver CC的工作界面如的工作界面如图图1-6所示所示。图1-6 Dreamweaver CC的界面布局与组成网页设计与制

5、作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）91 1认识Dreamweaver CCDreamweaver CC的标题栏标题栏用于显示网页文档的路径和名称。标题栏用于显示网页文档的路径和名称。2 2认识Dreamweaver CCDreamweaver CC的菜单栏Dreamweaver CC的菜单栏包含的菜单栏包含10类菜单：类菜单：【文件】、【编辑】、【查看】、【插入】、【文件】、【编辑】、【查看】、【插入】、【修改】、【格式】、【命令】、【站点】、【修改】、【格式】、【命令】、【站点】、【窗口】和【帮助】，如图【窗口】和【帮助】，如图1-6所示。所示。网页设计与制作任务

6、驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）103 3认识Dreamweaver CCDreamweaver CC的【文档】工具栏【文档】工具栏中包含用于切换文档窗口视图【文档】工具栏中包含用于切换文档窗口视图的【代码】、【拆分】、【设计】、【实时视图】的【代码】、【拆分】、【设计】、【实时视图】按钮和一些常用功能按钮。按钮和一些常用功能按钮。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）114 4认识Dreamweaver CCDreamweaver CC的【标准】工具栏【标准】工具栏中包含网页文档的基本操作按【标准】工具栏中包含网页文档的基本操作按钮

7、，例如【新建】、【打开】、【保存】、【剪钮，例如【新建】、【打开】、【保存】、【剪切】、【复制】、【粘贴】等按钮，如图切】、【复制】、【粘贴】等按钮，如图1-8所示。所示。图1-8 【标准】工具栏网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）125 5认识Dreamweaver CCDreamweaver CC的“文档”窗口【文档】窗口也称为文档编辑区，该窗口【文档】窗口也称为文档编辑区，该窗口所显示的内容可以是代码、网页，或者两者的所显示的内容可以是代码、网页，或者两者的共同体。共同体。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）13

8、6 6认识Dreamweaver Dreamweaver CCCC 的“插入”面板选择【窗口】选择【窗口】【插入】【插入】命令，在命令，在Dreamweaver CC的主的主界面的右侧面板区域将显示界面的右侧面板区域将显示【插入】面板。通常情况下会【插入】面板。通常情况下会显示【插入】面板之显示【插入】面板之“HTML”类型，如图类型，如图1-10所示所示。图1-10 【插入】面板网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）14在在Dreamweaver CC的的【插入】面板中，单击【插【插入】面板中，单击【插入】面板【模板】按钮，即入】面板【模板】按钮，即可展开

9、可展开“插入插入”工具类型列工具类型列表，如图表，如图1-11所示。所示。图1-11 “插入”工具的类型网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）157 7认识Dreamweaver CCDreamweaver CC的【属性】面板【属性】面板用于查看和更改所选取的对象【属性】面板用于查看和更改所选取的对象或文本的各种属性，每个对象有不同的属性。或文本的各种属性，每个对象有不同的属性。【属性】面板比较灵活，它随着选择对象不同而【属性】面板比较灵活，它随着选择对象不同而改变，例如当选择一幅图像，【属性】面板上将改变，例如当选择一幅图像，【属性】面板上将出现该图像的对

10、应属性，如图出现该图像的对应属性，如图1-13所示。所示。图1-13 【属性】面板网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）16Dreamweaver CC包括多个包括多个面板，这些面板都有不同的功能，面板，这些面板都有不同的功能，将它们叠加在一起便形成了面板将它们叠加在一起便形成了面板组。如图组。如图1-15所示。面板组主要所示。面板组主要包括包括“插入插入”面板、面板、“文件文件”面面板、板、“CSS设计器设计器”面板、面板、“CSS过渡效果过渡效果”面板等。面板等。8 8认识Dreamweaver CCDreamweaver CC的面板组图1-15 面板组

11、与【文件】面板网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）179 9认识Dreamweaver CCDreamweaver CC的【文件】面板网站是多个网页、图像、动画、程序等文网站是多个网页、图像、动画、程序等文件有机联系的整体，要有效地管理这些文件及件有机联系的整体，要有效地管理这些文件及其联系，需要有一个有效的工具，【文件】面其联系，需要有一个有效的工具，【文件】面板便是这样的工具板便是这样的工具。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）18图1-18 【文件】面板【文件】面板的组成如图【文件】面板的组成如图1-18所示，在

12、该面所示，在该面板中显示了当前站点的内容。板中显示了当前站点的内容。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）191010认识Dreamweaver CCDreamweaver CC的标签选择器在文档窗口底部的状态栏中，显示环绕当在文档窗口底部的状态栏中，显示环绕当前选定内容标签的层次结构，单击该层次结构前选定内容标签的层次结构，单击该层次结构中的任何标签，可以选择该标签及网页中对应中的任何标签，可以选择该标签及网页中对应的内容。在标签选择器还可以设置网页的显示的内容。在标签选择器还可以设置网页的显示比例。比例。网页设计与制作任务驱动教程（第网页设计与制作任务驱

13、动教程（第3 3版）版）20【任务1-1-3】打开与保存网页文档 0101.html（1）启动）启动Dreamweaver CC，打开一个，打开一个网页网页 文档文档0101.html。（2）浏览网页）浏览网页0101.html。（3）保存对网页）保存对网页0101.html的修改。的修改。（4）关闭网页）关闭网页0101.html。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）211 1打开网页文档0101.html0101.html在在Dreamweaver CC主窗口中，选择菜单命主窗口中，选择菜单命令【文件】令【文件】【打开】，弹出【打开】对话框，【打开】，

14、弹出【打开】对话框，在【打开】对话框中选择文件夹在【打开】对话框中选择文件夹“task01-1”中中需要打开的网页文档需要打开的网页文档0101.html，然后单击【打，然后单击【打开】按钮即可。开】按钮即可。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）222 2浏览网页在在Dreamweaver CC主窗口中浏览网页的方主窗口中浏览网页的方法有法有2种：种：（1）选择菜单【文件】）选择菜单【文件】【在浏览器中预【在浏览器中预览】览】【Google Chrome】。】。（2）按）按F12快捷键。快捷键。按快捷键按快捷键F12则以则以iexplore浏览方式浏览网页

15、，浏览方式浏览网页，网页网页0101.html浏览效果如图浏览效果如图1-22所示。所示。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）23图1-22 网页0101.html浏览效果网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）243 3保存网页文档保存网页文档的方法主要有三种：保存网页文档的方法主要有三种：方法一：单击【标准】工具栏中的【保存】方法一：单击【标准】工具栏中的【保存】按钮或者【全部保存】按钮。按钮或者【全部保存】按钮。方法二：在方法二：在Dreamweaver CC主窗口的选择主窗口的选择命令【文件】命令【文件】【保存】或

16、者【保存全部】。【保存】或者【保存全部】。方法三：按组合键方法三：按组合键“Ctrl+S”。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）254 4关闭网页文档在在Dreamweaver CC主窗口中，如果需要关主窗口中，如果需要关闭打开的网页文档，选择命令【文件】闭打开的网页文档，选择命令【文件】【关【关闭】或者【全部关闭】即可。如果页面尚未保闭】或者【全部关闭】即可。如果页面尚未保存，则会弹出一个对话框，确认是否保存。存，则会弹出一个对话框，确认是否保存。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）26【任务1-1-4】在浏览器中浏

17、览网页 0101.html（1）认识浏览器窗口的基本组成。）认识浏览器窗口的基本组成。（2）认识网页的基本组成元素。）认识网页的基本组成元素。（3）认识网页的布局）认识网页的布局结构。结构。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）271 1打开网页文档0101.html0101.html在在Dreamweaver CC主窗口中，选择菜单命主窗口中，选择菜单命令【文件】令【文件】【打开】，弹出【打开】对话框，【打开】，弹出【打开】对话框，在【打开】对话框中选择文件夹在【打开】对话框中选择文件夹“task01-1”中中需要打开的网页文档需要打开的网页文档0101.

18、html，然后单击【打，然后单击【打开】按钮即可。开】按钮即可。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）281 1认识浏览器窗口的基本组成浏览器是用户浏览网页的软件，支持多种具浏览器是用户浏览网页的软件，支持多种具有交互性的网络服务，可以显示和播放从有交互性的网络服务，可以显示和播放从Web服服务器中获取网页中的多种信息，是人们通过网络务器中获取网页中的多种信息，是人们通过网络进行交流的主要工具。浏览器窗口通常由网页标进行交流的主要工具。浏览器窗口通常由网页标题、标准按钮、地址栏、网页和状态栏等部分组题、标准按钮、地址栏、网页和状态栏等部分组成，如图成，如图1

19、-23所示。所示。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）29图1-23 浏览器窗口的组成网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）302 2认识网页的基本组成元素网页网页中包含中包含了多种形式的内容，例如文本、了多种形式的内容，例如文本、图像、动画、视频等，如图图像、动画、视频等，如图1-22所示。网页的所示。网页的最终目的是给浏览者显示有价值的信息，并留最终目的是给浏览者显示有价值的信息，并留下深刻的印象。下深刻的印象。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）31图1-24 网页的组成元素网

20、页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）32（1 1）文本）文本文本是网页传递信息的主要元素，不文本是网页传递信息的主要元素，不仅传输速度快，而且可以根据需要对其字仅传输速度快，而且可以根据需要对其字体、大小、颜色、底纹、边框等属性进行体、大小、颜色、底纹、边框等属性进行设置，设置得风格独特的网页文本会给浏设置，设置得风格独特的网页文本会给浏览者带来赏心悦目的感受。览者带来赏心悦目的感受。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）33（2 2）图像）图像丰富多彩的图像是美化网页必不可少的元丰富多彩的图像是美化网页必不可少的元素，用

21、于网页上的图像一般为素，用于网页上的图像一般为jpg格式和格式和gif格格式，即以式，即以jpg和和gif为扩展名的图像文件。为扩展名的图像文件。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）34（3 3）动画）动画动画是网页中最活跃的元素，创意动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼出众、制作精致的动画是吸引浏览者眼球有效方法之一，目前网页中经常使用球有效方法之一，目前网页中经常使用SWF动画和动画和GIF图片。图片。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）35（4 4）超级链接）超级链接超级链接是超级链接

22、是Web网页的主要特色，是指从网页的主要特色，是指从一个网页指向另一个目的端的链接。这个一个网页指向另一个目的端的链接。这个“目目的端的端”通常是另一个网页，但也可以下列情况通常是另一个网页，但也可以下列情况之一：相同网页上的不同位置、一个下载的文之一：相同网页上的不同位置、一个下载的文件、一幅图片、一个件、一幅图片、一个E-mail地址等。超级链接地址等。超级链接可以是文本、按钮或图片，鼠标指向超级链接可以是文本、按钮或图片，鼠标指向超级链接位置时，其指针会变成小手形状。位置时，其指针会变成小手形状。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）36（5 5）导航

23、栏）导航栏导航栏是一组超链接的集合，用来指引用户跳导航栏是一组超链接的集合，用来指引用户跳转到某一页面或内容的链接入口，可以方便地浏览转到某一页面或内容的链接入口，可以方便地浏览网页。网页。（6 6）表单）表单表单是用来接收用户在浏览器端输入的信息，表单是用来接收用户在浏览器端输入的信息，然后将这些信息发送到服务器端，服务器的程序对然后将这些信息发送到服务器端，服务器的程序对数据进行加工处理，这样可以实现一些交互作用的数据进行加工处理，这样可以实现一些交互作用的网页。网页。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）37（7 7）网站的）网站的LogoLogoLo

24、go是网站的标志、名片，例如搜狐网站是网站的标志、名片，例如搜狐网站的狐狸标志，如同商标一样，的狐狸标志，如同商标一样，Logo是网站特色是网站特色和内涵的集中体现。和内涵的集中体现。Logo标志可以是中文、英标志可以是中文、英文字母，也可以是符号、图案，还可以是动物文字母，也可以是符号、图案，还可以是动物或者人物等。或者人物等。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）38（8 8）视频）视频在网页中插入视频文件将会使网页变得更加精在网页中插入视频文件将会使网页变得更加精彩而富有动感。常用的视频文件格式有彩而富有动感。常用的视频文件格式有flv、mp4等。等。（9 9）其他元素）其他元素网页中除了上述这些最基本的构成元素，还包网页中除了上述这些最基本的构成元素，还包括广告、计数器、音频等其他元素，它们不仅能点括广告、计数器、音频等其他元素，它们不仅能点缀网页，而且在网页中起到十分重要的作用。缀网页，而且在网页中起到十分重要的作用。网页设计与制作任务驱动教程（第网页设计与制作任务驱动教程（第3 3版）版）