Download presentation
Presentation is loading. Please wait.
1
第2章 网页设计基础 ——初识Dreamweaver 8
2
2.1 Dreamweaver 简介 所见即所得 Dreamweaver主要特点和功能 将设计和代码编辑器和二为一
内置的图形编辑程序节省开发时间 界面操作方便、功能强大 完美的CSS支持 完整的集成开发环境
3
2.1 Dreamweaver 简介 所见即所得 Dreamweaver主要特点和功能 常见格式的外部文档、代码可以嵌入 行为工具丰富
布局视图将表格和层结合实现页面排版 强大的网站管理功能 浏览器兼容检查
4
Dreamweaver 8的安装与启动 Dreamweaver 8的安装 Dreamweaver 8的启动 方法：
开始→程序→ Micromedia → Dreamweaver 8 初次启动
5
1、工作布局的分类 【窗口】——工作区布局 设计器 编辑器 双重屏幕
6
2、起始页
7
3、工作区布局 文档工具栏 主菜单 插入工具栏 面板组 编码工具栏 拆分视图 代码编辑窗口 设计窗口 状态栏 属性面板
8
3、工作区布局 1.标题栏 显示“Macromedia Dreaweaver 8”。如果新建或者打开网页，在后面会显示该网页的信息，如网页标题、所在目录以及文件名称。 2.菜单栏 Dreaweaver8菜单分为10种，包括文件、编辑、查看、插入、修改、文本、命令、站点、窗口和帮助。 3.“插入”工具栏 用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。例如，可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插入”栏而使用“插入”菜单插入对象。
9
3、工作区布局 “常用”：可以创建和插入最常用的对象，例如图像和表格。
“布局”：可以插入表格、div 标签、层和框架。您还可以从三个表格视图中进行选择“标准”（默认）、“扩展表格”和“布局”。 “表单”：包含用于创建表单和插入表单元素的按钮。 “文本”：可以插入各种文本格式设置标签和列表格式设置标签。 “HTML”：可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。 “应用程序”：可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。 “Flash 元素”：可以插入 Flash 元素。 “收藏”：可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。
10
3、工作区布局 4. 文档工具栏 这些按钮可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 代码视图：仅在“文档”窗口中显示“代码”视图。 设计视图：仅在“文档”窗口中显示“设计”视图。 拆分视图：在“文档”窗口同时显示“代码”视图和“设计”视图。 标 题：可以直接在此处为文档设定标题，它将显示在浏览器的标题栏中。 没有浏览器/检查错误：可以检查跨浏览器兼容性。 在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。 文件管理：显示“文件管理”弹出菜单。 刷 新：在“代码”视图中进行更改后刷新文档的“设计”视图。 视图选项：为“代码”视图和“设计”视图设置选项。
11
3、工作区布局 5.“文档”窗口 “文档”窗口用于显示当前创建和编辑的文档。 6.“属性”面板
用于查看和更改所选对象或文本的各种属性。网页的内容形式多样，任何一种形式都可以称之为对象，比如：文字、图像、表格等。一般网页中的对象都有属性，如文字的字体、颜色、字号等，图像的高、宽、链接等。用户可以在属性面板中设置对象的属性，如图所示。属性面板的设置项目会根据选取对象的不同而变化。
12
3、工作区布局 7.“浮动面板组” “浮动面板组”用于分组在某个标题下面的相关面板的集合，节省屏幕空间。用鼠标单击面板组左边的小三角可以折叠或者展开一个浮动面板，在浮动面板组最左边有一个折叠按钮，可以展开或者收缩所有面板,如图所示。 折叠按钮
13
3、工作区布局 8.其他工具栏 除前面介绍的工具栏外，Dreamweaver 8还提供了样式呈现、标准和编码工具栏。选择“查看”→“工具栏”命令，在“工具栏”子菜单中勾选或者取消工具栏，可以改变工具栏的显示或隐藏方式。 9. 状态栏 状态栏提供和创建文档有关的其它信息，显示标签选择器，选取按钮，手型工具，缩放工具，文档大小，下载时间等如图所示。
14
3、工作区布局 （1）标签选择器 显示环绕当前选定内容的标签的层次结构，单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击 <body> 可以选择文档的整个正文。 （2）选取按钮、手型工具、缩放工具按钮。 分别用来选取对象、移动页面工作区域和缩放页面。按住ALT键，可以使用缩放工具缩小页面工作区域。 （3）文档比例 若要使页面看起来效果更好，可以单击下拉列表框右侧的小箭头，在弹出的下拉列表中选择一个比例。 （4）窗口大小 用来将“文档”窗口的大小调整到预定义或自定义的尺寸。 “窗口大小” 的右侧是页面的文档大小和估计下载时间。
15
站点：实质上是一个文件夹。文件夹中涵盖一系列文档，这些文档通过各种链接关联起来，利用浏览器就可以实现对整个网站的浏览。
2.2 创建和编辑本地站点 站点概述 站点：实质上是一个文件夹。文件夹中涵盖一系列文档，这些文档通过各种链接关联起来，利用浏览器就可以实现对整个网站的浏览。 本地站点 远程站点
16
2.2 创建和编辑本地站点 1、创建本地站点 （1）在菜单栏中选择“站点”→“新建站点”命令，打开“ 未命名站点l 的站点定义为”对话框，如图所示。 注意：站点的名称是站点的标识。站点名几乎可以由任何字符组成，但是不包括“/”、“\”、“?”、“>”、“<”、“:”、“∣”、“”等字符。
17
2.2 创建和编辑本地站点 （2）单击“下一步”按钮，可以设置该站点需要用到的服务器技术，因为此时新建的是静态站点，应当选择“否，我不想使用服务器技术”，如图所示。
18
2.2 创建和编辑本地站点 （3）单击“下一步”按钮,可以设置站点的编辑方式，如图所示。在对话框中选择“编辑我的计算机上的副本，完成后再上传到服务器”，在“您将文件存储在计算机上的什么位置？”文本框中设置本地站点文件夹的地址。
19
2.2 创建和编辑本地站点 （4）单击“下一步”按钮，进入“站点定义”对话框设置远端站点，先选“无”，等网站建设完成后再进行设置。如图所示。
20
2.2 创建和编辑本地站点 （5）单击“下一步”按钮，进入“站点定义”对话框的总结，如图2.13所示。该对话框列出了刚才设置的所有主要内容，如果发现有错误，可以单击“上一步”返回修改；如果没有问题，单击“完成”按钮，结束“站点定义”对话框的设置。
21
2.2 创建和编辑本地站点 2、站点管理 1.编辑站点 （1）选择“站点”→“管理站点”命令，打开站点管理对话框。如图2.14所示。
2.2 创建和编辑本地站点 2、站点管理 1.编辑站点 （1）选择“站点”→“管理站点”命令，打开站点管理对话框。如图2.14所示。 2.删除站点 3.复制站点
22
2.2 创建和编辑本地站点 3、站点文件与文件夹 创建文件与文件夹 创建文件夹就是构思网站目录结构的过程，通常文件夹代表网站的子栏目。
2.2 创建和编辑本地站点 3、站点文件与文件夹 创建文件与文件夹 创建文件夹就是构思网站目录结构的过程，通常文件夹代表网站的子栏目。 ②移动和复制文件与文件夹 ③重命名文件与文件夹 ④删除文件与文件夹
23
2.2 创建和编辑本地站点 3、站点文件与文件夹 设置首页文件 编辑文件 刷新文件, ⑧使用文件面板
2.2 创建和编辑本地站点 3、站点文件与文件夹 设置首页文件 编辑文件 刷新文件, [站点]-“管理站点”-“编辑”—“高级”标签-自动刷新本地文件列表 ⑧使用文件面板 本地视图、远程视图、测试服务器、地图视图 信息栏 站点列表 工具栏 面板菜单栏 站点下拉列表
24
2.3网页文件的基本操作 1、创建、打开和保存网页文件 1.创建文档 通过 Dreamweaver 8文件创建新文档，执行以下操作：
选择“文件”→“新建”，即出现“新建文档”对话框。如图2.20所示。“常规”选项卡已被选定。 从各种预先设计的页面布局中选择一种。比如：选择“基本页”HTML，点击创建按钮。
25
2.3网页文件的基本操作 2.保存文档 创建新文档后，需要保存文档，执行以下操作： （1）选择“文件” →“保存”；或者按Ctrl+S。
（2）在出现的对话框中，定位到要用来保存文件的文件夹。 （3）在“文件名称”文本框中，键入文件名。 不要在文件名和文件夹名中使用空格和特殊字符，文件名也不要以数字开头、不要使用特殊字符（如￥）或标点符号（如冒号、斜杠或句号）；很多服务器在上传时会更改这些字符，这会导致与这些文件的链接中断。 （4）单击“保存”。
26
2.3网页文件的基本操作 3.打开现有文档 在 Dreamweaver 8 中可打开现有 Web 页或基于文本的文档，即使它们不是用Dreamweaver 8 创建的。可打开该文档并用 Dreamweaver 8 在“设计”视图或“代码”视图中编辑该文档。打开现有的文件，请执行以下操作： （1）选择“文件”→“打开”，出现“打开”对话框。 （2）定位到并选择要打开的文件。 （3）单击“打开”按钮。
27
2.3网页文件的基本操作 2 、设置网页的页面属性 打开“页面属性”对话框有三种方法：
Dreamweaver 8的编辑窗口中，选择“修改”→“页面属性”命令。 在文档（设计）窗口右击，在弹出的快捷菜单中选择“页面属性”。 在文档下方的属性面板中，单击“页面属性”按钮。
28
2 、设置网页的页面属性 设置外观 设置链接 设置标题 设置标题编码 设置跟踪图像
29
3、设置网页元素的颜色 网络安全色 网页安全色是指以 256 色模式运行时，无论在 Windows 还是在 Macintosh 系统中，在Netscape Navigator 和 Microsoft Internet Explorer 中的显示相同的颜色。 设置网页元素颜色 在对话框或“属性”面板中单击颜色框，出现颜色选择器，如图所示。
30
3.定义默认文本颜色 在“页面属性”对话框中为常规文本、链接、访问过的链接和活动链接定义默认颜色，或者选择预设配色方案定义页面背景和文本颜色。 若要定义默认文本颜色，执行下列操作之一： 选择“修改”→“页面属性”，然后为“文本颜色”、“链接颜色”、“访问过的链接”和“活动链接”选项选择颜色。
31
4、网页文本的编辑 1.插入文本的方法 在网页中插入文本有3种方法： （1）直接输入文本。 （2）复制文本。
（3）导入已有的WORD文档。选择“文件”→“导入”→ “WORD文档”命令，在弹出的导入WORD文档对话框中，选择要导入的WORD文档，如图所示。
32
4、网页文本的编辑 2.设置段落格式 设置段落格式执行以下操作： （1）将插入点放在段落中，或者选择段落中的一些文本。
（2）使用“文本”→“段落格式”子菜单，如图2.30所示；或“属性”面板中的“格式”弹出式菜单，如图2.31所示，选择某段落格式
33
4、网页文本的编辑 3.对齐文本 若要对齐文本，执行以下操作： （1）选择要对齐的文本，或者只需将指针插入到文本开头。
（2）单击“属性”面板中的对齐选项（“左对齐”、“右对齐”或“居中对齐”），或者选择“文本”→“对齐”，然后选择对齐命令，如图2.32所示。
34
4、网页文本的编辑 若要缩进文本和取消缩进，执行以下操作： （1）将插入点放在要缩进的段落中。
（2）单击“属性”面板中的“文本缩进”或“文本凸出”按钮，也可以选择“文本” →“缩进”或“凸出”。
35
4、网页文本的编辑 4.段落与换行 需要添加段落时，可以按 Enter 键（添加<p></p>标签
要添加换行符（添加<br>标签），可以选择以下操作中的一种： 按 Shift + Enter 键。 在“插入”栏中选择“文本”类别，选择“字符”菜单，然后单击“换行符”图标。 选择“插入”→ “HTML” →“特殊字符” →“换行符”。
36
4、网页文本的编辑 5.使用水平线 要创建水平线，执行以下操作： （1）在“文档”窗口中，将插入点放在要插入水平线的位置。
（2）执行下列操作之一： 选择“插入”→“HTML” → “水平线”。 在“插入”栏的“HTML”类别中，单击“水平线”按钮 要修改水平线，执行以下操作： （1）在“文档”窗口中，选择水平线。 （2）选择“窗口”→ “属性”打开“属性”面板，如图2.35所示，然后根据需要对属性进行修改。
37
4、网页文本的编辑 6.创建项目列表和编号列表 单击“属性”面板中的“项目列表”或“编号列表”按钮。
若要创建新列表，执行以下操作： （1）将插入点放在要添加列表的位置，然后执行下列操作之一： 单击“属性”面板中的“项目列表”或“编号列表”按钮。 选择“文本”→“列表”，然后选择所需的列表类型：“项目列表”、“编号列表”或“定义列表”。 （2）键入列表项目文本，然后按 Enter 键创建下一个列表项目。 （3）若要完成列表，按两次 Enter 键 。
38
4、网页文本的编辑 6.创建项目列表和编号列表 使用现有文本创建列表，执行以下操作： （1）选择一些段落。
（2）单击“属性”面板中的“项目列表”或“编号列表”按钮，或选择“文本” →“列表”，然后选择所需的列表类型：“项目列表”、“编号列表”或“定义列表”。 若要创建嵌套列表，执行以下操作： （1）选择要嵌套的列表项目。 （2）单击“属性”面板中的“缩进”按钮；或选择“文本” →“缩进”。 （3）按照上面使用的同一过程，对缩进的文本应用新的列表类型或样式。
39
4、网页文本的编辑 7.设置文本格式 选择文本，执行以下操作：
（1）若要更改字体，从“属性”面板或单击“文本” →“字体”子菜单中选择字体。选择“默认”是对所选文本应用默认字体 （2）若要更改字体样式，单击“属性”面板中的“粗体”或“斜体”，或者从“文本”→“样式”子菜单中选择字体样式（“粗体”、“斜体”、“下划线”等）。 （3）若要更改字体大小，在 “属性”面板“大小”的下拉列表框中选择字体大小或者任意输入大小（在后面的列表框中选择单位）。
40
4、网页文本的编辑 8.插入日期 执行以下操作： （1）在“文档”窗口中，将插入点放在要插入日期的位置。 （2）执行下列操作之一：
选择“插入” →“日期”。 在“插入”栏的“常用”类别中，单击“日期”按钮，出现“插入日期”对话框，如图2.36所示。 （3）在对话框中，选择星期格式、日期格式和时间格式。 （4） “储存时自动更新”复选框的使用； （5）单击“确定”插入日期。
41
4、网页文本的编辑 9.插入特殊字符 10.在字符之间添加空格（ ） 若要将特殊字符插入到文档中，执行以下操作：
（1）在“文档”窗口中，将插入点放在要插入特殊字符的位置。 （2）执行下列操作之一： 从“插入”→ “HTML” →“特殊字符”子菜单中选择字符名称。 在“插入”栏中的“文本”类别中，单击“字符”按钮。 10.在字符之间添加空格（ ） 若要插入不换行空格，执行下列操作之一： 在“插入”栏中的“HTML”类别中，单击“字符”按钮并选择“插入不换行空格”。 选择“插入” → “HTML” →“特殊字符” →“不换行空格”。 按 Ctrl+Shift+空格键 。
42
4、网页文本的编辑 11.历史记录 历史记录面板默认是隐藏的，可以通过主菜单“窗口”→“历史记录”打开它。
在历史记录面板中，可以通过拖动左侧的滑块撤销一步或更多的操作。
43
4、网页文本的编辑 12.任务自动化 若要一次或多次重复执行一系列步骤，可以从”历史记录“面板中重放它们。
若要播放一个步骤：在历史记录面板中，选择一个步骤然后单击“重放”按钮。该步骤随即被重复执行一次，并且历史记录面板中会出现它的一个副本。 若要重复一系列相邻的步骤，在历史记录面板中从一个步骤拖动到另一步骤；或者选择第一步，然后按住Shift键并单击最后一步，然后单击“重放”。所选步骤随即按顺序重新执行一遍，并且历史记录面板中出现一个新步骤“重放步骤”。 若要重复执行一组不相邻的步骤，可以选择一个步骤，然后按住Ctrl键并单击其它步骤进行选择。选择后，再单击“重放”，所选步骤随即按顺序重放。
44
4、网页文本的编辑 13. 录制命令 （1）利用“历史记录”面板，可以录制一个临时命令。选择主菜单“命令”→ “开始录制”，鼠标指针会变为，表明正在录制命令。此时可以在文档窗口中进行操作，所做的操作均被“历史记录”面板记录下来。 （2）完成录制后，选择主菜单“命令”→“停止录制”，则录制停止 若要重放录制的命令，请执行以下操作： 选择"命令“—>"播放录制命令"，
45
本章小结 作业：P42 问答题1、2题
Similar presentations
