<label id="2hp7p"></label>
<dl id="2hp7p"><ruby id="2hp7p"></ruby></dl><var id="2hp7p"><ol id="2hp7p"></ol></var>
<output id="2hp7p"><ruby id="2hp7p"></ruby></output>
    <blockquote id="2hp7p"></blockquote>

    <thead id="2hp7p"></thead>

    <output id="2hp7p"></output>

      <var id="2hp7p"></var>
      北京網站建設>前端開發>Css>

      Css

      【精編Css教程】11div+css網頁標準布局實例教程(一)

      來源:未知 作者:admin 時間:2015-11-01 16:41 點擊:

      建立站點

      結構分析

      搭建框架

      切割效果圖

      布局頁面——頭部和導航

      布局頁面——側邊欄

      布局頁面——主體部分

      底部和細節調整

      相對路徑和相對于根目錄路徑

      一、建立站點

      前面的課程都是零碎講解一些相關知識,那么要做一個網站,首先需要建立一個站點。那么什么是站點,為什么要建立一個站點呢?因為網站不同于其它文件,比如一個圖片,放到哪個盤哪個目錄下都可以訪問。而網站是許多文件相互關聯的,所以要專門一個目錄把它們分門別類存放起來。如果搞過視頻編輯的朋友都知道,需要先建立一個工程,把原始的視頻文件、圖片素材分類放好,也是這個道理。下面以在D盤建立一個jiaocheng文件夾為例,在dreamweaver(簡稱DW)里創建一個站點指向這個文件夾,然后在目錄下新建images文件夾、css文件夾等把各類文件分別存放起來。

      保存后,一個站點就建立起來了,我用的是DW cs5版本,不同版本界面有所不同。如果要連接FTP,需要設置服務器選項(后面會涉及到)。站點建立好后,我們先建立一個images和css文件夾,分別用來存放圖片和css文件。直接在windows的資源管理器下建立或者在dw里建立都是可以的;在dw建立需要在文件面板列表的根目錄上點擊右鍵,選擇新建文件夾后更改名字即可。

      二、結構分析

      創建完站點后,就需要對頁面結構進行分析了,根據效果圖,分析頁面分為幾大塊,該怎么布局更合理。下面這個圖是我做的一個企業網站的模板,雖然不怎么好看,但目的是把前邊學的東西全都給串起來,讓大家掌握各種情況的處理方法,先看下效果圖及在網頁中顯示的樣式:

      從圖中可以看出整個頁面分為頭部區域、導航區域、主體部分和底部,其中主體部分又分為左右兩列,整個頁面居中顯示,看明白了這點,下邊的框架就好搭建了。整體框架結果圖如下:

      三、搭建框架

      首先在dw里新建一個html文件:

      點擊創建后會自動生成如下代碼的一個html文件,保存為index.html并把無標題文檔改為:主頁。強調一點,許多同學喜歡把第一行代碼刪除掉,認為沒用,其實這句話的作用大著呢,它標明以何種形式解析文檔,如果刪除可能會引起樣式表失效或其它意想不到的問題。接下來需要插入以上各個塊的標簽了,以插入header的標簽為例,其它的插入方法類同。

      < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      < html xmlns="http://www.w3.org/1999/xhtml">

      < head>

      < meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

      < title>主頁

      < / head>

      < body>

      < /body>

      < /html>

      按照上圖的方法依次插入標簽,或者直接在代碼視圖中手工輸入,代碼如下:(注意main和side在maincontent里包含著呢)

      此處顯示 id "header" 的內容

      此處顯示 id "nav" 的內容

      此處顯示 id "main" 的內容

      此處顯示 id "side" 的內容

       

      此處顯示 id "footer" 的內容

      從上邊的效果圖分析得知,整個網頁是居中瀏覽器顯示的,按照這樣的寫法需要把以上的header、nav、maincontent、footer都設置寬度并居中,這樣做起來很麻煩,所以再在這些標簽外增加一下父標簽,設置這個父標簽寬度并居中后,是不是所有的標簽都居中了呢。增加后的代碼如下:

      此處顯示 id "header" 的內容

      此處顯示 id "nav" 的內容

      此處顯示 id "main" 的內容

      此處顯示 id "side" 的內容

       

      此處顯示 id "footer" 的內容

       

      html框架代碼寫完后,下邊就需要設置css樣式表了。先測量下效果圖的整體寬度,然后設置container也是這個寬度并居中。說起測量效果圖寬度,方法有多種,可以直接查看圖片尺寸。如果測量其中某一塊的寬度,可以使用測量軟件,也可以在ps下測量。本人一般在ps下測量,因為效果圖在ps下制作的,所以用ps測量也比較方便。方法是首選項里把ps的單位改為像素,然后用選區選中要測量的部分,在信息面板中就顯示出當前選區的寬高了(如果你實在不知道怎么改單位,怎么選區怎么查看的,就要補習一下ps啦)。

      測量后得知:整體寬度為900px,main部的寬度為664px,side寬度為228px。把這三個基本的寬度測量后,下面就可以寫css代碼了。由于本實例是按照實際當中應用來做的,所以css樣式表就最好寫在單獨文件里了,不要再寫在文件內部了,這樣可以利用代碼的重用性,減少很多勞動強度。下面就新建一個css樣式表文件:在DW文件菜單選擇新建,然后在打開的窗口頁面類型中選擇css,創建后保存在css文件夾中并命名為layout.css

      保存后先設置全局的樣式,而后寫每一塊單獨的樣式,全局樣式如下:

      body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}

      ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}

      ul { list-style:none;}

      img { border:0px;}

      a { color:#05a; text-decoration:none;}

      a:hover { color:#f00;}

      全局的樣式定義完后,下面定義以上幾大塊的樣式,先設置下#containerr的樣式如下:

      #container { width:900px; margin:0 auto;}

      預覽下index.html,發現并沒有改變,這是為什么呢?因為剛定義的樣式表沒有和html文件關聯,所以設置的樣式當然不能對它生效了,還記得第一天課時講的幾種樣式并聯方式嗎?下面我操作一遍:在css面板中點擊附加樣式表按鈕,然后在彈出的窗口中選擇剛才創建的樣式表文件,確定,ok了,預覽一下,是不是整體已經居中了呢。

      如果已經是寬度為900px并居中,說明樣式和文件關聯好了。這就是為什么要定義一個站點了,因為許多文件要關聯在一起才能構成一個完整的網頁,所以要把它們放在一起,才能讓這個頁面找到和它相關的文件在哪里。下面設置內部幾大塊的樣式,為了便于觀察,我們把部分塊設置了背景色。代碼如下:

      /*body*/

      #container { width:900px; margin:0 auto;}

      /*header*/

      #header { height:70px; background:#CCFFCC; margin-bottom:8px;}

      #nav { height:30px; background:#CCFFCC; margin-bottom:8px;}

      /*main*/

      #maincontent { margin-bottom:8px;}

      #main { float:left; width:664px; height:500px; background:#FFFF99;}

      #side { float:right; width:228px; height:500px; background:#FFCC99;}

      /*footer*/

      #footer { height:70px; background:#CCFFCC;}

      現在預覽一下:在IE6下#maincontent的底部外邊距并沒有生效,而在IE8下,#footer干脆跑到#maincontent的下邊了,這又是怎么回事呢?如果前邊幾天你都認真學的話,那么這個問題已經不是問題了。這就是之前我們講的,如果一個容器內的元素都浮動的話,那么它的高度將不會去適應內部元素的高度。解決辦法是在#maincontent增加 overflow:auto; zoom:1;,這樣就可以讓它自動適應內部元素的高度了。

      現在再預覽一下,是不是都正常了。為了更加保險,建議在header、nav、maincontent、footer之間增加如下一句代碼并設置css樣式如下,它的作用是清除浮動。

      < d iv class="clearfloat">< /d iv>

      .clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}

      四、切割效果圖

      基本框架搭建完畢后,下一步就是要分析每一塊該怎么切圖了。切圖方法有多種,可以使用ps或fireworks自帶的切片工具,也可以用QQ的截屏或者創建新文件,把需要的部分復制過來保存都可以,關鍵看個人喜好了。

      用ps的切片工具的話,把需要切割的區域用切片工具切分,如果要設置圖片的名稱,請使用切片選擇工具,然后在切片上雙擊,會彈出如下窗口,填寫名字后確定即可。

      切割完后,需要保存圖片了,選擇文件——存儲為web和設備所用格式,在彈出的窗口中點擊選中切片,然后在右側可以設置當前切片的圖片格式。這里有個技巧,一般小型色彩單一的圖片,采用gif格式,照片類大型圖片采用jpg,這樣生成的圖片既能保證質量,圖片體積又小

      設置完圖片的格式后,就可以存儲了,這里選擇到images的上一級目錄就行了,ps會自動創建images目錄并把圖片文件放入,如果已存在,直接放入。在格式處選擇僅限圖像,如果選擇html和圖像,ps會自動生成一個表格式的網頁,這個頁面不是我們需要的,就不讓它生成了;還有一個需要注意的地方就是選擇所有用戶切片,這樣只把我們手動切割的圖片保存下來,其它的就不保存了。保存后的圖片如下所示,其中hot_bg.gif這張圖片切割時沒有隱藏上邊的文字,一會兒在ps里再處理一下把文字抹掉。

      目前所切的圖片只是一部分,并沒有把整個頁面所需的圖片全都切割下來,比如導航部分所用背景圖片可以放到一張圖片上,下面就用新建文件,然后用QQ截屏,粘貼過去的方法來創建。

      分析一下上圖的導航部分:1、兩端的圓角;2、鼠標劃過狀態和當前欄目狀態寬度應該隨著字數的多少而改變;3、二級導航有鼠標劃過時的狀態。分析完之后,就需要把需要的圖片整合到一張圖片上了,整合的結果如下圖,這個根據自己的需要進行整合。其實完全可以把其它一些小圖標都整合在一張,但那樣操作起來比較麻煩,所以我們還是歸一下類,把相關的圖標整合到一起。

      接下來整合側邊欄的背景圖片,分析發現側邊欄應用同樣的樣式,只不過高度有所不同,而且是四角都是圓角,所以只用一個通用的就可以滿足所有側邊欄塊的需求了。那么怎么制作這個通用的背景呢?從下圖我們發現,標題的高度都是一樣的,只不過是下邊的內容高度不同而已,那么我們把下邊內容的背景制作的足夠長,超過可能出現的最大高度就可以滿足需求了。

      整合后的效果如上圖,如果你現在還不明白為什么要這么做,那么一會兒寫完樣式表你就明白了。下面把三個圖標也給切出來,如下圖:

      這些完事后,還有聯系我們的圖片和修飾小圖標了。聯系我們的圖片如下,這里的圖片和小圖標要背景透明,這樣才不會遮蓋下面的背景。

      公司業務:北京網站建設刷百度下拉刷百度指數虛擬主機租用

      如轉載,請保留本文鏈接地址:http://www.knkk.tw/Style/Css/1776/

      Loading......
      工作時間:

      AM 09:00 ~ 12:00

      PM 14:00 ~ 18:00

      聯系方式:

      Tel 010-50933590

      Hp 18701620736

      設計優勢

      獨立的設計團隊 帶給您全新的視覺體驗

      功能開發

      強大的技術實力,完成您想要的任何功能

      售后服務

      完善的售后服務,解決您在使用過程中遇到的問題

      Copyright © 2010 - 2018 北京順晟科技發展有限公司 All Rights Reserved

      地址:北京市順義區南法信政府府前街16號 炫立方 | TEL:010-50933590

      北京網站建設 | 北京網站設計 | 北京SEO公司

      提款快的博彩信誉平台

      <label id="2hp7p"></label>
      <dl id="2hp7p"><ruby id="2hp7p"></ruby></dl><var id="2hp7p"><ol id="2hp7p"></ol></var>
      <output id="2hp7p"><ruby id="2hp7p"></ruby></output>
        <blockquote id="2hp7p"></blockquote>

        <thead id="2hp7p"></thead>

        <output id="2hp7p"></output>

          <var id="2hp7p"></var>

          <label id="2hp7p"></label>
          <dl id="2hp7p"><ruby id="2hp7p"></ruby></dl><var id="2hp7p"><ol id="2hp7p"></ol></var>
          <output id="2hp7p"><ruby id="2hp7p"></ruby></output>
            <blockquote id="2hp7p"></blockquote>

            <thead id="2hp7p"></thead>

            <output id="2hp7p"></output>

              <var id="2hp7p"></var>