网页设计与制作 课件（向隅） 项目5、6 使用div+CSS布局网页、使用表单_第1页
网页设计与制作 课件（向隅） 项目5、6 使用div+CSS布局网页、使用表单_第2页
网页设计与制作 课件（向隅） 项目5、6 使用div+CSS布局网页、使用表单_第3页
网页设计与制作 课件（向隅） 项目5、6 使用div+CSS布局网页、使用表单_第4页
网页设计与制作 课件（向隅） 项目5、6 使用div+CSS布局网页、使用表单_第5页
已阅读5页，还剩51页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务5-1布局概述

任务5-2布局常用属性

任务5-3布局类型任务5-1布局概述网页布局是指网页上的各种元素，如文字、图片、视频、按钮等的展示和组织方式。网页布局的目的是使页面的内容更易于理解和浏览，同时增强网站的视觉吸引力。div + CSS是Web的一种标准，也是一种网页的布局方法。div + CSS布局是采用<div>标签配合CSS实现对网页标签定位的一种布局方法。此种定位方式不同于传统的表格(table)布局定位方式，它可真正实现网页内容与表现相分离的效果。这里div为division的缩写，意思为划分，也可以称为层或区块。通过合理的网页布局设计，可以让页面内容更加有序、整洁，并且使用户更容易找到自己需要的信息。div + CSS布局的主要优点如下：(1)网页和表现内容分离，便于站点重构页面。(2)结构清晰，对搜索引擎更加友好。(3)便于Web项目开发分工协作。1. div标签<div>标签常用于对块进行标记，以便通过样式表来对<div>标签标记块进行格式化。<div>标签可以把文档分割为独立的、不同的部分。如果用id或class来标记<div>标签，那么该标签的作用会变得更加明显。1) <div>标签的基本语法<div>标签的基本语法格式如下： <div

id="id选择符">文字或图像</div>或 <divclass="类选择符">文字或图像</div>2) <div>标签的常用属性<div>标签的常用属性如下：(1) position属性：表示层的定位方式。(2) left和top属性：定义层的位置，与之并列的还有right和bottom属性，这4个属性用来设置层的位置。(3) width和height属性：定义层的宽度和高度。(4) float属性：定义层的浮动方式。(5) clear属性：定义清除属性，表示层是否允许在某个元素的周围有浮动元素，即是否去掉某个位置的浮动元素。(6) z-index属性：设置区域的上下层关系，相当于三维空间的z坐标，z-index属性值越大，其位置就越高。表5-1为<div>标签的属性及说明。2. span标签<span>标签与<div>标签一样也是一个容器元素，被广泛运用在网页制作中。<span>标签用来组合文档中的行内元素。<span>元素是一个内联元素，它包围的元素不会自动换行。<span>标签没有固定的格式表现，当对它应用样式时，它才会产生视觉上的变化。<span>标签的基本语法如下：<span

