《《电子商务网页设计》课件项目六 框架布局设计与制作电子商务网页.pptx》由会员分享，可在线阅读，更多相关《《电子商务网页设计》课件项目六 框架布局设计与制作电子商务网页.pptx（18页珍藏版）》请在三一文库上搜索。
1、框架的组成部分及属性的定义框架的组成部分及属性的定义1任务分析任务分析 所谓“框架”就是将浏览器窗口划分为若干个区域,每个区域中都显示有独立内容的网页。一个网页可以包含多个页面,此时需要用到框架。使用框架可以进行页面布局,把网页划分为几个区域。例如,一个水平框架用于放置Banner(标题);左垂直框架用于放置导航;右垂直框架用于放置正文。每一个框架单独使用一个网页,从而使页面设计简单化。框架除了用于页面布局,还可用于制作目录。包含框架的网页称为框架集。框架集定义了各个框架的结构、数量、大小和目标等属性,但其本身并不提供实际的网页内容。相关知识相关知识1.框架的组成部分框架由两部分组成:框架集和
2、单个框架。2.框架的作用一是增强导航,在直观上不用跳转页面而直接链接到目标页;二是可以引用插入其他页面;三是可以简单地屏蔽包括的页面源码。3.保存与打开框架和框架集的文件在保存框架网页时不仅需要保存框架中的网页,还要保存框架集文件。可以分别保存,也可以保存全部文件。在打开框架网页时如果选取的是框架集文件,则可以同时打开该框架集和其中的框架页面。如果选取的是单个框架页面,则只能打开该框架页面。4.创建一个新的框架集网页(1)运行Dreamweaver CS5,选择“文件”“新建”命令,新建一个空白的HTML,选择菜单栏“窗口”“工作区布局”“经典”,在版面上选择“布局”视图,如图61所示。(2)
3、选择“框架集”工具栏,选择“左侧和嵌套的顶部框架”。(3)单击“创建”按钮,弹出“框架标签辅助功能属性”对话框,在此可为每一个框架指定一个标题(4)单击“确定”按钮,即可创建一个上方固定、左侧嵌套的框架集。5.保存框架每个框架包含一个文件,因此一个框架集会包含多个文件,在保存网页时,要将整个网页文档都保存下来。(1)选择“文件”“保存全部”命令,整个框架边框会出现一个阴影框,同时会弹出“另存为”对话框,命名为“index.html”,表示整个框架集的名称。(2)单击“保存”按钮,弹出第二个“另存为”对话框,右边框架内侧出现阴影,命名为“main.html”,表示右边框架即主框架的文件名。(3)
4、单击“保存”按钮,依次弹出第三个和第四个“另存为”对话框,分别命名为“left.html”和“top.html”,表示左边框架和上方框架的文件名,如图65所示。6.选择框架和框架集在Dreamweaver CS5中,打开“窗口”菜单,选择“框架”命令,可以打开“框架”面板。在面板中单击要选择的框架,被选中的框架边框内侧会出现;或者按Alt键,在要选择的框架内单击鼠标左键也可选中。如果要选中框架集,可以在框架面板中单击框架集的边框,此时框架集的边框变成虚线,。在文档窗口中,单击文档窗口中要选择的框架,即可选中该框架。在文档窗口中,当鼠标指针靠近框架集的边框并且出现上下箭头时,单击整个框架集的边框
5、,可以选择整个框架集。7.链接框架要在一个框架中使用链接打开另一个框架中的文档,必须设置链接目标,链接的目标属性指定在其中打开链接的内容框架或窗口。如果导航条位于左框架,而希望链接的材料显示在右侧的主要内容框架中,则必须将主要内容框架的名称指定为每个导航条链接的目标。当访问者单击导航链接时,将在主框架中打开指定的内容。在“属性”面板中的“目标”下拉列表中选择“MainFrame”选项,用来作为指向链接的目标。在“属性”面板中的“链接”下列表中选择链接文档应在其中显示的框架或窗口。(1)blank:打开一个新窗口显示目标网页。(2)parent:目标网页的内容在父框架窗口中显示。(3)self:
6、目标网页的内容在当前所在框架窗口中显示。(4)top:目标网页的内容在最顶层框架窗口中显示。8.属性设置(1)框架集属性。(2)框架属性。选择“窗口”“属性”,打开“属性”检查器,点击“属性”检查器右下角的展开箭头查看框架的所有性质。任务实施任务实施 下面以“好滋味”零食网站首页为例设计框架网页的属性,如图所示。(1)新建一个foods文件夹,作为站点文件存放的目录,并在foods文件夹下建立下级文件夹images和files,作为网页图片和站点分面存放的目录。(2)建立站点。(3)新建网页,切换至布局视图,单击“插入”栏中的“框架”展开按钮,在分类中单击“顶部和嵌套的左侧框架”的框架集按钮,
7、拆分网页。(4)保存当前框架网页及框架集,将框架集保存在站点根目录下,文件命名为“index.htm”,将左侧框架网页保存在files文件夹内,文件命名为“left.htm”,将右侧框架保存在files文件夹内,文件命名为“main1.htm”,将顶部框架网页保存在files文件夹内,文件命名为“top.htm”。(5)显示框架窗口:选择菜单栏的“窗口”“框架”命令,显示“框架”面板。(6)设置网站标题:单击“框架”面板中的三维边框,选取最外侧边框,在文档窗口的标题项处输入网站标题“好滋味零食”。(7)设置框架属性:选择“框架”面板中的左下侧框架,在“属性”面板中“框架名称”项中输入“left
8、frame”,将“滚动”设置为“否”,“不能调整大小”设置为“否”,“边框”设置为否。(8)选择“框架”面板中的右下侧框架,在“属性”面板中“框架名称”项中输入“rightframe”,将“滚动”设置为“是”,“不能调整大小”设置为“否”,“边框”设置为否。(9)选择“框架”面板中的顶部框架,在“属性”面板中“框架名称”项中输入“topframe”,将“滚动”设置为“否”,“不能调整大小”设置为“否”,“边框”设置为否。(10)设置框架集属性:选择“框架”面板中的最外侧框架,选取整个框架集,在“属性”面板中将框架设置为“否”,“边框宽度”设置为“0”。使用框架进行网页布局使用框架进行网页布局2
9、任务分析任务分析 一个网站可以包含多个页面,此时需要用到框架。使用框架可以进行页面布局,把网页划分为几个区域。利用框架最大的特点就是使网站的风格一致,作为框架结构的一个子框架的内容给整个网站公用,每一个框架单独使用一个网页,从而使页面设计简单化。本任务以“小小书屋”为例介绍使用框架进行网页布局的方法。相关知识相关知识1.常见框架布局 常见的框架布局包括对窗口的水平分割、垂直分割和嵌套分割。(1)水平分割框架(2)垂直分割框架(3)嵌套分割框架2.编辑框架(1)拆分框架。(2)删除框架。任务实施任务实施(1)打开任务一中的top.htm网页文件,绘制布局,插入素材包中的“title.jpg”作为
10、标题图像。(2)打开left.htm网页文件,绘制表格,并插入一个4行1列的表格,在表格中输入相应文字。(3)打开main1.htm网页文件,绘制表格,并插入素材包中的相应图片。(4)保存当前框架集及框架网页,预览效果。(5)将main1.htm中的内容删除,只保留最外侧的布局表格,制作其他网页,其中包括分页“坚果”、“糖果”、“肉干”,分别保存在files文件夹内。(6)打开框架集网页index.htm,选取左侧框架网页中的网页标题名,设置各分页的链接,将所有链接的“目标”项设置为“mainframe”。(7)设置完成所有链接后,执行“文件”“保存全部”命令,将所有框架网页及框架集保存完毕。
11、使用浮动框架制作网页使用浮动框架制作网页3任务分析任务分析 浮动框架(Iframe)是指在网页文档中,以框架形式显示嵌套网页文档、主页、公告板和记事本的功能。利用这一功能,可以在指定的位置以指定的大小显示其他网页文档或站点,例如滚动新闻等。相关知识相关知识1.浮动框架的基本原理在页面中创建一个浮动框架,需要先制作好页面的其他内容,再在页面中以手写代码的方式插入浮动框架的代码。2.浮动框架与框架的区别浮动框架可以在任何网页的任何位置出现,框架只能在框架网页中存在。3.浮动框架的使用方法在需要使用浮动框架的相应位置写入代码。4.浮动框架代码的属性含义SRC:浮动框架中显示页面的源文件的路径和文件名
12、。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)其他几个链接如此类推进行设置。