电子商务网页设计项目六框架布局设计与制作电子商务网页.pptx

框架的组成部分及属性的定义 1 任务分析 所谓“框架”就是将浏览器窗口划分为若干个区域,每个区域中都显示有独立内容的网页。一个网页可以包含多个页面,此时需要用到框架。使用框架可以进行页面布局,把网页划分为几个区域。例如,一个水平框架用于放置Banner(标题);左垂直框架用于放置导航;右垂直框架用于放置正文。每一个框架单独使用一个网页,从而使页面设计简单化。框架除了用于页面布局,还可用于制作目录。包含框架的网页称为框架集。框架集定义了各个框架的结构、数量、大小和目标等属性,但其本身并不提供实际的网页内容。 相关知识 1.框架的组成部分 框架由两部分组成:框架集和单个框架。 2.框架的作用 一是增强导航,在直观上不用跳转页面而直接链接到目标页;二是可以引用插入其他页面;三是可以简单地屏蔽包括的页面源码。 3.保存与打开框架和框架集的文件 在保存框架网页时不仅需要保存框架中的网页,还要保存框架集文件。可以分别保存,也可以保存全部文件。在打开框架网页时如果选取的是框架集文件,则可以同时打开该框架集和其中的框架页面。如果选取的是单个框架页面,则只能打开该框架页面。 4.创建一个新的框架集网页 (1)运行Dreamweaver CS5,选择“文件”→“新建”命令,新建一个空白的HTML,选择菜单栏“窗口”→“工作区布局”→“经典”,在版面上选择“布局”视图,如图6—1所示。 (2)选择“框架集”工具栏,选择“左侧和嵌套的顶部框架”。 (3)单击“创建”按钮,弹出“框架标签辅助功能属性”对话框,在此可为每一个框架指定一个标题 (4)单击“确定”按钮,即可创建一个上方固定、左侧嵌套的框架集。 5.保存框架 每个框架包含一个文件,因此一个框架集会包含多个文件,在保存网页时,要将整个网页文档都保存下来。 (1)选择“文件” →“保存全部”命令,整个框架边框会出现一个阴影框,同时会弹出“另存为”对话框,命名为“index.html”,表示整个框架集的名称。 (2)单击“保存”按钮,弹出第二个“另存为”对话框,右边框架内侧出现阴影,命名为“main.html”,表示右边框架即主框架的文件名。 (3)单击“保存”按钮,依次弹出第三个和第四个“另存为”对话框,分别命名为“left.html”和“top.html”,表示左边框架和上方框架的文件名,如图6—5所示。 6.选择框架和框架集 在Dreamweaver CS5中,打开“窗口”菜单,选择“框架”命令,可以打开“框架”面板。 在面板中单击要选择的框架,被选中的框架边框内侧会出现;或者按Alt键,在要选择的框架内单击鼠标左键也可选中。 如果要选中框架集,可以在框架面板中单击框架集的边框,此时框架集的边框变成虚线,。 在文档窗口中,单击文档窗口中要选择的框架,即可选中该框架。 在文档窗口中,当鼠标指针靠近框架集的边框并且出现上下箭头时,单击整个框架集的边框,可以选择整个框架集。 7.链接框架 要在一个框架中使用链接打开另一个框架中的文档,必须设置链接目标,链接的目标属性指定在其中打开链接的内容框架或窗口。如果导航条位于左框架,而希望链接的材料显示在右侧的主要内容框架中,则必须将主要内容框架的名称指定为每个导航条链接的目标。当访问者单击导航链接时,将在主框架中打开指定的内容。 在“属性”面板中的“目标”下拉列表中选择“MainFrame”选项,用来作为指向链接的目标。 在“属性”面板中的“链接”下列表中选择链接文档应在其中显示的框架或窗口。 (1)blank:打开一个新窗口显示目标网页。 (2)parent:目标网页的内容在父框架窗口中显示。 (3)self:目标网页的内容在当前所在框架窗口中显示。 (4)top:目标网页的内容在最顶层框架窗口中显示。 8.属性设置 (1)框架集属性。 (2)框架属性。 选择“窗口”→“属性”,打开“属性”检查器,点击“属性”检查器右下角的展开箭头查看框架的所有性质 。 任务实施 下面以“好滋味”零食网站首页为例设计框架网页的属性,如图所示。 (1)新建一个foods文件夹,作为站点文件存放的目录,并在foods文件夹下建立下级文件夹images和files,作为网页图片和站点分面存放的目录。 (2)建立站点。 (3)新建网页,切换至布局视图,单击“插入”栏中的“框架”展开按钮,在分类中单击“顶部和嵌套的左侧框架”的框架集按钮,拆分网页。 (4)保存当前框架网页及框架集,将框架集保存在站点根目录下,文件命名为“index.htm”,将左侧框架网页保存在files文件夹内,文件命名为“left.htm”,将右侧框架保存在files文件夹内,文件命名为“main1.htm”,将顶部框架网页保存在files文件夹内,文件命名为“top.htm”。 (5)显示框架窗口:选择