什么是網(wǎng)頁設(shè)計(jì)

一個(gè)是偏向于設(shè)計(jì)，一個(gè)是偏向于代碼。如果是網(wǎng)頁設(shè)計(jì)，剛開始可能是模仿別人的網(wǎng)頁，但是到了最后會(huì)出現(xiàn)慢慢的偏重于美術(shù)，心理學(xué)，色彩，繪畫等。這些藝術(shù)方面，表面你能看到的，如果你是學(xué)計(jì)算機(jī)的接觸過網(wǎng)頁設(shè)計(jì)，并喜歡網(wǎng)頁設(shè)計(jì)，我建議不要偏向這個(gè)方面，因?yàn)榈胶髞碜屇阕约邯?dú)立設(shè)計(jì)網(wǎng)頁時(shí)，色彩搭配是很難的，還有整體布局，以及是否符合當(dāng)下潮流等。現(xiàn)在的網(wǎng)頁千變?nèi)f化，設(shè)計(jì)也要不斷學(xué)習(xí)，并且能跟得上。 對(duì)于web前端開發(fā)這個(gè)就是把別人設(shè)計(jì)好的自己用div+css+js去實(shí)現(xiàn)的，一個(gè)簡單的網(wǎng)頁可能就是div+css把它寫出來，但是這里面是充滿經(jīng)驗(yàn)的。web前端的發(fā)展過程中到了最后就是頭疼的兼容性問題，因?yàn)橐_保一個(gè)頁面在任何瀏覽器當(dāng)中能正常顯示是很不容易的，瀏覽器廠商那么多，各自還有自己的專屬屬性，而且有的還要求在手機(jī)中能夠顯示，能夠自適應(yīng)屏幕等。單純的css無法來控制，就需要學(xué)習(xí)javascript, web前端看似簡單其實(shí)要學(xué)習(xí)的東西很多，經(jīng)驗(yàn)也特別重要，接觸后臺(tái)后你會(huì)更明白前端的重要性。

經(jīng)常有朋友找我咨詢H5的問題，但是在和他們溝通的過程中，我發(fā)現(xiàn)很多人對(duì)H5的理解都是停留在用戶層面，邀請(qǐng)函、小游戲、品牌展示、抽獎(jiǎng)等等。其實(shí)如果上升到營銷層面的話，僅在用戶層面去思考是遠(yuǎn)遠(yuǎn)不夠的，因?yàn)槿魏蝹鞑ザ家紤]有效性的問題，如果100w pv帶來的只是刷屏效果，而對(duì)品牌帶不來任何有效轉(zhuǎn)化，這樣的傳播顯然是不成功的。隨著微信用戶增多、H5小游戲、H5大翻頁，到H5站點(diǎn)、H5營銷。在微信上內(nèi)容的數(shù)量和樣式的逐漸增多，下面給大家介紹借助 “布谷鳥” 這一個(gè)在線制作工具，可以輕松的制作出炫酷的微信h5頁面。點(diǎn)擊制作欄目，進(jìn)入模板選擇頁1：選擇空模板，自由創(chuàng)作、選擇主題模板，更快速的創(chuàng)作出炫麗的展示。預(yù)覽樹操作2：顯示的頁面的顯示順序；右鍵調(diào)整頁面的顯示順序；3、點(diǎn)擊頁面右上角的X,可以把不需要的頁面刪除。4.功能—添加修改文字1、添加文字：點(diǎn)擊右側(cè)的文字選項(xiàng)→主編輯區(qū)會(huì)出現(xiàn)文字輸入框→雙擊修改2、文字屬性修改：右側(cè)文字屬性修改選項(xiàng)，包括字體種類，字體大小、顏色等等。功能—添加修改按鈕添加按鍵：點(diǎn)擊右側(cè)按鈕選項(xiàng)→點(diǎn)擊編輯區(qū)的按鈕→修改文字、鏈接5.功能—添加修改底圖1、修改背景顏色：點(diǎn)擊右側(cè)底圖選項(xiàng)→選擇顏色2、上傳底圖：點(diǎn)擊右側(cè)底圖選項(xiàng)→點(diǎn)擊上傳按鈕→確定6：保存。生成1、添加標(biāo)題、描述、縮略圖2、生成的二維碼和鏈接可以用于分享到微信、微博等3、點(diǎn)擊生成按鈕，即完成了一個(gè)作品的制作過程。歡迎大家使用，免費(fèi)的模板。

