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


更多相关文档:

网页设计与制作期末试题及答案

的页面尺寸越大 网页布局与平面设计一样,不受页面...共 60 分) 1、简述 Web 浏览器打开一个 Web ...CSS 的含义是( A.文档对象模型 C.级联样式表 8....

八种网页布局技巧

导读:文中所谓 8 种网页布局技巧并不是整个页面的设计布局,而是针对网页中某一...Useful Design Tools For Beautiful Web Typography (including grid-resources) 7...

Web标准设计技巧之二 布局漫谈

十天学会web标准·第二天... 13页 免费 第8章 设计Web页面布局 暂无评价 12...Web 标准设计技巧之二 布局漫谈 关于布局也许是大家最不放在眼里的地方, 其地位...

几种常见的网页布局形式

8.框架型布局 采用框架布局结构,常见的有左右框架型...由于兼容性和美 观等因素, 这种布局目前专业设计人员...第 5 章_网页布局 文档贡献者 qwertasdfg6788 贡献...

网页布局设计--尺寸

网页布局设计--尺寸_互联网_IT/计算机_专业资料。...8、 宽度问题其实是一个蛮值得讨论的问题。 在屏幕...最后回到 blog 皮肤问题,建议所有写网志“号称”web...

开发部web界面设计规范

(logo、页面布局、页面色彩、设计潮流、字体、内容质量)、情感体验等方面展开方面...Web 页面编码一律统一用 UTF-8 编码; 所有连接使用相对路径; 所有的文件、目录...

第4章 网页的布局设计

第4章 网页布局设计_计算机软件及应用_IT/计算机_专业资料。各种布局方法,精美案例介绍。第四章 网页布局设计本章学习目的 ? 表格布局 ? 框架的基本操作和框...

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

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

《网页设计与制作》试卷及答案(8)

第8章网页设计制作 7页 1下载券喜欢此文档的还喜欢 网页设计制作期末试题...可以将格式和结构分离 B.CSS 样式表不能制作体积更小下载更快的网页布局 C...

网页设计与布局

有利于 学生从素材整理、合成图片、制作 Flash 特效、布局网页等环节完整地把握...第七章 ImageReady CS 制作 GIF 动画 7.1 舞动的人 总结 第八章 绘制时尚 ...
更多相关标签:
网站地图

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