Transcript 第6章Dreamweaver网页制作技术

大学计算机
目
录
第六章 Dreamweaver网页制作技术
6.1 Adobe Dreamweaver CS6的基本操作
6.2 超链接
6.3 表单
6.4 框架技术
第1章 大学计算机基础
2013年7月1日1时4分
2
6.1 Dreamweaver CS6的基本操作
• Dreamweaver原是美国MACROMEDIA公司开发的集网页
制作和管理网站于一身的所见即所得网页制作工具，具有
Mac和Windows系统的版本。2005年，Macromedia被
Adobe收购后，Adobe也开始计划开发Linux版本的
Dreamweaver了。Dreamweaver具有网站的创建、发布、
管理、网页的设计、编辑等功能，功能强大且简便易用。
是一款非常优秀的跨越平台限制和跨越浏览器限制的网页
制作工具。
• 作为专门的网页制作工具，Adobe Dreamweaver CS6具
有很强的网页编辑功能。在Adobe Dreamweaver CS6中，
用户对网页中的文本、图像、组件、声音和视频等网页元
素进行处理是非常方便的。本节介绍在Adobe
Dreamweaver CS6中添加和处理网页中文本、图像等基
本网页元素的方法。
3
6.1 Dreamweaver CS6的基本操作
•
•
•
•
•
•
•
•
•
•
6.1.1 Adobe Dreamweaver CS6的启动和退出
6.1.2 Adobe Dreamweaver CS6窗口结构
6.1.3 创建、打开和保存网页
6.1.4 创建和管理站点
6.1.5 输入和修饰文本
6.1.6 图像
6.1.7 表格
6.1.8 声音和视频和FLASH
6.1.9 插入特殊对象
6.1.10 页面属性
4
6.1.1 Dreamweaver的启动和退出
• 1．启动Adobe Dreamweaver CS6
• 启动Adobe Dreamweaver CS6有以下3种方法：
• 菜单命令方式启动。单击“开始”菜单，选择“所有程序
”子菜单中的“Adobe Dreamweaver CS6”命令，即可启
动Adobe Dreamweaver CS6。
• 桌面快捷方式启动。如果用户要经常使用Adobe
Dreamweaver CS6，可以在桌面上创建Adobe
Dreamweaver CS6的快捷方式。双击Microsoft Office
Adobe Dreamweaver CS6快捷方式图标，即可启动
Adobe Dreamweaver CS6。
• 文档方式启动。如果用户要编辑修改已经存在的网页，则
右击该文件，在弹出快捷菜单的子菜单“打开方式”中单
击“Adobe Dreamweaver CS6”命令，即可启动Adobe
Dreamweaver CS6并随之打开该文件。
5
6.1.1 Dreamweaver的启动和退出
• 退出Adobe Dreamweaver CS6有以下4种方法：
• 单击Adobe Dreamweaver CS6“文件”菜单中的“
退出”命令。
• 直接按【Alt+F4】组合键。
• 单击Adobe Dreamweaver CS6窗口右上角的“关
闭”按钮。
• 单击窗口左上角的控制按钮，打开Adobe
Dreamweaver CS6控制菜单，从中单击“关闭”
命令或直接双击窗口左上角的Adobe
Dreamweaver CS6标记。
6
6.1.2 Dreamweaver CS6窗口结构
7
6.1.2 Dreamweaver CS6窗口结构
•
•
•
•
•
1．标题菜单栏
2．文档工具栏
3．编辑区
4．属性面板
5．辅助面板
8
2．文档工具栏
• “设计”视图模式是默认的视图模式，在该视图
中用户可以通过“所见即所得”的方式编辑网页
，和在Word中编辑文档类似。
• “代码”视图模式可以直接编辑HTML、CSS等
各类网页源代码。
• “拆分”视图模式可以同时看到“设计”视图和
“代码”视图，方面用户同时进行页面设计和代
码编写。
• “实时视图”模式让用户预览网页效果，一般和
浏览器中看到的一样。该视图中文档不可编辑。
9
6.1.3 创建、打开和保存网页
• 在Adobe Dreamweaver CS6中，可以在站
点中创建网页，或创建独立的网页。Adobe
Dreamweaver CS6 提供各类模板可以帮助
用户创建以下不同种类的网页。
• 在Adobe Dreamweaver CS6中创建新网页
的基本方法有两种：
– （1）利用默认启始页创建
– （2）利用“文件”菜单中“新建”命令创建
10
6.1.4 创建和管理站点
• 网站分为静态网站和动态网站，动态网站比较复
杂，一般需要连接数据库，能根据浏览者的不同
选择给出不同的响应，需要专门的WEB服务器进
行调试。静态网站主页用于展示，保护文本、图
像、FLASH动画等，基于文件系统就可以了，只
需要浏览器就可以查看效果。
– 单击“站点”菜单中的“新建站点”命令，则弹出“
站点设置对象”对话框
– 单击“站点”菜单中的“管理站点”命令，则弹出“
管理站点”对话框
11
6.1.5 输入和修饰文本
• 输入文本
– 在网页中输入文本的方法和Word 2010的方法
相似
• 修饰文本
– 目标规则来实现(新建 CSS规则 )
– 通过“辅助面板”中的“CSS样式面板”
12
6.1.6 图像
• 适合网页中使用的图像格式是JPEG、GIF
格式，因为这些图像格式都经过压缩，占
用资源较少，建议在网页上的图像尽量使
用这几种格式。
• PNG格式图片因其高保真性、透明性及文
件体积较小等特性，被广泛应用于网页设
计、平面设计中。
13
6.1.6 图像
• 1．插入图像
– （1）在网页中插入来自文件的图片
– （2）通过“剪贴板”插入图片
• 2．插入图像对象
• 3．设置图像属性
• 注意:网页中的图像独立保存,一般保存在站
点下的images 文件夹中
14
6.1.7 表格
• Adobe Dreamweaver CS6中的表格不仅可
以用来做基本的数据处理，通常还用做网
页的整体布局设计。实际上所有的Web浏
览器都支持表格，表格已经成为布置网页
的一个简便有效的方法。
创建表格
表格属性
单元格属性
表格嵌套
15
6.1.8 声音和视频和FLASH
• 1．在网页中添加声音
• 在网页中添加声音有两种方式:
• 一种是设置网页的背景音乐
– 单击“插入”菜单中“媒体”子菜单的“插件
”命令
• 另一种方式是添加音乐文件的超链接
– (见6.2)
16
6.1.8 声音和视频和FLASH
• 2．视频
• FLV 是一种全新的流媒体视频格式，它利
用了网页上广泛使用的Flash Player 平台
，将视频整合到Flash 动画中。FLV无需再
额外安装其它视频插件，它使用给互联网
视频传播带来了极大便利。
– 单击“插入”菜单，选择“媒体”子菜单中的
“FLV”命令，则弹出“插入FLV”对话框 完成
17
6.1.8 声音和视频和FLASH
• 3．Flash动画
• Flash动画以容量小，效果丰富等特点深受
网页设计人员喜爱。在Adobe
Dreamweaver CS6可以非常方便地插入
Flash动画 。
– 单击“插入”菜单，选择“媒体”子菜单中的
“SWF”命令，则弹出“选择SWF”对话框完成
18
6.1.9 插入特殊对象
•
•
•
•
•
1．插入换行符
2．插入水平线
3．插入日期时间
4．插入符号
5．插入注释
19
6.1.10 页面属性
• 用户可以通过页面属性设置整个网页的外观效果
，如文本默认字体、背景颜色、背景图片、页面
边距、标题、编码等。
• 设置的方法是单击“修改”菜单中的“页面属性
”命令打开“页面属性”对话框
• 背景图像重复模式 ：
 no-repeat：不重复背景图片
 repeat： x方向和y方向即水平和竖直方向同时重复背
