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

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

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