1-3 静态网页开发笔记

静态网页开发基础

网页开发流程：需求分析、整体规划、界面设计、前端程序设计、前后端系统整合、测试验收

版心

1. 指网页中主要内容所在的区域。
2. 常见版心值：960px/980px/1000px/1200px等
3. 制作方法：使用标准流中的margin居中方法

页面布局流程

1. 制作网页过程中，文件夹和内部文件的名字都不允许出现中文字符
2. 确定页面的版心（可视区域）
3. 分析页面中的行模块，以及每个行模块中的列模块
4. 制作HTML页面，CSS文件
5. CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块

常见的布局类型

1. 一列固定宽度且居中
2. 两列左窄右宽型
3. 通栏平均分布型
4. 一个网页中可能同时包含两种以上的布局类型

head内的配置

1、title网页标题

2、标签页icon图标

• 图标的文件名要求以favicon.ico命名，文件需要与index.html文件同级存储
• 使用方法：<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"

3、CSS分级引入

• css文件设置需要根据功能进行分层管理：目的是为了提取出多个页面公共的部分，提供多个HTML同时引用。
• 公共的部分也可以划分范围：有的是所有网站能用的，有的是某几个网站公共的部分
• CSS常见的分层组织：清除默认样式的CSS、网站的公共样式CSS、每个页面独有的CSS
• 注意书写顺序，引入多层css时，需要按照后面的层叠前面的css进行设置，使用页面独有的样式层叠公共的样式

4、清除默认样式

• 使用范围：所有的网站都能用
• 命名的习惯：reset.css
• 引入时作为第一层引入
• 注意：reset.css文件写完后不允许再次更改

5、公共样式

• 使用范围：单独的一个网站所有的页面、几个页面
• 制作方法：找到公共部分，划分成不同的模块分别进行.css文件的书写
• 命名习惯：common.css或者模块名.css
• 公共文件中的类名一般不要在其他的css文件中再用
• 引入顺序：一般在reset.css的后面，单独样式文件的前面

6、页面独有样式

• 使用范围：单独的一个HTML页面
• 命名习惯：一般与HTML的文件名保持一致，如果拆分的更细致可以使用多个单词的拼写，例如index_banner.css
• 引入顺序：所有公共样式的后面
• 注意：使用单独样式文件去层叠前面公共样式时，需要注意选择器权重

index.html首页结构布局

1、header区域

• 整体结构：100%的div>版心的div
• 注意：为了避免更改公共的版心样式，div需要重新添加一个class属性值
• logo：使用h1>a结构，可以适当添加SEO搜索的关键字
• nav导航：常用ul>li>a列表结构搭建

2、login-banner区域

• 实际网页中，部分表单效果通常使用其他标签+css样式的效果进行模拟，比如按钮、下拉菜单等
• 表单数据验证/获取数据验证用JS实现，所以不用form

3、search区域

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

4、main部分

• aside——侧边栏常用命名，侧边栏的数据是可能动态变化的，需要提起搭建好HTML结构和正确的CSS样式，让HTML结构足够清晰，方便后期后端人员传入数据
• banner——轮播图布局方式：整体使用定位制作，图片在无序列表中，图片需要浮动显示，特殊的需要添加魔术替换照片，方便后期JavaScript制作
• box-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 阴影颜色 内/外阴影

5、多余文字显示成…省略号

.word_cut {
    /*文字强制一行显示*/
    white-space: nowrap;
    /*溢出部分隐藏*/
    overflow: hidden;
    /*多余文字显示成省略号*/
	text-overflow: ellipsis;    
}

快速搭建公共结构

• 首页制作完毕后，分析与其他页面的共同之处，按照模块进行拆分复制选择
• 方法：直接复制index.html文件，删除不需要的结构，保留需要的公共结构部分，同时删除不需要的css文件引入的<link>标签，保留需要的公共样式文件
• 注意更改nav导航栏中的当前选中页的class
• 公共结构搭建完毕后，继续书写页面独有的结构和样式