XHTML+CSS布局模式因其表现和内容相分离,提高搜索引擎对网页的索引效率,代码简洁、提高页面浏览速度,易于维护和改版等众多优点而在广泛地被人们所接受.以下笔者结合手机商务类网站,对XHTML+CSS布局中兼顾SEO进行一些总结,希望能给站长同仁一些有益的参考.5 Z1 t. W! }9 q7 I; y# N3 G
- B; x# I6 T; w: E
一、做好网页的架构分析工作,是设计好网页的前提+ X6 l5 G! Q: X) s
2 L! c4 V( `* D$ r: P v: q3 Z
一个拥有高访问量的网站是成功网站的一个衡量因素,我们在设计网页时要根据主题的不同进行合理的板式选择和色彩配,将网站要达到的宣传效应通过合理搭配而构成的美丽页面来吸引客户的兴趣,促使他们来访问我们的网站.; q8 O9 i) V) y7 I0 {9 D
* @9 j) X1 A0 Z3 Q- Y
第一,分析页面板式架构
8 c* r( f& U/ Y: }1 v
6 P7 o! |. C0 }' i% y! }7 l 手机商务网站 主要以网上宣传新款手机和销售为主,这种类型网站的特点就是主要让人感觉到商品丰富而又美丽大方此在选择色彩是主要以蓝色、绿色为主,小图标、小按钮、边框线等点缀小图形以红、橙为主,显得页面绚丽多彩、活泼、大方,视觉冲击力较强;另外, 手机商务网站 主页面主要包括网站BANNER、导航栏、站内搜索、新产品图片宣传、最新新闻、网站服务、产品信息、版权信息等.% B1 A9 H3 D# T4 U
7 q' I: a, {( r6 C
第二,分析页面排版架构7 l" Q9 l: b$ [" O, x- W$ I! y# Z! g8 D
! O2 J6 e9 G1 B5 ~
整个网页的框架比较简单,包括Banner图片、导航条、搜索栏、页面主体及版权信息等.因此,采用了基本的网页框架结构.清晰准确的架构设计是下一步布局的基础和关键.
! ?( |7 h/ R% u$ Q
" k; q- p, i* O: e( \ 第三,依据XHTML+CSS布局网页的模式特点实现页面各模块的制作,凸显布局优势3 u2 z, k. W0 _% n8 }- Q
" L2 g4 N" k. U% X- J
页面的整体框架有了大体设计之后,对各个模块进行分别的处理,最后再统一整合,这是设计制作网站的通常步骤,养成良好的设计习惯便可熟能生巧.
# M3 T- t/ K' i& g* p# Q
4 a8 `( P& S" A/ a* g$ y 1、利用DIV标记对页面进行分块,确定好各块以及子块之间的关系依据前边分析的排版结构对页面进行分块,另外制作过程注意利用注释语句,以便让页面代码清晰、易读.+ \$ L0 T1 X; T) a0 r; Q
9 R9 w, p7 D1 F& j) W, K 2、定义CSS样式实现对各块效果的设计与美化
$ d& W. @4 y1 P4 j8 ?2 z' r7 ]: g. y
页面各模块划分好之后,接下来就是定义CSS样式对其进行定位和美化工作了,具体操作之前先做好整个网站的样式分析与规划工作,这是有效使用CSS样式表的前提., |. w3 y+ e9 m3 h
: S9 o7 w" W( M4 _: t: I; ?$ p, P$ \$ {
1)对整个网站中要用到的CSS样式表进行统一规划.从网站效果一致性原则出发,对整个网站的样式进行系统的分析和规划,详细罗列各样式的名称和样式内容.特别要善用属性简写,尽可能地减少冗余代码,例如:
' v# P( C1 U R3 [6 E6 r8 ?3 s- n2 X6 p4 s) m7 E0 l8 G( b" V4 V4 j
margin-left:10px;margin-top:0px;margin-bottom:0px;margin-right:10px;可以写成这样的格式:margin:0 10px.1 M5 l+ v7 r* N' f: b! L5 e
G: A" q. Z2 g6 _' i7 J 2)统一规划CSS样式的应用范围.对网站中各个页面都要使用的样式效果(例:各页面中的普通文本信息采用统一的大小、字体、行高、颜色等)统一定义在外部样式表文件中,方便各页面的调用,而对某个页面中要单独使用的效果则以内嵌式样式表的形式直接在相应页面中进行定义.
7 Z# m+ s0 T+ t y" s2 A. y$ z6 ~/ d0 [ }& K
3)基于SEO的样式命名规范
; A- \- L. u) G' I
% f T, g" i+ a" d7 m: Q5 G 搜索引擎是通过抓取网站源代码来进行亲密接触的,如何才能更好地让搜索引擎的爬虫更快更准确地觉察到网站内容的相关性,增强网站的搜索优化?可能从最基本的命名规则入手会有意想不到的收获,下面从前端设计的角度整理了一些常用的命名规则,就很好地考虑到了搜索引擎的喜好,在页面设计的过程中,尽量做到让搜索引擎明白,从而达到我们的设计目标.# P. n; @: e$ u6 c/ V) p/ v
* I6 {9 a; b+ ^6 Y1 }
3、对页面效果进行整体调整,保证页面的协调和美观
* D2 y: e$ H. L2 x* Q z# P0 O" q* ^, Q- P$ k( Q! `; ?$ t% O" ?
经过上边的步骤页面已经基本成形,在制作完成的最后,往往还需要对页面根据效果做一些细节上的调整.例如各个块之间的Padding和Margin的值是否与整体页面协调,各个子块之间是否协调统一等等.另外对于固定宽度且居中的板式,需要考虑给页面添加背景,以适合大显示器的用户使用等.
" ^) ?6 i; h1 j' ]( K
7 j" X, ~. W6 J- S5 d 二、考虑浏览器兼容处理,保障不同的用户查看到最好的页面效果
- B# W9 D6 f# Q: ] j8 O7 C5 T# G' P: h7 t6 V
在设计网页时,经常碰到在IE中制作的页面换到Firefox预览时,发现页面效果变化很大.针对这样的问题,我们在设计网页时就要进行相应的处理.常用的方法有:从空白页面开始,每做一小步,就同时在各种浏览器中查看,一旦发现显示效果不同,立即查找原因,寻找解决办法;也可以通过软件工具模拟网页在各种不同的浏览器中的效果,例如目前大家用的IETester v0.2.3,这样可以边做边修改;另外,大家在制作过程中要善于总结一些经常出问题的标记的处理办法.例如:边界重合时利用padding或border来避免.您可能会为了一点不应该出现的空间而焦头烂额,或者您需要一点点空间时,怎样都挤不出来,如果您有用到margin,那么很容易产生边界的重合.又如有时候某些错误会使50%+50%成为100.1%,使网页出现问题,这时请尝试将这些值改为49%,甚至49.9%,往往这样的做法才解决了问题等等.
! k3 C9 b, q8 q( g, c2 j' ~2 f! F, A- V6 w( x: T. N! o9 Q3 w4 J
本文来自中华论文中心(www.zhonghualunwen.com)转载请标示!谢谢!
4 w! F+ C& `. L |
