第1章 初识Dreamweaver CS5

第一课：网页设计基础一、网站的概述1、网页与网站浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了一个网站。

举例： (搜狐网) (百度网) (优酷网)等等。

2、浏览网页的工具-浏览器浏览器：用于打开显示网页的软件。

最常见的是Windows系统自带的IE浏览器。

还有火狐Firefox、360安全浏览器、遨游、腾讯TT等等。

1）网址：用于定位某个网站某个页面的一串字符，通常是这种格式/nba.shtml2）主页：访问网站时，默认打开的第一个页面就是主页也叫首页。

3、认识网页的组成元素文本视频网页标题LOGO导航栏超级链接表单图片二、初识Dreamweaver1、制作网站的流程规划网站类型及主题à搜集资料素材à使用软件进行网页制作à测试及发布2、认识Dreamweaver是当前最流行、最方便的网页设计和网站开发工具软件。

Dreamweaver：梦想编辑者。

通过这个工具，实现编辑网页的梦。

Dream：梦想weaver：织布者，织工早期是Macromedia公司推出的“网页三剑客”之一。

“网页三剑客”指的是Dreamweaver、Flash、Fireworks这三个软件，它们这三个集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中的专用利器。

它集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的可视化网页开发工具，前两年Macromedia公司被Adobe公司收购，DM CS5是最新推出的版本。

【操作演示】启动Dreamweaver实例：制作一个简单页面(两种方法对照)三、Dreamweaver的用户界面状态栏浮动面板文档工具栏文档编辑窗口属性面板插入面板菜单栏提高：工作窗口的设置、保存、恢复【操作演示】关闭Dreamweaver四、网页文件的基本操作基本网页的文件类型为HTML文档，保存的文件扩展名为“.html”创建网页文档（HTML文档）•文件→新建→新建文档→常规→类别→基本页保存指定文件（编辑中的文件如果文件名后面带有“*”号，表示未保存）•文件→保存（或Ctrl+S)•文件→另存为•文件→保存全部注意：1、网页文件要用英文或数字进行命名，莫用中文。

第1章DreamWeaver CS5简介1.1 Dreamweaver CS5的启动和退出1.1.1 Dreamweaver CS5的启动在安装Dreamweaver CS5之后，安装程序会自动在Windows的“开始”菜单中创建程序组。

打开“开始”菜单，选择“程序”，选择“Adobe Master Collection CS5”程序组，再选择“Adobe Dreamweaver CS5”命令，即可启动Dreamweaver CS5。

首次启动Dreamweaver CS5，显示的界面如图1-1所示。

可以打开最新的项目，也可以新建各种类型的网页文件，点新建“HTML“，系统会自动新建一个空白的网页文件等候编辑。

图1.1-1 Dreamweaver CS5首次启动界面另一个更常见的方法是在Windows的窗口或资源管理器中先找到要编辑的网页文档，选中要编辑的网页文件，即HTML文件图标，然后单击鼠标右键，打开右键快捷菜单，在“打开方式“选择中选择“Abode Dreamweaver CS5”，如图1.1-2所示，即可启动Dreamweaver CS5，并载入要编辑的HTML文件。

图1.1-2 启动Dreavweaver CS5同时载入网页文件1.1.2 Dreamweaver CS5的退出Dreamweaver CS5的退出与一般的Windows应用程序退出方式一样，可以点窗口右上角的“关闭”小按钮；也可以点“文件”菜单，选择“退出”功能；还可以按组合热键[Alt]+[F4]等等，都可以退出Dreamweaver CS5。

如果当前正在编辑的文件尚未保存，系统会弹出一个询问是否保存退出的警告提示小窗口，让我们选择保存、放弃保存或者取消退出操作。

1.2 Dreamweaver CS5的运行界面Dreamweaver CS5的主要功能是网页设计、代码编写、应用程序开发等，相应的面板也是这样分类的。

用户也可以根据自己喜好来调整面板布局。

操作完成之后自己总结在操作过程中遇到的难题，是怎样解决的，有什么不足和以后需要改进的地方。
6课时
1.1.2 编码工具栏：怎样折叠标签，以及折叠部分出现感叹号代有问题的代码，如何使用高亮显示无效代码；注释的应用；环绕标记；移动和转换CSS样式；代码格式化的应用。
1.1.3插入面板：插入超链接、插入锚点、插入注释、创建模板，创建可编辑区域。
多媒体设备实际操作演示软件Dreamweaver CS5安装步骤及其功能。
插入面板。
重点难点
分 析
重点是软件Dreamweaver CS5的工作界面。编码工具栏。插入面板。
难点是站点的创建与管理操作。
教学方法
通过软件实际演示教学Dreamweaver CS5，ppt帮助学生了解软件的功能。对于重点操作可以着重演示，并加强举例说明。
在投影屏幕上实际操作软件的安装和功能，让学生动手在自己电脑上实际操作。
教学活动方案
学习任务
第一章工具栏介绍
教学活动
准备PPT、教案、软件
学习成果与技能达标项
软件在电脑上的使用痕迹
授课日期
授课班级
计划学时
任课教师
授课地点
第2周3月9日/10、11日
1932/1931
6
2号机房
基 本 信 息
教学5的工作界面。
熟悉站点的创建与管理操作。编码工具栏。
通过PPT帮助学生了解软件DreamweaverCS5。
演示软件标题栏、菜单栏、代码编辑区域、代码选择器、文档工具栏、插入栏、浮动面板组、状态栏、“属性”面板等使用方法及作用。
操作过程中教师巡回指导，完成之后由教师总结大家在操作中遇到的难题和解决办法。
上课理论部分观看屏幕，认真听讲。

Dreamweaver CS5 网页制作基础教程
第1章
网页制作基础
本章将介绍与网页设计与制作有关 的基本知识以及Dreamweaver CS5的基 本情况，以为后续内容的学习奠定基础。
学习目标
了解与网页有关的一些常用名词术语。 了解HTML和CSS的一些基本知识。 了解Dreamweaver CS5的工具栏和功能面板。 掌握Dreamweaver CS5设置首选参数的方法。
1.2.3
CSS基础
CSS（Cascading Style Sheets，层叠样式表或级联样式表）作 用主要是用于定义如何显示HTML元素。
1、CSS的保存方式
2、CSS的语法结构 CSS规则由两个主要的部分构成：选择器和声明。 选择器 {声明1; 声明2; ... 声明N} h3 {color: red; font-size: 14px;} p {color: #ff0000;} p {color: #f00; } p {color: rgb(255,0,0);} p {color: rgb(100%,0%,0%);} p {font-family: "sans", "serif";} p {text-align: center; color: red;}
ver是美国Macromedia公司（1984年 成立于美国芝加哥）于1997年发布的集网页制作 和网站管理于一身的所见即所得式的网页编辑器。 由Macromedia公司发布的Dreamweaver的最后 版本是Dreamweaver 8。 2005年底，Macromedia公司被Adobe公司并购。 2007年7月，Adobe公司发布Dreamweaver CS3， 2008年9月发布Dreamweaver CS4，2010年4月发 布Dreamweaver CS5，2011年4月发布 Dreamweaver CS5.5，约一年后又发布了 Dreamweaver CS6。