id="指定样式名称">文本</span>3.使用div+CSS布局的流程为了提高网页制作的效率，布局时通常要遵循一定的布局流程，使用div+CSS布局的具体流程如下：(1)确定页面的版心宽度。版心是指浏览器内显示内容的有效面积，显示内容在浏览器窗口中一般是居中显示的。浏览器显示内容的最大面积是由显示器的分辨率决定的。目前显示器的分辨率大多在1024 × 768px(像素)以上，可设置版心宽度1000px。在设计网站时应尽量适配主流的屏幕分辨率。常见网页的宽度值为960px、980px、1000px和1200px等。(2)分析页面中的模块。在运用CSS布局之前，首先要对页面有一个整体的规划，用笔画出页面的草图，页面中包括的模块及模块间的关系。(3)控制网页的各个模块。当分析完页面的布局后，就可以运用盒子模型的原理，通过div + CSS布局来控制网页的各个模块了。初学者在制作网页时，一定要养成分析页面布局的习惯，这样可以提高网页制作的效率。任务5-2布局常用属性div + CSS布局通常有3种方式，分别是静态布局、浮动布局和定位布局。1.静态布局静态布局，其特点是将网页中各种布局标签按照其在HTML代码中的顺序从上而下依次显示。块级元素生成的是一个矩形框，它按照在文档中出现的位置正常定位显示，没有偏移量。在静态布局的网页中，用户无须设置网页各种布局标签的边距属性。例如，一个典型的HTML文档，其<body>标签中的内容通常由头部(header)、导航栏(nav)、内容(content)和页尾(footer)4个部分组成，使用<div>标签建立这4个部分所在的层，代码如下：<divclass="header1">网页的头部标签，通常包括网页的Logo、Banner和搜索框等</div><divclass="nav1">网页的导航条标签，完成站点导航的超链接。</div><divclass="content1">网页的内容标签，主要包括网站的各种版块栏目</div><divclass="footer1">网页的页尾标签，主要包含网页的版权信息及友好链接等内容</div>4个部分及<body>的样式代码如下：静态布局的显示效果如图5-6所示。静态布局的优点是结构简单，与各浏览器兼容性好，缺点是无法实现左右分栏的样式效果。2.浮动布局浮动布局的作用是，定义网页布局标签脱离网页的流动布局结构后显示的方向。在网页设计中，浮动布局可应用于多个方面，如实现文本环绕图像或实现浮动的块状标签布局。它是目前最主要的布局方法。为元素设置浮动，可以使页面元素变得整齐有序。1)认识浮动浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。定义浮动的基本语法格式如下：选择器{float:属性值;}float常用的属性值有3个，如表5-2所示。2)清除浮动运用clear属性清除浮动。其基本语法格式为：选择器{clear:属性值;}clear的常用属性值有3个，如表5-3所示。运用clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时，经常会遇到一些特殊的浮动影响。3.定位布局在CSS中，使用定位属性可以实现网页中元素的精确定位。元素的定位属性主要包括定位模式和边偏移两部分。1)定位模式position属性用于定义元素的定位模式，其基本语法格式如下：选择器{position:属性值；}position的常用属性值如表5-4所示。2)边偏移通过边偏移属性top、bottom、left或right来精确定义定位元素的位置，其取值为不同单位的数值或百分比，如表5-5所示。任务5-3布局类型使用div+CSS可以进行多种类型的布局，常见的布局类型有单列布局、双列布局、三列布局3种类型。本任务将对这3种布局进行详细讲解。1.单列布局单列布局是网页布局的基础，所有复杂的布局都是在此基础上演变而来的。如图5-9是一个单列布局页面的结构示意图。从图5-9中可以看出，单列布局页面从上到下分别为头部(header)、导航栏(nav)、焦点图(banner)、内容(content)和页尾(footer)，每个部分独占一行，且宽度与版心相等。图5-10是一个典型的单列布局网页。2.双列布局双列布局和单列布局类似，只是网页内容被分为了左右两部分。图5-11是一个双列布局页面的结构示意图。3.三列布局对于一些大型网站，特别是电子商务类网站，由于内容分类较多，通常需要采用三列布局的页面布局方式，如图5-12当当网的内容部分就是左、中、右布局。三列布局方式只是将主体内容分成了左、中、右三部分。图5-13是一个三列布局页面的结构示意图。4.全新的HTML5结构元素在使用div + CSS布局时，需要通过为div命名的方式来区分网页中不同的模块。在HTML5中布局方式有了新的变化，HTML5中增加了新的结构标签。图5-14给出了HTML5中新增的结构元素。1) header标签HTML5中的<header>标签是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。<header>标签基本语法格式如下：在HTML网页中，并不限制<header>标签的个数，一个网页中可以使用多个<header>标签，也可以为每一个内容块添加<header>标签。2) nav标签<nav>标签用于定义导航链接，是HTML5新增的标签，该标签可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。<nav>标签的基本语法格式如下：3) footer标签<footer>标签用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。与<header>标签一样，在一个页面中也可以包含多个<footer>标签。4) article标签<article>标签代表文档、页面或者应用程序中与上下文不相关的独立部分，该标签经常被用于定义一篇日志、一条新闻或用户评论等。5) section标签<section>标签用于对网站或应用程序中页面上的内容进行分块，一个<section>标签通常由内容和标题组成。需要注意的是：(1)不要将<section>标签用作设置样式的页面容器，那是div的特性。(2)如果<article>标签、<aside>标签或<nav>标签更符合使用条件，那么就不要使用<section>标签。(3)没有标题的内容区块不要使用<section>标签定义。6) aside标签<aside>标签用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航栏等其他类似的有别于主要内容的部分。<aside>标签的用法主要分为两种：(1)被包含在<article>标签内作为主要内容的附属信息。(2)在<article>标签之外使用，作为页面或站点全局的附属信息部分。任务6-1认识表单元素

