网页设计ppt电子课件教案第4章布局对象和框架的使用

《网页设计ppt电子课件教案第4章布局对象和框架的使用》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4章布局对象和框架的使用教学内容：页面布局是进行网页设计最基本的，也是最重要的工作。Div是Dreamweaver中另外一种布局排版工具。它可以定位在页面上的任意位置，并且其中可以包含文本、图像等所有可直接插入至网页的对象。框架也是网页布局排版工具，它是以插入的网页为单位，它提供了一种较为固定的网页结构。教学重点掌握表格的创建方法掌握表格属性的设置掌握合并、拆分单元格教学难点掌握排序表格掌握利用表格布局网页教学目标和基本要求____________________________________________________________________________________

2、_____________________教学时间：本章共分_______课时教学方法案例教学多媒体教学理论面授教学素材课程范例文件：sample第4章练习文件：exercise第4章本章各节课时分配及链接4.1任务10使用APDiv布局网页——（）课时4.2任务11使用Spry设计网页下拉菜单——（）课时4.3任务12创建框架网页——（）课时4.4任务13创建嵌入式框架iframe——（）课时4.5综合实训——制作完整的框架网页综合实例——（）课时本章小结思考与练习4.1任务10使用APDiv布局网页Div最大的优势在于其灵活性，它可以放置到页面中任何一个位置，甚至可以隐藏在页面的

3、边线内。因此，使用Div比使用表格可以更方便地实现页面的排版，而且有许多功能是表格不能实现的。4.1.1简单讲评最初的网页排版是完全平面式的，在HTML2.0以后，表格得到了广泛的应用，设计者可以精确地布置页面上的元素。但是随着页面的复杂程度的增加，设计者越想精确布局，页面的表格就越复杂，从而给设计者和浏览者都带来了一定的困难。设计者无法随心所欲地放置页面元素，而表格的复杂化带来了浏览器解释时间的增加，用户等待时间加长。4.1.2核心知识选中Div，选择“窗口>属性”命令，打开“属性”面板，在“属性”面板中可以设置Div的属性。在Dreamweaver中有一个“AP元素”面板，在面板中可以方

4、便的处理Div的操作、设置层的属性，可以选择“窗口>AP元素”命令，打开“AP元素”面板，4.1.3实际操作步骤1新建一HTML文档，选择“插入>布局对象>APDiv”命令，插入一个APDiv，在属性面板中设置“宽”为782像素，“高”为200像素，“名称”设置为Div1。步骤2将光标置于Div1内，选择“插入>图像”命令，在弹出的对话框中选择图像top.jpg插入。步骤3选择“插入>布局对象>APDiv”命令，插入一个Div2，在属性面板中设置“宽”为182px，“上”设置为200px，并且设置背景颜色为#AFAA94。步骤4将光标置于Div2内，插入11行1列的表格1，“表格宽度”设置为

5、182像素，“边框粗细”设置为0。4.2任务11使用Spry设计网页下拉菜单Spry框架是一个可用来构建更加丰富的网页的JavaScript和CSS库。使用该框架，可以显示XML数据，并创建用来显示动态数据的交互式页面元素，而无需刷新整个页面。4.2.1简单讲评SpryAjax开发框架是一个JavaScript库，它能够提供各种功能丰富的网页应用。Spry是为了那些需要Ajax，却没有其他框架可用或易用的网页设计团体而设计的。最初的Spry框架是为了设计师能够使用HTML、CSS和很少的JavaScript实现将XML数据集成到他们的页面中，并不需要刷新页面。Spry框架以HTML为中心，具

6、有HTML、CSS、JavaScript基础知识的用户就可以方便的部署。这个框架设计的方针就是标记尽量简单，JavaScript使用尽量的少。任何做Web设计开发的人都可以选择Spry框架。4.2.2核心知识Spry菜单栏是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜单栏可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容。4.2.3实际操作下面讲述网页中Spry菜单栏的使用，具体操作步骤如下。步骤1将光标置于页面中，选择“插入>布局对象>Spry菜单栏”命令，弹出“Spry菜单栏”对话框，在对话框中勾选“

7、垂直”单选按钮。步骤2单击“确定”按钮，插入Spry菜单栏。步骤3选中Spry菜单栏，在“属性”面板中选中“项目1”，在“文本”文本框中输入“公司介绍”。4.3任务12创建框架网页在网页中，除了使用APDiv和Spry定位外，还可以使用框架进行定位。使用框架结构设计的HTML文件，可以将整个浏览器窗口分成几个独立的小窗口，一个窗口就是一个框架，每一个框架可分别载入不同的网页文件，此外，框架之间是可以相互控制的