第10講 網(wǎng)頁布局元素：Ap DIV_第1頁
第10講 網(wǎng)頁布局元素：Ap DIV_第2頁
第10講 網(wǎng)頁布局元素：Ap DIV_第3頁
第10講 網(wǎng)頁布局元素：Ap DIV_第4頁
第10講 網(wǎng)頁布局元素：Ap DIV_第5頁
已閱讀5頁，還剩31頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

網(wǎng)頁的布局使用表格布局網(wǎng)頁使用框架布局網(wǎng)頁上一講回顧本講主要內(nèi)容使用表格+框架布局網(wǎng)頁APDiv元素的應(yīng)用使用嵌入式框架布局頁面使用表格布局優(yōu)點：居中對齊，控制頁面尺寸缺點：網(wǎng)頁中的內(nèi)容過多無法顯示完整使用框架：優(yōu)點：擴大顯示區(qū)域缺點：居中對齊可能出現(xiàn)錯位情況解決途徑：表格+嵌入式框架實例演示插入IFRAME12用法如下：<iframename="a"width="120"height="160"src="tx1.html"frameborder="0"scrolling="no"></iframe>參數(shù)含義：Name框架的名字Src鏈接的源文件Frameborder框架的邊框設(shè)置Scrolling滾動條設(shè)置要求：利用嵌入式框架完成，以下網(wǎng)頁效果提交時間：本次課本講實踐任務(wù)1：返回APDiv元素的應(yīng)用關(guān)于APDiv

元素編輯APDIV元素APDIV元素的嵌套用APDIV布局頁面一、關(guān)于APDiv元素APDiv元素（又稱為絕對定位的DIV標(biāo)記），像文字、圖片、表格一樣是一種HTML網(wǎng)頁元素。APDiv的特點：1、靈活定位：

