一、网页开发流程

二、软件开发流程

由软件定义、开发、使用、维护到报废的过程。

一般包括问题定义、可行性分析、需求分析、总体设计、详细设计、编码、测试和维护。

软件开发涉及到的部门有：运营人员—产品经理—开发人员—测试人员—运维人员

软件开发过程：

问题定义：确定开发任务到底“要解决的问题是什么”

可行性分析：分析上一个阶段所确定的问题到底是否可行

需求分析：对用户要求进行具体分析，明确“目标系统要做什么”，把用户对软件系统的全部要求以需求说明书的形式表达出来。（产品经理）

总体设计：把软件的功能转化为所需要的体系结构（开发工程师，架构师）

详细设计：明确“怎么样具体实现这个系统”（开发工程师）

编码：取适合的程序设计语言对每个模块进行编码（开发工程师）

测试：通过各种类型的测试使软件达到预定的要求（测试工程师）

维护：软件交付给用户使用后，对软件不断查错、纠正和修改，使系统持久地满足用户的需求（运维工程师、开发工程师）

三、版心

阅读报纸时我们会发现，虽然其中内容很多很丰富，但是经过合理的排版布局，版面整体依然清晰、易读。

同样，在制作网页过程中，如果要让页面结构清晰、有条理，也需要对网页内容进行“排版”。

版心：是指页面中主要内容所在的区域。一般在浏览器窗口中水平居中显示，从而让用户的实现更集中。

常见的版心宽度值包括960px、980px、1000px、1200px等。

制作方法：使用标准流中的margin居中方法。

四、页面布局流程

为了高页面制作的效率，布局时通常要遵守一定的布局流程，具体如下：

1.确定页面的版心（可视区域）。

2.分析页面中的行模块，以及每个行模块中的列模块。

3.制作HTML页面，CSS文件。

4.CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

五、常见的布局类型

5.1一列固定宽度且居中

5.2两列左窄右宽型

5.3通栏平均分布型

注：更多的情况，一个网页中可能同时包括2种以上的布局类型。

六、文件结构

网站中会包含多个.html文件和.css文件以及图片等多媒体文件，我们需要使用不同的文件夹分类进行管理。

文件夹最基本的结构包括:

七、<head>标签内的配置

真正的上线网站中，HTML文件中的<head>标签内部需要配置更多的内容。

如下是：利于SEO的三大标签

<head><meta name="keywords" content="拉勾招聘,互联网招聘,求职,找工作,招聘,招聘网站"><meta name="description" content="拉勾招聘是专业的互联网求职招聘网站。致力于提供真实可靠的互联网岗位求职招聘找工作信息，拥有海量的互联网人才储备，互联网行业找工作就上拉勾招聘，值得信赖的求职招聘网站。"><title>互联网求职招聘找工作-上拉勾招聘-专业的互联网求职招聘网站</title>
</head>

八、标签页icon图标

大部分网站在标签页标题位置会添加网站的icon图标。
图标的文件名要求以favicon.ico命名，文件需要与index.html文件同级存储。
使用方法，通过<link>标签进行引用，设置的属性包括:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

九、css分级引入

css文件设置需要根据功能进行分层管理:目的是为了提取出多个页面公共的部分，提供多个
HTML同时引用。公共的部分也可以划分范围，有的是所有网站能用的，有的是某几个网站
公共的部分。
css常见的分层组织:清除默认样式的css,网站的公共样式css,每个页面自己独有的css。
注意书写顺序，引入多层css时，需要按照后面的层叠前面的css进行设置，使用页面独有的
样式层叠公共的样式。

9.1清除默认样式

使用范围:所有网站都能使用。
制作方法:自己工作中进行积累，或者使用网络上已有的资源。
命名的习惯: reset.css
引入时必须作为第一层引入，网页中独有的样式可以层叠掉reset中的样式。
注意: reset.css 文件写完后不允许再次更改。

html {color:#000;background:#FFF
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {margin:0;padding:0
}
table {border-collapse:collapse;border-spacing:0
}
fieldset,img {border:0
}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal
}
ol,ul {list-style:none
}
caption,th {text-align:left
}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal
}
i,em {font-style: normal;
}
q:before,q:after {content:''
}
abbr,acronym {border:0;font-variant:normal
}
sup {vertical-align:text-top
}
sub {vertical-align:text-bottom
}
input,textarea,select {font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%;outline: none;border: 0;
}
legend {color:#000
}

9.2公共样式

使用范围:单独的一个网站所有的页面、几个页面。
制作方法:从设计图中观察，找到所有页面或多个页面公共的部分，划分成不同的模块分
别进行.css文件的书写。
命名习惯: common.css或者模块名.css
多个网站页面的公共部分书写完之后不允许后期更改，一-旦更改，多个引用的HTML页面
都会发生变化。需要注意类名的使用，公共文件中的类名一般不要在其他的css文件中再用。
引入顺序:一般在reset.css后面，单独样式文件前面。

9.3页面独有样式

使用范围:单独的一个HTML页面。
制作方法:找到页面独有的而其他页面没有的样式，单独书写在一个.css 文件中，只有对
应的HTML文件能够引用。
命名习惯:一般文件名与HTML的文件名保持一致，例如index.css, 如果拆分的更细致可
以使用多个单词的拼写，例如index_ banner.css 等。
引入顺序:在所有公共样式后面。
注意:使用单独样式文件去层叠前面公共样式时，需要注意选择器权重。

9.4整个css分层引入的顺序

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/index.css">

十、首页index.html结构布局

10.1header区域

header:网页顶部结构常用命名，通常包含logo、导航nav等内容。
布局类型:通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分。
整体结构: 100%的div>版心的div
注意:为了避免更改公共的版心样式，<div> 需要重新添加一个class属性值。
logo:使用h1> a结构，可以适当添加SEO搜索的关键字。
nav导航:常用ul> li> a列表结构搭建。

