《网页设计与制作 第二版 教学课件 ppt 作者 相万让 第07章》由会员分享，可在线阅读，更多相关《网页设计与制作 第二版 教学课件 ppt 作者 相万让 第07章（18页珍藏版）》请在金锄头文库上搜索。
1、第7章 Dreamweaver,2019/5/25,网页设计与制作（第二版）,2,Macromedia Dreamweaver 8是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。无论用户是喜欢直接编写HTML代码的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver 8都会提供很多帮助工具，丰富用户的Web创作体验。,7.1 初识Dreamweaver,2019/5/25,网页设计与制作（第二版）,3,7.1.1 Dreamweaver的操作环境,在首次启动Dreamweaver 8时会出现一个“工作区设置”对话框，在对话框左侧是Dreamw
2、eaver 8的设计视图，右侧是Dreamweaver 8的代码视图。Dreamweaver 8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局。 新建或打开一个文档，进入Dreamweaver 8的标准工作界面。Dreamweaver 8的标准工作界面包括标题栏、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、“属性”面板和浮动面板组。,Dreamweaver 8的标准工作界面,2019/5/25,网页设计与制作（第二版）,5,1规划站点结构 网站是多个网页的集合，包括一个首页和若干个分页，这种集合不是简单的集合。为了达到最佳效果，在创
3、建任何Web站点页面之前，要对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及各页是如何互相连接起来的。 我们可以通过把文件分门别类地放置在各自的文件夹里，使网站的结构清晰明了，便于管理和查找。 2创建站点 在Dreamweave 8中可以有效地建立并管理多个站点。搭建站点可以有两种方法：一是利用向导完成，二是利用高级设定来完成。,7.1.2本地站点的搭建与管理,2019/5/25,网页设计与制作（第二版）,6,7.2 制作文字与图像混排的页面,7.2.1 页面的总体设置 1设置页面的头内容 头内容在浏览器中是不可见的，但是却携带着网页的重要信息，如关键字、描
4、述文字等，还可以实现一些非常重要的功能，如自动刷新功能。 2设置页面属性 单击“属性”面板中的“页面属性”按钮（见下图），打开的“页面属性”对话框，进行设置。,2019/5/25,网页设计与制作（第二版）,7,7.2.2 文本的插入与编辑 要向Dreamweaver 8文档添加文本，可以直接在文档窗口中输入文本，也可以剪切并粘贴，还可以从Word文档导入文本。 用鼠标在文档编辑窗口的空白区域点一下，窗口中出现闪动的光标，提示文字的起始位置，可进行文字素材的复制/粘贴操作。 7.2.3 插入图像 在制作网页时，先构想好网页布局，在图像处理软件中对需要插入的图片进行处理，然后存放在站点根目录下的文
5、件夹里。 插图图像时，将光标放置在文档窗口需要插入图像的位置，然后单击常用工具栏中的“图像”按钮即可。,2019/5/25,网页设计与制作（第二版）,8,7.3 表格的应用,表格是网页设计制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序地显示在页面上，让用户可以设计出漂亮的页面。使用表格排版的页面在不同平台、不同分辨率的浏览器里都能保持其原有的布局，而在不同的浏览器平台有较好的兼容性，所以表格是网页中最常用的排版方式之一。,7.3.1 插入并编辑表格 1插入表格 在文档窗口中，将光标放在需要创建表格的位置，单击常用工具栏中的表格按钮，弹出 “表格”对话框，指定
6、表格的属性后，在文档窗口中插入设置的表格。如下图所示。,“表格”对话框,2019/5/25,网页设计与制作（第二版）,10,2选择单元格对象 对于表格、行、列、单元格属性的设置是以选择这些对象为前提的。 选择整个表格的方法是把鼠标放在表格边框的任意处，当出现标志时单击即可选中整个表格，或在表格内任意处单击，然后在状态栏选中标记即可；或在单元格任意处单击鼠标右键，在弹出的快捷菜单中选择“表格”“选择表格”命令。 要选中某一单元格，按住Ctrl键，用鼠标在需要选中的单元格单击即可；或者选中状态栏中的标记。 要选中连续的单元格，按住鼠标左键从一个单元格的左上方开始向要连续选择单元格的方向拖动。要选中
7、不连续的几个单元格，可以按住Ctrl键，单击要选择的所有单元格即可。 要选择某一行或某一列，将光标移动到行左侧或列上方，鼠标指针变为向右或向下的箭头图标时，单击即可。,7.3.2 嵌套表格 表格之中还有表格就叫做嵌套表格。 网页的排版有时会很复杂，在外部需要一个表格来控制总体布局，如果内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格的制作带来困难。其次，浏览器在解析网页的时候，是将整个网页的结构下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到网页内容。 引入嵌套表格，由总表格负责整体排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应
8、位置中，各司其职，互不冲突。 另外，通过嵌套表格，利用表格的背景图像、边框、单元格间距和单元格边距等属性可以得到漂亮的边框效果，制作出精美的音画贴图网页。,2019/5/25,网页设计与制作（第二版）,12,7.4 制作多媒体页面,一个优秀的网站应该不仅仅是由文字和图片组成的，而是动态的、多媒体的。为了增强网页的表现力，丰富文档的显示效果，我们可以向其插入Flash动画、Java小程序、音频播放插件等多媒体内容。 7.4.1 插入Flash动画 7.4.2 插入声音 7.4.3 创建链接关系,2019/5/25,网页设计与制作（第二版）,13,7.5 制作框架网站,框架是网页中经常使用的页面设
9、计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便地完成导航工作，让网站的结构更加清晰，而且各个框架之间不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。 一个框架结构有如下两部分网页文件构成。 框架（Frame）：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口其余部分中所显示的内容无关的网页文件。 框架集（Frameset）：框架集也是一个网页文件，它将一个窗口通过行和列的方式分割成多个框架，框架的多少根
10、据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。,2019/5/25,网页设计与制作（第二版）,14,7.5.1 创建框架 在创建框架集或使用框架前，通过选择“查看”“可视化助理”“框架边框”命令，使框架边框在文档窗口的设计视图中可见。 7.5.2 保存框架 每一个框架都有一个框架名称，可以用默认的框架名称，也可以在“属性”面板中修改名称，我们采用系统默认的框架名称topFrame（上方）、leftFrame（左侧）和mainFrame（右侧）。 7.5.3 编辑框架式网页 虽然框架式网页把屏幕分割成几个窗口，每个框架（窗口）中放置一个普通的网页，但是编辑框架式网页时，要把整个编
11、辑窗口当做一个网页来编辑，插入的网页元素位于哪个框架，就保存在哪个框架的网页中。框架的大小可以随意修改。 7.5.4 在框架中使用超链接 在框架式网页中制作超链接时，一定要设置链接的目标属性，为链接的目标文档指定显示窗口。链接目标较远（其他网站）时，一般放在新窗口；在导航条上创建链接时，一般将目标文档放在另一个框架中显示（当页面较小时）或全屏幕显示（当页面较大时）。,2019/5/25,网页设计与制作（第二版）,15,7.6 层与时间轴的应用,层是CSS中的定位技术，在Dreamweaver 8中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页
12、文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠，层体现了网页技术从二维空间向三维空间的一种延伸。 7.6.1 创建层 7.6.2 设置层的属性 7.6.3 时间轴 7.6.4 创建时间轴动画,2019/5/25,网页设计与制作（第二版）,16,7.7 利用行为制作动态页面,一般说来，动态网页是通过JavaScript或基于JavaScript的DHTML代码来实现的。包含JavaScript脚本的网页，还能够实现用户与页面的简单交互。但是编写脚本既复杂又专业，需要专门学习，而Dreamweaver 8提供了“行为”的机制，虽然行为也是基于Jav
13、aScript来实现动态网页和交互的，但却不需书写任何代码。在可视化环境中单击几个按钮，填几个选项就可以实现丰富的动态页面效果，实现人与页面的简单交互。 行为是事件与动作的彼此结合。例如，当鼠标移动到网页的图片上方时，图片高亮显示，此时的鼠标移动称为事件，图片的变化称为动作，一般的行为都是要由事件来激活动作。动作由预先写好的能够执行某种任务的JavaScript代码组成，而事件与浏览器用户的操作相关，如单击鼠标、鼠标上滚等。,2019/5/25,网页设计与制作（第二版）,17,7.8 制作表单页面,7.8.1 关于表单 使用表单，可以帮助Internet服务器从用户那里收集信息，例如收集用户资
14、料，获取用户订单，在Internet上也同样存在大量的表单，让用户输入文字进行选择。 7.8.2 认识表单对象 在Dreamweaver 8中，表单输入类型称为表单对象。可以通过选择“插入”“表单对象”命令来插入表单对象，或者通过从图7-75所示的“表单”面板访问表单对象来插入表单对象。 7.8.3 创建表单 在Dreamweaver 8中可以创建各种各样的表单，表单中可以包含各种对象，例如文本域、按钮、列表等。 7.8.4 表单的应用,2019/5/25,网页设计与制作（第二版）,18,思考与练习 1如何使用Dreamweaver 8搭建本地站点？ 2在Dreamweaver 8中实现文本的插入与编辑应注意哪些事项？ 3在Dreamweaver 8中使用图像和声音等元素应该注意哪些细节？ 4在Dreamweaver 8中如何编辑框架式网页？ 5如何利用Dreamweaver 8的行为制作动态页面?,
