网页设计与前端开发技术

一：网页设计丶前端开发与后台程序开发之间的关系
一般的网站开发流程：


 
现在网页制作分工越来越细，从网页设计的范畴来讲，主要包括美工和前端，后台属于网站功能的范畴，网站制作流程一般是这样，美工﹥前端＞后台。
 
首先由美工设计出网站的效果图让客户认可，认可后在由前端编码人员实现为静态的网页，最后由后台程序员实现网站功能。
美工和前端主要是完成网站的look and feel 的工作，特别是现在常说的用户体验，需要美工和前端人员相互协调好，前期沟通非常重要，美工在设计页面的时候应考虑好页面在前端编码阶段实现的可能性、性能和效率，因为美工往往通常不太了解网页的语言代码，容易造成页面设计客户认可了，但在前端编码阶段不太可能实现或性能差以及效率低的尴尬境地，因此设计师在设计好页面后最好先给前端人员浏览一下后在交付客户认可为最佳。
 
当然，一个优秀的前端人员是能够应对各种情况的页面设计的，但是页面设计还是应遵循一些最基本的用户体验习惯，所以沟通是很重要的。
 
前端编码工作完成后，后台人员就可以在静态页面上开始功能代码的编程工作了，一个好的前端编码人员所编写的页面对于后台开发人员来讲也是非常重要的，因为程序代码往往都是一些逻辑性很强的语言，静态页面的质量直接也会影响到功能代码的编写，前端人员应充分理解表现（CSS）、结构（html）和动作（JavaScript、jquery等)相分离的编写规则才能提高网站的效率对后台编程人员来讲也较容易添加程序代码。简单来说，就网站设计而言，前端人员应该是很好衔接美工和编程人员的一个重要角色，所以现今，前端开发的职位炙手可热，而且待遇可观。
 
 
二：网页设计师为什么要学习前端开发


 
通常，在完成了一件网页设计后，设计师的无知都会显露无遗而备受指责。他们把创建网页代码的繁重工作都留给了程序员们。这种现象不只出现在网络开发行业，在软件及游戏开发业也是如此。 残酷的事实就是：开发进度可能会因设计师而停滞不前。(就好比我来公司参与的第一款OA开发)
 
 
做现实可行的设计


有了一个最终产品将如何实现的明确印象，设计师将拿出更多实际可行的概念。作为开发进程中不可或缺的一份子，设计师肩负着确保他们的设计能够顺利转移到网络介质上，同时还要考虑其可用性，网页易读性和可 实现性。一个对用户友好的网站不仅有简洁清晰的浏览顺序逻辑，还向用户提供一切所需的信息而不会显得咄咄逼人或是杂乱无章。想要知道一种 Web 布局是否可行的唯一途径就是亲自去了解如何建立一个网页。


使沟通更轻松


在几乎所有的设计与实现各自独立的产品中，设计组和实现组从没有满足过对方的期望，尤其是那些无形的产品，比如网站，软件和游戏。这通常归结于产品的期望和产品可行性的相互妥协，目前看来，这是难以完美统一的。解决之道是：设计师应该亲身尝试设计作品的实现，以避免沟通中的混淆，误解和误传。


方便的迭代开发过程


一个实践中的设计不应是绝对的。我的意思是，设计应该是灵活友好的，能够在修改以迎合系统技术限制的同时不扭曲其原有内涵。这些重复但必要的改动只能由原设计师来实现。一个设计师/开发者能够比开发人员把设计重提到设计师手里进行改动更加高效。而且设计师和开发者之间——事实上经常如此——会产生摩擦。


更好更和谐的结果


我常常喜欢把软件，网络或是游戏开发想成是管弦乐，而设计师是作曲家，开发者是乐团的指挥家。想象一下二者是同一个人将会怎样？交响曲将会是令人惊叹的，迷人的，纯正的！不仅是大师的神作，而且还是其本人亲自指挥的！


缩短开发时间


设计师同时充当程序员的角色意味着设计和编码的进度即使不是同时的也是连续的。结果就是开发周期的缩短——谁会不关心效率呢？


