一、网页开发流程
二、软件开发流程
由软件定义、开发、使用、维护到报废的过程。
一般包括问题定义、可行性分析、需求分析、总体设计、详细设计、编码、测试和维护。
软件开发涉及到的部门有:运营人员—产品经理—开发人员—测试人员—运维人员
软件开发过程:
问题定义:确定开发任务到底“要解决的问题是什么”
可行性分析:分析上一个阶段所确定的问题到底是否可行
需求分析:对用户要求进行具体分析,明确“目标系统要做什么”,把用户对软件系统的全部要求以需求说明书的形式表达出来。(产品经理)
总体设计:把软件的功能转化为所需要的体系结构(开发工程师,架构师)
详细设计:明确“怎么样具体实现这个系统”(开发工程师)
编码:取适合的程序设计语言对每个模块进行编码(开发工程师)
测试:通过各种类型的测试使软件达到预定的要求(测试工程师)
维护:软件交付给用户使用后,对软件不断查错、纠正和修改,使系统持久地满足用户的需求(运维工程师、开发工程师)
三、版心
阅读报纸时我们会发现,虽然其中内容很多很丰富,但是经过合理的排版布局,版面整体依然清晰、易读。
同样,在制作网页过程中,如果要让页面结构清晰、有条理,也需要对网页内容进行“排版”。
版心:是指页面中主要内容所在的区域。一般在浏览器窗口中水平居中显示,从而让用户的实现更集中。
常见的版心宽度值包括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实现。
更多推荐
(46)HTML网页开发流程
发布评论