1、模塊六 層時間軸框架第1頁，共24頁，2022年，5月20日，6點20分，星期四模塊五使用層時間軸和框架 任務一初識并使用層 任務二使用時間軸任務三 框架使用學材小結第2頁，共24頁，2022年，5月20日，6點20分，星期四任務一 初識并使用層子任務1 創建層層（Div）是一種網頁元素定位技術，使用層可以以像素為單位精確定位頁面元素。層的位置比較隨意可以放到網頁的任意位置創建層可以使用以下3種方法中的任何一種：執行【插入記錄】【布局對象】【AP div】命令單擊【插入】工具欄的“布局”面板上的【繪制層】按鈕，如圖6-3所示。鼠標左鍵按住此按鈕把層按鈕拖到文檔窗口里。如圖6-6所示。單擊【插入

2、】工具欄的“布局”面板上的【繪制層】按鈕，如圖6-3所示。在文檔窗口中拖動鼠標繪制一個層。第3頁，共24頁，2022年，5月20日，6點20分，星期四任務一 初識并使用層在Dreamweaver CS3 中可以在網頁中隨意插入層，但是插入層后通常還不能完全達到設計者的要求，還需要對其進行修改調整、移動、對齊、隱藏等操作。層的基本操作：選擇層調整層的大小移動層對齊層在層中插入文本內容或者圖像嵌套層子任務2 層的基本操作第4頁，共24頁，2022年，5月20日，6點20分，星期四任務一 初識并使用層層的基本操作：選擇層的四種方法：1、 將光標移動到需要選擇的層邊框上，當光標指針變成“十字雙向箭頭”

3、光標時，單擊鼠標左鍵即可選中該層。如圖6-7所示。2、直接單擊層的內部，當出現顯示層的選擇柄圖標時，如圖6-8所示。接下來單擊文檔窗口左下角狀態欄里的“”層標簽，也可選擇層。如圖6-9所示。3、 直接單擊文檔窗口中的層標記符 ，即可選中該層，如圖6-10所示 4、在“層”面板中選擇層的名稱，即可選擇層。“層”面板如圖6-12所示。選擇多層時，可按住鍵，點選要選擇的層的名稱即可。子任務2 層的基本操作第5頁，共24頁，2022年，5月20日，6點20分，星期四任務一 初識并使用層層的基本操作：選擇層的四種方法：1、 將光標移動到需要選擇的層邊框上，當光標指針變成“十字雙向箭頭”光標時，單擊鼠標左

4、鍵即可選中該層。如圖6-7所示。2、直接單擊層的內部，當出現顯示層的選擇柄圖標時，如圖6-8所示。接下來單擊文檔窗口左下角狀態欄里的“”層標簽，也可選擇層。如圖6-9所示。3、 直接單擊文檔窗口中的層標記符 ，即可選中該層，如圖6-10所示 4、在“層”面板中選擇層的名稱，即可選擇層。“層”面板如圖6-12所示。選擇多層時，可按住鍵，點選要選擇的層的名稱即可。子任務2 層的基本操作第6頁，共24頁，2022年，5月20日，6點20分，星期四任務一 初識并使用層層的基本操作：調整層的大小移動層對齊層在層中插入文本內容或者圖像嵌套層子任務2 層的基本操作第7頁，共24頁，2022年，5月20日，6

5、點20分，星期四任務一 初識并使用層在層“屬性”面板中，查看和設置層的屬性，只要選擇一個層，執行【窗口】【屬性】命令，就會打開如圖6-19所示的“屬性”面板，子任務3 設置層屬性第8頁，共24頁，2022年，5月20日，6點20分，星期四任務一 初識并使用層層“屬性”層編號：在其右邊的下拉列表中，可以指定一個名稱來標識層，在文本框中可以輸入層名。層名只能使用英文字母和數字，不能使用特殊字符。左和上：在文本框中輸入相應數值使得層進行位置定位，指定層相對與頁面或者嵌套的父層左上角的位置，左指定距左邊的像素數，上指定距頂邊的像素數。寬和高：在文本框中，設置層的寬度和高度。Z軸：指定層的堆疊順序號。標

6、號較大的層出現在標號較小的層上面。可見性：在其右邊的下拉列表中設置層的4種顯示模式。Default表示默認值，即不指定層的可見性屬性、inherit表示繼承，當對嵌套層應用時，將使用父級層的可見性屬性、visible表示可見，無條件顯示、hidden表示隱藏，絕對隱藏層以及層中的內容溢出：僅適用于CSS層，指定如果層中的內容超過了層的大小，將發生的事件。此處有4種選擇模式。Visible 表示可見，增加層的大小，以便層里的所有內容都可見，層自動向下和向右擴大。Hidden表示隱藏，保持層的大小不變，裁剪掉與層大小不符的任何內容。Scroll表示滾動，不管內容是否超出層的大小，為層添加滾動條。A