设计师更加市场化


现代的设计师需要提升自身的能力以保持个人价值，有一套技能是远远不够的，我们往往需要戴着不同的头衔：设计师，前端开发者，文章作者和项目经理。


通过学习实现你自己的设计，而不是让设计成为开发者手中的孤儿——你提升了自身价值。毕竟，在简历中提到设计和编码技能不会有坏处。相反，在这个金融危机时代的企业重组（参见：大规模裁员）和缩减开支的环境下，还能够强调一个人的重要性而免遭解雇。


总之：


设计师为人类创作，开发者为机器创作。因此，用户体验设计师们应该设计出最可行的用户界面并让开发者做出最可行的编程决策。虽然这有一定的道理，但当我研究一个用户界面的时候，我从代码中寻找灵感的努力却以失败而告终。总之，在头脑中有一个技术及可用性限制的正确观念还是更有好处。


 


注：


1. user experience design，简称UED。UED是进行产品策划的主力之一，他们用自己的知识、经验、设计能力拿出设计方案。ED不只是互联网专家，还是行业专家。能够用自己的互联网知识来设计出行业专家想实现的操作，而付诸以商业营销。


2. 用户体验（User Experience，简称UE）是一种纯主观在用户使用产品过程中建立起来的感受。


3. UCD（User Centered Design）是指以用户为中心的设计。是在设计过程中以用户体验为设计决策的中心，强调用户优先的设计模式。


 


三：网站制作流程
1.设计师根据功能需求出设计稿，相关负责人定稿交付前端进行开发；
 
2.前端根据相关分离规则对定稿进行切片、布局、特效添加，并交付程序；
 
3.套程序；
 
4.重复1、2、3步骤；
 
*我们今天主要讲一下第2部分
 
四：切片工作
 
切片工作可大可小，最优质的解决方案是不需要切片（前提是css足够强大，并且浏览器能充分支持，css3.0的强大就不多说了）；结合目前实际情况来说，我们还是不得不进行切片，一般切片都是为了对图片、背景图片（这里包括图标、渐变背景、边框阴影等）。
 
切片的原则:
 
1. 能不要使用图片的就不要用图片；
 
2. 图片在保证浏览的质量的基础上尽量压缩体积大小（质量与整体体积的平衡性）；这里说一下各图片格式的优缺点；
 
A. Gpg/jpeg  Jpg图片虽然没有Bmp图片那样多的颜色数，但它的显示效果还是比Gif图片理想一点，所以网页上比较大的图片用的一般都是Jpg格式,而且图片体积小；
 
缺点是不能做成动画；
 
B. Gif  256色的Gif图片也有它的优势：Gif图片可以将图片中的背景设为透明色，以便更好地与网页融为一体；Gif图片最大的优点是它能够在一幅图片中内 嵌多幅图片，并设置一定的时间间隔让这多幅图片循环交替显示，以此达到动画的效果，由着Gif图片的这些特点，它比较多地用在网页上显示面积比较小的图片 上，比如导航栏中的标题、一些小动画，等等。
缺点:显示效果不如flash/jquery理想，
 
C. Png PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。 一般应用于JAVA程序中，或网页或S60程序中是因为它压缩比高，生成文件容量小。Png图片是支持透明效果最好的格式； 
缺点：IE6不支持,没有JPG体积小，


 
 
3. 如果图片过大，可以考虑切割成多张小图片拼接（主要是针对网速实在很慢的用户，这样做的好处是使用一分为多的加载方式，加载速度更快）；
 
4. 在切边框背景的时候充分考虑素材的可重用性（说白了，就是可复制性）；
 
5. 更多....
 
下面我们欣赏一个网页:
 
推荐：这里是入口地址：http://sheepinthebox.com/one/
 


 
下面我们就看一下怎么根据效果图切片；
 
这里给各位设计师大大说个很困扰前端开发工程师的问题:
 
如果您设计的设计原稿PSD打开不是这样:


 
 
而是这样:


那么前端开发会很感激你的,这么一个细节,会节省大家的时间(不知道你有木有找图层找到抓狂???)。
 
