2.先分析页面都有什么内容,然后把骨干写出来例:header、logo、banner、content、footer等,然后把网页里的标签内容写全,最后在写css。
3.最先写重置代码,例:body,div,p,ul,li,dl,dt,dd,h1,a,img{ margin:0; padding:0;},然后写class选择器,这个可以后来慢慢加,然后再写id选择器,一个板块一个板块地写,板块里面要先写集体声明。
4.网页字体一般在重置样式里的body设置font-size然后其他的字体用百分数或者 em 写,只样便于修改和维护。
5.为了提升网页的用户体验,页面背景先加载小图片,这样背景加载速度快,用户打开网页的时候,先把这种背景图加载上,不至于展现在浏览者前面的是一片空白。
6.注意:要在编写网站之前计算好总框的宽度,并在最开始套一个总框wapper并写好计算后的width。然后再计算各个框的宽度。
7.通过css sprites来整合图像如果页面中有6个小图像,那么浏览器在显示时会分别下载。你可以通过CSS sprites将这些图像合并成1个,可以减少页面加载所需的时间。CSS sprites需要有两个步骤:整合图像、定位图像。比如你可以通过下面的代码来分别定位下面图像中的上下两部分。
.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}.smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}
8.在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入<br />。而想连续输出空格只有两种办法,一是 ,二个是将输入法调成全角(就是那个小月牙)之后在敲击空格键,否则浏览器只会输出一个空格。
9.图片要加上alt属性和background-color属性,包括背景图片。
10.注意 overflow:hidden; 的使用可以帮助你防止内容溢出而发生排版错误。
11.“margin:0 auto;”的作用就是将页面元素水平居中,这个很重要,布局页面经常用到需要记住!
12.注意padding和margin的运用和计算。
13.请使用 font-family:Arial, Helvetica, sans-serif; 来美化字体,或者自定义字体类型。设置好字体的大小颜色,font-weight:bold;是加粗的意思,font-size:10px;是设置字体10px,text-indent:2em;是设置字体缩进2em,line-height:10px;是设置行高,可以实现文字居中。
14.注意链接图片要把a标签和img标签都设置成display:block;的块级元素,在设置a标签的宽和高。
15.图片大小一般都要小点,否则读取会很慢,背景图片要先在html标签里加载小图片平铺,再在body标签里加载整个图片来优化。
16.注意标签语义化。
17.img标签是一个很特别的标签,因为它本身是内联元素,但却体现出块状元素宽高起作用的特性,这是很矛盾的地方,这就为页面布局埋下隐患,要么为内联元素,要么为块状元素,在这里我们更需要它的块状元素的属性,所以我们将身为内联元素的img标签转化为块状元素,用“display:block; ”。以后遇到图片链接这种情况,第一反应就是先将这两块给设置成块状元素
18.line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是250px,如果将文字的行高设为500px,并且外面的容器的高度也为500px,同样可以实现垂直居中,但是用它来实现垂直居中,也是有缺点的,就是如果内容过多,文字就会跑到下一行,那么内容就不可能垂直居中了。
20.<q>标签表示简短文本引用,浏览器会对q标签自动添加双引号,这样做是为了说明语义,引用别人的话。而<blockquote>标签表示长文本引用浏览器对<blockquote>标签的解析是缩进样式。
21.一般网页中会有一些地址信息需要在网页中展示出来,这些地址信息如公司的地址就可以<address>标签,在浏览器上显示的样式为斜体。
22.当代码为一行代码时,你就可以使用<code>标签。如果是多行代码,可以使用<pre>标签,<pre> 标签的主要作用:预格式化的文本,被包围在 pre 元素中的文本通常会保留空格和换行符。
23.<table>…</table>:整个表格以<table>标记开始、</table>标记结束。<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。<th>…</th>:表格的头部的一个单元格,表格表头。<caption>标签定义了表格的标题。
24.在dreamweaver里面,命令--应用源格式,网页代码就规范了整齐了美观了。也可以先选取某部分代码,然后命令--将源格式应用于选定内容。这两个命令的快捷方式是(alt+c+a)和(alt+c+p),是连续按这三个键哟。