静态网页的一些小体会

了解开发流程

流程

了解网页开发基础

版心

• 指的是网页中主要内容所在的区域。一般在浏览器窗口中水平居中显示，从而让用户的视线集中到那一处
• 常见的版心宽度值包括960px，980px，1000px，1200px
• 制作方法：使用标准流中的margin居中方法

页面布局流程

为了高页面制作的效率，布局时通常要遵守一定的布局流程，具体如下：
1.确定版心
2.分析页面中的行模块，以及每个行模块的列模块
3.制作HTML页面， CSS文件
4.CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局控制网页的各个模块

了解常见的布局规律

一列固定宽度且居中

两列左窄右宽型

通栏平均分布型

更多时候同时包括两种以上的布局类型

了解网页开发常见技巧和方法

文件结构

• 网站中会包含多个.html文件，.css文件，以及图片等多媒体文件，需要用不同的文件夹分类进行管理
• 基本文件夹包括：
  CSS、images、index.html

标签内部配置

网页标题

标签页icon图标

• 图标的文件名要求用favicon.ico命名，文件需要与index.html文件同级存储。
• 使用方法：

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等进行联系方式设置

  
  

大致的代码结构

总结

需要多上手，结合设计图，多做切图进行字体大小，样式，颜色等测量，计算边距，计算元素之间的占比，计算相对位置等因素