表格与框架布局
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
框架的显示效果
<frame frameborder=“”> 是否显示框架边框 属性取值为 1 或 0 <frame scrolling=“”> 是否在框架内加入滚动条 可以取为yes、no、auto 可以取为 、 、 <frame noresize> 设置边框的不可移动属性 <frame marginwidth=“” marginheight=“”> 设置框架内容与框架边框之间的空白
页面主要内容区域
页面主要内容区域
网站版权信息
2010-10-7 表格与框架布局
内容提要
1 2 3 4
Dream weaver 简介 网页布局 表格布局
框架布局
3. 表格布局
网站LOGO 网站 网站导航区 主要内容区
网站版权区
2010-10-7 表格与框架布局 11
3. 表格布局
表格标记 <table></table>
src可以是 可以是HTM,GIF,JPG,PNG,TXT,*.*等文件名 可以是 等文件名
<html> <body> <h1>iframe Test</h1> <iframe name="tt" src="frame1.htm" width="250" height ="200" scrolling="no" frameborder="0"></iframe> </body> </html>
2010-10-7
表格与框架布局
12
3. 表格布局
表格标记 <table></table>
表格与页面的对齐 <table align>
center, right, left
单元格里插入文字、 单元格里插入文字、图片
单元格背景 单元格内容水平对齐 <tr>、<td>内使用 内使用align属性，center, right, left 属性， 、 内使用 属性 单元格内容的垂直对齐
表格与框架布局
余发江 qshxyu@126.com 武汉大学 计算机学院
内容提要
1 2 3 4
Dream weaver 简介
网页布局 表格布局 框架布局
1. Dream weaver 简介
网页设计工具 (Macromedia
Dream weaver Fireworks, Photoshop Flash
<tr>、<td>内使用 、 内使用valign属性，top, middle, bottom 属性， 内使用 属性
2010-10-7
表格与框架布局
13
内容提要
1 2 3 4
Dream weaver 简介 网页布局 表格布局 框架布局
4. 框架布局
2010-10-7
表格与框架布局
15
4. 框架布局
2010-10-7
表格与框架布局
4
1. Dream weaver 简介
设计器
2010-10-7
表格与框架布局
5
1. Dream weaver 简介
基本操作
插入文本
Text Properties Insert Space
插入图片
GIF (Graphics Interchange Format) JPEG (Joint Picture Experts Group)
插入多媒体
Insert Audio Insert Video Insert Flash (Flash Video)
2010-10-7 表格与框架布局 6
1. Dream weaver 简介
基本操作
绘制表格
Insert Table 合并、 合并、拆分单元格 单元格 嵌套表格
Set Link
General Link, Email Link 锚点、 锚点、热点
2010-10-7
表格与框架布局
17
4. 框架布局
Link in Frame
使用<frame name=“”>指定框架名称 (<frame 使用 指定框架名称 id=“”>) 特殊的框架名称 _self、_blank、_parent 、 、 _top，在当前的整个窗口中打开所链接的文档，删 ，在当前的整个窗口中打开所链接的文档，
பைடு நூலகம்
Adobe)
Dream Weaver
所见即所得 代码器、 代码器、设计器
2010-10-7
表格与框架布局
3
1. Dream weaver 简介
代码器
编辑－首选参数－字体 编辑－首选参数－ Assistant，自动补齐标记，选择属性 ，自动补齐标记， 参考窗口 折叠、 折叠、扩展标签 验证标记、 验证标记、浏览器支持检查 高亮显示无效代码、 高亮显示无效代码、行号 增加注释、 增加注释、删除注释
在同一个浏览器窗口中同时显示多个网页
框架集<frameset>…</frameset> 框架集
定义整个框架结构 rows 定义行结构框架 cols 定义列结构框架
框架<frame> 框架
具体定义每个页面 使用src属性指定框架中的页面 使用 属性指定框架中的页面
2010-10-7
表格与框架布局
16
4. 框架布局
网景浏览器不支持
2010-10-7 表格与框架布局 19
Thank You！ ！ Any Questions?
2010-10-7
表格与框架布局
20
除所有框架
属性， 在超链接标记符 A 中指定 target 属性，取值为 具体的框架名称
2010-10-7 表格与框架布局 18
4. 框架布局
<iframe>
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" border="x" frameborder="x"></iframe>
2010-10-7
表格与框架布局
7
内容提要
1 2 3 4
Dream weaver 简介 网页布局
表格布局 框架布局
2. 网页布局
一致性
统一设计\统一标识 统一风格 统一设计 统一标识\统一风格 统一标识 布局一致
色彩的搭配 常用布局
网站LOGO 网站 网站导航区 网 站 导 航 区
9
网站LOGO 网站
行标记 <tr></tr> 列标记<td></td> 列标记 单元格的拆分与合并 单元格里插入表格（嵌套表格） 单元格里插入表格（嵌套表格） <table border>，边框的宽度 ， <table cellspacing>，单元格之间的空白 ，
<table cellpadding>，表格分隔线和数据之间的距离 ，
<frame frameborder=“”> 是否显示框架边框 属性取值为 1 或 0 <frame scrolling=“”> 是否在框架内加入滚动条 可以取为yes、no、auto 可以取为 、 、 <frame noresize> 设置边框的不可移动属性 <frame marginwidth=“” marginheight=“”> 设置框架内容与框架边框之间的空白
页面主要内容区域
页面主要内容区域
网站版权信息
2010-10-7 表格与框架布局
内容提要
1 2 3 4
Dream weaver 简介 网页布局 表格布局
框架布局
3. 表格布局
网站LOGO 网站 网站导航区 主要内容区
网站版权区
2010-10-7 表格与框架布局 11
3. 表格布局
表格标记 <table></table>
src可以是 可以是HTM,GIF,JPG,PNG,TXT,*.*等文件名 可以是 等文件名
<html> <body> <h1>iframe Test</h1> <iframe name="tt" src="frame1.htm" width="250" height ="200" scrolling="no" frameborder="0"></iframe> </body> </html>
2010-10-7
表格与框架布局
12
3. 表格布局
表格标记 <table></table>
表格与页面的对齐 <table align>
center, right, left
单元格里插入文字、 单元格里插入文字、图片
单元格背景 单元格内容水平对齐 <tr>、<td>内使用 内使用align属性，center, right, left 属性， 、 内使用 属性 单元格内容的垂直对齐
表格与框架布局
余发江 qshxyu@126.com 武汉大学 计算机学院
内容提要
1 2 3 4
Dream weaver 简介
网页布局 表格布局 框架布局
1. Dream weaver 简介
网页设计工具 (Macromedia
Dream weaver Fireworks, Photoshop Flash
<tr>、<td>内使用 、 内使用valign属性，top, middle, bottom 属性， 内使用 属性
2010-10-7
表格与框架布局
13
内容提要
1 2 3 4
Dream weaver 简介 网页布局 表格布局 框架布局
4. 框架布局
2010-10-7
表格与框架布局
15
4. 框架布局
2010-10-7
表格与框架布局
4
1. Dream weaver 简介
设计器
2010-10-7
表格与框架布局
5
1. Dream weaver 简介
基本操作
插入文本
Text Properties Insert Space
插入图片
GIF (Graphics Interchange Format) JPEG (Joint Picture Experts Group)
插入多媒体
Insert Audio Insert Video Insert Flash (Flash Video)
2010-10-7 表格与框架布局 6
1. Dream weaver 简介
基本操作
绘制表格
Insert Table 合并、 合并、拆分单元格 单元格 嵌套表格
Set Link
General Link, Email Link 锚点、 锚点、热点
2010-10-7
表格与框架布局
17
4. 框架布局
Link in Frame
使用<frame name=“”>指定框架名称 (<frame 使用 指定框架名称 id=“”>) 特殊的框架名称 _self、_blank、_parent 、 、 _top，在当前的整个窗口中打开所链接的文档，删 ，在当前的整个窗口中打开所链接的文档，
பைடு நூலகம்
Adobe)
Dream Weaver
所见即所得 代码器、 代码器、设计器
2010-10-7
表格与框架布局
3
1. Dream weaver 简介
代码器
编辑－首选参数－字体 编辑－首选参数－ Assistant，自动补齐标记，选择属性 ，自动补齐标记， 参考窗口 折叠、 折叠、扩展标签 验证标记、 验证标记、浏览器支持检查 高亮显示无效代码、 高亮显示无效代码、行号 增加注释、 增加注释、删除注释
在同一个浏览器窗口中同时显示多个网页
框架集<frameset>…</frameset> 框架集
定义整个框架结构 rows 定义行结构框架 cols 定义列结构框架
框架<frame> 框架
具体定义每个页面 使用src属性指定框架中的页面 使用 属性指定框架中的页面
2010-10-7
表格与框架布局
16
4. 框架布局
网景浏览器不支持
2010-10-7 表格与框架布局 19
Thank You！ ！ Any Questions?
2010-10-7
表格与框架布局
20
除所有框架
属性， 在超链接标记符 A 中指定 target 属性，取值为 具体的框架名称
2010-10-7 表格与框架布局 18
4. 框架布局
<iframe>
<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" border="x" frameborder="x"></iframe>
2010-10-7
表格与框架布局
7
内容提要
1 2 3 4
Dream weaver 简介 网页布局
表格布局 框架布局
2. 网页布局
一致性
统一设计\统一标识 统一风格 统一设计 统一标识\统一风格 统一标识 布局一致
色彩的搭配 常用布局
网站LOGO 网站 网站导航区 网 站 导 航 区
9
网站LOGO 网站
行标记 <tr></tr> 列标记<td></td> 列标记 单元格的拆分与合并 单元格里插入表格（嵌套表格） 单元格里插入表格（嵌套表格） <table border>，边框的宽度 ， <table cellspacing>，单元格之间的空白 ，
<table cellpadding>，表格分隔线和数据之间的距离 ，