網(wǎng)頁(yè)設(shè)計(jì)心得 高效編寫(xiě)網(wǎng)頁(yè)代碼
發(fā)布時(shí)間:2009-07-27 23:14:55 作者:佚名
我要評(píng)論

網(wǎng)頁(yè)設(shè)計(jì)心得:高效編寫(xiě)網(wǎng)頁(yè)代碼.
本來(lái)這第七章應(yīng)該是針對(duì)設(shè)計(jì)中的層次、空間的技法及深層次的探討。但今天暖暖跟我哭訴她事情總是處理不完。加上今年3·4月份公司的一大堆生意的順利完成。以及那時(shí)候總結(jié)出的一些經(jīng)驗(yàn)。覺(jué)得效率這個(gè)問(wèn)題還是很有必要跟大家分享分享的。時(shí)間倉(cāng)促,分類(lèi)不明確,還請(qǐng)見(jiàn)諒!
本文從三個(gè)方面著手,一個(gè)是企業(yè)網(wǎng)站的建設(shè)(教育政府類(lèi)也歸納到企業(yè)站點(diǎn)里),二是小型門(mén)戶(hù)站點(diǎn)的建設(shè),三呢,我把平面廣告設(shè)計(jì)也順帶提一點(diǎn)。主要還是網(wǎng)站。
其實(shí)企業(yè)站點(diǎn)的工作量并不大,相信很多有經(jīng)驗(yàn)的同仁能夠把普通企業(yè)站可能用到的欄目一口報(bào)出來(lái)。在這里我們換個(gè)角度來(lái)看待這些工作。從頁(yè)面的內(nèi)容構(gòu)成上來(lái)針對(duì)他們進(jìn)行分類(lèi):
一:首頁(yè)。
這里的設(shè)計(jì)含量是最高的。工作也是最繁復(fù)的。暫且不談設(shè)計(jì)。從ps版到html,到最后的整站。往往修改最多的就是首頁(yè)了。在這里我要強(qiáng)調(diào)的是,從首頁(yè)開(kāi)始,注意使用包含文件。
二:分頁(yè)。
分頁(yè)有幾類(lèi)呢?在我看來(lái),無(wú)非是list和view,列表頁(yè)和閱讀頁(yè)。list一般是新聞列表,或圖片列表。而view,則完全只需要一個(gè)!
所以,在構(gòu)建一個(gè)普通的企業(yè)站的時(shí)候,上述三個(gè)頁(yè)面完成了,工作基本已經(jīng)完成1/3了。還有程序,以及內(nèi)容錄入。
純動(dòng)態(tài)的站點(diǎn)。內(nèi)容錄入很簡(jiǎn)單。但如果是有著大量靜態(tài)頁(yè)的站點(diǎn),比如教育類(lèi)和政府類(lèi)的站點(diǎn)。當(dāng)然,也有相當(dāng)一部分原因是從公司角度或程序員角度來(lái)考慮,將簡(jiǎn)介之類(lèi)的很長(zhǎng)時(shí)間才更新一次的頁(yè)面做成靜態(tài)的。另外一種情況則是內(nèi)容內(nèi)包含大量的圖片、特殊符號(hào)、公式、表格等。哪怕是再?gòu)?qiáng)的編輯器編輯起來(lái)也很麻煩。使用dw效率可能會(huì)更高。到這里,我的經(jīng)驗(yàn)才真正的表述出來(lái)。
先說(shuō)一下大量的文字錄入,先定義好你的P,記得縮進(jìn)2em,因?yàn)楹芏嗳撕茏⒁膺@一點(diǎn)。也必須注意到這一點(diǎn)。相信大家都開(kāi)著qq,大量的文字,無(wú)論是從word還是記事本,直接copy,貼到qq對(duì)話框里再?gòu)?fù)制一次,去除多余的東西,然后到dw的代碼狀態(tài)。記住,是代碼狀態(tài)粘貼。這個(gè)時(shí)候,代碼狀態(tài)依然保留了原有的段落,而預(yù)覽則是不分段的,這個(gè)時(shí)候,你的P,就開(kāi)始大顯神威了。開(kāi)始的地方<p>,結(jié)尾的地方</p>,中間的段落則復(fù)制"<p></p>"直接粘貼.不需要你再去按回車(chē),也不需要按著ALT+SHIFT+空格了?。?!
說(shuō)表格,在編輯器里插表格,效率總沒(méi)在DW里高吧.好,那就在DW里畫(huà)表格,然后復(fù)制代碼,到編輯器的代碼狀態(tài)去粘貼.效果那是一個(gè)好啊....
說(shuō)復(fù)雜的內(nèi)容,有表格有特殊符號(hào)有公式有大量的文字有表格還有圖片.而且相當(dāng)?shù)拈L(zhǎng).怎么辦呢?我向你推薦一個(gè)小軟件,叫FLASHPAPER,它可以直接在word內(nèi),將所有的內(nèi)容轉(zhuǎn)換成一個(gè)帶滾動(dòng)條的swf文件.相當(dāng)多的情況下,體積比你在dw里一點(diǎn)一點(diǎn)編輯出來(lái)的html還要?。?br /> 其實(shí)要說(shuō)的是,代碼狀態(tài)操作,很多時(shí)候效率是最高的!
如果客戶(hù)提供給你的內(nèi)容,不全,或不完整,這種情況則不在我的考慮范圍內(nèi).這是前期工作.如果不知道怎樣處理合適,請(qǐng)翻閱我的前六章內(nèi)容.
**************************************講述制作與設(shè)計(jì)的分割線**************************************
其實(shí)呢,有很多同仁花在設(shè)計(jì)上的時(shí)間是最多的。而企業(yè)站點(diǎn)一般也沒(méi)多少內(nèi)容。我想,你看一下我的網(wǎng)頁(yè)設(shè)計(jì)進(jìn)階系列的前四章。會(huì)對(duì)你的設(shè)計(jì)有很大的幫助。其余的不再做贅述。只是再?gòu)?qiáng)調(diào)一下積累。只有不停的積累,才會(huì)不斷的進(jìn)步。第四章關(guān)于素材里,我這樣說(shuō)過(guò):
當(dāng)你看到某一張圖片的某一個(gè)部分,腦袋就開(kāi)始閃光,你發(fā)現(xiàn)你可以完全從這一部分出發(fā)設(shè)計(jì)出一套的東西。
當(dāng)你接到一個(gè)任務(wù),腦袋就像硬盤(pán)一樣,把你機(jī)器里跟這個(gè)任務(wù)相似類(lèi)似的甚至可以直接拿過(guò)來(lái)用的那些內(nèi)容自動(dòng)打包。
當(dāng)你要做某樣?xùn)|西,你的硬盤(pán)里哪些可用的字體哪些可用的花紋哪些的可用的小圖標(biāo)自動(dòng)浮現(xiàn)在你的腦海里。
當(dāng)你要做某樣?xùn)|西,這個(gè)時(shí)候你在趕路,你在騎車(chē),你立刻就能想到哪個(gè)哪個(gè)網(wǎng)站上什么什么素材可以拿過(guò)來(lái)用。
當(dāng)你看到某個(gè)站,你可以立刻進(jìn)行引申,張口就說(shuō)出哪個(gè)哪個(gè)站跟這個(gè)結(jié)構(gòu)類(lèi)似,哪個(gè)哪個(gè)站跟這個(gè)風(fēng)格接近。。。
這幾條都能做到了,設(shè)計(jì)對(duì)你來(lái)說(shuō)還是難事么?
設(shè)計(jì),其實(shí)是一個(gè)不斷積累的過(guò)程。
*********************************************特別強(qiáng)調(diào)的分割線************************************
再?gòu)?qiáng)調(diào)一句,包含文件,可以再包含一個(gè)甚至多個(gè)包含文件........理解這句話,會(huì)讓你在做那些靜不靜動(dòng)不動(dòng)的網(wǎng)站的時(shí)候省很多力氣!
****************************************網(wǎng)站設(shè)計(jì)的根本的分割線************************************
這個(gè)話題我以后會(huì)更深入的探討。網(wǎng)頁(yè)設(shè)計(jì)的那點(diǎn)事。無(wú)非是圖文混排的那點(diǎn)事。
本文從三個(gè)方面著手,一個(gè)是企業(yè)網(wǎng)站的建設(shè)(教育政府類(lèi)也歸納到企業(yè)站點(diǎn)里),二是小型門(mén)戶(hù)站點(diǎn)的建設(shè),三呢,我把平面廣告設(shè)計(jì)也順帶提一點(diǎn)。主要還是網(wǎng)站。
其實(shí)企業(yè)站點(diǎn)的工作量并不大,相信很多有經(jīng)驗(yàn)的同仁能夠把普通企業(yè)站可能用到的欄目一口報(bào)出來(lái)。在這里我們換個(gè)角度來(lái)看待這些工作。從頁(yè)面的內(nèi)容構(gòu)成上來(lái)針對(duì)他們進(jìn)行分類(lèi):
一:首頁(yè)。
這里的設(shè)計(jì)含量是最高的。工作也是最繁復(fù)的。暫且不談設(shè)計(jì)。從ps版到html,到最后的整站。往往修改最多的就是首頁(yè)了。在這里我要強(qiáng)調(diào)的是,從首頁(yè)開(kāi)始,注意使用包含文件。
二:分頁(yè)。
分頁(yè)有幾類(lèi)呢?在我看來(lái),無(wú)非是list和view,列表頁(yè)和閱讀頁(yè)。list一般是新聞列表,或圖片列表。而view,則完全只需要一個(gè)!
所以,在構(gòu)建一個(gè)普通的企業(yè)站的時(shí)候,上述三個(gè)頁(yè)面完成了,工作基本已經(jīng)完成1/3了。還有程序,以及內(nèi)容錄入。
純動(dòng)態(tài)的站點(diǎn)。內(nèi)容錄入很簡(jiǎn)單。但如果是有著大量靜態(tài)頁(yè)的站點(diǎn),比如教育類(lèi)和政府類(lèi)的站點(diǎn)。當(dāng)然,也有相當(dāng)一部分原因是從公司角度或程序員角度來(lái)考慮,將簡(jiǎn)介之類(lèi)的很長(zhǎng)時(shí)間才更新一次的頁(yè)面做成靜態(tài)的。另外一種情況則是內(nèi)容內(nèi)包含大量的圖片、特殊符號(hào)、公式、表格等。哪怕是再?gòu)?qiáng)的編輯器編輯起來(lái)也很麻煩。使用dw效率可能會(huì)更高。到這里,我的經(jīng)驗(yàn)才真正的表述出來(lái)。
先說(shuō)一下大量的文字錄入,先定義好你的P,記得縮進(jìn)2em,因?yàn)楹芏嗳撕茏⒁膺@一點(diǎn)。也必須注意到這一點(diǎn)。相信大家都開(kāi)著qq,大量的文字,無(wú)論是從word還是記事本,直接copy,貼到qq對(duì)話框里再?gòu)?fù)制一次,去除多余的東西,然后到dw的代碼狀態(tài)。記住,是代碼狀態(tài)粘貼。這個(gè)時(shí)候,代碼狀態(tài)依然保留了原有的段落,而預(yù)覽則是不分段的,這個(gè)時(shí)候,你的P,就開(kāi)始大顯神威了。開(kāi)始的地方<p>,結(jié)尾的地方</p>,中間的段落則復(fù)制"<p></p>"直接粘貼.不需要你再去按回車(chē),也不需要按著ALT+SHIFT+空格了?。?!
說(shuō)表格,在編輯器里插表格,效率總沒(méi)在DW里高吧.好,那就在DW里畫(huà)表格,然后復(fù)制代碼,到編輯器的代碼狀態(tài)去粘貼.效果那是一個(gè)好啊....
說(shuō)復(fù)雜的內(nèi)容,有表格有特殊符號(hào)有公式有大量的文字有表格還有圖片.而且相當(dāng)?shù)拈L(zhǎng).怎么辦呢?我向你推薦一個(gè)小軟件,叫FLASHPAPER,它可以直接在word內(nèi),將所有的內(nèi)容轉(zhuǎn)換成一個(gè)帶滾動(dòng)條的swf文件.相當(dāng)多的情況下,體積比你在dw里一點(diǎn)一點(diǎn)編輯出來(lái)的html還要?。?br /> 其實(shí)要說(shuō)的是,代碼狀態(tài)操作,很多時(shí)候效率是最高的!
如果客戶(hù)提供給你的內(nèi)容,不全,或不完整,這種情況則不在我的考慮范圍內(nèi).這是前期工作.如果不知道怎樣處理合適,請(qǐng)翻閱我的前六章內(nèi)容.
**************************************講述制作與設(shè)計(jì)的分割線**************************************
其實(shí)呢,有很多同仁花在設(shè)計(jì)上的時(shí)間是最多的。而企業(yè)站點(diǎn)一般也沒(méi)多少內(nèi)容。我想,你看一下我的網(wǎng)頁(yè)設(shè)計(jì)進(jìn)階系列的前四章。會(huì)對(duì)你的設(shè)計(jì)有很大的幫助。其余的不再做贅述。只是再?gòu)?qiáng)調(diào)一下積累。只有不停的積累,才會(huì)不斷的進(jìn)步。第四章關(guān)于素材里,我這樣說(shuō)過(guò):
當(dāng)你看到某一張圖片的某一個(gè)部分,腦袋就開(kāi)始閃光,你發(fā)現(xiàn)你可以完全從這一部分出發(fā)設(shè)計(jì)出一套的東西。
當(dāng)你接到一個(gè)任務(wù),腦袋就像硬盤(pán)一樣,把你機(jī)器里跟這個(gè)任務(wù)相似類(lèi)似的甚至可以直接拿過(guò)來(lái)用的那些內(nèi)容自動(dòng)打包。
當(dāng)你要做某樣?xùn)|西,你的硬盤(pán)里哪些可用的字體哪些可用的花紋哪些的可用的小圖標(biāo)自動(dòng)浮現(xiàn)在你的腦海里。
當(dāng)你要做某樣?xùn)|西,這個(gè)時(shí)候你在趕路,你在騎車(chē),你立刻就能想到哪個(gè)哪個(gè)網(wǎng)站上什么什么素材可以拿過(guò)來(lái)用。
當(dāng)你看到某個(gè)站,你可以立刻進(jìn)行引申,張口就說(shuō)出哪個(gè)哪個(gè)站跟這個(gè)結(jié)構(gòu)類(lèi)似,哪個(gè)哪個(gè)站跟這個(gè)風(fēng)格接近。。。
這幾條都能做到了,設(shè)計(jì)對(duì)你來(lái)說(shuō)還是難事么?
設(shè)計(jì),其實(shí)是一個(gè)不斷積累的過(guò)程。
*********************************************特別強(qiáng)調(diào)的分割線************************************
再?gòu)?qiáng)調(diào)一句,包含文件,可以再包含一個(gè)甚至多個(gè)包含文件........理解這句話,會(huì)讓你在做那些靜不靜動(dòng)不動(dòng)的網(wǎng)站的時(shí)候省很多力氣!
****************************************網(wǎng)站設(shè)計(jì)的根本的分割線************************************
這個(gè)話題我以后會(huì)更深入的探討。網(wǎng)頁(yè)設(shè)計(jì)的那點(diǎn)事。無(wú)非是圖文混排的那點(diǎn)事。
相關(guān)文章
15 個(gè)為編程初學(xué)者準(zhǔn)備的網(wǎng)站(都是國(guó)外的一些網(wǎng)站)
今天的文章,我們將分享15個(gè)可以學(xué)習(xí)編程的網(wǎng)站,這些網(wǎng)站上提供了很多編程教程,圖書(shū)以及編程練習(xí),希望對(duì)你有用2024-11-02web開(kāi)發(fā)中的長(zhǎng)度單位小結(jié)
這篇文章主要介紹了web開(kāi)發(fā)中的長(zhǎng)度單位主要包括px,pt,em等,需要的朋友可以參考下2023-08-06網(wǎng)頁(yè)前端開(kāi)發(fā)的一些尺寸單位(px,rem單位)
px單位是絕對(duì)單位,一般用于pc端網(wǎng)頁(yè)開(kāi)發(fā),因?yàn)槭墙^對(duì)單位所以在移動(dòng)端上的使用體驗(yàn)并不是很好,rem它是描述相對(duì)于當(dāng)前根元素字體尺寸,是相對(duì)單位,它可以根據(jù)根元素的變換而2023-08-06WEB前端優(yōu)化必備js/css壓縮工具YUI-compressor詳解與集成用法
壓縮工具層次不窮,各有優(yōu)點(diǎn),選擇適合的壓縮工具為將來(lái)做項(xiàng)目開(kāi)發(fā)使用是一件很重要的事情?。≡谶@介紹YUI-compressor,需要的朋友可以參考下2023-06-21html,css,javascript是怎樣變成頁(yè)面的
瀏覽器是多進(jìn)程的,有瀏覽器主進(jìn)程,網(wǎng)絡(luò)進(jìn)程,渲染進(jìn)程,插件進(jìn)程等,在將html,css,javascript解析成一個(gè)頁(yè)面的時(shí)候,就需要多個(gè)進(jìn)程的分工合作2023-05-01- 本文為大家整理了常用的文件對(duì)應(yīng)的MIME類(lèi)型,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別介紹
這篇文章介紹了postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-12-28網(wǎng)頁(yè)中使用Unicode字符的介紹(&#,\u等)
國(guó)際組織制定了可以容納世界上所有文字和符號(hào)的字符編碼方案,稱(chēng)為Unicode,是通用字符集Universal Character Set的縮寫(xiě),用以滿(mǎn)足跨語(yǔ)言、跨平臺(tái)進(jìn)行文本轉(zhuǎn)換、處理的要求2021-11-27前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))
這篇文章主要介紹了前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2020-12-02告別硬編碼讓你的前端表格自動(dòng)計(jì)算的實(shí)例代碼
這篇文章主要介紹了告別硬編碼讓你的前端表格自動(dòng)計(jì)算,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-27