使用表格布局网页时

第4章 使用表格布局网页 表格基本操作 表格高级操作

4.1 表格基本操作表格(Table)是由一个或多个单元格构成的集合， 表格中横向的多个单元格称为行(在HTML语言中 以<tr>标签开始，</tr>标签结束),垂直的多个 单元格称为列(以<td>标签开始，</td>标签结 束),行与列的交叉区域称为单元格，网页中的元 素就放置在这些单元格中 。此处表示未 明确设置单 元格宽度 此处显示了表格 的宽度。如果只 显示一个“▼” 符号，表示未明 确设置表格宽度

列

行 单元格

4.1.1 创建表格Dreamweaver CS4拥有非常完善的表格编辑 功能，本节我们首先来看一下如何在网页文档中 创建表格。

4.1.2 选择表格和单元格1.选择表格 将鼠标光标移至单元格边框线上，当鼠标光标变为 或 形 状时单击鼠标左键。 将鼠标光标移至表格外框线上，当鼠标光标变为 形状时， 单击鼠标左键。

在表格内部任意单元格中单击鼠标左键，然后在标签选择器 中单击对应的“

常见页面布局

页面布局常受到硬件条件（显示器的大小和分辨率）和技术的限制，所以归纳起来大致有六种类型： （1）“同”字型布局：特点，页面顶部水平放置主导航栏，其下分为左中右三栏，左边放置内容导航栏、二级导航栏热点内容等；右边放置站点图片链接、动画广告、搜索引擎、友情链接、注册登录信息；中间为主要内容板块。如韩国的“happybean.naver.com” 其优点是：结构清晰直观、平稳均匀’、次分明。缺点：过于呆板僵化、单点乏味。要注重合理色彩搭配。 （2）“匡”字型布局：特点，把同字型布局右边内容移到底部而成，它的结构特点和和优缺点也相同。 （3）“吕”字型布局：特点，把页面分成上下两大块，其中每一块都有同字型结构的特点。如网易新闻网。

（4）左右对称布局：顶部不设页眉和导航栏，左边设置导航，右边放主要内容。特点结构简单适合内容较少的页面。

（5）II字型布局：特点顶部设置站标和导航栏；下边分为左右两部分左窄右宽。左边放置二级导航栏、热点内容链接、登陆栏、友情链接等、右边分为主要内容区。

（6）自由式布局：打破常规的规矩，尽情的挥洒极具创意自由灵活。优点是：漂亮现代轻松明快极具美感给人以美的享受。缺点是；下载速度相对较慢，文字信息量少。 dr

常见页面布局

页面布局常受到硬件条件（显示器的大小和分辨率）和技术的限制，所以归纳起来大致有六种类型： （1）“同”字型布局：特点，页面顶部水平放置主导航栏，其下分为左中右三栏，左边放置内容导航栏、二级导航栏热点内容等；右边放置站点图片链接、动画广告、搜索引擎、友情链接、注册登录信息；中间为主要内容板块。如韩国的“happybean.naver.com” 其优点是：结构清晰直观、平稳均匀’、次分明。缺点：过于呆板僵化、单点乏味。要注重合理色彩搭配。 （2）“匡”字型布局：特点，把同字型布局右边内容移到底部而成，它的结构特点和和优缺点也相同。 （3）“吕”字型布局：特点，把页面分成上下两大块，其中每一块都有同字型结构的特点。如网易新闻网。

（4）左右对称布局：顶部不设页眉和导航栏，左边设置导航，右边放主要内容。特点结构简单适合内容较少的页面。

（5）II字型布局：特点顶部设置站标和导航栏；下边分为左右两部分左窄右宽。左边放置二级导航栏、热点内容链接、登陆栏、友情链接等、右边分为主要内容区。

（6）自由式布局：打破常规的规矩，尽情的挥洒极具创意自由灵活。优点是：漂亮现代轻松明快极具美感给人以美的享受。缺点是；下载速度相对较慢，文字信息量少。 dr

信息技术（八年级）

课 题 课 型 第十二课 用表格为网页布局 任务驱动型 总课时 教学课时 1 第1课时 知识目标：用表格排版主页使其达到页面整洁有序； 技能目标：在网页中插入表格并更改表格的属性； 教学目标 情感目标：用表格排版网页解决了网页版面杂乱的问题，提示同学们凡事要有计划，做事要遵守规则，促进其做事的信心。 教学重点 教学难点 插入表格和更改表格属性 让学生灵活掌握排列表格和设置表格属性的方法 所需的资源和环境 常规资源 1、教学环境的准备： （1）多媒体网络教室：学生计算机上安装IE6.0，能上因特网； （2）教师机上准备好学生上交作业的共享文件夹。 教学环境 2、 教学工具的准备： （1）电子教室； （2）学生任务单 教 学 设 计 新课导入： “凡事预则立，不预则废。”预：指事先的计划和准备；制作网页前也想要进行规划，引出本课主题——用表格为网页布局。 正式授课： 本课的主要任务，解决三个问题 为什么要规划页面布局？ 为什么要依靠表格？ 如何运用表格为网页布局？ （一）为什么要规划页面布局 介绍网页的版面布局：主要指网站主页的版面布局，其他网页的版面与主页风格基本一致。为了达到最佳的视觉表现效果，应

篇一：IE在淘宝等网页中“安全警告”、“ 证书错误”、“ 已阻止此网站显示有安全证书错误的内容”的处理方法

IE在淘宝等网页中“安全警告”、“ 证书错误”、“ 已阻止此网站显

示有安全证书错误的内容”的处理方法

