【任务1】创建“单元1”站点并浏览网页课件

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

2、路径名称“D:网页设计与制作案例Unit01”。6（3）保存创建的站点在【站点设置对象】对话框中单击【保存】按钮，保存创建的站点，更新站点缓存。此时在【文件】面板中可以看到新创建的本地站点“单元1”中的文件夹和文件，如图1-5所示。图1-5 新创建的本地站点“单元1”中的文件夹和文件7【任务描述】（1）熟悉Dreamweaver CC工作界面的基本组成。（2）熟悉【文件】面板的组成。（3）了解Dreamweaver CC工作界面各个组成部分的主要功能。【任务1-1-2】认识Dreamweaver CC 的工作界面8【任务实施】Dreamweaver CC的工作界面如图1-6所示。图1-6 Dr

3、eamweaver CC的界面布局与组成91认识Dreamweaver CC的标题栏标题栏用于显示网页文档的路径和名称。2认识Dreamweaver CC的菜单栏Dreamweaver CC的菜单栏包含10类菜单：【文件】、【编辑】、【查看】、【插入】、【修改】、【格式】、【命令】、【站点】、【窗口】和【帮助】，如图1-6所示。103认识Dreamweaver CC的【文档】工具栏【文档】工具栏中包含用于切换文档窗口视图的【代码】、【拆分】、【设计】、【实时视图】按钮和一些常用功能按钮。114认识Dreamweaver CC的【标准】工具栏【标准】工具栏中包含网页文档的基本操作按钮，例如【新建

4、】、【打开】、【保存】、【剪切】、【复制】、【粘贴】等按钮，如图1-8所示。图1-8 【标准】工具栏125认识Dreamweaver CC的“文档”窗口【文档】窗口也称为文档编辑区，该窗口所显示的内容可以是代码、网页，或者两者的共同体。136认识Dreamweaver CC 的“插入”面板选择【窗口】【插入】命令，在Dreamweaver CC的主界面的右侧面板区域将显示【插入】面板。通常情况下会显示【插入】面板之“HTML”类型，如图1-10所示。图1-10 【插入】面板14在Dreamweaver CC的【插入】面板中，单击【插入】面板【模板】按钮，即可展开“插入”工具类型列表，如图1-1

5、1所示。图1-11 “插入”工具的类型157认识Dreamweaver CC的【属性】面板【属性】面板用于查看和更改所选取的对象或文本的各种属性，每个对象有不同的属性。【属性】面板比较灵活，它随着选择对象不同而改变，例如当选择一幅图像，【属性】面板上将出现该图像的对应属性，如图1-13所示。图1-13 【属性】面板16Dreamweaver CC包括多个面板，这些面板都有不同的功能，将它们叠加在一起便形成了面板组。如图1-15所示。面板组主要包括“插入”面板、“文件”面板、“CSS设计器”面板、“CSS过渡效果”面板等。8认识Dreamweaver CC的面板组图1-15 面板组与【文件】面板

6、179认识Dreamweaver CC的【文件】面板网站是多个网页、图像、动画、程序等文件有机联系的整体，要有效地管理这些文件及其联系，需要有一个有效的工具，【文件】面板便是这样的工具。18图1-18 【文件】面板【文件】面板的组成如图1-18所示，在该面板中显示了当前站点的内容。1910认识Dreamweaver CC的标签选择器在文档窗口底部的状态栏中，显示环绕当前选定内容标签的层次结构，单击该层次结构中的任何标签，可以选择该标签及网页中对应的内容。在标签选择器还可以设置网页的显示比例。20【任务描述】【任务1-1-3】打开与保存网页文档 0101.html（1）启动Dreamweaver

7、 CC，打开一个网页 文档0101.html。（2）浏览网页0101.html。（3）保存对网页0101.html的修改。（4）关闭网页0101.html。21【任务实施】1打开网页文档0101.html在Dreamweaver CC主窗口中，选择菜单命令【文件】【打开】，弹出【打开】对话框，在【打开】对话框中选择文件夹“task01-1”中需要打开的网页文档0101.html，然后单击【打开】按钮即可。222浏览网页在Dreamweaver CC主窗口中浏览网页的方法有2种：（1）选择菜单【文件】【在浏览器中预览】【Google Chrome】。（2）按F12快捷键。按快捷键F12则以iex

8、plore浏览方式浏览网页，网页0101.html浏览效果如图1-22所示。23图1-22 网页0101.html浏览效果243保存网页文档保存网页文档的方法主要有三种：方法一：单击【标准】工具栏中的【保存】按钮或者【全部保存】按钮。方法二：在Dreamweaver CC主窗口的选择命令【文件】【保存】或者【保存全部】。方法三：按组合键“Ctrl+S”。254关闭网页文档在Dreamweaver CC主窗口中，如果需要关闭打开的网页文档，选择命令【文件】【关闭】或者【全部关闭】即可。如果页面尚未保存，则会弹出一个对话框，确认是否保存。26【任务描述】【任务1-1-4】在浏览器中浏览网页 010

9、1.html（1）认识浏览器窗口的基本组成。（2）认识网页的基本组成元素。（3）认识网页的布局结构。27【任务实施】1打开网页文档0101.html在Dreamweaver CC主窗口中，选择菜单命令【文件】【打开】，弹出【打开】对话框，在【打开】对话框中选择文件夹“task01-1”中需要打开的网页文档0101.html，然后单击【打开】按钮即可。281认识浏览器窗口的基本组成浏览器是用户浏览网页的软件，支持多种具有交互性的网络服务，可以显示和播放从Web服务器中获取网页中的多种信息，是人们通过网络进行交流的主要工具。浏览器窗口通常由网页标题、标准按钮、地址栏、网页和状态栏等部分组成，如图1

10、-23所示。29图1-23 浏览器窗口的组成302认识网页的基本组成元素网页中包含了多种形式的内容，例如文本、图像、动画、视频等，如图1-22所示。网页的最终目的是给浏览者显示有价值的信息，并留下深刻的印象。31图1-24 网页的组成元素32（1）文本文本是网页传递信息的主要元素，不仅传输速度快，而且可以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置，设置得风格独特的网页文本会给浏览者带来赏心悦目的感受。33（2）图像丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为jpg格式和gif格式，即以jpg和gif为扩展名的图像文件。34（3）动画动画是网页中最活跃的元素，创意出

11、众、制作精致的动画是吸引浏览者眼球有效方法之一，目前网页中经常使用SWF动画和GIF图片。35（4）超级链接超级链接是Web网页的主要特色，是指从一个网页指向另一个目的端的链接。这个“目的端”通常是另一个网页，但也可以下列情况之一：相同网页上的不同位置、一个下载的文件、一幅图片、一个E-mail地址等。超级链接可以是文本、按钮或图片，鼠标指向超级链接位置时，其指针会变成小手形状。36（5）导航栏导航栏是一组超链接的集合，用来指引用户跳转到某一页面或内容的链接入口，可以方便地浏览网页。（6）表单表单是用来接收用户在浏览器端输入的信息，然后将这些信息发送到服务器端，服务器的程序对数据进行加工处理，这样可以实现一些交互作用的网页。37（7）网站的LogoLogo是网站的标志、名片，例如搜狐网站的狐狸标志，如同商标一样，Logo是网站特色和内