网页设计布局有哪几种方法

网页设计与制作试卷试题(附答案)

“双语”教育2012-2013第2学期《网页设计与制作》年级专业：学号姓名：一、单选题（共45小题，每小题1分，共45分）1、在网站设计中所有的站点结构都可以归结为【 B 】A、两级结构B、三级结构C、四级结构D、多级结构2、在客户端网页脚本语言中最为通用的是【 A 】A、javascriptB、VBC、PerlD、ASP3、所学网布局的方法是【 E 】A、表格B、布局C、层D、DIVE、都是4、在HTML中，标记<font>的Size属性最大取值可以是【 C 】A、5B、6C、7D、85、所学网页页面构成有【 E 】A、顶部（标题）B、底部（注释）C、正文D、导航E、都有6、用户登陆页面不可能用到的是【 B 】A、服务器行为检查新用户B、绑定字段C、用户身份验证D、建立数据库7、成绩录入系统不能用到的【 C 】A、建立数据库B、绑定插入记录集C、检查表单D、重复区域8、非彩色所具有的属性为【 C 】A、色相B、饱和度C、明度D、纯度9、下面说法错误的是【 D 】A、规划目录结构时，应该在每个主目录下都建立独立的images目录B、在制作站点时应突出主题色C、人们通常所说的颜色，其实指的就是色相D、为了使站点目录明确，应该采用中文目录10、目前在Internet上应用最为广泛的服务是【B 】A、FTP服务B、WWW服务C、Telnet服务D、Gopher服务11、Web安全色所能够显示的颜色种类为【C 】A、4种B、16种C、216种D、256种12、为了标识一个HTML文件应该使用的HTML标记是【C 】A、<p> </p>B、<boby> </body>C、<html> </html>D、<table> </table>13、框架结构页面正确的说法是【 D 】A、点击左边导航显示右边B、只能链接图片C、框架页面为新建常规页面D、插入可编辑区域可以生成模板14、显示页面设计时不能用到的是【 D 】A、建立数据库B、设置数据源C、连接数据库D、更新记录集15、对远程服务器上的文件进行维护时，通常采用的手段是【B 】A、POP3B、FTPC、SMTPD、Gopher16、下列Web服务器上的目录权限级别中，最安全的权限级别是【A 】A、读取B、执行C、脚本D、写入17、Internet上使用的最重要的两个协议是【B 】A、TCP和TelnetB、TCP和IPC、TCP和SMTPD、IP和Telnet18、网页的特征是【 A 】A、HTML文档的基本特征——超文本B、标识语言，网页中不能没有标记（Tag）C、网页提供了一些措施以防在网上冲浪的过程中迷失方向D、网页实现了对原文档信息的无限补充或扩展19、与上网无关．．的协议是【 C 】A、HTTPB、SMTPC、SOKETD、POP320、设置字体大小的代码是【D 】A、<tt></tt>B、 <cite></cite>C、<em></em>D、<font size=?></font>21、HTML中表示文字粗体的标记除了使用<strong>外，还可以使用【 B 】A、<a>B、<b>C、<c>D、<d>22、body元素用于背景颜色的属性是【 C 】A、alinkB、vlinkC、bgcolorD、background23、 HTML代码<tr></tr>表示【B 】A、创建一个表格B、开始表格中的每一行C、开始一行中的每一个格子D、设置表格头24、HTML代码<hr>表示【 D 】A、添加一个图像B、排列对齐一个图像C、设置围绕一个图像的边框的大小D、加入一条水平线25、Flash中，与位图相比，矢量图形的优点是【 A 】A、变形、缩放不影响图形显示质量B、丰富多彩C、图像所占空间大D、图像质量好26、在Dreamweaver MX 中, 下面关于排版表格属性的说法错误的是【D 】A、可以设置宽度B、可以设置高度C、可以设置表格的背景颜色：D、可以设置单元格之间的距离但是不能设置单元格内部的内容和单元格边框之间的距离27、在Dreamweaver MX 中, 在设置各分框架属性时, 参数Scroll 是用来设置什么属性的【B 】A、是否进行颜色设置B、是否出现滚动条C、是否设置边框宽度D、是否使用默认边框宽度28、在Dreamweaver MX 中下面可以用来做代码编辑器的是【A 】A、记事本B、 PhotoshopC、flashD、以上都不可以29、在Dreamweaver 中, 我们可以为链接设立目标, 表示在新窗口打开网页的是【A 】A、_blankB、 _parentC、_selfD、_top30、 Dreamweaver的文本菜单中，Style→Underline表示【D】A、从字体列表中添加或删除字体B、将选定文本变为粗体C、将选定文本变为斜体D、在选定文本上加下划线31、在网页制作中，为了统计访问者的信息，了解他们的意见，我们可以用下述办法实现。

