《模塊六層時間軸框架》由會員分享，可在線閱讀，更多相關(guān)《模塊六層時間軸框架（24頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、模塊五使用層時間軸和框架,任務(wù)一 初識并使用層,子任務(wù)1 創(chuàng)建層,層（Div）是一種網(wǎng)頁元素定位技術(shù)，使用層可以以像素為單位精確定位頁面元素。層的位置比較隨意可以放到網(wǎng)頁的任意位置,創(chuàng)建層可以使用以下3種方法中的任何一種： 執(zhí)行【插入記錄】【布局對象】【AP div】命令 單擊【插入】工具欄的“布局”面板上的【繪制層】按鈕，如圖6-3所示。鼠標左鍵按住此按鈕把層按鈕拖到文檔窗口里。如圖6-6所示。 單擊【插入】工具欄的“布局”面板上的【繪制層】按鈕，如圖6-3所示。在文檔窗口中拖動鼠標繪制一個層。,任務(wù)一 初識并使用層,在Dreamweaver CS3 中可以在網(wǎng)頁中隨意插入層，但是插入層后通

2、常還不能完全達到設(shè)計者的要求，還需要對其進行修改調(diào)整、移動、對齊、隱藏等操作。 層的基本操作： 選擇層 調(diào)整層的大小 移動層 對齊層 在層中插入文本內(nèi)容或者圖像 嵌套層,子任務(wù)2 層的基本操作,任務(wù)一 初識并使用層,層的基本操作： 選擇層的四種方法： 1、 將光標移動到需要選擇的層邊框上，當光標指針變成“十字雙向箭頭”光標時，單擊鼠標左鍵即可選中該層。如圖6-7所示。 2、直接單擊層的內(nèi)部，當出現(xiàn)顯示層的選擇柄圖標時，如圖6-8所示。接下來單擊文檔窗口左下角狀態(tài)欄里的“”層標簽，也可選擇層。如圖6-9所示。 3、 直接單擊文檔窗口中的層標記符 ，即可選中該層，如圖6-10所示 4、在“層”面板

3、中選擇層的名稱，即可選擇層。“層”面板如圖6-12所示。選擇多層時，可按住鍵，點選要選擇的層的名稱即可。,子任務(wù)2 層的基本操作,任務(wù)一 初識并使用層,層的基本操作： 選擇層的四種方法： 1、 將光標移動到需要選擇的層邊框上，當光標指針變成“十字雙向箭頭”光標時，單擊鼠標左鍵即可選中該層。如圖6-7所示。 2、直接單擊層的內(nèi)部，當出現(xiàn)顯示層的選擇柄圖標時，如圖6-8所示。接下來單擊文檔窗口左下角狀態(tài)欄里的“”層標簽，也可選擇層。如圖6-9所示。 3、 直接單擊文檔窗口中的層標記符 ，即可選中該層，如圖6-10所示 4、在“層”面板中選擇層的名稱，即可選擇層?！皩印泵姘迦鐖D6-12所示。選擇多層

4、時，可按住鍵，點選要選擇的層的名稱即可。,子任務(wù)2 層的基本操作,任務(wù)一 初識并使用層,層的基本操作： 調(diào)整層的大小 移動層 對齊層 在層中插入文本內(nèi)容或者圖像 嵌套層,子任務(wù)2 層的基本操作,任務(wù)一 初識并使用層,在層“屬性”面板中，查看和設(shè)置層的屬性，只要選擇一個層，執(zhí)行【窗口】【屬性】命令，就會打開如圖6-19所示的“屬性”面板，,子任務(wù)3 設(shè)置層屬性,任務(wù)一 初識并使用層,層“屬性” 層編號：在其右邊的下拉列表中，可以指定一個名稱來標識層，在文本框中可以輸入層名。層名只能使用英文字母和數(shù)字，不能使用特殊字符。 左和上：在文本框中輸入相應(yīng)數(shù)值使得層進行位置定位，指定層相對與頁面或者嵌套的