关于网页设计上的字体使用：
 
没有人规定网页设计必须用什么字体，现在的字体五花八门，用途也十分广泛。但是作为网页使用，全站字体最好还是统一，（除非你的特殊字体是用做广告图片的，这个道理和网页设计遵循主体色彩搭配不超过3种颜色是一个道理）；
 
另外不要老是想着把文字做成图片，确实，图片肯定比单纯的文字好看，但是如果做一张图片只是为了用做标题，那就是很大浪费，徒增工作量。
 
 
五：Html+css+Js 制作静态页面
 
抛开网上哪些哗众取宠说什么editplus 文件编辑软件很牛的种种言论（其实个人觉得这些争执都是闲的蛋疼的人才会提出来，如果都按照他们的逻辑，纯手写代码，不借助工具提示来开发的话，那人为什么还要建造房屋，为什么还要生产锅碗瓢盆，反正，有手有嘴，一样能生存下去，还需要什么工具哦），
 
任何事物，存在即是理由，编程工具开发出来并且的到大部分人的认可，就是成功的；
扯远了，郑重推荐网页制作工具：Adode dreamweaver ；目前我用过的比较新的版本是Adode dreamweaver cs5 下载地址，百度一下；它至少让我纯手写的开发效率提高70%（尤其是对初学者更明显）；
另外给初学者推荐一个自学网站：http://www.w3school.com.cn/html/html_intro.asp
 
 
 
1.打开DW，进入主界面：


 
2.点击“文件”菜单选择“新建”命令，在弹出的窗口选择你要新建的文件格式（如：html /  xhtml / css / js / php.....甚至是模版文件，这里我们新建Html文档；
 
 
 
3.点击“创建”，文件创建成功，DW自动打开文件；如果要保存，请使用CTRL+S组合键
 


 
上图是代码窗口截图；可以看到DW自动为我们创建了标准的Html结构；现附上源码，大家一起研究：
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
 
<body>
</body>
</html>
 
抛开其他的东西不管，我们只关注 <body></body>（这里我特意加了背景色）；大家平常浏览网页看到的所有内容都在这个标签里面，比如我们随便打一句话：(下面的红色部分)
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
 
<body>
Hello,there. This is my first front-page. 
</body>
</html>
 
保存之后，按F12浏览效果如下


 
怎么样，有木有感觉自己是代码高手~~~~0 . 0
 
下面我们来认识一下HTML、Css以及Js，回到刚才Sheep In The Box One网页；
 
A. 我们可以看到，默认状态下我们能看到的不动的所有东西，就是Html+CSS构建的;
B. 鼠标经过导航出现的特效，就是Js效果，Js有很多现成的插件可以使用，他们能大大提高我们的工作效率，比如jquery等等。
 
注：一个html网页应该至少包括<html>  <head></head>  <body></body>  </html>
 
六：Html的学习
什么是 HTML？


HTML 是用来描述网页的一种语言。（从PS的角度来说，就好比图层，文字，渐变，混合选项等等）
· HTML 指的是超文本标记语言 (Hyper Text Markup Language)
· HTML 不是一种编程语言，而是一种标记语言 (markup language)
· 标记语言是一套标记标签 (markup tag)
· HTML 使用标记标签来描述网页
HTML 标签


HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
· HTML 标签是由尖括号包围的关键词，比如 <html>
· HTML 标签通常是成对出现的，比如 <b> 和 </b>
· 标签对中的第一个标签是开始标签，第二个标签是结束标签
· 开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页


· HTML 文档描述网页
· HTML 文档包含 HTML 标签和纯文本
· HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
 
例子解释


· <html> 与 </html> 之间的文本描述网页
· <body> 与 </body> 之间的文本是可见的页面内容
· <h1> 与 </h1> 之间的文本被显示为标题
· <p> 与 </p> 之间的文本被显示为段落
提示：学习 HTML 最好的方式就是边学边做实验。http://www.w3school.com.cn/为您准备了很好的 HTML 编辑器。使用这个编辑器，您可以任意编辑一段 HTML 源码，然后单击 TIY 按钮来查看结果。
 
