直接给了一个负的margin-top，在IE里是OK的，这个底栏会在flash这个div的上面，但是其他浏览器会跑到flash这个div的下面，也就是文字会被flash遮住。

那么，就考虑到用z-index。但是z-index只对绝对定位的元素有用，那么，将flash和底栏的两个div绝对定位之后，怎么自动水平居中呢？

首先，两者的宽度是确定的，这里是960px，然后设置left:50%;再把左侧的margin设置成负的全部宽度的一半：margin-left:-480px;

可能我开发方面接触得还是比较少吧，我觉得本书给我的感觉很杂。书中确实涵盖比较广得介绍了XML有关的各方面内容，比如定义，相关标准，web词汇，以及各种典型的对XML的操作。但是属于每个都提一点，具体的例子只有最后两章很简短的例子，我现在.net和php都不懂，自然也不大看得进去。

除了这两个例子，本书剩下的部分，就真的当做工具书来读更适合一点了。

计算机是一门应用类学科，不作出一些实际的例子，终究觉得没什么意思，也较难掌握相关知识。一来此书中，实例的比重低，二来我也确实没有相关语言的基础，所以消化得自然就不大好了

接下去画右上角的登录注册按钮。也是一个图层样式的设置。通过这个可以了解到，像这类立体感强的按钮的做法：渐变——突出立体感和高光，阴影——那当然是必须的啦，内发光和描边——我觉得这里的内发光和描边是相配套的，有一个浅色的，范围很小的内发光，外面则用了一个颜色相对较深的做描边。

另外再把下一步画条线的做掉，其他的下次继续~

这些教程的特点还是一样，过程很详细，但是完全没有解释。

这个教程的原地址：Create a Clean and Colorful Web Layout in Photoshop

首先按照教程，添加背景的渐变和顶部的彩色，顶部的彩色自己随机处理吧，做出来肯定不会跟他完全一样的。

接着，加入树叶之后，对其添加的两个滤镜在中文版里是艺术效果—胶片颗粒和像素化—马赛克。

胶片颗粒：给原图像加上一些杂色的同时，调亮并强调图像的局部像素。它可以产生一种类似胶片颗粒的纹理效果，使图像看起来如同早期的摄影作品。

（Grain）颗粒：调整图像的颗粒，数值越大颗粒效果越清晰。

（Highlight Area）高光区域：调整当前图像的高光区域。

（Lntensity）强度：当前图像颗粒的强度。数值越小，效果越清晰。

马赛克就是将像素分组并转换成颜色单一的方块，产生马赛效果，下面唯一一个选项 Call Size，用来 控制方块的大小。网上的解释2：把影像处理成马赛克的效果。在弹出式菜单里设定一个值，像素的平方，这个值就是处理后影像的一个最小的可视单元，也就是马赛克的大小，这个滤镜将统一各个单元内的色彩，形成马赛克效果。

综合员教程中的几个数值设置来看，我认为作者是需要一种模糊的、稍微有点颗粒及马赛克效果的图像，所以胶片颗粒的高光区域设置为0，其他都设置了相应的一定数值。

下面黑色背景就是一个投影效果，没什么好说的，但是注意现在我们要的是一个微微向外扩张的投影，每个面都一样，所以投影的距离和扩展为0，主要看大小，这里和角度是没有关系的。

接下来对这些图层分组，这是个好习惯，快捷键：ctrl+g

然后按照提示设置博客名的样式，到现在为止，我的效果：

function focusLabels(){
    if(!document.getElementsByTagName) return false;
    var labels = document.getElementsByTagName("label");
    for (var i=0; i<labels.length; i++) {
        if(!labels[i].getAttribute("for")) continue;
        labels[i].onclick = function() {
            var id = this.getAttribute("for");
            if (!document.getElementById(id)) return false;
            var element =document.getElementById(id);
            element.focus();
        }
    }
}

