东软html培训课件.ppt

实用页面设计方法HTML,课程结构,第一章：HTML简介,学时：0.5学时教学方法：讲授ppt课堂演示,目标:本章旨在向学员简要介绍HTML的相关概念、基本结构，学员应该掌握如下知识：1）了解HTML的概念2）了解HTML的基本结构3）理解HTML的标记、属性,1.1HTML概念,HTML超文本标记语言（HyperTextMarkupLanguage）以htm或者html为扩展名包含标记的文本文件通过浏览器解析标记来显示页面HTML的编辑器简单文本编辑器即可，可在纯文本中编写代码常用编辑器-DreamWeaver、FrontPage、EditPlus等,1.2基本结构,HTML文件通常由文档头、正文两部分构成；在外层以标识为Html文件：,欢迎进入HTML世界体验网页的魅力！,HTML部分文档头部分正文部分,1.3第一个网页-解释执行,FirstPage.html第一个网页你好!开始学习做网页了，一定要加油啊！,1.4标记,HTML文档是由HTML标记及内容组成的文本文件HTML标记的组成通常成对出现，在开始标记和结束标记之间的文本是内容大小写无关，和表示的意思是一样的,1.5标记的属性,标记的属性属性为页面上的HTML元素提供附加信息，如：属性通常以name=“value”对出现，写在起始标记中；一个标记可以有多个属性属性值应该被包含在引号中，常用双引号。可嵌套使用单引号,第二章：基本标记,学时：2.5学时教学方法：讲授ppt上机练习,目标:本章旨在向学员简要介绍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建议换行：将此标记加在建议换行的位置如：页面中显示网址，一般不会在网址字符串中间换行，加此标记后可能会换行示例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还有basefont标记可以设置页面的默认字体，通常放在head标记中可设置以下属性,2.4字体-font-示例,font.htmlHelloworld!Helloworld!Helloworld!Helloworld!Helloworld!Helloworld!今天天气今天天气真好!,2.5标题字体-hn,标题字体：headattr.htmln的取值由1到6，h1最大显示黑体字，并自动插入空行可以设置如下属性：,2.5标题字体-hn-示例,2.6物理字体,物理字体（固定效果）：phystyle.html设置字体显示样式，主要有以下标记：,2.6物理字体-示例,2.7逻辑字体（一）,逻辑字体（与浏览器相关）：表现文字含义，主要有以下标记：,2.7逻辑字体（二）,逻辑字体：logstyle.html续：,2.7逻辑字体-示例,2.8水平线-hr,水平线：hr.html用于分割同一文本的不同部分可以设置如下属性：,2.9居中-center、注释,居中：设置标记中的文本或者图像居中显示注释：hr.html浏览器中不显示注释内容,2.10文字移动-marquee,移动：设置标记中的文本移动marquee.html可以设置如下属性：,2.10文字移动-marquee-示例,啦啦啦，我从右向左移动！啦啦啦，我从左向右移动！啦啦啦，我只走一次就休息了！啦啦啦，我一圈一圈绕着走！啦啦啦，我来回走！啦啦啦，我scroll只走3趟！啦啦啦，我slide只走3趟！啦啦啦，我alternate只走3趟！,2.11列表,列表：用于列举内容列表分类无序列表（unorderedlist）有序列表（orderedlist）定义列表（definitionlist）,2.11.1无序列表-ul,无序列表：列表项以标识ulist.html可以设置如下属性：,2.11.1无序列表-ul-示例,CoffeeTeaMilkCoffeeTeaMilkCoffeeTeaMilk,2.11.2有序列表-ol,有序列表：列表项以标识olist.html每一项显示时都有编号可以设置如下属性：,2.11.2有序列表-ol-示例,CoffeeTeaMilkCoffeeTeaMilkCoffeeTeaMilk,2.11.3定义列表-dl,定义列表：对某对象的解释dlist.html定义标题定义内容,2.11.3定义列表-dl-示例,AnDefinitionList:CoffeeBlankhotdrinkMilkwhitecolddrink,2.11.4嵌套列表-示例,2.12超链接-a,超链接：东软公司可以设置如下属性：anchor.html,2.12超链接-a-示例,无序列表的示例这是链接到相对URL。东软公司这是链接到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-示例（二）,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字符实体,字符实体：有些字符，如”、”，在HTML页面中显示为,2.15常用的实体（一）,实体-无间断空格：entities.html在HTML中，最常见的字符实体就是不可拆分空格通常，HTML会合并你文档中的空格。如果在你的HTML文本中连续输入了10个空格，其中的9个会被去掉。想要在HTML文档中插入空格，可以使用实体,2.15常用的实体（二）,2.15实体-示例,2.16HTML基本标记练习,参照我给出的图片，使用刚刚学过的基本标记来实现页面（说明：只实现大概样式即可，字体/颜色等可以不完全一致）练习一：html_exercise_1.jpg练习二：html_exercise_2.jpg练习三：html_exercise_3.jpg,第三章：表格,学时：1.5学时教学方法：讲授ppt课堂演示+上机练习,目标:本章旨在向学员简要介绍表格标记的使用，学员应该掌握如下知识：1）可以在HTML页面中插入表格2）能够做出不同样式的表格，能够合并多行、多列,3.1表格,table用表格显示内容，整洁有序；可以单独设置背景及颜色等表的布局,3.1表格,table基本构成,3.2table属性,表格：table可以设置如下属性table_sample.html,3.2表格-table-示例,电信学院学生名单姓名性别专业李向阳男电子工程,3.3caption属性,标题：caption可以设置如下属性,3.4tr属性,表格行：tr可以设置如下属性,3.5td属性,单元格：td可以设置如下属性table_col.html,3.5单元格-td-示例,NameTelephone为空BillGates5557785455577855,3.6注意,一般情况下，每个行的单元格数量要相等没有任何内容的单元格，必须进行特殊处理高度要设置到表格的第一列单元格上，宽度要设置到表格的第一行单元格上在之间不要出现不必要的空白符、换行符等建议与写在一行里，不要换行,3.7表格练习,Table标记练习练习一：table_exercise.jpg设置边框更细：style=border-collapse:collapse;,第四章：表单,学时：1.0学时教学方法：讲授ppt+课堂演示+上机练习,目标:本章旨在向学员简要介绍表单的使用，学员应该掌握如下知识：1）在页面中使用表单2）可以使用各种input标记和其它域标记,4.1表单,表单表单是一个包含表单元素的区域在WEB页面内创建用户控件，收集用户的输入是实现交互功能的主要方式，用户一般通过form向CGI、ASP、JSP程序提交信息,4.2表单提交,表单提交：表单中的控件以名称-值对使用表单与某个程序的URL关联，程序来处理表单提交的数据当用户提交表单时，表单中有效元素的名称和值以一定格式传递给指定的URL如：name1=value1获取iframe中的body的背景颜色使用document.all获取iframe对象的属性sBorderValue