網(wǎng)頁設(shè)計(jì)與制作課件 第11章 使用CSS+div布局網(wǎng)頁_第1頁
網(wǎng)頁設(shè)計(jì)與制作課件 第11章 使用CSS+div布局網(wǎng)頁_第2頁
網(wǎng)頁設(shè)計(jì)與制作課件 第11章 使用CSS+div布局網(wǎng)頁_第3頁
網(wǎng)頁設(shè)計(jì)與制作課件 第11章 使用CSS+div布局網(wǎng)頁_第4頁
網(wǎng)頁設(shè)計(jì)與制作課件 第11章 使用CSS+div布局網(wǎng)頁_第5頁
已閱讀5頁，還剩34頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

使用CSS+DIV布局網(wǎng)頁P(yáng)owerPointdesignCONTNETScontents目錄CSS與DIV布局基礎(chǔ)01使用DIV02關(guān)于Div+CSS盒模型03Div+CSS布局定位040303030605Div+CSS布局理念常用的布局方式CSS與DIV布局基礎(chǔ)Part01什么是Web標(biāo)準(zhǔn)CSS與DIV布局基礎(chǔ)

Web標(biāo)準(zhǔn)是近幾年在國內(nèi)出現(xiàn)的一個(gè)新興名詞。大概從2003年左右開始，有關(guān)Web標(biāo)準(zhǔn)與CSS網(wǎng)站設(shè)計(jì)的各類文章與討論，便伴隨著網(wǎng)絡(luò)上大大小小的設(shè)計(jì)與技術(shù)論壇開始展開，也掀起了學(xué)習(xí)Web標(biāo)準(zhǔn)與CSS布局的熱潮。Web標(biāo)準(zhǔn)是由W3C（WorldWideWebConsortium）和其他標(biāo)準(zhǔn)化組織指定的一套規(guī)范集合，包含一系列標(biāo)準(zhǔn)，如HTML、XHTML、JavaScript以及CSS等。Web標(biāo)準(zhǔn)的目的在于創(chuàng)建一個(gè)統(tǒng)一用于Web表現(xiàn)層技術(shù)的標(biāo)準(zhǔn)，以便于通過不同瀏覽器或終端設(shè)備向最終用戶展示信息內(nèi)容。Web標(biāo)準(zhǔn)即網(wǎng)站標(biāo)準(zhǔn)。目前通常所說的Web標(biāo)準(zhǔn)一般指進(jìn)行網(wǎng)站建設(shè)所采用的基于XHTML語言的網(wǎng)站設(shè)計(jì)語言，Web標(biāo)準(zhǔn)中典型的應(yīng)用模式是Div+CSS，實(shí)際上Web標(biāo)準(zhǔn)并不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。Web標(biāo)準(zhǔn)由一系列的規(guī)范組成。由于Web設(shè)計(jì)越來越趨向于整體與結(jié)構(gòu)化，對(duì)于網(wǎng)頁設(shè)計(jì)制作者來說，理解Web標(biāo)準(zhǔn)首先要理解結(jié)構(gòu)和表現(xiàn)分離的意義。剛開始的時(shí)候理解結(jié)構(gòu)和表現(xiàn)的不同之處可能很困難，但是理解這點(diǎn)是很重要的，因?yàn)楫?dāng)結(jié)構(gòu)和表現(xiàn)分離后，用CSS樣式表來控制表現(xiàn)就是很容易的一件事了。Web標(biāo)準(zhǔn)的構(gòu)成

