（46）HTML网页开发流程_html开发-CSDN博客

本文链接：https://blog.csdn.net/qq_36213140/article/details/122062103

一、网页开发流程

二、软件开发流程

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

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

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

软件开发过程：

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

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

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

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

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

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

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

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

三、版心

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

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

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

常见的版心宽度值包括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="images/1.jpg" alt="">
      <img src="images/2.jpg" alt="">
      <img src="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实现。