網(wǎng)頁設(shè)計(jì)筆記

1、筆記網(wǎng)頁設(shè)計(jì)根據(jù)筆記所述內(nèi)容和階段，檢測a前所處狀態(tài)和能力，更好的規(guī)劃下一步掌握的知識：div+css,fireworks)photoshop),dreamweaver+html +javascript(jquery、 extjs 等) 當(dāng)下流行趨勢目前有css預(yù)處理、css框架,javascript框架、google新推出的類js的dart語言,dart同樣 是前端開發(fā)語言 個(gè)人點(diǎn)評：適當(dāng)掌握一些美術(shù)知識（有美術(shù)功底最佳），提升自己審美設(shè)計(jì)觀，才能從木質(zhì)上 提高作品的鑒賞水平1基礎(chǔ)：css,js,html,div,ps/fw,dwdiv+css學(xué)好，并綜合使用實(shí)踐一廣告/平面設(shè)計(jì)，單頁效果圖

2、（單頁代碼設(shè)計(jì)）/切圖設(shè)計(jì)（初級單）一初級頁回設(shè)計(jì)師（平面設(shè)計(jì)師）2進(jìn)階一：框架/預(yù)處理，ajax jquery less（css預(yù)處理）等實(shí)踐二圖片設(shè)計(jì)技巧，頁而特效設(shè)計(jì)（中級單） 一快速開發(fā)的特效頁而設(shè)計(jì)師3進(jìn)階二：api模板引擎使用smarty mars等實(shí)踐三創(chuàng)作平臺作品（基于淘寶、點(diǎn)點(diǎn)、shopex等公司的模板設(shè)計(jì)）一晉升為模板師了4進(jìn)階三：綜合進(jìn)階使用，與項(xiàng)目組成員溝通（axure產(chǎn)品原型圖設(shè)計(jì)）實(shí)踐四- 可以到項(xiàng)目組工作，創(chuàng)收利益；進(jìn)行用戶休驗(yàn)整體設(shè)計(jì)（ui）晉升為產(chǎn)品經(jīng)理，跟客戶交流，直接作出客戶效果圖以上僅供參考，也可以跨階學(xué)習(xí)：但是一定要將本篇的一些陌生詞語或術(shù)語搞懂，原理

3、 弄明白，方能從整體上認(rèn)識，再到細(xì)節(jié)上認(rèn)識認(rèn)識階段更多的新技術(shù)、新知識，請多關(guān)注招聘網(wǎng)企業(yè)發(fā)布的招明技能，作出自己的判斷，和學(xué) 習(xí)方向t決定階段學(xué)習(xí)材料準(zhǔn)備（這是一個(gè)邊學(xué)邊積累的過程）1. w3cschool的 網(wǎng) 頁 設(shè) 計(jì) 資 料（html,xhtml,css,divjavscript,jquery,less,ajax,smarty,mars 等），書籍、手冊的收集（可根據(jù)他們的 難易程度收集，如基礎(chǔ)版、實(shí)例風(fēng)格版、深度分析一技巧版、項(xiàng)目版）；2. 軟件操作資料（ps/fw/dw/axure/mindmanage）及其他常用工具，（說明一下 mindmanage是一個(gè)腦圖工具；簡單講，就是

4、一個(gè)畫人綱的工具;當(dāng)然它的功能遠(yuǎn)遠(yuǎn)不止這點(diǎn) 了，就不詳述了）3. 圖片素材搜集（根據(jù)行業(yè)類型、網(wǎng)站風(fēng)格、圖片作用，來劃分素材）4. 代碼實(shí)例收集（如常用代碼匯總、項(xiàng)r類、特效類等方式來規(guī)劃自己的代碼）5. 收集設(shè)計(jì)網(wǎng)站（好的網(wǎng)站作品，截圖后，分類保存在圖片素材中）9行業(yè)題外 話（話題社版塊的交流t各種設(shè)計(jì)的門戶bbs等網(wǎng)站交流，提問解決等方式）進(jìn)入下一階段：t學(xué)習(xí)階段建議：1學(xué)習(xí)思路：組合式學(xué)習(xí)（將知識連貫起來學(xué)習(xí)，測試）一以單個(gè)練習(xí)為單位，組 合練習(xí)實(shí)例為單元，組合單元實(shí)例為模塊，組合模塊為項(xiàng)口，這樣的逐步式學(xué) 習(xí)t以便更好的檢測學(xué)習(xí)進(jìn)度，及學(xué)后的成果2 學(xué)習(xí)方法：基礎(chǔ)概念圖片設(shè)計(jì)/代碼測試