1.結(jié)構(gòu)結(jié)構(gòu)技術(shù)用于對(duì)網(wǎng)頁中用到的信息（文本、圖像、動(dòng)畫等）進(jìn)行分類和整理，目前用于結(jié)構(gòu)化設(shè)計(jì)的Web標(biāo)準(zhǔn)技術(shù)主要是HTML。2.表現(xiàn)表現(xiàn)技術(shù)用于對(duì)已被結(jié)構(gòu)化的信息進(jìn)行顯示上的控制，包括位置、顏色、字體、大小等形式控制。目前用于表現(xiàn)設(shè)計(jì)的Web標(biāo)準(zhǔn)技術(shù)就是CSS。W3C創(chuàng)建CSS的目的是用CSS來控制整個(gè)網(wǎng)頁的布局，與HTML所實(shí)現(xiàn)的結(jié)構(gòu)完全分離，簡單來說就是表現(xiàn)與內(nèi)容完全分離，使站點(diǎn)的維護(hù)更加容易。這也正是Div+CSS布局的一大特點(diǎn)。3.行為行為是指對(duì)整個(gè)文檔的一個(gè)模型定義和交互行為的編寫，目前用于行為設(shè)計(jì)的Web標(biāo)準(zhǔn)技術(shù)主要有下面兩個(gè)。其一是DOM（DocumentObjectModel），即文檔對(duì)象模型，相當(dāng)于瀏覽器與內(nèi)容結(jié)構(gòu)之間的一個(gè)接口。它定義了訪問和處理HTML文檔的標(biāo)準(zhǔn)方法，把網(wǎng)頁和腳本以及其他的編程語言聯(lián)系了起來。第二個(gè)是ECMAScript（JavaScript的擴(kuò)展腳本語言），即由CMA（ComputerManufacturersAssociation）制定的腳本語言（JavaScript），用于實(shí)現(xiàn)網(wǎng)頁對(duì)象的交互操作。DIV概述

