表格布局网页
第4章 构建网页布局 • 使用表格 • 使用布局表格 4.1 使用表格 所谓表格就是由一个或多个单元格构成的集合。实训六 利用表格进行网页布局。本节由认识表格在网页布局上的作用、插入表格、调整表格结构、设置表格属性、单元格的修饰几个部分组成。其中用表格布局网页是网页规划的一个重要内容。用表格布局网页。
表格布局网页Tag内容描述:<p>1、第4章 构建网页布局 使用表格 使用布局表格 4.1 使用表格 所谓表格就是由一个或多个单元格构成的集合, 表格中横向的多个单元格称为行,垂直的多个单 元格称为列。行与列的交叉区域称为单元格,网 页中的元素通常都被放置在这些单元格中,以使 其“各安其位”。 此处表示未 明确设置单 元格的宽度 此处显示了表格的宽 度。如果只显示一个 “”符号,表示未 明确设置表格宽度 4.1.1 创建表格 在Dreamweaver中创建表格的方法非常简单。 确定插入点后,单击“常用”插入栏中的“表 格”按钮,打开“表格”对话框,设置各项参 数后,单击“确。</p><p>2、网页设计与布局 创建简单网站,全国获奖作品“石头在歌唱”,选择理由:是一个在内容、结构、艺术效果几方面都非常好的网站。,学生作品 “梁子缘绿色小屋”,选择理由:网站结构清晰,都是特定的主题下划分成了几个方面去表达(每个方面制作为超链接).,制作网站的首要任务是什么?,制作网站要先明确主题,然后恰当的分成几个方面。,制作以“安全与我同行”为主题的网站你能想到几个方面?,交通安全,抗震安全,消防安全,制作网站要先明确主题,然后恰当的分成几个方面。,安全与我同行,一个网站是否只有一个网页?多个网页怎么管理?,一个网站有。</p><p>3、实验二 表格及页面布局,高彦卿,实验目的,超链接的基本定义及基各种超链接的创建和编辑操作 利用表格进行文本的整齐排列和自由的图文混排 在整个表格内使用背景图像和色彩。,实验内容,利用上次实验的内容制作超级链接,包括文本、图像、热区以及锚点链接。 制作两个利用表格定位的网页 设置超链接将站点中的网页链接起来。,实验步骤,(1)建立一个本地站点 (2)在站点中建立一个网页文件index.htm并打开进行编辑。 (3)最外层的表格宽度为700像素,嵌套的表格宽度为100%,整体上分为上下两个表格。 (4)上表格为2行1列的表格如图一所示。,图2-1 。</p><p>4、实训六 利用表格进行网页布局课时:3 班级:12计算机班 实训日期:2013-4-2 编写时期:2013-3-29一、实训目的1、了解网页设计常用的几种版式;2、掌握绘制及编辑布局表格和布局单元格;3、掌握利用布局表格的嵌套来设计较复杂的版面;4、掌握在布局表格中添加具体内容 ;5、掌握设置布局表格和单元格属性 。二、实训内容利用布局表格制作网页三、知识点分解由上图可知,该网页的结构属于拐角型,先画出该网页的版式结构。LOGOBANNER导航菜单导航网页内容网页内容版权信息我们可以知道在进行该网页布局时,先要布最外面的表格,然后布最上。</p><p>5、一、说教材1、教材分析本课内容是信息技术八年级下册第三章第二节的内容,本节由认识表格在网页布局上的作用、插入表格、调整表格结构、设置表格属性、单元格的修饰几个部分组成,其中用表格布局网页是网页规划的一个重要内容。因此,本节分成三课时,本节课是这一节的第一课时。2、学情分析学生在初一时已经学习过有关word的基本知识,对使用dreamweaver软件制作网页的一些简单操作也不陌生。但由于学生缺乏网页的系统制作方法,往往在制作网页过程中,对网页的版面布局缺乏总体认识;因此,本节课是通过学习使用“表格布局”的方法,使。</p><p>6、Dreamweaver CS5网页设计与制作基础教程,第7章 使用表格布局页面,7.1 创建表格,7.1.1 表格的基本概念 7.1.2 插入表格 7.1.3 在表格中输入内容,7.1.1 表格的基本概念,表格就是由一些粗细不同的横线和竖线构成的,横的叫做行,竖的叫做列,由行和列相交的一个个方格称为单元格。单元格是表格的基本单位,每一个单元格都是一个独立的正文输入区域,可以输入文字和图形,并单独进行排版和编辑。,7.1.2 插入表格,在菜单栏中,选择【插入】【表格】菜单项,弹出【表格】对话框,在该对话框中,可以设置表格的行数、列数、表格宽度、单元格间距、。</p><p>7、第二节 网页布局一、教学目标知识与技能1了解常见的网页版式2会用表格进行网页的规划和布局过程与方法通过欣赏、解剖典型的网页版式,引出表格是布局网页的主要手段。通过利用表格布局设计制作网页,掌握用表格布局网页的方法。情感态度与价值观学会欣赏网页二、重点和难点重点是网页版式的设计和表格的建立。难点是设计出好的网页布局。三、教学过程环节教师活动学生活动备注导入新课同学们咱们在上一节课上尝试了用FrontPage2000自带的模板进行网页制作,但是很多同学也提出了疑问,即模板提供的板式不能完全满足我们的实际需要。那么我。</p><p>8、第4章 使用表格布局网页,表格基本操作 表格高级操作,4.1 表格基本操作,表格(Table)是由一个或多个单元格构成的集合,表格中横向的多个单元格称为行(在HTML语言中以标签开始,标签结束),垂直的多个单元格称为列(以标签开始,标签结束),行与列的交叉区域称为单元格,网页中的元素就放置在这些单元格中 。,行,列,单元格,此处表示未明确设置单元格宽度,此处显示了表格的宽度。如果只显示一个“”符号,表示未明确设置表格宽度,4.1.1 创建表格,Dreamweaver CS4拥有非常完善的表格编辑功能,本节我们首先来看一下如何在网页文档中创建表。</p><p>9、用表格布局网页,表格的创建与内容添加 表格的基本操作 表格和单元格的属性设置 表格的高级操作,表格的创建与内容添加,表格的插入 将光标插入点定位到需要插入表格的位置。 在“常用”插入栏中单击表格按钮(快捷键为),打开“表格”对话框。 在该对话框中的“行数”文本框中输入创建表格的行数 在该对话框中的“列数”文本框中输入创建表格的列数 在“表格宽度”文本框中输入创建表格的宽度(像素和百分比) 表格边框粗细设置 单元格边距设置:单元格边框与单元格中内容的距离 单元格间距设置:相邻单元格间的距离,表格的创建与内容添加,。</p><p>10、用表格为网页布局,1、什么是布局? 2、用表格给网页布局有什么作用?,排版,定位对象,1、插入表格 表格插入表格 在制作MAIL QQ邮箱网页时 要插入几行几列? 2调整表格 (1).合并单元格:选中要合并的两个或两个以上单元格右击合并单元格 (2).拆分单元格:选中要拆分的单元格右击拆分单元格 (3).手动调整表格:用“手绘表格”画出需要的单元格,表格的调整,练一练,1、用表格给 “MAIL QQ邮箱” 布局 2、有余力的同学可以充实内容,知识巩固,1、表格的插入,2、单元格的合并和拆分,3、手动绘制需要的单元格。</p><p>11、用表格布局网页,表格的创建与内容添加 表格的基本操作 表格和单元格的属性设置 表格的高级操作,表格的创建与内容添加,表格的插入 将光标插入点定位到需要插入表格的位置。 在“常用”插入栏中单击表格按钮(快捷键为),打开“表格”对话框。 在该对话框中的“行数”文本框中输入创建表格的行数 在该对话框中的“列数”文本框中输入创建表格的列数 在“表格宽度”文本框中输入创建表格的宽度(像素和百分比) 表格边框粗细设置 单元格边距设置:单元格边框与单元格中内容的距离 单元格间距设置:相邻单元格间的距离,表格的创建与内容添加,。</p><p>12、1,第3章 使用表格布局网页,将文本与图像插入页面后,就形成了最简单的网页。在生成的网页中,发现其中的文本或者图像会随着IE窗口的放大或者缩小发生变化,这使得网页处于不稳定状态。要想改变这种情况,最简单的方法就是使用表格。表格不仅能够控制网页在IE窗口中的位置,还可以控制网页元素在网页中的显示位置,这样无论IE窗口如何变化,其中的网页都会保持默认的状态。,2,本章知识要点:,创建表格 创建嵌套表格 创建布局表格 创建Spry框架,3,3.1 表格建立,日常生活中,最常见的表格是用来显示数据的,比如Excel中的表格。在Dreamweaver。</p><p>13、实验二 表格布局网页 超链接和CSS应用 一 实验目的 1 掌握使用嵌套表格布局网页的方法 2 掌握插入FLASH 音频等多媒体元素的方法 3 熟练使用CSS 4 熟练使用超链接 二 实验内容 1 站点导入 要求 将站点shiyan2导入到dr。</p><p>14、表格布局网页教学设计南京市天印高级中学 柯晶【教材目标】知识与技能:掌握创建表格的方法,并学会编辑表格的基本方法,熟练运用表格规划布局网页的能力。过程与方法:通过分组练习、认知类比、知识迁移等手段,在原有操作技能的基础上,掌握Frontpage中有关合理运用表格的思想与方法。情感态度与价值观:创设完成表格操作的任务环境,鼓励学生大胆实践,大胆操作,培养学生对信息技术的兴趣。</p>