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

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