　首先要了解HTML（超文本設(shè)計(jì)語言），記住使用原理；接著用兩三天的時(shí)間學(xué)習(xí)CSS（層疊樣式表單）；進(jìn)而再花些時(shí)間了解一下javascript軟件。掌握這些基礎(chǔ)性知識(shí)后，就可試著用“記事本”編寫網(wǎng)頁，在初試階段千萬不要用那些可視化工具，如FrontPage、Dreamweaver，否則將不利于鍛煉實(shí)際能力。

　　通俗說自適應(yīng)網(wǎng)頁設(shè)計(jì)響應(yīng)式網(wǎng)頁設(shè)計(jì)響應(yīng)式網(wǎng)頁設(shè)計(jì)自適應(yīng)網(wǎng)頁設(shè)計(jì)真細(xì)起自適應(yīng)響應(yīng)式集指網(wǎng)頁整體圖自適應(yīng)或者banner自適應(yīng)　　響應(yīng)式設(shè)計(jì)網(wǎng)站兼容同終端　　響應(yīng)式網(wǎng)頁設(shè)計(jì)優(yōu)勢(shì)：流體網(wǎng)格網(wǎng)站適合響應(yīng)式網(wǎng)頁設(shè)計(jì)　　1、靈性強(qiáng)適應(yīng)同辨率設(shè)備　　2、便快捷解決設(shè)備顯示適應(yīng)問題　　自適應(yīng)網(wǎng)頁設(shè)計(jì)優(yōu)勢(shì)：固定斷點(diǎn)網(wǎng)站適合自適應(yīng)網(wǎng)頁設(shè)計(jì)　　1、實(shí)施起代價(jià)更低測(cè)試更容易　　2、自適應(yīng)布局讓設(shè)計(jì)更加控需要考慮幾種狀態(tài)　　雖響應(yīng)式/自適應(yīng)網(wǎng)頁設(shè)計(jì)帶兼容各種設(shè)備工作量、代碼累贅、加載間缺點(diǎn)能設(shè)計(jì)普遍適用根據(jù)屏幕辨率自適應(yīng)及自縮放圖片、自調(diào)整布局技術(shù)實(shí)現(xiàn)更于設(shè)計(jì)全新思維模式

