大学计算机.

Presentation on theme: "大学计算机."— Presentation transcript:

1 大学计算机

2 目录 第六章 Dreamweaver网页制作技术 6.1 Adobe Dreamweaver CS6的基本操作 6.2 超链接 6.3 表单
6.4 框架技术 第1章 大学计算机基础 2013年7月1日1时4分 2

3 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

4 6.1 Dreamweaver CS6的基本操作 6.1.1 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 插入特殊对象 页面属性

5 6.1.1 Dreamweaver的启动和退出 1．启动Adobe Dreamweaver CS6
菜单命令方式启动。单击“开始”菜单，选择“所有程序”子菜单中的“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并随之打开该文件。

6 6.1.1 Dreamweaver的启动和退出 退出Adobe Dreamweaver CS6有以下4种方法：
直接按【Alt+F4】组合键。 单击Adobe Dreamweaver CS6窗口右上角的“关闭”按钮。 单击窗口左上角的控制按钮，打开Adobe Dreamweaver CS6控制菜单，从中单击“关闭”命令或直接双击窗口左上角的Adobe Dreamweaver CS6标记。

7 6.1.2 Dreamweaver CS6窗口结构

8 6.1.2 Dreamweaver CS6窗口结构 1．标题菜单栏 2．文档工具栏 3．编辑区 4．属性面板 5．辅助面板

9 2．文档工具栏 “设计”视图模式是默认的视图模式，在该视图中用户可以通过“所见即所得”的方式编辑网页，和在Word中编辑文档类似。
“代码”视图模式可以直接编辑HTML、CSS等各类网页源代码。 “拆分”视图模式可以同时看到“设计”视图和“代码”视图，方面用户同时进行页面设计和代码编写。 “实时视图”模式让用户预览网页效果，一般和浏览器中看到的一样。该视图中文档不可编辑。

10 6.1.3 创建、打开和保存网页 在Adobe Dreamweaver CS6中，可以在站点中创建网页，或创建独立的网页。Adobe Dreamweaver CS6 提供各类模板可以帮助用户创建以下不同种类的网页。 在Adobe Dreamweaver CS6中创建新网页的基本方法有两种： （1）利用默认启始页创建 （2）利用“文件”菜单中“新建”命令创建

11 6.1.4 创建和管理站点 网站分为静态网站和动态网站，动态网站比较复杂，一般需要连接数据库，能根据浏览者的不同选择给出不同的响应，需要专门的WEB服务器进行调试。静态网站主页用于展示，保护文本、图像、FLASH动画等，基于文件系统就可以了，只需要浏览器就可以查看效果。 单击“站点”菜单中的“新建站点”命令，则弹出“站点设置对象”对话框 单击“站点”菜单中的“管理站点”命令，则弹出“管理站点”对话框

12 6.1.5 输入和修饰文本 输入文本 修饰文本 在网页中输入文本的方法和Word 2010的方法相似 目标规则来实现(新建 CSS规则 )

13 6.1.6 图像 适合网页中使用的图像格式是JPEG、GIF格式，因为这些图像格式都经过压缩，占用资源较少，建议在网页上的图像尽量使用这几种格式。 PNG格式图片因其高保真性、透明性及文件体积较小等特性，被广泛应用于网页设计、平面设计中。

14 6.1.6 图像 1．插入图像 2．插入图像对象 3．设置图像属性 注意:网页中的图像独立保存,一般保存在站点下的images 文件夹中
（1）在网页中插入来自文件的图片 （2）通过“剪贴板”插入图片 2．插入图像对象 3．设置图像属性 注意:网页中的图像独立保存,一般保存在站点下的images 文件夹中

15 6.1.7 表格 Adobe Dreamweaver CS6中的表格不仅可以用来做基本的数据处理，通常还用做网页的整体布局设计。实际上所有的Web浏览器都支持表格，表格已经成为布置网页的一个简便有效的方法。 创建表格 表格属性 单元格属性 表格嵌套

16 6.1.8 声音和视频和FLASH 1．在网页中添加声音 在网页中添加声音有两种方式: 一种是设置网页的背景音乐
单击“插入”菜单中“媒体”子菜单的“插件”命令 另一种方式是添加音乐文件的超链接 (见6.2)

17 6.1.8 声音和视频和FLASH 2．视频 FLV 是一种全新的流媒体视频格式，它利用了网页上广泛使用的Flash Player 平台，将视频整合到Flash 动画中。FLV无需再额外安装其它视频插件，它使用给互联网视频传播带来了极大便利。 单击“插入”菜单，选择“媒体”子菜单中的“FLV”命令，则弹出“插入FLV”对话框 完成

