网页设计与制作项目教程项目6-“千年之恋”注册页课件

项目6“千年之恋”注册页面制作表格样式的控制表单样式的控制表格的创建表单的相关标记HTML项目6“千年之恋”注册页面制作 表格样式的控制 表格的创学习目标理解表格的创建1 1熟悉表单样式的控制4 42 2掌握表格样式的控制理解掌握熟悉掌握3 3掌握表单相关标记学习目标理解表格的创建1熟悉表单样42掌握表格样式的控制理解目录CSS控制表格样式点击查看本小节知识架构认识表单点击查看本小节知识架构【任务任务6-16-1】认识表格相关标记点击查看本小节知识架构【任务任务6-26-2】【任务任务6-36-3】表单控件点击查看本小节知识架构CSS控制表单样式点击查看本小节知识架构【任务任务6-46-4】【任务任务6-56-5】目录CSS控制表格样式点击查看本小节知识架构认识表单目录制作头部及导航模块制作banner及内容模块【任务任务6-66-6】布局及定义基础样式【任务任务6-76-7】【任务任务6-86-8】制作页脚模块【任务任务6-96-9】目录制作头部及导航模块制作banner及内容模块【任务6在网页制作中，表格起着重要的作用，除了用来对齐数据之外，更多的用来进行网页排版，使一些数据信息更容易浏览，因此表格在页面布局中的应用非常广泛。下面，将针对表格的相关标记进行详细讲解。【任务6-1】认识表格相关标记在网页制作中，表格起着重要的作用，除了用来对齐数据之外，更多表格是怎样形成的？表格是怎样形成的？说到说到表格表格，其实其实大家并不陌生大家并不陌生课程表网上购物查票【任务6-1】认识表格相关标记表格是怎样形成的？说到表格，其实大家并不陌生课程表网上购物查定义一个表格定义表格中的一行，嵌套在中定义表格中的单元格，嵌套在中创建table表格，离不开以下3对标签:表格的创建1.【任务6-1】认识表格相关标记标记有很多常用属性，具体如下表所示。标记的属性2.【任务6-1】认识表格相关标记标记有很多常用属性，具体如下表所示。tabl标记的属性在实体表格中的表现如下图所示：widthheightbordercellspacingcellspadding标记的属性2.【任务6-1】认识表格相关标记标记的属性在实体表格中的表现如下图所示：wid标记有很多常用属性，具体如下表所示。标记的属性3.【任务6-1】认识表格相关标记标记有很多常用属性，具体如下表所示。标记的属学习的属性时需要注意以下几点：标记无宽度属性width，其宽度取决于表格标记。虽然可以对标记应用background属性，但是在标记中此属性兼容问题严重。对标记应用valign属性，用于设置一行内容的垂直对齐方式。对于标记的属性了解即可，均可用相应的CSS样式属性替代。ABCD标记的属性3.【任务6-1】认识表格相关标记学习的属性时需要注意以下几点：标记无宽度属性标记有很多常用属性，具体如下表所示。标记的属性4.【任务6-1】认识表格相关标记标记有很多常用属性，具体如下表所示。标记的属学习的属性时需要注意以下几点：在标记的属性中，重点掌握colspan和rolspan，其他的属性了解即可，不建议使用，均可用CSS样式属性替代。当对某一个标记应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。当对某一个标记应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。ABC标记的属性4.【任务6-1】认识表格相关标记学习的属性时需要注意以下几点：在标记的属性中表头表头标记用来设置表头，其文本默认加粗居中显示。标记的属性5.【任务6-1】认识表格相关标记表头表头标记用来设置表头，其文本默认加粗居在网页制作中，表格起着重要的作用，除了用来对齐数据之外，更多的用来进行网页排版，使一些数据信息更容易浏览，因此表格在页面布局中的应用非常广泛。下面，将针对表格的相关标记进行详细讲解。【任务6-2】CSS控制表格样式在网页制作中，表格起着重要的作用，除了用来对齐数据之外，更多以日历日历为例，分析CSS控制表格样式控制表格样式日历的边框border日历的单元格边距paddingheightwidthCSS控制表格边框1.【任务6-2】CSS控制表格样式以日历为例，分析CSS控制表格样式日历的边框border日历CSS代码如下所示：tablewidth:280px;height:280px;border:1px solid#F00;/*设置设置table的边框的边框*/td,th border:1px solid#F00;/*为单元格单独设置边框为单元格单独设置边框*/在设置表格的边框时，也要给单元格设置相应的边框。CSS控制表格边框1.【任务6-2】CSS控制表格样式CSS代码如下所示：table在设置表格的边框时，也要给单CSS代码如下所示：tdpadding:20px;对单元格标记应用padding属性。【结论】设置单元格内容与边框之间的距离，可以对标记应用内边距样式属性padding，或对标记应用HTML标记属性cellpadding。CSS控制单元格边距2.【任务6-2】CSS控制表格样式CSS代码如下所示：td对单元格标记应用paddi学习CSS控制单元格边距时需要注意以下几点：行标记无内边距属性padding和外边距属性margin。外边距属性margin对单元格无效，要想设置相邻单元格边框之间的距离，只能对标记应用HTML标记属性cellspacing。ABCSS控制单元格边距2.【任务6-2】CSS控制表格样式学习CSS控制单元格边距时需要注意以下几点：行标记无CSS代码如下所示：tdwidth:20px;Height:20px;对单元格标记应用width和height属性。【结论】对同一行中的单元格定义不同的高度，或对同一列中的单元格定义不同的宽度时，最终的宽度或高度将取其中的较大者。CSS控制单元格的宽高3.【任务6-2】CSS控制表格样式CSS代码如下所示：td对单元格标记应用width表单可以用来收集用户在客户端提交的各种信息，例如用户在网站上提交的的登录和注册信息，就是通过表单作为载体传递给服务器的，可以说表单是用户和浏览器交互的重要媒介。下面，将针对表单的相关知识进行详细讲解。【任务6-3】认识表单表单可以用来收集用户在客户端提交的各种信息，例如用户在网站上什么是表单？什么是表单？【任务6-3】认识表单什么是表单？【任务6-想想表单的主要功能想想表单的主要功能互联网时代互联网时代表单表单很常见很常见登录快递查询电商注册【任务6-3】认识表单想想表单的主要功能互联网时代表单很常见登录快递查询电商注册 以电商注册页面为例，分析表单。提示信息表单域表单控件初识表单1.【任务6-3】认识表单以电商注册页面为例，分析表单。提示信息表单域表单控件初识表单一个表单中通常需要包含一些说明性的文字，提示用户进行填写和操作。相当于一个容器，用来容纳所有的表单控件和提示信息。包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。提示信息表单控件表单域初识表单1.【任务6-3】认识表单一个表单中通常需要包含一些说明性的文字，提示用户进行填写和操要想让表单中的数据传送给后台服务器，就必须定义表单域。在HTML中，标记被用于定义表单域。各种表单控件【结论】与之间的表单控件是由用户自定义的，action、method和name为表单标记的常用属性。创建表单2.【任务6-3】认识表单要想让表单中的数据传送给后台服务器，就必须定义表单域。在HTaction属性用于指定接收并处理表单数据的服务器程序的url地址。用于设置表单数据的提交方式，其取值为get或post。actionmethodnamename属性用于指定表单的名称，以区分同一个页面中的多个表单。创建表单2.【任务6-3】认识表单action属性用于指定接收并处理表单数据的服务器程序的ur学习创建表单时需要注意以下几点：method提交方式中，get提交的数据将显示在浏览器的地址栏中，保密性差且有数据量的限制。而post方式的保密性好，并且无数据量的限制，使用method=post可以大量的提交数据。标记的属性并不会直接影响表单的显示效果。要想让一个表单有意义，就必须在与之间添加相应表单控件。AB创建表单2.【任务6-3】认识表单学习创建表单时需要注意以下几点：method提交方式中，ge表单控件为表单的核心内容，不同的表单控件具有不同的功能，如密码输入框、文本域、下拉列表、复选框等，只有掌握了这些控件的使用方法才能正确的创建表单。下面，将针对表单控件的相关知识进行详细讲解。【任务6-4】表单控件表单控件为表单的核心内容，不同的表单控件具有不同的功能，如密什么是表单控件？什么是表单控件？【任务6-4】表单控件什么是表单控件？【任务6-你了解这些表单控件？你了解这些表单控件？表单控件表单控件常用在常用在登录和注册模块登录和注册模块【任务6-4】表单控件你了解这些表单控件？表单控件常用在登录和注册模块 浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等，要想定义这些元素就需要使用input控件。input控件1.【任务6-4】表单控件浏览网页时经常会看到单行文本输入框、单选按钮、复选框、提交按input控件1.【任务6-4】表单控件input控件1.【任务6单行文本输入框密码输入框单选按钮用来输入简短的信息，常用的属性有name、value、maxlength。密码输入框用来输入密码，其内容将以圆点的形式显示。用于单项选择，如选择性别、是否操作等。复选框普通按钮提交按钮用于多项选择，可对其应用checked属性，指定默认选中项。常常配合javaScript脚本语言使用，初学者了解即可。可以对其应用value属性，改变提交按钮上的默认文本。input控件1.【任务6-4】表单控件单行文本输入框密码输入框单选按钮input type=t标记使用，以扩大控件的选择范围，从而提供更好的用户体验。例如：在选择性别时，希望单击提示文字“男”或者“女”也可以选中相应的单选按钮。男input控件1.【任务6-4】表单控件标记使用，以扩大控件的选择范围，从而提供更好的textarea控件可以创建多行文本输入框。基本语法格式文本内容textarea控件2.【任务6-4】表单控件textarea控件可以创建多行文本输入框。基本语法格式t学习textarea控件时需要注意以下几点：各浏览器对cols和rows属性的理解不同，当对textarea控件应用cols和rows属性时，多行文本输入框在各浏览器中的显示效果可能会有差异。所以在实际工作中，更常用的方法是使用CSS的width和height属性来定义多行文本输入框的宽高。textarea控件2.【任务6-4】表单控件学习textarea控件时需要注意以下几点：各浏览器对col浏览网页时，经常会看到包含多个选项的下拉菜单。select控件3.【任务6-4】表单控件浏览网页时，经常会看到包含多个选项的下拉菜单。select控基本语法格式选项1选项2选项3.使用select控件定义下拉菜单的基本语法格式如下：select控件3.【任务6-4】表单控件基本语法格式 使用select控件定义下拉菜和标记属性select控件3.【任务6-4】表单控件和标记属性select控件3在实际网页制作过程中，有时候需要对下拉菜单中的选项进行分组，这样当存在很多选项时，要想找到相应的选项就会更加容易。例如：select控件3.【任务6-4】表单控件在实际网页制作过程中，有时候需要对下拉菜单中的选项进行分组，因此在网页设计时，使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距下面，将针对CSS控制表单控件的相关知识进行详细讲解。【任务6-5】CSS控制表单样式因此在网页设计时，使用CSS可以轻松地控制表单控件的样式，主使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距等。CSS控制表单样式1.【任务6-5】CSS控制表单样式使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控由于form是块元素，重置浏览器的默认样式时，需要清除其内边距padding和外边距margin使用标记定义各种按钮时，通常需要清除其边框通常情况下需要对文本框和密码框设置2到3像素的内边距，以使用户输入的内容不会紧贴输入框123CSS控制表单样式1.【任务6-5】CSS控制表单样式由于form是块元素，重置浏览器的默认样式时，需要清除其内边网站项目”千年之恋”注册页面制作该怎样开发一个网站项目呢？“千年之恋”注册页面制作网站项目”千年之恋”注册页面制作该怎样开发一个“千年之恋”注【任务6-6】布局及定义基础样式 【任务6-6】拿到效果图后的准备工作对页面进行布局，并添加CSS样式。定义基础样式【任务6-6】布局及定义基础样式p建立站点p切图准备工作效果分析拿到效果图后的准备工作对页面进行布局，并添加CSS样式。定义准备工作建立站点1.创建网站根目录新建站点站点建立完成在根目录下新建文件step1step2step3step4【任务6-6】布局及定义基础样式准备工作建立站点1.创建网站根目录新建站点站点建立完成在根1.【任务6-6】布局及定义基础样式使用AdobeFireworksCS6的切片工具，导出“千年之恋”注册页中的素材图片，存储在站点中的images文件夹中。准备工作切图1.【任务6-6】效果分析2.HTML结构分析CSS样式分析页面中的各个模块居中显示，宽度为980px，因此，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，字体为14px，a链接访问前和访问后的字体大小为16px，文字颜色为#fff，这些可以通过CSS公共样式进行定义。“千年之恋”注册页面从上到下可以分为5个模块。【任务6-6】布局及定义基础样式效果分析2.HTML 结构分析CSS页面中的各个模块居中效果分析2.“千年之恋”注册页面从上到下可以分为5个模块。【任务6-6】布局及定义基础样式效果分析2.“千年之恋”注册页面从上到下可以分为5个模块。定义基础样式3.【任务6-6】布局及定义基础样式/*重置浏览器的默认样式*/*margin:0;padding:0;list-style:none;outline:none;border:0;background:none;/*全局控制*/bodyfont-family:微软雅黑;font-size:14px;a:link,a:visited text-decoration:none;color:#fff;font-size:16px;定义基础样式3.【制作头部及导航模块1.效果图如下所示：【任务6-7】制作头部及导航模块制作头部及导航模块1.效果图如下所示：【任务6-7】制作制作banner及内容模块1.效果图如下所示：【任务6-8】制作banner及内容模块制作banner及内容模块1.效果图如下所示：【任务6-8】制作页脚模块1.效果图如下所示：【任务6-9】制作页脚模块制作页脚模块1.效果图如下所示：【任务6-9】制作页脚模块【项目总结】1.建议读者在制作项目前先理解表格的创建方法，掌握表格样式的控制，掌握表单相关标记，熟悉表单样式的控制。2.input控件属于行内元素，但可以对其设置宽高和对齐属性，有些资料称其为行内块元素。3.编辑代码过程中，需整体把控页面的结构，每完成一部分需通过浏览器检测，测试通过后再进行下面的部分。【项目总结】建议读者在制作项目前先理解表格的创建方法，掌握表网页设计与制作项目教程项目6-“千年之恋”注册页课件