《網(wǎng)頁(yè)基礎(chǔ)項(xiàng)目七布局網(wǎng)頁(yè)ppt課件》由會(huì)員分享，可在線(xiàn)閱讀，更多相關(guān)《網(wǎng)頁(yè)基礎(chǔ)項(xiàng)目七布局網(wǎng)頁(yè)ppt課件（31頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、單擊此處編輯母版標(biāo)題樣式,單擊此處編輯母版文本樣式,第二級(jí),第三級(jí),第四級(jí),第五級(jí),項(xiàng)目七 布局網(wǎng)頁(yè),項(xiàng)目七 布局網(wǎng)頁(yè),任務(wù)一 運(yùn)用表格布局網(wǎng)頁(yè),任務(wù)一 運(yùn)用表格布局網(wǎng)頁(yè),網(wǎng)頁(yè)布局,插入表格,表格屬性,實(shí)例制作,=,本節(jié)提綱,網(wǎng)頁(yè)布局 插入表格表格屬性實(shí)例制作=本節(jié)提綱,網(wǎng)頁(yè)布局,左右對(duì)稱(chēng)結(jié)構(gòu),布局,“同”,字型結(jié)構(gòu),布局,“回”,字型結(jié)構(gòu),布局,“國(guó)”,字型結(jié)構(gòu),布局,“,T,”字型結(jié)構(gòu),布局,自由式,結(jié)構(gòu),布局,標(biāo)題,正文型結(jié)構(gòu)布局,網(wǎng)頁(yè)布局左右對(duì)稱(chēng)結(jié)構(gòu)布局,插入表格,插入表格,表格屬性,。,表格屬性。,活動(dòng)一：,。,活動(dòng)一：。,自主練習(xí),用表格創(chuàng)建一個(gè)如圖所示的各展館汽車(chē)詳情圖。,自主練

2、習(xí)用表格創(chuàng)建一個(gè)如圖所示的各展館汽車(chē)詳情圖。,表格嵌套,在定義表格寬度時(shí),，寬度單位,是選擇百分比還是像素，,應(yīng)視具體情況而定,。一般情況下，如果是網(wǎng)頁(yè)最外層表格，應(yīng)選擇像素為單位，否則，表哥的寬度將隨瀏覽器的大小而二變化，網(wǎng)頁(yè)上顯示的內(nèi)容將出現(xiàn)混亂。而內(nèi)嵌得表格，選擇百分比和像素均可以，因?yàn)樵摫砀缢诘膯卧竦膶挾仁枪潭ǖ摹?表格嵌套在定義表格寬度時(shí)，寬度單位是選擇百分比還是像素，應(yīng)視,活動(dòng)二：,。,活動(dòng)二：。,自主練習(xí),用給定的素材包利用表格布局制作如下,網(wǎng)頁(yè),自主練習(xí)用給定的素材包利用表格布局制作如下網(wǎng)頁(yè),任務(wù)二 利用層布局網(wǎng)頁(yè),任務(wù)二 利用層布局網(wǎng)頁(yè),層,層,是網(wǎng)頁(yè)中用來(lái)放置文本、圖像

3、、動(dòng)畫(huà)、表單、插件等網(wǎng)頁(yè)元素的載體。層在,Dreamweaver,網(wǎng)頁(yè)編輯區(qū)中,可以自由移動(dòng),，改變層在網(wǎng)頁(yè)中的位置，便可實(shí)現(xiàn)層中網(wǎng)頁(yè)元素位置的改變。實(shí)際上，層的應(yīng)用技術(shù)也是一種網(wǎng)頁(yè)元素的,定位技術(shù),，利用層能夠精確對(duì)頁(yè)面元素定位。設(shè)計(jì)者可以控制,多個(gè)層的疊放次序,，,顯示或隱藏層,。,層與,時(shí)間,使用,，可以很方便地設(shè)計(jì)出動(dòng)態(tài)頁(yè)面效果，層與行為配合使用，還可以很方便地制作出,滾動(dòng)字幕,、,下拉式菜單,等頁(yè)面效果。,層 層是網(wǎng)頁(yè)中用來(lái)放置文本、圖像、動(dòng)畫(huà)、表單、插件等網(wǎng)頁(yè)元素,層的創(chuàng)建,創(chuàng)建普通層,使用菜單命令創(chuàng)建層,將光標(biāo)放在要?jiǎng)?chuàng)建層的位置,選擇,“,插入,”,|,“,布局對(duì)象,”,|,“,