18 6.1.8 声音和视频和FLASH 3．Flash动画 Flash动画以容量小，效果丰富等特点深受网页设计人员喜爱。在Adobe Dreamweaver CS6可以非常方便地插入Flash动画 。 单击“插入”菜单，选择“媒体”子菜单中的“SWF”命令，则弹出“选择SWF”对话框完成

19 6.1.9 插入特殊对象 1．插入换行符 2．插入水平线 3．插入日期时间 4．插入符号 5．插入注释

20 6.1.10 页面属性 用户可以通过页面属性设置整个网页的外观效果，如文本默认字体、背景颜色、背景图片、页面边距、标题、编码等。
设置的方法是单击“修改”菜单中的“页面属性”命令打开“页面属性”对话框 背景图像重复模式 ： no-repeat：不重复背景图片 repeat： x方向和y方向即水平和竖直方向同时重复背景图片 repeat-x：x方向即水平方向重复背景图片 repeat-y：y方向即竖直方向重复背景图片

21 6.2 超链接 超链接是将网站上的网页有机结合在一起的有效方式，是从一个网页指向另一个目的端的链接，比如说指向另一个网页或者相同网页上的不同位置。 当一个站点访问者单击超链接时，目的端将显示在Web浏览器上，并根据目的端的类型打开或运行。

22 6.2 超链接 6.2.1 超链接的基本操作 6.2.2 文本和默认图形超链接 6.2.3 图形热点 6.2.4 锚记链接和电子邮件链接

23 6.2.1 超链接的基本操作 1．创建超链接 2．跟踪超链接 3．编辑超链接 4．删除超链接
在创建超链接时要注意两个问题，一个是目的端，即所链接到的URL地址；另一个是超链接的对象，即用以显示超链接所在位置的文本或图片。 2．跟踪超链接 右击超链接，然后在快捷菜单上单击“打开链接页面”命令 3．编辑超链接 单击“修改”菜单中的“更改链接”命令 4．删除超链接 按【Delete】键或单击“修改”菜单中的“移除链接”命令

24 6.2.2 文本和默认图形超链接 1．文本超链接 选择文本,单击“插入”菜单中的“超链接”命令 2．默认图形超链接

25 6.2.3 图形热点 热点是在图形上分配超链接的区域，当站点访问者单击区域时，超链接目的地址被显示在Web浏览器中。
热点的形状有矩形、圆形和多边形3种 1．在图形中添加热点 2．修改和删除热点 3．突出显示热点

26 6.2.4 锚记链接和电子邮件链接 1．锚记链接 锚记链接的创建和其他超链接不同，需要在网页中添加锚记，然后再创建超链接。
单击“插入”菜单中的“命名锚记”命令，弹出“命名锚记”对话框。在锚记名称中输入锚名。单击“确定”按钮，则在网页中添加了锚记 。 2．电子邮件超链接 单击“插入”菜单中的“电子邮件链接”命令，弹出“电子邮件链接”对话框

27 6.3 表单 表单是用来收集站点访问者信息的域集。站点访问者填表单的方式是输入文本、单击单选按钮或复选框，以及从下拉菜单中选择选项。在填好表单之后，站点访问者便送出所输入的数据，该数据就会根据您所设置的表单处理程序，以各种不同的方式进行处理。 表单可以用来收集联系信息，接收要求，收集订单、出货和收费明细，获得回复，设置来宾签名簿，让访问者以输入查询的方式搜索站点，提示访问者登录站点。 用户可以构造一张空白表单，并向该表单添加域，或是使用模板或向导来创建表单。用户可以在网页上现有表单外的任何位置创建表单。Adobe Dreamweaver CS6会插入一个矩形虚线框区域，用户可以根据需要添加文本和表单域，例如文本框、单选按钮、复选框、下拉菜单以及按钮等。 表单一般包含一个“提交”按钮和一个“重置”按钮。单击“提交”按钮，表单的数据会被提交到表单处理程序。在默认情况下，表单结果会被保存为文本文件。单击“重置”按钮，则恢复到表单的默认状态。

28 6.3 表单

29 6.4 框架技术 框架网页是一种特别的网页，它可将浏览器视窗分为不同的框架，每一个框架可显示不同的网页。当在框架网页的超链接上单击时，则超链接所指向的网页可在其他框架中显示。 一个完整的框架包括框架和框架集。框架集就是框架的集合，它将窗口分割成多个框架。 框架本身并不包含实际的网页内容，它只是一个指定其他网页且如何显示网页的容器。

30 6.4 框架技术 框架网页可以在新建网页后，通过“修改”菜单的“框架集”子菜单的“拆分框架”命令来完成 。
选中“窗口”中的“框架”命令，可以显示框架面板。 用户可以通过框架面板来选择框架集合框架，然后可在属性面板中设置框架集合框架属性。

31 6.4 框架技术

32 6.4 框架技术

33 谢谢！ Thank you! 第1章 大学计算机基础 2013年7月1日1时4分 33