7、uto表示自動，在層的內容超過層的大小時自動顯示滾動條，否則不顯示滾動條。背景顏色：指定層的背景顏色。背景圖像：為該層指定背景圖像。剪輯：左右上下：定義層的可見區即設置層的邊距，分別通過左右上下屬性值來設置。類：表示對層應用CSS樣式。子任務3 設置層屬性（層可見案例）第9頁，共24頁，2022年，5月20日，6點20分，星期四任務一 初識并使用層我們在設計網頁布局時，可以先用層來設計頁面，然后使用“層到表格”功能，把層轉化為表格。同樣也可以通過“表格到層”功能把表格轉化為層。選擇菜單【修改】【轉換】【層到表格】命令，會彈出“轉換層為表格”的對話框，如圖6-33所示。子任務3 轉化表格和層圖6

8、-33 “轉換層為表格”對話框第10頁，共24頁，2022年，5月20日，6點20分，星期四任務一 初識并使用層轉換層為表格對話框各屬性含義：表格布局：最精確：為每一層建立一個表格單元以及為保持層與層之間的間隔必須的附件單元格。最小合并空白單元：指定如果幾個層被定位在指定的像素數之內，這些層的邊緣應該對齊。使用透明GIF：用透明的GIF圖像填充表格的最后一行。置于頁面中央：選擇此項使生成的表格頁面中居中對齊。默認為左對齊。布局工具：防止層重疊：選擇此項可防止層重疊。顯示層面板：選擇此項轉換將完成層面板。顯示網格：選擇此項轉換完成將顯示網格。靠齊到網格：選擇此項將啟用對齊網格功能。子任務3 轉化

9、表格和層第11頁，共24頁，2022年，5月20日，6點20分，星期四子任務3 設置層屬性子任務4 轉化表格和層任務二使用時間軸子任務1 認識“時間軸”面板子任務2 創建時間軸動畫子任務3 編輯時間軸任務三框架使用子任務1 框架和框架集的工作方式子任務2 框架和框架集的使用子任務3 設置框架和框架集的屬性子任務4 使用框架創建網頁實例第12頁，共24頁，2022年，5月20日，6點20分，星期四任務二使用時間軸子任務1 認識“時間軸”面板時間軸是根據時間的流逝移動圖層位置的方式顯示動畫效果的一種動畫編輯界面，在時間軸中包含了制作動畫時所必須的各種功能。時間軸只能移動分層對象，如果想移動文本或圖

10、像之類的對象，可以將其放在層中。利用時間軸，您可以更改AP元素的位置、大小、可見性和堆疊順序。執行菜單欄的【窗口】【時間軸】命令或按快捷鍵，則顯示時間軸面板。如圖6-37所示。子任務1 認識“時間軸”面板第13頁，共24頁，2022年，5月20日，6點20分，星期四任務二使用時間軸“時間軸”面板各屬性含義： 時間軸彈出菜單：表示當前的時間軸名稱。時間軸指針：在界面上顯示當前位置的幀。至第一幀：不管時間軸在哪個位置，一直移動到第一幀。指針當前位置：表示時間指針的當前位置。幀數：表示每秒顯示的幀數。默認值時15幀。增加幀數值，則動畫播放的速 度將加快。自動播放：選中該項，則網頁文檔中應用動畫后自動

11、運行。LOOP（循環）：選中該項，則繼續反復時間軸上的動畫。行為通道：在指定幀中選選擇要運行的行為。關鍵幀：可以變化的幀。圖層條：意味著插入了【層】等對象。 圖層通道：它是用于編輯圖層的空間。子任務1 認識“時間軸”面板第14頁，共24頁，2022年，5月20日，6點20分，星期四任務二 使用時間軸步驟 1 打開“mdule062”文件夾下的“aboutme.htm”文件，創建層，在層中單擊鼠標執行菜單【插入】【圖像】，在彈出“選擇圖像源文件”對話框中選擇“mdule062pic wel1.gif”圖片，點擊【確定】按鈕，然后把層移動到動畫的起始位置，如圖6-38所示，執行菜單欄的【窗口】【時

12、間軸】命令，顯示“時間軸”面板。步驟 2 選擇要制作動畫的層，單擊層標記符或層邊界，或用層面板選擇一層， 選擇【修改】【時間軸】【添加對象到時間軸】，或直接把選定的對象拖入時間軸面板中，一個動畫欄出現在時間軸的第一個頻道內，相應的層名顯示在該動畫欄中。如圖6-39所示。子任務2 創建時間軸動畫第15頁，共24頁，2022年，5月20日，6點20分，星期四任務二 使用時間軸步驟 3 執行【修改】【時間軸】【錄制AP元素路徑】，在頁面上拖動層，創建想要的運動路徑。在動畫應停止的位置點釋放鼠標。如圖6-40所示。步驟 4 Dreamweaver添加一個動畫欄到時間軸中，同時也添加了適當數量的關鍵幀。

