PC端静态网页应用开发

时间：2023-05-31 05:09:02 | 来源：网站运营

时间：2023-05-31 05:09:02 来源：网站运营

PC端静态网页应用开发：

页面开发的常见概念和布局流程

版心

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

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

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

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

页面布局流程

1.确定版心（可视区域）

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

3.制作HTML页面,css文件。

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

标签页icon图标

大部分网站在标签页标题位置会添加网站的icon图标

图片的文件名要以favicon.ico命名，文件需要与index.html文件同级存储。

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

css分级引入

css文件设置需要根据功能进行分组管理：目的是为了提取出多个页面的公共部分，提供多个HTML同时引用。

公共部分页可以划分范围，有的是所有网站能用的，有的是某几个网站公共的部分。

常见css的分层组织：

清除默认样式css、网站的公共样式、每个页面自己独有的css

注意书写顺序，引入多层css时，需要按照后面的层叠前面的css进行设置，使用页面独有的样式层叠公共的样式。

清除默认样式

使用范围：所有网站都能使用。

命名：reset.css

引入时必须作为第一层引入，网页中独有的样式可以层叠掉reset中的样式

注意：reset.css文件写完后不要在更改

公共样式

使用范围：单独的一个网站所有页面、几个页面

制作方法：从设计图中观察，找到所有页面或多个页面公共的部分，划分成不同的模块分别进行.css文件的书写。

命名习惯：common.css或者模块名.css

多个网站页面的公共部分书写完之后不要后期更改，一旦更改，多个引用的HTML页面都会发生变化。

注意类名的使用，公共文件中的类名一般不要在其他的css文件中再用。

引入顺序：一般在reset.css后面，单独样式文件前面

页面独有样式

使用范围：单独的一个HTML页面

制作方法：找到页面独有的而其他页面没有的样式，单独书写在一个.css文件中，只有对应的HTML文件能够引用

命名习惯：一般文件名与HTML文件名保持一致。

引入顺序：在所有公共样式后面

注意：使用单独样式文件去层叠前面公共样式时，需要注意选择器权重

开发项目

header区域

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

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

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

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

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

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

login-banner区域

login登陆

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

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

search区域

搜索框部分

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

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

文本框input标签可以通过一个placeholder属性，设置默认提示文本。

content区域

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

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

多余文字显示城。。。省略号

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

footer区域

footer：页面底部的常用名。

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

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

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

copyright版权区域

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

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

backtop区域

返回顶部设置，通常使用a标签进行结构搭建

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

动画效果：后期使用js实现

快速搭建公共结构

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

方法：直接复制index.html文件，删除不需要的结构，保留公司页需要的公共结构部分

同时删除不需要的css文件引入的link标签，保留需要的公共样式文件

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

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

下一章 移动web开发基础