網(wǎng)站設(shè)計(jì)與管理作業(yè)一.ppt

1、作業(yè)一,網(wǎng)站設(shè)計(jì)與管理,題目一,什么是鼠標(biāo)經(jīng)過(guò)圖像？如何制作鼠標(biāo)經(jīng)過(guò)圖像？對(duì)選取的圖像素材有什么要求（出自第二單元）,在網(wǎng)頁(yè)中插入圖片不僅能起到美化頁(yè)面的作用，而且圖片能更加直觀地表現(xiàn)網(wǎng)頁(yè)的內(nèi)容。 在網(wǎng)頁(yè)中的圖像一般有兩種存在方式，一是作為網(wǎng)頁(yè)的內(nèi)容，二是作為網(wǎng)頁(yè)或其他對(duì)象的背景。在網(wǎng)頁(yè)中插入圖像的格式主要有GIF、JPG和PNG 3種。,添加圖像, 常用圖像格式,(1) GIF圖像格式,GIF是網(wǎng)頁(yè)中大量使用的圖片格式之一，該格式的圖像文件相當(dāng)小，并且還可以在網(wǎng)頁(yè)中以透明的方式顯示，但是它最多只能儲(chǔ)存256色，所以通常用來(lái)顯示簡(jiǎn)單圖像及字體。如果圖像顏色比較豐富，使用該格式會(huì)使圖像顏色丟失。

2、,(2) JPEG圖像格式,也稱為JPG，該格式支持24位真彩色，它精確地記錄每一個(gè)像素的亮度。在壓縮時(shí)可以最大限度地保證圖像質(zhì)量，并且文件變小的同時(shí)基本不失真，通常用于顯示照片等。,(3) PNG圖像格式,PNG格式是一種新興的網(wǎng)絡(luò)圖像格式，它汲取了JPEG和GIF兩者的優(yōu)點(diǎn)，存儲(chǔ)形式豐富，兼有GIF和JPEG的色彩模式；它的另一個(gè)特點(diǎn)是把圖像文件壓縮到極限，以利于網(wǎng)絡(luò)傳輸，但又能保留所有與圖像品質(zhì)有關(guān)的信息；它的第三個(gè)特點(diǎn)是顯示速度很快；第四，PNG同樣支持透明圖像的制作。, 插入圖像,(1) 直接插入圖像,直接插入圖像就是將圖像直接插入到網(wǎng)頁(yè)中，它是網(wǎng)頁(yè)中最常用的圖像插入方式，在插入圖像

3、時(shí)通常將要插入的圖像事先保存在站點(diǎn)的某文件夾中，再在Dreamweaver中插入圖像。,操作方法：首先將鼠標(biāo)定位在需要插入圖像的位置，然后執(zhí)行“插入|圖像”命令或利用【常用】選項(xiàng)卡中的圖像按鈕，打開“選擇圖像源文件”對(duì)話框，在對(duì)話框中選擇圖像文件。,(2) 使用占位符插入圖像,在網(wǎng)頁(yè)制作過(guò)程中，如果還沒想好要插入什么圖像時(shí)，可以插入圖像占位符來(lái)解決這個(gè)問(wèn)題。圖像占位符在網(wǎng)頁(yè)中只占據(jù)一個(gè)位置，當(dāng)確定插入的圖像后再使用圖像占位符將圖像插入。,操作方法：首先將鼠標(biāo)定位在要插入圖像的位置，然后執(zhí)行“插入|圖像對(duì)象|圖像占位符”命令或利用【常用】選項(xiàng)卡中的圖像按鈕，打開“圖像占位符”對(duì)話框，在對(duì)話框中設(shè)

4、置圖像占位符的“名稱”、“寬度”等屬性，單擊“確定”按鈕，插入占位符。雙擊圖像占位符，即可打開“選擇圖像源文件”對(duì)話框進(jìn)行圖像插入。, 創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像,鼠標(biāo)經(jīng)過(guò)圖像是一種動(dòng)態(tài)圖像效果，它由原始圖像和替換圖像兩部分組成。在瀏覽器中瀏覽網(wǎng)頁(yè)時(shí)，當(dāng)鼠標(biāo)光標(biāo)移動(dòng)到原始圖像上時(shí)將顯示替換圖像，鼠標(biāo)移出圖像范圍時(shí)將顯示原始圖像。在創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像之前，需要先準(zhǔn)備兩幅圖像(原始圖像和替換圖像)，且兩幅圖像大小相同，當(dāng)圖像大小不一致時(shí)，Dreamweaver將自動(dòng)把圖像大小調(diào)整為一致。, 添加背景顏色或圖像,操作方法：在屬性面板中選擇“頁(yè)面屬性”按鈕，然后在打開的對(duì)話框中選擇“外觀”，在“背景顏色”欄中選擇

