第零章 HTML启蒙知识与网站开发流程
Web前端启蒙知识：
1、软件架构模式
a)B/S架构：Browser-Server 浏览器服务器模型
b)C/S架构：Client-Server 客户端服务器模型
注1：浏览器是运行网页的应用程序
注2：B/S架构的运行模式：请求(request)-响应(response)模式
2、静态网页和动态网页的区别：是否与服务器交互
3、网页的四个组成部分
a)内容——图片、文字、音频视频等。【后期存储在数据库中】
b)结构——HTML,定义网页内容
c)表现——CSS，修饰美化
d)行为——JavaScript，JQuery。动作和事件
4、B/S 结构中的四个部分分别是：
（1）由网页组成的Web应用程序;
（2）存放 Web 应用程序并提供网页浏览服务的 Web 服务器；
（3）解析网页并显示网页给用户浏览的客户端浏览器；
（4）在客户端和 Web 服务器端提供通讯的 HTTP 网络协议。
5、HTML基本框架
<html> <head> <title>标题</title> </head> <body> 内容 </body> </html>
注：head头部；body身体——包含网页内容（可以是文本、图像等）
6.HTML基本语法
<开始标签 属性1="属性值1;属性值2" 属性2="属性值">元素内容</结束标签>
注：多个属性空格隔开，多个属性值分号分隔。
7.CSS基本语法
选择器{
属性:属性值;
属性:属性值 属性值 属性值;
……
}
网站开发流程
1、开发流程主要包括需求分析、网站制作、网站发布以及测试。
2、需求分析
1) Why——为什么需要建站?即明确组建网站的目的【目的】
l 应用程序的界面一般包括两类： 一种是桌面窗口形式(例如Windows 中的记事本、Office 等)，一般也称为 C／S 应用(Client／Server，客户端／服务器模式)
l 一种是采用网页的形式(例如表 9—1 例举的企业内部信息系统)，一般也称为 B／S 应用(Browser／Server，浏览器／服务器模式)
2) Who——谁来访问?即确定网站的目标受众【客户】
l 一般需要分析目标受众的年龄、兴趣爱好、经济状况等方面的问题。
l 美工人员在设计网站界面草图时，也需考虑时尚、明快的设计样式，包括整个网站的色彩、Logo、图标设计等。
3) What——内容是什么?即确定网站的内容【功能】
l 内容决定一切，内容价值决定了访问者的去离。我们需要结合公司的业务背景，设计相关内容的页面，充分展示网站的价值，让访问者尽快获取到自己需要的内容。
l 设计的主要页面有以下几个：
n 首页(index.htm) ：包括网站导航、商品广告、商品分类、版权声明等内容。
n 某类商品展示页(catlist.htm)：展示某类商品下的具体商品。
n 具体商品的详细介绍页(info.htm)：包括商品的名称、性能描述等。
n 购买商品页(buy.htm)：在线购买的商品情况，即购物车。
n 注册页(register.htm)：注册为网站会员。
n 登录页(login.htm)：使用账号登录网站。
n 帮助页(help.htm)：客户服务方面的帮助信息。
注：一般还需要美工人员使用 Photoshop 等工具，设计相应的页面效果图并提交给客户确认。
3、网站制作：
l 完整的网站制作包括以下两个过程。
n 前台页面制作：拿到美工的效果图以后，编写 HTML、CSS，将效果图转换为*.html 网页,其中包括图片收集、页面布局规划等工作。
n 后台程序开发：实现网站和数据库的连接、内容动态添加或修改等后台功能。
4、 测试：
l 测试网页包括测试以下内容。
n 测试网页是否符合需求。
n 测试并修复网页可能出现的漏洞(bug)。
u 根据客户使用的浏览器的类型和版本， 测试能否同时兼容。 一般要求能同时兼容 IE 6.0、 IE 7.0、IE8.0 及 Firefox3.5，并符合 W3C XHTML 1.0 标准。
5、 发布网站
l 网站空间
n 网站空间就是存放网站内容的空间，一般对应为网站服务器的某个文件夹目录。
l 域名(网址)
n 本地的网站内容通过 FTP 等方式上传到虚拟主机空间后，还需要一个可供他人访问的 URL地址(即网址)。域名解析
6、 Dreamweaver 创建站点
l 建立站点及相关的目录结构
n 建立站点
n 建立目录结构
n 中小型网站，一般会创建如下通用的目录结构。
u images 目录：存放网站的所有图片。
u js 目录：存放 JavaScript 脚本文件，后缀名为*.js，JavaScript
u css 目录：存放 CSS 文件，即前面曾提及的外部 CSS 文件，实现内容和样式 的分离。
u 对于网站下的各网页文件，例如，index.html 等一般放在网站根目录下。
注意：网站目录及网页文件名一般都为小写，并采用代表一定含义的英文命名。
l 除非特殊应用外， DIV+CSS 布局绝对是首选。
7、 命名规范
l Web页面的开发目前还没有类似 Java 或 C#方面的开发规范， 但对于以上各DIV块，习惯采用如下命名规则 (这些命名甚至已列入 W3C 的 HTML 5 草案的规范中)：
container：容器
header：顶部
footer：底部
main：页面主体
logo：企业标志图片
copyright：版权信息
content：页面主体内容
sidebar：侧边栏
l 各div块的样式可以采用 ID或 class一般大的 div区块(黑体标识的4个)用 ID。
8、 设置浮动：
l 用<div>标签分区并设置 ID 标识。
l 设置浮动
l 调整宽高及盒子属性实现实际效果。
本章总结：Ø
l 网站开发流程一般包括需求分析、网站制作、测试网页、发布网站几个环节，其中前期的需求分析非常重要，一般还需要美工人员设计界面草图及和客户进行反复确认。
l 制作网页前一般需要使用 Dreamweaver 工具搭建站点的目录结构，除此之外，还可以使用Dreamweaver 的智能提示功能，辅助编辑 HTML 代码。
l 首页整体布局的实现思路采用的是内容和样式分离的思想。
n 根据效果图规划并编写 HTML 组织结构，并尽量使用语义化的 HTML 标签。
n 在单独的 CSS 文件中设置相关的盒子属性，需要注意各 div 块的规范命名。
l 首页顶部实现的关键点有以下四点。
n 合理使用左右浮动，实现零散布局。
n 一图一文混编，并且在同一行，可以用 div-dl-dt-dd 分两类来实现布局。
n 偏移量技术的典型应用。
n 用 a：hover 伪类实现鼠标悬浮的特效。
l 首页左部实现的关键点有以下三点。
n 只用行高布局来实现多行文字布局的浏览器兼容。
n 区域衔接原则：在右侧或底部添加内边距来实现。
n 重要标题使用<hl>，以利于搜索引擎优化。
l 首页中部实现的关键点有以下三点。
n 利用 div-dt-dl-dd 的特点实现一图一文混编并需要多行布局的应用场景。
n <dt>和<dd>存在默认内边距与外边距，布局时应先清零。
n 把图片和文字分别放入不同的容器<dt>和<dd>，以便对它们进行排版。