HTML：

<h1 class="logo"><a href="index.html">拉勾招聘|招聘|互联网|JAVA|前端|Python</a>
</h1>

CSS：

/* logo部分 */
.header-c .header-c-left .logo {/* 改变元素加载模式 */float: left;/* 盒模型属性 */width: 43px;height: 21px;padding-top: 9px;margin-right: 33px;
}
.header-c .header-c-left .logo a {display: block;width: 43px;height: 21px;background: url(../images/logo.png) no-repeat 0 0;text-indent: -999em;overflow: hidden;
}

10.2search区域

search :搜索框部分。
布局类型:通栏背景，内部包含居中的主要内容。
搜索框区域表单:需要添加<form>标签,保证数据能够提交数据库。
补充:文本框<input>标签可以通过一个placeholder属性，设置默认提示文本，点击文本
框输入文字后，placeholder 属性的内容会自动消失。

<input type="search" placeholder="请输入搜索内容">

10.3banner区域

banner：轮播图部分。

布局方式：外层banner-box盒子，内部有图片盒子和小圆点下标盒子。

 <div class="banner-box"><div class="pic-box"><img src="data:images/1.jpg" alt=""><img src="data:images/2.jpg" alt=""><img src="data:images/3.jpg" alt=""></div><div class="page"><label for="page1"></label><label for="page2"></label><label for="page3"></label></div></div>

10.4content区域

content:网页的主要内容区域，用于展示更多的产品、信息等。
布局类型:通栏，底部设置边框，内容为版心居中。
content内部包括主要部分和其他部分: .main 主要区域、其他部分类名可以根据区域内容设计，比如，.hot_ company热门公司、.hot_ links 热门链接等。

10.5 .main部分

布局类型:左窄右宽的两列布局，通过浮动实现。
aside :侧边栏常用命名，整体为无序列表结构，表现为一种特殊的下拉菜单效果，鼠标移
上<li>后显示内部的子级元素。下拉菜单的列表中，推荐使用定义列表结构搭建。
注意:侧边栏aside这种结构中的数据是可能动态发生变化的，我们需要搭建好HTML结构
和正确的Css样式，让HTML结构足够清晰，方便后期后端开发人员传入数据。

10.6补充:多余文字显示...省略号

.word_cut {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

10.7footer区域

footer :页面底部的常用名。
布局类型:通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分。
其他登录方式部分:左浮动，注意其中的鼠标移上显示定位元素效果。
其他链接服务部分:使用定义列表制作结构。

10.8copyright区域

版权区域一般是一些文字性信息，样式较为简单。
布局类型:通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分。

10.9backtop区域

返回顶部的设置，通常使用<a>进行结构搭建。
定位方式:固定定位，位置保持与版心固定的位置，避免由于分辨率不同元素位置差异太大
动画效果:后期使用JavaScript实现。

（46）HTML网页开发流程相关推荐

前端对接微信公众号网页开发流程，前期配置
微信公众号网页开发,其实就是我们开发的h5网页需要放到微信浏览器环境中使用,但是需要对接公众号授权,授权之后可以获取到用户的个人信息,以及可以使用公众号提供的一些API,如:图片上传.图片预览.获取位 ...
前端对接微信公众号网页开发流程，授权对接
前面讲到前端对接微信公众号网页开发流程,前期配置,本篇文章主要详细介绍关于公众号的授权对接. 一.引入微信js-sdk 在需要调用 JS 接口的页面引入如下 JS 文件 http://res.wx. ...
前端对接微信公众号网页开发流程，JSSDK使用
前面两篇文章讲解了前端对接微信公众号网页开发流程,前期配置和前端对接微信公众号网页开发流程,授权对接,本篇文章讲解关于微信JSSDK的使用,官方文档地址一.通过 config 接口注入权限验证配 ...
微信网页开发——随手笔记
一.公众号设置 1.账号详情: 公众号的头像.二维码.名称都是必须填写的,如果没有这些信息,是不能进行网页开发的. 2.功能设置 JS接口安全域名: ...
微信网页授权开发流程
最近项目中需要做微信分享,由于开发者文档中写的比较复杂,于是乎整理出来,以待日后方便使用. 1 第一步:用户同意授权,获取code: 接口 : https://open.weixin.qq.com/c ...
为微信开发填坑：微信网页支付的开发流程及填坑技巧
GitChat 作者:极笔北客原文:为微信开发填坑:微信网页支付的开发流程及填坑技巧关注微信公众号:「GitChat 技术杂谈」一本正经的讲技术 [不要错过文末彩蛋] 小程序作为微信之父张小龙钦 ...
为微信开发填坑：微信网页支付的开发流程及填坑技巧 1
GitChat 作者:极笔北客原文:为微信开发填坑:微信网页支付的开发流程及填坑技巧关注微信公众号:「GitChat 技术杂谈」一本正经的讲技术 [不要错过文末彩蛋] 小程序作为微信之父张小龙钦 ...
有关于微信公众号网页开发的流程（自己的看法）
微信官方文档 (真的很详细) 第一步: 网页授权回调域名网页服务内容这个网页回调域名是非常关键的,后面会讲解这个回调的域名的使用,回调字面意思就是会跳转的. 第二步: 使用微信官方的api进行co ...
信用风险评分模型开发流程
开发流程 1. 前期准备这个阶段主要是确定项目目标,要达到的效果,可以使用的资源,打算运用的方法. 确立目标y值:消费贷信用评分模型一般以历史M3+为坏客户定义标准,作为正类,用1表示,历史未逾期的 ...

（46）HTML网页开发流程