設計網站首頁動畫1任務目標1.能描述網頁安全色的設置與使用方法。2.能創建幀動畫。3.能設置時間軸和調整面板屬性。4.能使用“屬性”面板調整圖像色彩。5.能設置過渡動畫效果。6.能將設計的網頁導出為合適的格式。2任務描述本任務主要利用“時間軸”面板和使用Web安全色，并結合“調整”面板及“屬性”面板調整圖像色彩來制作圖所示網站首頁。要完成本任務的學習，除了需要掌握創建幀動畫的方法，還要掌握調整圖像色彩的方法及過渡效果的使用方法。34網站首頁一、安全色設置Web安全色是指在不同操作系統和不同瀏覽器中均可正常顯示的顏色。1.使用安全色。在工具箱中單擊“設置前景色”或“設置背景色”圖標，打開“拾色器（前景色）”或“拾色器（背景色）”對話框，選擇顏色時，勾選對話框左下角的“只有Web顏色”選項，拾色器色域中的顏色明顯減少，但此時可供選擇的顏色皆為安全色。56“拾色器（前景色）”對話框2.將非安全色轉為安全色。在“拾色器（前景色）”或“拾色器（背景色）”對話框中選擇顏色時，在所選顏色右側出現警告圖標

，即說明當前選擇的顏色不是Web安全色。單擊

圖標，即可將當前顏色替換為與其最接近的Web安全色，然后單擊“確定”按鈕完成顏色轉換，如圖所示。7將非安全色轉為安全色二、幀動畫將多幅圖像快速播放而形成的動態畫面效果稱為幀動畫。其與電影膠片、動畫片的播放模式相似，都是在“連續的關鍵幀”中分解動作，然后連續播放形成動畫。8三、“時間軸”面板“時間軸”面板主要用于組織和控制影片中圖層和幀的內容。新建文檔后，執行“窗口”“時間軸”命令，打開“時間軸”面板。單擊創建模式右側的圖標，在彈出的下拉列表中有兩個選項，即“創建視頻時間軸”和“創建幀動畫”，如圖所示。選擇不同的選項可以打開不同模式的“時間軸”面板，不同模式的“時間軸”面板創建與編輯動態效果的方式也不相同。9“時間軸”面板在此選擇“創建幀動畫”選項，此時“時間軸”面板顯示為“幀動畫”模式，如圖所示。在該模式下，“時間軸”面板中顯示出動畫中每個幀的縮覽圖；時間軸面板底部的各項分別用于瀏覽各個幀、設置循環選項、添加和刪除幀，以及預覽動畫等，下面分別對各項做簡要介紹。10“幀動畫”模式面板1.“轉換為視頻時間軸”圖標

：將“幀動畫”模式的“時間軸”面板切換為“視頻時間軸”模式的“時間軸”面板。2.選擇幀延遲時間：設置幀在回放過程中的持續時間。3.選擇循環選項：設置動畫作為GIF文件導出時的播放次數。4.“選擇第一幀”圖標

：單擊該圖標，可以選擇序列中的第一幀作為當前幀。5.“選擇上一幀”圖標

：單擊該圖標，可以選擇當前幀的前一幀。6.“播放動畫”圖標

：單擊該圖標，可以在文檔窗口中播放動畫。如果要停止播放，再次單擊該圖標即可。117.“選擇下一幀”圖標

：單擊該圖標，可以選擇當前幀的下一幀。8.“過渡動畫幀”圖標

：在兩個現有幀之間添加一系列幀，通過插入的方法使幀之間的圖層屬性均勻。單擊該圖標，在彈出的“過渡”窗口中可以對過渡的方式、過渡的幀數等選項進行設置。設置完成后在“時間軸”面板中會添加過渡幀。接著單擊“播放”按鈕，即可查看過渡的效果。9.復制所選幀：通過復制“時間軸”面板中的選定幀，向動畫中添加幀。10.刪除所選幀：將所選擇的幀刪除。12一、打開素材文檔按“Ctrl+O”快捷鍵，打開“素材/素材/任務一”目錄下名為“網站首頁設計背景.PSD”的文件，然后執行“文件”“置入嵌入對象”命令，將“素材/素材/任務一”目錄下名為“網頁1.JPG”的文件置入，并調整圖片的大小和位置，效果如圖所示。1314打開素材文檔二、設置顏色單擊“設置前景色”圖標

