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>,以便对它们进行排版。