5、父層左上角的位置，左指定距左邊的像素數(shù)，上指定距頂邊的像素數(shù)。 寬和高：在文本框中，設(shè)置層的寬度和高度。 Z軸：指定層的堆疊順序號。標號較大的層出現(xiàn)在標號較小的層上面。 可見性：在其右邊的下拉列表中設(shè)置層的4種顯示模式。Default表示默認值，即不指定層的可見性屬性、inherit表示繼承，當對嵌套層應(yīng)用時，將使用父級層的可見性屬性、visible表示可見，無條件顯示、hidden表示隱藏，絕對隱藏層以及層中的內(nèi)容 溢出：僅適用于CSS層，指定如果層中的內(nèi)容超過了層的大小，將發(fā)生的事件。此處有4種選擇模式。Visible 表示可見，增加層的大小，以便層里的所有內(nèi)容都可見，層自動向下和向右擴大

6、。Hidden表示隱藏，保持層的大小不變，裁剪掉與層大小不符的任何內(nèi)容。Scroll表示滾動，不管內(nèi)容是否超出層的大小，為層添加滾動條。Auto表示自動，在層的內(nèi)容超過層的大小時自動顯示滾動條，否則不顯示滾動條。 背景顏色：指定層的背景顏色。 背景圖像：為該層指定背景圖像。 剪輯： 左右上下：定義層的可見區(qū)即設(shè)置層的邊距，分別通過左右上下屬性值來設(shè)置。 類：表示對層應(yīng)用CSS樣式。,子任務(wù)3 設(shè)置層屬性（層可見案例）,任務(wù)一 初識并使用層,我們在設(shè)計網(wǎng)頁布局時，可以先用層來設(shè)計頁面，然后使用“層到表格”功能，把層轉(zhuǎn)化為表格。同樣也可以通過“表格到層”功能把表格轉(zhuǎn)化為層。選擇菜單【修改】【轉(zhuǎn)換】

7、【層到表格】命令，會彈出“轉(zhuǎn)換層為表格”的對話框，如圖6-33所示。,子任務(wù)3 轉(zhuǎn)化表格和層,圖6-33 “轉(zhuǎn)換層為表格”對話框,任務(wù)一 初識并使用層,轉(zhuǎn)換層為表格對話框各屬性含義： 表格布局： 最精確：為每一層建立一個表格單元以及為保持層與層之間的間隔必須的附件單元格。 最小合并空白單元：指定如果幾個層被定位在指定的像素數(shù)之內(nèi)，這些層的邊緣應(yīng)該對齊。 使用透明GIF：用透明的GIF圖像填充表格的最后一行。 置于頁面中央：選擇此項使生成的表格頁面中居中對齊。默認為左對齊。 布局工具： 防止層重疊：選擇此項可防止層重疊。 顯示層面板：選擇此項轉(zhuǎn)換將完成層面板。 顯示網(wǎng)格：選擇此項轉(zhuǎn)換完成將顯示網(wǎng)

8、格。 靠齊到網(wǎng)格：選擇此項將啟用對齊網(wǎng)格功能。,子任務(wù)3 轉(zhuǎn)化表格和層,子任務(wù)3 設(shè)置層屬性 子任務(wù)4 轉(zhuǎn)化表格和層 任務(wù)二使用時間軸 子任務(wù)1 認識“時間軸”面板 子任務(wù)2 創(chuàng)建時間軸動畫 子任務(wù)3 編輯時間軸 任務(wù)三框架使用 子任務(wù)1 框架和框架集的工作方式 子任務(wù)2 框架和框架集的使用 子任務(wù)3 設(shè)置框架和框架集的屬性 子任務(wù)4 使用框架創(chuàng)建網(wǎng)頁實例,任務(wù)二使用時間軸,子任務(wù)1 認識“時間軸”面板 時間軸是根據(jù)時間的流逝移動圖層位置的方式顯示動畫效果的一種動畫編輯界面，在時間軸中包含了制作動畫時所必須的各種功能。時間軸只能移動分層對象，如果想移動文本或圖像之類的對象，可以將其放在層中。利