4、層,”,命令，即可在插入點(diǎn)所在位置插入一個(gè)默認(rèn)大小的層。,層的創(chuàng)建創(chuàng)建普通層,“編輯”,|,“首選參數(shù)”,“編輯”|“首選參數(shù)”,創(chuàng)建嵌套層,將光標(biāo)放在已建立層的內(nèi)部，然后選擇,“插入”,|,“布局對(duì)象”,|,“層”,菜單命令插入層，插入后該層即為嵌套層。,使用拖動(dòng)的方法，在“,布局,”選項(xiàng)卡上按住“,繪制層,”按鈕拖動(dòng)到一個(gè)已經(jīng)建立的層的內(nèi)部，則新建立的層即嵌套層。,使用繪制層的方法創(chuàng)建嵌套層，單擊“布局”選項(xiàng)卡中的“繪制層”按鈕，然后在層的內(nèi)部繪制層。,是否需要按,Alt,鍵？,嵌套層,嵌套層的子層可以在其父層,中間,，也可以在其父層,外邊,，嵌套層永遠(yuǎn)在其父層,上方,。對(duì)于普通層而言，它

5、的層標(biāo)記將依次出現(xiàn)。,創(chuàng)建嵌套層 嵌套層嵌套層的子層可以在其父層中間，,選中一個(gè)層,單擊文檔窗口中的,層標(biāo)記,單擊層中的,任意位置,來(lái)激活層，然后單擊層左上角的選擇手柄,單擊層邊框,，即可選中該層,在沒(méi)有層被激活或被選中的情況下，按住,Shift,鍵，再單擊層中任意位置，也可選中該層；,直接在,層面板,上單擊層名稱(chēng)，在文檔窗口中會(huì)選中相應(yīng)的層。,層的選擇,選中多個(gè)層,按住,Shift,鍵,，再在每個(gè)要選中的層中,單擊鼠標(biāo),，可選中多個(gè)層。,按住,Shift,鍵,，,再在,層面板,中單擊兩個(gè)或多個(gè)層的名稱(chēng)，可選中多個(gè)層。,圖,1,被激活的層,圖,2,被選中的層,選中一個(gè)層層的選擇 選中多個(gè)層圖1

6、 被激活的層,設(shè)置層屬性,層的默認(rèn)屬性,在菜單欄中選擇,“編輯”,|,“首選參數(shù)”,命令，在彈出的“首選參數(shù)”對(duì)話(huà)框中選擇左側(cè)“分類(lèi)”列表中的“層”，對(duì)話(huà)框右側(cè)就會(huì)出現(xiàn)與層相關(guān)的參數(shù)。,Default(,默認(rèn)狀態(tài),),，,Inherit(,繼承父層的可見(jiàn)性,),，,Visible,（設(shè)置層為可見(jiàn)），,Hidden,（設(shè)置層為隱藏）,使用繪制層的方法創(chuàng)建嵌套層，單擊“布局”選項(xiàng)卡中的“繪制層”按鈕，然后在層的內(nèi)部繪制層。,是否需要按,Alt,鍵？,設(shè)置層屬性 層的默認(rèn)屬性 在菜單欄中選擇“編輯”|“,確定當(dāng)層的內(nèi)容超出層范圍時(shí)處理的方式。Visible,（增加層尺寸，顯示超出部分的內(nèi)容），,Hi

7、dden,（保持層尺寸不變，隱藏超出部分的內(nèi)容），,Scroll,（增加滾動(dòng)條），,Auto,（當(dāng)內(nèi)容超出層尺寸時(shí)，自動(dòng)增加滾動(dòng)條）,層,“,屬性,”,面板,用戶(hù)可在,“,層,”,屬性面板上分別對(duì)每個(gè)層或多個(gè)層進(jìn)行設(shè)置。,Default(,默認(rèn)狀態(tài),),，,Inherit(,繼承父層的可見(jiàn)性,),，,Visible,（設(shè)置層為可見(jiàn)），,Hidden,（設(shè)置層為隱藏）,設(shè)置當(dāng)前層的名稱(chēng)。層名稱(chēng)中不能帶有符號(hào)和漢字，也不能以數(shù)字開(kāi)頭，只能是英文字母和數(shù)字。,在,【Z,軸,】,文本框中，可設(shè)置當(dāng)前層在層重疊中的順序，,z,值大的在上面。,設(shè)置當(dāng)前層相對(duì)于頁(yè)面或父層的左上角距離。,確定當(dāng)層的內(nèi)容超出層

8、范圍時(shí)處理的方式。Visible（增加,“層”面板,層的重疊順序,跳整層的可見(jiàn)性（默認(rèn)為可見(jiàn)）,防止層重疊,調(diào)整層嵌套在層面版中：按住,Ctrl,鍵,+,拖動(dòng)層,方法有兩種：,通過(guò)層的,“,屬性,”,面板,;,通過(guò),“,層,”,面板,.,設(shè)置層的順序,層的顯示和隱藏,“層”面板 層的重疊順序跳整層的可見(jiàn)性（默認(rèn)為可見(jiàn)）防止,層大小的調(diào)整,選中層后，在,“,層,”,屬性面板,上的,“,寬,”,和,“,高,”,文本框中可以直接設(shè)置層大小。,選中層，把鼠標(biāo)放到邊框上的,控制點(diǎn),時(shí)，拖動(dòng)層邊框上的箭頭，即可在相應(yīng)方向上改變層大小。,如果希望將層的大小每次改變,1,像素的距離，則可以按住,Ctrl+,方

