用HTML布局网页

1、用表格为网页布局 第十五课 赵小雨 09教育技术 资讯 常见网站主页构图 现状 计划 划分网站主页 标题栏 导航栏 网页内容 资讯 1、将“蓝色阳光”的网页进行划分 。 动手做一做 动脑想一想 1、FrontPage中与Word中的表格操作是否一样？ 2、在Frontpage中将页面结构图绘制出来 。 2、怎样去除表格线？ 3、充实表格，完成“蓝色阳光”的页面设计。 步骤steps 1、新建表格 2、调整表格表格插入表格 选中单元格表格 合并单元格 3、手动修改表格 表格手绘表格 绘制表格 4、在表格中插入文字与图片 文字可直接输入 图片：选中单元格 插入图片 来自。

2、网页一 网页二观看以下两个网页后，说一说你更喜欢哪一个，为什么,比一比,导航栏型,居中型,半包围型,主题突出型,看一看,网页的布局设计是没有限定规则的，只要配合网站内容，让浏览者感觉简洁有序美观就可以了。如果在这基础上，能够揭示主题富有创意。

3、用表格为网页布局,1、什么是布局？ 2、用表格给网页布局有什么作用？,排版,定位对象,1、插入表格 表格插入表格 在制作MAIL QQ邮箱网页时 要插入几行几列？ 2调整表格 （1）.合并单元格：选中要合并的两个或两个以上单元格右击合并单元格 （2）.拆分单元格：选中要拆分的单元格右击拆分单元格 （3）.手动调整表格：用“手绘表格”画出需要的单元格,表格的调整,练一练,1、用表格给 “MAIL QQ邮箱” 布局 2、有余力的同学可以充实内容,知识巩固,1、表格的插入,2、单元格的合并和拆分,3、手动绘制需要的单元格,。

4、第十二课,用表格为网页布局,一规划主页页面布局,常见的网站主页构成图,居中型,半包围型,主题突出型,导航栏型,标题栏,导航栏,网页内容,网站版权说明等,导航栏型,导航栏,网站版权说明等,标题栏,半包围型,标题栏,导航栏,网站版权说明等,居中。

5、,遂昌旅游网站截图文档,网页头 网站主题,网页内容 网站导航,网页内容 网站栏目3,网页内容 网站栏目2,网页内容 网站栏目1,网页尾 网站说明,网页头 网站主题,网站导航,网页内容 网站栏目3,网页内容 网站栏目2,网页内容 网站栏目1,网页脚 网站说明,任务1,主题突出型布局,半包围型布局,1、网站首页有哪些要素？ 2、我们用表格给网页布局有什么作用？,主题、导航、栏目简介、网站说明,。

6、:,用表格布局网页,表格的创建与内容添加表格的基本操作表格和单元格的属性设置表格的高级操作,:,表格的创建与内容添加,表格的插入将光标插入点定位到需要插入表格的位置。在常用插入栏中单击表格按钮快捷键为，翻开表格对话框。在该对话框中的行数文本。

7、www.gillion.com.cn,文档名称：PPT演示模板 Copyright (c) Gillion Page 1 of 5 Author：Hellen Version: 3.0 Date: 05.06.2006,XHTML+CSS网页布局基础-常用HTML标签介绍,常用HTML标签介绍目录,HTML简介,table 标签介绍,ul,ol,dl 标签介绍,iframe 标签介绍,div 标签介绍,HTML介绍,HTML,div,p, a, span, h1, h2, h3, h4 ,form table ul ol dl ,CSS,服 务,常用HTML标签介绍目录,HTML简介,table 标签介绍,ul,ol,dl 标签介绍,iframe 标签介绍,div 标签介绍,table 标签介绍,table 的适用范围 展示表格式的数据 (例.net里的grid控件) 作为表单的。

8、.,1,CSS网页布局与定位,.,2,CONTENTS,掌握如何使用浮动定位,.,3,理解表现和结构分离,01,.,4,如何优化网页,内容 结构 表现,.,5,.,6,什么是Div？,.,7,Div介绍,Html标签： Div标签中可以直接放入文本，也可以放入其他的标签，也可以多个Div标签进行嵌套使用。 Div的使用形式： 内容区域 姓名 性别 年龄 ,.,8,DIV+CSS,Div是XHT。

9、CSS网页布局与定位,CONTENTS,掌握如何使用浮动定位,2,理解表现和结构分离,01,3,如何优化网页,内容结构表现,4,5,什么是Div,6,Div介绍,Html标签：Div标签中可以直接放入文本，也可以放入其他的标签，也可以多个D。

10、用表格布局网页,表格的创建与内容添加 表格的基本操作 表格和单元格的属性设置 表格的高级操作,表格的创建与内容添加,表格的插入 将光标插入点定位到需要插入表格的位置。 在“常用”插入栏中单击表格按钮（快捷键为），打开“表格”对话框。 在该对话框中的“行数”文本框中输入创建表格的行数 在该对话框中的“列数”文本框中输入创建表格的列数 在“表格宽度”文本框中输入创建表格的宽度（像素和百分比） 表格边框粗细设置 单元格边距设置：单元格边框与单元格中内容的距离 单元格间距设置：相邻单元格间的距离,表格的创建与内容添加,。

11、表格基础与布局,本课内容,1、表格标记基础 2、表格布局及应用 3、HTML总结及编写注意事项,带着求知好学的态度，超越自己，完善自己。,基本语法, 单元格内容 ,表格,表格中的一行,. - 定义表格 - 定义表行 - 定义表头 - 定义表元(表格的具体数据),带着求知好学的态度，超越自己，完善自己。,表格的边框及尺寸, 设置边框 设置表格的宽和高 单元格之间间隙 #=value 内容与单元格边框距离,带着求知好学的态度，超越自己，完善自己。,表格相关颜色设置, 表格边框颜色设置 背景颜色设置 背景图片设置 亮边框的颜色 暗边框的颜色,带着求知好学的态。

12、CSS网页布局与定位,CONTENTS,掌握如何使用浮动定位,理解表现和结构分离,01,如何优化网页,内容结构表现,什么是Div,Div介绍,Html标签：Div标签中可以直接放入文本，也可以放入其他的标签，也可以多个Div标签进行嵌套使用。

13、第4章 用表格和框架布局网页,创建表格 表格属性设置 使用表格布局网页 创建框架 框架控制 使用框架布局网页,网页布局方法,表格 CSS+DIV 使用框架,4.1.1 表格标记,表格由 标记来定义。每个表格均有若干行（ ），每个表格可以定义第一行的单元格为表头（），其余每行被分割为若干单元格（ ）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。 实例：4-1.html,4.1.1 表格标记, head1 head2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 ,4.1.2 表格。