1、最簡單的 divcss 網頁設計報告及其代碼實驗六CSSfi?局【實驗目的】掌握用CSS勺布局?！緦嶒瀮热荨?、熟悉Dreamweaver軟件的環(huán)境；2、會使用CSS進行布局。【實驗步驟】1. 打開Dreamweaver新建HTMDt件。在代碼中body中插入一 個div標簽。然后選擇標簽，新建 cssrn則，在新建的cssrn則中, 對新建的規(guī)則進行設置。2. 對背景項設置，可以設置背景色；對方框項設置，可以設置標 簽的寬，高，和浮動（左對齊，右對齊，居中，無），以及方框位置的 Padding 和 Margin 進行設置；對邊框設置，設置它的類型、寬度和顏色。這是一欄布局。3. 二欄布局是在

2、一欄布局的基礎上再新建一個DIV 標簽。 對新建的標簽進行同樣的設置，在設置方框的浮動時，選擇不同的浮動，會出現(xiàn)不同的效果， 如一個 DIV 標簽設置為左對齊， 另一個設為右對齊。這種效果還可以通過所建規(guī)則中的定位進行設置。4. 嵌套布局。將第三個div 嵌套在另一個div 中。【實驗結果】【實驗心得和體會】通過本次的實驗，我熟練掌握了 div 布局技巧。能夠完成簡單的css+div 布局。如上圖?，F(xiàn)在網頁設計過程中基本都是使用 css+div的格式進行布局。學會css+div 對于網頁設計來說有很重要的意義。DIV+CSS 網頁設計實例教程目錄:第一步：規(guī)劃網站，本教程將以圖示為例構建網站；

3、第二步：創(chuàng)建html 模板及文件目錄等；第三步：將網站分為五個div ，網頁基本布局的基礎；第四步：網頁布局與div 浮動等；第五步：網頁主要框架之外的附加結構的布局與表現(xiàn)；第六步：頁面內的基本文本的樣式 （css） 設置；第七步：網站頭部圖標與logo 部分的設計；第八步：頁腳信息 （ 版權等 ） 的表現(xiàn)設置；第九步：導航條的制作（ 較難 ） ；第十步：解決IE 瀏覽器的顯示BUG；第一步：規(guī)劃網站，本教程將以圖示為例構建網站1. 規(guī)劃網站，本教程將以下圖為例構建網站。其基本布局見下圖：主要由五個部分構成：1 .Main Navigation 導航條，具有按鈕特效。 Width: 760px

4、Height: 50px2 .Header 網站頭部圖標， 包含網站的 logo 和站名。 Width: 760pxHeight: 150px3 .Content 網站的主要內容。 Width: 480px Height: Changesdepending on content4 .Sidebar 邊框， 一些附加信息。 Width: 280px Height: Changesdepending onWidth: 760px Height:5.Footer 66px第二步： 創(chuàng)建 html 模板及文件目錄等1. 創(chuàng)建 html 模板。 代碼如 下：CompanyName - PageNamei

5、mport "css/master.css"將其保存為 index.html, 并創(chuàng)建文件夾css ， images， 網站結構如下：2. 創(chuàng)建網站的大框，即建立一個寬 760px 的盒子，它將包含網站的所有元素。在 html 文件的和之間寫入Hello world.創(chuàng)建 css 文件， 命名為 master.css, 保存在 /css/ 文件夾下。 寫入：#page-container width: 760px;background: red;控制html的id為page-container 的盒子的寬為760px,背景為紅色。表現(xiàn)如下：現(xiàn)在為了讓盒子居中，寫入 marg

6、in: auto; ，使 css 文件為：#page-container width: 760px;margin: auto;background: red;現(xiàn)在你可以看到盒子和瀏覽器的頂端有8px 寬的空隙。這是由于瀏覽器的默認的填充和邊界造成的。 消除這個空隙， 就需要在 css 文件中寫入：html, body margin: 0;padding: 0;第三步：將網站分為五個div ，網頁基本布局的基礎:1. 將“第一步”提到的五個部分都放入盒子中，在html 文件中寫入：Main NavHeaderSidebar AContentFooter表現(xiàn)如下：2. 為了將五個部分區(qū)分開來，我們

7、將這五個部分用不同的背景顏色標示出來，在css 文件寫入：#main-nav background: red;height: 50px;#header background: blue;height: 150px;#sidebar-a background: darkgreen;#content background: green;#footer background: orange;height: 66px;表現(xiàn)如下：第四步：網頁布局與div 浮動等：1. 浮動，首先讓邊框浮動到主要內容的右邊。用 css 控制浮動 :#sidebar-a float: right;width: 280px;

8、background: darkgreen;表現(xiàn)如下：2. 往主要內容的盒子中寫入一些文字。在html 文件中寫入：Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Nullam gravida enim ut risus. Praesent sapien purus, ultricesa, varius ac, suscipit ut, enim. Maecenas in lectus.Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada e