Html标签列表
按字母顺序排列


DTD：指示在哪种 XHTML 1.0 DTD 中允许该标签。S=Strict, T=Transitional, F=Frameset.
标签
描述
DTD
<!--...-->
定义注释。
STF
<!DOCTYPE> 
定义文档类型。
STF
<a>
定义锚。
STF
<abbr>
定义缩写。
STF
<acronym>
定义只取首字母的缩写。
STF
<address>
定义文档作者或拥有者的联系信息。
STF
<applet>
不赞成使用。定义嵌入的 applet。
TF
<area>
定义图像映射内部的区域。
STF
<b>
定义粗体字。
STF
<base>
定义页面中所有链接的默认地址或默认目标。
STF
<basefont>
不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
TF
<bdo>
定义文字方向。
STF
<big>
定义大号文本。
STF
<blockquote>
定义长的引用。
STF
<body>
定义文档的主体。
STF
<br>
定义简单的折行。
STF
<button>
定义按钮 (push button)。
STF
<caption>
定义表格标题。
STF
<center>
不赞成使用。定义居中文本。
TF
<cite>
定义引用(citation)。
STF
<code>
定义计算机代码文本。
STF
<col>
定义表格中一个或多个列的属性值。
STF
<colgroup>
定义表格中供格式化的列组。
STF
<dd>
定义定义列表中项目的描述。
STF
<del>
定义被删除文本。
STF
<dir>
不赞成使用。定义目录列表。
TF
<div>
定义文档中的节。
STF
<dfn>
定义定义项目。
STF
<dl>
定义定义列表。
STF
<dt>
定义定义列表中的项目。
STF
<em>
定义强调文本。
STF
<fieldset>
定义围绕表单中元素的边框。
STF
<font>
不赞成使用。定义文字的字体、尺寸和颜色。
TF
<form>
定义供用户输入的 HTML 表单。
STF
<frame>
定义框架集的窗口或框架。
F
<frameset>
定义框架集。
F
<h1> to <h6>
定义 HTML 标题。
STF
<head>
定义关于文档的信息。
STF
<hr>
定义水平线。
STF
<html>
定义 HTML 文档。
STF
<i>
定义斜体字。
STF
<iframe>
定义内联框架。
TF
<img>
定义图像。
STF
<input>
定义输入控件。
STF
<ins>
定义被插入文本。
STF
<isindex>
不赞成使用。定义与文档相关的可搜索索引。
TF
<kbd>
定义键盘文本。
STF
<label>
定义 input 元素的标注。
STF
<legend>
定义 fieldset 元素的标题。
STF
<li>
定义列表的项目。
STF
<link>
定义文档与外部资源的关系。
STF
<map>
定义图像映射。
STF
<menu>
不赞成使用。定义菜单列表。
TF
<meta>
定义关于 HTML 文档的元信息。
STF
<noframes>
定义针对不支持框架的用户的替代内容。
TF
<noscript>
定义针对不支持客户端脚本的用户的替代内容。
STF
<object>
定义内嵌对象。
STF
<ol>
定义有序列表。
STF
<optgroup>
定义选择列表中相关选项的组合。
STF
<option>
定义选择列表中的选项。
STF
<p>
定义段落。
STF
<param>
定义对象的参数。
STF
<pre>
定义预格式文本。
STF
<q>
定义短的引用。
STF
<s>
不赞成使用。定义加删除线的文本。
TF
<samp>
定义计算机代码样本。
STF
<script>
定义客户端脚本。
STF
<select>
定义选择列表（下拉列表）。
STF
<small>
定义小号文本。
STF
<span>
定义文档中的节。
STF
<strike>
不赞成使用。定义加删除线文本。
TF
<strong>
定义强调文本。
STF
<style>
定义文档的样式信息。
STF
<sub>
定义下标文本。
STF
<sup>
定义上标文本。
STF
<table>
定义表格。
STF
<tbody>
定义表格中的主体内容。
STF
<td>
定义表格中的单元。
STF
<textarea>
定义多行的文本输入控件。
STF
<tfoot>
定义表格中的表注内容（脚注）。
STF
<th>
定义表格中的表头单元格。
STF
<thead>
定义表格中的表头内容。
STF
<title>
定义文档的标题。
STF
<tr>
定义表格中的行。
STF
<tt>
定义打字机文本。
STF
<u>
不赞成使用。定义下划线文本。
TF
<ul>
定义无序列表。
STF
<var>
定义文本的变量部分。
STF
<xmp>
不赞成使用。定义预格式文本。


 
这些有颜色的标签是有超链接的，大家可以打开进去看详细介绍。
 
