网页设计基础元素.ppt

《网页设计基础元素.ppt》由会员分享，可在线阅读，更多相关《网页设计基础元素.ppt（22页珍藏版）》请在三一办公上搜索。

1、网页设计基础,中国矿业大学管理学院 张召浦,中国矿业大学 管理学院,1,Chapter 2 HTML 4.01,HTML 4.01,中国矿业大学 管理学院,2,2.3.8 表格,HTML 4.01,的分析结果红色代表和表格相关的标签，可以看出这个网站中使用最多的标签就是和表格相关的标签。事实上，表格往往是以前的网站进行布局时最重要的容器。,中国矿业大学 管理学院,3,2.3.8 表格,HTML 4.01,table相关的标签,中国矿业大学 管理学院,4,2.3.8 表格,HTML 4.01,中国矿业大学 管理学院,5,2.3.8 表格,HTML 4.01,表格使用标签进行定义。表格被拆分成多个

2、行(使用标签)，每行被分成多个单元格(使用标签)。Td 代表 table data，代表数据单元格中的内容。单元格中可以包含文本、图像、列表、段落、表单、水平线，甚至是表格等，常常用作页面布局时的容器。的属性align：不设置该属性，则表格居左显示width：宽度，可以是百分比或象素值border：不设置该属性，则表格无边框background,bgcolorcellspacing,cellpaddingbordercolor,bordercolordark,bordercolorlightsummary：HTML表格的摘要,中国矿业大学 管理学院,6,2.3.8 表格,HTML 4.01,b

3、order,cellspacing,cellpadding,中国矿业大学 管理学院,7,2.3.8 表格,HTML 4.01,属性align,valign：水平和竖直两个方向上的对齐设置；height：行的宽度是自动填充整个表格，故无width属性，只有行高属性；bgcolor,bordercolor,bordercolordark,bordercolorlight：没有background属性，故无法为某行设置背景图片；注意：行是单元格的容器，故行属性的设置基本上都是应用于该行内的所有单元格的。,中国矿业大学 管理学院,8,2.3.8 表格,HTML 4.01,属性align,valignw

4、idth,heightbackground,bgcolorbordercolor,bordercolordark,bordercolorlightnowrap：单元格是否自动换行，布尔属性colspan,rowspan：列和行的跨度，合并单元格时使用注意：td也是一个容器；为了更好地显示单元格的边框，在单元格数据为空时，需要将单元格数据设置为。,中国矿业大学 管理学院,9,2.3.8 表格,HTML 4.01,thead,tbody,tfoottbody与thead和tfoot在表格中形成三个“块”，thead指明表格的题头部分，tfoot指明表格的脚注部分，而tbody则指明表格的主体部分一

5、个表格中只能有一个thead和tfoot无论如何指定thead,tbody,tfoot的顺序，显示顺序都按照thead,tbody和tfoot的顺序排列thead中通常使用标签替代标签caption指定HTML表格的标题默认情况下，浏览器显示表格标题在表格的上方。可以通过align属性进行指定,中国矿业大学 管理学院,10,2.3.8 表格,HTML 4.01,旅行费用报表餐费住宿交通8月1日802001008月2日60120150小计140320250,中国矿业大学 管理学院,11,2.3.9 表单,HTML 4.01,HTML表单用以满足不同类型的用户输入。表单是包含表单元素的区域，可以看

6、作是表单元素的容器，表单元素包含在和之间。表单元素是指表单中允许用户键入信息的元素（如文本框、文本域、下拉菜单、单选按钮、复选框等）。表单它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的区域、提交和重填按钮等内容。,中国矿业大学 管理学院,12,2.3.9 表单,HTML 4.01,input最主要的表单元素标签，控件类型由指定的type属性确定，常用input类型有：文本框：密码框：按钮：提交按钮：重值按钮：复选按钮：单选按钮：文件浏览：图片域：隐藏域：,中国矿业大学 管理学院,13,2.3.9 表单,HTML 4.01,input的相关属性type属性：决定控件类型

7、，共10种类型name与value：name属性的属性值区分大小写对不同控件具有不同的作用acceskey：设置访问表单元素的快捷键在运行时使用“Alt+属性值设置的键”访问表单元素size与maxlength：可见字符数与可输入字符数只对text和password有效checked、disabled、readonly：选中、不可用、只读三个均为布尔属性使用范围不同,中国矿业大学 管理学院,14,2.3.9 表单,HTML 4.01,中国矿业大学 管理学院,15,2.3.9 表单,HTML 4.01,select：列表/菜单三种可能的控件样式列表/菜单项目使用标记标识，标签有一个selecte

8、d属性，用于确定该选项是否被选中，如选项1主要属性：size和multipletextarea：多行文本域主要属性：rows和cols：确定文本域的尺寸wrap：控制自动换行，off|soft|hard|virtual|physical,中国矿业大学 管理学院,16,2.3.9 表单,HTML 4.01,选项1选项2选项3选项4选项5要显示的预设文本,中国矿业大学 管理学院,17,2.3.9 表单,HTML 4.01,form的属性填好表单后，当用户单击“提交”按钮时，用户键入的表单信息将被发送到另外一个文件，表单的action属性即用来定义要发送到的目标文件名，该文件通常会对用户键入的内容进

9、行相关的处理。form的method属性指定发送表单信息的方法，可能的取值是get和post。,用户名:,中国矿业大学 管理学院,18,2.3.10 框架,HTML 4.01,使用框架集(frameset)，可以将多个页面显示在一个浏览器窗口中，其中的每个页面都被叫做框架(frame)，每个框架都与其它的框架相互独立。使用框架集可能带来的问题：开发人员可能需要在不同页面之间进行导航，增加了开发的难度一次打印所有文档中的内容比较困难三个HTML元素：frameset：定义框架集frame：定义框架页面noframes：如果浏览器不支持框架时显示的内容,中国矿业大学 管理学院,19,2.3.10

10、框架,HTML 4.01,frameset标签定义如何将浏览器窗口拆分为多个框架属性rows&cols：如何行分框架还是列分框架，取值示例：“80,*”、“20%,*,20%”frameborder：框架之间是否有边框，取值：1(yes)或0(no)border与bordercolorframename：在框架中导航时该属性非常重要scrolling：框架页面是否有滚动条，auto|yes|nonoresize：布尔属性，框架页面大小是否可以调整src：指定框架要加载的页面地址,中国矿业大学 管理学院,20,2.3.10 框架,HTML 4.01,noframes若浏览器不支持框架，使用该元素定义要显示在页面上的内容,scrolling=no noresize=noresize src=top.htm此网页使用了框架，但您的浏览器不支持框架。,中国矿业大学 管理学院,21,2.3.11 其它元素,议题在网页中插入字幕（跑马灯）marquee网页中的多媒体 embed地图与热区 map与area页中页 iframe,