013、静态网页开发

1、版心

阅读报纸时我们会发现，虽然其中内容很多很丰富，但是经过合理的排版布局，版面整体依然清晰、易读。
同样，在制作网页过程中，如果要让页面结构清晰、有条理，也需要对网页内容进行“排版”。
版心：是指网页中主要内容所在的区域。一般在浏览器窗口中水平居中显示，从而让用户的视线更集中。
常见的版心宽度值包括960px、980px、1000px、1200px等。
制作方法:使用标准流中的margin居中方法。

2、页面布局流程

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

确定页面的版心(可视区域)。
分析页面中的行模块，以及每个行模块中的列模块。
制作 HTML页面，CSS文件。
CSS初始化，然后开始运用盒子模型的原理，通过 DIV+CSS布局来控制网页的各个模块。

3、常见布局类型

一个网页可能同时包含2种以上布局类型。

一列固定宽度且居中

两列左窄右宽型

通栏平均分布型

4、开发流程

5、网页开发常见技巧和方法

文件结构

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

<head>内的配置

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

<title>网页标题

<title>百度一下，你就知道</title>

标签页 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进行设置，使用页面独有的样式层叠公共的样式。

清除默认样式

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

公共样式

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

页面独有样式

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

整个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">

6、首页 index.html 结构布局

header 区域

header ：网页顶部结构常用命名，通常包含 logo、导航nav等内容。

布局类型：通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分。

整体结构：100%的 div>版心的div

注意：为了避免更改公共的版心样式，<div>需要重新添加一个class属性值。

logo：使用h1>a结构，可以适当添加SEO搜索的关键字。

nav导航：常用ul>li>a列表结构搭建。

login-banner 区域

布局类型：通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分。

注意：实际网页中，部分表单效果通常使用其他标签+css样式的效果进行模拟，比如按钮、下拉菜单等。

search区域

search：搜索框部分。

布局类型：通栏背景，内部包含居中的主要内容。

搜索框区域表单：需要添加<form>标签，保证数据能够提交数据库。

补充：文本框<input>标签可以通过一个placeholder属性，设置默认提示文本，点击文本框输入文字后，placeholder属性的内容会自动消失。

content 区域

content ：网页的主要内容区域，用于展示更多的产品、信息等。

布局类型：通栏，底部设置边框，内容为版心居中。

content内部包括四个部分: .main主要区域列表焦点图、.hot_recruit 热门职位、.hot_company 热门公司、.hot_links 热门链接。

.main 部分

布局类型:左窄右宽的两列布局，通过浮动实现。

aside ：侧边栏常用命名，整体为无序列表结构，表现为一种特殊的下拉菜单效果，鼠标移上<li>非后显示内部的子级元素。下拉菜单的列表中，推荐使用定义列表结构搭建。

注意：侧边栏aside这种结构中的数据是可能动态发生变化的，我们需要搭建好HTML结构和正确的css样式，让HTML结构足够清晰，方便后期后端开发人员传入数据。

banner：焦点图部分为滚动轮播图效果，点击滚动特效待后期学完JavaScript后制作。

布局方式：整体使用定位制作，与淡入淡出轮播图不同的是图片所在无序列表中，图片需要浮动显示，而不是定位到同一点。特殊的需要添加魔术替换图片，方便后期JavaScript制作。

box-shadow

CSS3中新增的盒子阴影属性box-shadow。

box-shadow：水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 阴影颜色 内/外阴影;box-shadow:3px 3px 5px 4px rgb(0,0,0);

多余文字显示成...（省略号）

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

.hot_recruit 部分

热门职位部分是一种tab选项卡结构，并且与后面的热门公司和热门链接有类似的结构和样式，需要谨慎提取公共样式，通过公共类名设置CSS，热门职位独有的样式需要使用单独的类名设置，避免影响其他两个部分。

布局类型：tab栏选项卡结构，整体为上下对齐的版心结构。

标题部分：浮动制作，当前展示的部分标签使用current的类名进行标记，设置特殊样式。

详细内容布局类型：平均分步型，使用浮动制作。

补充：多余文字显示成...省略号形式，通过三行代码实现。

.hot_company 部分

热门公司部分与热门职位结构类似。

本模块需要更改一些公共样式，注意使用新的类名进行覆盖，保证选择器的权重足够。

注意：链接内容部分涉及到后期JavaScript特效，鼠标点击显示和隐藏，需要提前将HTML结构和css样式书写完整，暂时设置为display : none;

footer 区域

footer ：页面底部的常用名。

布局类型：通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分。

其他登录方式部分：左浮动，注意其中的鼠标移上显示定位元素效果。

其他链接服务部分：使用定义列表制作结构。

copyright 区域

版权区域一般是一些文字性信息，样式较为简单。

布局类型：通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分。

backtop 区域

返回顶部的设置，通常使用<a>进行结构搭建。

定位方式：固定定位，位置保持与版心固定的位置，避免由于分辨率不同元素位置差异太大。

动画效果：后期使用JavaScript实现。

公司页 company.html 结构布局——快速搭建公共结构

首页制作完毕后，分析与其他页面的共同之处，按照模块进行拆分复制选择。

方法：直接复制index.html文件，删除不需要的结构，保留公司页需要的公共结构部分，同时删除不需要的css文件引入的<link>标签，保留需要的公共样式文件。

注意：记得更改nav导航中的当前选中页的class 。

公共结构搭建完毕后，可以继续书写公司页面独有的结构和样式。