静态网页的一些小体会
2020-11-05 本文已影响0人
amanohina
了解开发流程
流程
了解网页开发基础
版心
- 指的是网页中主要内容所在的区域。一般在浏览器窗口中水平居中显示，从而让用户的视线集中到那一处
- 常见的版心宽度值包括960px，980px，1000px，1200px
- 制作方法：使用标准流中的margin居中方法
页面布局流程
为了高页面制作的效率，布局时通常要遵守一定的布局流程，具体如下：
1.确定版心
2.分析页面中的行模块，以及每个行模块的列模块
3.制作HTML页面， CSS文件
4.CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局控制网页的各个模块
了解常见的布局规律
一列固定宽度且居中
两列左窄右宽型
通栏平均分布型
更多时候同时包括两种以上的布局类型
了解网页开发常见技巧和方法
文件结构
- 网站中会包含多个.html文件，.css文件，以及图片等多媒体文件，需要用不同的文件夹分类进行管理
- 基本文件夹包括：
CSS、images、index.html
<head>标签内部配置
<titile>网页标题
标签页icon图标
- 图标的文件名要求用favicon.ico命名，文件需要与index.html文件同级存储。
- 使用方法：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
CSS分级引入
- css文件设置需要根据功能进行分层管理：目的是为了提取出多个页面的公共部分，提供多个HTML同时饮用。公共的部分也可以划分范围，有的是所有网站都能用的，有的是某几个网站的公共部分
- css常见的分层组织：清除默认样式的css，网站的公共样式css，每个页面自己独有的css
- 注意书写顺序，引入多层css时，需要按照后面的层叠前面的css进行设置，使用页面独有的样式层叠公共的样式
清除默认样式
- 适用范围：所有网站都能使用
- 制作方法：自己工作中进行积累，或者使用已经成熟的工具（比如：雅虎yui的reset.css）
- 命名的习惯：reset.css
- 引入时必须作为第一层引入，网页中独有的样式可以层叠掉reset中的样式
- 注意：reset.css文件中写完后不允许再次更改
公共样式
- 范围：单独的一个网站所有的页面，几个页面
- 制作方法：从设计图观察，找到所有页面或者多个页面公共的部分，划分成不同的模块分别进行.css文件的书写
- 命名习惯：common.css或者模块名.css
- 多个网站页面的公共部分书写完之后不允许后期更改，一旦更改，多个引用的HTML页面都会发生变化。需要注意类名的使用，公共文件中的类名一般不要在其他的css文件中再用。（可能会发生层叠）
- 引入顺序：一般在reset.css后面，单独样式前面
页面独有样式
- 使用范围：单独的一个HTML页面
- 制作方法：找到页面独有的而其他页面没有的样式，单独书写在一个.css文件中，只有对应的HTML文件才能够引用
- 命名习惯：一般文件名与HTML的文件名保持一致，例如index.css，如果拆分的更细致可以使用多个单词拼接，比如index_banner.css等
- 引入顺序：所有公共样式后面
- 注意：使用单独样式文件去层叠前面公共样式时，需要注意选择器权重。
整个css分层引入的顺序
- 使用清除默认样式（reset）
- 公共样式（common）
- 单独样式（index）
布局过程
清除默认样式
- 使用yahoo yui的reset.css文件导入清除默认样式
初始化样式
先创建base.css文件，进行初始化样式设置
公共样式
- 观察设计图，找到各部分公共的样式，单独写一个common.css进行导入
单独样式
-
最好进行分类，对代码块进行合理的注释与标明
分类清楚明了
-
网页的每个部分如果是该页特有的部分，则单独写一个样式文件进行导入，防止冲突
拿到设计图之后？
使用fireworks进行切图与计算边距，然后设置
制作网页中的知识点整理
-
logo区域。为了提高SEO搜索排名，可以添加关键字在a标签内，并且进行样式设计，将文字隐藏，这样既可以实现logo显示，也可以提高搜索的排名
image.png
-
下拉菜单最常用的是dl dt dd结构。
使用定位属性进行贴边设置
- 小型的图标或者符号可以使用i标签等进行设置，设置样式，使用background:url()+position进行设置
-
当一个区域内的内容观察到是有大规模相似内容时，可以设置一个公共样式，然后修改内部内容进行快速设置
比如导航栏和内部的小盒子都是相似的
-
footer区域部分，通常有联系方式与服务类的链接，使用dl dt dd设置服务类链接，使用i标签设置图标，使用超链接内嵌span和img等进行联系方式设置
大致的代码结构
总结
需要多上手，结合设计图，多做切图进行字体大小，样式，颜色等测量，计算边距，计算元素之间的占比，计算相对位置等因素