这里说一下Html文档类型<!DOCTYPE>    
注释：<!DOCTYPE> 位于页面顶部，而且标签没有结束标签！
 
<!DOCTYPE> 有三种结构，分别如下：
 
1. HTML Strict DTD


如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
 
2. HTML Transitional DTD


Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 HTML 的呈现特性时，请使用此类型：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
 
3.Frameset DTD


Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "
http://www.w3.org/TR/html4/frameset.dtd">
 
七：CSS相关知识
CSS 概述


· CSS 指层叠样式表 (Cascading Style Sheets)
· 样式定义如何显示 HTML 元素
· 样式通常存储在样式表中
· 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
· 外部样式表可以极大提高工作效率
· 外部样式表通常存储在 CSS 文件中
· 多个样式定义可层叠为一
 
为什么要把CSS单独放到新的文件里面？
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。
由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。
所有的主流浏览器均支持层叠样式表。
样式表极大地提高了工作效率


样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
多重样式将层叠为一个


样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠次序


当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1 浏览器缺省设置
2 外部样式表
3 内部样式表（位于 <head> 标签内部）
4 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
 
CSS 语法


CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
 
下面这行代码的作用是将 h1元素内的文字颜色定义为红色，同时将字体大小设置为14像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}


 
值的不同写法和单位


除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：
p { color: #ff0000; }
为了节约字节，我们可以使用 CSS 的缩写形式：
p { color: #f00; }
我们还可以通过两种方法使用 RGB 值：
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。
 
记得写引号


提示：如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}
多重声明：


提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红 色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上 分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。就像这样：
p {text-align:center; color:red;}   
你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：
p {
  text-align: center;
  color: black;
  font-family: arial;
}
关于CSS，我个人推荐使用小写英文字母书写。这样更符合规范。
选择器的分组


你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
h1,h2,h3,h4,h5,h6 {
  color: green;
  }
1.css选择器简介


要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。 　　
HTML页面中的元素就是通过CSS选择器进行控制的。
1.1 类别选择器


类选择器根据类名来选择 　　前面以”.”来标志，如： 　　
.demoDiv{ 
color:#FF0000; 
} 
在HTML中，元素可以定义一个class的属性。 　　如： 　　
<div> 
这个区域字体颜色为红色 
</div> 
同时，我们可以再定义一个元素：
 
<p> 
这个段落字体颜色为红色 
</p> 
最后，用浏览器浏览，我们可以发现所有class为demoDiv的元素都应用了这个样式。包括了页面中的div元素和p元素。 　　
上例我们给两个元素都定义了class，但如果有很多个元素都会应用这个元素，那得一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”。 　　
我们可以改成这样来定义。 
<div> 
<div> 
这个区域字体颜色为红色 
</div> 
同时，我们可以再定义一个元素： 
<p> 　　这个段落字体颜色为红色 　　</p> 
</div> 
这样，我们就只是定义了一个类，同时把样式应用到了所有的元素当中。
1.2 标签选择器


一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签 　　采用相应的CSS样式，(在大环境中你可能出于不同的位置，但是不管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里都是这身衣服)比如，在style.css文件中对p标签样式的声明如下： 　　
p{ 
font-size:12px; 
background:#900; 
color:090; 
} 
复制代码则页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色) ，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改 　　background属性就可以了，就这么容易！
1.3 ID选择器


