《网页制作》课件-项目一 认识Dreamweaver 8

Dreamweaver8中文版

网页制作基础项目一认识Dreamweaver8任务一案例赏析任务二了解Dreamweaver8任务三制作一个简单的网页实训制作“送孟浩然之广陵”网页本项目主要是让读者对网页制作软件Dreamweaver8有一个总体认识。首先欣赏一些优秀案例，然后学习Dreamweaver8的功能和作用，最后通过制作一个简单的网页来认识Dreamweaver8的工作界面，并学习常用工具栏和面板的基本使用方法。

任务一案例赏析

下面来欣赏几个优秀网页，希望通过欣赏，读者能够增强对网页设计与制作的兴趣。1、北京大学主页2、海信集团主页3、网易主页4、百度主页结构清晰、布局简洁，充分结合了现代教育理念，将学习与网络合理地进行了整合，实现了教学对象广泛、使用方便、时间自由以及节约成本等特点。1、北京大学主页从内容上看，其注重宣传企业的品牌和形象以及产品和服务。从结构上看，页面比较简洁，内容布局合理，值得学习和借鉴。

2、海信集团主页其内容丰富，门类众多。主体部分的布局模式采用的是左右两栏结构，这也是一种常用的网页布局模式。由于门户网站众多的栏目和内容，因此，在设计网页时合理地划分栏目结构是非常重要的一项工作。

3、网易主页页面比较简洁，除了网站标志和页脚信息，主体部分只有简单的一行文字和一些表单域。读者在学习网页制作时，百度这种典雅的用户界面设计是值得借鉴的。4、百度主页任务二了解Dreamweaver8

1、基本概况

Dreamweaver是美国Macromedia公司（1984年成立于美国芝加哥，2005年被Adobe公司并购）开发的集网页制作和网站管理于一身的所见即所得式网页编辑器，是针对专业网页设计师而设计的视觉化网页开发工具，它可以让设计师轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。由Macromedia公司开发的Dreamweaver与Flash、Fireworks一起被称为网页三剑客，在Macromedia公司被Adobe公司并购后，2007年由Adobe公司发布的网页三剑客是指Dreamweaver、Flash和Photoshop。

2、优点对于初学者来说，Deamweaver的可视化效果让用户比较容易入门，具体表现在两个方面：一是静态页面的编排，这和MicrosoftOffice等办公可视化软件是类似的；二是交互式网页的制作，这是它与其他网页制作软件不同的重要特征。利用Deamweaver8可以比较容易地制作交互式网页，很容易链接到Access、SQLServer等数据库。

3、应用领域

Dreamweaver集建立站点、布局网页、开发应用程序、编辑代码和发布网站等功能于一体，可轻松地完成网站开发的所有工作，因此，在各个行业领域都得到了广泛的应用，如个人网站、教育科研网站、企业网站、商业网站、政府网站、公益性网站以及其他网站等。任务三制作一个简单的网页（一）定义站点（二）创建和保存文件（三）设置文本属性（四）保存工作区布局（一）定义站点需要掌握的内容主要有：

1、【起始页】对话框的构成和作用

2、定义静态站点的基本过程1、【起始页】对话框的构成和作用

其中有三项列表：【打开最近项目】、【创建新项目】和【从范例创建】。2、定义静态站点的基本过程(二）创建和保存文件

需要掌握的内容主要有：

1、创建文件的方法

2、保存文件的方法

3、Dreamweaver8窗口界面

4、浮动面板组

5、【标准】工具栏

6、【文件】面板1、创建文件的方法在【起始页】对话框创建文件的基本方法是，单击【创建新项目】／【HTML】命令，创建一个空白的HTML文档。2、保存文件的方法

（1）单击【标准】工具栏中的【保存】按钮保存文件。（2）选择主菜单中的【文件】/【保存】命令或【另存为】命令保存文件。3、Dreamweaver8窗口界面4、浮动面板组在Dreamweaver8窗口中的工具栏或各种面板，可以通过鼠标操作将它们从窗口中脱离出来成为浮动工具栏或面板。浮动面板的显示与隐藏命令都集中在主菜单栏中的【窗口】菜单中。5、【标准】工具栏选择主菜单中的【查看】／【工具栏】／【标准】命令显示【标准】工具栏。6、【文件】面板（三）设置文本属性

需要掌握的内容主要有：

1、【文档】工具栏

2、【属性】面板

3、【插入】面板

4、水平线及其属性设置

1、【文档】工具栏

（1）单击【设计】按钮将编辑区域切换到【设计】视图，在其中可以对网页进行编辑。（2）单击【代码】按钮，可以将编辑区域切换到【代码】视图，在其中可以编写或修改网页源代码。（3）单击【拆分】按钮，可以将编辑区域切换到【拆分】视图，在该视图中整个编辑区域分为上下两个部分，上方为【代码】视图，下方为【设计】视图。2、【属性】面板

如果没有显示【属性】面板，在主菜单中选择【窗口】／【属性】命令即可显示。3、【插入】面板

【插入】面板通常有两种表现形式：制表符格式和菜单格式。4、水平线及其属性设置在【插入】/【HTML】面板中单击（水平线）按钮，或在主菜单中选择【插入】/【HTML】/【水平线】命令插入一条水平线。（四）保存工作区布局

1、掌握保存工作区布局的方法

在主菜单栏中选择【窗口】／【工作区布局】／【保存当前】命令。

2、掌握管理工作区布局的方法

在主菜单中选择【窗口】／【工作区布局】／【管理】命令。实训制作“送孟浩然之广陵”网页下面通过实训来增强读者对Dreamweaver8窗口的组成、工具栏和面板的功能及基本操作的感性认识。要求：首先定义一个静态站点，然后创建和编排网页文档。制作