9、用時間軸，您可以更改AP元素的位置、大小、可見性和堆疊順序。 執(zhí)行菜單欄的【窗口】【時間軸】命令或按快捷鍵，則顯示時間軸面板。如圖6-37所示。,子任務(wù)1 認識“時間軸”面板,任務(wù)二使用時間軸,“時間軸”面板各屬性含義： 時間軸彈出菜單：表示當前的時間軸名稱。 時間軸指針：在界面上顯示當前位置的幀。 至第一幀：不管時間軸在哪個位置，一直移動到第一幀。 指針當前位置：表示時間指針的當前位置。 幀數(shù)：表示每秒顯示的幀數(shù)。默認值時15幀。增加幀數(shù)值，則動畫播放的速 度將加快。 自動播放：選中該項，則網(wǎng)頁文檔中應(yīng)用動畫后自動運行。 LOOP（循環(huán)）：選中該項，則繼續(xù)反復(fù)時間軸上的動畫。 行為通道：在

10、指定幀中選選擇要運行的行為。 關(guān)鍵幀：可以變化的幀。 圖層條：意味著插入了【層】等對象。 圖層通道：它是用于編輯圖層的空間。,子任務(wù)1 認識“時間軸”面板,任務(wù)二 使用時間軸,步驟 1 打開“mdule062”文件夾下的“aboutme.htm”文件，創(chuàng)建層，在層中單擊鼠標執(zhí)行菜單【插入】【圖像】，在彈出“選擇圖像源文件”對話框中選擇“mdule062pic wel1.gif”圖片，點擊【確定】按鈕，然后把層移動到動畫的起始位置，如圖6-38所示，執(zhí)行菜單欄的【窗口】【時間軸】命令，顯示“時間軸”面板。 步驟 2 選擇要制作動畫的層，單擊層標記符或?qū)舆吔?，或用層面板選擇一層， 選擇【修改】【時

11、間軸】【添加對象到時間軸】，或直接把選定的對象拖入時間軸面板中，一個動畫欄出現(xiàn)在時間軸的第一個頻道內(nèi)，相應(yīng)的層名顯示在該動畫欄中。如圖6-39所示。,子任務(wù)2 創(chuàng)建時間軸動畫,任務(wù)二 使用時間軸,步驟 3 執(zhí)行【修改】【時間軸】【錄制AP元素路徑】，在頁面上拖動層，創(chuàng)建想要的運動路徑。在動畫應(yīng)停止的位置點釋放鼠標。如圖6-40所示。 步驟 4 Dreamweaver添加一個動畫欄到時間軸中，同時也添加了適當數(shù)量的關(guān)鍵幀。 步驟 5 按下播放按鈕，預(yù)覽頁面上的動畫。按照本操作過程，添加另外的層和圖像到時間軸中，可以創(chuàng)建更為復(fù)雜的動畫。,子任務(wù)2 創(chuàng)建時間軸動畫,任務(wù)二 使用時間軸,修改時間軸 定

12、義完時間軸的基本組件后，可以進行一些更改，如添加和移除幀、更改動畫開始時間等。 使用時間軸更改圖像和 AP 元素的屬性 除了用時間軸移動AP元素之外，還可以更改AP元素的可見性、大小和堆疊順序并更改圖像的源文件。通過執(zhí)行以下操作之一定義對象的新屬性：,子任務(wù)2編輯時間軸,子任務(wù)3 編輯時間軸,任務(wù)三 框架使用,框架是瀏覽器窗口中的一個區(qū)域，它可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無關(guān)的HTML文檔?？蚣艿淖饔镁褪前褳g覽器窗口分割成若干個區(qū)域，每個區(qū)域可以分別顯示不同的網(wǎng)頁內(nèi)容。框架有兩個部分組成，即框架集和單個框架?？蚣芗且粋€文檔內(nèi)定義的一組框架結(jié)構(gòu)的HTML網(wǎng)頁，它定義了一個網(wǎng)頁中所包