根据元素ID来选择元素，具有唯一性。 　　
前面以”#”号来标志，在样式里面可以这样定义： 　　
#demoDiv{ 
color:#FF0000; 
} 
这里代表id为demoDiv的元素的设置它的字体颜色为红色。 　　
我们在页面上定义一个元素把它的ID定义为demoDiv，如： 
<div id="demoDiv"> 
这个区域字体颜色为红色 
</div> 
 
用浏览器浏览，我们可以看到因为区域内的颜色变成了红色 　　再定义一个区域 
<div> 
这个区域没有定义颜色 
</div> 
用浏览器浏览，与预期的一样，区域没有应用样式，所以区域中的字体颜色还是默认的颜色黑色。
1.4 后代选择器


后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，后代选择器用两个常用选择器，中间加一个空格表示。其中前面的常用选择器选择父元素，后面的常用选择器选择子元素，样式最终会应用于子元素中。如：
<style> 
.father.child{ color:#0000CC; } 
</style> 
<p> 
黑色 
<label>
蓝色 
<b>也是蓝色</b> 
</label> 
</p> 
这里我们定义了所有class属性为father的元素下面的class属性为child的颜色为蓝色。后代选择器是一种很有用的选择器，使用后代选择器可以更加精确的定位元素。
1.5 子选择器


 　请注意这个选择器与后代选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选 择，而子选择器是通过“>”进行选择，我们看下面的代码： 　　Example Source Code 
CSS： 　　
#links a {color:red;} 
#links > a {color:blue;} 
HTML： 　　
<p id="links"> 
<a href="#">Div+CSS教程</a>> 
<span><a href="#">CSS布局实例</a></span> 
<span><a href="#">CSS2.0教程</a></span> 
</p> 
我们将会看到第一个链接元素“Div+CSS教程”会显示成蓝色，而其它两个元素会显示成红色。当然，或许你的浏览器并不支持这样的CSS选择符。我们在一开始也强调了不太兼容的现状。
 
子选择器（>）和后代选择器（空格）的区别：都表示“祖先-后代”的关系，但是>必须是“爸爸>儿子”，而空格不仅可以是“爸爸儿子”，还能是“爷爷儿”、“太爷爷儿子”。
1.6 伪类选择器


有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。 
a:link{  color:#999999; } 
a:visited{  color:#FFFF00; } 
a:hover{   color:#006600; } 
input:focus{  background:# E0F1F5; }/* IE不支持，用Firefox浏览可以看到效果 */ 
Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。 　　
伪类不仅可以应用在链接标签中，也可以应用在一些表单元素中，但表单元素的应用IE不支持，所以一般伪类都只会被应用在链接的样式上。
1.7 通用选择器


通用选择器用*来表示。例如： 　　
*{ font-size: 12px; } 
表示所有的元素的字体大小都是12px；同时通用选择器还可以和后代选择器组合。 　　例如： 　　
p *{ …… } 
表示所有p元素后代的所有元素都应用这个样式。但是与后代选择器的搭配容易出现浏览器不能解析的情况，比如像这样子： 　　
<p> 　　所有的文本都被定义成红色 　　<b>所有这个段落里面的子标签都会被定义成蓝色</b> <p>所有这个段落里面的子标签都会被定义成蓝色</p> <b>所有这个段落里面的子标签都会被定义成蓝色</b> <em>所有这个段落里面的子标签都会被定义成蓝色</em> </p> 
这个例子里面p标签里面嵌套了一个p标签，这个时候样式可能会出现与预期结果不相同的结果。
1.8 群组选择器


当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如： 
p, td, li { line-height:20px; color:#c00; } 
#main p, #sider span { color:#000; line-height:26px; }
 
.www_52css_com,#main p span { color:#f60; } 
.text1 h1,#sider h3,.art_title h2 { font-weight:100; } 
 
使用群组选择器，将会大大的简化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率，同时也减少了CSS文件的体积。
1.9 相邻同胞选择器


我们除了上面的子选择器与后代选择器，我们可能还希望找到兄弟两个当中的一个，如一个标题h1元素后面紧跟了两个段落p元素，我们想定位第一个段落p元素，对它应用样式。我们就可以使用相邻同胞选择器。看下面的代码： 　　
Example Source Code CSS 
h1 + p {color:blue} 
HTML 
<h1>一个非常专业的CSS站点</h1> 
<p>Div+CSS教程中，介绍了很多关于CSS网页布局的知识。</p> 
<p>CSS布局实例中，有很多与CSS布局有关的案例。</p> 
 
我们将会看到第一个段落“Div+CSS教程中，介绍了很多关于CSS网页布局的知识。”文字颜色将会是蓝色。而第二段则不受此CSS样式的影响。 　　
 
+和~的区别：类似上面一个，两者都表示兄弟关系，但是+必须是“大哥+二哥”，~还能是“大哥~三弟”、“二哥~四妹”
1.10 属性选择器


您可以用判断html标签的某个属性是否存在的方法来定义css 
例如： abbr[title]{ color:#FF0000; } 
表示abbr标签是否有title属性，如果有则应用这个样式。 　　
也可以用判断html标签的某个属性值的方法来定义css 
例如： p[title='app']{color:#FF0000; } 
这里所有p标签中，title属性为app的都会应用这个样式。
1.11 总结


css3定义中有更多的选择器类型，但由于各浏览器支持不一，所以不推荐使用，在此不详细叙述
下面简单说明一下CSS的盒模型（box-modle）
　什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。


盒子的宽度=contentWidth+padding*2+border*2
盒子的高度=contentHeight+padding*2+border*2
 
 
八：Js/JQuery 部分
如果把Html+Css+Js制作网页比作去食堂吃饭.那么食堂准备的餐具就是好比Html+Css ，在餐具被制作出来之前，必然有设计师对餐具进行样图设计（PS设计稿），然后交付相关部门生产（Html+Css），最后交给食堂打饭菜的工作人员（套程序）根据顾客的要求（可以是搜索指令,超链接，或者简单的新闻列表）进行装盘，顾客拿到饭菜并食用（浏览感兴趣的网页内容），一套流程就结束了。
但是 Js 在这过程中起到什么作用呢？
理想的的打饭模式应该是顾客自动排队（JS重构页面），按次序打饭菜（页面预加载技术），食堂提前通知顾客今天有什么菜，什么价位，有哪些特色菜，特价菜（JS弹窗），吃完饭剩下的餐具改怎么解决等等（JS操作DOM）。
上面只是一个比喻。但是Js的出现确实给网页带来了翻天覆地的变革，各式各样的漂亮网页，基于Js 谷歌引领并发扬光大Ajax技术。让用户实实在在感受到了无刷新技术带来的富客户端交互体验。后来又出现了Json数据格式。一个读取速度极快的存储格式等等，
Js基础：
JavaScript 是属于网络的脚本语言！
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
JavaScript 是因特网上最流行的脚本语言。
JavaScript 很容易使用！你一定会喜欢它的！
在数百万张页面中，JavaScript 被用来改进设计、验证表单、检测浏览器、创建cookies，等等等等。
JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比方说 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。
 
什么是 JavaScript？
o JavaScript 被设计用来向 HTML 页面添加交互行为。
o JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
o JavaScript 由数行可执行计算机代码组成。
o JavaScript 通常被直接嵌入 HTML 页面。
o JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。
o 所有的人无需购买许可证均可使用 JavaScript。
o 
Java 和 JavaScript 是相同的吗？


不同！
在概念和设计方面，Java 和 JavaScript 是两种完全不同的语言。
Java（由太阳微系统公司开发）很强大，同时也是更复杂的编程语言，就像同级别的 C 和 C++。
JavaScript 能做什么？


JavaScript 为 HTML 设计师提供了一种编程工具
HTML 创作者往往都不是程序员，但是 JavaScript 却是一种只拥有极其简单的语法的脚本语言！几乎每个人都有能力将短小的代码片断放入他们的 HTML 页面当中。
 
JavaScript 可以将动态的文本放入 HTML 页面
类似于这样的一段 JavaScript 声明可以将一段可变的文本放入 HTML 页面：document.write("<h1>" + name + "</h1>")
 
JavaScript 可以对事件作出响应
可以将 JavaScript 设置为当某事件发生时才会被执行，例如页面载入完成或者当用户点击某个 HTML 元素时。
 
JavaScript 可以读写 HTML 元素
JavaScript 可以读取及改变 HTML 元素的内容。
 
JavaScript 可被用来验证数据
在数据被提交到服务器之前，JavaScript 可被用来验证这些数据。
 
JavaScript 可被用来检测访问者的浏览器
JavaScript 可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。
 
JavaScript 可被用来创建 cookies
JavaScript 可被用来存储和取回位于访问者的计算机中的信息。
 
实例解释：


如果需要把一段 JavaScript 插入 HTML 页面，我们需要使用 <script> 标签（同时使用 type 属性来定义脚本语言）。
这样，<script type="text/javascript"> 和 </script> 就可以告诉浏览器 JavaScript 从何处开始，到何处结束。
<html>
<body>
<script type="text/javascript">
...
</script>
</body>
</html>
 
更多精彩的Javascript内容请见http://www.w3school.com.cn/js/index.asp
 
九：网页优化：
 
网页优化包含html优化、css优化、Js优化、程序代码优化，其中html优化是最常见的。
 
Html优化：
Html优化包含：图片大小压缩，网页html代码的优化，图片导出优化就不谈了，这里说下html代码优化，例如下面一段代码：
<div>
<ul>
<li><a>这里是超链接列表</a></li>
<li><a>这里是超链接列表</a></li>
<li><a>这里是超链接列表</a></li>
<li><a>这里是超链接列表</a></li>
</ul>
</div>
这里无非就是要展现一段超链接列表，上面的代码运行出来是没有问题的，但是从Html优化的角度来说，我们完全可以这样。
<div>
<a>这里是超链接列表</a>
<a>这里是超链接列表</a>
<a>这里是超链接列表</a>
<a>这里是超链接列表</a>
</ul>
</div>
怎么样，有木有小清新的感觉？没错，这就是Html优化，不能代码减少方便维护，更能加快网页的载入速度，
 
css优化
Css优化主要是CSS的可延展性，重利用性等方面的优化。比如：
 
body{
font-size:12px;
font-family:"宋体"；
}
 
div{
font-size:12px;
font-family:"宋体"；
}
 
上面分别设定了Div和Body 的字体大小和文字字体，要知道，这并不影响我们的网站，以为上面的代码是完全正确的，但是从Css优化的角度来讲，body是整个页面的统一样式，绝大部分的html标签都会继承body的样式，也就是说上面的代码可以优化成：
 
body{
font-size:12px;
font-family:"宋体"；
}
 
这是完全正确的，节省了开发时间，更重要的是，我们以后要修改文字格式，只需要改动一个地方，很优秀吧。
 
Js优化：
让我们再回去看看刚才那个网页，这次我们主要看鼠标经过导航的特效，还记得当我第一次看到类似特效的时候，我看了十几遍，在确定不是flash制作的时候，我被镇压了，确实很炫。而且大家要知道，这很简单，无非是调用几个JQuery指令。
 
大家是做设计的，肯定知道最开始的动画片是把一段动画按照顺序画出来重叠在一起，一张画纸一张画纸的翻页，当画纸动起来的时候，动画就产生了，这就是动画的原理，JS也是一样。
 
说下Js动画原理：  通过JS使Html元素产生动画是一个循环指令，这个循环不断的获取Html标签的位置或者CSS属性，在根据设定好的值去匹配，从而到达产生动画的效果；
 
 
了解了动画的原理之后，我们来谈谈JS优化，
 
1、字符串的拼接
2、for循环
3、减少页面的重绘
4、减少作用域链上的查找次数
5、避免双重解释


今天的交流会就到这里,感谢大家的参与,希望大家能对前端开发产生兴趣,大家私下可以再交流！！！最后留一句话给大家互勉，再牛逼的技术，如果不能变成商业收入，那也是一文不值的。这在中国特别明显，这或许就是我们做技术的悲哀~