dreamweaver课件

新建站点
利用表格排版网页资料
1.1.2 新增功能
Dreamweaver cs3增加了许多激动人心的新 功能，为设计工作带来了更高效与快捷的操作 。 改进的CSS功能 Spry构件 与photoshop的集成 浏览器兼容性检查
Dreamweaver cs4删减了不少功能。如时间 轴、flash元素、站点地图等。
1.3.3 设置便利的操作环境
编辑首选参数 选择编辑—首选参数，打开“首选参数”对话框，对 20个项目进行设置，使其最符合个人操作习惯。
1.4 管理文档
创建新文件 通过文件—新建，可创建空白文档、基于 dreamweaver设计文件的文档以及通过模板创建文档。 打开已有文件 通过文件—打开，可以打开任何html文档或动态文档 类型。 保存与另存文件 通过文件—保存或另存为，保存文件。文件名只能使 用英文字符和阿拉伯数字，不以数字开头，且不使用空格 和特殊符号。 设置参数 通过编辑—首选参数—新建文 档，设置默认文档类型和扩展名、 默认编码等。
个总体，而网页是个体。
网站与网页之间的关系
多个网页通过超级链接，相互连接构成整个网站
网页的基本构成元素
1.文字 2.图形图片 视频 3.超链接 4.表格 图片 5. 表单 6.音乐、视频
超链接
怎样学习这门课程？
多练题？ 多背书？ 多考试？
多操作多实践才是王道！
第一章 Dreamweaver概述 本章主要内容
设置页面属性 ① 单击修改—页面属性，或单击属性面板中的“页面属性 ”按钮，对页面属性进行设置，如页标题、背景图像和颜 色、文本颜色等。
在文档窗口中选择元素 若是可见元素，单击或拖动元素。若是不可见元素， 则选择可视化助理—不可见元素，显示不可见元素，在文 档窗口中单击该元素标记。
第二章：创建和管理站点 本章主要内容
index.htm (或default.htm)
picture.htm
clothes.htm
music.htm
DW建立网站初步
建立本地站点 1. 目的：在本地建立一个文件夹，此文件夹放 置网站用到的所有文件。 2. 步骤： (1):站点/新建站点/高级 (2):进行如下设置： 站点名称------------为本地站点命名 本地根文件夹----- 设置此文件夹的路径 默认图象文件夹--- 设置此站点图象文件的默认存 储路径。 （可不设置） HTTP地址---------- 输入网站的网址。（可不设置 ） 注意：当本地站点建立好后，自动显示“站点”面板
1.2 Dreamweaver工作界面
Dreamweaver的操作界面由菜单栏、文档工具栏、插 入工具栏、状态栏、快捷菜单、属性检查器等部分组成。
菜单栏 插入工具栏 文档工具栏 面板组
编辑区 标签选择器 状态栏
属性检查器
“文档”工具栏中主要包含了一些对文档进行常用 操作的功能按钮，通过单击这些按钮可在文档的不同视 图间进行快速切换。
2.1两个为什么？ 2.2 站点的简介和规划 2.3 创建本地站点 2.3 网页文档的基本操作
两个为什么？
为什么要建站点？
计算机上的站点 是什么样？
建站点是第一步很重要，创建之后，DW就可以帮忙来 管理站点，比如说插入图片的时候将图片都放在定义
站点的文件夹内，代码自动写入相对地址，保证网站
什么是网页？
网页是网站的基本组成要素。有很
多网页没有独立的域名和空间也只
能说是网页，例如blog、qq空间、 微博。

