第2讲网页布局及设计.ppt

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,第,2,讲,HTML,与,CSS,Web程序设计案例教程,第,2,讲,网页布局和设计,网页可视化效果制作,网页可视化效果制作,网页可视化效果制作,HTML,文件,HTML,标签,HTML,文件结构,HTML,超链接,HTML,基础,HTML,文件就是普通的文本文件。可以使用两种基本方法制作,HTML,页面：,一种是用文本编辑器，譬如,Windows,操作环境下的,Notebook,，编辑文本及,HTML,命令；,另一种是采用可视化软件，譬如,FrontPage,，,Dreamweaver,生成,HTML,命令。,一、,HTML,文件,例一,HTML,文件的第一段正文写在这里,.,HTML,文件的第二段正文写在这里,.,下面是一份,HTML,文件的内容：,以上的,HTML,文件，经过浏览程序解释后，显示出来的效果图 所示。,窗口只显示一段文字，而,HTML,原文件的其它文字符号都不见了，这些没有显示出来的文字符号，如,、,等，它们的主要作用是告诉浏览器，如何适当的将文件内容格式显示排列。,二、,HTML,标签,HTML,语言使用标签来指明文档中的不同内容。标签是区分文本各个组成部分的分界符，用来把,HTML,文档划分成不同的逻辑部分,(,或结构,),，如段落、标题和表格等。,标签描述了文档的结构，它向浏览器提供该文档的格式化信息，以传送文档的外观特征。,标签的名字用尖括号,括起来。,HTML,标签一般有起始标签与结束标签两种，分别放在它起作用的文档两边。起始标签与结束标签非常相似，只是结束标签在“,”,号后面多了一个斜杠“”。,二、,HTML,标签,单标签,如：,双标签,内容,如：,例一,标签属性,内容,如：,文字,二、,HTML,标签,HTML,阶层概念：,任何一份,HTML,文件，都包含了表头,(Header),、本体,(Body),、主题,(Title),三个要素，分别以,、,和,标签来表示。同时也是为了,HTML,文件有别于其它种类的文件，另外再加上,标签加以强调。,三、,HTML,文档结构,标签：,和,标签,置于整个文件的起始及结束处，表示文件,是属,HTML,语言格式。其余标签都应该位,于该标签里面。,标签：,和,标签标明文件的表头段，主要说明本文内容整体信息，是文章的开场白。所有在表头段的内容都不会显现在浏览器窗口的本体段,(Client area),里。,三、,HTML,文档结构,标签：,和,标签标明文件的本体区段，位于表头段以下的地方，即是指经浏览器解读后显示在窗口本体段,(Client area),的内容。,标签：,标签标明文件内容的主题，让读者了解文件的主题。标签里不允许有其它的标签存在。,三、,HTML,文档结构,HTML,提供六种标题格式，其所用的标记符为,（标题,n,，,n=16,），,的字体最大，,的字体最小。其属性如下：,ALIGN=LEFT,，,CENTER,，,RIGHT,：文字左对齐（,LEFT,）、居中（,CENTER,）或右对齐（,RIGHT,）。,四、标题格式,1,分段与换行符,分段标记符用于将文档划分为段落，标记符为,要将文字强制换行，而不是另起段落，可以用换行标记符,BR,实现该功能。注意，,BR,仅单独使用，而非成对出现。,2,添加水平线,添加水平线的标记符为,（与,BR,类似，,HR,也不包括结束标记符。,五、,段落格式,3.,段落对齐,（,1,）,ALIGN,属性,ALIGN,属性用于设置段落的对齐方式，其常见取值有,4,种：,RIGHT,（右对齐）、,LEFT,（左对齐）、,CENTER,（居中对齐）、,JUSTIFY,（两端对齐）。,（,2,）,DIV,标记符,（,3,）,CENTER,标记符,（,4,）格式的嵌套,五、,段落格式,1,字符格式,通过表的标记符设置字符格式,2,字体大小、字符颜色和字体样式,（,1,）,SIZE,属性：控制文字的大小,（,2,）,COLOR,属性：控制文字的颜色,（,3,）,FACE,属性：指定字体样式,六、,文字格式,物理字体,粗体,斜体,下划线,打字机字体,上标,下标,删除线,逻辑字体,强调,加重强调,代码,键入文本,变量,定义,引用,缩小,加大,六、,文字格式,1,有序列表,定义有序列表需要使用有序列表标记符,和列表项（,List Item,）标记符,：,内容一,内容二,2,无序列表,无序列表标记符,列表项标记符,七、,列表格式,3,定义列表,定义列表标记符,，用来指定定义列表的开头与结尾；,定义术语（,Definition Term,）标记符,，用来指定第一层数据（根节点）；定义描述标记符,，用来指定第二层数据（子节点）。,标记符必须有结束标记，但,和,标记符的结束标记可以省略。,七、,列表格式,七、,列表格式,示例：,根结点,子结点1,子结点2,子结点3,在,HTML,中使用标签,及结束标签,来建立链接，它将文本或图形标识为指向其它,HTML,文档、图形、小程序、多媒体效果或,HTML,文档中特定位置。,在链接的语法中必须包含一个参考属性,href,：,我要上网易,八、,HTML,超链接,4,、更改链接的颜色,HTML,文件中超链接文字颜色的设置，是由,标签中的,text,、,alink,、,vlink,与,link,属性所控制。其中：,text,属性：非可链接文字的颜色，默认为黑色（,Black,）。,link,属性：可链接文字的颜色，默认为蓝色（,Blue,）。,vlink,属性：已经被访问过的可链接文字的颜色，默认为粟色（,Maroon,）。,alink,属性：正被单击的可链接文字的颜色，默认为红色,(Red),。,八、,HTML,超链接,HTML,文件中，,IMG,元素用来插图象。属性,SRC,主要用途是指定图形资源的位置，,。属性,ALT,是指定图形对应的文字叙述，其值为任意一串文字,由编写,HTML,文件者来设置。,ALT,属性的设立主要针对非图形界面浏览器使用者。但是，这对图形界面浏览器也有帮助。每当这些浏览器关闭显示图形功能后，这一串文字就派上用场了。,九、插入图像,1.,插入图像,用,标记符在,HTML,文件中插入图像。,2.,图像布局,可以使用,HEIGHT,、,WIDTH,、,BORDER,属性指定图像的高度、宽度以及是否具有框线,SOLID,属性设置边框颜色。,3.,图像的对齐方式,图像的对齐是指图片本身在页面中的对齐和图像与文本的对齐,九、插入图像,创建基本表格,可以用,标记符创建一个表格，并在它的中间加入标题和需要的数据。表格定义的代码为：,具体表格内容,十、插入表格,（一）表格的标题,定义了表格的说明，如：,在这里输入标题,属性,ALIGN,决定了标题的对齐方式，,TOP,是将标题放在表格的顶部，,BOTTOM,将标题放在表格的下面。,标题内容,十、插入表格,（二）行、表头和数据,定义一个表格，需从第一行逐级向下，并且按行中单元格的顺序开始定义。行、表头和数据定义的代码为：,表头,数据,十、插入表格,（三）设置表格尺寸,设置表格边框尺寸,利用,的,BORDER,属性可以设置,表格边框的尺寸：,2.,设置表格尺寸,利用,的,WIDTH,和,HEIGHT,属性,可以设置表格尺寸，可以是屏幕的百分比也可以是像素值,十、插入表格,3.,设置单元格间距,利用,标记符的,CELLSPACING,属性可以设置单元格与相邻单元格边线间距。,4.,设置单元格边距,利用,标记符的,CELLPADDING,属性可以设置单元格文字内容与表格线间距。,十、插入表格,（四）、表格及文字的对齐与布局,1,表格在页面中的对齐,利用表格的,ALIGN,属性，可以将表格显示在页面的左边或右边。如果没有设置这一属性，表格单独显示为页面的一行，在页面的左侧。,ALIGN=”LEFT”,将表格按左边对齐，而表格的所有文本显示在表格右侧和页面之间的位置。,ALIGN=”RIGHT”,将表格按右边对齐，文本显示在表格的左侧。,十、插入表格,2.,单元格内数据的对齐,ALIGN,属性为单元格数据提供水平对齐方式，该属性有,LEFT,（左对齐）、,RIGHT,（右对齐）、,CENTER,（居中）,3,个值。,VALIGN,属性定义单元格数据的垂直对齐方式，该属性有,TOP,（顶部对齐）、,BOTTOM,（底部对齐）、,MIDDLE,（中间对齐）,3,个值。,十、插入表格,（五）、设置表格的色彩,设置表格、行或行中单元的相关颜色，,可以在,、,、,和,标记符中使用,BGCOLOR,、,BORDERCOLOR,属性。,COLOR,的值可以是以十六进制表示的颜色，或者是,16,种颜色（,BLACK,、,WHITE,、,GREEN,、,MAROON,、,OLIVE,、,MAVY,、,PURPLE,、,GRAY,、,RED,、,YELLOW,、,BLUE,、,TEAL,、,LIME,、,AQUA,、,FUCHSIA,和,SILVER,）中的一种。,十、插入表格,（六）、创建跨多行、多列的表元,跨越多列,在,或,标记符里利用,COLSPAN,属性，并在其后写上想要跨越的列数。,跨越多行,在,或,标记符里利用ROWSPAN,属性，并在其后写上想要跨越的列数。,十、插入表格,十一、表单,Internet,服务中不仅希望能从,Web,服务器中获得信息，而且还希望能向,Web,服务器反馈信息。,HTML,是利用表单（,Form,）来设计交互界面的。,“表单”则是接受浏览者在网页中的操作，传递给服务器中的程序（如,CGI,网关守护进程），它是动态的，有输入框及按钮等。使用表单并配合,CGI,程序，网页能够知道浏览的人做了哪些事情，然后针对这些事情适当地加以回应，就可以做成一个具有交互功能的网页了。本章的内容就是要告诉你，如何使用表单和,CGI,程序来让自己的网页和浏览网页的人之间进行互相交流。,表单标签首标签,和尾标签,之间的内容就是一个表单。在,标签里有两个属性：,action,和,method,属性。,action,属性的作用就是指出该表单所对应的处理程序的位置。它的参数值就是该程序的,URL,。,method,属性用于指定该表单的运行方式。默认的方式是,get,。当值为,get,时表示该表单主要是从服务器中获取信息，因此它传送给服务器的反馈信息长度不能超过,255,个字符；当值为,post,时表示该表单主要是向服务器发送信息的，它传送给服务器的反馈信息长度没有限制。,十一、表单,是个单标签，没有结束标签，它必须嵌套在表单标签中使用，用于定义一个用户输入项。,标签主要有六个属性：,type,、,name,、,size,、,value,、,maxlength,和,checked,，其中,name,和,type,是两个必选属性。,name,属性的参数值是相应处理程序中的变量名，,Web,服务器将把这条输入信息的值赋予,name,属性规定的变量。,type,属性用于指定该输入项提供的输入方式即指出浏览者输入的值是什么类型的。,type,主要有九种类型：,text,、,password,、,radio,、,checkbox,、,submit,、,reset,、,image,、,hidden,和,file,。,1,、,标签,当,type,text,时，表示该输入项的输入信息是字符串此时，浏览器会在相应的位置显示一个文本框供用户输入信息。此文本框是一个只能输入一行文字的输入框。,当,type=submit,时，浏览器会在相应的位置产生一个提交按钮。当用户单击该按钮时，浏览器就会将表单的输入信息传送给服务器。,当,type=reset,时，浏览器会在相应位置产生一个重置按钮。当用户单击该按钮时，浏览器就会清除表单中所有的输入信息而恢复到初始状态。,当,type=password,时，与,text,类型使用起来很相似，不同之外只是当浏览者输入内容时，不显示所输入的内容，而是用星号“*”来代替每个密码字符，以保证密码的安全。,当,type=radio,时，表示该输入项是一个单选项。单选项必须是唯一的，即用户只能选中表单中所有单选项中的一项作为输入信息。,当,type=checkbox,时，表示该输入项是一个复选项，用户可以同时选中表单中的一个或多个复选项作为输入信息。由于选择是多项的，属性,name,应取不同的值。,当,type=image,时，浏览器会在相应位置产生一个图像按钮，当用户单击该按钮时，浏览器就会将表单的输入信息传送给服务器。,当,type=hidden,时，表示输入项将不在浏览器窗口中显示。如果用户不想显示某些选项而又不愿将它们从文档中删去的话，就可以通过将这些选项中,type,属性的参数值改为,hidden,。,文件选择输入框在文件上传程序中应用最为广泛。通过,就实现。,2,、下拉菜单,select/option,在表单中，通过,和,标签就可以在浏览器中出现一个下拉式菜单或带有滚动条的菜单，浏览者可以在菜单中选中一个或多个选项。这一点和,标签中单选框和多选框使用上相似，只是形式不同。,3,、多行文本框,textarea,用,标签可以来定义高度超过一行的文本输入框。,标签是成对标签，首标签,和尾标签,之间的内容就是显示在文本输入框中的初始信息。,4,、按钮标签,button,用,标签可以来定义提交表单内容给,WEB,服务器接口程序的按钮。,实训项目一,用,HTML,创建最简单,Web,页,实训内容：用,HTML,创建最简单,Web,页的实训内容如下：,（,1,）使用,Windows,操作系统自带的“记事本”编辑工具创建如图一个简单网页。,（,2,）使用,Word2000,创建如图一个简单网页。,实训项目一 用,HTML,创建最简单,Web,页,实训步骤,实训,1.,1),打开,Windows2000,附件中的“记事本”编辑工具,2),用,HTML,语言输入,3),在“记事本”菜单栏单击,【,文件,】【,另存为,】,命令，弹出“另存为”对话框，如图,1.2,所示，在“保存在”文本框中选择文件保存位置，“保存类型”一定要选择“所有文件”，在“文件名”文本框中直接输入扩展名为,.,htm,或,.html,的文件名，这样所保存的文件才能被浏览器识别。,4),关闭“记事本”编辑工具，双击刚才保存的文件，即在,IE,浏览器显示如图,1.1,所示的网页。,实训步骤,实训,2.,1),打开,Word2000,2),用,HTML,语言输入,3),在菜单栏单击,【,文件,】【,另存为,】,命令，弹出“另存为”对话框，如图,1.2,所示，在“保存在”文本框中选择文件保存位置，“保存类型”一定要选择“,Web,页（*,.,htm,；*,html,）”，在“文件名”文本框中输入文件名，这样所保存的文件就能被浏览器识别。,4),关闭,Word2000,，双击刚才保存的文件，即在,IE,浏览器显示如图,1.1,所示的网页。,实训内容：使用,HTML,语言编写一张如图所示浏览效果网页。,1,、“汽车博览”,4,个字为隶书、,5,号、蓝色、水平居中；,2,、第二行文字位置如图所示；,3,、第,3,、,4,、,5,行为无序号列表；,4,、因三辆汽车的三段说明文字较长，一个页面显示不下。分别对三段文字的标题做书签，三段“查阅说明”文字分别超链接到相应的三个书签；,5,、三段“查看图片”文字分别超链接到相应的三张图片,6,、“欲购车请联系我们”这段文字设置成右对齐方式并进行邮件超链接，邮件地址为,qcxsb,；,7,、划一条水平线；水平线以下为三辆汽车的三段说明文字。,实训项目二,HTML,语言的基础编辑,实训项目二,HTML,语言的基础编辑,（一）,实训步骤,1),打开,Windows2000,附件中的“记事本”文本编辑工具,2),用,HTML,语言输入内容：,3),在“记事本”菜单栏单击,【,文件,】【,另存为,】,命令，弹出“另存为”对话框，如图,1.2,所示，在“保存在”文本框中选择文件保存位置，在“保存类型”选择“所有文件”，在“文件名”文本框中直接输入扩展名为,.,htm,的文件名，这样所保存的文件才能被浏览器识别。,4),关闭“记事本”文本编辑工具，双击刚才保存的文件，即在,IE,浏览器显示如图,1.12,所示的网页。,5),在,IE,浏览器中分别点击“查看说明”、“查看图片”、“欲购车请联系我们”三种不同的超链接显示出说明文字、图片和电子邮件的界面。,CSS,样式定义概念,CSS,样式的语法规则,创建,CSS,样式,使用,CSS,样式,1.CSS,样式定义概念,CSS,是,Cascading Style Sheets(,层叠样式表单,),的简称。,特点：,(1),网页元素可以精确定位。,CSS,样式和以像素为单位设置字体，确保一致的方式在多个浏览器中处理布局与外观。控制边距、浮动文本等网页块元素的格式和定位,(2),使网页内容结构与格式控制相分离。,网页内容结构与格式控制相分离，使网页可以只由内容构成，所有格式控制指向某个,CSS,样式表文件。,既简化了网页格式制作，又减少了重复劳动。,1.CSS,样式定义概念,2.CSS,样式的语法规则,文字,HTML,标签标志属性：属性值；标志属性：属性值；,6.,创建,CSS,样式,创建,CSS,样式表的过程，就是对各种,CSS,属性的设置过程，所以了解和掌握属性设置非常重要。在,Dreamweaver MX 2004,的,CSS,样式里包含了,W3C,规范定义的所有,CSS,的属性，把这些属性分为：类型、背景、区块、方框、边框、列表、定位、扩展等八个部分，如图所示。,Dreamweaver MX 2004,实现,CSS,属性设置功能是完全可视化的，无需编写代码。下面分别详细讲解。,1),定义,CSS“,类型”,属性,使用“,CSS,样式定义”对话框中的“类型”类别可以定义,CSS,样式的基本字体和类型设置。在“,CSS,样式定义”对话框中，选择“类型”,，如图所示，然后设置所需的样式属性。,6.,创建,CSS,样式,2),定义,CSS,样式“背景”,属性,使用“,CSS,样式定义”对话框的“背景”类别可以定义,CSS,样式的背景设置。可以对网页中的任何元素应用背景属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。还可以设置背景图像的位置。,在“,CSS,样式定义”对话框中，选择“背景”，如图所示，然后设置所需的样式属性。,6.,创建,CSS,样式,3),定义,CSS,样式“区块”属性,使用“,CSS,样式定义”对话框的“区块”类别可以定义标签和属性的间距和对齐设置。,定义区块设置：在“,CSS,样式定义”对话框中，选择“区块”，如图所示，然后设置所需的样式属性。,6.,创建,CSS,样式,4),定义,CSS,样式“方框”属性,使用“,CSS,样式定义”对话框的方框,(,又称盒子,),类别可以为控制元素在页面上的放置方式的标签和属性定义设置。可以在应用填充和边距设置时将设置应用于元素的各个边，也可以使用“全部相同”设置将相同的设置应用于元素的所有边。,定义元素在页面上的放置方式：在“,CSS,样式定义”对话框中，选择“方框”，如图所示，然后设置所需的样式属性。,6.,创建,CSS,样式,5),定义,CSS,样式“边框”属性,使用“,CSS,样式定义”对话框的“边框”类别可以定义元素周围的边框的设置,(,如宽度、颜色和样式,),。,设置边框样式：在“,CSS,样式定义”对话框中，选择“边框”，如图所示，然后设置所需的样式属性。,6.,创建,CSS,样式,6),定义,CSS,样式“列表”属性,使用“,CSS,样式定义”对话框的“列表”类别为列表标签定义列表设置,(,如项目符号大小和类型,),。,定义列表样式：在“,CSS,样式定义”对话框中，选择“列表”，如图所示，然后选择所需的样式属性。,6.,创建,CSS,样式,7),定义,CSS,样式“定位”属性,“定位”样式属性使用“层”首选参数中定义层的默认标签，将标签或所选文本块更改为新层。,设置层定位属性：在“,CSS,样式定义”对话框中，选择“定位”，如图所示，然后设置所需的样式属性。,6.,创建,CSS,样式,8),定义,CSS,样式“扩展”属性,“扩展”样式属性包括过滤器、分页和光标选项，它们中的大部分效果仅受,Internet Explorer 4.0,和更高版本的支持。,指定扩展属性：在“,CSS,样式定义”对话框中，选择“扩展”，如图所示，然后设置所需的样式属性。,6.,创建,CSS,样式,实训,1.,定义一个新的,CSS,样式,将插入点放在文档中。,单击,【,窗口,】【CSS,样式,】,选项，弹出“,CSS,样式”面板，单击面板右下角区域中的“新建,CSS,样式”按钮。如图所示。或者在文本属性检查器中，从“样式”弹出式菜单中选择“管理样式”，然后在出现的对话框中单击“新建”。或者右键单击“窗口”“标签检查器”“相关,CSS”,选项卡，从上下文菜单中选择“新建规则”。或者单击,【,文本,】【,新建,】【CSS,样式表,】,选项。如图所示。,定义要创建的,CSS,样式的类型。若要创建可作为,class,属性应用于文本范围或文本块的自定义样式，请选择“创建自定义样式,(Class)”,，然后在“名称”文本框中输入样式名称。,(,类名称必须以句点开头，并且可以包含任何字母和数字组合，例如,.jcss,。如果没有输入开头的句点，,Dreamweaver MX 2004,将自动输入,),。若要重定义特定,HTML,标签的默认格式，请选择“重定义标签”，然后在“标签”字段中输入一个,HTML,标签，,或从下拉列表中选择一个标签。若要为具体某个标签组合或所有包含特定,Id,属性的标签定义格式，请选择“使用,CSS,选择器”，然后在“选择器”文本框中输入一个或多个,HTML,标签，或从下拉列表中选择一个标签。下拉列表中提供的选择器,(,称作伪类选择器,),包括,a:active,、,a:hover,、,a:link,和,a:visited,。,选择定义样式的位置。若要创建外部样式表，请选择“新建样式表文件”。若要在当前文档中嵌入样式，请选择“仅对该文档”。,单击“确定”。完成定义。,实训,1.,定义一个新的,CSS,样式,7.,思考与练习,（,1,）什么是,CSS,样式表？他有几种类型？,（,2,）,CSS,的引用方式有哪些？,（,3,）,CSS,样式表定义的“扩展”功能中的过滤器有哪些？,（,4,）新建一张网页，创建一个,CSS,样式，要求表格内所有文字为,12,号楷体。,复习回顾,问题,1,：网页布局的方式？,问题,2,：表格布局和层布局的区别？,表格布局基本元素,表格用,表示,每个表格均由行和列组成，,表示行，,表示列，行列交叉构成单元格。,colspan,表示该单元格向右合并的栏数,rowspan,表示该单元格向下合并的栏数,表格布局基本元素,(1,1)(1,2)(1,3),(2,1),(2,2)(3,2),(2,3),(3,1),(3,3),表格布局工具,“插入表”,：,添加一个新的表格。,“插入”、“删除”、“调整大小”、“合并单元格”,：对表格进行调整。,“选择”,：选择表格、行、列和单元格。,插入表设计工具,CSS,定义,1,、标签元素样式定义,td,font-family:Trebuchet MS;,Color:Navy;,CSS,定义,2,、样式类定义,.,HighlightedText,font-family:Trebuchet MS;,Color:Navy;,CSS,引用,（,1,）内联样式表,直接将,CSS,样式控制放置在单个,XHTML,元素内,文字段落。,CSS,引用,（,2,）内部样式表,在网页的,head,部分定义样式，称为嵌入式内部样式引用,css,引用,.style1,font-family:,宋体,;,font-size:14px;,color:#9900FF;,使用,CSS,嵌入引用表现文字段落。,CSS,引用,CSS,引用,（,3,）,外部链接样式,定义提取到一个单独的后缀名为,.,css,的样式表文件。,多重样式的层叠,优先级别,样式类型,1,浏览器缺省设置,2,外部样式表,3,内部样式表（位于,标签内部）4,内联样式（在,HTML,元素内部）,实训,:,利用表格布局制作一个静态网页,步骤,步骤一：在解决方案资源管理器中添加一个窗体文件，命名为,buju.aspx,，同时在根目录下新建一个,images,子文件夹，将已经准备好的图片元素复制在,images,下。,步骤二：打开,buju.aspx,，在菜单栏选择“布局,/,插入表”。在弹出的“插入表”视图中进行相应设置，如下图所示，建立一个,4,行,3,列的空白表格，宽度设为,700px,，对齐方式为居中，边框设置为,0,。,步骤,步骤三：完善表格布局,采用合并单元格、添加嵌套表格对该表格进一步完善。,步骤四：表格嵌套布局。,嵌套表格是在已存在的表格单元格内插入另一个表格。可以像对普通表格一样对嵌套表格进行格式设置；但需要注意的是其宽度受它所在单元格的宽度的限制。,步骤,步骤五：对象内容的嵌套。,根据需要完成表格设置后，用户需要在各单元格中插入图片或相应控件（如文本框、按钮等）。在解决方案资源管理器中，找到相应图片直接点中并拖动该图片至单元格相应位置，从工具箱中寻找标签、文本框、下拉列表框和按钮分别手拖动放置到合适位置后，在属性面板组中完成相关设置。,作业,（一）完成课堂要求的表格布局网页。,（二）查找一个典型的信息发布网页或设计一个典型信息发布网页效果图，有待于这个学期大作业用。,层布局基本元素,（,1,）块元素,块元素,(block element),一般是其他元素的容器元素，,div,即是常见块元素，其他如段落标签“,p”,、标题“,h”,。,（,2,）内联元素,内联元素,(inline element),一般都是基于语义级,(semantic),的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素,a,、图片元素“,img,”,。,常见的块元素,元素,说明,div,层,ol,排序表单,ul,非排序列表,p,段落,center,居中对齐块,h,h1-,大标题、,h2-,副标题、,h3-3,级标题,hr,水平分隔线,排序列表：,ol,和,ul,Ol,：有序列表,新闻中心,产品中心,留言板,通过,ol,，将在列表前自动显示数字,123,ol,和,ul,与,li,嵌套使用实现导航条作用。,新闻中心,产品中心,留言板,ul,无序列表，表现为,li,前面是大圆点而不是,123,Ul,：无序列表,排序列表：,ol,和,ul,元素,说明,a,锚点,br,换行,img,图片,i,斜体,strike,中划线,strong,粗体强调,u,下划线,span,常用内联容器，定义文本内区块,常见的内联元素,布局步骤和方法,步骤：,步骤一,打开窗体文件，添加,div,并标记。,步骤二,编写我们所需要的,CSS,样式表。,步骤三,head,标签内定义外部,css,样式文件链接,步骤四：,制作导航条,层布局注意点,（,1,）在布局初期，为了查看和测试布局效果，可以在各层中设置背景颜色（,background-color,）样式，布局完成后删除。,（,2,）页面中的,div,的,id,属性与,Css,文件样式中的,#id,对应，且大小写敏感。,层布局注意点,（,3,）默认情况下，,div,是单列布局的，可以利用,CSS,中,float,属性（流控制）进行多列布局，设置元素的,float,属性。,（,4,）当元素的内容溢出时，即元素所包含的内容超过元素所定义的高度和宽度所能容纳的内容时，可以通过,overflow,属性控制是显示滚动条还是自动扩展被控元素的大小使其自动适应内容，或者干脆不显示溢出元素。,（,5,）,ul,和,ol,也可以作为布局对象嵌套在层中。,Thank you very much!,