Div全稱Division，意為“區(qū)分”，它是用來定義網(wǎng)頁內(nèi)容中邏輯區(qū)域的標(biāo)簽，可以通過手動(dòng)插入Div標(biāo)簽并對(duì)它們應(yīng)用CSS樣式來創(chuàng)建網(wǎng)頁布局。Div是用來為HTML文檔中的塊內(nèi)容設(shè)置結(jié)構(gòu)和背景屬性的元素。它相當(dāng)于一個(gè)容器，由起始標(biāo)簽<div>和結(jié)束標(biāo)簽</div>之間的所有內(nèi)容構(gòu)成，在它里面可以內(nèi)嵌表格（table）、文本（text）等HTML代碼。其中所包含的元素特性由Div標(biāo)簽的屬性來控制，或使用樣式表格式化這個(gè)塊來控制。Div是HTML中指定的，專門用于布局設(shè)計(jì)的容器對(duì)象。在傳統(tǒng)的表格式的布局當(dāng)中，之所以能進(jìn)行頁面的排版布局設(shè)計(jì)，完全依賴于表格對(duì)象。在頁面當(dāng)中繪制一個(gè)由多個(gè)單元格組成的表格，在相應(yīng)的表格中放置內(nèi)容，通過表格單元格的位置控制來達(dá)到實(shí)現(xiàn)布局的目的，這是表格式布局的核心。而現(xiàn)在，我們所要接觸的是一種全新的布局方式——CSS布局，Div是這種布局方式的核心對(duì)象，使用CSS布局的頁面排版不需要依賴表格，僅從Div的使用上說，一個(gè)簡單的布局只需要依賴Div與CSS，因此也可以稱為Div+CSS布局。使用DIVPart02（1）啟動(dòng)Dreamweaver，切換到“代碼”視圖，在<body>與</body>之間輸入代碼，表示插入DIV。（2）在<div><div>標(biāo)簽之前添加<imgsrc="images/cd1.jpg">，完整代碼如下，表示在DIV中插入名稱為cd1的jpg圖像。（3）保存文件，在瀏覽器中顯示效果如圖所示。課堂案例——在Div中插入圖像與表格、圖像等網(wǎng)頁對(duì)象一樣，只需在代碼中應(yīng)用<div>和</div>這樣的標(biāo)簽形式，并將內(nèi)容放置其中，便可以應(yīng)用Div標(biāo)簽。Div對(duì)象在使用時(shí)，同其他HTML對(duì)象一樣，可以加入其他屬性，比如id、class、align、style等屬性，而在CSS布局方面，為了實(shí)現(xiàn)內(nèi)容與表現(xiàn)分離，不應(yīng)當(dāng)將align（對(duì)齊）屬性與style（行間樣式表）屬性編寫在HTML頁面的Div標(biāo)簽中，因此Div代碼只能擁有以下兩種形式。<divid="id名稱">內(nèi)容<div><divclass="class名稱">內(nèi)容</div>使用id屬性可以將當(dāng)前這個(gè)Div指定一個(gè)id名稱，在CSS中使用id選擇符進(jìn)行樣式編寫，同樣可以使用class屬性，在CSS中使用class選擇符進(jìn)行樣式編寫。在一個(gè)沒有應(yīng)用CSS樣式的頁面中，即使應(yīng)用了Div，也沒有任何實(shí)際效果，就如同直接輸入了Div中的內(nèi)容一樣，那么該如何理解Div在布局上所帶來的不同呢？首先用表格與Div進(jìn)行比較。用表格布局時(shí)，使用表格設(shè)計(jì)的左右分欄或上下分欄，都能夠在瀏覽器預(yù)覽中看到分欄效果。表格自身的代碼形式?jīng)Q定了在瀏覽器中顯示的時(shí)候，兩塊內(nèi)容分別顯示在左單元格與右單元格之中，因此不管是否設(shè)置了表格邊框，都可以明確地知道內(nèi)容存在于兩個(gè)單元格中，也達(dá)到了分欄的效果。啟動(dòng)Dreamweaver，切換到“代碼”視圖，在<body>與</body>之間輸入代碼。切換到“設(shè)計(jì)”視圖，可以看到插入的兩個(gè)Div。按F12鍵瀏覽網(wǎng)頁，能夠看到僅僅出現(xiàn)了兩行文字，并沒有看出Div的任何特征，顯示效果如圖所示。創(chuàng)建Div要對(duì)Div執(zhí)行某項(xiàng)操作，首先需要將其選中，在Dreamweaver中選擇Div的方法有兩種。第1種：將鼠標(biāo)光標(biāo)移至Div周圍的任意邊框上，當(dāng)邊框顯示為紅色實(shí)線時(shí)單擊鼠標(biāo)左鍵可將其選中，如左圖所示。第2種：將光標(biāo)置于Div中，然后單擊“狀態(tài)欄”上相應(yīng)的<div>標(biāo)簽，同樣可將其選中，如右圖所示。選擇Div關(guān)于Div+CSS盒模型Part03學(xué)習(xí)Div+CSS，首先要弄懂的就是這個(gè)盒模型，這就是Div排版的核心所在。傳統(tǒng)的表格排版是通過大小不一的表格和表格嵌套來定位排版網(wǎng)頁內(nèi)容，改用CSS排版后，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網(wǎng)頁。這種排版方式的網(wǎng)頁代碼簡潔，表現(xiàn)和內(nèi)容相分離，維護(hù)方便。那么它為什么叫盒模型呢？先說說在網(wǎng)頁設(shè)計(jì)中常用的屬性名，即內(nèi)容（content）、填充（padding）、邊框（border）和邊界（margin），CSS盒模型都具備這些屬性，如圖所示。盒模型的概念margin指的是元素與元素之間的距離，例如設(shè)置元素的下邊界margin-bottom。代碼在瀏覽器中的預(yù)覽效果如左下圖所示，可以看到上下兩個(gè)元素之間增加了50像素的距離。當(dāng)兩個(gè)行內(nèi)元素相鄰的時(shí)候，它們之間的距離為第1個(gè)元素的右邊界margin-right加上第2個(gè)元素的左邊界margin-left。以上代碼在瀏覽器中的預(yù)覽效果如右下圖所示，可以看到兩個(gè)元素之間的距離為40px+40px=80px。margin（邊界）但如果不是行內(nèi)元素，而是產(chǎn)生換行效果的塊級(jí)元素，情況就不同，兩個(gè)塊級(jí)元素之間的距離不再是兩個(gè)邊界相加，而是取兩者中較大者的margin值。從代碼中可以看到，第2個(gè)塊級(jí)元素的margin-top值大于第1個(gè)塊級(jí)元素的margin-bottom值，所以它們之間的邊界應(yīng)為第2個(gè)塊級(jí)元素的邊界值，預(yù)覽效果如上圖所示。除了行內(nèi)元素間隔和塊級(jí)元素間隔這兩種關(guān)系外，還有一種位罝關(guān)系，它的margin值對(duì)CSS排版有重要的作用，這就是父子關(guān)系。當(dāng)一個(gè)<div>塊包含在另一個(gè)<div>塊中間時(shí)，便形成了典型的父子關(guān)系，其中子塊的margin將以父塊的content（內(nèi)容）為參考。設(shè)計(jì)視圖的效果如下圖所示，可以看到子Div距離父Div上邊為40px（margin30px+paddingl0px），其余邊都是padding的10px。margin（邊界）border一般用于分離元素，border的外圍即為元素的最外圍，因此計(jì)算元素實(shí)際的寬和高時(shí)，就要將border納入。border的屬性主要有3個(gè)，分別為color（顏色）、width（粗細(xì)）和style（樣式）。在設(shè)置border時(shí)，常常需要將這3個(gè)屬性進(jìn)行配合，才能達(dá)到良好的效果。