5、案例學(xué)習(xí)（技巧學(xué)習(xí)卜組合案例（應(yīng)用能力卜接單練技能（實(shí)戰(zhàn)效果）t以便更好的檢測技術(shù)水平能力3學(xué)習(xí)邏輯：t拿握技能、技巧 從整體的理論架構(gòu)（畫出白己學(xué)習(xí)結(jié)構(gòu)圖）一再到脈絡(luò)細(xì)節(jié)一形成一個(gè)整 體的認(rèn)識【提示：將準(zhǔn)備好的學(xué)習(xí)材料大綱（如書中的大綱）規(guī)劃出來一 然后分門別類的弄出來】 注重實(shí)例練習(xí)t穩(wěn)固基礎(chǔ)（如：看威客的客戶單，由小到大） 加強(qiáng)設(shè)計(jì)規(guī)范，代碼規(guī)范；加強(qiáng)設(shè)計(jì)技巧（圖片設(shè)計(jì)、頁面設(shè)計(jì)），多看效 果圖、實(shí)例代碼（如項(xiàng)目代碼） 總結(jié)自己的素材（圖片設(shè)計(jì)、實(shí)例效果、項(xiàng)目效果）4檢驗(yàn)學(xué)習(xí)效率及成果 根據(jù)學(xué)習(xí)計(jì)劃和一天一實(shí)例的作品效果，做到每口的任務(wù)指標(biāo)，測試自己 的學(xué)習(xí)能力，再看威客客八要求，企業(yè)招

6、聘要求計(jì)算日子下面是簡短的綠色食品網(wǎng)所做的筆記；出處，請看傳智播客李靜老師的教程或筆記掌握：分析網(wǎng)站結(jié)構(gòu)的能力網(wǎng)站效果圖的實(shí)現(xiàn)、1網(wǎng)站效果的設(shè)計(jì)、站點(diǎn)的建立，模板的建立2. 主要設(shè)計(jì)的三個(gè)頁而：首頁3. 分析頁而效果圖:思考整體定主題：食品定色調(diào)：綠色市場常見的網(wǎng)站類型有：電商型、企業(yè)型、炫酷型1分析網(wǎng)站結(jié)構(gòu)2. 選色：顏色定位（選色）顏色會直接抓住丿ij戶的視覺效果3網(wǎng)站風(fēng)格：簡約風(fēng)格型:色彩搭配主色，配色識色辯能（看顏色就能分辯岀你是做什么的）用戶（網(wǎng) 站）類型主色配色主題與主色解瀆（感覺）配色解讀教育藍(lán)色/深紅旅游藍(lán)色/綠色感覺接近大口然 的色彩攝影黑色黑色感覺較酷食品綠色綠色，健康，安

7、全女性紫色，粉色，枚紅 色紫色神秘主色說明:表達(dá)川戶主題的思想，符合主題內(nèi)容配色說明:是為了更好的i辦調(diào)主色，不能奪取主色的視覺效果（也就是主色要衣達(dá)的中心思想）, 它的任務(wù)是更好的映襯主色所要表達(dá)的內(nèi)容配色要求：1不能扎眼（不能吸引掉主色魅力）2. 統(tǒng)一主色的色調(diào)（圍繞主色設(shè)計(jì)）3. 點(diǎn)綴效果（如提醒）4. 呼應(yīng)主題（主色）效杲配色有：灰色（灰色是百搭的顏色，最優(yōu)配色）1. 制作頁面：（常規(guī)參考值）考慮桌血（顯示器）的分辨率:1024*76&因?yàn)檫@個(gè)分辨率用的比較多 考慮文件尺寸吋，先定寬度，后定高度 遵循設(shè)計(jì)的原則：遵守的-設(shè)計(jì)理念：設(shè)計(jì)要求美觀、人方、霸氣的視覺效果 符合設(shè)計(jì)原則

