网页开发流程

需求分析=>整体规划=>界面设计=>前端程序设计=>前后端整合=>测试验收

前端程序设计（静态网页制作）

布局流程

1. 确定页面可视区域
2. 分析设计图，确定行模块，列模块
3. 制作HTML,CSS
4. 初始化CSS，通过DIV+CSS控制各个模块

初步制作拉钩网首页

head内设置

<!-- 设置网页标题 -->
<title>互联网求职招聘找工作-上拉勾招聘-专业的互联网求职招聘网站</title>
<!-- 设置网页图标 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 引入外部CSS文件 -->
<link rel="stylesheet" type="text/css" href="css/reset.css" />

CSS设置

• 分级引入
• 引入清除默认样式文件rest.css
• 引入整体公共样式文件base.css
• 引入单独页面样式文件index.css

HTML设置

header区域

整体结构

内容结构

• logo：使用H1>a结构，可以添加SEO关键字
• nav导航：使用ul>li>a结构
• 右边功能：使用span单独设置

login-banner区域

整体结构

内容结构

• ad：使用背景图片设置
• form：使用标签+css模拟表单效果制作

search区域

整体结构

内容结构

• search：使用form>input结构，文本框input的placeholder属性设置默认提示文本

content区域

整体结构

内容结构

footer区域

整体结构

copyright区域

整体结构