CSS网页制作教程:网页首页设计实例

【 tulaoshi.com - Web开发 】

第一步

下面是我们将要动手制作的设计图。在这篇教程里我们只制作首页，不过你可以以此为基础用相同的布局制作内页。

第二步

首先要做的是确定页面结构。随着你对CSS布局的逐步学习，这个过程会变得越来越简单。通过运用大量绝对定位和大幅背景图片，我们可以非常简单地完成这个设计。

什么是绝对定位？

一个HTML元素（比如div、p等等）被放入页面时具有一个天生的位置，这个位置是由之前放入的元素确定的。例如，你放入一个填充了文字的p/p标签，接着放入另一个p/p，它会自然出现在第一个p下方。每个元素相对于上一个元素流动。

绝对定位则不同，它给一个对象指定精确的位置使它脱离常规的元素流。如果你像之前一样放入第一个p/p，然后绝对定位第二个p/p为 left:500px; top:500px，那它就会无视第一个p准确无误地出现在指定的位置。

你可以像这样设置绝对定位：

.className {  
  
    position:absolute;  
    top:0px;  
    left:0px;  
  
}  

绝对定位的缺点

使用绝对定位的主要问题是你的元素们不会真正地相互关联。例如，你在靠近页面顶端的地方放置了一个文本块，然后稍靠下放置另一个，当每一个块的文本都较短时这看上去很好。但如果顶部的块内是一篇长文，它就会越过第二个块，而不是把第二个块推向下方。

所以绝对定位只对那些尺寸固定并且不需要与其他元素互动的元素真正有效。

为什么本例中我们要用绝对定位？

因为绝对定位的好处就在于，它真的、真的非常简单！你告诉浏览器东西往哪儿放它就往哪儿放！更棒的是，当你使用绝对定位时，浏览器兼容性问题会大大减少。毕竟不管你用的是Firefox、Internet Explorer还是Safari，100px总归是100px。

嗯...该开始我们的布局了

我们将要制作网站的方法是：

如果上述说明还不能让你有一个整体的感觉，先别着急，当你看到网站成型的时候就会了解了！

第三步

现在，我们需要两张背景图片。一张大的，存成JPG后大约56kb。这个尺寸在过去稍嫌太大，不过现在这不足为道。

另一张窄条图片，作为主体区域的背景，将不断重复向右，拖动浏览器窗口时它也会随之向外平铺。
（注意：下图中的Logo不应该显示在背景图片里，抱歉这是张不太好的截图）
你可以分别在 这里 和 这里 看到我创建的两张图片。

第四步

好了，我们现在开始写HTML。首先我们列出一些基本代码：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"  
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"  
head  
    titlePSD vs NET/title  
    link rel="stylesheet" href="step1_style.css" _fcksavedurl=""step1_style.css"" _fcksavedurl=""step1_style.css"" _fcksavedurl=""step1_style.css"" type="text/css" media="screen" /  
/head  
  
body  
div id="outside_container"  
    div id="container"  
      
  
        !-- The Main Area --  
  
  
    /div  
/div  
div id="footer"  
  
    img src="images/footer_Logo.jpg" /  
      
    span id="footer_text"  
        Made for a PSDTUTS and NETTUTS tutorial by Collis!    
        See the a href="Photoshophttp://psdtuts.com"Photoshop Tutorial/a,   
        see the a href="Webhttp://nettuts.com"Web Tutorial/a  
    /span  
      
/div      
/body  
/html 

通常，我们最好由外向内进行布局。我在这里置入3个主要的div，前两个是outside_container / container，另外一个是footer. 这需要一些说明：

你还看到我在footer里加了一些内容小Logo和一段文字。我把这段文字包在一个span标签里以便后续操作。而既然footer里只有一张图片，我们没理由再给img标签一个id或class，只要称之为#footer img就可以了。这样可以让我们的HTML更简单一些。