8、的規(guī)范標(biāo)準(zhǔn)在1024*768瀏覽環(huán)境下，水平方向不能出現(xiàn)滾動(dòng)條背景:寬度2000px版式寬度：980px頁而背景寬度:980px,屮|'可（內(nèi)容）頁而的寬度960px或980px,版而的寬度最人要求不能超過1030px文字設(shè)計(jì)：字體：宋體；字號：12px標(biāo)題字號:14px或16px導(dǎo)航字號:14px；鋸齒級別:不消除鋸齒文字的對齊方式：等邊距操作縱向排列均分高度水平排列一均分寬度字體效果設(shè)計(jì)（實(shí)體漸變網(wǎng)頁抖動(dòng)圖案）漸變色：顏色一 > 填充選項(xiàng)一線性漸變av:表示字體間的水平間距fireworks設(shè)計(jì)軟件（制作版而效果圖非常方便）1. 菜單文件菜單：新建一ctrl+n保存一ctrl

9、+s2. 常用而板2.1工具而板:窗口一工具-ctrl+f2選擇工具一鋼筆工具p繪制圖層2.2屬性面版:窗口 一屬性-ctrl+f3畫布大小寬度：高度:圖層而板:窗口 一層一f2工具欄:窗口一工具欄一主要血板3. 快捷鍵：放大:ctrl +縮小:ctrl圖層組合:ctrl +g取消圖層組合:ctrl+shift +g路徑組合:ctrl+t取消路徑組合:ctl+shift+t百分百顯示：ctrl+1綠色食品網(wǎng)掌握：如何設(shè)計(jì)網(wǎng)站效果圖、網(wǎng)站的配色、網(wǎng)站的版而構(gòu)成網(wǎng)站效果圖的設(shè)計(jì)要求：美觀、大方1文件尺寸初值：寬度一2000px 一不可更改高度-1019px-nj更改分辨率一72px/英寸一網(wǎng)頁最大

10、是72像素/英寸畫布顏色一白色2. 工作習(xí)慣，建好文件就保存一以免文件丟失一存放到有意義的文件夾中文件規(guī)范文件夾名:站點(diǎn)名（站點(diǎn)類型站點(diǎn)風(fēng)格）一以下名稱必須是英文的 文件歸類：網(wǎng)頁文件樣式文件圖像文件-images3. 選素材4.logo設(shè)計(jì)設(shè)計(jì)圖形：邊框線刪除透明邊框按鈕停 tips文字輸入輸入法切換使用快捷鍵ctrl+shift惻角矩形的微調(diào)：藍(lán)點(diǎn)：調(diào)節(jié)圓角矩形的尺寸大小黃點(diǎn)：調(diào)節(jié)圓角的形狀，及弧度alt+左鍵+黃點(diǎn)：調(diào)節(jié)圓角的弧度投影實(shí)現(xiàn)：1克隆操作:編輯一克?。ㄖ苯油瓿蓮?fù)制粘貼這個(gè)操作）（克隆后；shift+移動(dòng)鼠標(biāo)，保證對齊方式）2.垂直翻轉(zhuǎn):右鍵一變形一垂直翻轉(zhuǎn)修飾符：小豎線小豎線

11、的設(shè)計(jì)：（兩個(gè)矩形對象組合而成）1選擇矩形工具：矩形大?。洪L度：35px寬度：lpx矩形顏色：填加為三個(gè)顏料：左中右中間顏色：填充深色左邊右邊顏色：填充亮色填充效果:線性漸變調(diào)節(jié)透明度添加屮間的透明度左右兩邊的透明度調(diào)為0緊靠中間的顏料添加兩個(gè)顏料，然后分別拖開克隆一個(gè)矩形對象1 克隆2并向右移動(dòng)新的矩形對象lpx新的矩形對象操作第一種方案：填充效果:實(shí)心顏色:比原來顏色稍暗一點(diǎn)笫二種方案（采用這種方式調(diào)整新的矩形對彖）填充效果:漸變左邊屮間顏色一樣：都選取比較亮的色彩左右兩邊的透明度降低50%下將兩個(gè)矩形對象路徑組合:ctrl+t, ctrl+g兩個(gè)操作；組合成新的對彖克隆組合后的對象，多個(gè)