9、向,鍵,，每按一次方向鍵，即可在相應(yīng)方向上改變,1,像素的距離。,層的移動(dòng),通過(guò)選中層，在,“,層,”,屬性面板,中的,“,左,”,和,“,上,”,文本框中輸入相應(yīng)的數(shù)值，即可改變它在頁(yè)面中的位置。,選擇,一個(gè)層（或按住,Shift,鍵，用鼠標(biāo)選擇多個(gè)層），,拖動(dòng),并移動(dòng)到需要的位置。,選擇一個(gè)層，用,方向鍵,以,1,像素為單位移動(dòng)層。,層大小的調(diào)整選中層后，在“層”屬性面板上的“寬”和“高”文本,層的對(duì)齊,層與表格的相互轉(zhuǎn)換,將層轉(zhuǎn)換為表格,選擇,“,修改,”,|,“,轉(zhuǎn)換,”,|,“,層到表格,”,命令,將表格轉(zhuǎn)換為層,選中表格，然后選擇命令,“,修改,”,|,“,轉(zhuǎn)化,”,|,“,表格到

10、層,”,。,層的對(duì)齊方式，包括左對(duì)齊、右對(duì)齊、對(duì)齊上緣和對(duì)齊下緣等。,設(shè)置層的對(duì)齊方法是,:,選中層，選擇,“修改”,|,“排列順序”,命令，打開(kāi)相應(yīng)的子菜單，然后選擇對(duì)齊方式即可。,層的對(duì)齊 層與表格的相互轉(zhuǎn)換將層轉(zhuǎn)換為表,活動(dòng)實(shí)例：,活動(dòng)實(shí)例：,自主練習(xí),用,層,創(chuàng)建,一個(gè)如圖所示,的,頁(yè)面,圖,。,自主練習(xí)用層創(chuàng)建一個(gè)如圖所示的頁(yè)面圖。,任務(wù)三 制作框架和框架集,任務(wù)三 制作框架和框架集,框架及框架集,框架,框架是把一個(gè)瀏覽器窗口劃分為多個(gè)區(qū)域、每個(gè)區(qū)域都可以顯示不同的,HTML,文檔的網(wǎng)頁(yè)布局方式，并且這些,HTML,文檔都是獨(dú)立里保存在站點(diǎn)中的，框架好比是提供了顯示這些文檔的容器。因

11、此在使用框架結(jié)構(gòu)時(shí)，框架中個(gè)網(wǎng)頁(yè)可以獨(dú)立拖動(dòng)滾動(dòng)條來(lái)顯示更多的內(nèi)容而不會(huì)影響,tirade,框架的內(nèi)容。,框架集,框架集是,HTML,文件他定義一組框架的布局和屬性，包括框架的數(shù)目、大小和位置等。以及在每個(gè)框架中處世顯示頁(yè)面的,URL,?？蚣芗募旧聿话诹粞云渲酗@示的,HTML,內(nèi)容，知識(shí)相瀏覽器提供如何顯示一組框架以及在這些框架中應(yīng)顯示啊寫(xiě)文檔的有關(guān)信息。,框架及框架集框架框架集,創(chuàng)建框架和創(chuàng)建普通網(wǎng)頁(yè)有所區(qū)別，其具體的創(chuàng)建順序如下：,創(chuàng)建框架結(jié)構(gòu)：首先需要?jiǎng)?chuàng)建一個(gè)新網(wǎng)頁(yè)，該網(wǎng)頁(yè)將作為控制框架結(jié)構(gòu)的頁(yè)面，然后在,Dreamweaver,中將對(duì)該網(wǎng)頁(yè)進(jìn)行拆分，從而獲得自己需要的框架結(jié)構(gòu),設(shè)置框架集和框架的屬性：接著給每個(gè)框架指定或新建一個(gè)顯示具體內(nèi)容的頁(yè)面,創(chuàng)建鏈接：然后給每個(gè)框架命名，通過(guò)“屬性”面板給文本和圖像指定鏈接,保存框架網(wǎng)頁(yè)：最后將所有的框架網(wǎng)頁(yè)文件保存起來(lái),創(chuàng)建框架和創(chuàng)建普通網(wǎng)頁(yè)有所區(qū)別，其具體的創(chuàng)建順序如下：,創(chuàng)建框架,創(chuàng)建如圖所示的上下框架,創(chuàng)建框架創(chuàng)建如圖所示的上下框架,活動(dòng)實(shí)例：,活動(dòng)實(shí)例：,自主練習(xí),制作如下圖所示的框架頁(yè)面,自主練習(xí)制作如下圖所示的框架頁(yè)面,謝謝,謝謝,