当前位置:首页 >> 高中教育 >> 第8章 设计Web页面布局

第8章 设计Web页面布局


网站规划与网页设计

理工部 杨彩霖

第8章 设计Web页面布局
8.1 8.2 8.3 8.4 8.5 使用布局模式对页进行布局 AP元素 框架 样式表 模板

8.1 使用布局模式对页进行布局
创建页布局的一种常用的方法是使用HTML表格对元素进 行定位。但是,使用表格进行布局不太方便,因为

最初创建表 格是为了显示表格数据,而不是用于对Web页进行布局。为了 简化使用表格进行页面布局的过程,Dreamweaver提供了“布 局”模式。 在“布局”模式中,用户可以使用表格作为基础结构来设 计页,同时避免了使用传统的方法创建基于表格的设计时经常 出现的一些问题。

8.2 AP元素
AP元素(绝对定位元素)是分配有绝对位置的HTML页面 元素,具体地说,就是Div标签或其它任何标签。AP元素可以 包含文本、图像或其它任何可放置到HTML文档正文中的内容。 在设计网页时,必须对页面元素进行定位,使页面布局整齐、 美观。AP元素可以放置在页面的任意位置,使用AP元素可以 以像素为单位来精确定位页面元素。把页面元素置入AP元素中, 可以控制某个AP元素显示在前面还是后面,显示还是隐藏。配 合时间轴的使用,可同时移动一个或多个AP元素,从而轻松制 作出动态效果。

8.2 AP元素
8.2.2 将AP元素转换为表格 许多网页设计人员更喜欢通过AP元素进行页面布局设计, 而不是使用表格或布局模式创建页面布局。Dreamweaver支持 用户使用AP元素创建页面布局,然后将它们转换为表格。如果 用户需要一个使用表格的页面布局,最好使用Dreamweaver中 的标准表格布局工具创建该页面布局。 当然,用户可以在AP元素和表格之间相互转换,以调整布 局并优化网页设计。但是,需要注意的是,当用户将表格转换 回AP元素时,Dreamweaver会将此表格转换回AP Div,此操作 与对表格进行转换之前页面上可能已有的AP元素的类型无关。 另外,用户不能转换页面上特定的表格或AP元素,必须将页面 上所有的AP元素转换为表格。

8.3 框架
框架的作用就是把浏览器窗口划分为若干个区域,每个区 域可以分别显示不同的网页。框架由框架集(Frameset)和单 个框架(Frame)组成。框架集是在一个文档内定义一组框架 结构的HTML网页。框架集定义了一个网页中显示的框架集数、 框架集的大小、载入框架的网页源和其他可定义的属性等。单 个框架是指在网页上定义的一个区域。 1.框架类型 Dreamweaver预定义了多种类型的框架结构。在插入工具 栏的“布局”分类中单击“框架”按钮 ,在弹出的菜单中,用户 可以选择系统预定义的框架结构。 2.框架面板 在操作框架的过程中,框架面板是非常有用的。使用框架 面板可以进行选取、观察、修改框架等基本操作。因此在对框 架操作时,框架面板最好一直打开。

8.4 样式表
8.4.1 Dreamweaver中CSS样式的类型 执行“窗口”→“CSS样式”命令,打开CSS样式面板,如图所 示。单击CSS样式面板中的“新建CSS规则”按钮 ,打开“新建 CSS规则”对话框,如图所示。

8.4 样式表
8.4.1 Dreamweaver中CSS样式的类型 在Dreamweaver中CSS样式的类型包括以下3种。 (1)类 类也称为class类样式或自定义CSS样式,它在网页中定义了 一个CSS样式属性集,当页面中的对象引用该样式后,所定义 的CSS属性应用到页面中。 (2)标签 标签也称为重新定义HTML标签样式,该类样式是对 HTML标签进行重新定义。例如,创建或更改H1标签(对应于 段落格式中的“标题1”)的CSS样式时,网页中所有使用H1标 签设置了该格式的文本都能立即被更新。 (3)高级CSS选择器样式 该类样式可以定义网页中的超链接效果。例如,可以使超 链接文字在各种状态下均无下划线,并且当鼠标悬停时,文字 颜色由蓝色变为红色等。

8.4 样式表
8.4.2 Dreamweaver中使用CSS样式表美化页面

