Dreamweaver8教程第一章课件.ppt

1、1Dreamweave8网页制作网页制作与网站开发与网站开发2考核成绩安排n本门课程的最终成绩由本门课程的最终成绩由两两部分组成：部分组成： 平时成绩（平时成绩（3 30 0）：）：上课出勤、课堂学习上课出勤、课堂学习情情况况 和和上机实验上机实验 期末考试成绩（期末考试成绩（7 70 0）n学分：学分：2 2学分学分3课程介绍Dreamweaver 8简介简介&是是Macromedia公司最新推出的一个功能强大的网页制作公司最新推出的一个功能强大的网页制作工具，是一款专业的工具，是一款专业的HTML编辑器。编辑器。&用于对用于对Web站点、站点、Web页和页和Web应用程序进行设计、编应用程

2、序进行设计、编码和开发。码和开发。特点：特点：&可视化编辑功能可以为页面快速添加各种设计和功能。可视化编辑功能可以为页面快速添加各种设计和功能。&可以查看所有的站点元素或资源，并且可以直接将它们从可以查看所有的站点元素或资源，并且可以直接将它们从一个易用面板中拖动到文档。一个易用面板中拖动到文档。&可以程序化开发流程。可以程序化开发流程。4课程介绍学习目的学习目的学习内容学习内容学习安排学习安排& 掌握计算机网络基本知识掌握计算机网络基本知识& 会使用会使用dreamweave设计和设计和制作网页和开发网站制作网页和开发网站5课程介绍学习目的学习目的学习内容学习内容学习安排学习安排& 网站设计

3、网站设计基础基础（1 1章）章） & 编辑网页元素编辑网页元素（2 2章）章）& 使用表格布局页面使用表格布局页面（3 3章）章） & 框架和层框架和层 （4 4章）章）& 编辑多媒体元素编辑多媒体元素（5 5章）章） & 安装调试服务器与站点管理安装调试服务器与站点管理（6 6章）章） & HtmlHtml和和csscss样式样式（7 7章）章） & 提高工作效率（模板）提高工作效率（模板）（8 8章）章）& 制作网页特效（行为、制作网页特效（行为、javascriptjavascript) ) （9 9章章）& 其他其他6课程介绍学习目的学习目的学习内容学习内容学习安排学习安排& 总学时：

4、总学时：3636学时学时 （上课（上课18/18/上机上机1818）&上机安排上机安排 ： 从第从第2 2周开始周开始& 计划用机和自由用机相结合计划用机和自由用机相结合7第第1 1章章 网站设计基础网站设计基础认识网站和网页认识网站和网页网站开发技术简介网站开发技术简介初识初识Dreamweaver 8 本章学习知识点本章学习知识点8什么是网页和网站 什么是网页 什么是网站 9什么是网页 网页网页是由是由HTML（超级文（超级文本标识语言）本标识语言）或者其他语言或者其他语言编写的，通过编写的，通过IE浏览器编译后浏览器编译后供用户获取信供用户获取信息的页面，它息的页面，它又称为又称为Web

5、页，页，其中可包含文其中可包含文字、图像、表字、图像、表格、动画和超格、动画和超级链接等各种级链接等各种网页元素。网页元素。 10什么是网站 网站网站就是一个或多个网页的集合。这就是一个或多个网页的集合。这些网页按照一定的组织结构，以链接的方些网页按照一定的组织结构，以链接的方式连接在一起，形成一个整体，描述一组式连接在一起，形成一个整体，描述一组完整的信息。完整的信息。 门户网站门户网站 职能网站职能网站 专业网站专业网站 个人网站个人网站 11网页的分类网页的分类 按所处位置分类 按表现形式分类 12按所处位置分类 按网页在网站中所处的位置可将网页分为按网页在网站中所处的位置可将网页分为主

6、页主页和和子页子页两类。两类。13按表现形式分类 按网页的表现形式可将网页分为按网页的表现形式可将网页分为静态静态网页和网页和动态动态网页。网页。 主要区别是主要区别是web服务器对它们的处理方式不同服务器对它们的处理方式不同14设计网页的原则设计网页的原则整体规划 鲜明的主题善用图像醒目的导航及时更新易记的网站名称通用网页动画适量 15网站建设的一般步骤网站建设的一般步骤 规划网站规划网站 收集整理资源收集整理资源 创建站点创建站点 制作网页制作网页 测试站点测试站点 发布站点发布站点 维护、更新站点维护、更新站点16网页制作大概分为以下几步：网页制作大概分为以下几步：1构建页面框架构建页面

