第5章 网页制作软件 Dreamweaver CS5(实验教程)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
菜单栏 文档工具栏 浏览器导航工具栏 标准工具栏
代码区
编码工具栏
浮动面板组
状态栏 属性面板
设计区
5.2 Dreamweaver CS5站点管理
网站结构示意图
主页：网站入口，即在浏览器地址栏输 入网站域名后首先看到的那页
对网页中的文字、图像做 超链接，跳转至其它页面
index.html 动态网页文件后缀名
5.3 网页制作基本操作
5.3.3 插入图像
5. 插入图像占位符
在设计网页过程中，有时当要往网页中插入图像时却 没有合适的图像，这时可以先插入图像占位符代替图 像，为图像预留指定大小的空间，而不影响设计。
鼠标移至图像时，该图像切换为另一幅图像，鼠标 将光标置于网页中待插入图像位置，单击菜单栏“插入” |“图像对 从图像移走时，又恢复为原始图像 象” |“图像占位符”命令，打开“图像占位符”对话框 6. 插入鼠标经过图像
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
• 在网页中选中字幕文 本，单击工作界面状 态栏“<marquee>”标 签 • 按<Ctrl>+<T>键打开 “快速标签编辑器” • 修改“<marquee>” 标签的属性
5.3 网页制作基本操作
5.3.2 网页的文字处理
4. 其他修饰
单击菜单栏“插入”|“图像对象”|“鼠标经过图像”命令，打开“插 入鼠标经过图像”对话框 ，完成设置后单击“确定”按钮。
这两幅图像若篇幅大小不同，Dreamweaver CS5会自动调整第二幅 图像篇幅，使其与第一幅图像匹配
5.3 网页制作基本操作
5.3.4 建立超链接
1. 文本链接
方式一：使用“属性”面板
5.3 网页制作基本操作
5.3.4 建立超链接
3. 图像热点链接
图像热点——将图像划分成小块区域，为每个区域单独做超链接， 这样带有链接的区域就称为图像的热点。
5.3 网页制作基本操作
5.3.4 建立超链接
课件制作：周萱
5.1 Dreamweaver CS5概述 5.2 Dreamweaver CS5站点管理
第 5章 网页制作软件 Dreamweaver CS5
5.3 网页制作基本操作
5.4 网页布局
5.5 行为 5.6 典型习题
本章要点
• 自定义Dreamweaver CS5的工作界面与工作环境
微视频5-3 演示
5.3 网页制作基本操作
5.3.3 插入图像
3. 编辑图像
插入图像后选中该图像，“属性”面板还提供了对图像的编辑功能。
单击 “裁剪” 按钮删除图像 单击“重新取样”按钮 重新计算图像数 据量，以适应当前图像 大小
中选定区域以外的多余部分
单击“亮度和对比度”按钮 设置亮度、对比度参数
2. 设置图像属性
选中图像，拖动控制柄。
• 将光标分别定位至三个控制 柄处，可以分别对图像进行 水平拉伸、对角拉伸、垂直 拉伸 • 按住Shift键进行对角拉伸， 则是对图像等比例缩放。
5.3 网页制作基本操作
5.3.3 插入图像
2. 设置图像属性
选中图像，拖动控制柄。 利用“属性”面板，对图像做设置。
单击菜单栏“文件”|“新 建”命令，打开“新建文 档”对话框
5.2 Dreamweaver CS5站点管理
5.2.2 文件的新建和管理
1. 创建文件
方式一：
选择合适对象后， 单击“创建”按钮
5.2 Dreamweaver CS5站点管理
5.2.2 文件的新建和管理
1. 创建文件
方式三：
也可以通过单击“文件”面板右上角按 钮，在弹出的“文件”菜单项中完成 文 件新建。若选择“新建文件夹”，则在 当前文件夹下新建下级文件夹
5.3 网页制作基本操作
5.3.2 网页的文字处理
2. 设置文本属性
文本属性设置包括设置文本字体、颜色、链接样式等。 （1）在“页面属性”对话框中设置文本
微视频5-1 演示
（2）在“属性”面板中设置文本 • CSS属性检查器：在“属性”面板中单击按钮 • HTML属性检查器：在“属性”面板中单击按钮
在“文件”面板“本地文件”列表中，右键单击选择好的文件夹，在弹出的 快捷菜单中选择“新建文件”命令，则在该文件夹下创建一个html文件，对 其命名
5.2 Dreamweaver CS5站点管理
5.2.2 文件的新建和管理
2. 管理文件
在“文件”面板“本地文件”列表中 ： 选中对象，单击右键，在弹出的快捷菜单中选择“编辑”命令， 通过下级菜单管理文件。 选中要移动的对象，拖到相应的位置 ，实现文件或文件夹的移动 操作 。 选择文件夹双击，则在列表中展开或折叠文件夹；选择文件双击， 则在工作界面打开该文件。
（1）水平线 （2）特殊符号 （3）标记列表
单击菜单栏“格式”|“列表”命令 ，通过其级联菜 单项完成操作 单击菜单栏“插入”|“HTML”|“水平线”命令
单击菜单栏“插入”|“HTML”|“特殊字符”命令， 通过其级联菜单项完成操作
“属性”面板HTML属性检查器中
也提供列表项设置
5.3 网页制作基本操作
Dreamweaver CS4
Dreamweaver CS5 Dreamweaver CS5.5
Dreamweaver CS6
Dreamweaver CC ……
5.1 Dreamweaver CS5概述
5.1.2 Dreamweaver CS5工作界面与工作环境
Dreamweaver CS5工作区的操作界面主要包括菜单栏、工具 栏、状态栏、属性面板和浮动面板组等。
有.asp、.aspx、.php、.jsp等格式
a.html
静态网页文件后缀名 常见.htm或.html
Baidu Nhomakorabea
b.html
c.html
d.html
e.php
ca.html
cb.html
cc.html
ea.html
站点文件夹：网站中所有相关文件必须存放在站点文件夹中。
5.2 Dreamweaver CS5站点管理
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
• 在左侧列表中选择 “HTML标签”，在右侧 列表中选择“marquee”， 单击“插入”按钮，再 单击“关闭”按钮。 • 此时代码区生成代码 <marquee>hello</marqu ee>。 • 保存网页后预览，此 时设置滚动字幕用的是 marquee标签的默认属 性。
选中链源 ，单击 “浏览文件”按钮 ，打开 “选择文件”对话框，选择要链接的文件
链宿在何区域打 开
5.3 网页制作基本操作
5.3.4 建立超链接
1. 文本链接
方式一：使用“属性”面板 方式二：使用“超级链接”对话框 方式三：使用快捷菜单 单击菜单栏“插入”|“超级链接”命令，打开“超级链接”对话框， 设置好参数后，单击“确定”按钮。 选中需要为其创建超链接的文本内容，在其上单击鼠标右键，在弹 2. 图像链接 出的快捷菜单中选择“创建链接”命令，打开“选择文件”对话框， 设置好后单击“确定”按钮。 与文本链接方法类似
单击“锐化”按钮 设置参数， 增加图像边缘的对 比度
5.3 网页制作基本操作
5.3.3 插入图像
4. 设置背景图像
设置方式 • 在“页面属性”对话框中，“外观（CSS）”和“外观 （HTML）”栏都有关于背景图像的设置。 • 用户在自定义CSS样式表中， 通过Background-image属性设 置。 背景图像样式 当背景图像没有浏览界面大时，背景图像将被复制平铺 • no-repeat（不重复）：只在图像元素的开始处显示一次图像。 • repeat（重复）：在图像元素的水平方向和垂直方向平铺图像。 当不指定平铺方式时，这是默认方式。 • repeat-x（横向重复）：在水平方向进行图像的重复显示。 • repeat-y（垂直重复）：在垂直方向进行图像的重复显示。
5.2 Dreamweaver CS5站点管理
5.2.2 文件的新建和管理
1. 创建文件
方式一：
在“欢迎屏幕”的“新建” 栏中单击合适的文件类型
单击“更多”打开“新建文档” 对话框，为用户提供更多的选 择
5.2 Dreamweaver CS5站点管理
5.2.2 文件的新建和管理
1. 创建文件
方式二：
5.3.3 插入图像
1. 插入一般图像
通过单击菜单栏“插入”|“图像”命令插入图像。 对跳出的“图像标签辅助功能属性”对话框，可以不设置，直接 单击“确定”按钮。
应该插入站点文件夹中的图像；若不是站点文件夹中的图像，会 有消息框提示将此图像存至站点文件夹。
5.3 网页制作基本操作
5.3.3 插入图像
打开“高级设置”对话框，单 击“物理路径”文本框右侧按 钮，设置好站点文件夹后，单 击“确定”按钮
5.3 网页制作基本操作
5.3.1 设置网页属性
单击工作界面下方“属性”面板 中的“页面属性”按钮，打开 “页面属性”对话框
5.3 网页制作基本操作
5.3.2 网页的文字处理
1. 添加文字
将光标置于网页中，直接输入文字内容。输入文本时，若文本要 换行有两种方式。 • 直接按<Enter>键 。上一行与下一行之间空出一行的距离，在 代码区对应的HTML标记是<p>，这是分段。 • 按<Shift>+<Enter>键进行强制换行，上一行与下一行之间很 紧密，对应的HTML标记是<br> 输入空格：按<Ctrl>+<Shift>+<Space>键，对应的HTML标记是 “ ” 。 从外部导入Word、Excel等文档。 • 例：要导入Word文档，单击菜单栏“文件”|“导入”|“Word 文档”命令，打开“导入Word文档”对话框，选择要导入的 文件，单击“打开”按钮，文本内容就被导入至网页中。
• 网站与网页的创建与管理
• 网页制作的基本操作
• CSS样式表的创建与使用 • 网页的各种布局方式 • 行为的应用
5.1 Dreamweaver CS5概述
5.1.1 Dreamweaver的发展
Dreamweaver 1.0 Dreamweaver CS3
Dreamweaver 2.0
Dreamweaver 2.01 Dreamweaver 3 Macromedia Dreamweaver 4 时代 Dreamweaver 5 Dreamweaver MX Dreamweaver MX 2004 Dreamweaver 8.0 Adobe 时代
微视频5-2 演示
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
滚动字幕是用来显示滚动文本的，如网站的最新通知等。字幕 可以水平滚动，也可以上下滚动。 在Dreamweaver CS5中利用<marquee>标签插入字幕 。
选中要做字幕的 文本 ，单击菜单 栏“插入”|“标 签”命令，打开 “标签选择器” 对话框
5.2.1 站点的创建和管理
1. 创建本地站点 站点：是一种管理网站中所有相关联文档的工具，是一种文档的组 织形式。 单击菜单栏“站点”|“新建站点”命令，打开“站点设置对象” 对话框
5.2 Dreamweaver CS5站点管理
5.2.1 站点的创建和管理
2. 管理站点 单击菜单栏“窗口”|“文件”命令，出现“文件”面板，其下拉 列表框中会出现当前站点名称。 单击下拉列表框，在下拉列表中会出现所有已经创建好的站点， 若选择“管理站点”选项，则打开“管理站点”对话框，或者直 接单击菜单栏“站点”|“管理站点”命令也可打开此对话框
5.2 Dreamweaver CS5站点管理
5.2.3 站点的发布（Windows 7旗舰版平台 ）
1. 安装Internet信息服务
单击“开始”菜单 “控制面板”命令，在窗体中选择“卸载程 2. Web服务器设置 序”，再单击窗体左侧“打开或关闭Windows功能”。 在弹出的“Windows 功能”对话框中，若“Internet信息服务”复 单击“开始”菜单 |“控制面板”命令，在窗体中选择“系统和安 3. IE浏览 选框已勾选，说明本机已安装该组件，否则选中此复选框，单击 全”，再单击窗体右侧“管理工具”，然后启动“ Internet信息服务 启动本机（ Web服务器）IE浏览器，在地址栏输入本机IP地址或 “确定”按钮，等待安装完成。 (IIS) 管理器”应用程序 localhost，进入网站的首页“index.html”
代码区
编码工具栏
浮动面板组
状态栏 属性面板
设计区
5.2 Dreamweaver CS5站点管理
网站结构示意图
主页：网站入口，即在浏览器地址栏输 入网站域名后首先看到的那页
对网页中的文字、图像做 超链接，跳转至其它页面
index.html 动态网页文件后缀名
5.3 网页制作基本操作
5.3.3 插入图像
5. 插入图像占位符
在设计网页过程中，有时当要往网页中插入图像时却 没有合适的图像，这时可以先插入图像占位符代替图 像，为图像预留指定大小的空间，而不影响设计。
鼠标移至图像时，该图像切换为另一幅图像，鼠标 将光标置于网页中待插入图像位置，单击菜单栏“插入” |“图像对 从图像移走时，又恢复为原始图像 象” |“图像占位符”命令，打开“图像占位符”对话框 6. 插入鼠标经过图像
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
• 在网页中选中字幕文 本，单击工作界面状 态栏“<marquee>”标 签 • 按<Ctrl>+<T>键打开 “快速标签编辑器” • 修改“<marquee>” 标签的属性
5.3 网页制作基本操作
5.3.2 网页的文字处理
4. 其他修饰
单击菜单栏“插入”|“图像对象”|“鼠标经过图像”命令，打开“插 入鼠标经过图像”对话框 ，完成设置后单击“确定”按钮。
这两幅图像若篇幅大小不同，Dreamweaver CS5会自动调整第二幅 图像篇幅，使其与第一幅图像匹配
5.3 网页制作基本操作
5.3.4 建立超链接
1. 文本链接
方式一：使用“属性”面板
5.3 网页制作基本操作
5.3.4 建立超链接
3. 图像热点链接
图像热点——将图像划分成小块区域，为每个区域单独做超链接， 这样带有链接的区域就称为图像的热点。
5.3 网页制作基本操作
5.3.4 建立超链接
课件制作：周萱
5.1 Dreamweaver CS5概述 5.2 Dreamweaver CS5站点管理
第 5章 网页制作软件 Dreamweaver CS5
5.3 网页制作基本操作
5.4 网页布局
5.5 行为 5.6 典型习题
本章要点
• 自定义Dreamweaver CS5的工作界面与工作环境
微视频5-3 演示
5.3 网页制作基本操作
5.3.3 插入图像
3. 编辑图像
插入图像后选中该图像，“属性”面板还提供了对图像的编辑功能。
单击 “裁剪” 按钮删除图像 单击“重新取样”按钮 重新计算图像数 据量，以适应当前图像 大小
中选定区域以外的多余部分
单击“亮度和对比度”按钮 设置亮度、对比度参数
2. 设置图像属性
选中图像，拖动控制柄。
• 将光标分别定位至三个控制 柄处，可以分别对图像进行 水平拉伸、对角拉伸、垂直 拉伸 • 按住Shift键进行对角拉伸， 则是对图像等比例缩放。
5.3 网页制作基本操作
5.3.3 插入图像
2. 设置图像属性
选中图像，拖动控制柄。 利用“属性”面板，对图像做设置。
单击菜单栏“文件”|“新 建”命令，打开“新建文 档”对话框
5.2 Dreamweaver CS5站点管理
5.2.2 文件的新建和管理
1. 创建文件
方式一：
选择合适对象后， 单击“创建”按钮
5.2 Dreamweaver CS5站点管理
5.2.2 文件的新建和管理
1. 创建文件
方式三：
也可以通过单击“文件”面板右上角按 钮，在弹出的“文件”菜单项中完成 文 件新建。若选择“新建文件夹”，则在 当前文件夹下新建下级文件夹
5.3 网页制作基本操作
5.3.2 网页的文字处理
2. 设置文本属性
文本属性设置包括设置文本字体、颜色、链接样式等。 （1）在“页面属性”对话框中设置文本
微视频5-1 演示
（2）在“属性”面板中设置文本 • CSS属性检查器：在“属性”面板中单击按钮 • HTML属性检查器：在“属性”面板中单击按钮
在“文件”面板“本地文件”列表中，右键单击选择好的文件夹，在弹出的 快捷菜单中选择“新建文件”命令，则在该文件夹下创建一个html文件，对 其命名
5.2 Dreamweaver CS5站点管理
5.2.2 文件的新建和管理
2. 管理文件
在“文件”面板“本地文件”列表中 ： 选中对象，单击右键，在弹出的快捷菜单中选择“编辑”命令， 通过下级菜单管理文件。 选中要移动的对象，拖到相应的位置 ，实现文件或文件夹的移动 操作 。 选择文件夹双击，则在列表中展开或折叠文件夹；选择文件双击， 则在工作界面打开该文件。
（1）水平线 （2）特殊符号 （3）标记列表
单击菜单栏“格式”|“列表”命令 ，通过其级联菜 单项完成操作 单击菜单栏“插入”|“HTML”|“水平线”命令
单击菜单栏“插入”|“HTML”|“特殊字符”命令， 通过其级联菜单项完成操作
“属性”面板HTML属性检查器中
也提供列表项设置
5.3 网页制作基本操作
Dreamweaver CS4
Dreamweaver CS5 Dreamweaver CS5.5
Dreamweaver CS6
Dreamweaver CC ……
5.1 Dreamweaver CS5概述
5.1.2 Dreamweaver CS5工作界面与工作环境
Dreamweaver CS5工作区的操作界面主要包括菜单栏、工具 栏、状态栏、属性面板和浮动面板组等。
有.asp、.aspx、.php、.jsp等格式
a.html
静态网页文件后缀名 常见.htm或.html
Baidu Nhomakorabea
b.html
c.html
d.html
e.php
ca.html
cb.html
cc.html
ea.html
站点文件夹：网站中所有相关文件必须存放在站点文件夹中。
5.2 Dreamweaver CS5站点管理
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
• 在左侧列表中选择 “HTML标签”，在右侧 列表中选择“marquee”， 单击“插入”按钮，再 单击“关闭”按钮。 • 此时代码区生成代码 <marquee>hello</marqu ee>。 • 保存网页后预览，此 时设置滚动字幕用的是 marquee标签的默认属 性。
选中链源 ，单击 “浏览文件”按钮 ，打开 “选择文件”对话框，选择要链接的文件
链宿在何区域打 开
5.3 网页制作基本操作
5.3.4 建立超链接
1. 文本链接
方式一：使用“属性”面板 方式二：使用“超级链接”对话框 方式三：使用快捷菜单 单击菜单栏“插入”|“超级链接”命令，打开“超级链接”对话框， 设置好参数后，单击“确定”按钮。 选中需要为其创建超链接的文本内容，在其上单击鼠标右键，在弹 2. 图像链接 出的快捷菜单中选择“创建链接”命令，打开“选择文件”对话框， 设置好后单击“确定”按钮。 与文本链接方法类似
单击“锐化”按钮 设置参数， 增加图像边缘的对 比度
5.3 网页制作基本操作
5.3.3 插入图像
4. 设置背景图像
设置方式 • 在“页面属性”对话框中，“外观（CSS）”和“外观 （HTML）”栏都有关于背景图像的设置。 • 用户在自定义CSS样式表中， 通过Background-image属性设 置。 背景图像样式 当背景图像没有浏览界面大时，背景图像将被复制平铺 • no-repeat（不重复）：只在图像元素的开始处显示一次图像。 • repeat（重复）：在图像元素的水平方向和垂直方向平铺图像。 当不指定平铺方式时，这是默认方式。 • repeat-x（横向重复）：在水平方向进行图像的重复显示。 • repeat-y（垂直重复）：在垂直方向进行图像的重复显示。
5.2 Dreamweaver CS5站点管理
5.2.2 文件的新建和管理
1. 创建文件
方式一：
在“欢迎屏幕”的“新建” 栏中单击合适的文件类型
单击“更多”打开“新建文档” 对话框，为用户提供更多的选 择
5.2 Dreamweaver CS5站点管理
5.2.2 文件的新建和管理
1. 创建文件
方式二：
5.3.3 插入图像
1. 插入一般图像
通过单击菜单栏“插入”|“图像”命令插入图像。 对跳出的“图像标签辅助功能属性”对话框，可以不设置，直接 单击“确定”按钮。
应该插入站点文件夹中的图像；若不是站点文件夹中的图像，会 有消息框提示将此图像存至站点文件夹。
5.3 网页制作基本操作
5.3.3 插入图像
打开“高级设置”对话框，单 击“物理路径”文本框右侧按 钮，设置好站点文件夹后，单 击“确定”按钮
5.3 网页制作基本操作
5.3.1 设置网页属性
单击工作界面下方“属性”面板 中的“页面属性”按钮，打开 “页面属性”对话框
5.3 网页制作基本操作
5.3.2 网页的文字处理
1. 添加文字
将光标置于网页中，直接输入文字内容。输入文本时，若文本要 换行有两种方式。 • 直接按<Enter>键 。上一行与下一行之间空出一行的距离，在 代码区对应的HTML标记是<p>，这是分段。 • 按<Shift>+<Enter>键进行强制换行，上一行与下一行之间很 紧密，对应的HTML标记是<br> 输入空格：按<Ctrl>+<Shift>+<Space>键，对应的HTML标记是 “ ” 。 从外部导入Word、Excel等文档。 • 例：要导入Word文档，单击菜单栏“文件”|“导入”|“Word 文档”命令，打开“导入Word文档”对话框，选择要导入的 文件，单击“打开”按钮，文本内容就被导入至网页中。
• 网站与网页的创建与管理
• 网页制作的基本操作
• CSS样式表的创建与使用 • 网页的各种布局方式 • 行为的应用
5.1 Dreamweaver CS5概述
5.1.1 Dreamweaver的发展
Dreamweaver 1.0 Dreamweaver CS3
Dreamweaver 2.0
Dreamweaver 2.01 Dreamweaver 3 Macromedia Dreamweaver 4 时代 Dreamweaver 5 Dreamweaver MX Dreamweaver MX 2004 Dreamweaver 8.0 Adobe 时代
微视频5-2 演示
5.3 网页制作基本操作
5.3.2 网页的文字处理
3. 设置滚动字幕
滚动字幕是用来显示滚动文本的，如网站的最新通知等。字幕 可以水平滚动，也可以上下滚动。 在Dreamweaver CS5中利用<marquee>标签插入字幕 。
选中要做字幕的 文本 ，单击菜单 栏“插入”|“标 签”命令，打开 “标签选择器” 对话框
5.2.1 站点的创建和管理
1. 创建本地站点 站点：是一种管理网站中所有相关联文档的工具，是一种文档的组 织形式。 单击菜单栏“站点”|“新建站点”命令，打开“站点设置对象” 对话框
5.2 Dreamweaver CS5站点管理
5.2.1 站点的创建和管理
2. 管理站点 单击菜单栏“窗口”|“文件”命令，出现“文件”面板，其下拉 列表框中会出现当前站点名称。 单击下拉列表框，在下拉列表中会出现所有已经创建好的站点， 若选择“管理站点”选项，则打开“管理站点”对话框，或者直 接单击菜单栏“站点”|“管理站点”命令也可打开此对话框
5.2 Dreamweaver CS5站点管理
5.2.3 站点的发布（Windows 7旗舰版平台 ）
1. 安装Internet信息服务
单击“开始”菜单 “控制面板”命令，在窗体中选择“卸载程 2. Web服务器设置 序”，再单击窗体左侧“打开或关闭Windows功能”。 在弹出的“Windows 功能”对话框中，若“Internet信息服务”复 单击“开始”菜单 |“控制面板”命令，在窗体中选择“系统和安 3. IE浏览 选框已勾选，说明本机已安装该组件，否则选中此复选框，单击 全”，再单击窗体右侧“管理工具”，然后启动“ Internet信息服务 启动本机（ Web服务器）IE浏览器，在地址栏输入本机IP地址或 “确定”按钮，等待安装完成。 (IIS) 管理器”应用程序 localhost，进入网站的首页“index.html”