13、含的框架的數(shù)目，每一個框架的大小、載入框架的網(wǎng)頁源和每個框架的其他屬性等等。單個框架指在網(wǎng)頁中定義的一個區(qū)域，每個框架可以分別顯示不同的網(wǎng)頁。 。,子任務(wù)1 框架和框架集的工作方式,任務(wù)三 框架使用,使用框架的優(yōu)點： 訪問者的瀏覽器不需要為每個頁面重新加載與導(dǎo)航相關(guān)的圖形。 每個框架都具有自己的滾動條（如果內(nèi)容太大，在窗口中顯示不下），因此訪問者可以獨立滾動這些框架。例如，當框架中的內(nèi)容頁面較長時，如果導(dǎo)航條位于不同的框架中，那么滾動到頁面底部的訪問者不需要再滾動回頂部就能使用導(dǎo)航條。 使用框架的缺點： 可能難以實現(xiàn)不同框架中各元素的精確圖形對齊。 對導(dǎo)航進行測試可能很耗時間。 框架中加載的每

14、個頁面的URL不顯示在瀏覽器中，因此訪問者可能難以將特定頁面設(shè)為書簽（除非您提供了服務(wù)器代碼，使訪問者可以加載特定頁面的框架版本。,子任務(wù)1 框架和框架集的工作方式,任務(wù)三 框架使用,創(chuàng)建預(yù)定義框架集 步驟 1 啟動Dreamweaver，顯示如圖6-41示的初始頁界面。這里我們選擇【從范例創(chuàng)建】下面的【框架集】，這時會彈出“新建文檔”對話框，如圖6-42所示。 步驟 2 在對話框中切換到“常規(guī)”選項卡，在“常規(guī)”選項卡中選擇“類別”下面的“框架集”，從“框架集”下面選擇一種系統(tǒng)預(yù)設(shè)的15中框架集，我們選擇“上方固定，左側(cè)嵌套”，這時會彈出“框架標簽輔助功能屬性”對話框。如圖6-43所示。我們

15、可以為幾個框架重新命名新名字。點【確定】按鈕后，嵌套框架我們已經(jīng)建成。如圖6-44所示。 創(chuàng)建自定義框架集 如果系統(tǒng)預(yù)定義的框架集都無法滿足設(shè)計者的要求，我們也可以通過自定義方式創(chuàng)建框架集，在創(chuàng)建框架集前，需要執(zhí)行下面工作：,子任務(wù)2 框架和框架集的使用,任務(wù)三 框架使用,單擊菜單【查看】【可視化助理】【框架邊框】，使框架邊框在文檔窗口可以顯示。如圖6-45所示。 步驟 2 單擊要拆分的框架內(nèi)，執(zhí)行【修改】【框架頁】【拆分左框架/右框架/上框架/下框架】命令，如圖6-46所示。用戶可以根據(jù)需求隨意拆分框架。 3. 選擇框架和框架集 選擇框架和框架集有2種方法，一種是在“框架”面板中選擇或框架集

16、；另一種是在文檔窗口中選擇框架和框架集。 4. 保存框架和框架集文件 保存框架文件：框架文件實際上就是在框架內(nèi)打開的網(wǎng)頁文件。要保存框架文件，在框架內(nèi)單擊，然后選擇菜單【文件】【保存】即可 保存框架集文件：只保存框架集文件，可以選擇菜單【文件】【保存框架集】；或選擇菜單【文件】【框架集另存為】，把框架集另存為新文件。,子任務(wù)2 框架和框架集的使用,任務(wù)三 框架使用,設(shè)置框架集屬性 創(chuàng)建框架集以后，可以通過“屬性”面板設(shè)置框架集的屬性，選中一個框架集后，打開“屬性”面板，如圖6-54所示。 設(shè)置框架的基本屬性 目錄案例,子任務(wù)3 設(shè)置框架和框架集的屬性,任務(wù)三 框架使用,如何運用框架技術(shù)進行網(wǎng)頁的布局排版,創(chuàng)建完整框架網(wǎng)頁的具體操作步驟： 心情驛站案例,子任務(wù)4 使用框架創(chuàng)建網(wǎng)頁實例,學材小結(jié),頁面布局是進行網(wǎng)頁設(shè)計最基本的，也是最重要的工作，層（Div）和框架也是頁面布局進行排版的另一工具。本章從層的概念入手，詳細講述了如何使用Dreamweaver CS3 建立層以及設(shè)置層屬性、層的基本操作以及如何使用時間軸制作層動畫。也詳細講述了框架和框架集的創(chuàng)建、框架的基本操作、屬性設(shè)置等內(nèi)容。 。,