【模仿训练】

任务1.1 创建北京大学网站站点并浏览网页

本单元“模仿训练”的任务卡如表1.1所示。

本单元“模仿训练”的任务跟踪卡如表1.2所示。

任务1.1.1 分析北京大学站点的目录结构

微课视频

分析北京大学站点的目录结构

〖任务描述〗

（1）利用提供的资源，分析北京大学站点的目录结构和组成元素。

（2）了解网站与网页的相关概念。

〖任务实施〗

如图1-28所示。

任务1.1.2 赏析北京大学网站的首页、列表页和详情页

微课视频

赏析北京大学网站的首页、列表页和详情页

（1）利用百度网站搜索“北京大学”及有关学校的网站，通过赏析这些页站的首页（index.html）、列表页（list.html）、二级页面和详情页（content.html）、三级页面认识浏览器窗口的基本组成，认识网页的基本组成元素，认识网页的布局结构。

〖任务描述〗

（2）通过赏析经典页面，对网页的构成形成初步印象。

（3）通过分析网页，了解网页的相关概念和术语。

（4）从所浏览的网站中筛选出两个优秀的网站，书写网页赏析报告。

〖任务实施〗

如图1-29～图1-31所示。

任务1.1.3 创建北京大学网站的本地站点

微课视频

创建北京大学网站的本地站点

〖任务描述〗

创建一个名为“北京大学”的本地站点，如图1-32所示。

〖任务实施〗

任务实施步骤参见本单元【预备知识】中“使用Dreamweaver的向导创建本地站点”方法。

建议使用“记事本”手写代码的方法书写网页和创建站点。

【注意】 在实际工作中站点、文件夹和网页文件名称不能以中文命名。

任务1.1.4 认识Dreamweaver的工作界面

微课视频

认识Dreamweaver的工作界面3

〖任务描述〗

（1）了解Dreamweaver工作界面的基本组成。

（2）了解【文件】面板的组成。

（3）了解Dreamweaver 工作界面各个组成部分的主要功能。

〖任务实施〗

如图1-33所示。

1.认识Dreamweaver 的标题栏

标题栏用于显示网页文档的路径和名称。

2.认识Dreamweaver的菜单栏

Dreamweaver 的菜单栏包含10类菜单：文件、编辑、查看、插入、修改、格式、命令、站点、窗口和帮助。

3.认识Dreamweaver的【文档】工具栏

【文档】工具栏中包含用于切换文档窗口视图的“代码”“拆分”“设计”“实时视图”按钮和一些常用功能按钮。

4.认识Dreamweaver的【标准】工具栏

【标准】工具栏中包含网页文档的基本操作按钮，如新建、打开、保存、剪切、复制、粘贴等按钮。

5.认识Dreamweaver的“文档”窗口

【文档】窗口也称为文档编辑区，该窗口所显示的内容可以是代码、网页，或者两者的共同体。用户可以在文档工具栏中单击【代码】【拆分】或者【设计】按钮，切换窗口视图。

6.认识Dreamweaver的“插入”面板

利用“插入”工具栏可以快速插入多种网页元素，例如图像、动画、表格、DIV 标签、超级链接、表单和表单控件等。

7.认识Dreamweaver的【属性】面板

【属性】面板用于查看和更改所选取的对象或文本的各种属性，每个对象有不同的属性。【属性】面板比较灵活，它随着选择对象不同而改变，例如当选择一幅图像，【属性】面板上将出现该图像的对应属性。如果选择了表格则【属性】面板会显示对应表格的相关属性。

8.认识Dreamweaver的面板组

Dreamweaver包括多个面板，这些面板都有不同的功能，将它们叠加在一起便形成了面板组。面板组主要包括【插入】面板、【CSS】面板、【AP元素】面板、【标签检查器】面板、【文件】面板、【资源】面板和【代码片断】面板等。

9.认识Dreamweaver的【文件】面板

网站是多个网页、图像、动画、程序等文件有机联系的整体，要有效地管理这些文件及其联系，需要有一个有效的工具，【文件】面板便是这样的工具。

10.认识Dreamweaver的标签选择器

在文档窗口底部的状态栏中，显示环绕当前选定内容标签的层次结构，单击该层次结构中的任何标签，可以选择该标签及网页中对应的内容。

任务1.1.5 打开与保存网页文档index.html

微课视频

打开与保存网页文档index

〖任务描述〗

（1）启动Dreamweaver，打开一个网页文档index.html。

（2）浏览网页index.html。

（3）保存对网页index.html的修改。

（4）关闭网页index.html。

〖任务实施〗

1.打开网页文档index.html

2.浏览网页

在Dreamweaver主窗口中浏览网页的方法有以下3种。

（1）按＜F12＞快捷键。

（2）选择菜单【文件】→【在浏览器中预览】→【IExplore】。

（3）单击【文档】工具栏中【在浏览器中预览/调试】按钮，在弹出的快捷菜单中单击【预览在IExplore】按钮。

3.保存网页文档

保存网页文档的方法主要有以下3种。

（1）单击【标准】工具栏中的【保存】按钮或者【全部保存】按钮。

（2）在Dreamweaver主窗口的选择命令【文件】→【保存】或者【保存全部】。

（3）按组合键＜Ctrl+S＞。

4.关闭网页文档

在 Dreamweaver 主窗口中，如果需要关闭打开的网页文档，选择命令【文件】→【关闭】或者【全部关闭】即可。如果页面尚未保存，则会弹出一个对话框，确认是否保存。

任务1.1.6 在浏览器中浏览网页index.html

微课视频

在浏览器中浏览网页index

〖任务描述〗

（1）认识浏览器窗口的基本组成。

（2）认识网页的基本组成元素。

（3）认识网页的布局结构。

〖任务实施〗

1.认识浏览器窗口的基本组成

浏览器窗口由网页标题、标准按钮、地址栏、网页和状态栏等部分组成。

2.认识网页的基本组成元素

（1）文本。

文本是网页传递信息的主要元素，不仅传输速度快，而且可以根据需要对其字体、大小、颜色、底纹、边框等属性进行设置，设置得风格独特的网页文本会给浏览者带来赏心悦目的感受。

（2）图像。

丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为JPG格式和GIF格式，即以.jpg和.gif为扩展名的图像文件。

（3）动画。

动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼球有效方法之一，目前网页中经常使用SWF动画和GIF图片。

（4）超级链接。

超级链接是Web网页的主要特色，是指从一个网页指向另一个目的端的链接。

（5）导航栏。

导航栏是一组超链接的集合，用来指引用户跳转到某一页面或内容的链接入口，可方便地浏览网页。

（6）表单。

表单是用来接收用户在浏览器端输入的信息，然后将这些信息发送到服务器端，服务器的程序对数据进行加工处理，这样可以实现一些交互作用的网页。

（7）网站的Logo。

Logo是网站的标志、名片，例如搜狐网站的狐狸标志。如同商标一样，Logo是网站特色和内涵的集中体现。

（8）视频。

在网页中插入视频文件将会使网页变得更加精彩而富有动感。常用的视频文件格式有FLV、RM、AVI等。

（9）其他元素。

网页中除了上述这些最基本的构成元素，还包括横幅广告、字幕、计数器、音频等其他元素，它们不仅能点缀网页，而且在网页中起到十分重要的作用。

3.认识网页的布局结构

网站的布局实质上也就是网站的版式，通常有上下型、上中下型、左右型、左中右型等几种，中部通常分为左右区块、左中右区块等多种布局。

目前，大部分网站一般使用表格和DIV+CSS两种方式进行布局。