網(wǎng)頁基礎(chǔ)項目七布局網(wǎng)頁ppt課件

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

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

2、習用表格創(chuàng)建一個如圖所示的各展館汽車詳情圖。,表格嵌套,在定義表格寬度時,，寬度單位,是選擇百分比還是像素，,應視具體情況而定,。一般情況下，如果是網(wǎng)頁最外層表格，應選擇像素為單位，否則，表哥的寬度將隨瀏覽器的大小而二變化，網(wǎng)頁上顯示的內(nèi)容將出現(xiàn)混亂。而內(nèi)嵌得表格，選擇百分比和像素均可以，因為該表哥所在的單元格的寬度是固定的。,表格嵌套在定義表格寬度時，寬度單位是選擇百分比還是像素，應視,活動二：,。,活動二：。,自主練習,用給定的素材包利用表格布局制作如下,網(wǎng)頁,自主練習用給定的素材包利用表格布局制作如下網(wǎng)頁,任務二 利用層布局網(wǎng)頁,任務二 利用層布局網(wǎng)頁,層,層,是網(wǎng)頁中用來放置文本、圖像

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

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

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

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

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

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

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

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

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