CSS是Cascading Style Sheets(層疊樣式表)的縮寫。是一種對(duì)web文檔添加樣式的簡單機(jī)制，屬于表現(xiàn)層的布局語言。1.基本語法規(guī)范分析一個(gè)典型CSS的語句：p {COLOR:#FF0000;BACKGROUND:#FFFFFF} ??其中"p"我們稱為"選擇器"(selectors)，指明我們要給"p"定義樣式；??樣式聲明寫在一對(duì)大括號(hào)"{}"中；??COLOR和BACKGROUND稱為"屬性"(property)，不同屬性之間用分號(hào)";"分隔；??"#FF0000"和"#FFFFFF"是屬性的值(value)。2.顏色值顏色值可以用RGB值寫，例如：color : rgb(255,0,0)，也可以用十六進(jìn)制寫，就象上面例子color:#FF0000。如果十六進(jìn)制值是成對(duì)重復(fù)的可以簡寫，效果一樣。例如:#FF0000可以寫成#F00。但如果不重復(fù)就不可以簡寫，例如#FC1A1B必須寫滿六位。3.定義字體web標(biāo)準(zhǔn)推薦如下字體定義方法：body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; } 字體按照所列出的順序選用。如果用戶的計(jì)算機(jī)含有Lucida Grande字體，文檔將被指定為Lucida Grande。沒有的話，就被指定為Verdana字體，如果也沒有Verdana，就指定為Lucida字體，依此類推，； ??Lucida Grande字體適合Mac OS X； ??Verdana字體適合所有的Windows系統(tǒng)； ??Lucida適合UNIX用戶 ??"宋體"適合中文簡體用戶; 如果所列出的字體都不能用，則默認(rèn)的sans-serif字體能保證調(diào)用; 4.群選擇器當(dāng)幾個(gè)元素樣式屬性一樣時(shí)，可以共同調(diào)用一個(gè)聲明，元素之間用逗號(hào)分隔，：p, td, li { font-size : 12px ; } 5.派生選擇器可以使用派生選擇器給一個(gè)元素里的子元素定義樣式，例如這樣：li strong { font-style : italic; font-weight : normal；} 就是給li下面的子元素strong定義一個(gè)斜體不加粗的樣式。6.id選擇器用CSS布局主要用層"div"來實(shí)現(xiàn)，而div的樣式通過"id選擇器"來定義。例如我們首先定義一個(gè)層<div id="menubar"></div>然后在樣式表里這樣定義：#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 其中"menubar"是你自己定義的id名稱。注意在前面加"#"號(hào)。id選擇器也同樣支持派生，例如：#menubar p { text-align : right; margin-top : 10px; } 這個(gè)方法主要用來定義層和那些比較復(fù)雜，有多個(gè)派生的元素。6.類別選擇器在CSS里用一個(gè)點(diǎn)開頭表示類別選擇器定義，例如：.14px {color : #f60 ;font-size:14px ;} 在頁面中，用class="類別名"的方法調(diào)用：<span class="14px">14px大小的字體</span> 這個(gè)方法比較簡單靈活，可以隨時(shí)根據(jù)頁面需要新建和刪除。7.定義鏈接的樣式CSS中用四個(gè)偽類來定義鏈接的樣式，分別是：a:link、a:visited、a:hover和a : active，例如：a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;} 以上語句分別定義了"鏈接、已訪問過的鏈接、鼠標(biāo)停在上方時(shí)、點(diǎn)下鼠標(biāo)時(shí)"的樣式。注意，必須按以上順序?qū)懀駝t顯示可能和你預(yù)想的不一樣。記住它們的順序是“LVHA”。

　　一般對(duì)于網(wǎng)頁設(shè)計(jì)師都有職責(zé)要求，如下　　1、精 通 各 種 網(wǎng) 頁 及 美 術(shù) 方 面 的 應(yīng) 用 軟 件 ， 包 括 Photoshop ， Coreldraw ， Illustrator,Dreamweaver,Flash ， Fireworks 等。　　2、熟悉 Html、css 、JavaScript等。　　3、美術(shù)、設(shè)計(jì)等相關(guān)專業(yè)專科或以上學(xué)歷。　　4、一年以上相關(guān)專業(yè)工作經(jīng)驗(yàn)、有優(yōu)秀的藝術(shù)素養(yǎng)。　　5、熟悉醫(yī)療行業(yè)網(wǎng)站建設(shè)、網(wǎng)絡(luò)廣告、網(wǎng)站專題建設(shè)等工作。　　6、有醫(yī)療網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)者優(yōu)先。對(duì)醫(yī)療頁面設(shè)計(jì)轉(zhuǎn)化效果有獨(dú)到見解者優(yōu)先。　　7、具備優(yōu)秀的網(wǎng)站整體策劃、設(shè)計(jì)能力,有豐富的網(wǎng)頁設(shè)計(jì)經(jīng)驗(yàn)。　　8、熟練處理CSS與IE6、IE7、IE8、FireFox等瀏覽器兼容問題。　　9、有較強(qiáng)的平面設(shè)計(jì)感覺及良好的美術(shù)基礎(chǔ)、審美能力和創(chuàng)意，色彩感強(qiáng)；思想敏銳活躍,具有豐富的視覺創(chuàng)作經(jīng)驗(yàn)和獨(dú)到的審美修養(yǎng)。　　10、創(chuàng)新意識(shí)強(qiáng)， 有良好的學(xué)習(xí)能力、溝通能力和領(lǐng)悟能力，能夠承受較大的工作壓力。　　11、有良好的團(tuán)隊(duì)合作意識(shí)，耐心、誠懇，有強(qiáng)烈的責(zé)任心和積極主動(dòng)的工作態(tài)度； 有良好的團(tuán)隊(duì)合作意識(shí)，耐心、誠懇，有強(qiáng)烈的責(zé)任心和積極主動(dòng)的工作態(tài)度。

