• 
• 
• 
• 
• 
• 
• 

返回貼子列表		發(fā)表新貼
主題： 首次完整小型站點架構(gòu)的心得體會	共有1135人瀏覽過本貼	主貼管理 置　頂 加　精 結(jié)　貼 轉(zhuǎn)　貼

昵稱：奈薇建站網(wǎng) 論壇積分：108000 發(fā)貼等級：21 發(fā)貼數(shù)：1156 回貼數(shù)：1282 被砸雞蛋：1 獲贈鮮花：182

發(fā)表時間：2019/7/18 12:59:00 樓　主 首次完整小型站點架構(gòu)的心得體會 　　你現(xiàn)在看到的是我對近學(xué)習(xí)標(biāo)準(zhǔn)化網(wǎng)頁設(shè)計幾個月的一個測試結(jié)果。 　　這次我力爭將內(nèi)容與樣式分離及考慮到盡可能多的重用性，在圖片壓縮上也花了很大功夫，但最終因為設(shè)計稿在制作的過程中沒有考慮到的一些原因?qū)е履承﹫D片壓縮效果不夠理想。不過總體來說我自己對這次的作品還是很滿意的，還希望前輩們給我潑潑冷水。 　　以下總結(jié)一下這次項目過程中的一些心得： 　　第一，等對整體有個了解后再開始。隨說現(xiàn)在的網(wǎng)頁設(shè)計已漸漸趨向于根據(jù)內(nèi)容及結(jié)構(gòu)出發(fā)來設(shè)計頁面了，但不可否認(rèn)大部分人還是在根據(jù)設(shè)計師給我們的的psd上去實現(xiàn)的過程中。因此這次對于整個網(wǎng)站框架的設(shè)定是等了3個頁面（首頁，分類導(dǎo)讀頁，內(nèi)容頁）設(shè)計稿出來之后才開始的，這樣能在對整個網(wǎng)站有更全面些了解的基礎(chǔ)上去考慮問題。 　　第二，在對圖片進(jìn)行壓縮的過程中有些小技巧的發(fā)現(xiàn)。對于色彩使用不多，漸變較少的圖片壓縮時，可以盡量選擇png8的方式進(jìn)行導(dǎo)出，當(dāng)然在使用的顏色模式上根據(jù)具體效果進(jìn)行調(diào)整，你會發(fā)現(xiàn)文件大小會比同等效果的gif小很多。然后就是對于透明gif及png圖片的導(dǎo)出，往往會出現(xiàn)鋸齒，特別是文字，這個時候可以嘗試兩種方式：1.如果欲導(dǎo)出的圖片在要使用的地方背景是單色的或者顏色不多變，可以在導(dǎo)出的時候在雜邊處選擇和背景一樣的顏色即可，通暢會好很多。2:如果導(dǎo)出后的圖片是要用在背景色變化比較大的背景圖片上面時，你可以考慮給圖片加上一像素的陰影，這樣即可防止鋸齒的出現(xiàn)。 　　第三，對于多出使用的一些背景圖片，最好能在同一張大圖上進(jìn)行制作，然后通過background-position屬性來定位到要使用的背景位置，這樣第一可以防止鼠標(biāo)滑動效果時可能因為網(wǎng)速問題導(dǎo)致的短暫空白現(xiàn)象，第二可以很方便的對網(wǎng)頁整體效果進(jìn)行調(diào)整，只要對這張背景圖集合圖片進(jìn)行如飽和度等下調(diào)整即可改編整個網(wǎng)站的風(fēng)格，減低了改版成本。 　　第四，在對下屬無指定樣式的標(biāo)記進(jìn)行樣式設(shè)定時進(jìn)行段落縮進(jìn)。這點也可能是因為做程序員的原因，感覺這個方法能更清晰的了解整個樣式代碼。這個問題大家看看圖就會明白了。 　　div.box_top{ 　　background-position:topright; 　　padding:4px004px;} 　　div.box_toph2{ 　　background-position:topleft; 　　margin:0; 　　padding:0; 　　}div.box_inner{ 　　background-position:bottomleft; 　　margin-right:4px; 　　padding:004px4px;} 　　div.box_innerdl{ 　　border:1pxsolid#cad3e2; 　　} 　　div.box_innerdldt{ 　　position:relative; 　　background:url(../images/bg_common.png)repeat-x0-20px; 　　font-size:12px; 　　height:25px; 　　line-height:1.8em; 　　padding:010px018px; 　　color:#666; 　　} 　　div.box_innerdldtem{ 　　position:absolute; 　　top:-2px; 　　right:10px; 　　font-style:normal; 　　font-size:9px; 　　} 　　div.box_innerdldtspan{ 　　color:#c00; 　　} 　　div.box_innerdldtspana{ 　　color:#c00; 　　} 　　div.box_innerdldd{ 　　clear:both; 　　padding:8px10px5px; 　　font-size:12px; 　　} 　　是不是這樣的CSS樣式更能讓你讀懂呢，個人非常喜歡這樣的編碼習(xí)慣，雖然會損失一點點壓縮效果，但相對以后麻煩的維護(hù)工作來，不覺得“性價比”很高嗎？ 　　第五，盡量別用em進(jìn)行布局，因為各瀏覽器對標(biāo)準(zhǔn)字體大小的設(shè)置不一樣，em用戶行距什么的還是沒啥大問題的。 　　第六，給一類設(shè)置每一個頁面的body賦個ID，不論在樣式中會否用到它。這樣做的目的會讓今后對某些的特殊要求的處理簡單化，比如在首頁的時候你希望導(dǎo)航菜單的對應(yīng)按鈕標(biāo)識一下，就可以根據(jù)我給body賦的ID里來判斷這是首頁，從而在樣式中對首頁的導(dǎo)航菜單中的“首頁”進(jìn)行特別的設(shè)置，于此類推到其它欄目中的欄目菜單，這樣就省去了服務(wù)端程序的處理或者逐個的修改工作。 奈薇建站網(wǎng)致力于，讓每個中國人、每個中國企業(yè)都擁有自己的“官方網(wǎng)站”！ 回復(fù)此貼 單貼管理 修　改 刪　除 清理簽名 TOP

共0個回貼   分0頁

上一頁 / 下一頁   當(dāng)前第頁

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點地區(qū)：青島網(wǎng)站建設(shè)價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