之前有事儿，再加上自己很懒，所以说第三步咕咕咕到JS后面了。。。
静态网页项目开发基础
开发流程
需求分析 => 整体规划 => 界面设计 => 前端程序设计 => 前后端系统整合 => 测试验收
| 流程 | 详细介绍 |
|---|---|
| 需求分析 | 确定产品定位方向 |
| 整体规划 | 确定网页中展示内容、层次 |
| 界面设计 | 确定页面设计图，设计风格 |
| 前端程序设计 | 实现网页界面，功能 |
| 前护短系统整合 | 后端进行数据库设计，与前端交互，完成数据交互 |
| 测试验收 | 相关测试人员进行测试 |
开发基础
- 正确合理的排版布局
- 注意让页面结构清晰、有条理
- 一般浏览器居中位置为主要内容展示区
margin:auto居中
页面布局
- 确定页面版心（可视区域）
- 分析页面中的行模块，以及每行模块中的列模块
- 制作html和css
- 充分利用div+css方式来控制网页的各个模块
将拉钩网站划分示意图：
固定宽度并且居中
个人总结：常用于导航栏、广告栏、搜索栏等一些比较小的行模块中
特点：高度占据空间小、内容少
两列左窄右宽型
个人总结：常用于轮播图、艺术展示等较为醒目的位置
特点：比较吃高度，内容丰富、在比较醒目的地方
补充内容（瞎逼逼），如何确定醒目位置
先画个辅助线吧：
人们看一个物体时，一般会先注意到中间位置，尤其是中间位置的那四个顶点（那四个点就暂时叫做焦点吧）。
举个例子：
对比一下，是不是感觉第一个中两个矩形不一样大，第二个中两个矩形大小相识，这就是**因为占据 焦点 **位置不同，给人的视觉差异也不同。
对于我们前端开发人员而言，尽量将轮播图这种比较重要的内容往中间区域及焦点放。
哔哔赖赖结束
通栏平均分布型
个人总结：网页/平台功能分类、产品/商品展示
特点：对高度没需求，但是要展示的个体数量较多
初级项目制作
head标签内的配置
网页标题
<link rel="icon" href="logo.png">
<!-- 图片logo -->
<title>网页标题</title>
<!-- 文字标题 -->
CSS样式清除
为防止标签内一些默认属性对页面的影响，在开始网页布局前，一定要手动消除css样式
清除方法：手动导入清除样式的CSS文件
清除样式的css文件一般命名为： reset.css
可以网上获取，也可以根据自身习惯编写。无论如何获得，在编写完成后，禁止再次修改！！！
注意引用顺序：样式清除第一个引入！！
页面CSS样式
按照作用划分并分别导入
公共样式：
统一网页整体属性，如字体大小类型颜色、背景颜色等。。。
一般用 common.css 来命名
注意引用顺序： reset.css 后面引入（第二个引入）
分区样式(页面独有样式)：
给某些特定的区域设置样式：如轮播图，产品/商品展示等
若样式比较小，则直接用 index.css 命名；若比较多就根据页面布局来划分，如 index_banner.css、banner.css
注意引用顺序：最后引用
body结构布局
参考页面分布时分析的布局方式
命名建议：
header
在header标签下（header标签位于网页顶部，通常包含logo、导航内容），设置 logo 、 nav 导航
logo： h1 > a 结构
nav导航: ul > li > a 结构
banner
一般用于 select搜索框、轮播图等
select搜索框：form > input 结构，建议input中使用placeholder属性显示提示文本
轮播图：ul > li > a > img 结构（目前没涉及JS代码）
main
一般用于网页/平台功能分类、产品/商品展示
有多种结构选择： ul > li > a
table > tr > td
div > div + div 等
注意：不要用一个 div 作为展示，尽量分成多组展示
footer
一般是 平台合作伙伴或者联系平台方式
结构： ul > li > a
