当前位置:首页 >> 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)版权声明 最下面的表格,一行一列,放版权声明,联系方式。 最下面的表格,一行一列,放版权声明,联系方式。

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


赞助商链接
更多相关文档:

dreamweaver cs3网页制作 第四章

dreamweaver cs3网页制作 第四章_计算机软件及应用_IT...最外层表格的父元素为浏览器窗口,嵌套表格的父元素...在使用表格布局页面时,首先需要对页面中的各类元素作...

第4章_电子表格Excel2010教案_图文

第4章_电子表格Excel2010教案_其它课程_小学教育_...线型图等数据图表的制作 难 点: 1、数据透视表 2...编辑电子表格,如【页面布局】选项卡下的【页面 设置...

办公软件案例教程第4章 个人简历的制作

网页 新闻 贴吧 知道 音乐 图片 视频 地图 文库 |...办公软件案例教程第4章 个人简历的制作_简历_求职/...表格混排 Word 文档的版面布局 理论实践一体化,教...

第四章Excel电子表格第一讲

登录注册新闻网页贴吧知道音乐图片视频地图百科文库 搜...第 4 章我们主要讲述电子表格制作表格中的...单击“页面布局”选项卡的对话框启动器,打开“页面...

第4章 编辑Excel 2007表格_图文

第4章 编辑Excel 2007表格_电脑基础知识_IT/计算机...的整体美观,甚至不能完 整地将数据打印在目标页面...对单元格本身进行相应的设 置,以使制作表格更加...

第4章-电子表格Excel-2010

第4章 电子表格Excel 2010(单选题)完成下列题目, ...电子表格软件主要用于处理数据 D.幻灯片制作软件 [...“页面设置”在“页面布局”选项卡中。这里应该选B...

第四章Excel 电子表格

第四章Excel 电子表格_计算机软件及应用_IT/计算机_...多媒体制作 D.美术设计、装潢、图片制作等各个方面...C. “文件”菜单中的“页面设置”??? D. “插入...

4单选题第四章电子表格

A:数字 B:字母 C:数字与字母混合 D:第一个为字母其余为数字 答案:A 难度:1 知识点:电子表格部分\Excel 基础\Excel 的基本知识\Excel 窗口的结构\工作表 4...

第4章EXCEL电子表格

第4章EXCEL电子表格_计算机软件及应用_IT/计算机_专业...6.Excel 2003 主界面窗口中编辑栏上的"fx"按钮...cs3简单制作动态搞笑图片 68份文档 新市场营销法则...

第四章文本和表格的信息加工

第四章文本和表格的信息加工_其它课程_高中教育_教育专区。第四章【知识点】 ...页面纸型、页边距、页码,还可以插入表格、艺术字、图像, 绘制图形,制作结构图等...

更多相关标签:
网站地图

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