function resetFields(whichform){
    for(var i=0; i < whichform.elements.length; i++){
        var element = whichform.elements[i];
        if(element.type == "submit") continue;
        if(!element.defaultValue) continue;
        element.onfocus = function() {
            if(this.value == this.defaultValue) {
                this.value = "";
            }
        }
        element.onblur = function (){
            if(this.value == ""){
                this.value = this.defaultValue;
            }
        }
    }
}

function prepareForms() {
    for(var i=0;i < document.forms.length; i++){
        var thisform = document.forms[i];
        resetFields(thisform);
    }
}

function validateForm(whichform) {
    for(var i=0; i < whichform.elements.length; i++) {
        var element = whichform.elements[i];
        if (element.className.indexOf("required") !=-1) {
            if(!isFilled(element)) {
                alert("Please fill in the "+element.name+" field.");
                return false;
            }
        }
        if (element.className.indexOf("email") !=-1) {
            if (!isEmail(element)) {
                alert("The "+element.name+" field must be a valid email address.");
                return false;
            }
        }
    }
    return true;
}

function isFilled(field) {
    if(field.value.length < 1 || field.value == field.defaultValue) {
        return false;
    } else {
        return true;
    }
}

function isEmail(field) {
    if (field.value.indexOf("@") == -1 || field.value.indexOf(".") == -1)
    {
    return false;
    }else {
        return true;
    }
}
 

function prepareForms(){
    for(var i=0; i < document.forms.length; i++) {
        var thisform = document.forms[i];
        resetFields(thisform);
        thisform.onsubmit = function() {
            return validateForm(this);
        }
    }
}
       

function focusLabels(){
    if(!document.getElementsByTagName) return false;
    var labels = document.getElementsByTagName("label");
    for (var i=0; i<labels.length; i++) {
        if(!labels[i].getAttribute("for")) continue;
        labels[i].onclick = function() {
            var id = this.getAttribute("for");
            if (!document.getElementById(id)) return false;
            var element =document.getElementById(id);
            element.focus();
        }
    }
}

function resetFields(whichform){
    for(var i=0; i < whichform.elements.length; i++){
        var element = whichform.elements[i];
        if(element.type == "submit") continue;
        if(!element.defaultValue) continue;
        element.onfocus = function() {
            if(this.value == this.defaultValue) {
                this.value = "";
            }
        }
        element.onblur = function (){
            if(this.value == ""){
                this.value = this.defaultValue;
            }
        }
    }
}

function prepareForms() {
    for(var i=0;i < document.forms.length; i++){
        var thisform = document.forms[i];
        resetFields(thisform);
    }
}

function validateForm(whichform) {
    for(var i=0; i < whichform.elements.length; i++) {
        var element = whichform.elements[i];
        if (element.className.indexOf("required") !=-1) {
            if(!isFilled(element)) {
                alert("Please fill in the "+element.name+" field.");
                return false;
            }
        }
        if (element.className.indexOf("email") !=-1) {
            if (!isEmail(element)) {
                alert("The "+element.name+" field must be a valid email address.");
                return false;
            }
        }
    }
    return true;
}

function isFilled(field) {
    if(field.value.length < 1 || field.value == field.defaultValue) {
        return false;
    } else {
        return true;
    }
}

function isEmail(field) {
    if (field.value.indexOf("@") == -1 || field.value.indexOf(".") == -1)
    {
    return false;
    }else {
        return true;
    }
}
 

function prepareForms(){
    for(var i=0; i < document.forms.length; i++) {
        var thisform = document.forms[i];
        resetFields(thisform);
        thisform.onsubmit = function() {
            return validateForm(this);
        }
    }
}
       

function stripeTables(){
    if(!document.getElementsByTagName) return false;
    var tables = document.getElementsByTagName("table");
    for (var i=0; i < tables.length; i++){
        var odd = false;
        var rows = tables[i].getElementsByTagName("tr");
        for(var j=0; j < rows.length; j++){
            if(odd == true){
                addClass(rows[j],"odd");
                odd =false;
            }
            else
            {
                odd = true;
            }
        }
    }
}

