（中职）电子商务网页设计项目六 框架布局设计与制作电子商务网页课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,YCF,正版可修改,PPT,（中职）电子商务网页设计项目六 框架布局设计与制作电子商务网页ppt课件,框架的组成部分及属性的定义,1,任务分析,所谓“框架”就是将浏览器窗口划分为若干个区域,每个区域中都显示有独立内容的网页。一个网页可以包含多个页面,此时需要用到框架。使用框架可以进行页面布局,把网页划分为几个区域。例如,一个水平框架用于放置Banner(标题);左垂直框架用于放置导航;右垂直框架用于放置正文。每一个框架单独使用一个网页,从而使页面设计简单化。框架除了用于页面布局,还可用于制作目录。包含框架的网页称为框架集。框架集定义了各个框架的结构、数量、大小和目标等属性,但其本身并不提供实际的网页内容。,相关知识,1.框架的组成部分,框架由两部分组成:框架集和单个框架。,2.框架的作用,一是增强导航,在直观上不用跳转页面而直接链接到目标页;二是可以引用插入其他页面;三是可以简单地屏蔽包括的页面源码。,3.保存与打开框架和框架集的文件,在保存框架网页时不仅需要保存框架中的网页,还要保存框架集文件。可以分别保存,也可以保存全部文件。在打开框架网页时如果选取的是框架集文件,则可以同时打开该框架集和其中的框架页面。如果选取的是单个框架页面,则只能打开该框架页面。,4.创建一个新的框架集网页,(1)运行Dreamweaver CS5,选择“文件”“新建”命令,新建一个空白的HTML,选择菜单栏“窗口”“工作区布局”“经典”,在版面上选择“布局”视图,如图61所示。,(2)选择“框架集”工具栏,选择“左侧和嵌套的顶部框架”。,(3)单击“创建”按钮,弹出“框架标签辅助功能属性”对话框,在此可为每一个框架指定一个标题,(4)单击“确定”按钮,即可创建一个上方固定、左侧嵌套的框架集。,5.保存框架,每个框架包含一个文件,因此一个框架集会包含多个文件,在保存网页时,要将整个网页文档都保存下来。,(1)选择“文件”“保存全部”命令,整个框架边框会出现一个阴影框,同时会弹出“另存为”对话框,命名为“index.html”,表示整个框架集的名称。,(2)单击“保存”按钮,弹出第二个“另存为”对话框,右边框架内侧出现阴影,命名为“main.html”,表示右边框架即主框架的文件名。,(3)单击“保存”按钮,依次弹出第三个和第四个“另存为”对话框,分别命名为“left.html”和“top.html”,表示左边框架和上方框架的文件名,如图65所示。,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)显示框架窗口:选择菜单栏的“窗口”“框架”命令,显示“框架”面板。,(6)设置网站标题:单击“框架”面板中的三维边框,选取最外侧边框,在文档窗口的标题项处输入网站标题“好滋味零食”。,(7)设置框架属性:选择“框架”面板中的左下侧框架,在“属性”面板中“框架名称”项中输入“leftframe”,将“滚动”设置为“否”,“不能调整大小”设置为“否”,“边框”设置为否。,(8)选择“框架”面板中的右下侧框架,在“属性”面板中“框架名称”项中输入“rightframe”,将“滚动”设置为“是”,“不能调整大小”设置为“否”,“边框”设置为否。,(9)选择“框架”面板中的顶部框架,在“属性”面板中“框架名称”项中输入“topframe”,将“滚动”设置为“否”,“不能调整大小”设置为“否”,“边框”设置为否。,(10)设置框架集属性:选择“框架”面板中的最外侧框架,选取整个框架集,在“属性”面板中将框架设置为“否”,“边框宽度”设置为“0”。,使用框架进行网页布局,2,任务分析,一个网站可以包含多个页面,此时需要用到框架。使用框架可以进行页面布局,把网页划分为几个区域。利用框架最大的特点就是使网站的风格一致,作为框架结构的一个子框架的内容给整个网站公用,每一个框架单独使用一个网页,从而使页面设计简单化。本任务以“小小书屋”为例介绍使用框架进行网页布局的方法。,相关知识,1.常见框架布局,常见的框架布局包括对窗口的水平分割、垂直分割和嵌套分割。,(1)水平分割框架,(2)垂直分割框架,(3)嵌套分割框架,2.编辑框架,(1)拆分框架。,(2)删除框架。,任务实施,(1)打开任务一中的top.htm网页文件,绘制布局,插入素材包中的“title.jpg”作为标题图像。,(2)打开left.htm网页文件,绘制表格,并插入一个4行1列的表格,在表格中输入相应文字。,(3)打开main1.htm网页文件,绘制表格,并插入素材包中的相应图片。,(4)保存当前框架集及框架网页,预览效果。,(5)将main1.htm中的内容删除,只保留最外侧的布局表格,制作其他网页,其中包括分页“坚果”、“糖果”、“肉干”,分别保存在files文件夹内。,(6)打开框架集网页index.htm,选取左侧框架网页中的网页标题名,设置各分页的链接,将所有链接的“目标”项设置为“mainframe”。,(7)设置完成所有链接后,执行“文件”“保存全部”命令,将所有框架网页及框架集保存完毕。,使用浮动框架制作网页,3,任务分析,浮动框架(Iframe)是指在网页文档中,以框架形式显示嵌套网页文档、主页、公告板和记事本的功能。利用这一功能,可以在指定的位置以指定的大小显示其他网页文档或站点,例如滚动新闻等。,相关知识,1.浮动框架的基本原理,在页面中创建一个浮动框架,需要先制作好页面的其他内容,再在页面中以手写代码的方式插入浮动框架的代码。,2.浮动框架与框架的区别,浮动框架可以在任何网页的任何位置出现,框架只能在框架网页中存在。,3.浮动框架的使用方法,在需要使用浮动框架的相应位置写入代码。,4.浮动框架代码的属性含义,SRC:浮动框架中显示页面的源文件的路径和文件名。,Width:浮动框架的宽度。,Height:浮动框架的高度。,Name:浮动框架的名称。,Align:浮动框架的排列方式,可以取三个值:Left(表示居左)、Center(表示居中)、Right(表示居右)。,FrameBorder:框架边框显示属性(同普通框架)。,FrameSpacing:框架边框宽度属性(同普通框架)。,Scrolling:框架滚动条显示属性(同普通框架)。,NOResize:框架大小调整属性(同普通框架)。,BorderColor:框架边框颜色属性(同普通框架)。,MarginWidth:框架边缘宽度属性(同普通框架)。,MarginHeight:框架边缘高度属性(同普通框架)。,任务实施,制作一个展示零食的浮动框架,效果如图所示。,(1)使用表格制作页面。,(2)把不同零售图片设置到不同的独立网页中。,(3)在所示位置插入一个浮动框架显示不同零食图片。,(4)切换到“拆分”视图。,(5)在浮动框架插入位置插入代码。,(6)选择网页中文字“干果”,选择文字属性栏中的“链接”,选择图片所在的网页“1.htm”,在“目标”属性中选择“aa”,当选择干果文字的时候能够超链接到网页“1.htm”并显示在浮动框架aa中。,(7)其他几个链接如此类推进行设置。,