7、框架2导航条导航条3. 添加内容添加内容4编写后台程序编写后台程序17网站开发技术简介网站开发技术简介 HTML（超文本标记语言） CSS （层叠样式表） ASP（动态服务器页面） PHP（超文本预处理语言） JSP （java 服务器页面）动态网页语言动态网页语言 是构成网页文档的主要语言一种标记语言，负责网页内容的表现。一种可以与数据库和其它程序进行交互的简单、方便的编程工具。ASP的网页文件的格式是.asp。是一种 HTML 内嵌式的语言，都是一种在服服务器端执行务器端执行的嵌入HTML文档的脚本语言。脚本语言。一种动态网页技术标准动态网页技术标准。它是在网页HTML文件(*.htm,*

8、.html)中插入插入Java程序段程序段和JSP标记标记，从而形成JSP文件文件(*.jsp)。18网页制作的常用工具网页制作的常用工具 网页设计软件网页设计软件 DreamweaverDreamweaver是目前使用最多的网页设计软是目前使用最多的网页设计软件。件。 图像处理软件图像处理软件 制作网页图像的软件种类繁多，大多数网页制作网页图像的软件种类繁多，大多数网页设计人员选择的是设计人员选择的是FireworksFireworks或或PhotoshopPhotoshop。 动画制作软件动画制作软件 网页动画制作中最常用的软件非网页动画制作中最常用的软件非FlashFlash莫属。莫属。

9、 19认识Dreamweaver 8 使用Dreamweaver 8制作网页之前，需先将该软件安装到电脑中，其方法与安装其他软件相似，用户可根据提示操作。 20Dreamweaver版本发展DreamWeaver4DreamWeaverMXDreamWeaverMX2004DreamWeaver8DreamWeaverCS3 Dreamweaver CS4 21Dreamweave8工作环境 工作区布局工作区布局 工作界面工作界面 工具栏面板工具栏面板22工作布局 首次启用首次启用dreamweaverdreamweaver, ,会会出现出现 工作区设置工作区设置 对话框，提供两对话框，提供两