绘制网页布局

试验４绘制网页布局网页布局是网页设计中的一项重要的内容。

通过对本试验的学习，用户需熟悉掌握在布局时如中如何创建表格和布局单元格，以及设置他们的相关属性和参数。

说明页面布局是指页面的浏览器中显示的方式，比如导航的位置、图像的位置等等。

Dreamweaver 提供了布局视图功能，利用此功能可以使原来繁琐的页面布局工作变得简单而轻松。

对应知识点绘制布局表格和布局单元格设置布局单元格和表格的属性在布局单元格内添加内容对应《Macromedia Dreamweaver MX 2004 标准教程》第４章的内容。

试验课时：２课时新闻内容电子文档。

在本书配套光盘exp4-5\sucai04中包含该素材。

1．启动Dreamweaver MX 2004程序，选择菜单“文件”“新建”命令，创建HTML 网页。

2．按Ctrl+S键，将文件保存为page04.htm。

3．选择菜单“窗口”“插入”命令，打开插入面板。

选择下拉列表中的“布局”选项，打开布局面板。

如图4-1所示。

4．在布局面板中单击“布局”按钮，打开“从布局模式开始”提示框，显示在布局模式下绘制布局表格和布局单元格的说明。

如图4-2所示。

图4-1 选择下拉列表中的布局选项图4-2 “从布局模式开始”提示框说明在“从布局模式开始”提示框中，如果选中了“不要再显示此消息”复选框，则下次再选择“布局”按钮时将不再显示此提示框。

5．单击“确定”按钮，在空白文档顶部显示“布局模式”状态。

如图4-3所示说明单击“退出”按钮，将返回“标准模式”。

这时“布局表格”和“绘制布局单元格”按钮将变成灰色按钮按钮，这表示两个对象不能在标准视图下使用；而原来灰色的“表格”、“插入Div标签”和“绘制层”等按钮图4-3 文档顶部显示“布局模式”状态则变成了彩色按钮按钮按钮，此时可以使用这三个对象进行页面布局。

６．在布局面板上进行单击“布局表格”按钮。

如图4-4所示。

这时鼠标指针将变成加号“+”。

网页设计技巧

２．色彩的一致性：方式是保持站点主体色彩的一致，只
维普资讯
垫堕坠！
！
ｗｉｄｗ．ｃｔ．ｅｎｏ１ａｉｈｒｆ＝ＵＲＬ：ｏｏｎ
１．相同色系色彩：运用所谓相同色系，是指几种色彩在ｓｌｔｌｄｘ．ｌｅｅｃｄｎｅ］ａ；ｅｅｖｕ
访问者留下深刻印象。比如网站结构在某一点上的变化，由５利用图像取得统一网页中的图像在使用上一定要甚．之又甚，尤其是一些动画。用图像取得统一，为网站结利作
１．正常平衡一一亦称 “ 匀称 ” 。多指左右、上下对照形元素（如标志、象征图形、局部设计等）重复出现，也会给
４白—— 空白有两种作用，．空一方面对其他网站表示突
出卓越，另一方面也表示网页品位的优越感，这种表现方法
（）版布局三排１Ｔ． ”结构布局：页面顶部为横条网站标志＋ “ 广告条，
对体现网页的格调十分有效。
言无法表达的情感，特别有效。
５．尽量用图片解说——此法对不能用语言说服、或用语深，整体效果类似英文字母 “ ” 优点是页面结构清晰；主Ｔ。
保持网站风格的一致，是进行内页设计过程中考虑的是主菜单，面放友情连接等，右中间是主要内容。优点是充
重要方面。
３利用导航取得统一：导航是网站的一项重要组成部．
息较多，种类型的首页在设计过程中一定要明确要以设分，一个出色的富有企业特性的导航将会给人留下深刻的这

《网页设计与制作》教案-第11讲布局技术-层AP Div

第11讲布局技术-层AP Div1.1教学目标：◆知识目标1.理解层的作用2.掌握层的各种基本操作◆技能目标能运用层进行布局，能设置层的重叠与嵌套，能合理操作层◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握层的各种基本操作1.3 教学难点理解层的作用和操作。

