当前位置:首页 >> IT/计算机 >> 第4章 网页表格制作及页面布局

第4章 网页表格制作及页面布局


第四章 网页表格制作及页面布局
一、表格的插入及编辑 点击“常用” 布局”面板中的“插入表格” 1、 点击“常用”和“布局”面板中的“插入表格”命令 设置整个表格和 2、 设置整个表格和单元格属性 选择整个表格、调整表格大小、表格的属性: 选择整个表格、调整表格大小、表格的属性:为了使所创建的表格更加 美观、醒目,通过“属性”面板对表格的属性 如表格线的颜色、 对表格的属性( 美观、醒目,通过“属性”面板对表格的属性(如表格线的颜色、整个 表格或某些单元格的背景图像、颜色等)进行设置。 表格或某些单元格的背景图像、颜色等)进行设置。 修改”菜单→“表格” →“表格 3、 “修改”菜单→“表格”命令进行修改 4、 “命令”菜单→“格式化表格”命令进行格式化 命令”菜单→“格式化表格” →“格式化表格 5、 嵌套表格的使用

二、网页页面布局 1、 概述

现在有好几种尺寸的显示器,“14、15、17、19”英寸 英寸, 现在有好几种尺寸的显示器,“14、15、17、19”英寸,网页要在每个显 示器上显示正常, 要设置恰当的参数,常用的是在页面中插入表格放内容, 示器上显示正常,就要设置恰当的参数,常用的是在页面中插入表格放内容, 采用象素 百分比两种 象素和 两种: 采用象素和百分比两种: 第一种:采用象素为单位,是以使用最多的显示器为参照的, 象素为单位 第一种:采用象素为单位,是以使用最多的显示器为参照的,现在数量最 英寸的,所以页面使用象素为单位时, 多的显示器是 15 英寸和 17 英寸的,所以页面使用象素为单位时,是以 15 英寸 为标准, 的分辨率。 为标准,常用 800×600 的分辨率。 第二种: 采 百分比, 可以在各种显示器上有相同的效果, 宽度设置为 100% 100% 第二种: 用百分比, 可以在各种显示器上有相同的效果, 在各种显示器上全屏显示。 时,在各种显示器上全屏显示。 2、 以象素为单位介绍: 以象素为单位介绍:

象素大小的表格设置,选择像素为单位, 768。 以象素大小的表格设置,选择像素为单位,值为 768。可以在 15 英寸显示 器上全屏幕显示,在 17 英寸显示器上也有好的显示效果。相对使用百分比制作 器上全屏幕显示, 英寸显示器上也有好的显示效果。 采用像素比较简单。 网页,采用像素比较简单。 使用像素作单位时,可以用不同的值,下面是一些站点的宽度值: 使用像素作单位时,可以用不同的值,下面是一些站点的宽度值: http://www.5dmedia.com/首页 首页: 像素。 5D 多媒体 http://www.5dmedia.com/首页:宽 760 像素。 http://www.apple.com.cn/: 像素。 Apple 中国主页 http://www.apple.com.cn/:宽 680 像素。 http://www.isamsung.com.cn/ //www.isamsung.com.cn/: 像素。 三星电子 http://www.isamsung.com.cn/:宽 700 像素。 http://www.legend.com/: 像素。 联想 http://www.legend.com/:宽 725 像素。 以上这些站点的网页宽度,说明宽度没有一个固定值。 以上这些站点的网页宽度,说明宽度没有一个固定值。做一个在 800×600 分辨率下满屏幕显示的页面,可以大致选择一个近似的值: 430”, 分辨率下满屏幕显示的页面,可以大致选择一个近似的值:“宽 768 高 430”, 居中对齐。 430”等 用像素为单位的表格,大多是把表格设置为居中对齐 “宽 776 高 430”等。用像素为单位的表格,大多是把表格设置为居中对齐。选 中表格,在属性面板选择对齐方式为居中对齐。 中表格,在属性面板选择对齐方式为居中对齐。

3、

版式设计