9、nim vitae lacus euismod vulputate. Nullam rhoncusmauris ac metus. Maecenas vulputate aliquam odio. Duisscelerisque justo a pede. Namaugue lorem, semper at, porta eget, placerat eget,purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.表現(xiàn)如下：但是你可以看到主要內容的盒子占據了整個page-contai

10、ner 的寬度，我們需要將#content 的右邊界設為280px。以使其不和邊框發(fā)生沖突。css 代碼如下：#content margin-right: 280px;background: green;同時往邊框里寫入一些文字。在html 文件中寫入：Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Nullam gravida enim ut risus. Praesent sapien purus, ultricesa, varius ac, suscipit ut, enim. Maecenas in lectus.Don

11、ec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncusmauris ac metus. Maecenas vulputate aliquam odio. Duisscelerisque justo a pede. Namaugue lorem, semper at, porta eget, placerat eget,purus. Suspendisse mattis nunc vestibulum ligula.

12、 In hac habitasse platea dictumst.表現(xiàn)如下：這也不是我們想要的，網站的底框跑到邊框的下邊去了。這是由于我們將邊框向右浮動， 由于是浮動， 所以可以理解為它位于整個盒子之上的另一層。因此，底框和內容盒子對齊了。 因此我們往css中寫入：#footer clear: both;background: orange;height: 66px;表現(xiàn)如下：第一天XHTML CS強礎知識歡迎大家學習十天學會web標準，也就是我們常說的DIV+CSS不過這里的DIV+CS牖一種錯誤的叫法，建議大家還是稱之為 web標 準。學習本系列教程需有一定html 和 css 基礎，

13、也就是指您之前做過網頁，會用表格布局。如果您剛開始學習網頁制作，不知道什么是表格布局及 html 和 css ，建議您先去充電，否則學習本教程會非常吃力或者根本就聽不懂。由于時間關系，本教程只講解一些基礎知識，讓您從原來的表格布局跨入到web標準（div+css ）布局，會使用web標準制作出常見的頁面，這也達到了本教程的目的。 本教程多以實例形式循序漸進講解，實例涉及到哪些關鍵點或難點就講解什么，較少講解概念。因為概念這些東西很難說明白， 或者說明白你也不一定能聽懂， 聽懂了也不一定能理解。所以把概念留給大家以后再深入研究。由于章節(jié)關系，沒有把css 和 css hack 單獨分出，只是在用

14、到的時候穿插入講解了。 html 基礎和 css 基礎只在第一節(jié)中介紹了幾點重要的。F面我們開始第一天的學習一、 xhtml css 基礎知識首先說一下我們這節(jié)課的知識點1. 文檔類型2. 語言編碼3. html 標簽4. css樣式5. css優(yōu)先級6. css盒模型組成1 ）文檔類型當我們用dreamweaver新建一下html格式文檔時，查看源代碼,會發(fā)現(xiàn)代碼最上部有如下這句話：點此查看CSS(content) 、 填充 (padding) 、 邊框 (border) 、 邊界 (margin) ， 盒子模式都具備這些屬性。我們可以把它想像成現(xiàn)實中上方開口的盒子，然后從正上往下俯視，邊框

15、相當于盒子的厚度，內容相對于盒子中所裝物體的空間，而填充呢， 相當于為防震而在盒子內填充的泡沫， 邊界呢相當于在這個盒子周圍要留出一定的空間， 方便取出。 是不是這樣就很容易理解盒模型了。所以整個盒模型在頁面中所占的寬度是由左邊界+左邊框+左填充+內容 +右填充+右邊框+右邊界組成，而 css 樣式中 weight 所定義的寬度僅僅是內容部分的寬度，這是許多朋友容易搞混的地方這里的邊界我們也稱之為： 外邊距、 外補?。?填充也叫： 內邊距、內補丁。如果現(xiàn)在您對CSS盒模型理解還不夠透徹，繼續(xù)往下看，后來的 章節(jié)會都會應用到盒模型實例。二、如何開始學習web標準？1 ）有 HTM體口 CSS&#

16、174;礎學習本系列教程前， 要求您有一定的 html 和 css 基礎， 制作過網頁，會用表格進行網頁布局，這樣學習起來才會很輕松。如果您對這些還不懂，建議先學習這些知識，然后再來學習本教程。2 ）轉變觀念在以前我們制作網站時，總是習慣于先考慮外觀、顏色、字體及布局等所有表現(xiàn)在頁面上的內容。 但外觀并不是最重要的， 相反最終用戶在訪問網頁時的體驗才是優(yōu)先要考慮的。一個由 div css 布局且結構良好的頁面可以通過css 定義成任何外觀， 在任何網絡設備上（包括手機、PD街口計算機）上以任何外觀表現(xiàn)出來，而且用 div + css 布局構建的網頁以夠簡化代碼，加快顯示速度。所以要想學好div css ，首先要轉變觀念，需要拋棄傳統(tǒng)的表格（Table）布局方式，采用層（DIV）布局，并且使用層疊樣式表（CSS）來 實現(xiàn)頁面的外觀。給網站瀏覽者更好的體驗。3 ）多動手、多動腦說到這點，有點小兒科了，就像我們上小學時老師常常教我們的那樣。為什