1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。

1.7教学过程：一、激趣导入，揭示课题层是一种HTML页面元素，可以将其定位在页面上的任意位置。

层可以包含文本、图像或其他任何可在HTML文档正文中放入的内容。

通过Dreamweaver MX 2004，可以使用层来设置页面的布局。

可以将层前后放置，隐藏某些层而显示其他层，以及在屏幕上移动层。

还可以在一个层中放置背景图像，然后在该层的前面放置第二个层，利用层不仅可以非常灵活地放置内容，还可以根据不同的设置，实现相应的动态效果。

二、层的操作层可以理解为浮动在网页上的一个页面，它可以准确地定位在页面上的任意位置，并可以规定它的大小。

通过层可以对网页进行精确定位。

不仅如此，通过对层与行为的综合使用，还可以创作出赏心悦目的动作效果。

层可以包含文本、图像或其它任何可在网页中放置的内容。

层可以重叠，并且可以改变重叠次序，因此可以在网页上实现内容的重叠效果；可以动态地设定层的显示或隐藏，实现层内容的动态交替显示等特殊的显示效果；层可以嵌套，子层会遗传父层的特征，例如可见性，位置移动等。

0.1新建层用Dreamweaver可以方便地在页面上创建层并精确地将层定位。

建立新层的步骤：●在编辑窗口的“插入”栏的“布局”选项卡中，选取“描绘层”按钮，如图2-95所示。

或者执行“插入/布局对象/层”命令。

基于Web标准实现四种基本页面布局

它的可扩展性和灵活性将适应未来网络应用更多的需
★基金项目：内蒙古自治区科技计划项目（．０１０）Ｎｏ０８５４２
收稿日期：０２２４２１ —０ —２修稿日期：０２０ —０２１— ３２
下都能被正常浏览和使用
由结构、表现和行为等三部分组成结构的标准主要包
括ＨＴＭＬ、ＸＨＴＭＬ和ＸＭＬ：现的标准主要包括ＣＳ表Ｓ：
行为的标准包括Ｗ３Ｏ和ＥＭＡｃｉｔＣＤＭＣＳｒｔｐｑ
ＨＴＭＬ（文本标记语言）构成网页文档的主要超是
ＣＳ层叠样式表）一种用来为结构化文档（ＴＳ（是ＨＭＬ
或ＸＬ添加样式的计算机语言通过使用ＣＳ样式Ｍ）Ｓ
设置页面的格式．以扩展ＨＭＬ的功能．得用户可可Ｔ使以重新定义ＨＭＴＬ元素的显示方式ＤＭ（档对象模型）以面向对象方式描述的文Ｏ文是档模型，Ｏ定义了表示和修改文档所需的对象、ＤＭ这些对象的行为和属性以及这些对象之间的关系Ｅ．ＣＭＡｃｉｔＥＭ制定的标准脚本语言．往往被称为Ｓｒ是ＣＡｐ
ＤＩＣＳ布局技术实现四种基本页面布局的过程，Ｖ＋Ｓ同时给出相关方法和步骤。

网页制作2

多媒体技术与网页制作第13讲2007年5月修订2013-7-20制作人：马秀麟1说明：由于多数网页要跨平台使用，因此网页文件不支持常用的空格符和换行符号。

大多数网页中采用表格实现定位，即利用表格确定文字和图片的存放位置。

表格可以嵌套，表格中可以嵌套表格。

1、表格用途:(1)展示文字:像Word等文字处理软件一样，利用表格展示特定的文字。

(2)页面布局:对整个页面进行布局，确定页面中各个对象的显示位置。

用于页面布局的表格往往使用无线表格。

2、插入表格直接插入所需行列数的表格：【插入】【表格】。

在对话框中回答表格的行列数。

3、表格操作:在屏幕上绘出表格后，可以利用鼠标拖放的方式移动表格线。

另外系统也会根据表格中文档的大小自动调节表格大小。

或者：选择系统菜单【修改】【表格】，利用子菜单项可以进行表格的拆分、合并、插入、删除等常规操作。

事实上，用得最多的是：当选定表格中的单元格后，桌面底部的属性面板自动变成【单元格】属性面板，此时也可以直接利用属性面板实现表格的各种操作。

4、表格属性:❑选定表格后（单击表格底部600旁的小三角就可以选定整个表格，或者利用【修改】菜单选定表格），底部的“属性”面板自动切换为“表格属性”面板。