12、克隆操作并小心翼翼的拖動(dòng)中間圓角的制作 矩形工具繪制惻介矩形大矩形大小寬度：980px長度:313px小矩形:寬度235*長度80px移動(dòng)10px:shift+向上/向下做效果圖吋：描邊內(nèi)部對齊(建議)平面化所選：將矢量圖轉(zhuǎn)換為位圖dreamweaver軟件設(shè)計(jì)1配置：常虬ap兀素 css樣式 標(biāo)記色彩不可見元素編輯一首選參數(shù)-代碼提示結(jié)束標(biāo)簽：o鍵入w后0)©勲起觸簽二后,o從不)選項(xiàng)：叼啟用代碼提示c)叼啟用描述工具提示qe)色 輔助功能 復(fù)制/粘貼 文件比較 文件類型/編輯器 新建文檔 驗(yàn)證程序 在瀏覽器中預(yù)覽菜單w：站點(diǎn)延遲)：0標(biāo)簽名稱0屬性名稱回屬性值0對象方法和變量0

13、html實(shí)體0 css雇性名稱0代碼提示工具0 dom代碼提示若要添加或刪除標(biāo)簽和屬性 > 諳使用標(biāo)簽庫編輯器.2瀏覽器設(shè)置3圖像插入ctrl+alt+lfireworks軟件切圖一工具記憶功能 切片工具優(yōu)化血板1背景圖像的操作文件一圖像預(yù)覽一格式一jpeg品質(zhì)70導(dǎo)出一工具面板-wen!具切片優(yōu)化丁具選擇需要導(dǎo)出的格式j(luò)pg/gif/jpeg/復(fù)制、粘貼ctrl+c、v圖像預(yù)覽一ctrl+shift+x -品質(zhì)修改：降低色彩的幀數(shù)圖像組合：ctrl+g頁面解構(gòu)網(wǎng)頁設(shè)計(jì)中需要確認(rèn)的設(shè)計(jì)元素模塊 1元素的設(shè)計(jì)1.1字體設(shè)計(jì)1.2圖片設(shè)計(jì)圖片尺寸顏色效果1.3.div+css的設(shè)計(jì)-欄目（導(dǎo)

14、航）設(shè)計(jì)、框架（版式）、內(nèi)容、1.4js效果設(shè)計(jì)開始設(shè)計(jì)頁而：1. css代碼: 清0設(shè)置bodymargin:0; padding:o; font-family:"宋體font-size:12px; color:#606060; background:url(./images/body_bg.jpg) no-repeat center top; hl,h2,h3,ul,li,dl,dt,dd,p,imgmargin:0; padding:0; list-style:none; border:0; 設(shè)置body背景圖，版面的屮心(版心)：水平居屮最后一個(gè)可以不加;分號推薦都加上;分號

15、background:url(./images/body_bg.jpg) no-repeat center top; logo設(shè)置/*headr*/#headerwidth:980px;height:119px;margin:0px auto;將 logo 上卜外邊距都清 0 navspan元素是一個(gè)行內(nèi)元素（因?yàn)樾袃?nèi)元素給寬，是不會生效的）一所以需要將它轉(zhuǎn)化為塊 元素display:block; 行內(nèi)元素轉(zhuǎn)塊元素的方法處理最后一個(gè)豎線的方法：!分析css樣式的關(guān)系類里面class要指定.navcenter li.nobg background:none;不加空格:才表示類 class 內(nèi)部的

16、樣式.navcenter li.nobg background:none;加空格代表類 class 的覆蓋2. 做一個(gè)規(guī)劃：頁血結(jié)構(gòu)，應(yīng)該怎么分如果每個(gè)格式效果一樣：哪個(gè)格式圖像小就川哪種格式頁而圖像用于1背景2 圖像鏈接3廣告命名規(guī)范：圖像命名規(guī)范：頁面背景圖像:body_bglogo 圖像：logocss設(shè)計(jì)命名規(guī)范：大塊區(qū)域的操作（圖像）class/id = navleft推薦使川這種，這樣跟圖片相對應(yīng)n av_left2.1.分析網(wǎng)站結(jié)構(gòu)一畫出清晰的結(jié)構(gòu)是為了前臺頁面制作時(shí)一能夠更好的設(shè)計(jì)header-:logonav:導(dǎo)main - :主體分結(jié)構(gòu)：1 .廣告幻燈片結(jié)構(gòu)12.內(nèi)容介紹一結(jié)構(gòu)2a. 業(yè)務(wù)種類一