思源培训_网页设计入门.doc

第82页 共82页网页设计入门盐城师范学院思源驿站2010.10目录第1章 HTML概述1.1 简介1.2 HTML基本元素1.3 元素简介1.4 标签简介 1.4.1 标签列表 1.4.2 常用标签1.5 图像标签 1.5.1 基本语法 1.5.2 图标align属性 1.5.3 图片的大小1.6 HTML实体1.7 总结第2章 框架与超链接2.1 框架 2.1.1 框架基本概念 2.1.2 frame分割2.2 超链接 2.2.1 href属性 2.2.2 name属性 2.2.3 target属性 2.2.4 title属性 2.2.5 链接到email地址 2.2.6 HTML相对路径和绝对路径2.3 总结第3章 HTML表格和层3.1 简介3.2 表格基本元素3.3 边界属性3.4 表格的表头3.5 空的单元格3.6 跨多行多列的表格3.7 层3.8 总结第4章 表单4.1 简介4.2 表单 4.2.1 三个要点 4.2.2 表单的控件4.3 总结第5章 CSS样式表5.1 简介5.2 样式表的基本语法及规则5.3 常用的样式属性 5.3.1 文本属性 5.3.2 背景属性 5.3.3 方框属性（盒子模型）5.4 样式表的3类应用方式 5.4.1 内嵌样式 5.4.2 行内嵌样式 5.4.3 外部引用5.5 总结第6章 JavaScript基本语法6.1 简介6.2 为什么要学习JavaScript6.3 什么是JavaScript 6.3.1 脚本的基本结构 6.3.2 脚本的执行原理6.4 JavaScript的基本语法 6.4.1 变量的声明和赋值 6.4.2 运算符号 6.4.3 逻辑控制语句 6.4.4 注释 6.4.5 类型转换6.5 JavaScript的高级语法自定义函数function 6.5.1 什么是函数 6.5.2 如何使用函数6.6 常见错误6.7 总结第7章 DOM对象（一）7.1 简介7.2 DOM模型介绍 7.2.1 HTML文档的树形结构 7.2.2 DOM 7.2.3 浏览器对象7.3 window对象常用的属性、方法、事件的介绍 7.3.1 常用属性 7.3.2 常用方法 7.3.3 常用事件7.4 date对象和setTimeout()方法做时钟显示 7.4.1 date对象常用的方法 7.4.2 setTimeout()方法7.5 history和location对象 7.5.1 history对象 7.5.2 location对象7.6 总结第8章 DOM对象（二）8.1 简介8.2 document对象的常用属性和方法介绍 8.2.1 属性 8.2.2 方法8.3 网页选项卡效果8.4 全选/全不选/反选效果8.5 常见错误8.6 总结第9章 基本的表单验证技术9.1 简介9.2 为什么需要表单验证9.3 表单验证的内容9.4 表单验证思路 9.4.1 字符串对象简介 9.4.2 电子邮件格式验证9.5 文本框控件 9.5.1 文本框对象简介 9.5.2 电子邮件格式验证的改进9.6 总结第10章 表单验证的高级应用 10.1 简介10.2 下拉列表框简介10.3 数字简介 10.3.1 数组用法介绍 10.3.2 创建数组 10.3.3 为数组元素赋值 10.3.4 访问数组元素 10.3.5 数组的常用属性和方法10.4 复选框数组的应用10.5 综合10.6 总结第1章 HTML概述目标 会使用HTML的基本结构创建网页会使用文本相关标签实现页面文字修饰和布局1.1 简介HTML的英文全称是Hyper Text Markup Language，中文叫做“超文本（字）标记语言”。HTML跟一般的文字处理器不同的地方在于，它具有超文字（Hyper Text）、超链接（Hyper Link）、超媒体（Hyper Media）的特性，通过HTTP（Hyper Text Transfer Protocol）协议，便能够在世界各地通过WWW（World Wide Web）的架构进行跨平台的交流。HTML是创建网页的基础语言，也是创建网页的标准语言。网页由网页元素构成，网页元素是由HTML标记（标签）加上属性和内容构成。本章将介绍HTML的基本结构，文本相关标签，图像标签，链接标签，滚动标签等。本章重点是文本、图像、链接标签的运用，难点是各种标签的综合应用。1.2 HTML基本元素打开Notepad，新建一个文件，输入以下代码，保存为first.html。 我的第一个网页 Hello,World！ 打开网页，查看显示效果：例解：这个文件的第一标签是，这个标签告诉你的浏览器这是HTML文件的开始，最后一个标签是，告诉浏览器这是文件的结束。在和之间的内容，是网页的Head信息（头信息）。Head信息是不显示在网页中，但不表示它不重要。你可以在Head信息中添加网页关键词，网页描述，网页的样式，脚本语言等等。在和之间的内容，是网页的标题，显示在浏览器的标题栏。在和之间的内容，是网页的主体部分。在和之间的文字会被加粗，即bold。HTML源文件是文本文件，里面包含HTML标签，告诉网页如何显示这个文件。1.3 元素简介HTML元素（HTML Element）由HTML标签、内容和标签的属性构成。HTML标签分为成对标签和独立标签。成对标签以“”开始，以“”结束，属性写在开始标签里标签名的后面，内容写在开始标签与结束标签之间。独立标签写成“”，属性写在标签名的后面。HTML代码不区分大小写，但是我们今天处在HTML向XML过渡的XHTML时期，作为初学者一定要严格要求自己，养成良好的习惯，遵循代码小写、标签闭合等规范，注意代码缩进。标签属性扩展了HTML元素的能力，比如你可以通过改变标签的bgcolor属性值来改变网页背景颜色。 我的第一个网页 Hello,World！ 显示效果：1.4 标签简介1.4.1 标签列表类型名称内容说明总类（所有HTML文件都有的）文件放在文档的开头和结尾文件标题必须放在文件头文件头网页的描述信息文件主体网页的主体内容结构性定义（由浏览器控制显示风格）标题?的值从1到6，有六层选择层如今网页中最常见的标签，通常与CSS使用引文区块通常会缩进强调通常以斜体显示特别强调通常加粗显示引文通常以斜体显示代码显示原始码样本键盘输入变数定义有些浏览器不识别地址大字小字与外观相关的标签加粗斜体下划线有些浏览器不识别删除线有些浏览器不识别下标上标打字机字体用单空格字型显示预定格式保留代码中的空格剧中文字和图片都适用闪耀有些浏览器不识别字体链接与图片链接图片站点地图内嵌物件将物件插入页面文档标签（分隔）段落段落与段落之间通常是双倍行距换行单倍行距水平线不可换行可换行处如果需要，可在此断行无序列表有序列表定义式列表项目，定义1.4.2 常用标签下面是一些常用标签组成的网页的代码。 我的第一个网页 Hello,WorldHello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World! 显示效果：在HTML文件里，你可以写代码的注释，解释说明你的代码，这样有助于你和他人更好地理解代码。注释写在“”之间，注释内容不会显示在网页里。HTML文件会自动截取多余的空格，不管你有多少个空格，都会被浏览器解释成一个。有些标签能够将文本自成一段，不需要使用标签分段，例如。1.5 图像标签适当地使用图像能给网页增添无限生机，吸引更多的浏览者。图像格式有很多，网页上常见的有4种，即jpg、gif、bmp、png。1.5.1 基本语法标签用于在HTML文档中插入图像。 我的第一个网页 显示效果：1.5.1 图片align属性用align属性可以改变图片的垂直对齐方式和水平对齐方式。 我的第一个网页 图片的垂直对齐方式 图片的水平对齐方式 显示效果：1.5.3 图片的大小在缺省情况下，图片显示原有大小，你可以通过的width和height属性来设置图片的显示大小。 我的第一个网页   显示效果：图片相对文字所占的字节数较多，一个页面不要包含过多的图片，否则影响显示速度。1.6 HTML实体HTML中有一些特殊的符号和实体：实体类型实体号实体作用空格 < >注册商标 ®著作权 ©双引号 ”"位与运算符 &左单引号 ‘右单引号 ’1.7 总结HTML的英文全称是Hyper Text Markup Language。HTML网页由HTML元素构成，HTML元素又由HTML标签、内容及属性构成。、标签可以分别实现分段和换行。标签可以在网页中插入图片，并可通过align属性调整图像相对位置，通过width和height属性调整图像显示大小。第二章 框架与超链接目标 会使用框架会使用超链接标签实现页面间的跳转2.1 框架2.1.1 框架基本概念这个是一个典型的框架集页面，index.html，包含left、top、main框架，分别链向left.html、top.html、main.html。2.1.2 frame分割frame分割就好像是切蛋糕，要一步步来。 Frameset 先用标签取代标签，然后把页面分成左右两块，左边宽度为120像素，右边自动。左框架链接left.html页面，name为left，右框架链接right.html页面，name为main。 Frameset 显示效果： 再把网页右块分成上下两块，上块高100像素。 Frameset 显示效果：一个简单的框架集页面就这样“切”好了。2.2 超链接2.2.1 href属性HTML用来表示超链接，英文叫anchor。它可以链到任何一个文件源：当前网页的某个位置，一个html网页，一个图片，一个视频，等等。其基本语法如下：链接的显示文字URL（Uniform/Universal Resource Locator）叫做统一资源定位，或全球资源定位，表示要链接的文件位置，也就通常说的网站。 HyperLink About SYYZgoogle显示效果：“About SYYZ”链到同目录下的about.html页面，“google”链到网站。2.2.2 name属性用name属性，可以让某个链接跳到页面中设置了name属性的位置。name属性通常用于给一个大的文件创建章节目录。 HyperLink 请参照第3章第1章这是第1章内容第2章这是第2章内容第3章这是第3章内容第4章这是第4章内容第5章这是第5章内容第6章这是第6章内容如果浏览器找不到制定的name位置，则显示文章开头，不报错。链接的显示文字2.2.3 target属性使用target属性可以设置显示网页的目标。链接的显示文字链接的显示文字链接的显示文字链接的显示文字链接的显示文字链接的显示文字另外，点击链接时按下ctrl键会在新选项卡中打开页面，按下shift会在新窗口中打开页面。2.2.4 title属性使用title属性可以设置鼠标悬停文本，给超链接添加注释。 HyperLink About SYYZgoogle 显示效果：2.2.5 链接到Email地址联系我们如果给mailto添加更多功能，第一个功能要以?开始，每个功能之间用&连接。cc为抄送地址，bcc为暗送（密送）地址，subject为邮件主题，body为邮件内容。联系我们2.2.6 HTML相对路径和绝对路径链接的显示文字链接的显示文字 链接的显示文字链接的显示文字链接的显示文字2.3 总结一个框架结构由两部分组成：框架集frameset和框架frame。框架集frameset页面被划分的区域多少是通过属性rows和cols来设置的。设置打开超链接的目标的方式有5种，可以通过target属性来设置。HTML链接文档或引用文档有相对路径和绝对路径两种方式。第3章 HTML表格和层目标 会使用表格的基本结构实现简单表格会设置表格的相关属性实现跨行跨列的复杂表格会使用表格的相关属性对表格进行美化认识到层（div）的重要性3.1 简介本章主要讲解表格和层的基础知识，重点是表格的基本结构和层的基本用法，难点是跨行跨列的复杂表格的实现，以及层在当今网页设计中的重要性。3.2 表格的基本元素HTML表格用标签表示，一个表格可以分成许多行，用表示，一行可以分成许多单元，用来表示。这三个标签是创建表格最常用的标签。 表格 一行一列的表格 100 一行三列的表格 100200300 两行三列的表格 100200300 400500600 显示效果：3.3 边界属性在缺省情况下，不设置表格的边界（边框）属性，表格的边框是不显示的。 表格 一行一列的表格 100 一行三列的表格 100200300 两行三列的表格 100200300 400500600 显示效果：边框boder属性的值越大，边框就越粗。 表格 边框为1的表格 100 边框为3的表格 100200300 边框为8的表格 100200300 400500600 显示效果：3.4 表格的表头 用表示表格的表头，表头文字默认为粗体显示。代码及效果（注意表格嵌套）： 表格 横向表头 学院班级姓名 黄海学院101李晓明 数科院102张风 教科院103黄蕾蕾 文学院104董乐 体育学院105王庆外语学院106刘千易 信息学院107周凡 纵向表头 单位思源驿站电话051588233240 邮箱 3.5 空的单元格下面表格中的单元格在页面上会显示麽？ 表格 显示效果：如果表格的单元格之间没有内容，那么这个单元格的边框是不会显示出来的，尽管整个表格已设置了边界值。要显示这个单元格的边框，可以在单元格中插入字符实体 。 表格   显示效果：3.6 跨多行多列的表格colspan属性用于创建跨多列的单元格，rowspan属性用于创建跨多行的单元格。 表格 跨多列的单元格 100200300100200300 400500 跨多行的单元格 100200300200300 400500600 跨多行多列的单元格 100200300200300 400500 显示效果：3.7 层和标签用于组织文档结构，通常要设置它们的class或id属性。合理使用和，将使得用CSS控制网页表现样式变得非常灵活。3.8 总结创建表格至少需要、3对标签。创建跨多行多列的表格要分别使用rowspan和clospan属性。、是如今组织网页的主要标签。第4章 表单目标 会使用表单的基本元素制作表单页面能够理解post和get两种提交方式的区别4.1 简介本章主要介绍表单，重点是表单里面的各种控件的使用方法，和post、get两种提交方式的区别。4.2 表单表单是网页设计的重要内容之一，主要用来采集和提交用户输入的信息，比如用户注册信息、留言信息、发布文章等。 form Please input your name:显示效果：4.2.1 三个要点学习HTML表单form的三个要点：要点说明举例表单控件通过HTML表单的各种控件，用户可以进行输入文字，选择选项，以及提交等操作。action指明处理表单的页面。action=”add.asp”methodget表单控件的name或value经过编码后，由URL发送。用get方法提取。post表单控件的name或value，由http发送，URL中看不到。用post方法提取。4.2.2 表单的控件常用表单控件： form 、 、 表单控件的综合应用：form 基本信息 姓名 密码 性别 男 女 个性介绍 系科信息 系科 计算机 数学 外语 体育 编程语言 C C+ C# Java 其他 上传头像 显示效果：4.3 总结表单主要用于动态页面，方便用户和网站交互。第5章 CSS样式表目标 理解CSS样式表的在网页设计中的地位和作用熟练掌握div层和CSS样式表5.1 简介CSS样式表（Cascading Style Sheets）让网页设计师们能够灵活控制网页的表现样式，同时实现了表现、内容和行为的分离，方便团队合作。5.2 样式表的基本语法及规则样式表由样式规则构成，这些规则告诉浏览器如何显示网页。定义样式规则的基本语法如下：selectorattribe:value;selector是选择器，可