《网页设计ppt电子课件教案第4章布局对象和框架的使用》由会员分享，可在线阅读，更多相关《网页设计ppt电子课件教案第4章布局对象和框架的使用（46页珍藏版）》请在金锄头文库上搜索。
1、第4章布局对象和框架的使用,教学内容：页面布局是进行网页设计最基本的，也是最重要的工作。Div是Dreamweaver中另外一种布局排版工具。它可以定位在页面上的任意位置，并且其中可以包含文本、图像等所有可直接插入至网页的对象。框架也是网页布局排版工具，它是以插入的网页为单位，它提供了一种较为固定的网页结构。,教学重点 掌握表格的创建方法 掌握表格属性的设置 掌握合并、拆分单元格 教学难点 掌握排序表格 掌握利用表格布局网页,教学目标和基本要求 _ _ _ 教学时间：本章共分_课时 教学方法 案例教学 多媒体教学 理论面授 教学素材 课程范例文件：sample第4章 练习文件：exercise
2、第4章,本章各节课时分配及链接,4.1 任务10使用AP Div布局网页（ ）课时 4.2 任务11使用Spry设计网页下拉菜单（ ）课时 4.3 任务12创建框架网页（ ）课时 4.4 任务13创建嵌入式框架iframe （ ）课时 4.5 综合实训制作完整的框架网页综合实例（ ）课时 本 章 小 结 思考与练习,4.1 任务10使用AP Div布局网页,Div最大的优势在于其灵活性，它可以放置到页面中任何一个位置，甚至可以隐藏在页面的边线内。因此，使用Div比使用表格可以更方便地实现页面的排版，而且有许多功能是表格不能实现的。,4.1.1 简单讲评 最初的网页排版是完全平面式的，在HTML
3、2.0以后，表格得到了广泛的应用，设计者可以精确地布置页面上的元素。但是随着页面的复杂程度的增加，设计者越想精确布局，页面的表格就越复杂，从而给设计者和浏览者都带来了一定的困难。设计者无法随心所欲地放置页面元素，而表格的复杂化带来了浏览器解释时间的增加，用户等待时间加长。,4.1.2 核心知识 选中Div，选择“窗口属性”命令，打开“属性”面板，在“属性”面板中可以设置Div的属性。,在Dreamweaver中有一个“AP元素”面板，在面板中可以方便的处理Div的操作、设置层的属性，可以选择“窗口AP元素”命令，打开“AP元素”面板，,4.1.3 实际操作步骤1 新建一HTML文档，选择“插入
4、布局对象AP Div”命令，插入一个AP Div，在属性面板中设置“宽”为782像素，“高”为200像素，“名称”设置为Div1。,步骤2将光标置于Div1内，选择“插入图像”命令，在弹出的对话框中选择图像top.jpg插入。,步骤3 选择“插入布局对象AP Div”命令，插入一个Div2，在属性面板中设置“宽”为182px，“上”设置为200px，并且设置背景颜色为#AFAA94。,步骤4 将光标置于Div2内，插入11行1列的表格1，“表格宽度”设置为182像素，“边框粗细”设置为0。,4.2 任务11使用Spry设计网页下拉菜单,Spry框架是一个可用来构建更加丰富的网页的JavaScr
5、ipt和CSS库。使用该框架，可以显示XML数据，并创建用来显示动态数据的交互式页面元素，而无需刷新整个页面。,4.2.1 简单讲评Spry Ajax开发框架是一个JavaScript库，它能够提供各种功能丰富的网页应用。Spry是为了那些需要Ajax，却没有其他框架可用或易用的网页设计团体而设计的。最初的Spry框架是为了设计师能够使用HTML、CSS和很少的JavaScript实现将XML数据集成到他们的页面中，并不需要刷新页面。Spry框架以HTML为中心，具有HTML、CSS、JavaScript基础知识的用户就可以方便的部署。这个框架设计的方针就是标记尽量简单，JavaScript使
6、用尽量的少。任何做Web设计开发的人都可以选择Spry框架。,4.2.2 核心知识Spry菜单栏是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜单栏可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容。,4.2.3 实际操作下面讲述网页中Spry菜单栏的使用，具体操作步骤如下。步骤1 将光标置于页面中，选择“插入布局对象Spry菜单栏”命令，弹出“Spry菜单栏”对话框，在对话框中勾选“垂直”单选按钮。,步骤2单击“确定”按钮，插入Spry菜单栏。,步骤3 选中Spry菜单栏，在“属性”面板中选中“项目1”，在
7、“文本”文本框中输入“公司介绍” 。,4.3 任务12创建框架网页,在网页中，除了使用AP Div和Spry定位外，还可以使用框架进行定位。使用框架结构设计的HTML文件，可以将整个浏览器窗口分成几个独立的小窗口，一个窗口就是一个框架，每一个框架可分别载入不同的网页文件，此外，框架之间是可以相互控制的。,4.3.1 简单讲评框架技术由框架集和框架两部分组成。框架集顾名思义就是多个框架的集合，它定义了所包含的多个框架的结构、数量、大小，以及框架中页面文件名和路径等有关框架的属性。框架集并不在浏览器中显示，只是存储所含框架的相关信息。框架将全部框架文件组合在一起就构成了一个网页页面。框架仅是框架集
8、的组成元素，框架中的页面是整个网页页面的一部分，具有网页的所有属性和功能。,4.3.2 核心知识 选择“文件新建”命令，在弹出的“新建文档”对话框中选择“示例中的页框架页”选项。在“示例页”列表中根据需要选择。,选中框架后，其“属性”面板中决定了框架名、源文件和边框等。,4.3.3 实际操作 创建上方固定，左侧嵌套的框架网页的具体操作步骤如下。步骤1 选择“文件新建”命令，在弹出的“新建文档”对话框中选择“示例中的页框架页上方固定，左侧嵌套”选项 。,步骤2 单击“创建”按钮，创建上方固定，左侧嵌套的框架集。将插入点放置在头部框架中，选择“修改页面属性”命令，在弹出的“页面属性”对话框中，将“
9、左边距”、“上边距”、“右边距”和“下边距”分别设置为0像素。,步骤3 选择“插入表格”命令，插入1行1列的表格，此表格记为“表格1” 。,步骤4 将插入点放置在“表格1”中，选择“插入图像”命令，插入网站根目录下的images文件夹中的图像banner.gif 。,步骤5 选中左侧框架，在属性面板中将“列”值设为210像素 。,4.4 任务13创建嵌入式框架iframe,嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入现有的网页中。,4.4.1 简单讲评可以在Dreamweaver中使用“标签库编辑器”来创建嵌入式框架。标签库列出了绝大部分语言所用到的标签及其属性参数，对于编写代码
10、的设计者来说，这是得心应手的工具，有了它可以轻松找到所需要的标签，然后根据列出的参数来使用它。,4.4.2 核心知识选择“插入标签”命令，弹出“标签选择器”对话框。选择“HTML标签浏览器特定iframe”，然后单击“插入”按钮，弹出“标签编辑器iframe”对话框。,选择“编辑标签库”命令，弹出“标签库编辑器”对话框。,4.4.3 实际操作步骤2 选择“插入标签”命令，弹出“标签选择器”对话框，在对话框中选择“HTML标签浏览器特定iframe”选项。,步骤3 单击“插入”按钮，弹出“标签编辑器iframe”对话框，单击“源”文本框右边的“浏览”按钮，选择文件images/profile_c
11、on.htm，在“名称”文本框中输入profile，在“宽度”文本框中输入500，在“高度”文本框中输入400。,步骤4 单击“确定”按钮，插入嵌入式框架。,4.5 综合实训制作完整的框架网页综合实例,下面讲述制作上方固定的框架网页，具体操作步骤如下。 步骤1 选择“文件新建”命令，在弹出的“新建文档”对话框中，选择“示例中的页框架页上方固定，左侧嵌套”选项。,步骤2 单击“创建”按钮，创建上方固定的框架集。将插入点放置在头部框架中，选择“修改页面属性”命令，在弹出的“页面属性”对话框中将“左边距”、“上边距”、“右边距”和“下边距”分别设置为0像素。,步骤3 单击“确定”按钮，修改页面属性。
12、插入images文件夹中的图像1.jpg，并拖动边框调整框架大小使其与图像吻合。,步骤4 将插入点放置在左侧框架内，修改页面属性。插入images文件夹中的图像2.JPG。,步骤5 将插入点放置在右侧框架中，修改页面属性，选择“插入布局对象Ap Div”命令，插入Ap Div。,步骤6 单击Ap Div的边框，在属性面板中将“宽”设置为550px，“高”设置为600px，在Ap Div中插入images文件夹中的图像3.JPG。,本 章 小 结,框架网页是一种通过拆分浏览器窗口显示网页的形式。使用框架可以非常方便地完成导航工作，而且各个框架之间不会干扰，它可以让网站结构变得更加清晰。利用AP
13、Div布局的网页更加灵活，因为AP Div可以重叠使用。由于制作框架和Div网页需要有很强的逻辑性和条理性，因此读者要多加练习，才能将其完全掌握。,思考与练习,1填空题 （1）按住_键，分别单击要选择的各AP Div的内部或边框线，可以选择多个AP Div。 （2）_是视觉增强功能，可以将它们应用于使用JavaScript的HTML页面上几乎所有的元素。 （3）_将整个浏览器窗口分成几个独立的小窗口，一个窗口就是一个_，可分别载入不同的网页文件。,2选择题 （1）选中AP Div，按住Shift键，然后按键盘上的方向键，一次可以移动_个像素。 （A） 1 （B） 5 （C） 10 （D） 15
14、 （2）_是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。,（A） Spry菜单栏 （B） Spry选项卡式面板 （C） Spry折叠式 （D） Spry可折叠面板 （3）按住_键，再单击文档窗口中需要选择的框架，即可选中框架。 （A） Shift （B） Ctrl （C） Enter （D） Alt,3判断题 （1）Div最大的优势在于其灵活性，它可以放置到页面中任何一个位置。（ ） （2）不能将表格转换为AP Div布局，也不能将AP Div转换为表格。（ ） （3）Spry折叠式是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。（ ）,4问答题 （1）Div主要有以下主要功能？ （2）怎样准确的选择框架和框架集？ （3）Spry包括那些效果？,
