1-2教學單元設計(網(wǎng)站界面設計)ppt課件(全)

2021/10/10星期日11-2科創(chuàng)資訊網(wǎng)站首頁設計——網(wǎng)站界面設計

2021/10/10星期日2地點：網(wǎng)影科技有限公司網(wǎng)站開發(fā)部時間：上午8：20主持：網(wǎng)站開發(fā)部項目總監(jiān)參加人員：網(wǎng)頁設計部各項目組組長及設計師會議議題：科創(chuàng)資訊網(wǎng)站建設項目中項目需求分析創(chuàng)建情境網(wǎng)頁設計部每周例會2021/10/10星期日3工作任務流程：概要設計，提交網(wǎng)站建設方案提交設計草圖需求分析修改并完成網(wǎng)頁界面（網(wǎng)頁初始原型）的設計制作把頁面切片輸出成網(wǎng)頁2021/10/10星期日41.討論分析與解決問題——問題布局如何根據(jù)草圖進行頁面的布局，把草圖設計轉(zhuǎn)化為頁面設計，并進行各欄目的對齊分布圖像管理如何制作帶有圓角，并且具有色彩和圖像合成的banner圖像如何制作帶有圓角且?guī)в袌D案的網(wǎng)頁圖標如何對齊各欄目的標題，對多個圖片進行對齊和分布如何有效管理多個圖層2021/10/10星期日5布局如何根據(jù)草圖進行頁面的布局，把草圖設計轉(zhuǎn)化為頁面設計，并進行各欄目的對齊分布參考線的應用解決方法操作步驟：1.通過【視圖】│【標尺】命令打開標尺顯示2.在標尺上單擊鼠標右鍵修改該標尺單位為像素，保證和頁面長寬的單位（通常為像素）3.使用移動工具從標尺上方拖出參考線，放置在草圖中各欄目的分界處（要結(jié)合各欄目的大小計算出每個參考線所在的位置，遵循從上至下，從左到右的順序設置參考線）1.討論分析與解決問題——問題2021/10/10星期日6草圖到頁面的轉(zhuǎn)化2021/10/10星期日7參考線的鎖定：執(zhí)行【視圖】│【鎖定參考線】命令參考線對齊功能：執(zhí)行【視圖】│【對齊到參考線】命令參考線的應用技巧1.討論分析與解決問題——問題2021/10/10星期日8圖像如何制作帶有圓角，并且具有色彩和圖像合成的banner圖像蒙版的應用解決方法確保需要合成的圖像的圖層關系（上下關系）對處在上方的圖層添加圖層蒙版在蒙版區(qū)域中使用漸變色或是使用軟性畫筆繪畫（蒙版中黑灰白和圖像的對應關系）1.討論分析與解決問題——問題2021/10/10星期日9蒙版的應用蒙版中黑灰白和圖像的對應關系2021/10/10星期日10蒙版的應用技巧使用軟性畫筆繪制蒙板區(qū)域使用漸變色繪制蒙板區(qū)域2021/10/10星期日11圖像1.如何制作帶有圓角德banner圖像2.如何制作帶有圓角且?guī)в袌D案的網(wǎng)頁圖標剪輯組的使用解決方法操作步驟：1.確保修剪的圖像和用來修剪的造型分別處于兩個獨立的圖層，并且是緊密的上下層的關系2.在兩層交接處按下ALT鍵，出現(xiàn)創(chuàng)建剪輯組的圖標時單擊鼠標左鍵，確立剪輯組的創(chuàng)建3.同樣的操作可以取消剪輯組，恢復圖層的獨立關系1.討論分析與解決問題——問題2021/10/10星期日12需修剪圖像和用來修剪的造型圖層的上下關系和修剪對應關系2021/10/10星期日13管理圖像文字按鈕/圖標如何對文字、對齊各欄目的標題，和對多個圖片進行對齊和分布使用自有屬性對齊鏈接圖層對齊分布使用參考線對齊鏈接圖層對齊分布移動復制對齊鏈接圖層對齊分布解決方法解決方法類型類型2021/10/10星期日14管理2.如何有效管理多個圖層圖層編組解決方法操作步驟：1.把同一欄目的各個圖層歸類放置在同一個圖層組文件夾中2.給圖層組文件夾進行命名：原則是使用欄目名稱2021/10/10星期日152.完成網(wǎng)頁的切片輸出1.網(wǎng)頁切片的作用1）減少網(wǎng)頁下載時間而又不影