任务6-2运用表单元素设计注册表

任务6-3使用行为任务6-1认识表单元素1.表单的概念表单是用于实现浏览者与网页制作者之间信息交互的一种网页对象，在Internet中表单被广泛应用于各种信息的搜集与反馈，如图6-1所示就是一个嵌入了内容的个人注册表单。2.表单的构成在HTML中，一个完整的表单通常由表单控件、提示信息和表单域3个部分组成。(1)表单控件：具体的表单功能项，如按钮、单选按钮、复选框、文本输入框等。(2)提示信息：表单中包含的说明性文字，提示用户进行相关操作。(3)表单域：相当于一个窗口，用来容纳所有的表单控件和提示信息。在Dw的编辑窗口中表单域显示为一个虚线框，其他的表单对象必须放入这个框内才起作用，如图6-2所示。在Dw中，若看不到创建的表单域即标记表单域的虚线框，则可选择菜单命令“查看”→“可视化助理”→“不可见元素”，使虚线框可见，如图6-3所示。3.创建表单在HTML中，用<form></form>标签创建一个表单，<form></form>中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：<formaction="url地址"method="提交方式"name="表单名">表单控件</form>标签中的内容解释如下：(1) action属性：用于指定接收并处理表单数据的服务器程序的url地址。(2) method属性：用于设置表单数据的提交方式，其取值可为get或post。(3) name：用于指定表单的名称。4.表单的使用方法1)创建表单创建表单的基本步骤如下：(1)确定需要收集的信息，根据信息特点设计表单。(2)在表单中插入不同的表单控件元素。(3)设置表单域的属性。(4)设置通过表单所收集的信息的处理方式。(5)设置确认网页，确认已经接收到用户填写的信息，并请用户核对是否正确。表单只是收集浏览者输入的信息，其数据的接收、传递、处理以及反馈工作是由通用网关接口(CommonGatewayInterface，CGI)程序来完成的。如果要在网页中添加表单，就必须编写相应的CGI程序。2)添加表单控件在DreamweaverCC中要插入表单，使用“插入”面板中的“表单”栏即可完成，如图6-4是“插入”面板的“表单”工具栏。3)表单对象的属性设置DreamweaverCC表单对象包括文本域、按钮、图像域、复选框、单选钮、列表、菜单、文件域及隐藏域等。(1)“表单”控件。在添加表单之后，文档中将以虚线框表示表单区域。表单对象只能插入在虚线框内。为了更合理地安排表单元素，可以使用表格来布局表单元素。“表单”控件的属性可以通过表单“属性”面板进行设置，如图6-5所示。在插入表单后，需要在表单(虚线框)内添加表单元素，如文本域、单选按钮、复选框以及弹出菜单等。利用“插入”面板的“表单”栏可以方便地插入表单中的各个元素。(2)“文本字段”控件。“文本字段”控件的属性可以通过“属性”面板进行设置，如图6-6所示。(3)“密码”控件。“密码”控件的属性可以通过其“密码”控件的“属性”面板进行设置，如图6-7所示。“密码”控件的“属性”面板中的设置选项意义与“文本框”控件的设置选项意义相同。(4)“单选框”控件。“单选框”控件的属性可以通过其“属性”面板进行设置，如图6-8所示。单选项的文本内容可直接在选中该单选项时修改。(5)“单选按钮组”控件。“单选按钮组”控件的属性可以通过其“单选按钮组”对话框进行设置，如图6-9所示。(6)“复选框”控件。复选框允许在一组选项中选择多个选项，用户可以选择任意多个合适的选项，一次只能建立一个。复选框对每个单独的响应进行“关闭”或“打开”的状态切换。“复选框”控件的属性面板如图6-10所示。(7)“复选框组”控件。“复选框组”控件一次可以建立多个复选框。单击“复选框组”控件按钮，弹出如图6-11所示的“复选框组”对话框，用户可以添加、删除或修改标签及其值，操作方式与“单选按钮组”对话框的操作方法相同。(8)“选择”控件。弹出(下拉)菜单和“列表值”按钮都列出了一组用户可以从中选择的值。弹出菜单和“列表值”按钮是有区别的。弹出菜单只允许单项选择，而“列表值”按钮则可选取多项。要插入列表/菜单，可将光标定位后，单击“插入”面板中的“选择”控件按钮。“选择”控件的属性可以通过其“属性”面板进行设置，如图6-12所示。设置“选择”控件的属性，可以在选中“选择”控件之后，在“选择”控件下面的文本域中输入“选择”控件的名称。要设置选择项的内容，可以通过单击“列表值”按钮添加选择的项目。单击“列表值”按钮，弹出修改“列表值”对话框，如图6-13所示。(9)“提交”按钮控件。“提交”按钮控件用于提交表单的标准任务，也可以执行自定义功能。要插入“表单”按钮，将光标定位后，单击“插入”面板中的“提交”按钮，创建默认名为“submit”且文本显示为“提交”的按钮。“提交”按钮控件的属性可以通过其“属性”面板进行设置，如图6-14所示。(10)“重置”按钮控件。“重置”按钮控件用于重置表单的标准任务，也可以执行自定义功能。要插入表单的“重置”按钮，可将光标定位后，单击“插入”面板中的“重置”按钮，创建默认名为“reset”且文本显示为“重置”的按钮。“重置”按钮控件的属性可以通过其“属性”面板进行设置，如图6-15所示。(11)“文本区域”控件。“文本区域”控件用于创建一个可以输入多行多列的文本。显示时的行和列可以指定。要插入表单的“文本区域”，将光标定位后，单击“插入”面板中的“文本区域”，创建文本区域。“文本区域”控件的属性可以通过其“属性”面板进行设置，如图6-16所示。4)表单应用举例下面制作一个用户登录网页，效果如图6-17所示。(1)分析：为了控制页面的显示效果，使页面更美观，可以使用表格控制表单项，此时需在网页文档中插入以下内容：①插入1个表单域。②在表单域中插入1个3行3列的表格。③在表格中插入1个文本域。④在表格中插入1个密码域。⑤在表格中插入1个提交按钮。(2)具体操作步骤如下：①创建并打开网页文档。②在Dw设计视图窗口单击“插入”面板中的“表单域”按钮创建表单域。③在表单域中插入1个3行3列的表格，表格的ID设置为“table01”，“宽”设置为“450像素”，“边框粗细”设置为“0”，“单元格边框”设置为“5”，“单元格间距”设置为“0”。标题选中“顶部”，在“标题”文本框中输入“输入您的会员账号与密码”，如图6-18所示。④单击“确定”按钮，效果如图6-19所示。⑤选中表格的第1列，在“属性”面板中设置“水平”为“右对齐”，设置“宽”为28%，如图6-20所示。⑥在表格的第1行第1列中输入文字“e-mail或账号：”，第2行第1列输入文字“登录密码：”。⑦选中表格的第2列，将其宽度设置为48%。⑧选中表格的第2行第3列，设置“水平”为“左对齐”，并输入文字“忘记密码？”，效果如图6-21所示。⑨在表格的第1行第2个单元格中插入“文本”控件，并去掉文本框前的文字。⑩在表格的第2行第2个单元格中插入“密码”控件，并去掉文本框前的文字。⑪选择表格的第3行第2列，设置对齐方式为“居中对齐”。插入“提交按钮”控件，并将其值修改为“立即登录”，如图6-22所示。⑫运行，即在浏览器中渲染，其效果如图6-17所示。任务6-2运用表单元素设计注册表1.任务分析为了控制页面的显示效果，使页面更加美观，可以使用表格控制表单项，此时需在网页文档中插入以下内容：(1)插入1个表单域。(2)在表单域中插入一个14行2列的表格，宽度为350像素，第1列宽为25%。(3)在表格中插入3个“文本”控件(用户名、扩展信息和回答)。(4)在表格中插入2个“密码”控件(密码和确认密码)。(5)在表格中插入1个“e-mail邮件”控件。(6)在表格中插入1个“选择”控件。(7)在表格中插入1个“单选按钮组”控件。(8)在表格中插入1个“复选按钮组”控件。(9)在表格中插入1个“日历”控件。(10)在表格中插入1个“文本区域”控件。(11)在表格中分别插入1个“提交”按钮控件和“重置”按钮控件。2.任务实施(1)创建并打开网页文档。(2)在Dw设计视图窗口单击“插入”面板中的“表单”按钮创建表单域。(3)在表单域中插入一个14行2列的表格，表格的“ID”设置为“table02”，“宽”设置为“350像素”，“边框粗细”设置为“0”，“单元格边距”设置为“5”，“单元格间距”设置为“0”。标题选中“顶部”，在“标题”文本框中输入“注册表单”，如图6-23所示。(4)单击“确定”按钮，效果如图6-24所示。(5)选中表格的第1列，在“属性”面板中设置“宽度”为25%。(6)选中表格的第1行，单击“修改”→“表格”→“合并单元格”菜单项，合并第1行单元格，并输入文字“基本信息(*为必填)”且左对齐。(7)在表格的第1列其他单元格中填入相应的文字，如图6-25所示。(8)鼠标放在“用户名”右边的单元格内，在“插入”面板的“表单”栏中选择“文本”选项，去掉其相应的文字。同样方法，在“扩展信息”和“回答”右边单元格内添加“文本”并去掉文字。(9)鼠标放在“密码”右边的单元格内，在“插入”面板的“表单”栏中选择“密码”选项，去掉其相应的文字。同样方法，在“确认密码”右边单元格内添加“密码”选项。(10)鼠标放在“e-mail”右边的单元格内，在“插入”面板的“表单”栏中选择“@电子邮件”，去掉相应的文字，效果如图6-26所示。(11)鼠标放在“安全提问”右边的单元格内，在“插入”面板的“表单”栏中选择“选择”选项，去掉其相应的文字。单击属性面板的“

”按钮，为该列表添加列表值，如图6-27所示。(12)鼠标放在“性别”右边的单元格内，在“插入”面板的“表单”栏中选择“单选按钮组”选项，弹出“单选按钮组”对话框，分别将标签文本修改为“男”和“女”，布局为“换行符”，并单击“确定”按钮。同时在代码视图中删除“男”和“女”间的<br/>标签，如图6-28所示。(13)鼠标放在“生日”右边的单元格内，在“插入”面板的“表单”栏中选择“日历”选项，插入日期控件，用于用户选择日期。(14)鼠标放在“爱好”右边的单元格内，在“插入”面板的“表单”栏中选择“复选按钮组”选项，弹出“复选按钮组”对话框，单击

添加标签至4个且分别将标签文本修改为“音乐”“篮球”“足球”和“徒步”，布局为“换行符”，并单击“确定”按钮。同时在代码视图中删除“<br/>标签，如图6-29所示。(15)鼠标放在“自我介绍”右边的单元格内，在“插入”面板的“表单”栏中选择“文本区域”选项，在“属性”面板中设置“Rows”为6，“Cols”为30，即6行30列的列表框。(16

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论