10、种工作布局：种工作布局： 设计器设计器 编辑器编辑器 可通过可通过 窗窗口口工作区布局工作区布局 修改修改23起始页24标签选择器标签选择器Dreamweaver 8Dreamweaver 8的工作界的工作界面面 Dreamweaver 8 Dreamweaver 8的工作界面可以分为以下几个部分：的工作界面可以分为以下几个部分：常用工具栏常用工具栏文档工具栏文档工具栏编辑窗口编辑窗口(文档窗口）文档窗口）面板组面板组文件面板文件面板属性面板属性面板25工具栏面板 插入工具栏（常用工具栏）插入工具栏（常用工具栏） 样式呈现工具栏样式呈现工具栏 文档工具栏文档工具栏 标准工具栏标准工具栏和和插入

11、插入 菜单命令相对应，有两种显示方式：制表符显示和菜单命令相对应，有两种显示方式：制表符显示和菜单显示菜单显示 使用依赖于媒体的样式表时有用使用依赖于媒体的样式表时有用视图，各种查看选项和操作视图，各种查看选项和操作包含包含文件文件和和编辑编辑菜单中的一些操作菜单中的一些操作 选择选择查看查看 | 工具栏工具栏 进行显示或隐藏进行显示或隐藏演示26Dreamweaver 8的基本操作的基本操作 启动启动Dreamweaver 8 新建文档新建文档保存网页文档保存网页文档 预览网页效果预览网页效果 27启动Dreamweaver 8 选择选择 开始开始 所有程序所有程序 MacromediaMa

12、cromedia Macromedia Dreamweaver 8Macromedia Dreamweaver 8菜单命令菜单命令 在桌面单击快捷方式在桌面单击快捷方式28新建文档新建文档 选择选择 文件文件 新建新建 菜单命菜单命令，打开令，打开“新建新建文档文档”对话框，对话框，选择要创建的文选择要创建的文档类型，单击档类型，单击“创建创建”按钮。按钮。 29文档显示方式文档显示方式 通过单击通过单击 标签，可以在标签，可以在“代码代码”视图、视图、“拆分拆分”视图和视图和“设计设计”视图三种显示方视图三种显示方式之间进行切换。式之间进行切换。 演示30显示显示/隐藏面板隐藏面板将鼠标移至

13、面板最左侧的将鼠标移至面板最左侧的 标志上，鼠标指针标志上，鼠标指针将变为十字箭头，此时按住鼠标左键拖动可将面板将变为十字箭头，此时按住鼠标左键拖动可将面板拖动到其他位置。拖动到其他位置。单击面板名称左侧的黑色下三角按钮单击面板名称左侧的黑色下三角按钮 ，可以，可以收起面板，再次单击可以打开面板。收起面板，再次单击可以打开面板。选择选择“窗口窗口”“隐藏面板隐藏面板”命令，或者按命令，或者按F4F4键键可以隐藏所有面板，再次选择可以隐藏所有面板，再次选择“显示面板显示面板”命令或命令或按按F4F4键可以显示所有面板。键可以显示所有面板。演示31保存网页文档保存网页文档 选择选择 文件文件 保存

14、保存 菜单菜单命令，打开的命令，打开的“另存为另存为”对话框，在对话框，在“保存在保存在”下拉列表框下拉列表框中选择文件的保存路径，在中选择文件的保存路径，在“文件名文件名”文本框文本框中输入保存的文件名中输入保存的文件名，单击，单击“保存保存”按钮按钮。 32预览网页效果预览网页效果 选择选择 文件文件 在浏览器中预览在浏览器中预览 IExploreIExplore 6.0 6.0菜单菜单命令命令在在IEIE浏览器中浏览器中预览网页文档的效预览网页文档的效果。或者按果。或者按F12F12。 33自定义工作环境自定义工作环境 页面属性设置 首选参数设置34首选参数设置首选参数设置 首选参数定义

15、首选参数定义了启动了启动Dreamweaver Dreamweaver 8 8时对工作环境的一时对工作环境的一些默认设置，选择些默认设置，选择主菜单主菜单“编编辑辑”“首选参数首选参数”命令，或者按命令，或者按CtrlCtrlU U组合键，即可打组合键，即可打开开“首选参数首选参数”对对话框进行设置。话框进行设置。图 “首选参数”对话框35页面属性设置页面属性设置 选择主菜单选择主菜单“修改修改”“页页面属性面属性”命令，命令，或者按或者按CtrlCtrlJ J组组合键，打开合键，打开“页页面属性面属性”对话框，对话框，可对可对“外观外观”、“链接链接”、“标标题题”、“标题标题/ /编编码码

16、”和和“跟踪图跟踪图像像”属性进行设属性进行设置。置。图 “页面属性”对话框36练习：制作第一个网页 课本第27页37上机实战 本课上机实战将练习在Dreamweaver 8中新建一个只包含文本的简单网页，并使用IE浏览器预览其效果。其中主要练习Dreamweaver 8的启动、新建文档、保存网页、预览网页和退出Dreamweaver 8的操作。 381.1.6 1.1.6 网页设计中的常用术语网页设计中的常用术语 在网页设计中常用到以下术语：在网页设计中常用到以下术语： 1URL2首页首页3. 超级链接超级链接4. 发布发布5. 脚本程序脚本程序1.2 设置站点设置站点1.2.1 1.2.1

17、 站点的作用站点的作用1.2.2 1.2.2 创建站点创建站点1.2.4 1.2.4 站点地图站点地图1.2.3 1.2.3 管理站点管理站点391.2.1 站点的作用站点的作用 站点好比是生产网页的工厂，用户把制作网页所需的素材、制作好的网站点好比是生产网页的工厂，用户把制作网页所需的素材、制作好的网页和没有制作好的网页都分门别类放在站点之中，便于管理和测试。页和没有制作好的网页都分门别类放在站点之中，便于管理和测试。 站点可以包括站点可以包括1个网页，也可以包括由成百上千个网页组成的一个完整个网页，也可以包括由成百上千个网页组成的一个完整的网站。的网站。 使用使用Dreamweaver 8

18、可以创建可以创建3类站点：类站点： 1本地站点本地站点2远程站点远程站点3. 测试站点测试站点1.2.2 创建站点创建站点 创建站点的主要步骤如下：创建站点的主要步骤如下： 1规划站点规划站点2设计站点设计站点3. 配置站点配置站点401.2.3 管理站点管理站点 站点创建完成后，可以站点创建完成后，可以随时通过随时通过“管理站点管理站点”对话对话框对站点的文件和文件夹进框对站点的文件和文件夹进行编辑和管理。如图行编辑和管理。如图1-1所所示。示。图图1-1 “管理站点管理站点”对话框对话框 使用站点地图可以查看本地站点的结构，能够清晰直观地看到站点内文使用站点地图可以查看本地站点的结构，能够清晰直观地看到站点内文档的组织结构和链接关系的图形化显示，还可以在站点地图中方便直观地编档的组织结构和链接关系的图形化显示，还可以在站点地图中方便直观地编辑站点内文档之间的链接。如图辑站点内文档之间的链接。如图1-2所示。所示。1.2.4 站点地图站点地图图图1-2 站点地图站点地图