13、步驟 5 按下播放按鈕，預覽頁面上的動畫。按照本操作過程，添加另外的層和圖像到時間軸中，可以創建更為復雜的動畫。子任務2 創建時間軸動畫第16頁，共24頁，2022年，5月20日，6點20分，星期四任務二 使用時間軸修改時間軸定義完時間軸的基本組件后，可以進行一些更改，如添加和移除幀、更改動畫開始時間等。使用時間軸更改圖像和 AP 元素的屬性除了用時間軸移動AP元素之外，還可以更改AP元素的可見性、大小和堆疊順序并更改圖像的源文件。通過執行以下操作之一定義對象的新屬性：子任務2編輯時間軸子任務3 編輯時間軸第17頁，共24頁，2022年，5月20日，6點20分，星期四任務三 框架使用框架是瀏覽

14、器窗口中的一個區域，它可以顯示與瀏覽器窗口的其余部分中所顯示內容無關的HTML文檔。框架的作用就是把瀏覽器窗口分割成若干個區域，每個區域可以分別顯示不同的網頁內容。框架有兩個部分組成，即框架集和單個框架。框架集是一個文檔內定義的一組框架結構的HTML網頁，它定義了一個網頁中所包含的框架的數目，每一個框架的大小、載入框架的網頁源和每個框架的其他屬性等等。單個框架指在網頁中定義的一個區域，每個框架可以分別顯示不同的網頁。子任務1 框架和框架集的工作方式第18頁，共24頁，2022年，5月20日，6點20分，星期四任務三 框架使用使用框架的優點：訪問者的瀏覽器不需要為每個頁面重新加載與導航相關的圖形

15、。每個框架都具有自己的滾動條（如果內容太大，在窗口中顯示不下），因此訪問者可以獨立滾動這些框架。例如，當框架中的內容頁面較長時，如果導航條位于不同的框架中，那么滾動到頁面底部的訪問者不需要再滾動回頂部就能使用導航條。使用框架的缺點：可能難以實現不同框架中各元素的精確圖形對齊。對導航進行測試可能很耗時間。框架中加載的每個頁面的URL不顯示在瀏覽器中，因此訪問者可能難以將特定頁面設為書簽（除非您提供了服務器代碼，使訪問者可以加載特定頁面的框架版本。子任務1 框架和框架集的工作方式第19頁，共24頁，2022年，5月20日，6點20分，星期四任務三 框架使用創建預定義框架集步驟 1 啟動Dreamw

16、eaver，顯示如圖6-41示的初始頁界面。這里我們選擇【從范例創建】下面的【框架集】，這時會彈出“新建文檔”對話框，如圖6-42所示。步驟 2 在對話框中切換到“常規”選項卡，在“常規”選項卡中選擇“類別”下面的“框架集”，從“框架集”下面選擇一種系統預設的15中框架集，我們選擇“上方固定，左側嵌套”，這時會彈出“框架標簽輔助功能屬性”對話框。如圖6-43所示。我們可以為幾個框架重新命名新名字。點【確定】按鈕后，嵌套框架我們已經建成。如圖6-44所示。創建自定義框架集如果系統預定義的框架集都無法滿足設計者的要求，我們也可以通過自定義方式創建框架集，在創建框架集前，需要執行下面工作：子任務2

17、框架和框架集的使用第20頁，共24頁，2022年，5月20日，6點20分，星期四任務三 框架使用單擊菜單【查看】【可視化助理】【框架邊框】，使框架邊框在文檔窗口可以顯示。如圖6-45所示。步驟 2 單擊要拆分的框架內，執行【修改】【框架頁】【拆分左框架/右框架/上框架/下框架】命令，如圖6-46所示。用戶可以根據需求隨意拆分框架。3. 選擇框架和框架集選擇框架和框架集有2種方法，一種是在“框架”面板中選擇或框架集；另一種是在文檔窗口中選擇框架和框架集。4. 保存框架和框架集文件保存框架文件：框架文件實際上就是在框架內打開的網頁文件。要保存框架文件，在框架內單擊，然后選擇菜單【文件】【保存】即可保存框架集文件：只保存框架集文件，可以選擇菜單【文件】【保存框架集】；或選擇菜單【文件】【框架集另存為】，把框架集另存為新文件。子任務2 框架和框架集的使用第21頁，共24頁，2022年，5月20日，6點20分，星期四任務三 框架使用設置框架集屬性創建框架集以后，可以通過“屬性”面板設置框架集的屬性，選中一個框架集后，打開“屬性”面板，如圖6-54所示。設置框架的基本屬性目錄案例子任務3 設置框架和框架集的屬性第22頁，共24頁，2022年，5月20日，6點20分，星