当前位置:首页 >> 高中教育 >> 第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所示。


更多相关文档:

用Dreamweaver8表格进行页面布局教程

用Dreamweaver8 表格进行页面布局教程本文介绍如何在 Macromedia Dreamweaver 8 中...建立站点并检查设计草样后,您就可以开始创建 Web 页面了。首先您将 创建一个...

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

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

WEB界面设计

学姓号名 辅导教师 常旭青 成绩 实验日期 1 实验名称 : 2、实验目的 实验时间 WEB 界面设计 掌握 WEB 界面设计的原则,了解页面内容、风格、布局、色彩设计的...

Web页面设计规范

页面分割以上面图示的布局方式为例,按照通常 web 页面设计时所遵循的方法,并...其他要求:第 8 页共 27 页 ? ? ? ? ? ? ? ? 表头中的数据应水平/...

Web界面设计

界面规划 3)选择 WEB 界面设计要素,设计出网页 4)对 web 界面布局、内容、...编号 1 2 3 4 5 6 7 8 字段名称 姓名 密码 学号 电话 QQ 语文 数学 英...

Web网页设计实验报告_图文

Web网页设计实验报告_互联网_IT/计算机_专业资料。...在“外观”选项卡的“布局”栏中打开“对齐方式”...第6章网页设计基础Web美... 85页 1下载券 网页...

【Web设计】创意十足的web布局及交互设计

第5课 设计Web页面布局 26页 2财富值 第8章 设计Web页面布局 12页 2财富值...此文章已于 12:44:26 2013/2/7 发布到 良知塾 【Web 设计】创意十足的 web...

开发部web界面设计原则

四、 显示信息一致性的原则无论是控件使用,提示信息措辞,还是颜色、窗口布局风格...一个Web系统OA界面设计和... 14页 免费 第六章 Web界面设计 46页 免费 第...

人机交互技术Web界面设计

第8章 Web界面设计 人... 100页 2下载券 人机交互课件第7章 Web界... 暂无...Web 界面设计要素 a) Web 界面布局 Web 界面的色彩 Web 界面的字体 Web 界...

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

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

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