《模塊六層時(shí)間軸框架》由會(huì)員分享，可在線閱讀，更多相關(guān)《模塊六層時(shí)間軸框架（24頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
1、模塊五使用層時(shí)間軸和框架,任務(wù)一 初識(shí)并使用層,子任務(wù)1 創(chuàng)建層,層（Div）是一種網(wǎng)頁(yè)元素定位技術(shù)，使用層可以以像素為單位精確定位頁(yè)面元素。層的位置比較隨意可以放到網(wǎng)頁(yè)的任意位置,創(chuàng)建層可以使用以下3種方法中的任何一種： 執(zhí)行【插入記錄】【布局對(duì)象】【AP div】命令 單擊【插入】工具欄的“布局”面板上的【繪制層】按鈕，如圖6-3所示。鼠標(biāo)左鍵按住此按鈕把層按鈕拖到文檔窗口里。如圖6-6所示。 單擊【插入】工具欄的“布局”面板上的【繪制層】按鈕，如圖6-3所示。在文檔窗口中拖動(dòng)鼠標(biāo)繪制一個(gè)層。,任務(wù)一 初識(shí)并使用層,在Dreamweaver CS3 中可以在網(wǎng)頁(yè)中隨意插入層，但是插入層后通
2、常還不能完全達(dá)到設(shè)計(jì)者的要求，還需要對(duì)其進(jìn)行修改調(diào)整、移動(dòng)、對(duì)齊、隱藏等操作。 層的基本操作： 選擇層 調(diào)整層的大小 移動(dòng)層 對(duì)齊層 在層中插入文本內(nèi)容或者圖像 嵌套層,子任務(wù)2 層的基本操作,任務(wù)一 初識(shí)并使用層,層的基本操作： 選擇層的四種方法： 1、 將光標(biāo)移動(dòng)到需要選擇的層邊框上，當(dāng)光標(biāo)指針變成“十字雙向箭頭”光標(biāo)時(shí)，單擊鼠標(biāo)左鍵即可選中該層。如圖6-7所示。 2、直接單擊層的內(nèi)部，當(dāng)出現(xiàn)顯示層的選擇柄圖標(biāo)時(shí)，如圖6-8所示。接下來(lái)單擊文檔窗口左下角狀態(tài)欄里的“”層標(biāo)簽，也可選擇層。如圖6-9所示。 3、 直接單擊文檔窗口中的層標(biāo)記符 ，即可選中該層，如圖6-10所示 4、在“層”面板
3、中選擇層的名稱，即可選擇層?！皩印泵姘迦鐖D6-12所示。選擇多層時(shí)，可按住鍵，點(diǎn)選要選擇的層的名稱即可。,子任務(wù)2 層的基本操作,任務(wù)一 初識(shí)并使用層,層的基本操作： 選擇層的四種方法： 1、 將光標(biāo)移動(dòng)到需要選擇的層邊框上，當(dāng)光標(biāo)指針變成“十字雙向箭頭”光標(biāo)時(shí)，單擊鼠標(biāo)左鍵即可選中該層。如圖6-7所示。 2、直接單擊層的內(nèi)部，當(dāng)出現(xiàn)顯示層的選擇柄圖標(biāo)時(shí)，如圖6-8所示。接下來(lái)單擊文檔窗口左下角狀態(tài)欄里的“”層標(biāo)簽，也可選擇層。如圖6-9所示。 3、 直接單擊文檔窗口中的層標(biāo)記符 ，即可選中該層，如圖6-10所示 4、在“層”面板中選擇層的名稱，即可選擇層?！皩印泵姘迦鐖D6-12所示。選擇多層
4、時(shí)，可按住鍵，點(diǎn)選要選擇的層的名稱即可。,子任務(wù)2 層的基本操作,任務(wù)一 初識(shí)并使用層,層的基本操作： 調(diào)整層的大小 移動(dòng)層 對(duì)齊層 在層中插入文本內(nèi)容或者圖像 嵌套層,子任務(wù)2 層的基本操作,任務(wù)一 初識(shí)并使用層,在層“屬性”面板中，查看和設(shè)置層的屬性，只要選擇一個(gè)層，執(zhí)行【窗口】【屬性】命令，就會(huì)打開(kāi)如圖6-19所示的“屬性”面板，,子任務(wù)3 設(shè)置層屬性,任務(wù)一 初識(shí)并使用層,層“屬性” 層編號(hào)：在其右邊的下拉列表中，可以指定一個(gè)名稱來(lái)標(biāo)識(shí)層，在文本框中可以輸入層名。層名只能使用英文字母和數(shù)字，不能使用特殊字符。 左和上：在文本框中輸入相應(yīng)數(shù)值使得層進(jìn)行位置定位，指定層相對(duì)與頁(yè)面或者嵌套的
5、父層左上角的位置，左指定距左邊的像素?cái)?shù)，上指定距頂邊的像素?cái)?shù)。 寬和高：在文本框中，設(shè)置層的寬度和高度。 Z軸：指定層的堆疊順序號(hào)。標(biāo)號(hào)較大的層出現(xiàn)在標(biāo)號(hào)較小的層上面。 可見(jiàn)性：在其右邊的下拉列表中設(shè)置層的4種顯示模式。Default表示默認(rèn)值，即不指定層的可見(jiàn)性屬性、inherit表示繼承，當(dāng)對(duì)嵌套層應(yīng)用時(shí)，將使用父級(jí)層的可見(jiàn)性屬性、visible表示可見(jiàn)，無(wú)條件顯示、hidden表示隱藏，絕對(duì)隱藏層以及層中的內(nèi)容 溢出：僅適用于CSS層，指定如果層中的內(nèi)容超過(guò)了層的大小，將發(fā)生的事件。此處有4種選擇模式。Visible 表示可見(jiàn)，增加層的大小，以便層里的所有內(nèi)容都可見(jiàn)，層自動(dòng)向下和向右擴(kuò)大
6、。Hidden表示隱藏，保持層的大小不變，裁剪掉與層大小不符的任何內(nèi)容。Scroll表示滾動(dòng)，不管內(nèi)容是否超出層的大小，為層添加滾動(dòng)條。Auto表示自動(dòng)，在層的內(nèi)容超過(guò)層的大小時(shí)自動(dòng)顯示滾動(dòng)條，否則不顯示滾動(dòng)條。 背景顏色：指定層的背景顏色。 背景圖像：為該層指定背景圖像。 剪輯： 左右上下：定義層的可見(jiàn)區(qū)即設(shè)置層的邊距，分別通過(guò)左右上下屬性值來(lái)設(shè)置。 類：表示對(duì)層應(yīng)用CSS樣式。,子任務(wù)3 設(shè)置層屬性（層可見(jiàn)案例）,任務(wù)一 初識(shí)并使用層,我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)布局時(shí)，可以先用層來(lái)設(shè)計(jì)頁(yè)面，然后使用“層到表格”功能，把層轉(zhuǎn)化為表格。同樣也可以通過(guò)“表格到層”功能把表格轉(zhuǎn)化為層。選擇菜單【修改】【轉(zhuǎn)換】
7、【層到表格】命令，會(huì)彈出“轉(zhuǎn)換層為表格”的對(duì)話框，如圖6-33所示。,子任務(wù)3 轉(zhuǎn)化表格和層,圖6-33 “轉(zhuǎn)換層為表格”對(duì)話框,任務(wù)一 初識(shí)并使用層,轉(zhuǎn)換層為表格對(duì)話框各屬性含義： 表格布局： 最精確：為每一層建立一個(gè)表格單元以及為保持層與層之間的間隔必須的附件單元格。 最小合并空白單元：指定如果幾個(gè)層被定位在指定的像素?cái)?shù)之內(nèi)，這些層的邊緣應(yīng)該對(duì)齊。 使用透明GIF：用透明的GIF圖像填充表格的最后一行。 置于頁(yè)面中央：選擇此項(xiàng)使生成的表格頁(yè)面中居中對(duì)齊。默認(rèn)為左對(duì)齊。 布局工具： 防止層重疊：選擇此項(xiàng)可防止層重疊。 顯示層面板：選擇此項(xiàng)轉(zhuǎn)換將完成層面板。 顯示網(wǎng)格：選擇此項(xiàng)轉(zhuǎn)換完成將顯示網(wǎng)
8、格。 靠齊到網(wǎng)格：選擇此項(xiàng)將啟用對(duì)齊網(wǎng)格功能。,子任務(wù)3 轉(zhuǎn)化表格和層,子任務(wù)3 設(shè)置層屬性 子任務(wù)4 轉(zhuǎn)化表格和層 任務(wù)二使用時(shí)間軸 子任務(wù)1 認(rèn)識(shí)“時(shí)間軸”面板 子任務(wù)2 創(chuàng)建時(shí)間軸動(dòng)畫(huà) 子任務(wù)3 編輯時(shí)間軸 任務(wù)三框架使用 子任務(wù)1 框架和框架集的工作方式 子任務(wù)2 框架和框架集的使用 子任務(wù)3 設(shè)置框架和框架集的屬性 子任務(wù)4 使用框架創(chuàng)建網(wǎng)頁(yè)實(shí)例,任務(wù)二使用時(shí)間軸,子任務(wù)1 認(rèn)識(shí)“時(shí)間軸”面板 時(shí)間軸是根據(jù)時(shí)間的流逝移動(dòng)圖層位置的方式顯示動(dòng)畫(huà)效果的一種動(dòng)畫(huà)編輯界面，在時(shí)間軸中包含了制作動(dòng)畫(huà)時(shí)所必須的各種功能。時(shí)間軸只能移動(dòng)分層對(duì)象，如果想移動(dòng)文本或圖像之類的對(duì)象，可以將其放在層中。利
9、用時(shí)間軸，您可以更改AP元素的位置、大小、可見(jiàn)性和堆疊順序。 執(zhí)行菜單欄的【窗口】【時(shí)間軸】命令或按快捷鍵，則顯示時(shí)間軸面板。如圖6-37所示。,子任務(wù)1 認(rèn)識(shí)“時(shí)間軸”面板,任務(wù)二使用時(shí)間軸,“時(shí)間軸”面板各屬性含義： 時(shí)間軸彈出菜單：表示當(dāng)前的時(shí)間軸名稱。 時(shí)間軸指針：在界面上顯示當(dāng)前位置的幀。 至第一幀：不管時(shí)間軸在哪個(gè)位置，一直移動(dòng)到第一幀。 指針當(dāng)前位置：表示時(shí)間指針的當(dāng)前位置。 幀數(shù)：表示每秒顯示的幀數(shù)。默認(rèn)值時(shí)15幀。增加幀數(shù)值，則動(dòng)畫(huà)播放的速 度將加快。 自動(dòng)播放：選中該項(xiàng)，則網(wǎng)頁(yè)文檔中應(yīng)用動(dòng)畫(huà)后自動(dòng)運(yùn)行。 LOOP（循環(huán)）：選中該項(xiàng)，則繼續(xù)反復(fù)時(shí)間軸上的動(dòng)畫(huà)。 行為通道：在
10、指定幀中選選擇要運(yùn)行的行為。 關(guān)鍵幀：可以變化的幀。 圖層條：意味著插入了【層】等對(duì)象。 圖層通道：它是用于編輯圖層的空間。,子任務(wù)1 認(rèn)識(shí)“時(shí)間軸”面板,任務(wù)二 使用時(shí)間軸,步驟 1 打開(kāi)“mdule062”文件夾下的“aboutme.htm”文件，創(chuàng)建層，在層中單擊鼠標(biāo)執(zhí)行菜單【插入】【圖像】，在彈出“選擇圖像源文件”對(duì)話框中選擇“mdule062pic wel1.gif”圖片，點(diǎn)擊【確定】按鈕，然后把層移動(dòng)到動(dòng)畫(huà)的起始位置，如圖6-38所示，執(zhí)行菜單欄的【窗口】【時(shí)間軸】命令，顯示“時(shí)間軸”面板。 步驟 2 選擇要制作動(dòng)畫(huà)的層，單擊層標(biāo)記符或?qū)舆吔纾蛴脤用姘暹x擇一層， 選擇【修改】【時(shí)
11、間軸】【添加對(duì)象到時(shí)間軸】，或直接把選定的對(duì)象拖入時(shí)間軸面板中，一個(gè)動(dòng)畫(huà)欄出現(xiàn)在時(shí)間軸的第一個(gè)頻道內(nèi)，相應(yīng)的層名顯示在該動(dòng)畫(huà)欄中。如圖6-39所示。,子任務(wù)2 創(chuàng)建時(shí)間軸動(dòng)畫(huà),任務(wù)二 使用時(shí)間軸,步驟 3 執(zhí)行【修改】【時(shí)間軸】【錄制AP元素路徑】，在頁(yè)面上拖動(dòng)層，創(chuàng)建想要的運(yùn)動(dòng)路徑。在動(dòng)畫(huà)應(yīng)停止的位置點(diǎn)釋放鼠標(biāo)。如圖6-40所示。 步驟 4 Dreamweaver添加一個(gè)動(dòng)畫(huà)欄到時(shí)間軸中，同時(shí)也添加了適當(dāng)數(shù)量的關(guān)鍵幀。 步驟 5 按下播放按鈕，預(yù)覽頁(yè)面上的動(dòng)畫(huà)。按照本操作過(guò)程，添加另外的層和圖像到時(shí)間軸中，可以創(chuàng)建更為復(fù)雜的動(dòng)畫(huà)。,子任務(wù)2 創(chuàng)建時(shí)間軸動(dòng)畫(huà),任務(wù)二 使用時(shí)間軸,修改時(shí)間軸 定
12、義完時(shí)間軸的基本組件后，可以進(jìn)行一些更改，如添加和移除幀、更改動(dòng)畫(huà)開(kāi)始時(shí)間等。 使用時(shí)間軸更改圖像和 AP 元素的屬性 除了用時(shí)間軸移動(dòng)AP元素之外，還可以更改AP元素的可見(jiàn)性、大小和堆疊順序并更改圖像的源文件。通過(guò)執(zhí)行以下操作之一定義對(duì)象的新屬性：,子任務(wù)2編輯時(shí)間軸,子任務(wù)3 編輯時(shí)間軸,任務(wù)三 框架使用,框架是瀏覽器窗口中的一個(gè)區(qū)域，它可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無(wú)關(guān)的HTML文檔。框架的作用就是把瀏覽器窗口分割成若干個(gè)區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁(yè)內(nèi)容?？蚣苡袃蓚€(gè)部分組成，即框架集和單個(gè)框架?？蚣芗且粋€(gè)文檔內(nèi)定義的一組框架結(jié)構(gòu)的HTML網(wǎng)頁(yè)，它定義了一個(gè)網(wǎng)頁(yè)中所包
13、含的框架的數(shù)目，每一個(gè)框架的大小、載入框架的網(wǎng)頁(yè)源和每個(gè)框架的其他屬性等等。單個(gè)框架指在網(wǎng)頁(yè)中定義的一個(gè)區(qū)域，每個(gè)框架可以分別顯示不同的網(wǎng)頁(yè)。 。,子任務(wù)1 框架和框架集的工作方式,任務(wù)三 框架使用,使用框架的優(yōu)點(diǎn)： 訪問(wèn)者的瀏覽器不需要為每個(gè)頁(yè)面重新加載與導(dǎo)航相關(guān)的圖形。 每個(gè)框架都具有自己的滾動(dòng)條（如果內(nèi)容太大，在窗口中顯示不下），因此訪問(wèn)者可以獨(dú)立滾動(dòng)這些框架。例如，當(dāng)框架中的內(nèi)容頁(yè)面較長(zhǎng)時(shí)，如果導(dǎo)航條位于不同的框架中，那么滾動(dòng)到頁(yè)面底部的訪問(wèn)者不需要再滾動(dòng)回頂部就能使用導(dǎo)航條。 使用框架的缺點(diǎn)： 可能難以實(shí)現(xiàn)不同框架中各元素的精確圖形對(duì)齊。 對(duì)導(dǎo)航進(jìn)行測(cè)試可能很耗時(shí)間。 框架中加載的每
14、個(gè)頁(yè)面的URL不顯示在瀏覽器中，因此訪問(wèn)者可能難以將特定頁(yè)面設(shè)為書(shū)簽（除非您提供了服務(wù)器代碼，使訪問(wèn)者可以加載特定頁(yè)面的框架版本。,子任務(wù)1 框架和框架集的工作方式,任務(wù)三 框架使用,創(chuàng)建預(yù)定義框架集 步驟 1 啟動(dòng)Dreamweaver，顯示如圖6-41示的初始頁(yè)界面。這里我們選擇【從范例創(chuàng)建】下面的【框架集】，這時(shí)會(huì)彈出“新建文檔”對(duì)話框，如圖6-42所示。 步驟 2 在對(duì)話框中切換到“常規(guī)”選項(xiàng)卡，在“常規(guī)”選項(xiàng)卡中選擇“類別”下面的“框架集”，從“框架集”下面選擇一種系統(tǒng)預(yù)設(shè)的15中框架集，我們選擇“上方固定，左側(cè)嵌套”，這時(shí)會(huì)彈出“框架標(biāo)簽輔助功能屬性”對(duì)話框。如圖6-43所示。我們
15、可以為幾個(gè)框架重新命名新名字。點(diǎn)【確定】按鈕后，嵌套框架我們已經(jīng)建成。如圖6-44所示。 創(chuàng)建自定義框架集 如果系統(tǒng)預(yù)定義的框架集都無(wú)法滿足設(shè)計(jì)者的要求，我們也可以通過(guò)自定義方式創(chuàng)建框架集，在創(chuàng)建框架集前，需要執(zhí)行下面工作：,子任務(wù)2 框架和框架集的使用,任務(wù)三 框架使用,單擊菜單【查看】【可視化助理】【框架邊框】，使框架邊框在文檔窗口可以顯示。如圖6-45所示。 步驟 2 單擊要拆分的框架內(nèi)，執(zhí)行【修改】【框架頁(yè)】【拆分左框架/右框架/上框架/下框架】命令，如圖6-46所示。用戶可以根據(jù)需求隨意拆分框架。 3. 選擇框架和框架集 選擇框架和框架集有2種方法，一種是在“框架”面板中選擇或框架集
16、；另一種是在文檔窗口中選擇框架和框架集。 4. 保存框架和框架集文件 保存框架文件：框架文件實(shí)際上就是在框架內(nèi)打開(kāi)的網(wǎng)頁(yè)文件。要保存框架文件，在框架內(nèi)單擊，然后選擇菜單【文件】【保存】即可 保存框架集文件：只保存框架集文件，可以選擇菜單【文件】【保存框架集】；或選擇菜單【文件】【框架集另存為】，把框架集另存為新文件。,子任務(wù)2 框架和框架集的使用,任務(wù)三 框架使用,設(shè)置框架集屬性 創(chuàng)建框架集以后，可以通過(guò)“屬性”面板設(shè)置框架集的屬性，選中一個(gè)框架集后，打開(kāi)“屬性”面板，如圖6-54所示。 設(shè)置框架的基本屬性 目錄案例,子任務(wù)3 設(shè)置框架和框架集的屬性,任務(wù)三 框架使用,如何運(yùn)用框架技術(shù)進(jìn)行網(wǎng)頁(yè)的布局排版,創(chuàng)建完整框架網(wǎng)頁(yè)的具體操作步驟： 心情驛站案例,子任務(wù)4 使用框架創(chuàng)建網(wǎng)頁(yè)實(shí)例,學(xué)材小結(jié),頁(yè)面布局是進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)最基本的，也是最重要的工作，層（Div）和框架也是頁(yè)面布局進(jìn)行排版的另一工具。本章從層的概念入手，詳細(xì)講述了如何使用Dreamweaver CS3 建立層以及設(shè)置層屬性、層的基本操作以及如何使用時(shí)間軸制作層動(dòng)畫(huà)。也詳細(xì)講述了框架和框架集的創(chuàng)建、框架的基本操作、屬性設(shè)置等內(nèi)容。 。,
模塊六層時(shí)間軸框架
