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


更多相关文档:

web第8章练习与实验答案

网页 新闻 贴吧 知道 音乐 图片 视频 地图 文库 |...web第8章练习与实验答案_计算机软件及应用_IT/...8"> 匾牌设计 body{text-align:center;} #div...

开发部web界面设计规范

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

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

用Dreamweaver8 表格进行页面布局教程本文介绍如何在 ...设计草样由客户要求其 Web 站点具有的任意数目的...在"插入表格"对话框中,对第二个表格执行下面的操作...

WEB界面设计

设计的原则,了解页面内容、风格、布局、色彩设计的...景点的项目 8, 景点的网址 9,景点的联系方式 功能...第六章 Web界面设计 46页 免费 软件界面设计准则WEB...

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

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

附表:第8章网页制作--实训13--赵龙刚(下发学生)

附表:第8章网页制作--实训13--赵龙刚(下发学生)...七、网页布局 8、在 FronrPage 2003 中,在指定...表单是 Web 服务器与客户交互的手段,表单的作用就...

Web界面设计

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

Web页面设计规范

Web页面设计规范_互联网_IT/计算机_专业资料。Web 页面设计规范 编 号: 版本...5 页面布局 ......

开发部web界面设计原则

还是颜色、窗口布局风格,遵循统一的标准,做到真正的...八、 系统响应时间原则系统响应时间应该适中,响应时间...一个Web系统OA界面设计和... 14页 免费 第六章 ...

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

Web设计】创意十足的web布局及交互设计_互联网_IT/计算机_专业资料。良知塾...第8章 设计Web页面布局 12页 免费 第11章 CSS网页布局和We... 7页 1下载...
更多相关标签:
网站地图

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