part1.3.1静态网页开发流程
时间：2023-07-26 01:27:01 | 来源：网站运营
时间：2023-07-26 01:27:01 来源：网站运营
part1.3.1静态网页开发流程：
开发流程
静态网页开发基础
版心
- 和报纸一样，要让内容丰富的情况下排版合理，且清晰易读，需要对内容进行合理的排版布局。
- 版心：指网页中主要内容所在的区域，一般在浏览器窗口中水平居中显示，从而让用户视线更加集中。
- 常见的版心宽度包括：960px 980px 1000px 1200px等
- 常用margin让版心水平居中
页面布局流程
- 确定页面版心
- 分析页面中的行模块，以及每个行模块中的列模块
- 制作HTML、css文件
- css初始化，然后开始运用盒子模型的原理，通过div+css布局来控制网页的各个模块。
常见的布局类型
更多时候，一个网页可能同时包括两个及以上的页面布局类型
文件结构
- 网站中会包含多个HTML和css文件以及图片多媒体文件，要使用不同的文件夹分类进行管理
- 文件夹基本结构包括（网站首页都叫index，不要出现中文）
<head>内的配置
- <title>网页标题：内带标题和口号
- icon图标：文件名以favicon.ico命名，文件与index.html同级存储，使用<link>引用，设置的属性包括
<link rel="shortcut icon"href="favicon.icon"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等
- 命名习惯：一般文件名和HTML文件名保持一致，例如index.css，如果拆分的更细致，可以使用多个单词的拼写，比如index_banner..css
- 引入顺序：在所有公共样式后
- 注意：使用单独样式层叠前面的公共样式时注意选择器权重。
header区域
header：网页顶部结构常用命名，通常包括logo、导航nav等内容。
布局类型：通栏背景，内部包含版心居中的主要内容。内容包含左、右浮动的两部分。
整体结构：100%的div>版心的div
注意：为了避免更改公共的版心样式，<div>需要重新添加一个class属性值
logo：使用h1>a结构，可以适当添加SEO搜索的关键字
nav导航：常用ul>li>a列表的结构搭建
整体布局
login-banner区域
login：登录。
布局类型：通栏背景，内部包括版心居中的主要内容，内容包括左、右浮动的两部分。
注意：实际网页中，部分表单效果通常使用其他标签＋css样式的效果进行模拟，比如按钮、下拉菜单等等。
placeholder属性：做备注，点击输入后会消失。
cursor属性
作用:定义鼠标指针放在一个元素边界范围内时所用的光标的形状 属性值 在cursor中我们最常用到的属性是default和pointer: default:默认值,显示一个箭头光标的样式。 pointer:光标呈现为指示链接的指针(小手的效果)
search区域
search：搜索框部分
布局类型：通栏背景，内部包含居中的主要内容。
搜索框区域表单：需要添加<form>标签，保证数据能够提交数据库
补充：文本框<input>标签可以通过一个placeholder属性，设置默认提示文本，点击文本输入文字后，placeholder属性的内容会自动消失。
content区域
content：网页的主要区域，用于展示更多的产品、信息等
布局类型：通栏，底部设置边框，内容为版心居中
content内部包含四个部分：.main主要区域列表焦点图、.hot
recruit热门职位、.hotcompany热门公司、.hot_links热门链接
.main部分
布局类型：左窄右宽的两列布局，通过浮动实现
aside：侧边栏常用命名，整体为无序列表结构。表现为一种特殊的下拉菜单效果，鼠标移上<li>后显示内部的自己元素。下拉菜单的列表中，推荐使用定义列表结构搭建。
注意：侧边栏aside这种结构中的数据是可能动态发生变化的，我们需要搭建好HTML结构和正确的CSS样式，让HTML结构足够清晰，放标后端人员传入数据。
banner：焦点图部分为滚动轮播图效果，点击滚动特效后期用javasprict制作。
布局方式：整体用定位制作，与淡入淡出轮播图不同的是图片所在无序列表中，图片需要浮动显示，而不是定位到某一点。特殊的需要添加魔术替换图片，方便后期js制作。
补充：box-shadow
css3中新增的阴影属性box-shadow。
box-shadow：水平阴影位置 垂直阴影位置、模糊距离 阴影尺寸 阴影颜色 内/外阴影；
box-shadow：3px 3px 5px 4px rgb(0,0,0)
补充：多余文字显示为省略号：
.world_cut{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.hot_recruit部分
.hot-company部分
热门公司部分与热门职位结构相似。
本模块需要修改一些公共样式，注意使用新的类名进行覆盖，保证选择器权重足够。
注意：链接内容部分涉及后期js特效，鼠标点击显示和隐藏，需要提前将HTML结构和css样式书写完整，暂时设置为display:none
footer区域
footer：页面底部的常用名。
布局类型：通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动的两部分。
其他登录方式部分：左浮动，注意：其中鼠标移上显示定位元素效果。
其他链接服务部分：使用定义列表制作结构。
copyright区域
版权区域一般为文字信息
布局：通栏背景，内部包含版心居中的主要内容，内容包含左右浮动的两部分。
backtop区域
返回顶部的设置，通常使用<a>进行结构搭建。
定位方式：固定定位，位置保持与版心固定的位置，避免由于分辨率不同元素位置差异太大
动画效果：后期使用js实现。
快速搭建公共结构
在线咨询