总结：一个网站通常有自己的独立域名和空间
，例如是一个网站，而
/about.htm则是这个网站所属的
一个网页，网站主菜单中的栏目实际上也是一 个网页。网站与网页的区别就在于，网站是一
选择是否每次 拷贝文件到本 站点名称，仅 输入上传站点 地站点时都自 仅给设计者起 的 URL,也可 不 动刷新本地文 到标识说明作 输入内容。 件夹列表，否 用。 则需要手动刷 新。
实例设计练习
Try yourself
在硬盘根目录下新建一个文件夹，给文件夹命名， 如:happy。[我的电脑(选择硬盘)/文件/新建/文件夹 ] 在Dw中，选择“站点>新建站点”命令。 输入站点名称 （开心站）（站点名称可以是中文 ） 找到本地根文件夹(D:\happy)西文
发布的时候完整，如果不定义站点，则代码就会写成 绝对地址，指向本地电脑，发布的时候图片链接会失 效。 总而言之将所用的文件都放在定义站点的文件夹内就
没有问题的，如果你定义好了站点，一旦出现站点外
的文件，DW会提醒你的。
远程站点和本地站点
网页的开发和制作一般在客户端进行，之后向 服务器上传。
本地站点：在开发阶段，临时存放在客户开发 端的站点。 远程站点：开发结束后，发布在服务器端存放 的站点。
网页设计与制作
《Dreamweaver 网页设计与制作》
主讲：王玉刚
前言
网站概述
教学目标:
通过本章的学习熟练掌握网站与 网页的区别，掌握网站基本构成元素， 了解网站的基本布局类型。
本节内容
1.了解网站与网页
2.网页的基本构成元素 3.如何学好这门课程
网站与网页有什么区别
什么是网站？
网站(Web Site)是有独立的域名、独立的存放
认识Dreamwe境 管理文档
1.1 认识Dreamweaver
1.1.1 Dreamweaver可以做什么
作为网页三剑客的重要一员，Dreamweaver在网页设计领域具 有强大的功能，但它不能简单地定位为网页设计软件。 Web站点架设 可以方便地实现站点架设、管理与维护，简单地发布站点至网 络网站空间，实施远端维护等操作。 网页内容排版 在所见即所得的工作环境中，可轻松创建表格、层和框架，对 网页资料进行完美编排。 网页特效制作 可以通过简单的图像转换、动态行为、时间轴和层的结合实现 具有各种视觉特效的网页。 网页应用程序开发 可以开发coldfusion、asp、、php等类型的动态网页。
空间的内容集合，这些内容可能是网页，也可
由于IP地址是数字标识，使用时难以记忆和书写， 能是程序或其他文件，不一定有很多网页，主 因此在IP地址的基础上又发展出一种符号化的地址 方案，来代替数字型的IP地址。每一个符号化的地 要有独立的域名和空间，哪怕只有一个页面也 址都与特定的IP地址对应，这样网络上的资源访问 起来就容易得多了。这个与网络上的数字型IP地址 叫网站。 相对应的字符型地址，就被称为域名。
计算机上的站点
网站位置
文件夹名称
子文件夹 图像
主页 网页
建立站点原则
不要使用中文目录；网络无国界，使用中文目 录可能对网址的正确显示造成困难。 不要使用过长的目录；尽管服务器支持长文件 名，但是太长的目录名不便于记忆。 尽量使用意义明确的目录；便于记忆和管理呢 。
创建站点——规划站点
选取工具 缩放工具 文档大小和估计 下载时间
标签选择器
手形工具
窗口大小
选择“窗口”｜“属性”命令，可以显示或隐藏属 性检查器。默认将其显示在文档窗口的下方，分为”常 用”和”高级”两部分。
1.3 自定义工作环境
1.3.1 工作区调整与管理
选择工作区布局 Dreamweaver提供了编辑器、设计器和双重屏幕三种 工作区布局。选择窗口—工作区布局，可相互切换。 调整工作区布局 默认的三种布局并不一定适合所有用户，可以通过打 开、关闭工具栏和面板对工作区布局进行调整。 保存工作区布局 选择窗口—工作区布局—保存当前，保存已调整好的 工作区布局。 管理工作区布局 选择窗口—工作区布局—管理，打开“管理工作区布 局”对话框，删除或重命名工作区布局。
页面属性的设置
打开： 属性面板－－页面属性 修改－－页面属性
注意：链接颜色 跟踪图象：相当于特殊的辅助线，是网页排版 的一种辅助手段，只在网页编辑时 可见，对最终结果没有影响。 . 注意与背景图象的区别
总结
用DW制作网站的初步，包括站点的建立和编辑，网页文件的建立。 （重点） 网页文件的编辑。
代码视图 设计视图 文件管理 可视化助理 检查 刷新
代码和设计视图
文档标题
预览 选项
验证
“插入”工具栏提供了”菜单”和”制表符”两种 显示方式。包含用于创建和插入对象(如表格、图像)所 用到的所有按钮。这些按钮被分类组织到各个选项卡中 。 命名锚记 图像 标签选择器
超级链接 表格
模板
状态栏位于文档窗口的底部，提供与用户正编辑的 文档有关的某些信息，如当前窗口大小、文档大小和估 计下载时间等。标签选择器可查看网页内容的代码标签 ，也可以单击标签，选中该元素。
1.3.2 工具栏与面板操作
显示/隐藏面板和工具栏 显示面板/工具栏可方便用户操作，但缩小了文档窗口 。可根据需要是否显示或者显示特定对象。 自由组合面板 例如，要将“文件”面板整合到“设计”面板中，可选 择“窗口”|“文件”命令，打开“文件”面板，然后右击 “文件”面板的名称标签，从弹出的快捷菜单中选择“将 文件组合至”|“设计”命令，即可将“文件”面板整合到 “设计”面板中。 面板组的基本操作 通过面板组的标题栏和选项菜单，可以停靠和取消停 靠面板组，移动、重命名、最大化和关闭面板组。