设计精美的网站,都是采用了优秀的版式设计 做一个网页, 版式设计。 设计精美的网站,都是采用了优秀的版式设计。做一个网页,先要规划好 版式。几种常用的版式(分栏结构) LOGO(标志)尺寸,Banner(横幅) 版式。几种常用的版式(分栏结构),LOGO(标志)尺寸,Banner(横幅)尺 导航栏类型,导航菜单位置,网页内容,版权声明。 寸,导航栏类型,导航菜单位置,网页内容,版权声明。 (1)分栏结构: 分栏结构: 一个主页的简单结构,由三个表格组成。 一个主页的简单结构,由三个表格组成。 典型的二分栏结构:第一个表格,二行一列, Banner,第 典型的二分栏结构:第一个表格,二行一列,第一行放 LOGO 和 Banner,第 二行放导航菜单。中间一个表格,一行二列,里面再分别插入两个表格, 二行放导航菜单。中间一个表格,一行二列,里面再分别插入两个表格,左边 表格放导航或者图片,右边表格放网页内容。下面一个表格,一行一列, 表格放导航或者图片,右边表格放网页内容。下面一个表格,一行一列,放版 权声明。 权声明。 常见的分栏结构,还有三分栏,四分栏。 常见的分栏结构,还有三分栏,四分栏。 三分栏 尺寸: (2)LOGO 和 Banner 尺寸: 88×31; Banner: 468×60(全尺寸 Banner), 几种国际尺寸的 LOGO: 88×31; Banner: 468×60(全尺寸 Banner), 392×72 Banner),234×60(半尺寸按钮)。 ),234×60 (全尺寸带导航条 Banner),234×60(半尺寸按钮)。 尺寸是根据设计需要选择大小,并不受标准的限制。 实际中 Banner 和 LOGO 尺寸是根据设计需要选择大小,并不受标准的限制。 在页面的左上方, 在页面的右上方。也有相反的例子。 常见的 LOGO 在页面的左上方,Banner 在页面的右上方。也有相反的例子。例如 说明在设计时, 三星电子 http://www.isamsung.com.cn/ ,说明在设计时,并不受什么标准的 限制。 限制。 (3)导航栏类型: 导航栏类型: 导航栏在网页的设计中,直接关系到使用网页的方便, 导航栏在网页的设计中,直接关系到使用网页的方便,和整个网页的美观 也有很大关系 关系。 也有很大关系。 第一种:如果是以内容为主的网页,直接放入文字作为栏目, 第一种:如果是以内容为主的网页,直接放入文字作为栏目,以键盘上的 “|”分隔 一行一列的表格,如果栏目多,可以变成二行一列的表格。 分隔, “|”分隔,一行一列的表格,如果栏目多,可以变成二行一列的表格。常见于 门户网站, http://www.163.com。如果内容很多,兼顾美观, 门户网站,如 http://www.163.com。如果内容很多,兼顾美观,推荐使用弹出 式菜单, 中文版中可以直接做出弹出式菜单, 式菜单,在 Dreamweaver MX 中文版中可以直接做出弹出式菜单,不象以前的版 本那么复杂; 本那么复杂; 第二种:如果是个人网站,内容较少,可以使用尺寸较大的图片作菜单, 第二种:如果是个人网站,内容较少,可以使用尺寸较大的图片作菜单, 滤镜后,可以有很好的效果; 应用 CSS 滤镜后,可以有很好的效果; 第三种:现在最流行的就是 导航菜单了,晃到一个按钮上时, 第三种:现在最流行的就是 Flash 导航菜单了,晃到一个按钮上时,有动 画有声音,效果非常好, 播放器的电脑上,不能显示; 画有声音,效果非常好,但是在没有装 Flash 播放器的电脑上,不能显示; 第四种:现在国内使用较多的是使用按钮做导航。 第四种:现在国内使用较多的是使用按钮做导航。在 Dreamweaver MX 中文 版提供了直接制作 Flash 按钮的功能,输入文字就可以做出中文的 Flash 按钮。 按钮的功能, 按钮。 (4)版权声明 最下面的表格,一行一列,放版权声明,联系方式。 最下面的表格,一行一列,放版权声明,联系方式。

三、布局中“标准视图”和“布局视图”的运用 布局中“标准视图” 布局视图”


更多相关文档:

网站设计与制作第4章 网站表格布局设计_图文.ppt

网站设计与制作第4章 网站表格布局设计 - Dreamweaver CS5 网页制作基础教程 第4章 网站表格布局设计 本章将介绍在Dreamweaver CS5中创建和 编辑表格以及使用表...

第4章 网页布局-表格.doc

第4章 网页布局-表格 - 第 4 章 网页的版面设计和布局 第 4 章 网页的版面设计和布局 在确定了网站的主题和结构之后,就可以开始着手网页制作了。为了提高...

第4章1 网页布局(4.1 表格)_图文.ppt

第4章1 网页布局(4.1 表格) - 第4章 网页布局 ? ? 所谓“网页布局”,就是给将要出现在网页中的 所有元素进行定位。 网页的具体布局还与网页内容、网页风格...

