1、实用页面设计方法HTML,第一章： HTML简介,目标:本章旨在向学员简要介绍HTML的相关概念、基本结构，学员应该掌握如下知识：1）了解HTML的概念2）了解HTML的基本结构3）理解HTML的标记、属性,1.1 HTML概念,HTML超文本标记语言（Hyper Text Markup Language）以htm或者html为扩展名包含标记的文本文件通过浏览器解析标记来显示页面HTML的编辑器简单文本编辑器即可，可在纯文本中编写代码常用编辑器-Dream Weaver、FrontPage、EditPlus等,1.2 基本结构 重点,HTML文件通常由文档头、正文两部分构成；在外层以标识为Ht
2、ml文件：,欢迎进入HTML世界体验网页的魅力！,HTML 部分文档头部分正文部分,1.3 第一个网页-解释执行,FirstPage.html第一个网页你好!开始学习做网页了，一定要加油啊！,1.4 标记,HTML文档是由HTML标记及内容组成的文本文件HTML标记的组成通常成对出现，在开始标记和结束标记之间的文本是内容大小写无关，和表示的意思是一样的,1.5 标记的属性,标记的属性属性为页面上的HTML元素提供附加信息，如：属性通常以 name=“value” 对出现，写在起始标记中；一个标记可以有多个属性属性值应该被包含在引号中，常用双引号。可嵌套使用单引号,第二章： 基本标记,目标:本章
3、旨在向学员简要介绍HTML的各种常用标记，学员应该掌握如下知识：1）使用各种基本标记完成简单页面,2.1 行控制,布局浏览器解析HTML页面时，忽略源代码中多余的空格、空行等，如line.html如果我们需要给文字设置换行样式，需要使用特定的标记,2.1 行控制-无换行-示例,2.1.1 行控制-p,段落： （记住这个标签）将标记间的文字置为一个新的段落可以设置以下属性示例newline.html,2.1.1 行控制-p-示例,2.1.2 行控制-br、nobr,换行：newlinebr.html强制进行换行操作（记住）不换行：禁止标记中间的文本换行nonewline.html建议换行：将此标
4、记加在建议换行的位置如：页面中显示网址，一般不会在网址字符串中间换行，加此标记后可能会换行示例wbr.html,2.1.2 行控制-br-示例,2.1.2 行控制-nobr-示例,2.2 文字分区-div,分区： div.html把标记中的内容做为单独的一块处理可设置以下属性也类似,2.2文字分区-div-示例,2.3 预设格式文本-pre,预设格式文本：HTML在显示时一般会吃掉过多的空白字符（只显示一个）和换行符（不显示），但我们可以用和让空白字符、换行字符保存下来常用于计算机程序的表达pre.html,2.3 预设格式文本-pre-示例,2.4 字体-font,字体： font.html
5、还有basefont标记可以设置页面的默认字体，通常放在head标记中可设置以下属性,2.4 字体-font-示例,font.htmlHello world!Hello world!Hello world!Hello world!Hello world!Hello world!今天天气今天天气真好!,2.5 标题字体-hn,标题字体： headattr.htmln的取值由1到6，h1最大显示黑体字，并自动插入空行可以设置如下属性：,2.5 标题字体-hn-示例,2.6 物理字体,物理字体（固定效果）： phystyle.html设置字体显示样式，主要有以下标记：,2.6 物理字体-示例,2.7
6、 逻辑字体（一）,逻辑字体（与浏览器相关）：表现文字含义，主要有以下标记：,2.7 逻辑字体（二）,逻辑字体： logstyle.html续：,2.7 逻辑字体-示例,2.8 水平线-hr,水平线： hr.html用于分割同一文本的不同部分可以设置如下属性：,2.9 居中-center、注释,居中：设置标记中的文本或者图像居中显示注释： hr.html浏览器中不显示注释内容,2.10 文字移动-marquee,移动：（记住这个标签）设置标记中的文本移动marquee.html可以设置如下属性：,2.10 文字移动-marquee-示例,啦啦啦，我从右向左移动！啦啦啦，我从左向右移动！啦啦啦，我
7、只走一次就休息了！啦啦啦，我一圈一圈绕着走！啦啦啦，我来回走！啦啦啦，我scroll只走3趟！啦啦啦，我slide只走3趟！啦啦啦，我alternate只走3趟！,2.11 列表,列表：用于列举内容列表分类无序列表（unordered list）有序列表（ordered list）定义列表（definition list）,2.11.1 无序列表-ul,无序列表：列表项以标识ulist.html可以设置如下属性：,2.11.1 无序列表-ul-示例,CoffeeTeaMilkCoffeeTeaMilkCoffeeTeaMilk,2.11.2 有序列表-ol,有序列表：列表项以标识olist.h
8、tml每一项显示时都有编号可以设置如下属性：,2.11.2 有序列表-ol-示例,CoffeeTeaMilkCoffeeTeaMilkCoffeeTeaMilk,2.11.3 定义列表-dl,定义列表：对某对象的解释dlist.html定义标题定义内容,2.11.3 定义列表-dl-示例,An Definition List:CoffeeBlank hot drinkMilkwhite cold drink,2.11.4 嵌套列表-示例,2.12 超链接-a,超链接：（重点）山东电力集团公司可以设置如下属性：anchor.html,2.12 超链接-a-示例,无序列表的示例这是链接到相对URL
9、。 山东电力集团公司这是链接到Internet中的资源。,2.12 超链接-a-链接到指定位置,链接到指定位置：到底部需要先有标记位置：底部npnameda.html,2.12 超链接-a-指向标记位置-示例（一）,2.12 超链接-a-指向标记位置-示例（二）,2.12 超链接-a-发送电子邮件,发送电子邮件：发邮件给Raymondmailto.html,2.13 文档主体-body,文档主体： body.html所有要显示的页面元素都包含在body内主要属性如下：bodyattr.html、bodylink.html,2.13 文档主体-body-示例（一）,2.13 文档主体-body-
10、示例（二）,2.13 文档主体-body-示例（三）,注意：从IE的Internet选项中“清除历史记录”，才能看到蓝色情况；,2.14 图像-img,图像： image.html、imagealign.html引入图像 imageborder.html、imagelink.html可以设置如下属性： html/test_img.html,2.14 图像-img-示例（一）,2.14 图像-img-示例（二）,当设置 align为left或right时，图片和内容会显示在一行；如果让其它内容换行，可以使用,2.14 图像-img-示例（三）,2.14 图像-img-示例（四）,2.15 字符实
11、体,字符实体：有些字符，如”、 ” ，在HTML页面中显示为 ,2.15 常用的实体（一）,实体-无间断空格： entities.html在HTML中，最常见的字符实体就是不可拆分空格通常，HTML会合并你文档中的空格。如果在你的HTML文本中连续输入了10个空格，其中的9个会被去掉。想要在HTML文档中插入空格，可以使用实体 ,2.15 常用的实体（二）,2.15 实体-示例,2.16 HTML基本标记练习,参照我给出的图片，使用刚刚学过的基本标记来实现页面（说明：只实现大概样式即可，字体/颜色等可以不完全一致）练习一：exercise_1.html,第三章： 表格,目标:本章旨在向学员简要
12、介绍表格标记的使用，学员应该掌握如下知识：1）可以在HTML页面中插入表格2）能够做出不同样式的表格，能够合并多行、多列,3.1 表格,table用表格显示内容，整洁有序；可以单独设置背景及颜色等表的布局,3.1 表格,Table （重点）基本构成,3.2 table属性,表格：table可以设置如下属性table_sample.html,3.2 表格-table-示例, 电信学院学生名单 姓名 性别 专业 李向阳 男 电子工程,3.3 caption属性,标题：caption可以设置如下属性,3.4 tr属性,表格行：tr可以设置如下属性,3.5 td属性 重点,单元格：td可以设置如下属性
13、table_col.html,3.5 单元格-td-示例,NameTelephone为空Bill Gates555 77 854555 77 855,3.6 注意,一般情况下，每个行的单元格数量要相等没有任何内容的单元格，必须进行特殊处理高度要设置到表格的第一列单元格上，宽度要设置到表格的第一行单元格上在之间不要出现不必要的空白符、换行符等建议与写在一行里，不要换行,3.7 表格练习,Table标记练习练习一：按照biaogelianxi.html的效果制作一个表格要求： 1、大表格是8行1列； 2、第3行第1列中嵌套一个表格为1行9列； 3、第5行第1列中嵌套一个表格为4行2列；,第四章：
14、表单 （了解）,目标:本章旨在向学员简要介绍表单的使用，学员应该掌握如下知识：1）在页面中使用表单2）可以使用各种input标记和其它域标记,4.1 表单,表单表单是一个包含表单元素的区域在WEB页面内创建用户控件，收集用户的输入是实现交互功能的主要方式，用户一般通过form向CGI、ASP、JSP程序提交信息,4.2 表单提交,表单提交：表单中的控件以名称-值对使用表单与某个程序的URL关联，程序来处理表单提交的数据当用户提交表单时，表单中有效元素的名称和值以一定格式传递给指定的URL如：name1=value1&name2=value2&nameN=valueN,4.3 表单标记及属性,表
15、单标记：为数据输入的元素创建一块区域，并指定数据提交到哪个URL中主要有以下属性： form.html,4.3 表单-form-示例,4.4 表单域标记,表单域标记：使用input标记，根据不同的type属性来区分不同的控件input主要有以下属性：,4.4 表单域标记的属性,4.4.1 文本控件,文本控件：type的值为 text、password其他属性： input.html另：text与password的size不一样长，可以设置如下属性：style=“width:100px”,4.4.1 文本控件-示例,4.4.2 按钮,按钮控件：功能：提交/重置表单、触发javascript代码等
16、属性说明：提交按钮-submit重置按钮-reset,4.4.2 按钮-button,按钮控件-buttonimage_button.htmltype可以为submit和reset可以使用任意的html标记做为按钮的内容功能：同前使用：Html标记如：,4.4.3 复选框,复选框控件： checkbox.htmltype的值为 checkbox在一组预定义的选项中选择提交时只提交被选中的选项的name和value；当有多个选项同名时，提交数组到后台（checkbox2.html）属性说明：,4.4.3 复选框-示例,4.4.4 单选按钮,单选按钮控件： radio.htmltype的值为 ra
17、dio在预定义的组选项中选择一个选项相同名字的单选按钮为一组属性说明：,4.4.4 单选按钮-示例,4.4.5 文件上载控件,文件上载控件： file.htmltype的值为 file在页面中显示为文件名称框和浏览按钮注意：在form标记中要设置属性 enctype=multipart/form-data method=“post属性说明：,4.4.5 文件上载控件-示例,4.4.6 隐藏域,隐藏域控件： hidden.htmltype的值为 hidden在页面中不显示，功能：a、跟踪用户b、为服务器端程序提供预定义的输入c、在动态生成的页面中存储上下文相关的信息属性说明：使用：,4.5 文本
18、区域,文本区域控件：可以输入多行文本，标记间的内容就是显示出来的内容，包括空格、空行；属性说明： textarea.html,4.5 文本区域-示例,4.6 选择域,选择域控件：或者叫选择区域、下拉列表框提交时提交选中的option的value需要有选项，使用标记select标记属性说明： style=width:200,4.6 选择域-option,选项： 为选择域提供选项option属性说明： select.html、selectsize.html,4.6 选择域-示例一,4.6 选择域-示例二,4.6 选择域-optgroup,选项分组： 将选项分组optgroup.html属性说明：,
19、4.6 选择域-示例三, Java C C+ ,4.7 域容器,域容器：将一组域放置在一起fieldset.html使用style属性设置宽度：style=“width:200”可以设置小标题：小标题,4.7 域容器-示例,个人信息姓名:密码: E-mail: ,第五章： 框架 （清楚）,目标:本章旨在向学员简要介绍frame标记的使用，通过本课的学习，学员应该掌握如下知识：1）可以使用框架实现页面结构,5.1 框架,框架（frame）在一个浏览器窗口中显示多个HTML文档，每个区域都可以显示独立、可滚动的页面当将浏览器的画面分割为多个窗口后，各窗口可以扮演不同的功能缺点：网站开发者需要考虑更
20、多的HTML文档的情况打印整个页面不容易实现,5.2 认识框架-frame_sample.html,5.3 框架结构,框架的基本结构，主要使用和来定义标记定义窗口框架，代替标记标记定义窗口框架中的子窗口,5.4 框架分割方式,框架的分割方式水平分割和垂直分割通过标记中的rows和cols属性设置复杂的混合框架（嵌套）,5.5 frameset设置,frameset的设置每个frameset标记定义一组行和列行/列的属性值指明其在屏幕上所占的大小,5.5 frameset属性,frameset可以设置如下属性,5.5.1 rows/cols值说明,rows/cols的值说明属性值可以使用数字、百
21、分比、剩余值及三种方式的混合数字：表示所占的像素数百分比“%”：表示子窗口的高度/宽度占浏览器窗口高度/宽度的百分比剩余值“*”：表示所有定值窗口设定之后的剩余部分,5.5.2 frameset-示例,frame_sample.html 您的浏览器不支持框架显示! ,5.5.3 frameset-示例-链接,frame_link.html 链接页面 春晓 春望,5.6 frame设置,frame的设置每个frame标记定义框架中放入的文件frame是单向标记，在frameset的开闭标记之间,5.6 frame属性,frame可以设置如下属性frame_set.html,5.6 frame-示
22、例,frame_set.html ,5.7 iframe,Iframe元素文档中的文档成对出现，以开始、结束；使用frames集合读写iframe中的元素sColor = document.frames(“sFrameName”).document.body.style.backgroundColor;获取iframe中的body的背景颜色使用document.all获取iframe对象的属性sBorderValue = document.all.second.getAttribute(frameborder);,5.7 iframe属性,Iframe常用属性： iframe.html,HTML基本标记表格表单框架,总结,术语,谢谢,
