|
| 重构之美－第一天－轻松上路 |
| 作者：爆牙齿 来源：蓝色理想 更新：2005-7-31 12:33:38 错误报告 我要投稿 |
|
在设计过程中，由于第一次接触，所以这一秒否定上一秒的事情很频繁，随着设计的深入，了解的深入，我不断的向前修改、整理我的代码，自我否定了一次又一次。所以在写下面文章之前，我想，如果我给大家一个通过了验证后的代码意义不大，这样的代码应该随处能找到，所以我想我还是重头到尾把过程写下来，包括各种错误，我故意留下来，就是要让你看见我犯过的错误（失败我都不怕，更不会怕错误），然后再让你看见我是怎么改过来的（当然很可能我改得也不怎么好，但是我一直在改！）。
我是一个典型的初学者，而且是那种爬还不会就想破百米记录了。通过验证后回头看，我犯的错误很多都是不常见滴（太低级了），因此我声明一下：
高手们啊，对于下面文章中错误的代码或凌乱的结构，私下狂笑一下就行了哈……英雄，放过我吧。估计你看了我的代码你就知道我的双手有多新，是多么的洁白无暇，你会于心不忍的。
比我还新的新手请注意：代码几乎毫无借鉴的价值。
不过呢，我在三天内从零圈圈到完成这个首页，将表现与结构完全分离，并且三大浏览器显示效果几乎一样，CSS通过认证，只是页面文件不能通过认证而已。所以对于新手，应该还是有不少思路可以学习。
最后，我不想过多的纠缠在代码上，自己实践或者看书会收获更大。更多的，我希望能在这种全新的设计思路上进行探讨。我会把我的思路表达出来，也希望大家一起在这个方面多讨论。我说过，技术是为思想服务的，所以思想的正确性非常重要。为了避免某些人在这句话中钻牛角，补上一句：当然，技术的高低要反过来限制思想的宽度和深度。
第一天 轻松上路
所有工具打开了，第一件事设置目录结构，在IIS中设置站点，考虑到以后可能的多风格问题，在样式表和图片目录下分别建立DEFAULT目录。
好了，什么都不想，先试一下：
样式表
#indextop
{
height: 85px;
background-color:#ED1C24;
background-image:url(/images/default/bg_02.gif)
background-repeat: repeat-x;
}
我的第一个#开头样式，以前都是用.开头或者不开头的。现在都不完全清楚#和.的准确概念。#用id针对引用，.用class针对引用，不开头的全局引用。
页面
后面代码请自己复制到下面调试框中相应位置查看。
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
OH YES！甚至无需设置宽度就自适应分辨率。
咦，色块没贴边。简单，样式表中加上：
body
{
margin: 0;
}
第一个不兼容问题出现，IE、Mozilla正常，Opera依旧不贴边，想了想，在body中添加 padding: 0; 一试，成功。愉快。
热完身，打开设计稿，开始研究。
页头到阴影前为止，因为要在程序中包含。先攻页头。
我需要页头两边自适应分辨率，自然需要嵌套居中的770DIV，这里就有选择：（导航下的白色背景是一个很淡的渐变，显然不能用背景色）
1、包括阴影从上到下四个DIV，然后1和3号分别嵌套一个居中的DIV放置‘LOGO’和导航。
2、两个DIV，因为阴影得平铺，估计还要使用z-index，所以必定单独一个。
3、三个DIV，阴影一个，导航一个，上面一个。
1号最终会有6个DIV，其中要单独为一个小色条设置一个DIV，不值。2号感觉不便于将导航独立出来，最终选择3号。小色条被包含在导航DIV中，便于不考虑‘LOGO’的垂直居中问题。小色条和导航背景连在一起切为宽一象素的GIF色条水平平铺，‘LOGO’虽然是网站名，但属于表现，通过CSS手册知道背景可以不平铺，爽，于是设为背景，居中，不平铺。看了下position的属性，大概理解relative是指不浮动，顺序向下排，absolute是浮动，相对上层的定位。DIV的居中问题，查看其他代码知道是设置margin: 0 auto;
OK，写代码如下：
页面
样式表 （为了便于大家看结构，我加了黑白对比背景色）
/* -----------页眉----------- */
/* ---页头LOGO--- */
#indextop
{
height: 85px;
background-image: url(/Edu/uppic/200507/20050731123239709.gif);
background-repeat: repeat-x;
background-color: #ED1C24;
}
#indextop_logo
{
position:relative;
margin:0 auto;
width:770px;
height:75px;
background-image: url(/Edu/uppic/200507/20050731123240672.gif);
background-repeat: no-repeat;
background-position: center;
background-color: #000;
}
/* --- 全局导航 --- */
#indextop_globalnav
{
position: relative;
height: 43px;
padding: 1px;
background-image: url(/Edu/uppic/200507/20050731123243619.jpg);
}
#indextop_globalnavmenu
{
position: relative;
margin: 0 auto;
padding: 0;
width: 770px;
height: 43px;
background-color: #000;
}
/* -----------正文上----------- */
/* ---广告条--- */
#indexcontent_shadow
{
position: absolute;
z-index: 1;
margin: 0;
padding: 0;
width: 100%;
height: 10px;
background-image: url(/Edu/uppic/200507/20050731123245734.gif);
background-repeat: repeat-x;
left: 0px;
top: 130px !important;
top: 127px;
}
[height: 43px;]这里本来是45px，但设了padding之后被撑大，由此知道了padding要影响高和宽，后来知道margin和border也一样，所以有些时候要高宽设置要做相应的裁减。
好了，页头的大局搞定，现在开始做导航，先分析。
如果用表格，很简单，两行十列，spacing为3，然后就是切图，每个图片左和右多切1px背景色，做botton。但是离开表格我就不知道怎么办了，多谢阿捷的一篇文章，我学习后知道了display: block;的使用，详细用法大家可以去看阿捷的《不用表格的菜单》和手册，这里我简单说一下我的理解：许多块元素默认是垂直显示，就像你有一堆方块，你列出来交给浏览器，浏览器的显示是从上到下顺序排列，而display: block;就是让浏览器水平排列这些方块，并且，遇到所在嵌套的边界就自动换行继续排列。好，现在我就将导航中的一个栏目设置为一个方块，然后不断重复直到我有17个方块，通过设置它的宽度，让它在水平排到第十个方块时到达globalnavmenu（770px）的右边界，它就自动换行了，这样导航条就出来了。方块的宽度不用计算，直接从设计稿中取，我的设计稿是很精确的。这里有个问题，由于globalnavmenu这个div是包含了小色块，默认的垂直居中显然不行，要在白色块中垂直居中才行。（看来啊，我还是没躲过，本以为将小色块放到导航中就可以不考虑LOGO的垂直居中问题，结果还是要影响导航条的定位，而且更麻烦，印证了我常说的一句‘个人名言’：困难是躲不过的，它总是会换个时间或空间重新摆到你面前，直到你迈过它才会消失。）解决办法，很明显要使用padding或margin，我选择了对方块使用margin。这又导致新问题，第一排的margin-top明显要比第二排的大，那么就不能对17个方块使用一个样式，我解决办法是上下各一个。栏目名字顺序置于方块中，通过调整上下padding垂直居中于方块。于是代码如下：
页面
……
……
样式表
……
#indextop_globalnavmenu
{
position:relative;
margin: 0 auto;
padding: 0;
width: 770px;
height: 43px;
}
#indextop_globalnavmenu ul
{
clear: left;
margin: 0px;
padding: 0;
border: 0px;
list-style-type: none;
text-align: center;
display:inline;
}
#indextop_globalnavmenu li
{
width: 77px;
height: 17px;
float: left;
text-align: center;
margin: 0;
}
……
可以对方块加连接，就像对td加连接一样，更优越的是方块的a:hover可以定义样式，比如换方块的背景和色彩等各种样式，那太好了，以前需要用JS实现的响应mouseover事件就太简单了。（说明：翻转的图片、色彩、FLASH等都是属于表现，内容一般只有文字，所以图片应该设置成背景，这两天我看见有人在运用标准时依旧使用包含文字的图片直接做链接，这种做法是一种形似而神不是的伪标准，建议再认真读读《理解表现与结构相分离》，如果要使用字体，那么也应该将这种图片设为背景，再在相应位置隐藏相应文本。建议看看Micromedia的网站，他是怎么处理他全FLASH的页头导航？他将整个页头做了一个普通页头，然后隐藏了。浏览器不支持FLASH或文本浏览时，普通页头就出来了。）加入以下代码实现：
页面
没有，呵呵，只用于测试。 [1] [2] [3] 下一页
|
|
| 文章录入：skyuu 责任编辑：skyuu |
上一篇文章： 重构之美－迎接网站标准化设计的来临1
下一篇文章： 重构之美－第二天－几乎放弃 |
|
| |
用户登录 
新用户注册
网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）