第4章网页布局(表格、布局表格)_图文.ppt

第4章网页布局(表格布局表格) - 第4章 构建网页布局 使用表格 使用布局表格 4.1 使用表格 所谓表格就是由一个或多个单元格构成的集合, 表格中横向的多个...

第4章 网页布局4_1表格_图文.ppt

表格的三种视图模式 4.1.2 表格的基本操作 4.1.3 实践与练习:表格制作与使用 4.1.4 布局表格 表格小结 2016/3/7 《网页设计技术》 5 4.1.1 表格的三种视图...

网页设计与制作 第 4 章 网页布局_图文.ppt

网页设计与制作第4章 网页布局 图 4.1扩展表格模式入门《网页设计与制作第4章 网页布局 图4.2 标准模式下的页面网页设计与制作第4章 网页布局 ...

第4章 网页表格的使用及网页的布局_图文.ppt

格式化数据:直观、整齐 网页设计与制作 第四章 网页表格的使用及网页布局 一、表格的基本功能 2、布局网页:① 安排和定位网页中的文本和对象,这 个是网页中...

《网页设计与制作》第四章:页面设计_图文.ppt

网页设计与制作第四章:页面设计 - 页面设计 南海学院计算机系制作 网页的风

DW网页布局(表格、布局表格)_图文.ppt

DW网页布局(表格布局表格) - 第4章 构建网页布局 使用表格 使用布局表格 4.1 使用表格 所谓表格就是由一个或多个单元格构成的集合, 表格中横向的多个单元格...

网页电子教案-第4章_图文.ppt

网页电子教案-第4章 - 第4章 网页页面布局 $ [知识目标] 掌握表格及单元格的创建和编辑 掌握通过表格来进行网页页面的布局方法 掌握建立框架网页及框架属性设置...

网页制作案例教程第4章 表格_图文.ppt

网页制作案例教程第4章 表格 - 网页制作案例教程 ? ? ? ? ? ? ? 第1章:网站与网页概述 第2章:HTML入门 第3章:网页基本编辑 ? ? 第8章:CSS和模板 第...

第4章 设计页面版式_图文.ppt

第4章 设计页面版式 - 第四章 设计页面布局 ? ? ? ? ? ? 4.1 4.2 4.3 4.4 4.5 4.6 网页版面布局概述 实例导入:表格排版网页 使用表格排版 使用层排版...

第4章 教育网站静态页面布局_图文.ppt

第4章 教育网站静态页面布局 - 本章主要讲述Dreamweaver CS5相关知识,通过4个任务分别讲解了 表格、超级链接、列表、图文混排、表单和模板相关知识。通过本章...

4-3-3使用表格进行页面布局.doc

(信息)新授课 教材分析 《使用表格进行页面布局》是信息技术选修 3 第四章的内容,学生从了 解网站、自己规划站点,到在 Frontpage 里建站,对网页制作有了初步的...

第4章网页布局_图文.ppt

第4章网页布局 - 第4章 网页布局 4.1 表格应用和操作 表格的三种视图模式 表格可将页面划分为不同的部分,实现对元素的准确 定位。表格是对文本和图形进行布局的...

第4章 页面元素布局设计.ppt

第4章 页面元素布局设计_计算机软件及应用_IT/计算机_专业资料。第4章页面元素...目标: 本节的主要任务是学会在Dreamweaver中制作表格, 掌握使用表格定位页面元素...

第4章 DIV和页面布局技术_图文.ppt

第4章 DIV和页面布局技术 - 第4章 页面布局 目标 ? 了解层的概念及应用 ? 熟练使用<DIV>标签 ? 掌握表格布局技术及优缺点 ? 掌握框架布局及其优缺点 ? ...

高中信息技术 第4章网页表格的处理课件 粤教版选修3_图文.ppt

高中信息技术 第4章网页表格的处理课件 粤教版选修...设计页面布局 利用HTML和Dreamweaver 4.0创建表格 利用...择表格所包含的行数和列数 3.绘制表格 .利用前面...

网页常见布局_图文.ppt

网页常见布局 - DreamweaverCS3网页制作实训教程 第4章 网页布局 目录 本章导读 本章任务 知识细目 上机实训 后退 前进 结束 第四章 网页布局 Dreamwe...

《网页设计与制作》第四章:页面设计_图文.ppt

网页设计与制作第四章:页面设计 - 页面设计 南海学院计算机系制作 网页的风

更多相关标签:
网站地图

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