Download presentation
Presentation is loading. Please wait.
1
Web 编程基础(4)
2
4.1 表格 4.1.1 插入表格两种方式： ①选择“布局”对象面板上的表格（Insert Table）选项； ②“插入”菜单→表格。
3
4.1.2 表格练习1 创建一个日历，实现在表格中插入图片，插入表格，合并单元格，为单元格添加背景色，修改字体颜色以及实现文字链接等如图所示：
4
4.1.3 表格练习2 New York $25,000 $97,000 Boston $12,000 $42,000 Washington
表格排序： “命令”“排序表格” 创建一个包含英文字母和数字的表格,如图所示，对其各列进行排序。 New York $25,000 $97,000 Boston $12,000 $42,000 Washington $13,000 $80,000
5
4.2 表格的标签 <body> <table border>
<caption>跑步速度标准</caption> <tr><th></th><th>男性</th><th>女性</th><th> 少年</th></tr> <tr><th>100米</th><td>14秒</td><td>17秒 </td><td>19秒</td></tr> <tr><th>400米</th><td>55秒</td><td>1分5秒 </td><td>1分20秒</td></tr> <tr><th>1500米</th><td>5分25秒</td><td>7分 20秒</td><td>9分20秒,13岁以下10分，10岁以下 不要求</td></tr> </table> </body>
6
4.2 表格的标签 说明： <TABLE>是表格的总标识符，<TR>是行标识， <TH>是数据项名标识，<TD>是数据项标识， <CAPTION>是表格标题的标识 ； <TABLE>标签包含的属性，即border、width、 height、cellspacing、cellpadding、align； <TR>标签的属性：align、valign；
7
4.2 表格的标签 说明： <TH>和<TD>的属性设定，包括rowspan、colspan、 align、valign； <CAPTION>包含align属性； 仅在IE中有效的标签和属性： <TH>和<TD>的bgcolor属性和background属性； <TABLE>的frame属性和rules属性； 表格的行分组和列分组标签，用于指定某几行或几列的共 同属性；
8
4.2 表格的标签 一行跨多列的单元格（合并单元格） 使用<td>、 <th>标记的colspan属性
<table border=1> <tr> <th colspan=3> Morning Menu</th> </tr> <tr> <th>Food</th> <th>Drink</th> <th>Sweet</th> </tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table>
9
4.2 表格的标签 一列跨多行的单元格（合并单元格） 使用<td> 、 <th>标记的rowspan属性
<table border=1> <tr> <th rowspan=3> Morning Menu</th> <th>Food</th> <td>A</td> </tr> <tr> <th>Drink</th> <td>B</td> <th>Sweet</th> <td>C</td> </tr> </table>
10
4.3 使用表格布局 人们的生活越来越离不开网络了，例如网上购物、网络办公等日常生活都与网络密切相关了，那么网上那么精致漂亮的网页是如何制作的呢？这些图片是如何整齐的排列在网页中呢？答案是这些图片、文字的整齐排列都是可以通过表格实现的，即把这些元素放在表格中。 使用表格制作网页，就好像在word文档中编辑表格一样，可以设置表格的行、列，单元格的宽度、高度等，并且可以在表格中插入一个新的表格，在网页中称为表格嵌套，表格中可以插入图片、文字等内容，并且可以使用属性检查器对表格的文字进行编辑，听起来是不是很简单，那么从现在开始就学习如何使用表格布局页面、并且制作网页？
11
4.3.1 表格嵌套 在单元格中插入一个新的表格 嵌套表格
1、在实际网页嵌套中，单元格与其内的表格之间无空隙，即外层表格与内层表格的单元格边距和单元格间距皆设置为0。
12
4.3.2 页面布局 页面布局效果 条理清晰 主次分明 色彩对比度适当 布局疏密适当
条理清晰：网页起到向浏览者传达信息的作用，必须保持页面条理清晰、让每个浏览者都会很轻松的理解页面的内容。 主次分明：一个网页所包含的网页元素很多，包括图像、文字、动画和影片等，必须通过布局来保证主次分明。 色彩对比度适当：让不同的形态、色彩等元素相互对比，来形成鲜明的视觉效果。例如不同颜色之间的对比，大块颜色与小块颜色的对比等，它们往往能够创造出丰富的变化效果。 布局疏密适当：网页要做到疏密有度，不要整个网页一种样式，在适当进行留白，运用空格、改变行间距、字间距等制造出一些变化的效果。
13
4.3.3 网页布局形式 常见网页布局形式 “国”字型 拐角型 标题正文型 左右框架型 上下框架型 综合框架型 封面型 Flash型 变化型
“国”字型：也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。 “国”字型 也可以称为“同”字型，是一些大型网页所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分别列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是大家大网上见到的最多的一种结构类型。
14
4.3.3 网页布局形式 拐角型 拐角型 这种结构与“国”字型其实只是形式上的区别，其实很相近的，上面是标题及广告横幅，接下来是左侧的一窄列链接等，右列是很宽的正文，下面也是网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。 拐角型：这种结构与“国”字型结构只是形式上的区别，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右侧是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。
15
4.3.3 网页布局形式 标题正文型：这种类型即最上面是标题或类似的一些 东西，下面是正文，比如一些文章页面或注册页面等 就是这种类。
16
4.3.3 网页布局形式 左右框架型：这是一种左右为分别两页的框架结构， 一般左面是导航链接，有时最上面会有一个小的标题 或标致，右面是正文。我们见到的大部分的大型论坛 都是这种结构的，有一些企业网站也喜欢采用。这种 类型结构非常清晰，一目了然。
17
4.3.3 网页布局形式 上下框架型：与左右框架类似，区别仅仅在于是一种 上下分为两页的框架。
综合框架型：上两种结构的结合，相对复杂的一种框 架结构，较为常见的类似于“拐角型”结构，只是采 用了框架结构。 变化型：即上面几种类型的结合与变化，比如在视觉 上接近拐角型，但所实现的功能的实质是那种上、下、 左、右结构的综合框架型。
18
4.3.3 网页布局形式 封面型 封面型：这种类型大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果处理的好，会给人带来赏心悦目的感觉。 封面型 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果处理的好，会给人带来赏心悦目的感觉。
19
4.3.3 网页布局形式 Flash型 Flash型：与封面型结构类似，只是这种类型采用了Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体 Flash型 其实Flash型与封面型结构是类似的，只是这种类型采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。
20
4.3.4 使用表格布局页面 例：国字型网页布局 根据上页的分析设计出表格布局
21
4.4 布局要点 4.4.1 关于第一屏 所谓第一屏，是指到达一个网站在不拖动滚动 条时能够看到的部分。那么第一屏有多“大”呢？ 其实是未知的。一般来讲，在800*600的屏幕显示模 式(这也是最常用的)下，在IE安装后默认的状态下 (即工具栏地址栏等没有改变) ，IE窗口内能看到的 部分为778px*435px，以这个大小为标准就行了。
22
4.4 布局要点 4.4.2 关于导航栏的位置 导航栏一定要清晰、醒目，导航栏要在“第 一屏”能显示出来，但是有时第一屏可能会小于 435px，因此，横向导航栏要优于纵向导航栏。 原因很简单：如果浏览者的第一屏很矮，横向的仍能全部看到，而纵向的就很难说了，因为窗口的宽度一般是不会受浏览器设置影响的，而纵向的则不确定性要大的多
23
4.4 布局要点 4.4.3 什么样的布局是最好的 ？？？ 具体情况具体分析！！！ 如果内容非常多，就要考虑用“国字型”或拐角型；
4.4 布局要点 4.4.3 什么样的布局是最好的 ？？？ 具体情况具体分析！！！ 如果内容非常多，就要考虑用“国字型”或拐角型； 如果内容不算太多而一些说明性的东西比较多，则可以考虑 标题正文型； 几种框架结构的一个共同特点就是浏览方便，速度快，但结 构变化不灵活； 如果是一个企业网站想展示一下企业形象或个人主页想展示 个人风采，封面型是首选； Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能 表达过多的文字信息。
24
4.5 使用表格布局页面综合练习 利用所给素材，运用表格布局“中国创新网”的 top视图，效果如图所示，文件命名为top.html。
25
4.5 使用表格布局页面综合练习 利用所给素材， 运用表格布局“中 国创新网”的left视 图，效果如图所示， 文件命名为 left.html 。
26
4.5 使用表格布局页面综合练习 利用所给素 材，运用表格布 局“中国创新网” 的main视图，效 果如图所示,文件 命名为main.html 。
27
4.5 使用表格布局页面综合练习 创建一个带有topframe、leftframe和 mainframe的框架，将top.html、left.html 和main.html分别放入三个框架中，效果如 图所示。
Similar presentations