APDiv不僅可以精確定位在網(wǎng)頁中的任何地方；還可以獨立于整個網(wǎng)頁平面，彼此任意重迭而不受網(wǎng)頁束縛。2、可以作為網(wǎng)頁內(nèi)容的容器，放置文本，圖像或其他任何可以在HTML文檔正文中放入的網(wǎng)頁元素。3、可以被顯示和隱藏，通過程序在網(wǎng)頁中控制層的顯示或隱藏，實現(xiàn)層上內(nèi)容的動態(tài)交替顯示，實現(xiàn)一些特殊的顯示效果。APDiv元素的HTML代碼<divid="apDiv1">要在層中顯示的內(nèi)容</div>當(dāng)選按繪制APDiv鈕繪制AP元素時，Dreamweaver會在文件中插入一個APDiv的外框，并自動指定Div和id數(shù)值(根據(jù)預(yù)設(shè)，apDiv1就是第一個繪制的div，apDiv2就是第二個繪制的div，依此類推)。APDiv元素的HTML代碼每一個APDiv元素都有對應(yīng)的屬性設(shè)置，其代碼在<head></head>之間#apDiv1{ position:absolute; left:108px; top:73px; width:465px; height:279px; z-index:1;}選中需刪除的APDIV采用如下操作之一按【Delete】鍵選擇菜單：“編輯/清除”命令**APDIV元素的刪除**1、APDIV元素的選取選取一個APDIV元素在文檔編輯區(qū)中單擊APDIV元素邊框或單擊APDIV元素的選擇柄。選取多個APDIV元素按住【Shift】鍵，在需要選擇的多個APDIV元素中單擊。二、編輯APDIV元素2、APDIV元素的移動選中后APDIV元素直接拖動APDIV元素的選擇柄選中APDIV元素，利用屬性面板進行設(shè)置編號顯示元素在網(wǎng)頁中距離左上角的距離設(shè)置元素的大小顯示元素的層次關(guān)系，值越高，就在越上一層3、APDIV元素的屬性設(shè)置二、編輯APDIV元素小竅門批量設(shè)置多個APDIV元素具有相同的大小方法1：使用修改菜單插入多個APDIV元素設(shè)置好一個APDIV元素的大小按住shift鍵選擇其它未設(shè)置大小的APDIV元素，最后選擇設(shè)好尺寸的那個APDIV元素執(zhí)行菜單：修改/排列順序/設(shè)置高度相同修改/排列順序/設(shè)置寬度相同小竅門批量設(shè)置多個APDIV元素具有相同的大小方法2：使用編輯菜單，首選參數(shù)設(shè)置將布局選項卡中的繪制APDIV圖標(biāo)拖拽到編輯窗口即可小竅門設(shè)置多個APDIV元素的對齊方式方法1：使用修改菜單設(shè)置好一個APDIV元素的具體位置按住shift鍵選擇其它未設(shè)置位置的APDIV元素，最后選擇設(shè)好位置的那個APDIV元素執(zhí)行菜單：修改/排列順序/左對齊（右對齊）小竅門設(shè)置多個APDIV元素的對齊方式方法2：借助標(biāo)尺和輔助線執(zhí)行菜單：查看/標(biāo)尺/顯示（單位為：像素）按住鼠標(biāo)左鍵拖動編輯窗口左邊緣添加垂直輔助線按住鼠標(biāo)左鍵拖動編輯窗口上邊緣添加水平輔助線借助輔助線對齊多個APDIV元素按住ctrl鍵可以計算輔助線間的距離本講實踐任務(wù)2：3、APDIV元素的屬性設(shè)置可以通過AP元素面板對APDIV的顯示或隱藏進行控制層的可見性設(shè)置Default(默認)：不顯示可見屬性。Inherit(繼承)：用來繼承父層的可見屬性。Visible(可見)：不考慮父層的值，顯示子層的內(nèi)容。Hidden(隱藏)：不考慮父層的值，隱藏子層的內(nèi)容。AP元素面板執(zhí)行菜單命令：窗口/AP元素，打開AP元素面板本講實踐任務(wù)3：3、APDIV元素的屬性設(shè)置APDIV元素的溢出設(shè)置溢出：控制當(dāng)APDIV元素的內(nèi)容超過APDIV元素的指定大小時如何在瀏覽器中顯示層。visible：超出的部分照樣顯示；hidden：超出的部分隱藏；scroll：不管有否超出，都顯示滾動條；auto：有超出時才出現(xiàn)滾動條；3、APDIV元素的屬性設(shè)置APDIV元素的剪輯（即：裁切）剪輯：定義APDIV元素的可見部分。該值表示的是相對于層的邊界的距離。3、APDIV元素的屬性設(shè)置注意：剪輯左和上即輸入多少像素就剪輯多少像素如若要剪輯右和下則右中輸入：寬-要剪輯的像素值在下中輸入：高-要剪輯的像素值設(shè)定AP元素水平居中3、APDIV元素的屬性設(shè)置三、APDIV元素的嵌套其中：APDIV1、APDIV2、APDIV3，為平級關(guān)系A(chǔ)PDIV3和APDIV4是父子關(guān)系，即嵌套嵌套的含義：嵌套并不表示一個APDIV元素在另外一個APDIV元素里面顯示，而是指一個AP元素的代碼在另一個AP元素代碼的內(nèi)部。嵌套在內(nèi)的為子層，嵌套層外部的層稱為父層。三、APDIV元素的嵌套AP層對象元素的嵌套方法第一步：將光標(biāo)定位在要插入嵌套AP元素的父層內(nèi)。

第二步：拖動布局選項卡中的“繪制APDiv”到AP父層內(nèi)。嵌套的重要特點子層可浮動于文本編輯窗口的任何位置子層的大小可大于父層子層會隨著父層的移動而移動子層會繼承父層元素的可見性可根據(jù)實際需要嵌套多個子層如果將嵌套層中的父層刪除，則其下包含的所有子層也將同時被刪除。三、APDIV元素的嵌套要求：為師大地圖各重要建筑物添加圖片，要求當(dāng)鼠標(biāo)指針滑過時會展示一張圖片及建筑物信息，當(dāng)鼠標(biāo)移開時，提示信息和圖片都消失知識點：使用熱點、APDIV的嵌套和居中、顯示-隱藏行為建立第一個AP元素放置地圖建立第二個AP元素放置建筑物圖片建立第三個AP元素顯示提示文字提交時間：本次課本講實踐任務(wù)4：四、用APDIV布局頁面預(yù)備知識：網(wǎng)格的使用查看/網(wǎng)格設(shè)置提示：選擇AP面板中的防止重疊選項更利于布局實例效果要求網(wǎng)頁能隨分辨率的變化居中顯示進階與提高利用APDIV層的嵌套制作下拉菜單制作思路首先使用APDIV的嵌套完成布局添加一級菜單添加二級菜單（子層）為一級菜單添加顯示/隱藏二級菜單的行為

溫馨提示

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

評論

0/150

提交評論