项目三页面布局设计.ppt

图3.2.6设置页面属性 图3.2.8 创建表格 图3.2.9 left.html页面属性的链接设置 图3.2.10 框架网页效果图 任务四 ：设置框架属性 1、选择“窗口框架”命令，打开“框架”面板，选中框架集，如图3.2.12所示。 2、在“属性”面板的“行”栏的“值”文本框中输入“265”，即顶部框架高度为“265”，如图3.2.13所示。 3、在“框架”面板中选择嵌套框架集，如图所示。 4、在“属性”面板的“列”栏的“值”文本框中输入“180”，如图3.2.15所示。 5、设置框架集的网页标题。 （1）选择要设置框架集网页标题的框架集“tdzx”。 （2）在文档工具栏的“标题”文本框中输入网页标题“第八届北京国际电影体育周”，如图3.2.16所示。 图3.2.12 框架面板 图3.2.13 设置框架属性 图3.2.14 设置框架属性 图3.2.16 设置框架集网页标题 模块三 使用AP元素布局网页 (一)　学习目标 　　　掌握并学会利用AP元素布局网页，学会spry构件的使用。 (二) 任务分析 1、为网页设置页面属性； 2、创建AP元素布局网页； 3、编辑网页内容； 4、利用spry构件编辑网页内容 图3.3 .1 AP元素布局网页效果图 任务一 ：为网页设置页面属性 1、在Dreamweaver CS3起始页中选择“文件新建”命令，打开“新建文档”对话框。 2、在“空白页”选项卡中的“页面类型”列表框中选择“HTML”选项，在右侧的“布局”列表框中选择“无”，如图3.3.2所示。 3、单击“创建”按钮，完成网页的创建，并保存该网页在files文件夹中，命名为tdlt.html。 4、在“属性”面板中设置单击“页面属性”按钮，如图3.3.3所示。 5、在弹出的“页面属性”对话框中设置参数如图3.3.4所示。 图3.3.2创建网页 图3.3.3设置页面属性 图3.3.4 设置页面属性 任务二 ：创建AP元素布局网页 1、选择“布局”工具面板中的“绘制AP DIV”，如图3.3.5所示。 2、鼠标呈“+”字形，在网页编辑窗口中的任意位置按下鼠标左键不放进行拖动即创建AP DIV。在绘制过程中，编辑窗口右下角将动态显示正在绘制的AP DIV的大小，如图3.3.6所示，可以边绘制边查看其大小，至合适大小后再释放鼠标。 3、创建嵌套AP DIV，将鼠标光标定位到所需的AP DIV（layer1）内，选择“插入记录布局对象AP DIV”命令即可创建一个嵌套AP DIV。 4、利用上述方法，创建如图3.3.7所示的嵌套AP DIV，并修改其属性。 小贴士： AP 元素（绝对定位元素）是分配有绝对位置的 HTML 页面元素，具体而言，就是 div 标签或其它任何标签。AP 元素可以包含文本、图像或其它任何可放置到 HTML 文档正文中的内容。 图3.3.5绘制AP元素 图3.3.6 AP DIV大小显示 图3.3.7网页布局 任务三 ：编辑网页内容 （1）在“layer2”中，插入图片“top.jpg”。 （2）在“layer3”中，添加“AP DIV”元素，并对网页进行布局，效果如图3.3.8所示。。 （3）在“layer4”中，添加“AP DIV”元素，并对网页进行布局，效果如图3.3.9所示。 （4）利用相同的方法，在“layer5”、“layer6”中，添加“AP DIV”元素，并对网页进行布局，效果如图3.3.10所示。 （5）在已经布局好的网页中，插入图片或文字，效果如图3.3.11所示。 图3.3.8 AP DIV元素的嵌套（一） 图3.3.9AP DIV元素的嵌套（二） 图3.3.10 AP DIV元素的嵌套（三） 图3.3.11AP DIV布局效果图 任务四 ：利用spry构件编辑“联系方式”页面内容 Spry框架是一个JavaScript库，Web设计人员使用它可以构建能够向站点访问者提供更丰富体验的Web页。有了Spry，就可以使用HTML、CSS和极少量的JavaScript将 XML数据合并到HTML文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。在设计上，Spry框架的标记非常简单且便于那些具有HTML、CSS和JavaScript基础知识的用户使用。 （1）打开index.html文件，将该文件另存在files文件夹下面并命名为“lxfs.html”，在弹出的是否更新链接的对话框中，选择“是”；删除该页面右侧的表格。将光标置于右侧单元格中，插入一个“AP DIV”元