《电子商务网页设计》课件项目六 框架布局设计与制作电子商务网页.pptx
《《电子商务网页设计》课件项目六 框架布局设计与制作电子商务网页.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)新建网页,切换至布局视图,单击“插入”栏中的“框架”展开按钮,在分类中单击“顶部和嵌套的左侧框架”的框架集按钮,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 电子商务网页设计 电子商务网页设计课件项目六 框架布局设计与制作电子商务网页 电子商务 网页 设计 课件 项目 框架 布局 制作
链接地址:https://www.31doc.com/p-21712819.html