《網(wǎng)頁基礎(chǔ)項目七布局網(wǎng)頁ppt課件》由會員分享，可在線閱讀，更多相關(guān)《網(wǎng)頁基礎(chǔ)項目七布局網(wǎng)頁ppt課件（31頁珍藏版）》請在裝配圖網(wǎng)上搜索。
1、單擊此處編輯母版標(biāo)題樣式,單擊此處編輯母版文本樣式,第二級,第三級,第四級,第五級,項目七 布局網(wǎng)頁,項目七 布局網(wǎng)頁,任務(wù)一 運用表格布局網(wǎng)頁,任務(wù)一 運用表格布局網(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),布局,標(biāo)題,正文型結(jié)構(gòu)布局,網(wǎng)頁布局左右對稱結(jié)構(gòu)布局,插入表格,插入表格,表格屬性,。,表格屬性。,活動一：,。,活動一：。,自主練習(xí),用表格創(chuàng)建一個如圖所示的各展館汽車詳情圖。,自主練
2、習(xí)用表格創(chuàng)建一個如圖所示的各展館汽車詳情圖。,表格嵌套,在定義表格寬度時,，寬度單位,是選擇百分比還是像素，,應(yīng)視具體情況而定,。一般情況下，如果是網(wǎng)頁最外層表格，應(yīng)選擇像素為單位，否則，表哥的寬度將隨瀏覽器的大小而二變化，網(wǎng)頁上顯示的內(nèi)容將出現(xiàn)混亂。而內(nèi)嵌得表格，選擇百分比和像素均可以，因為該表哥所在的單元格的寬度是固定的。,表格嵌套在定義表格寬度時，寬度單位是選擇百分比還是像素，應(yīng)視,活動二：,。,活動二：。,自主練習(xí),用給定的素材包利用表格布局制作如下,網(wǎng)頁,自主練習(xí)用給定的素材包利用表格布局制作如下網(wǎng)頁,任務(wù)二 利用層布局網(wǎng)頁,任務(wù)二 利用層布局網(wǎng)頁,層,層,是網(wǎng)頁中用來放置文本、圖像
3、、動畫、表單、插件等網(wǎng)頁元素的載體。層在,Dreamweaver,網(wǎng)頁編輯區(qū)中,可以自由移動,，改變層在網(wǎng)頁中的位置，便可實現(xiàn)層中網(wǎng)頁元素位置的改變。實際上，層的應(yīng)用技術(shù)也是一種網(wǎng)頁元素的,定位技術(shù),，利用層能夠精確對頁面元素定位。設(shè)計者可以控制,多個層的疊放次序,，,顯示或隱藏層,。,層與,時間,使用,，可以很方便地設(shè)計出動態(tài)頁面效果，層與行為配合使用，還可以很方便地制作出,滾動字幕,、,下拉式菜單,等頁面效果。,層 層是網(wǎng)頁中用來放置文本、圖像、動畫、表單、插件等網(wǎng)頁元素,層的創(chuàng)建,創(chuàng)建普通層,使用菜單命令創(chuàng)建層,將光標(biāo)放在要創(chuàng)建層的位置,選擇,“,插入,”,|,“,布局對象,”,|,“,
4、層,”,命令，即可在插入點所在位置插入一個默認(rèn)大小的層。,層的創(chuàng)建創(chuàng)建普通層,“編輯”,|,“首選參數(shù)”,“編輯”|“首選參數(shù)”,創(chuàng)建嵌套層,將光標(biāo)放在已建立層的內(nèi)部，然后選擇,“插入”,|,“布局對象”,|,“層”,菜單命令插入層，插入后該層即為嵌套層。,使用拖動的方法，在“,布局,”選項卡上按住“,繪制層,”按鈕拖動到一個已經(jīng)建立的層的內(nèi)部，則新建立的層即嵌套層。,使用繪制層的方法創(chuàng)建嵌套層，單擊“布局”選項卡中的“繪制層”按鈕，然后在層的內(nèi)部繪制層。,是否需要按,Alt,鍵？,嵌套層,嵌套層的子層可以在其父層,中間,，也可以在其父層,外邊,，嵌套層永遠(yuǎn)在其父層,上方,。對于普通層而言，它
5、的層標(biāo)記將依次出現(xiàn)。,創(chuàng)建嵌套層 嵌套層嵌套層的子層可以在其父層中間，,選中一個層,單擊文檔窗口中的,層標(biāo)記,單擊層中的,任意位置,來激活層，然后單擊層左上角的選擇手柄,單擊層邊框,，即可選中該層,在沒有層被激活或被選中的情況下，按住,Shift,鍵，再單擊層中任意位置，也可選中該層；,直接在,層面板,上單擊層名稱，在文檔窗口中會選中相應(yīng)的層。,層的選擇,選中多個層,按住,Shift,鍵,，再在每個要選中的層中,單擊鼠標(biāo),，可選中多個層。,按住,Shift,鍵,，,再在,層面板,中單擊兩個或多個層的名稱，可選中多個層。,圖,1,被激活的層,圖,2,被選中的層,選中一個層層的選擇 選中多個層圖1
6、 被激活的層,設(shè)置層屬性,層的默認(rèn)屬性,在菜單欄中選擇,“編輯”,|,“首選參數(shù)”,命令，在彈出的“首選參數(shù)”對話框中選擇左側(cè)“分類”列表中的“層”，對話框右側(cè)就會出現(xiàn)與層相關(guān)的參數(shù)。,Default(,默認(rèn)狀態(tài),),，,Inherit(,繼承父層的可見性,),，,Visible,（設(shè)置層為可見），,Hidden,（設(shè)置層為隱藏）,使用繪制層的方法創(chuàng)建嵌套層，單擊“布局”選項卡中的“繪制層”按鈕，然后在層的內(nèi)部繪制層。,是否需要按,Alt,鍵？,設(shè)置層屬性 層的默認(rèn)屬性 在菜單欄中選擇“編輯”|“,確定當(dāng)層的內(nèi)容超出層范圍時處理的方式。Visible,（增加層尺寸，顯示超出部分的內(nèi)容），,Hi
7、dden,（保持層尺寸不變，隱藏超出部分的內(nèi)容），,Scroll,（增加滾動條），,Auto,（當(dāng)內(nèi)容超出層尺寸時，自動增加滾動條）,層,“,屬性,”,面板,用戶可在,“,層,”,屬性面板上分別對每個層或多個層進(jìn)行設(shè)置。,Default(,默認(rèn)狀態(tài),),，,Inherit(,繼承父層的可見性,),，,Visible,（設(shè)置層為可見），,Hidden,（設(shè)置層為隱藏）,設(shè)置當(dāng)前層的名稱。層名稱中不能帶有符號和漢字，也不能以數(shù)字開頭，只能是英文字母和數(shù)字。,在,【Z,軸,】,文本框中，可設(shè)置當(dāng)前層在層重疊中的順序，,z,值大的在上面。,設(shè)置當(dāng)前層相對于頁面或父層的左上角距離。,確定當(dāng)層的內(nèi)容超出層
8、范圍時處理的方式。Visible（增加,“層”面板,層的重疊順序,跳整層的可見性（默認(rèn)為可見）,防止層重疊,調(diào)整層嵌套在層面版中：按住,Ctrl,鍵,+,拖動層,方法有兩種：,通過層的,“,屬性,”,面板,;,通過,“,層,”,面板,.,設(shè)置層的順序,層的顯示和隱藏,“層”面板 層的重疊順序跳整層的可見性（默認(rèn)為可見）防止,層大小的調(diào)整,選中層后，在,“,層,”,屬性面板,上的,“,寬,”,和,“,高,”,文本框中可以直接設(shè)置層大小。,選中層，把鼠標(biāo)放到邊框上的,控制點,時，拖動層邊框上的箭頭，即可在相應(yīng)方向上改變層大小。,如果希望將層的大小每次改變,1,像素的距離，則可以按住,Ctrl+,方
9、向,鍵,，每按一次方向鍵，即可在相應(yīng)方向上改變,1,像素的距離。,層的移動,通過選中層，在,“,層,”,屬性面板,中的,“,左,”,和,“,上,”,文本框中輸入相應(yīng)的數(shù)值，即可改變它在頁面中的位置。,選擇,一個層（或按住,Shift,鍵，用鼠標(biāo)選擇多個層），,拖動,并移動到需要的位置。,選擇一個層，用,方向鍵,以,1,像素為單位移動層。,層大小的調(diào)整選中層后，在“層”屬性面板上的“寬”和“高”文本,層的對齊,層與表格的相互轉(zhuǎn)換,將層轉(zhuǎn)換為表格,選擇,“,修改,”,|,“,轉(zhuǎn)換,”,|,“,層到表格,”,命令,將表格轉(zhuǎn)換為層,選中表格，然后選擇命令,“,修改,”,|,“,轉(zhuǎn)化,”,|,“,表格到
10、層,”,。,層的對齊方式，包括左對齊、右對齊、對齊上緣和對齊下緣等。,設(shè)置層的對齊方法是,:,選中層，選擇,“修改”,|,“排列順序”,命令，打開相應(yīng)的子菜單，然后選擇對齊方式即可。,層的對齊 層與表格的相互轉(zhuǎn)換將層轉(zhuǎn)換為表,活動實例：,活動實例：,自主練習(xí),用,層,創(chuàng)建,一個如圖所示,的,頁面,圖,。,自主練習(xí)用層創(chuàng)建一個如圖所示的頁面圖。,任務(wù)三 制作框架和框架集,任務(wù)三 制作框架和框架集,框架及框架集,框架,框架是把一個瀏覽器窗口劃分為多個區(qū)域、每個區(qū)域都可以顯示不同的,HTML,文檔的網(wǎng)頁布局方式，并且這些,HTML,文檔都是獨立里保存在站點中的，框架好比是提供了顯示這些文檔的容器。因
11、此在使用框架結(jié)構(gòu)時，框架中個網(wǎng)頁可以獨立拖動滾動條來顯示更多的內(nèi)容而不會影響,tirade,框架的內(nèi)容。,框架集,框架集是,HTML,文件他定義一組框架的布局和屬性，包括框架的數(shù)目、大小和位置等。以及在每個框架中處世顯示頁面的,URL,。框架集文件本身不包含要在留言其中顯示的,HTML,內(nèi)容，知識相瀏覽器提供如何顯示一組框架以及在這些框架中應(yīng)顯示啊寫文檔的有關(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)頁進(jìn)行拆分，從而獲得自己需要的框架結(jié)構(gòu),設(shè)置框架集和框架的屬性：接著給每個框架指定或新建一個顯示具體內(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)建如圖所示的上下框架,活動實例：,活動實例：,自主練習(xí),制作如下圖所示的框架頁面,自主練習(xí)制作如下圖所示的框架頁面,謝謝,謝謝,
網(wǎng)頁基礎(chǔ)項目七布局網(wǎng)頁ppt課件