function highlightRows(){
    if(!document.getElementsByTagName) return false;
    var rows = document.getElementsByTagName("tr");
    for (var i=0; i < rows.length; i++){
        rows[i].oldClassName = rows[i].className
        rows[i].onmouseover = function(){
            addClass(this,"highlight");
        }
        rows[i].onmouseout = function(){
            this.className = this.oldClassName
        }
    }
}

 

function displayAbbreviations(){
    if (! document.getElementsByTagName) return false;
    if (! document.createElement) return false;
    if (! document.createTextNode) return false;
    var abbreviations = document.getElementsByTagName("abbr");
  if (abbreviations.length < 1) return false;
  var defs = new Array();
    for (var i=0; i < abbreviations.length; i++) {
    var current_abbr = abbreviations[i];
    if (current_abbr.childNodes.length < 1) continue;
    var definition = current_abbr.getAttribute("title");
    var key = current_abbr.lastChild.nodeValue;
    defs[key] = definition;
    }
    var dlist = document.createElement("dl");
    for (key in defs) {
        var definition = defs[key];
        var dtitle = document.createElement("dt");
        var dtitle_text = document.createTextNode(key);
        dtitle.appendChild(dtitle_text);
        var ddesc = document.createElement("dd");
        var ddesc_text = document.createTextNode(definition);
        ddesc.appendChild(ddesc_text);
        dlist.appendChild(dtitle);
        dlist.appendChild(ddesc);
    }
    if (dlist.childNodes.lenght < 1) return false;
    var header = document.createElement("h2");
    var header_text = document.createTextNode("Abbreviations");
    header.appendChild(header_text);
    var container = document.getElementById("content");
    container.appendChild(header);
    container.appendChild(dlist);
}
 

function showPic(whichpic){
    if (!document.getElementById("placeholder")) return true;
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src",source);
    if(!document.getElementById("description")) return false;
    if(whichpic.getAttribute("title")){
    var text = whichpic.getAttribute("title");
    }
    else {
        var text = "";
    }
    var description = document.getElementById("description");
    if(description.firstChild.nodeType ==3){
    description.firstChild.nodeValue = text;
}
return false;
}

 

 

function preparePlaceholder(){
    if (!document.createElement) return false;
  if (!document.createTextNode) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
    var placeholder = document.createElement("img");
    placeholder.setAttribute("id","placeholder");
    placeholder.setAttribute("src","images/placeholder.gif");
    placeholder.setAttribute("alt", "my image gallery");
    var description = document.createElement("p");
    description.setAttribute("id","description");
    var desctext = document.createTextNode("Choose an image:");
    description.appendChild(desctext);
    var gallery = document.getElementById("imagegallery");
    insertAfter(description,gallery);
    insertAfter(placeholder,description);
}
 

function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);
      }
    }
}

所以存在很多问题，主要就是浏览器不兼容。另外，在头文件里还有很多CSS的link语句。我觉得这很不好，例如，一个首页至少包含了top.css nav.css foot.css index.css等。把顶部、导航、脚页的CSS合并到一起是很容易想到的，这里想说的是什么呢？就是对于index.css里应该放些什么东西。

对于全站来说，顶部、导航、脚页是公用的，除这三部分外，中间的内容，也有不少重复的样式，例如侧栏。那这些东西的样式，应单独写吗，还是针对每个页面各自写？

而且，最主要的问题是，相同的往往是一小块内容，而在页面中的位置，有时候又不一样。如果在通用的CSS中定义了一部分，在独自的CSS写另外一部分，时间久了代码的可读性就会比较差，那到底要怎么办呢？

现在我的做法是，每个页面只有两个CSS文件，一个是公用的，一个是独自的。公用的css里除了写顶部、导航、脚页的CSS外，把会重复出现的“块”的CSS也写进去，但是margin和padding清0，在各个页面用到的时候，只设置这两个属性。同时，对哪些是“重复出现的块”要心里有数，剩下的，即使在个别几个页面重复出现，也会到每个独自的CSS里重复写，但是这样的情况应该不多了。