5、輸入所需的背景顏色或在“背景圖像”欄中選擇所需的背景圖片。, 設(shè)置圖像屬性,在網(wǎng)頁(yè)中插入圖像后，有時(shí)還需要對(duì)圖像進(jìn)行設(shè)置，如設(shè)置圖像大小、源文件位置、鏈接和對(duì)齊方式等。選擇要設(shè)置屬性的圖像后，在屬性面板中即可設(shè)置圖像屬性。,(1) 命名圖像名稱,在屬性面板的“圖像”文本框中可以命名或重命名圖像。,(2) 添加替換文本,在瀏覽網(wǎng)頁(yè)時(shí)，為了顯示圖像說(shuō)明，可以在“替換”下拉列表框中輸入圖像說(shuō)明。當(dāng)鼠標(biāo)光標(biāo)移動(dòng)到該圖像上或當(dāng)圖片在網(wǎng)頁(yè)中無(wú)法顯示時(shí)，會(huì)在圖像所在位置顯示該圖像的說(shuō)明。,(3) 設(shè)置圖像的對(duì)齊方式,通常情況下，圖片是和文本排列在一起的，所以圖片的對(duì)齊方式是根據(jù)文本的相對(duì)位置進(jìn)行劃分的。在屬

6、性面板中的“對(duì)齊”下拉列表框中可以選擇對(duì)齊方式。,(4) 設(shè)置邊距,在屬性面板的“垂直邊距”和“水平邊距”文本框中可以設(shè)置圖像與文本的邊距?！按怪边吘唷蓖ǔＳ糜谠O(shè)置圖像頂部和底部與文本之間的距離；“水平邊距”通常用于設(shè)置圖像左側(cè)和右側(cè)與文本之間的距離。,(5) 改變圖像大小,改變圖像大小的方法有兩種：一是通過(guò)屬性面板進(jìn)行修改，二是通過(guò)拖動(dòng)來(lái)實(shí)現(xiàn)。,小技巧：在利用拖動(dòng)控制點(diǎn)改變圖像寬度和高度時(shí)，可以同時(shí)按下Shift鍵來(lái)控制拖放比例，以保證不失真。,題目二,層的初始可見性設(shè)置選項(xiàng)有幾種？他們的含義分別是什么？（出自第三單元）,層的使用,層是HTML中的一種頁(yè)面元素，也是頁(yè)面中元素的容器 借助層可

7、以實(shí)現(xiàn)頁(yè)面元素的精確定位，層在網(wǎng)頁(yè)中的位置是不受限制的，可以放置在頁(yè)面的任何位置 在一個(gè)網(wǎng)頁(yè)中可以通過(guò)層的重疊和設(shè)置層的可見性來(lái)實(shí)現(xiàn)一些特殊效果,創(chuàng)建層,(1)創(chuàng)建普通層 方法一：執(zhí)行“插入|布局對(duì)象|AP div”命令； 方法二：在布局工具欄中單擊“繪制層”按鈕。 小技巧：?jiǎn)螕衾L制層按鈕，按下Ctrl鍵不放，在文檔窗口中就可以連續(xù)繪制出多個(gè)不同的層。,創(chuàng)建層,(2)創(chuàng)建嵌套層 在網(wǎng)頁(yè)中，層可以進(jìn)行嵌套。 在層內(nèi)部創(chuàng)建的層稱為嵌套層或子層，嵌套在層外部的層稱為父層。 子層與父層有如下特點(diǎn)： 子層與父層可以重疊，也可以不重疊。 子層大小可超過(guò)父層。 子層的可見性與父層保持一致， 子層與父層的相對(duì)

8、位置保持一致。,創(chuàng)建層,創(chuàng)建嵌套層的方法如下： 先創(chuàng)建父層，將光標(biāo)放在父層中，單擊菜單“插入”“布局對(duì)象”“AP Div”，即可創(chuàng)建嵌套層，新插入的層為子層。 利用“層”面板創(chuàng)建嵌套層，在“層”面板中選中作為子層的層，按住【Shift】鍵，將選中的層拖動(dòng)到要作為父層的層上，釋放鼠標(biāo)即可創(chuàng)建嵌套層，這時(shí)子層與父層以連接線相連，表明其從屬關(guān)系。,創(chuàng)建層,說(shuō)明： 嵌套層并不一定是頁(yè)面上一層位于另一層內(nèi)，它們可以分布在頁(yè)面的不同位置，但是它們的HTML代碼一定是層層嵌套的。 嵌套層中，拖動(dòng)嵌套層中的父層，子層和父層是一起移動(dòng)的。 單擊父層左邊的號(hào)可以展開其所有子層，單擊號(hào)可以折疊其子層,(1)顯示層面