(1)表格背景❑打开表格【属性】面板，若面板较窄，则可单击面板右下角的按钮，展开面板，从中可通过【背景】为表格设置背景等。

(2)表格边框❑打开表格【属性】面板，可设置表格边框宽度。

表格边框宽度为0，表示不显示边框，表格为无线表格。

(3)边框颜色❑打开表格【属性】面板，可设置表格边框颜色。

5、单元格属性❑选定单元格后，底部的“属性”面板自动切换为“单元格”面板。

(1)单元格背景❑打开单元格【属性】面板，若面板较窄，则可单击面板右下角的按钮，展开面板，从中可通过【背景】为选定单元格设置背景等。

(2)单元格合并❑打开单元格【属性】面板，单击左下角的单元格合并按钮，可合并选定单元格。

(3)单元格拆分❑打开单元格【属性】面板，单击左下角的单元格拆分按钮，可把选定单元格拆分为几个单元格。

DIV+CSS网页布局方法探析

（ｎａｉｓｎＳｆｒｏｅｅＫｎｎ６０）ＹｕｎｎＥｎｕｏｔｅＣｌｇｕｍｉｇｗａｌ５１１７
ＡｂｓｒｔｔａｃＮｏｄｙ，ｅｅｉｎｉｒｏｓｄｒｄｉｈｅｒｈｅｇｎｓａｄｂｒｕｈｒｏｖｎｅｃｏｔｅｓｗａａｓＷｂｄｓｇｓｍｏｅｃｎｉｅｅｎｔｅｓａｃｎｉｅｎｏｇｔｍｏｅｃｎｅｉｎｅｔｈｅｕｓｒ。
中图分类号Ｔ３１５Ｐ１．文献标识码Ａ文章编号１０１ —３７０３７５１
Ｐｒｂｏｅ＆ＡｎｌｓｓｏｈｔｏｆＤＩ＋ＣＳＳＰｇａｏｔａｙｉｎｔｅＭｅｈｄｏＶａｅＬｙｕ
ＬｎｉｉＹａｍｅＹａｇｕｎｎＪ
２一列自适应宽度、
自适应的布局能够根据浏览器窗口的大小自动改变其宽
作网站（当然是在客户没有要求使用ＤＶＣＳ的情况下）在度和高度值，是网页设计中一种非常灵活的布局形式，Ｉ＋Ｓ还用使用ＴＢＥ布局网页。但是如今的网页设计到了该考虑搜索ＤＶ＋Ｓ局的代码如下：ＡＬＩＣＳ布引擎以及给用户带来更多的便利的时代，用ＤＶＣＳ进行网ＸＴＩ＋ＳＨＭＬ代码：
divcss网页布局方法探析术云南爱因森软件职业学院昆明651701摘要如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利传统的table网页布局由于其庞大的html代码使得其在搜索引擎方面显得有些尤能为力

DIV+CSS网页设计布局技巧分析

理的布局，对页面的内容进行美化处理。
性和ｐｄｉａｄｎｇ属性。ｍａｇｎ属性代表对象的外边距（下、、ｒｉ上、左右）ａｄｎ，ｐｄｉｇ属性代表对象的内边距，也叫填充（、下、左、上
右）方法如下 …：。
● 移ＪｌＩ，刀Ⅳ ／，闻４ ’ ｌ支木应Ｊ
ＤＩＶ＋ＣＳ网页设计布局技巧分析Ｓ
文／高英
摘要讨论了使用ＤＶＣＳ技术实现网页布局的基本技巧Ｉ＋Ｓ
并通过一个典型的实例讲述了ＤＶＣＳ网页布局的基本方法。Ｉ＋Ｓ
一
般为７０像素，再宽就会使页面产生水平滚动条。当然，由８
于计算机设备的飞速发展，现在使用８０Ｘ６０显示分辨率的用００户很少了，现在页面布局宽度最大不超过１０１００２～０４像素（考虑到最小宽度１２０４像素，即１２７８显示分辨率）１０４× ６。［１
起始标记 “ ｉ ”和结束标记 “ ／＞ ”之间的所有内容都现分离。不过一个ｄ＜ｄ＞ｖ＜ｄｉｖｉｖ标签默认占据一行，怎样实现布局中一行是用来构成这个块的，中所包含元素的表现由ＤＶ标记中套并列多块区域呢９块状元素有一个属性ｆａ，可以使多个块状其Ｉｌｔｏ
代码表示上下边距为Ｏ，左右边距自动。这样就实现了居中
文称为层叠样式表），是一种用来表现ＨＭＬ或ＸＴＭＬ等文件的效果。２３ＤＭ元素的浮动．Ｉ通过ＤＶ布局网页，ＣＳ设置其属性，完全符合内容与表ＩＳ