IE7、IE8浏览器由于其安全级别的默认设置，在访问如淘宝等某些特殊网站时，总会出现“是否只查看安全传送的网页内容”、 “不受信任的证书”、 “已阻止此网站显示有安全证书错误的内容”的提示，给使用者带来很大的不便，但是这些安全提示并没有什么实际意义。

怎样关掉这些阻止和提示呢，在网上可以搜到很多的方法，但基本上介绍的不完整或过于专业繁琐甚至不能真正解决问题，经过多次的反复实验使用，针对这些阻止和提示，现把最有效的方法做简明扼要的总结如下：

一、IE安全警告“是否只查看安全传送的网页内容”：

工具->Intemt选项 ->安全->自定义安全级别->在“其他”分类里边找到“显示混合内容”，选“启用”。另外，在自定义级别下，除了“仅允许未经批准的域....”以外，其他设置尽量都选择“启用”，然后重启浏览器。

二、关于IE8证书错误：不受信任的证书：

在百度中输入“证书服务”，搜索下载CA证书并按提示安装，安装十分简单。安装完毕就彻底

网页布局设计精彩作品欣赏

在这篇文章中，我们可以欣赏到一些实用的Photoshop网页布局作品，感受视觉的美感，从中吸取灵感，提升技术水平。

1. 企业WordPress博客布局

创暗调，整洁和实用的企业wordpress博客布局 2. 旧纸张风格

旧纸张风格装饰的网页布局. 3. 制作 ‘Clean Grunge’ 博客布局

既要Clean, 又要Grunge。 4. 创建一个时尚，高端的Web设计

时尚、高端和经典的Web布局

5. Clean Website Layout

非常简单整洁的网页布局。

6. How to Create a Grunge Web Design in Photoshop

Grunge风格的网页布局

7. Photoshop Paper Texture Grunge Design

纸纹风格的布局

8. How a Simple Layout Can Be Mixed ‘n’ Matched

简单的网页布局

9. Five Looks, One Layout

10. Design a Cartoon Grunge Web site Layout

11. Professional Magazine Web Layout

杂志风格的网页布局

前面我们介绍了用表格进行网页布局定位的方法，它是通过直接设定表格的参数来实现的，对于简单的情况，这种方法还可以胜任，如果布局很复杂，用手工直接设定表格就会变成一件极其繁琐的工作，甚至变成“不可能完成任务”。

因此Dreamweaver 为用户提供了方便的手段创建和控制网页页面的布局，而本质仍然是通过表格来实现的。

为了简化使用表格来创建页面布局的过程，Dreamweaver提供了布局视图。在布局视图下，用户可以使用表格作为潜在的结构来设计自己的网页布局，并且可以避免原来使用表格带来的缺陷。例如可以在网页上轻松地画出单元格，然后定制和移动这些单元格到需要的任何地方。创建的布局可以有固定的宽度或者可以占满整个浏览器窗口。

要使用布局视图，必须首先从切换Dreamweaver的标准视图模式切换到布局视图模式。 首先观察Dreamweaver的“插入”面板中的“布局”页。

在默认情况下，文档窗口是以标准模式显示的，也就是在Dreamweaver的以前版本中见到的样子。当按下按钮后，就切换到了布局视图模式。如果选择菜单命令“查看→表格模式→布局模式”也可以达到相同目的。

要切换回标准模式，只要单击按钮就可以了。

进入布局视图

前面我们介绍了用表格进行网页布局定位的方法，它是通过直接设定表格的参数来实现的，对于简单的情况，这种方法还可以胜任，如果布局很复杂，用手工直接设定表格就会变成一件极其繁琐的工作，甚至变成“不可能完成任务”。

因此Dreamweaver 为用户提供了方便的手段创建和控制网页页面的布局，而本质仍然是通过表格来实现的。

为了简化使用表格来创建页面布局的过程，Dreamweaver提供了布局视图。在布局视图下，用户可以使用表格作为潜在的结构来设计自己的网页布局，并且可以避免原来使用表格带来的缺陷。例如可以在网页上轻松地画出单元格，然后定制和移动这些单元格到需要的任何地方。创建的布局可以有固定的宽度或者可以占满整个浏览器窗口。

要使用布局视图，必须首先从切换Dreamweaver的标准视图模式切换到布局视图模式。 首先观察Dreamweaver的“插入”面板中的“布局”页。

在默认情况下，文档窗口是以标准模式显示的，也就是在Dreamweaver的以前版本中见到的样子。当按下按钮后，就切换到了布局视图模式。如果选择菜单命令“查看→表格模式→布局模式”也可以达到相同目的。

要切换回标准模式，只要单击按钮就可以了。

进入布局视图

网页布局设计精彩作品欣赏

在这篇文章中，我们可以欣赏到一些实用的Photoshop网页布局作品，感受视觉的美感，从中吸取灵感，提升技术水平。

1. 企业WordPress博客布局

创暗调，整洁和实用的企业wordpress博客布局 2. 旧纸张风格

旧纸张风格装饰的网页布局. 3. 制作 ‘Clean Grunge’ 博客布局

既要Clean, 又要Grunge。 4. 创建一个时尚，高端的Web设计

时尚、高端和经典的Web布局

5. Clean Website Layout

非常简单整洁的网页布局。

6. How to Create a Grunge Web Design in Photoshop

Grunge风格的网页布局

7. Photoshop Paper Texture Grunge Design

纸纹风格的布局

8. How a Simple Layout Can Be Mixed ‘n’ Matched

简单的网页布局

9. Five Looks, One Layout

10. Design a Cartoon Grunge Web site Layout

11. Professional Magazine Web Layout

杂志风格的网页布局