第零章 HTML启蒙知识与网站开发流程

时间 2019-11-30

标签 html 启蒙知识网站开发流程栏目 HTML 繁體版

原文原文链接

Web前端启蒙知识：
一、软件架构模式
a)B/S架构：Browser-Server 浏览器服务器模型
b)C/S架构：Client-Server 客户端服务器模型
注1：浏览器是运行网页的应用程序
注2：B/S架构的运行模式：请求(request)-响应(response)模式css

二、静态网页和动态网页的区别：是否与服务器交互html

三、网页的四个组成部分
a)内容——图片、文字、音频视频等。【后期存储在数据库中】
b)结构——HTML,定义网页内容
c)表现——CSS，修饰美化
d)行为——JavaScript，JQuery。动做和事件前端

四、B/S 结构中的四个部分分别是：
（1）由网页组成的Web应用程序;
（2）存放 Web 应用程序并提供网页浏览服务的 Web 服务器；
（3）解析网页并显示网页给用户浏览的客户端浏览器；
（4）在客户端和 Web 服务器端提供通信的 HTTP 网络协议。数据库

五、HTML基本框架浏览器

<html>
<head>
 <title>标题</title>
</head>
<body>
 内容
</body>
</html>

注：head头部；body身体——包含网页内容（能够是文本、图像等）服务器

6.HTML基本语法
<开始标签属性1="属性值1;属性值2" 属性2="属性值">元素内容</结束标签>
注：多个属性空格隔开，多个属性值分号分隔。网络

7.CSS基本语法
选择器{
属性:属性值;
属性:属性值属性值属性值;
……
}架构

网站开发流程框架

1、开发流程主要包括需求分析、网站制做、网站发布以及测试。ide

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 某类商品展现页(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 后台程序开发：实现网站和数据库的链接、内容动态添加或修改等后台功能。

四、测试：

l 测试网页包括测试如下内容。

n 测试网页是否符合需求。

n 测试并修复网页可能出现的漏洞(bug)。

u 根据客户使用的浏览器的类型和版本，测试可否同时兼容。通常要求能同时兼容 IE 6.0、 IE 7.0、IE8.0 及 Firefox3.5，并符合 W3C XHTML 1.0 标准。

五、发布网站

l 网站空间

n 网站空间就是存放网站内容的空间，通常对应为网站服务器的某个文件夹目录。

l 域名(网址)

n 本地的网站内容经过 FTP 等方式上传到虚拟主机空间后，还须要一个可供他人访问的 URL地址(即网址)。域名解析

六、 Dreamweaver 建立站点

l 创建站点及相关的目录结构

n 创建站点

n 创建目录结构

n 中小型网站，通常会建立以下通用的目录结构。

u images 目录：存放网站的全部图片。

u js 目录：存放 JavaScript 脚本文件，后缀名为*.js，JavaScript

u css 目录：存放 CSS 文件，即前面曾说起的外部 CSS 文件，实现内容和样式的分离。

u 对于网站下的各网页文件，例如，index.html 等通常放在网站根目录下。

注意：网站目录及网页文件名通常都为小写，并采用表明必定含义的英文命名。

l 除非特殊应用外， DIV+CSS 布局绝对是首选。

七、命名规范

l Web页面的开发目前尚未相似 Java 或 C#方面的开发规范，但对于以上各DIV块，习惯采用以下命名规则 (这些命名甚至已列入 W3C 的 HTML 5 草案的规范中)：

container：容器

header：顶部

footer：底部

main：页面主体

logo：企业标志图片

content：页面主体内容

sidebar：侧边栏

l 各div块的样式能够采用 ID或 class通常大的 div区块(黑体标识的4个)用 ID。

八、设置浮动：

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