8.5 模板
8.5.1 模板的基本概念 模板是网页编辑软件生成具有相似结构和外观的一种网页 制作功能。如果希望站点中的网页享有某种特性,例如,相同 的布局结构,相似的导航栏等内容,模板是非常有用的。 对于模板而言,新的页面可以从一个模板中创建。一旦被 创建,这个新的文档将保持和原来模板的联系,除非被明确地 隔离或分开。一旦把模板应用于一组网页,就可以通过编辑该 模板来改变这一组网页中的共享信息。例如,将模板中的导航 栏更改后,应用该模板页面中的导航栏将被自动更新。 模板是由两类区域组成的:锁定区域和可编辑区域。当第 一次创建模板时,所有的区域都是锁定的。定义模板过程的一 部分就是指定和命名可编辑的区域。然后,当某个文档从某些 模板中创建时,可编辑的区域则成为惟一可以被改变的地方。 当然,模板可以进行修改,以便标记附加的编辑区域,或者重 新锁定可编辑区域。

8.5 模板和库
8.5.2 利用模板创建页面 8.5.3 用模板更新整个站点 当创建了一个模板后,并且将该模板应用于文档时,就可 以通过修改一个模板来控制所有应用此模板的文档。可以执行 以下操作之一更新站点: ? 在文档编辑窗口,执行“修改”→“模板”→“更新页面” 命令,打开“更新页面”对话框,如图8-82所示。 ? 在文件面板中切换到“资源”选项卡,在左侧的分类中选 择“模板”,打开模板面板。在模板上单击鼠标右键,在弹出 的菜单中选择“更新站点”命令(见图8-83),打开“更新页 面”对话框。 在对话框的“查看”列表中选择模板更新的范围,在其后 的列表中选择需要更新的站点。默认为当前站点。

习题8
1.使用布局视图设计如图8-84所示的页面。 2.使用AP元素制作一个具有图像相互叠放效果的页面。 3.使用框架技术制作Dreamweaver学习教程的框架网页,如 图8-86所示。 4.使用CSS样式表制作一个外框虚线,内框实线的课程表。 5.使用模板技术制作学校建筑的宣传网页,要求新校区简介 区域和建筑导航区域为锁定区域,其余区域为可编辑区域,如 图8-87所示。


更多相关文档:

第8章作业答案

第8章作业答案_工学_高等教育_教育专区。第 8 章...SOA 是一种在计算环境中设计、开发、部署和管理离散...与 Web 服务相关的三种操作:发布、查找和绑定,其...

第8章 使用模板和库项目

《Dreamweaver 网页设计》电子版教科书 第8章 使用模板和库项目 第8章 很多网站中,同一栏目(大类)下的网页一般都使用相同的布局方式或页面元素。如 果一页一页...

第七章 WEB标准与页面布局基础

第七章 WEB标准与页面布局基础_互联网_IT/计算机_专业资料。第七章 WEB 标准...第5课 设计Web页面布局 26页 1下载券 使用Web标准建站第8天:... 3页 免费...

第8章练习与实验答案

第8章练习与实验答案_高等教育_教育专区。Web前端开发技术课后习题答案储久良 第8章 练习与实验答案练习 8 1.选择题 (1) D (2)B (3) D (4) A (5) C...

WEB页面设计规范--整理ok

页面分割以上面图示的布局方式为例,按照通常 web 页面设计时所遵循的方法,并...第 8 页共 21 页 3.1 风格分类 Web 应用的页面风格内容包括: ? 布局,不...

网页设计课程板书 第8章:AP DIV元素

第8课:AP DIV元素 暂无评价 2页 免费 html网页设计课程报告论... 暂无评价 ...2).工具栏中,插入-布局-拖动“绘制 AP Div”到 AP 元素内。 2、标尺、...

第8章 链接结构分析子系统设计及核心算法

第8章 链接结构分析子系统设计及核心算法_互联网_IT/计算机_专业资料。第 8 ...? Clueweb09 语料库,链接关系图包含的节点数为 1040 809705 个,对应的出链接...

网页设计ASP第1-8章习题答案

在掌握 HTML 语言的基础上, 还需要掌握一门 WEB 服务器端开发语言,如选择 ASP...早期的网页布局用表格 较多,其优点是方便直观,浏览器兼容性好,缺点是网页显示...

第8章表单中控件的设计及应用

登录注册新闻网页贴吧知道音乐图片视频地图百科文库 搜...表单中控件的设计及应用 第 8 章 表单中控件的...设置命令按钮组中的按钮数目、按钮标题及按钮布局等...

CSS页面布局及样式设计实验报告

实验报告 实验项目名称: CSS 页面布局及样式设计 web 系统与技术 ) (所属课程...第1页 共8页 实验报告(8)聊天页面中使用 CSS 设计信息发送表单和发送按钮的...
更多相关标签:
web页面布局设计 | web前端页面布局框架 | web页面布局 | 16种web页面布局图 | java web页面布局框架 | web页面缩放布局不变 | web页面布局框架 | web前端页面布局 |
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com