border（邊框）（1）打開Dreamweaver，單擊“代碼”按鈕切換到“代碼”視圖，在<body></body>標(biāo)簽之間輸入如下代碼。（2）保存文件，在瀏覽器中的預(yù)覽效果如圖所示。課堂案例——文字虛線分割padding用于控制content（內(nèi)容）與border（邊框）之間的距離，例如加入padding-bottom屬性，可以使用不同的單位來定義padding-bottom的值，如像素（px）、百分比（%）、em、rem等。以上代碼的預(yù)覽效果如圖所示，可以看到下邊框與正文內(nèi)容相隔了60像素。padding（填充）Div+CSS布局定位Part04相對(duì)定位在CSS中的寫法是position:relative;，其表達(dá)的意思是以父級(jí)對(duì)象（它所在的容器）的坐標(biāo)原點(diǎn)為坐標(biāo)原點(diǎn)。無父級(jí)則以body的坐標(biāo)原點(diǎn)為坐標(biāo)原點(diǎn)，配合top、right、bottom、left（上、右、下、左）值來定位元素。當(dāng)父級(jí)內(nèi)有padding等CSS屬性時(shí)，當(dāng)前級(jí)的坐標(biāo)原點(diǎn)則參照父級(jí)內(nèi)容區(qū)的坐標(biāo)原點(diǎn)進(jìn)行定位。如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，在它所在的位置上，通過設(shè)置垂直或水平位置，讓這個(gè)元素相對(duì)于起點(diǎn)進(jìn)行移動(dòng)。如果將top設(shè)罝為40像素，那么元素將出現(xiàn)在原位置頂部下面40像素的位置。如果將left設(shè)置為40像素，那么會(huì)在元素左邊創(chuàng)建40像素的空間，也就是將元素向右移動(dòng)。以上代碼的預(yù)覽效果如圖所示。relative（相對(duì)定位）絕對(duì)定位在CSS中的寫法是position:absolute;，其表達(dá)的意思是參照瀏覽器的左上角且配合top、right、bottom、left（上、右、下、左）值來定位元素。絕對(duì)定位可以使對(duì)象的位置與頁面中的其他元素?zé)o關(guān)，使用了絕對(duì)定位之后，對(duì)象就浮在網(wǎng)頁的上面。以上代碼的預(yù)覽效果如圖所示。absolute（絕對(duì)定位）浮動(dòng)定位在CSS中用float屬性來表示，當(dāng)float值為none時(shí)，表示對(duì)象不浮動(dòng)；為left時(shí)，表示對(duì)象向左浮動(dòng)；為right時(shí)，表示對(duì)象向右浮動(dòng)。下面介紹浮動(dòng)的幾種形式。普通文檔流，也就是普通頁面布局順序顯示的CSS樣式如下。預(yù)覽效果如左圖所示。如果把left塊向右浮動(dòng)，它脫離文檔流并向右移動(dòng)，直到它的邊緣碰到box的右邊框。預(yù)覽效果如右圖所示。float（浮動(dòng)定位）當(dāng)把left塊向左浮動(dòng)時(shí)，它脫離文檔流并且向左移動(dòng)，直到它的邊緣碰到box的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，但實(shí)際上覆蓋住了main塊，使main塊從左視圖中消失。預(yù)覽效果如左圖所示。如果把3個(gè)塊都向左浮動(dòng)，那么left塊向左浮動(dòng)直到碰到box框的左邊緣，另外兩個(gè)塊向左浮動(dòng)，直到碰到前一個(gè)浮動(dòng)框。以上代碼的預(yù)覽效果如右圖所示。float（浮動(dòng)定位）如果包含框太窄，無法容納水平排列的3個(gè)浮動(dòng)元素，那么其他浮動(dòng)塊向下移動(dòng)，直到有足夠空間的地方。預(yù)覽效果如左圖所示。如果浮動(dòng)塊元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)，可能會(huì)被其他浮動(dòng)元素卡住。以上代碼的預(yù)覽效果如右圖所示。float（浮動(dòng)定位）Div+CSS布局理念Part05在利用CSS布局頁面時(shí)，首先要有一個(gè)整體的規(guī)劃，包括整個(gè)頁面分成哪些模塊，各個(gè)模塊之間的父子關(guān)系等。以最簡單的框架為例，頁面由banner、主體內(nèi)容（content）、菜單導(dǎo)航（links）和腳注（footer）等幾個(gè)部分組成，各個(gè)部分分別用自己的id來標(biāo)識(shí)，如圖所示。將頁面用Div分塊當(dāng)頁面的內(nèi)容已經(jīng)確定后，則需要根據(jù)內(nèi)容本身考慮整體的頁面布局類型，如是單欄、雙欄還是三欄等，如圖所示。設(shè)計(jì)各塊的位置常用的布局方式Part06在網(wǎng)頁布局中，居中布局設(shè)計(jì)非常廣泛，所以如何在CSS中讓元素居中顯示，是大多數(shù)開發(fā)人員首先要學(xué)習(xí)的重點(diǎn)之一。居中布局設(shè)計(jì)主要有兩個(gè)基本方法。1.使用自動(dòng)空白邊讓設(shè)計(jì)居中假設(shè)一個(gè)布局，希望其中的容器Div在屏幕上水平居中。只需定義Div的寬度，然后將水平空白邊設(shè)置為auto。預(yù)覽效果如圖所示。居中布局設(shè)計(jì)2.使用定位和負(fù)值空白邊讓設(shè)計(jì)居中首先定義容器的寬度，然后將容器的position屬性設(shè)置為relative，將left屬性設(shè)罝為50%，就會(huì)把容器的左邊緣定位在頁面的中間，其代碼如下。#box{width:720px;position:relative;left:50%;}如果不希望讓容器的左邊緣居中，而是讓容器的中間居中，只要對(duì)容器的左邊應(yīng)用一個(gè)負(fù)值的空白邊，寬度等于容器寬度的一半，這樣就會(huì)把容器向左移動(dòng)它寬度的一半，從而讓它在屏幕上居中，其代碼如下。#box{width:720px;position:relative;left:50%;margin-left:-360px;}居中布局設(shè)計(jì)浮動(dòng)布局設(shè)計(jì)也是主流布局設(shè)計(jì)中不可缺少的布局之一，基于浮動(dòng)的布局利用了float（浮動(dòng)）屬性來并排定位元素。1.兩列固定寬度布局兩列寬度布局非常簡單。為id名為left與right的Div制定CSS樣式，讓兩個(gè)Div在水平行中并排顯示，從而形成兩列式布局。為了實(shí)現(xiàn)兩列式布局，使用了float屬性，這樣兩列固定寬度的布局就能夠完整地顯示出來，預(yù)覽效果如左圖所示。2.兩列固定寬度居中布局兩列固定寬度居中布局可以使用Div的嵌套方式來完成，用一個(gè)居中的Div作為容器，將兩列分欄的兩個(gè)Div放置在容器中，從而實(shí)現(xiàn)兩列的居中顯示。為分欄的兩個(gè)Div加上了一個(gè)id名為box的Div容器。#box有了居中屬性，當(dāng)然里面的內(nèi)容也能做到居中，這樣就實(shí)現(xiàn)了兩列的居中顯示，預(yù)覽效果如右圖所示。該類型的頁面布局，無論作為主框架還是作為內(nèi)容分欄，都同樣適用。浮動(dòng)布局設(shè)計(jì)3.兩列寬度自適應(yīng)布局自適應(yīng)布局主要通過寬度的百分比值進(jìn)行設(shè)置，因此，在兩列寬度自適應(yīng)布局中，同樣是對(duì)百分比寬度值進(jìn)行設(shè)定。左欄寬度設(shè)置為20%，右欄寬度設(shè)置為70%，預(yù)覽效果如上圖所示。4.兩列右列寬度自適應(yīng)布局在實(shí)際應(yīng)用中，有時(shí)候需要左欄固定寬度，右欄根據(jù)瀏覽器窗口的大小自動(dòng)適應(yīng)。在CSS中只需要設(shè)置左欄寬度，右欄不設(shè)置任何寬度值，并且右欄不浮動(dòng)。左欄將呈現(xiàn)200px的寬度，而右欄將根據(jù)瀏覽器窗口大小自動(dòng)適應(yīng)，預(yù)覽效果如中圖所示。5.三列浮動(dòng)中間列寬度自適應(yīng)布局三列浮動(dòng)中間列寬度自適應(yīng)布局，是左欄固定寬度居左顯示，右欄固定寬度居右顯示，而中間欄則需要在左欄和右欄的中間顯示，根據(jù)左右欄的間距變化自動(dòng)適應(yīng)。單純使用float屬性與百分比屬性不能實(shí)現(xiàn)，這就需要絕對(duì)定位來實(shí)現(xiàn)了。絕對(duì)定位后的對(duì)象，不需要考慮它在頁面中的浮動(dòng)關(guān)系，只需要設(shè)置對(duì)象的top、right、bottom及l(fā)eft4個(gè)方向即可。首先使用絕對(duì)定位將左列與右列進(jìn)行位置控制。而中列則用普通CSS樣式。對(duì)于#main，不需要再?zèng)]定浮動(dòng)方式，只需要讓它的左邊和右邊的邊距永遠(yuǎn)保持#left和#right的寬度，便實(shí)現(xiàn)了自適應(yīng)寬度，從而實(shí)現(xiàn)了布局的要求，預(yù)覽效果如下圖所示。浮動(dòng)布局設(shè)計(jì)制作提示第1步：在Dreamweaver中新建一個(gè)網(wǎng)頁文件，將光標(biāo)置于頁面中，執(zhí)行“插入>Div”菜單命令，打開“插入Div”對(duì)話框，在ID文本框中輸入top，如上圖所示。第2步：設(shè)置完成后單擊“確定”按鈕，即可在頁面中插入名稱為top的Div，頁面效果如中圖所示。第3步：將光標(biāo)移至名為top的Div中，將多余的文本內(nèi)容刪除，執(zhí)行“插入>圖像>圖像”菜單命令，在Div中插入一幅圖像，如下圖所示。練習(xí)案例——使用Div布局織品網(wǎng)站制作提示第4步：執(zhí)行“插入>Div”菜單命令，打開“插入Div”對(duì)話框，在“插入”下拉列表中選擇“在標(biāo)簽之后”選項(xiàng)，并在右側(cè)的下拉列表中選擇〈divid=“top”〉選項(xiàng)，在ID下拉列表中輸入main，如上圖所示。第5步：設(shè)置完成后單擊“確定”按鈕，即可在頁面中插入名稱為main的Div，頁面效果如中圖所示。第6步：將光標(biāo)移至名為main的Div中，將多余的文本內(nèi)容刪除，執(zhí)行“插入>圖像>圖像”菜單命令，在Div中插入一幅圖像，如下圖所示。練習(xí)案例——使用Div布局織品網(wǎng)站制作提示第7步：執(zhí)行“插入>Div”菜單命令，打開“插入Div”對(duì)話框，在“插入”下拉列表中選擇“在標(biāo)簽之后”選項(xiàng)，并在右側(cè)的下拉列表中選擇〈divid=“main”〉選項(xiàng)，在ID下拉列表中輸入footer，如左圖所示。第8步：設(shè)置完成后單擊“確定”按鈕，即可在頁面中插入名稱為footer的Div，頁面效果如中圖所示。第9步：將光標(biāo)移至名為footer的Div中，將多余的文本內(nèi)容刪除，執(zhí)行“插入>圖像>圖像”菜單命令，在名為footer的Div中插入一幅圖像，如右圖所示。練習(xí)案例——使用Div布局織品網(wǎng)站制作提示第10步：執(zhí)行“修改>頁面屬性”菜單命令，打開“頁面屬性”對(duì)話框，在“上邊距”和“下邊距”文本框中都輸入0，完成后單擊“確定”按鈕，如左圖所示。第11步：執(zhí)行“文件>保存”菜單命令保存網(wǎng)頁，完成后按F12鍵預(yù)覽，效果如右圖所示。練習(xí)案例——使用Div布局織品網(wǎng)站制作提示第1步：在Dreamweaver中新建一個(gè)網(wǎng)頁文件，然后執(zhí)行“文件>保存”菜單命令，將文件保存為inde

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論