沪科版信息技术选修三第四章第二节任务二创建网站的主页框架网页布局教案设计

任务二创建网站的主页框架网页布局一．教学目标1．知识与技能（1）了解网页设计中框架布局和表格布局的作用。

（2）掌握网页中框架、表格的制作方法、表格属性的设置方法，能够在单元格中正确插入文字和图片。

（3）能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。

2．过程与方法（1）掌握frontpage软件使用，培养学生迁移学习的能力。

（2）通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多样性，培养学生的发散思维能力。

（3）通过自主探究，使学生掌握软件的使用规则，由摸索、探究性学习到形成性学习，培养学生学会学习，驾御学习的能力。

3．情感态度与价值观（1）通过学生体验软件学习的一般方法及规律，提高学生自主学习信息技术的能力。

（2）通过运用表格布局网页对象活动（各人根据网站主题，设计网页），进一步掌握各种不同对象的属性设置方法和规律，体验创造的快乐。

二．教学重难点重点：（1）了解框架、表格在网页设计中的重要作用和功能。

（2）掌握插入、编辑表格的方法及表格的属性设置方法。

（3）掌握单元格的修饰与属性设置。

难点：表格属性和单元格属性设置三．教学过程活动1【导入】网站知识介绍（1）网站是由一些互相关联的网页构成的一个整体。

一个网站通常包含多个网页，其起始网页称为主页（home page）,也叫首页，它是网站的门面，体现了整个网站的主题、风格及架构，还具有引导功能。

（2）网站站点的建立将D:\myschool文件夹转换为空白站点。

活动2【讲授】网页的布局一、网页的框架布局（1）主页的框架布局网页中采用框架布局，可以在同一浏览器中显示多个网页页面。

展示网站的主页，引导学生分析其框架结构，得出主页的框架。

任务1 规划主页框架布局打开站点，新建网站，引导学生借助frontpage软件中提供的框架模板完成主页的框架布局。

然后完成框架网页中各个框架页面的属性设置及文件名的建立。

二、网页的表格布局网页布局：指网页中图像、文字的位置关系，简单来说也可以称之为网页排版。

《网页设计与制作》教案-第7讲布局技术之一-表格一

第7讲布局技术之一-表格一1.1教学目标：◆知识目标1.掌握表格的基本操作2.掌握表格各项属性设置的作用◆技能目标能合理运用表格进行页面布局，能合理设置表格属性◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：掌握表格的插入和表格属性的设置。

1.3 教学难点理解表格进行页面布局的好处和表格各属性的作用。

1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。

1.7教学过程：一、激趣导入，揭示课题表格是网页设计制作时不可缺少的重要元素。

无论是用于对齐数据还是在页面上对文本进行排版，表格都体现出强大的功能。

它以简洁明了和高效快捷的方式将数据、文本、图像、表单等元素有序地显示在页面上，从而设计出版式漂亮的页面。

对于使用表格绘制页面布局，而非着重文字数据编排的设计来说，手动绘制表格布局是最佳方法，虽然这种方法极其容易建立表格，但不容易掌握尺度，因为其手动操作的特性，所以非常适合于制作网页版面，但对于内容的编排，就不如标准模式的标准那么方便。

标准表格是表格应用的另一种方法，它以几行几列的方式插入到页面，然后将图像、文字等内容插入表格，即可定位和编排这些内容。

二、使用表格在Dreamweaver MX 2004中，可以导入外部数据文件，还可以将网页中的数据表格导出为纯文本的数据文件。

表格的格式控制能力使设计者可以使用表格来构造网页的框架。

先用较大的表格对网页的版面进行大致的控制，再使用嵌套的表格对细节进行刻画。

使用表格排版的页面在不同的平台、不同的分辨率的浏览器里都能保持布局，所以表格是网页中常用的版面控制和制作模板的强有力的工具。

0.1插入表格Dreamweaver MX 2004提供了强大的工具进行表格编辑，使网页设计者可以对几乎所有的表格属性进行控制。