利用表格定位网页元素
- 格式:doc
- 大小:5.84 KB
- 文档页数:3
一.单项选择题1.在网站的制作过程中,如果一些页面的布局都是相似,可采用(D )机制进行这些网页的设计。
(A)框架(B)层(C)CSS(D)模板2.在DreamWeaver网页设计中,关于目录结构说法错误的是(D )(A)不要将所有文件都存放在站点根目录下(B)不要使用中文文件夹名称(C)文件夹的层次最好不超过三层(D)整个网站只需要建立一个images文件夹3.网页制作技术不可以实现由一个文件控制一大批网页(D )。
(A)CSS文件(B)库(C)模板(D)层4.以下标记符中,用于设置页面标题的是(A )。
(A)〈title〉(B)〈caption〉(C)〈head〉(D)〈html〉5.在HTML文档中要插入一个项目列表,使用的一对标签是(A )。
(A)〈UL〉〈/UL〉(B)〈OL〉〈/OL〉(C)〈LI〉〈/LI〉(D)〈P〉〈/P〉6.以下HTML标记中,哪一个是单标记?( A)(A)br标记(B)P标记(C)HTML标记(D)BODY标记7.以下HTML标记中,(A )是单标记。
(A)br标记(B)p标记(C)html标记(D)body标记8.下述关于CSS的说法错误的是(B )。
(A)CSS可以设置图文混排的效果(B)CSS可以设置文字的行为(C)CSS可以设置图片的边框(D)CSS可以设置背景图像仅在纵向重复9.CSS样式选择器的类型有(C )。
(A)标签、类、文本(B)类、标签、图像(C)类、标签、高级(D)Flash、类、ID10.CSS的全称是什么(C )。
(A)Cascading Sheet Style(B)Cascading System Sheet(C)Cascading Style Sheet(D)Cascading Style System11.如果一个元素外层套用了HTML样式,内层套用了CSS样式,在起作用的是( D)。
(A)两种样式的混合效果(B)冲突,不能同时套用(C)HTML样式(D)CSS样式12.以下关于“鼠标经过图像”的各种说法,正确的是( C)。
A spaceB shift + spaceC ctrl + spaceD ctrl + shift + space(4)下面按钮用来查看网页代码的是【】(5)Flash动画的扩展名为【】A *.flvB *.swfC *.swtD *.fla(6)以下操作能实现连续输入空格的是【】A 选择“编辑”——“首选参数”在常规选项卡中选择“允许多个连续的空格”复选框B 选择“插入”——“HMTL”——“特殊字符”——“不换行空格”命令C 按住快捷键ctrl + shift + spaceD 连续按多个空格键(7)调出CSS样表面板使用的快捷键是【】A shift + f11B shift + f5C shift + f4D shift + f1(8)将水平线的宽度值设为【】时,可以随着浏览器的窗口大小而随之变化。
A 50像素B 100像素C 50百分比D 100百分比(9)GIF文件是在网络下最常见的图像格式,以下选项不属于它的特点是【】A 使用无损压缩方案,图像在压缩后不会有细节的损失B 是交织文件格式,在浏览器完成下载图像之前,浏览者即可看到该图像C 不支持透明背景,不可以创建带有透明区域的图像D 图像格式的通用性好,几乎所有浏览器都支持此图像格式,并且有许多免费软件支持GIF图像文件的编辑(10)JPEG文件是用于为图像提供一种“有损耗”压缩的图像格式,以下选项不属于它的特点是【】A 具有丰富的色彩,最多可以显示1670万种颜色B 使用有损压缩方案,图像在压缩后会有细节的损失C JPEG格式的图像比GIF格式的图像大,下载速度更慢D 图像边缘的细节损失严重,所以不适合包含鲜明对比的图像或文本的图像。
(11)PNG文件是专门为网络而准备的图像格式,以下选项不属于它的特点是【】A 使用新型的无损压缩方案,图像在压缩后不会有细节的损失B 具有丰富的色彩C 最多可显示1670万种颜色D 图像的通用性好,IE4.0或更高版本和Netscape4.04或更高版本的浏览器都支持PNG图像的显示。
如何使用Dreamweaver设计网页布局一、简介Dreamweaver是一款专业网页制作软件,在设计网页布局时非常实用。
本文将介绍如何使用Dreamweaver来设计网页布局。
二、Dreamweaver的基本布局工具1.标签工具在Dreamweaver中,标签工具是设计网页布局的基础工具之一。
通过标签工具,用户可以方便地插入并编辑HTML标签,快速构建网页结构。
2.定位工具Dreamweaver中的定位工具是一个强大的布局工具,能够帮助用户精确地定位元素在页面中的位置。
通过定位工具,用户可以指定元素的位置、大小、层叠顺序等属性,实现灵活的网页布局。
3.表格工具表格工具是Dreamweaver中常用的布局工具之一。
用户可以使用表格工具创建和编辑表格,将网页内容划分成不同的区域,并控制各个区域的位置和大小。
三、基本网页布局设计1.网页头部布局网页头部通常包含网页标题、导航栏等元素。
在Dreamweaver 中,用户可以使用定位工具将这些元素排布在页面的顶部位置,使其在整个网页中呈现统一的布局效果。
2.网页主体布局网页主体通常包括文章内容、图片、链接等元素。
用户可以使用定位工具将这些元素适当地排布在页面中间位置,使其在视觉上协调和谐。
3.网页底部布局网页底部通常包含版权信息、联系方式等元素。
用户可以使用定位工具将这些元素排布在页面的底部位置,使其呈现出整洁的布局效果。
四、响应式网页布局设计1.使用媒体查询Dreamweaver提供了响应式设计功能,可以根据不同设备的屏幕尺寸和分辨率,自动调整网页布局。
用户可以使用媒体查询功能,在样式表中指定不同的样式规则,根据不同的屏幕尺寸和分辨率来呈现不同的布局效果。
2.使用弹性布局Dreamweaver的弹性布局功能可以根据容器的大小,自动调整子元素的布局位置。
用户可以在Dreamweaver中使用弹性布局工具,将网页的不同区域划分为弹性容器和弹性项目,实现自适应的响应式网页布局。
《Dreamweaver CS5网页制作》期中考试试题(二)一、填空题(每空2分,共计12 分)1、在色彩圆环上选择彼此相邻的几种颜色构成的配色方案叫.2、网页一般又称作,是一种可以在因特网上传输,能被浏览器识别和翻译成页面并显示出来的文件。
3、色彩总的应用原则应该是。
4、网页的扩展名一般是或.5、系统默认的工作区是。
二、判断题(每题2分,共计20 分)1、通过单击面板组左边中间的三角形按钮,可以隐藏和显示面板组()2、在Dreamweaver中建完的站点不可以修改名字。
()3、在Dreamweaver中必须在桌面上建立站点()4、、在Dreamweaver中可以导入声音、FLASH动画,GIF动画。
( )5、网页中不能导入word文档( )6、文档的标题将与文件名一起出现在文档标题栏中。
( )7、站点名称必须为英文()18、可以通过导入将flash插入网页中( )9、在网页文件上右键新建文件可以建立新的网页()10、Internet提供的服务主要包括万维网、电子邮件、文件传输、远程登录。
()三、单项选择题(每题1分,共计15 分)1、在Dreamweaver中,下列说法不正确性的是()A、设置背景图片之前,最好先将所用的图片保存到网站目录里B、如果要发布网站,则它所用的图片必须保存到网站目录里C、设置背景图片之前,不必先将所用的图片保存到网站目录里D、设置网页的字体颜色,可以有多种方法2、在Dreamweaver插入的表格修改填充颜色,使用属性中的()A、背景颜色B、宽C、高D、水平3、在Dreamweaver中,有关图片的说法正确的是( )A、图片的大小不可以调整B、只可以改变图片在网页中的位置C、单击图片,其周围会出现拖动手柄D、图片的格式必须为:jpg4、在Dreamweaver中,作超级链接的文字,其颜色是()A、点击前是蓝色,之后是红色B、一直是绿色C、点击前是红色,之后是蓝色D、要看在页面属性中的设置5、在Dreamweaver中,作为站内超级链接用的页面()A、只要保存到本地磁盘即可B、保存到本地站点的目录下C、必须保存到images目录下D、不必考虑保存的路径6、在Dreamweaver中,要添加超级链接必须()A、先选择链接的目标页面B、先选定要作链接的文字或图片C、连接到本地的网页上D、保证所连接的不是连接所在页面7、在Dreamweaver中,下面关于首页制作的说法错误的是:()A、首页的文件名称可以是index。
浅谈网页布局中的表格与框架作者:徐景秀来源:《科技资讯》 2014年第18期徐景秀(鄂东职业技术学院湖北黄冈 438000)摘要:本文简要介绍了页面布局的一般设计原则、设计方法,并主要论述了表格及框架定位页面元素,进行网页布局的方法。
关键词:Dreamweaver 表格框架布局中图分类号:TP393 文献标识码:A 文章编号:1672-3791(2014)06(c)-0223-011 页面布局的一般设计原则和方法用户在浏览网页的时候问题容易被那些美观大方的网页所吸引。
页面的布局是网页制作成败的一个很重要的因素,因此用户在制作网页时要重视。
而页面布局的一般设计原则和方法如下。
(1)布局简洁大方清晰:这是Web网页设计的最重要的原则。
一般一个页面应有一个主体,可以是文字块或图像。
浏览者总是先看网页中大的和色彩鲜明的部分,然后才是通常的从左到右和从上到下的模式,不能给人的感觉是杂乱无章,眼花缭乱的感觉。
另外尽可能使任何信息都能在3次内点击找到。
每个页面显示一层信息,只显示用户当前选择的内容,其它内容可用链接提示。
(2)布局类型选择:布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。
(3)布局平衡:所谓布局平衡是指以页面为中心,页面的上下左右在分量上应给人以匀称的感觉,不会让人感到页面的某些地方特别拥挤,而有些地方又特别空旷。
为了让页面达到左右平衡,应尽可能利用文本和图像的HTML对齐方式标识。
页面的上部应多留些空间,不要太拥挤,使用给每个页面加上页眉和页脚的方法来达到上下的平衡。
(4)布局风格一致:依据网页设计界面设计的风格原则,同一网页应用的每个页面应该拥有大体一致的页面布局,这样可以有效地使用户感受到页面谐调一致。
(5)布局文本、图片和多媒体方式:文本和图片是构成网页的两大元素,目前的技术可以让文本和图片摆放在页面的任何位置。
声音、动画、视频等可使更加页面丰富。
《网页中的表格》教学设计一、教学设计部分本课的主要内容与地位网页中,常用表格来对网页中其它元素定位,将复杂的元素有条理的分布到网页各个位置──网页布局。
另外,当我们把表格的宽度定为固定像素值后,还能保证网页布局不会随浏览器窗口的大小变化而变化,当我们在网页中输入文字的时候,就可以让文字顶满格后自动换行,方便我们对文字的编辑。
由此可见,网页中只有利用表格进行布局,才能称得上真正意义上的网页设计。
本课与前后内容的关系利用表格布局网页,将上一节设计的网站首页中的各种素材进行合理的分布,是对学生进行网页设计技能上的提升;利用表格布局网页也是整个网站设计中一个非常重要技术手段,应用非常广泛。
知识目标/技能目标知识目标理解表格在网页设计中的重要作用。
技能目标⑴掌握使用表格布局网页。
⑵灵活掌握表格调整的方法。
过程与方法目标能够合理利用表格对网页进行布局和规划。
情感态度与价值观目标了解学校概貌,发现校园之美,理解规矩与方圆的关系,养成良好的生活和学习习惯。
本课的重难点重点和难点:掌握利用表格对网页进行布局的方法本课的课时分配建议一课时教法建议由于关于表格的基本操作(插入表格、调整表格:调整行高或列宽、合并或拆分单元格、插入或删除行或列、平均分布行或列)在Word中已经有较详细的操作方法。
在本课教学过程中,教师教学的重点应放在由学生探究以上基本操作的基础上的表格的使用──如何利用表格布局网页,让网页中的素材合理的在网页上分布。
另外,网页模板是提高建站效率的有效手段,教师要注意引导学生对网页模板的使用。
学法建议注意观察和借鉴样板网站中表格的运用情况,刚开始使用表格设计网页时可将其边框粗细的值设为1,以观察调整表格的过程,从而掌握表格调整的技巧。
本课教学资源索引1.第二课的半成品网页:Index.htm、Parents.htm自评、互评、师评要注意的问题学生制作的网页是否通过表格的布局达到美化、整齐和排列有序的目的。
dream表格的用途在网页设计和制作中,表格是一种非常常用的布局工具。
Dreamweaver中的表格主要用于对网页元素进行排版和定位,让页面布局更加规整和易于管理。
以下是Dreamweaver表格的主要用途:1. 创建页面布局:通过创建表格,可以将页面分成不同的区域,每个区域可以放置不同的内容,如导航菜单、页眉、页脚等。
这样可以让页面结构更加清晰,也有利于后期维护和修改。
2. 对齐和定位元素:在Dreamweaver中,可以使用表格的单元格对页面中的元素进行定位和调整。
通过调整单元格的大小和位置,可以精确控制元素在页面上的位置,使其对齐到相应的位置。
3. 制作复杂布局:有些网页布局比较复杂,使用简单的HTML 标记很难实现。
这时可以使用Dreamweaver的表格来创建复杂的布局,例如多列的固定宽度、弹性宽度等。
通过灵活地调整表格的大小、合并或拆分单元格,可以实现各种复杂的布局效果。
4. 管理对齐和间距:在使用表格布局时,可以很容易地调整元素的对齐方式和间距。
通过设置表格的对齐方式、单元格间距和边距等属性,可以控制元素之间的空间关系,使其看起来更加整洁美观。
5. 控制样式和外观:除了基本的布局和对齐功能外,还可以使用CSS样式来美化表格。
通过为表格或单元格添加样式,可以改变它们的背景颜色、边框样式、字体等外观属性,使页面更加美观。
总之,Dreamweaver中的表格是一种强大的布局工具,可以帮助网页设计师创建精确、整洁的页面布局。
但需要注意的是,过度使用表格可能会使代码变得复杂和难以维护。
因此,在实际开发中,应该根据具体情况选择合适的布局方法,并尽量使用CSS进行布局和样式设置。
西振宇
阜新市阜蒙县王府蒙古族学校,辽宁阜新 123139
一、教材分析
《利用表格定位网页元素》是辽宁师范大学出版社出版的九年义务教育小学《信息技术》六年级第8课。
在学习本课前,学生已经学习了建立网站,在网站中建立网页以及在网页中直接输入文字和插入图片,学会了插入水平线使网页更规整,并且作了保存。
本课是在上一课的基础上,学会利用利用表格定位网页中的文字、图片,即学会在网页中插入表格,在表格中的单元格中插入图片和文字,会初步修改表格属性,为下一课学习设置表格的背景打下良好的基础。
根据以上分析,确定以下本课教学目标和重难点。
二、教学目标
1.知识技能目标:①在网页中插入表格;②在单元格中插入文字和图片。
2.情感目标:①体验网页画面的规整性,培养学习制作网页的兴趣;②培养学生爱护动物的情感。
三、教学重难点
重点:①在网页中插入表格;②在单元格中插入文字和图片。
难点:设置表格属性、修改图片属性。
四、教学方法
演示法、观察法、合作探究
五、教学环境
网络机房、电子教室
六、教学策略
设置教学情境,提高学生学习的兴趣,以“可爱的小动物”网页半成品为操作对象,在教学中以师生共同发现问题、解决问题为主线,让学生在师生合作、生生合作的过程中,轻松愉快的完成网页的设计,达成学习目标。
七、教学过程
(一)看一看(创设情境,引入新课)
教师活动:
今天老师非常高兴,因为我从网上找到了一些漂亮的动物图片,把它们保存在了网页上,现在想把它们打开来,跟大家一起欣赏,好吗?(教师依次打开教学网站上的“可爱的小动物”、和“野生动物”网页,广播全体。
)
师:这两个网页哪个看起来来更规整呢?(注:第一个网页图片添加在表格里,第二个网页图片直接添加在网页里,次序混乱)
生:第一个
师:为什么?
生:第一个网页的图片都在表格里
师:同学们观察得很仔细,利用表格地位网页元素,可以使网页看起来更规整。
好,这节课我们就来学第8课《利用表格定位网页元素》(板书课题)请看学习目标(视频全体)
板书:
“在网页中插入表格在单元格中插入文字和图片”
老师己经事先把一些图片存到了每位同学的网站上,下面,就请你们打开自己网站的图片文件夹去浏览,好不好?(请同学们从中选出自己最喜欢的4张。
)
(教师巡视,个别辅导)
学生活动:
(学生欣赏)(学生按老师的提示,打开自己的网站,找到图片文件夹,打开图片欣赏)师:你喜欢那几张图片,为什么?
生:回答。
设计意图:激趣导入,融知识技能于主动的欣赏活动中,通过观察比较,初步体会了在网页中插人表格的作用,同时为下一步学生在表格中插入网页准备素材。
(二)学知识(演示操作)
教师活动:在网页中插入表格
选好图片的同学请举手?好,下面我们就一起为这些小动物建个“家”,即在网页中插人表格(视频演示)
学生活动:[表格]—[插入]—[表格]—在[插入表格]中设置2行4列)
教师活动:在插入表格的单元格中插入图片和文字,并设置文字居中。
动物的新家建好了,下一把该做什么?把小动物们请进家里(视频演示)
([插入]……)[图片]—,[来自文件]—)在[图片]对话框中选择图片—)单击[确定]。
在第二列单元格输入动物名称)
学生活动:在单元格中插入自己选好的图片并输入文字。
(图片大小不相同,怎么办?合作探究或利用小助手帮助解决)设计意图:采用教师演示和视频教学,可以为学生解决问题扫清障碍,节省宝贵的人机时间,为下一步学习作准备。
(三)练技能(合作探究)
教师活动:其实,在网页中插入表格后,还可以设置表格的边框颜色和效果,把动物的家建得漂亮些。
出示要求:
1.在网页中创建一个有边框颜色,且亮边框和暗边框效果的3行3列的表格。
2.在网页中创建一个边框粗细为零的的表格,插入图片和文字,预览效果。
学生活动:1.打开lianxil.hLm,按要求完成操作。
2.打开lianxi2.htm,按要求完成操作。
设计意图:采用小组合作学习,放手让学生自己操作,通过预览体会表格属性设置的必要性。
(四)动脑筋(知识内化)
教师活动:出示幻灯片(选择题)
1.在网页中,表格变宽的粗细可以设置为o吗?(A.可以B.不可以)
2.在表格中插入文字和图片和在网页中插入文字和图片比较。
(A.更规整B.没有什么区别)
学生活动:作答评价
设计意图:强化理解本课的学习目标。
(五)学习成果展示(体验成功)
教师活动:
好,下面谁愿意把自己的网页拿出来给别人欣赏一下。
请大家来评一评,他做得怎么样?(教师指名评论,并要求说说为什么?)
在网页中插人表格和在表格中插入图片文字简单吗?虽然方法很简单,但是我们还是需要用脑子好好想一想:怎样修改图片和设置表格边框才能让我们的网页更加漂亮,美观。
设计意图:作品的展示评价是一个重要环节,能让学生在评价、比较中技能得到提高,审美意识得到培养。
(六)小博士(扩展延伸)
教师活动:演示博士E-mail(要想很好地定位内容,就需要对单元格进行拆分、合并或行列的插人和删除,还可以利用表格和单元格属性对话框实现进一步的设置)。
学生活动:观察
设计意图:通过扩展延伸,激发学生对网页制作的兴趣,为以后的学习奠定基础。
(七)课堂总结(整合提高)
教师活动:
这节课快要结束了,最后我想问大家:今天你有什么收获吗?
学生活动:学生发言。
设计意图:通过学生发言,来对整节课的教学内容作个总结
八、教学反思
1.本课设计,注重教师的导和学生的合作学习,对小学生而言,制作网页只是局限于网页设计模式下,强调从学生已有的基础和兴趣出发,力求体现以学生发展为本的理念,重视学生的自主探究、合作交流、动手操作能力、创作精神、想象能力和实践能力的培养,真诚地把主动权交给学生。
“课的导入”:创设情境是激发学生学习热情,“兴趣是最好的老师”。
“网页对比”这部分,让学生充分发表学自己的见解,电脑展示两个网页:一个是文字和图片用表格进行了定位,另一个是文字和图片随意的在网页上出现,让学生能够很直接的通过观察比较得出本课的学习内容,为新课程的学习做好了铺垫。
“学知识”这部分教师主要指导学生学会“菜单”和“工具”的使用,在制作的过程中教师进行个别指导,倡导合作学习。
因为本节课是新课,同时针对学生现有的基础,教师的指导多了些。
“动脑筋”出示了两道选择题,是本课的两个重要知识点,通过练习学生对本课的重点加深了理解、“成果展示”这部分。
学生演示自己制作的网页,生生互评,师生互评,既注重了学习过程的评价,更注重了学习成果的评价。
“课的延伸”这部分,目的是使学生对网页制作的学习有更进一步的了解,为今后制作出更规整更漂亮的网页做准备。
2.本课做得较好的,学生能积极主动是投入小组合作中讨论出很多意想不到的结论,能在规定的时间内制作出网页,操作比较熟练。
课的延伸激发学生对制作网页知识的欲望。
3.不足的是:在制作过程中,教师指导与演示多,学生自主选择的机会少。
关键的一点是我本人的评价是亟需努力学习。