景图片
 repeat-x：x方向即水平方向重复背景图片
 repeat-y：y方向即竖直方向重复背景图片
20
6.2 超链接
• 超链接是将网站上的网页有机结合在一起
的有效方式，是从一个网页指向另一个目
的端的链接，比如说指向另一个网页或者
相同网页上的不同位置。
• 当一个站点访问者单击超链接时，目的端
将显示在Web浏览器上，并根据目的端的
类型打开或运行。
21
6.2 超链接
•
•
•
•
6.2.1 超链接的基本操作
6.2.2 文本和默认图形超链接
6.2.3 图形热点
6.2.4 锚记链接和电子邮件链接
22
6.2.1 超链接的基本操作
• 1．创建超链接
– 在创建超链接时要注意两个问题，一个是目的端，即
所链接到的URL地址；另一个是超链接的对象，即用
以显示超链接所在位置的文本或图片。
• 2．跟踪超链接
– 右击超链接，然后在快捷菜单上单击“打开链接页面
”命令
• 3．编辑超链接
– 单击“修改”菜单中的“更改链接”命令
• 4．删除超链接
– 按【Delete】键或单击“修改”菜单中的“移除链接
”命令
23
6.2.2 文本和默认图形超链接
• 1．文本超链接
– 选择文本,单击“插入”菜单中的“超链接”命
令
• 2．默认图形超链接
24
6.2.3 图形热点
• 热点是在图形上分配超链接的区域，当站
点访问者单击区域时，超链接目的地址被
显示在Web浏览器中。
• 热点的形状有矩形、圆形和多边形3种
1．在图形中添加热点
2．修改和删除热点
3．突出显示热点
25
6.2.4 锚记链接和电子邮件链接
• 1．锚记链接
• 锚记链接的创建和其他超链接不同，需要
在网页中添加锚记，然后再创建超链接。
– 单击“插入”菜单中的“命名锚记”命令，弹
出“命名锚记”对话框。在锚记名称中输入锚
名。单击“确定”按钮，则在网页中添加了锚
记。
• 2．电子邮件超链接
– 单击“插入”菜单中的“电子邮件链接”命令
，弹出“电子邮件链接”对话框
26
6.3 表单
• 表单是用来收集站点访问者信息的域集。站点访问者填表单的方式是
输入文本、单击单选按钮或复选框，以及从下拉菜单中选择选项。在
填好表单之后，站点访问者便送出所输入的数据，该数据就会根据您
所设置的表单处理程序，以各种不同的方式进行处理。
• 表单可以用来收集联系信息，接收要求，收集订单、出货和收费明细
，获得回复，设置来宾签名簿，让访问者以输入查询的方式搜索站点
，提示访问者登录站点。
• 用户可以构造一张空白表单，并向该表单添加域，或是使用模板或向
导来创建表单。用户可以在网页上现有表单外的任何位置创建表单。
Adobe Dreamweaver CS6会插入一个矩形虚线框区域，用户可以根
据需要添加文本和表单域，例如文本框、单选按钮、复选框、下拉菜
单以及按钮等。
• 表单一般包含一个“提交”按钮和一个“重置”按钮。单击“提交”
按钮，表单的数据会被提交到表单处理程序。在默认情况下，表单结
果会被保存为文本文件。单击“重置”按钮，则恢复到表单的默认状
态。
27
6.3 表单
28
6.4 框架技术
• 框架网页是一种特别的网页，它可将浏览器视窗
分为不同的框架，每一个框架可显示不同的网页
。当在框架网页的超链接上单击时，则超链接所
指向的网页可在其他框架中显示。
• 一个完整的框架包括框架和框架集。框架集就是
框架的集合，它将窗口分割成多个框架。
• 框架本身并不包含实际的网页内容，它只是一个
指定其他网页且如何显示网页的容器。
29
6.4 框架技术
• 框架网页可以在新建网页后，通过“修改
”菜单的“框架集”子菜单的“拆分框架
”命令来完成 。
• 选中“窗口”中的“框架”命令，可以显
示框架面板。
• 用户可以通过框架面板来选择框架集合框
架，然后可在属性面板中设置框架集合框
架属性。
30
6.4 框架技术
31
6.4 框架技术
32
谢谢！
Thank you!
第1章 大学计算机基础
2013年7月1日1时4分
33