　　兩者是有區(qū)別的：　　平面設(shè)計(jì)師：多數(shù)要求印刷 需要對(duì)印刷相關(guān)知識(shí)了解 簡單的平面設(shè)計(jì)比如做個(gè)超市的招牌，這也是平面設(shè)計(jì)，高端的平面設(shè)計(jì)要有創(chuàng)意，有范兒，要有深入的理念，要有商業(yè)價(jià)值，3秒內(nèi)能讓瀏覽者確定要繼續(xù)品味。要有第一印象，要可以回味，最終以達(dá)到商業(yè)宣傳的效果，做為平面設(shè)計(jì)師像混口飯倒是容易，如果真想走向國際的水準(zhǔn)，那你一定要有過人的天賦和后天地獄般的磨練。　　網(wǎng)頁設(shè)計(jì)師：需要了解甚至是深入了解用戶體驗(yàn)，網(wǎng)頁是互動(dòng)的 不像平面廣告一樣看看就行了，作為高端些的網(wǎng)頁設(shè)計(jì)師要了解各種網(wǎng)頁制作的知識(shí)，要了解客戶端，要了解瀏覽器，要了解面向人群，甚至要了解心理學(xué)，好的作品有兩種目的，第一就是在瀏覽者大腦中強(qiáng)化印象，提升客戶品牌形象（比如德芙，可口可樂，奔馳等等這種大的品牌為的是擴(kuò)張自己的形象，以成為潛在客戶在需要的時(shí)候的第一選擇為目的，這種網(wǎng)站需要達(dá)到的效果是瀏覽者在瀏覽的時(shí)候有一股子電流從腳底上升然后散開，就像一見鐘情的感覺），第二直接或間接產(chǎn)生訂單的成交（比如桃保商城，京東1好店等電商，設(shè)計(jì)非常熱鬧，要有一種撕心裂肺的叫賣聲，不只是減價(jià)，是陪了命的減價(jià)，）所以好的網(wǎng)頁作品設(shè)計(jì)出的不是看到的內(nèi)容而已，他設(shè)計(jì)出的是一種客戶看到的心理感受，設(shè)計(jì)出的是企業(yè)或品牌的靈魂。

網(wǎng)頁設(shè)計(jì)的工作目標(biāo)，是通過使用更合理的顏色、字體、圖片、樣式進(jìn)行頁面設(shè)計(jì)美化，在功能限定的情況下，盡可能給予用戶完美的視覺體驗(yàn)，實(shí)現(xiàn)最終的轉(zhuǎn)化。

一、菜鳥級(jí)網(wǎng)頁制作軟件網(wǎng)頁三劍客指的是：1、dreamweawer 網(wǎng)頁設(shè)計(jì)制作工具2、flash 動(dòng)畫制作工具3、photoshop 圖片處理工具二、自助建站系統(tǒng)助建站就是一套網(wǎng)站系統(tǒng)，專門給對(duì)網(wǎng)頁代碼或者通俗說不懂制作網(wǎng)站的人使用的一套系統(tǒng)，企業(yè)站的用pageadmin、電子商城的用ECShop、論壇站的用discuz等