1.**网页基础**
网页是存放在WEB服务器上供客户机用户浏览的页面。
在逻辑上可视为一个整体的一系列页面的有机集合称为网站（WEB SITE )
2. HTML**语言基础**
HTML(Hypertext Markup Language) 是一种规范，一种标准，它通过标记符（tag）来标记要显示的网页的各个部分
2. HTML**语言基础——工作原理**
通过在网页中添加标记符，可以告诉浏览器如何显示网页，即确定内容的格式。浏览器按顺序阅读网页文件（HTML文件），然后根据内容周围的HTML标记符解释和显示各种内容。
2. HTML**语言基础——**基本语法
在 HTML 中，所有的标记符都用尖括号括起来。例如，<html>、<a>。
HTML 标记符是不区分大小写的。<html>、<Html>和<HTML>没有区别。
绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。某些标记符，例如<BR>，只要求单一标记符号。
开始标记符与结束标记符的区别在于：结束标记符多一个斜杠“/”（不是反斜杠“\”！）
在HTML中，所有的属性都放置在开始标记符的尖括号里，多个属性之间用空格分开，通常也不区分大小写。
超链接概念
所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。
常用超链接类型
按照链接路径的不同,网页中超链接一般分为以下3种类型: 内部链接,锚点链接和外部链接。 如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。
表格框线制作思路
将TABLE的bgcolor属性设置为要显示的线的颜色，将TABLE的cellspacing属性设置为细线的粗细（通常为1），将单元格或表格行的bgcolor属性设置为不同于表格bgcolor的值(通常设置为white)
制作横竖分割线思路
制作横竖分割线思路
将TABLE的cellspacing属性和cellpadding的属性都设置为0，将要作为细线的单元格的bgcolor属性设置为细线的颜色，将该单元格的width属性（竖线）或height属性(横线)设置为细线的粗细(通常为1)，注意该单元格中不能有任何内容(包括空格）
什么是页面版式
设计页面版式就是指采用一种合适的技术将网页的内容显示在浏览器中。在网页中可以使用多种方式进行版式设计，以形成一个统一的站点风格并获得需要的效果。一般可以用表格和框架这两种方式进行页面版式设计
版式在网页界面中的作用
从网页技术角度讲，设计者通常是围绕着页面中的导航栏、图像、动画、正文等内容展开页面布局的。在页面制作过程中要确定一个页面的布局，应该综合考虑如何安置页面中的各种内容，比如标题文字、导航栏、图片、动画、超链接等。
版式在网页界面中的作用
从审美角度出发，要求设计师运用统一、对比、对称、均衡等形式原理进行设计，利用网页中的元素构造出和谐、流畅、自然的网页界面。
版式的实用功能
主次分明、重点突出——应能让浏览者迅速找到网页的主题，并对整个页面有全面的掌握
导航清晰、便于浏览——网页应该具有一致风格的导航系统，为用户浏览提供方便
布局合理、逻辑性强——应能使网页中的各种视觉信息在页面中合理、有序地排列，既要体现出设计思想，又要符合一般的视觉原理和思维习惯
版式的审美功能
统一，是指设计作品的整体性、一致性。
分割，是指将页面划分为不同区域，以便妥善安排各种页面组成元素。
对比，是指通过合理运用矛盾和冲突，使设计更加富有生机和活力。
表格的组成
n 表格标记符table
n 表格标题 caption
n 表格行 tr （table row）
n 表格数据 td （table data）
n 表格表头 th （table heading）
表格的构造
n 在 TH 或 TD 标记符中使用 rowspan 属性进行行合并
n 在 TH 或 TD 标记符中使用 colspan 属性进行列合并
边框与分隔线（Frame属性、Rules属性、Border属性）** **
表格对齐
表格的页面对齐<table align>
表格内容的对齐:水平对齐(align) 垂直对齐:(valign)
控制单元格空白
n Cellspacing属性
n Cellpadding属性
使用表格排版
页面布局(划分页面区域、背景色的设置、嵌套表格)
特殊排版效果——表格细线的实现
强调：如果要将某网页元素（例如一幅图像）放到特定位置，首先应想到使用表格！
n Bgcolor**设置背景色**
n Background**设置背景图像**
使用嵌套表格 复杂的网页布局需要借助嵌套表格！
表格的应用
综合应用表格的各种属性，可以创建一些常用的网页效果，例如：网页细线。
什么是框架
n 在同一个浏览器窗口中同时显示多个网页的交互式结构。
n 通过为超链接指定目标框架，可以为框架之间建立起内容的联系，从而实现页面导航的功能。
框架结构
n 框架集
定义框架的结构 <frameset></frameset>
n **框架**
具体定义每个页面 <frame>
框架结构
框架集的定义
Rows 定义行结构框架 Cols 定义列结构框架
Rows 和 cols 的取值：（像素数 % N*）
框架的初始化
在 frame 标记符中使用 src 属性可以指定框架中最初显示的页面
超链接的目标框架
所谓目标框架，是指单击框架网页中的超链接时，对应的目标文件显示在哪个框架中。
设置目标框架
1、 使用<FRAME name=“”>指定框架名称
2、 特殊的框架名称（_blank 表示打开新的窗口 _top 表示返回顶层窗口）
3、 在超链接标记符 A 中指定 target 属性，取值为具体的框架名称。
控制框架的显示效果
n <FRAME frameborder=“”>设置框架边框。
n <FRAME scrolling=“”>设置框架滚动条。
n <FRAME marginwidth=“” marginheight=“”>设置框架内容与框架边框之间的空白
使用页内框架
n 用 iframe **标记符可以设置页内框架**
- <iframe src=“”>**不支持框架时显示的内容</iframe>
n **也可以指定页内框架为目标框架
CSS**技术的概念**
表单的作用
表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，它由表单控件和一般内容组成。
表单工作原理
表单工作原理
- FORM包含所有表单内容
Action 属性
服务器端脚本程序（ASP、JSP、PHP、Perl等）
mailto:mailbox@mailserver.com
Method属性（get、post）
Enctype属性
表单控件的类型(**主要)**
文本框 复选框 单选框 按钮 选项菜单
文本框
n 单行文本框 <input type=“text” size=“”>
n 口令框 <input type=“password” size=“”>
复选框和单选框
n 复选框 <input type=“checkbox” checked>
n 单选框 <input type=“radio” name=“” checked>
注意：单选框 name 属性相同者为一组！
按钮
n 提交按钮 <input type=“submit”> <input type=“image”>
n 重置按钮 <input type=“reset”>
n 自定义按钮 <input type=“button”>
选项菜单
n SELECT标记符（Size属性 Multiple属性）
n OPTION标记符
编写CSS**样式 CSS**特点：内容与表现分离
1、类： class方式调用,如 .style1 .s1
2、标签：已有HTML标签,如h1 body。
3 ID：ID方式调用，如#f2 #layer1
应用CSS**样式**
特殊的表单 列表 导航条菜单
盒模型
盒子模式（Box Model）
说明：
n 盒子里由外至里依次是：** **
n margin **边距 **
n border **边框 **
n padding **间隙 (**也有人称做补丁)
n content (**内容，比如文本，图片等)**
n CSS **边距属性 (margin) **是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
n CSS **边框属性 (b order) **用来设定一个元素的边线。
n CSS **间隙属性 (padding) **是用来设置元素内容到元素边框的距离。
n CSS **背景属性指的是 content 和 padding 区域 **。
n CSS **属性中的 width 和 height 指的是 content 区域的宽和高 **
定义示例
n #sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px solid;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BACKGROUND: url(bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }
#sample**说明**
● 层的名称为sample，在页面中用<div id=“sample”>就可以调用这个样式。
● MARGIN是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。”10px 10px 10px 10px”分别代表”上右下左”(顺时针方向)四个边距，如果都一样，可以缩写成”MARGIN: 10px;”。如果边距为零，要写成”MARGIN: 0px;”。注意：当值是零时，除了RGB颜色值0%必须跟百分号，其他情况后面可以不跟单位”px”。MARGIN是透明元素，不能定义颜色。
● PADDING是指层的边框到层的内容之间的空白。和margin一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成”PADDING:0px”。单独指定左边可以写成”PADDING-LEFT: 0px;”。PADDING是透明元素，不能定义颜色。
● BORDER是指层的边框，”BORDER-RIGHT: #CCC 2px solid;”是定义层的右边框颜色为”#CCC”，宽度为”2px”，样式为”solid”直线。如果要虚线样式可以用”dotted”。
● BACKGROUND是定义层的背景。分2级定义，先定义图片背景，采用”url(../images/bg_logo.gif)”来指定背景图片路径；其次定义背景色”#FEFEFE”。”no-repeat”指背景图片不需要重复，如果需要横向重复用”repeat-x”,纵向重复用”repeat-y”,重复铺满整个背景用”repeat”。后面的”right bottom;”是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE
● COLOR用于定义字体颜色，上一节已经介绍过。
● TEXT-ALIGN用来定义层中的内容排列方式，center居中,left居左,right居右。
● LINE-HEIGHT定义行高，150%是指高度为标准高度的150%，也可以写作：LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em，都是一样的意思。
● WIDTH是定义层的宽度，可以采用固定值，例如500px，也可以采用百分比，象这里的”60%”。要注意的是:这个宽度仅仅指你内容的宽度，不包含margin,border和padding。但在有些浏览器中不是这么定义的，需要你多试试。
盒子的例子
<html>
<head>
<style>
#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px solid;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BACKGROUND: url(http://www.yzci.com/attachments/month_0612/y2006121221022.gif) #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }
</style>
</head>
<body>
<div>
<p>这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，这里是演示内容，</p>
<p>这里是演示内容，这里是演示内容，</p>
<p>这里是演示内容，这里是演示内容，</p>这里是演示内容…</DIV>
</body>
</html>
边框风格属性 (border-style)** **
这个属性用来设定上下左右边框的风格，它的值如下：** **
none (没有边框，无论边框宽度设为多大) dotted (点线式边框)
dashed (破折线式边框) solid (直线式边框) double (双线式边框) groove (槽线式边框)
ridge(脊线式边框) inset (内嵌效果的边框) outset (突起效果的边框)
边框宽度属性(border-width)
n 这个属性用来设定上下左右边框的宽度，它的值如下：** **
1、medium (是缺省值) 2、thin (比medium细) 3、thick (比medium粗 )
4、用长度单位定值。可以用绝对长度单位(cm, mm, in , pt , pc)或者用相对长度单位 (em, ex, px)
边框颜色属性(border-color)
n 这个属性用来设定上下左右边框的颜色。例句如下：
n .d5 {b order -col or:gray;border-style:solid;}
单边边框属性
n 上下左右四个边框不但可以统一设定，也可以分开设定 。
n 设定上边框属性，你可以使用border-top, border-top-width, b order-top-style, border-top -color。
n 设定下边框属性 ，你可以使用border-bottom, border-bottom-width, border-bottom-style, border-bottom-color。
n 设定左边框属性，你可以使用b order-left, b order-left-width , border-left-style , border-left-color。
n 设定上边框属性，你可以使用b order-right, b order-right-width, border-right-style, b order-right-color。
下间隙属性 (margin-bottom)
n 这个属性用来设定下间隙的宽度。示例如下 ：
n .d1{padding -bottom:1cm}
间隙属性 (padding)
这个属性 是设定间隙宽度的一个快捷的综合写法 ，用这个属性可以同时设定上下左右间隙属性。
你可以为上下左右间隙设置相同的宽度。示例入下：
.d1 {padding:1cm}
你也可以分别设置间隙 ，顺序 是上，右 ，下，左。示例如下：
.d1 {padding:1cm 2cm 3cm 4cm}
上面的代码表示，上间隙为1cm ，右间隙为2cm，下间隙为3cm ，左间隙为4cm 。
边距属性
n 边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。
n 左边距属性(margin-left)
n 这个属性用来设定左边距的宽度 。示例如下：
n .d1{margin -left :1cm}
边距属性 (margin)
n 这个属性是设定边距宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右边距属性。
n 你可以为上下左右边距设置相同的宽度 。示例入下：
n .d1 {margin:1cm}
n 你也可以分别设置边距，顺序是上，右，下，左。示例如下：
n .d1 {margin:1cm 2cm 3cm 4cm}
n 上面的代码表示，上边距为1cm，右边距为2cm，下边距为3cm，左边距为4cm。
理解DIV**标记与span**标记
n <div>(division)简单而言是一个区块容器标记，即<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格图片、乃至章节、摘要和备注等各种HTML元素。
n <span>在意义上没有什么不同，同样可以容纳各种HTML元素，从而形成独立的对象。
区别：
<div>是一个块级元素，它包围的元素会自动换行。而<span>仅仅是一个行内元素，在它的前后不会换行。<span>没有结构上的意义，纯粹是应用样式，当其它行内元素都不适合时，就可以使用<span>元素。
<span>标记可以包含于<div>标记之中，成为它的子元素，而反过来则不成立，即<span>标记不能包含<div>标记
盒子模型（Border padding margin**）**
n 一个盒子的实际宽度（或高度）是由content+padding+border+margin组成的
BORDER属性主要有3个：分别是color、width、和style，在设置border时常常需要将这3个属性进行很好的配合，才能达到良好的效果。
填充属性**（padding**）
padding**属性用语控制content与border之间的距离。**
margin
Margin**指的是元素与元素之间的距离**
<html><head>
<title>两个行内元素的margin</title>
<style type=”text/css”><!–
span{background-color:#a2d2ff; text-align:center; font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:10px;}
span.left{margin-right:30px; background-color:#a9d6ff;}
span.right{margin-left:40px; background-color:#eeb0b0;}–>
</style> </head><body>
<span>行内元素1</span><span class=”right”>行内元素2</span>
</body></html>
<html><head><title>两个块级元素的margin</title><style type=”text/css”><!–
div{background-color:#a2d2ff; text-align:center; font-family:Arial, Helvetica, sans-serif;
font-size:12px; padding:10px; }–></style> </head>
<body> <div style=”margin-bottom:50px;”>块元素1</div>
<div style=”margin-top:30px;”>块元素2</div>
</body></html>
<html><head><title>父子块的margin</title><style type=”text/css”><!–
div.father{/ 父div / background-color:#fffebb; text-align:center;
font-family:Arial, Helvetica, sans-serif; font-size:12px;
padding:10px; border:1px solid #000000;}
div.son{/ 子div / background-color:#a2d2ff; margin-top:30px;
margin-bottom:0px; padding:15px; border:1px dashed #004993;}–>
</style> </head><body>
<div class=”father”>
<div class=”son”>子div</div>
</div></body></html>
1.CSS**技术的概念**
CSS（Cascading Style Sheet，层叠样式表）是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的方式设置网页格式
2. CSS**样式定义的语法格式**
格式：
- Selector{property1:value1;property2:value2;property3:value3;……}
- Selector(选择器):定义样式作用的对象;
- Property(属性):为CSS属性;
- Value:为属性对应的值。
H1 {text-align:center; font-family:黑体}
H1: Selector text-align :CSS的Property center：VALUE
CSS**样式定义的语法格式 —常用Selector类型**
1、 HTML标记符2、用户定义的类3、用户定义的ID 4、虚类
HTML Selector
n HTML标记符是最常用的selector，它重新定义了HTML标记符的显示效果。
n 例如：1、H1{text-align:center;color:red}2、使所有用H1标记符修饰的内容都居中和用红色显示。
用户定义类
格式：**.classname{property:value…}**
表示任何class属性为classname的标记符都采用所定义的样式。
用户定义ID
格式: #idname{property:value…}
表示任何ID属性为idname的标记符都采用所定义的样式。
虚类 Selector
n 虚类 Selector
a:link或者:link 未访问过的超链接 a:visited或者:visited 访问过的超链接
a:active或者 :active 活动超链接 a:hover或者 :hover 悬停状态的超链接
例: 1、所有超链接去下划线：a{text-decoration:none}2、悬停变色:hover{color:red}
类与ID**区别与联系**
1、用户定义ID与class的作用完全相同，一般使用其中之一即可。
2、 区别:在同一个网页中，ID具有唯一性，而class可以多次引用
在网页中使用CSS（行内样式 内嵌式 链接式）
行内样式
n 方法:**通过HTML 标记符的 style 属性进行设置.**
n 例如：<P style=“text-align:center” > **注意: **多个属性用分号分隔.
内嵌式
n 方法:**通过<STYLE>**标记符定义.
n 格式:
<STYLE>Selector{property1:value1;property2:value2;property3:value3;……}
……</STYLE>
链接式
n LINK 标记符
- <LINK rel=“stylesheet” type=“text/css” href=“stylesheet.css”>
n 样式表文件可以用文本编辑器编辑，也可以用FP或DW编辑，内容为样式定义。
样式的优先级
n 样式的优先级遵循“就近优先”的原则，也就是说，距离所修饰对象越近的样式，其优先级越高。
n 样式如果冲突，则采用高优先级样式；如果不冲突，则采用叠加的样式效果。
