《表格框架表单》PPT课件.ppt

页面布局和数据提交,本节课程目标,表格使用表格的基本结构实现简单表格使用表格相关标签实现跨行、跨列的复杂表格使用表格相关设置进行美化修饰框架会使用框架结构实现多窗口展示页面表单使用表单的基本结构制作表单页面使用各种表单元素实现注册页面理解post和get两种提交方式的区别Dreamweaver工具的使用,本节考核目标,使用表格进行布局制作包含表单控件的网页会使用框架结构实现多窗口展示页面会使用表单的基本结构制作表单页面,布局标记-表格,会使用表格的基本结构实现简单表格会使用表格相关标签实现跨行、跨列的复杂表格会使用表格相关设置进行美化修饰,为什么使用表格,表格应用场合论坛门户网站购物网站,论坛中应用表格,门户网站应用表格,购物网站应用表格,HTML表格,行,列,表头/列标题,在HTML文档中使用表格来存放网页上的文本和图像,控制网页布局。,单元格,表格基本结构,边框,HTML表格,表格常用的属性,表格的基本语法,单元格内容,border用来设置表格边框尺寸大小,如何创建表格,移动 联通 铁通 IBM 惠普 华硕,查看源代码,什么是跨行跨列的表格,跨3列,跨3行,下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列?,跨多列的表格,学生成绩表 英语 数学 语文 95 98 89,COLSPAN=“n”属性表示跨多少列？,查看源代码,跨多行的表格,早上菜谱 食物 鸡蛋 饮料 牛奶 甜点 开心粉,rowspan=“n”属性表示跨多少行？,查看源代码,手机充值、IP卡 办公设备、文具 各种卡的总汇 铅笔 彩笔 打印 刻录,如何创建跨行跨列的表格,查看源代码,表 格 示 例,小结1,编写如下图所示效果对应的html代码,第一行第一个格子跨了2行,此格子跨了3列,练习答案,练习代码,什么是表格的美化修饰,根据理解,下面表格应该从哪些方面进行美化修饰？,如何设置表格的尺寸和边框,品牌商城 笔记本电脑 办公设备、文具、耗材 惠普 华硕 打印机 刻录盘,width用来设置表格的宽度height用来设置表格的高度,border用来设置表格边框尺寸大小,bordercolor用来设置表格边框颜色,查看源代码,如何设置背景,笔记本电脑 办公设备、文具、耗材,background属性用来设置表格的背景图片,bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝，下图就是RGB颜色对照表。,查看源代码,如何设置对其方式,笔记本电脑 办公设备、文具、耗材 惠普 华硕 打印机 刻录盘,align属性用来设置表格、行、列的对齐方式,查看源代码,为什么要使用填充属性,单元格里的内容太靠近边线，怎么办？,未填充的效果，字与单元格边框之间的距离靠得太近,什么是填充属性和间距属性,border(边框的厚度),cellpadding(单元格填充),cellspacing(单元格间距),如何使用填充、间距属性,border(边框的厚度),cellpadding(单元格填充),cellspacing(单元格间距),查看源代码,如何设置表格的填充属性,笔记本电脑 办公设备、文具、耗材.,cellspacing属性用来设置表格内框宽度 cellpadding属性用来设置表格内填充距离,查看源代码,填充之后的效果,小结2,表格的高度、宽度、背景图像、边框和填充属性,行的背景色,单元格居中对齐,练习答案,练习代码,编写如下图所示效果对应的HTML代码,如何实现图文内容的布局，达到如左图所示页面的效果？分析上图所示页面，应该用什么进行布局？,什么是表格布局,使用表格进行布局,用表格对网页的内容进行整体控制,如何使用表格进行布局,使用表格布局下图，需要几行几列？,需要7行2列,如何使用表格进行布局,超值变形金钢2.5折!人们为啥对电视吼叫,查看源代码,编写如下图所示效果对应的html代码,小结3,跨2行，并放了一副图片,此单元格放了一副图片,此单元格跨了3列,练习答案,练习代码,框架,广告栏顶部框架(top.htm),导航栏左侧框架(left.htm),详细内容页面右侧框架(main.htm),框架的边框,框架集页面(FrameSet.htm),框架使用场合,页面的一个固定部分显示徽标或静态信息,在另一个固定部分显示导航部分详细内容,在此处显示详细内容，页面中此部分是变化的。,HTML框架,Frameset决定如何划分Frame。cols属性表示按列分布Frame。rows属性表示按行分布Frame。Frame用 这个Tag设定网页。src属性值就是网页的路径和文件名。,框架的基本结构,框架页面的基本语法,边框尺寸大小,将窗口分割成左中右3个部分,可选,将窗口分割成上下2个部分,可选,第一个窗口要显示的网页,框架的基本结构,rows_cols框架,将窗口分割成上中下3部分,窗口边框的宽度,如果要在浏览器中创建左中右三个窗口,该如何实现？,查看源代码,每个窗口对应一个页面，以及一个框架集页面，总共需要几个HTML页面文件？,如何创建多个复杂的窗口,要实现如下图所示的窗口，该如何制作？,1、分成上下两个窗口2、把下面的窗口分成 左右两个窗口,top窗口,left窗口,right窗口,如何创建多个复杂的窗口,创建多个复杂的窗口实现步骤如下：1、创建一个HTML页面“top.html”2、创建一个HTML页面“left.html”3、创建一个HTML页面“right.html”,top.html效果图,left.html效果图,right.html效果,如何创建多个复杂的窗口,4、新建多框架HTML页面“Frame_Sets.html”,.,查看源代码,设置无框架边框,不显示滚动条,禁止调整框架大小,框架名称，便于超文本链接锚标签target属性所引用,如何设置窗口链接的显示位置,如果在同一个页面中，要实现在一个框架窗口中的超链接页面出现在另一个框架窗口中，如何实现？,演示示例2：不同框架之间超链接效果,使用target目标窗口属性,如何设置窗口链接的显示位置,target目标窗口属性name“显示的窗口名”,target属性指定了所链接的文件出现在名称为“窗口名”的框架窗口里。,target属性指定了所链接的文件出现在名称为“rightframe”的框架窗口里,演示示例3：使用target=“窗口名”,查看源代码,如何设置窗口链接的显示位置,target目标窗口属性四个特殊的窗口 显示在新窗口 显示在本窗口 显示在父窗口 显示在整个浏览器窗口,新启一个窗口打开文件“right.html”,演示示例4：使用四个特殊的窗口,HTML框架示例,小结4,top.html,left.html,right1.html或right2.html,frame_sets.html,练习答案,练习代码,编写如下图所示效果对应的html代码,总结,创建表格最少需要那三个标签？简述表格的基本结构。跨行跨列的表格，主要在什么情况下使用？给你一个表格，你会从哪些方面进行美化？框架使用场合如何创建多个复杂的窗口如何设置窗口链接的显示位置课后练习在页面上显示一表格，熟练运用标签（表格限制：3横4列，第一例跨3行）,表单,会使用表单的基本结构制作表单页面会使用各种表单元素实现注册页面能理解post和get两种提交方式的区别,表单,表单的典型应用注册用户收集信息反馈信息为网站提供搜索工具,注册用户,收集信息,反馈信息,提供搜索工具,HTML表单,表单允许客户端的用户以标准格式向服务器提交数据。表单的创建者为了收集所需数据，使用了各种控件设计表单如 INPUT 或 SELECT。查看表单的用户只需填充数据并单击提交按钮即可向服务器发送数据，服务器上的脚本会处理这些数据。,输入你的姓名:喜爱的冰淇淋口味:巧克力 草莓 香草,表单包含的控件,单行文本输入框(TEXT),单选按钮(RADIO),复选框(CHECKBOX),下拉列表(SELECT),重置按钮(RESET),提交按钮(SUBMIT),多行文本框(TEXTAREA),密码框(PASSWORD),Form表单标记,表单常用的属性,Input标记,buttoncheckboxfile,hiddenimage password,radioresetsubmit,text,表单包含的控件,单行文本输入框(TEXT),单选按钮(RADIO),复选框(CHECKBOX),下拉列表(SELECT),重置按钮(RESET),提交按钮(SUBMIT),多行文本框(TEXTAREA),密码框(PASSWORD),表单元素的统一格式,指定元素的类型，可为TEXT、RADIO、SUBMIT等,控件的名称,控件的初始值,控件的初始宽度,控件中输入的最多字符个数,控件是否被选中,Text文本框,文本框常用的属性,表单元素的逐一介绍,文本框基本语法,名字：,查看源代码,单行文本输入框，字符宽度为20,文本区的宽度,输入元素的默认值,文本输入框,Button按钮,按钮常用的属性,表单元素的逐一介绍,按钮基本语法,按钮名称,按钮类型可为button、submit,按钮上的标签,查看源代码,单击按钮，控件的值被重置为value属性中指定的初始值,Checkbox复选框,复选框常用的属性,表单元素的逐一介绍,复选框基本语法,复选框,复选框名,复选框值,聊天,查看源代码,设置此复选框被选中,RadioButton单选框,单选框常用的属性,表单元素的逐一介绍,单选按钮基本语法,初始值,单选按钮,默认选中,性别：男,查看源代码,设置此单选按钮被选中,Select下拉列表,下拉列表常用的属性,列表框基本语法,说明：size确定列表中可同时看到的行数。selected默认被选中的可选项。,表单元素的逐一介绍,查看源代码,出生日期：日,设置此输入框最多只能输入四个符号,设置“选择月份”选项默认被选中,表单元素的逐一介绍,密码框基本语法,密码区宽度,初始密码,密码框,密码：,查看源代码,密码框，22个字符宽度,表单元素的逐一介绍,按钮基本语法,按钮名称,按钮类型可为button、submit,按钮上的标签,查看源代码,单击按钮，控件的值被重置为value属性中指定的初始值,Hidden隐藏文本域,隐藏域常用的属性,Image图像域,图像域常用的属性,File文件上传,文件上传框常用的属性,文本框用输入控件input元素写在之间。说明：?：文本框的名字;*：text/password*：默认值;*：长度,基本结构，一组单选框每个单选框的name值一定要相同,复选框，type=checkbox表示使用复选框，checked表示被选择。,要成对出现。rows是行，cols是宽度，放在之间,下拉列表select元素，在select中填写option，包含若干个option,每个option有一个唯一的value值,表单标签中必须设置enctype=multipart/form-data来确保文件被正确编码,表单的传送方式必须设置成post。当需要上传文件时，输入控件类型为file。,HTML表单,小结1,编写如左图所示效果对应的html代码在网页设计中，表单的主要用途有哪些？,TEXT,PASSWORD,RADIO,TEXTAREA,SUBMIT,RESET,SELECT,CHECKBOX,练习答案,练习代码,Dreamweaver工具的使用,了解Dreamweaver特性熟悉Dreamweaver工作去区熟练使用Dreamweaver建立网站站点 掌握Dreamweaver进行网页编辑,网页设计的常用工具,网页设计软件 Dreamweaver是目前使用最多的网页设计软件。图像处理软件 制作网页图像的软件种类繁多，大多数网页设计人员选择的是Fireworks或Photoshop。动画制作软件 网页动画制作中最常用的软件非Flash莫属。,Dreamweaver特性,一款用于设计、开发网站和 Web 应用程序的专业HTML 编辑器 用户可以使用布局单元格或框架来设计页面的布局可用于创建文本、插入动态图像、提供网页超链接、创建 Flash 文本和 Flash 按钮等可用于组合由某些软件（如 Photoshop、ImageReady 和 Flash 等）制作的图形、动画和按钮,Dreamweaver最新版本V8.0是我们即将学习的主要工具,Dreamweaver概念,静态网页 只能浏览，不能实现客户端和服务器端的交流互动。动态网页 网站页面随用户的输入而变化，能与客户端交流互动。本地站点 在本地的计算机上，存储网站所有文件的临时文件夹。远程站点 位于远程Web 服务器上，与本地站点相对应。根文件夹 用于存储网站文件的本地根目录。,启动Dreamweaver,创建新项目,Dreamweaver工作区,浮动面板组,插入栏,文档工具栏,文档编辑区,属性标签,Dreamweaver插入栏,插入栏中的按钮可用于将对象（如表格、图层和图形等）轻松插入HTML页面中，其中经常使用的选项卡主要有,“常用”选项卡中的按钮可用于插入最常用的对象，如链接、表格、层、图像、媒体、日期、注释、模版、标签选择器等。,“布局”选项卡中的按钮主要用于设置网页的布局以及框架，还可以插入表格、层等。,“表单”选项卡中的按钮可用于插入HTML表单控件，比如文本字段、复选框、单选按钮、列表框、图片域、按钮等。,“文本”选项卡中的按钮可以将插入点定位到文档编辑区中，比如段落、块引用、标题、引号、以及各种符号的HTML文本。,Dreamweaver属性标签,属性标签是用来帮助编辑当前选择的页面元素属性的，包括页面属性和内容属性。,设置网页上文本的默认字体,设置网页上文本的字体样式,设置网页上文本的字体大小,设置网页上文本的字体颜色,设置网页上文本的对齐方式,设置网页内容的超级链接,调整页面设置，如标题、颜色和页边距等,Dreamweaver工作面板,面板是将常用功能组合在一起，方便用户操作。面板组是组合在一组标题下的多组相关面板。,比如“资源”面板，包括常用的功能有图片、颜色、flash、脚本、模版等。,比如“文件”面板下包括“文件”、“资源”、“代码片断”三个组。,站点的定义,Web 站点是一组具有共享属性（如相关主题、类似的设计或共同目的）的链接文档和资源。Dreamweaver 8 可以实现站点创建和管理，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。Dreamweaver 8的站点类型有三种本地站点远程站点测试站点,与Web站点相关的操作基本上有以下几个：,站点的基本操作,站点的规划,创建本地站点,管理本地站点,管理站点地图,站点的规划,站点规划是设计站点的必要前提。其操作是将不同的文件分类存放在文件夹中以便于设计者管理。合理地组织站点结构，可提高工作效率，加快对站点的设计。,记得还要根据规划绘制出一个网站结构草图呦，这样可以让你的站点结构思路更加清晰！比如,创建本地站点,创建本地站点，可以通过选择菜单项“站点”的“新建站点”来实现，步骤如下：为新建站点命名选择使用的服务器技术选择在本地机编辑本地副本的选项选择用于存储网站文件的文件夹选择存回取出共享文件,创建本地站点,新建本地站点完成后，继续新建站点下的文件夹，用于存储网站中分类的信息元素。,之后的新建文件也是这样完成的！,管理本地站点,管理本地站点，可以通过选择菜单项“站点”的“管理站点”来实现。其包括新建、编辑、复制、删除、导出、导入等功能，方便于对站点的管理。,管理站点地图,在使用站点地图查看站点时必须保证这个站点已定义了一个主页，因为主页是一个站点的根节点，必须有根节点才有各个支节点，也就是各个子页。,新建链接文件,简易登录网页制作,创建文件login.html,添加页面背景,浏览背景图片,添加背景图片“确认”后，再将图片添加到项目中,简易登录网页制作,配置表格相关属性,在表格中添加控件,简易登录网页制作,设置字体的属性：格式、字体、大小、颜色、位置等,简易登录网页制作,添加文本框,文本框,文本域,密码框,添加按钮,按钮控件的显示文本,按钮控件的提交动作,简易登录网页制作,小 结,Dreamweaver是目前使用最多的网页设计软件。Web 站点是一组具有共享属性的链接文档和资源。Dreamweaver 8 可以实现站点创建和管理。站点规划是设计站点的必要前提。只有规划好站点才可以开发出一套结构合理的网站。,回顾本课内容,表格使用表格的基本结构实现简单表格使用表格相关标签实现跨行、跨列的复杂表格使用表格相关设置进行美化修饰框架会使用框架结构实现多窗口展示页面表单使用表单的基本结构制作表单页面使用各种表单元素实现注册页面理解post和get两种提交方式的区别Dreamweaver工具的使用,课后作业,2 在页面上显示一表格，熟练运用标签（表格限制：3横4列，第一例跨3行）,