9、板 在網(wǎng)頁(yè)中，通過(guò)“層”面板可以顯示網(wǎng)頁(yè)中所有的層及各個(gè)層之間的關(guān)系，以及選擇層、設(shè)置層的顯示屬性、設(shè)置層的堆疊順序、顯示或隱藏層等。 打開方法：選擇“窗口|層”命令或按F2鍵將彈出“層”面板,設(shè)置層屬性層的基本操作,設(shè)置層屬性層的基本操作,(2)層的選擇 要對(duì)層進(jìn)行移動(dòng)、調(diào)整大小等操作，首先要選擇層。可以選擇一層，也可以同時(shí)選擇多層。 (3)調(diào)整層的大小 說(shuō)明：調(diào)整多個(gè)層的大小時(shí)，可以利用“修改|對(duì)齊|設(shè)成寬度相同(設(shè)成高度相同)”命令。 (4)移動(dòng)層 層最大的特點(diǎn)就是可以在文檔窗口中任意移動(dòng)。,設(shè)置層屬性層的基本操作,(5)對(duì)齊層 層的對(duì)齊主要有左對(duì)齊、右對(duì)齊、對(duì)齊上緣及對(duì)齊下緣4種方式。

10、 方法是選擇所有要對(duì)齊的層，執(zhí)行“修改|排列順序”命令，在彈出的子菜單中選擇相應(yīng)的命名即可。 在進(jìn)行多層調(diào)整大小和層的對(duì)齊時(shí)，會(huì)以最后選擇的層為標(biāo)準(zhǔn)。,(6)改變層的可見性 層的可見性可以控制層內(nèi)元素的顯示與隱藏，從而設(shè)計(jì)出網(wǎng)頁(yè)的一些特殊效果。 方法一：利用“層”面板中的眼睛圖標(biāo)進(jìn)行設(shè)置。 方法二：在“屬性”面板的“可見性”下拉列表框中設(shè)置相應(yīng)的選項(xiàng)即可。,設(shè)置層屬性層的基本操作,(6)改變層的可見性 可見性： 可見性下拉列表框用來(lái)設(shè)置層的初始可見性，有default、inherit、visible和hidden4個(gè)選項(xiàng)。 default表示不制定層的可見性； inherit表示繼承父層的可見

11、性 ； visible表示設(shè)定層的內(nèi)容可見性； hidden表示隱藏該層的內(nèi)容。,設(shè)置層屬性層的基本操作,(6)改變層的可見性 溢出： 溢出下拉列表框用來(lái)設(shè)置當(dāng)層的內(nèi)容超過(guò)層的指定大小時(shí)，對(duì)層內(nèi)容的顯示方法，該屬性有visible、hidden、scroll和auto4個(gè)選項(xiàng)。 visible表示當(dāng)層的內(nèi)容超過(guò)指定大小時(shí)，層的邊界會(huì)自動(dòng)延伸以容納這些內(nèi)容； hidden表示當(dāng)層的內(nèi)容超過(guò)指定大小時(shí)，將隱藏超出部分的內(nèi)容； scroll表示不管層的內(nèi)容是否超過(guò)指定大小，瀏覽器都將在層上添加滾動(dòng)條； auto表示當(dāng)層的內(nèi)容超過(guò)指定大小時(shí)，瀏覽器才顯示層的滾動(dòng)條。,設(shè)置層屬性層的基本操作,設(shè)置層屬性

12、層的基本操作,(7)設(shè)置層的疊放次序 層與其他對(duì)象元素不同，它除了具有平面上的上下左右位置外，它還具有垂直的位置，叫做層的疊放次序，即Z軸順序。 通常情況下先創(chuàng)建的層的Z軸順序值低，而后創(chuàng)建的層的Z軸順序依次升高，在網(wǎng)頁(yè)中Z軸順序值較大的層會(huì)遮蓋Z軸順序值較小的層的內(nèi)容。,設(shè)置層屬性層的基本操作,(7)設(shè)置層的疊放次序 只有通過(guò)設(shè)置層的疊放次序，才能有效地控制內(nèi)容的顯示與隱藏。 方法一：在“屬性”面板中修改“Z軸”文本框中的數(shù)值，大于原數(shù)值則將該層上移，反之小于原數(shù)值則將該層下移。 方法二：在“層”面板中直接輸入層的Z值或?qū)又苯油戏诺剿栉恢谩?方法三：利用“修改|排列順序|移到最上層（或移到最下層）”菜單命令。,層的使用,層與表格的轉(zhuǎn)換 層只有在較高版本的瀏覽器中才能正常顯示層中的元素。