，打開“拾色器（前景色）”對話框，勾選左下角的“只有Web顏色”選項，然后選取色表中右上角的紅色，如圖所示。單擊“確定”按鈕完成顏色設置。15設置顏色三、輸入文字1.選取“橫排文字工具”，在工具屬性欄中設置字體類型為“黑體”，文字的大小為“60點”，然后在圖像窗口單擊，輸入“國家級重點公辦技師學院”，按Esc鍵退出，完成文字的輸入。2.再選取“橫排文字工具”，設置字體為“黑體”，大小為“34點”，顏色為黑色，然后輸入“選擇好專業，鑄造夢想，護航未來成功之路”，按Esc鍵退出，然后將該文字置于紅色文字下方。效果如圖所示。1617輸入文字四、合并圖層將“圖層”面板置入的圖片圖層及文字圖層合并為“網頁1”圖層，如圖所示。18合并圖層五、置入圖片執行“文件”“置入嵌入對象”命令，將“素材/素材/任務一”目錄下名為“網頁2.JPG”的文件置入，調整圖片的大小和位置，使“網頁2”圖層的圖片與“網頁1”圖層的圖片重疊，如圖所示。19置入圖片六、調整圖形顏色置入的圖片顏色較暗，需要對其進行調色。按下Ctrl鍵的同時單擊“網頁2”圖層縮覽圖，選中圖形，然后單擊“調整”面板上的“亮度/對比度”圖標

，跳轉到“屬性”面板，設置亮度為“55”，如圖所示，效果如所示。20調整亮度/對比度后的效果在“屬性”面板設置參數七、合并圖層在“圖層”面板將“網頁1”圖層及“網頁2”圖層合并，命名為“網頁2”圖層。21八、置入圖層執行“文件”“置入嵌入對象”命令，分別將“素材/素材/任務一”目錄下名為“網頁3.JPG”“網頁4.JPG”和“網頁5.JPG”的文件置入，并調整圖片的大小，其位置與“網頁1”圖層圖片重疊，效果如圖所示。22置入全部圖片及圖層面板顯示效果九、制作幀動畫1.執行“窗口”“時間軸”命令，打開“時間軸”面板。單擊創建模式右側的圖標，選擇“創建幀動畫”選項，單擊創建幀動畫，如圖所示。23選擇“創建幀動畫”選項2.單擊“選擇幀延遲時間”倒三角圖標

，在下拉列表中選擇“2.0”，設置時間為2秒，如圖所示。24設置幀延遲時間3.單擊選擇第1幀，在“圖層”面板中選中并顯示“網頁1”圖層，隱藏“網頁2”至“網頁5”圖層，如圖所示。25選擇第1幀，顯示“網頁1”圖層4.單擊選擇第2幀，在“圖層”面板中選中并顯示“網頁2”圖層，隱藏其他“網頁”圖層，如圖所示。26選擇第2幀，顯示“網頁2”圖層5.繼續單擊選擇第3幀，在“圖層”面板中選中并顯示“網頁3”圖層，隱藏其他“網頁”圖層，如圖所示。27選擇第3幀，顯示“網頁3”圖層6.單擊選擇第4幀，在“圖層”面板中選中并顯示“網頁4”圖層，隱藏其他“網頁”圖層，如圖所示。28選擇第4幀，顯示“網頁4”圖層7.單擊選擇第5幀，在“圖層”面板中選中并顯示“網頁5”圖層，隱藏其他“網頁”圖層，如圖所示。29選擇第5幀，顯示“網頁5”圖層8.單擊“選擇循環選項”的倒三角圖標

，選擇“永遠”，如圖所示。單擊“播放動畫”圖標

，即可查看播放效果。30選擇循環選項十、設置過渡動畫幀1.播放完成后發現兩張照片轉換的過程比較生硬，此時可以在每一幀之間添加過渡幀，減弱這種生硬感。2.選擇剛剛新建的幀，然后單擊“選擇幀延遲時間”倒三角圖標

，在下拉列表中選擇“0.5”，設置時間為0.5秒，接著在“圖層”面板將其對應的“網頁1”圖層的不透明度改為“50%”，并隱藏其他“網頁”圖層，如圖所示。3132設置幀延遲時間及不透明度參數3.使用同樣的方法分別復制剩下的4個幀，設置時間為0.5秒，幀對應的圖層的不透明度為“50%”，如圖所示。單擊“播放動畫”圖標

，即可查看播放效果。33復制幀及設置幀延遲時間十一、保存文檔執行“文件”“導出”