清早醒來看到某位先生的來信,睡眼還惺忪,大略看了一下,以為是詢問如何將文帖分成數列。我當時還理所當然地想著「既然寫過變成兩列的,數列不就照本宣科嗎?」後來去洗把臉出來一瞧,哎呀!原來是讓我剖析如何把網誌弄成某個網站的模樣。
當然了,讓我把手把腳的教是不可能,那樣還不如付錢去請網頁設計師來弄,我也只能用說的紙上談兵啦──因為我懶(被毆)本來想著私信大略跟他說一說就好了,但是他問我「分享」,那就順道寫成一篇唄!
避免版權問題,所以我臨時用PS弄出一張簡易的架構圖來用。
網站結構如左◄,分成四大部份。
當然了,讓我把手把腳的教是不可能,那樣還不如付錢去請網頁設計師來弄,我也只能用說的紙上談兵啦──因為我懶(被毆)本來想著私信大略跟他說一說就好了,但是他問我「分享」,那就順道寫成一篇唄!
避免版權問題,所以我臨時用PS弄出一張簡易的架構圖來用。
網站結構如左◄,分成四大部份。
➊固定式貼頭橫幅
CSS關鍵在位置控制項(position)上,區塊(div)1要設成固定(position: fix; ),這樣才會不受捲軸移動影響位置。 網站圖樣、搜尋列和下拉式選單則是設定大小和定位 float: left or right的問題了。至於如何做出下拉式選單(這個滿奇怪的,字面理解我認為滑出式較貼切,但要找資料的話打下拉式比較多。),原理為當游標滑上去的時候顯示(bar:hover{ display: block;}),平時設定不顯示(display: none;)
不想花費時間研究的話直接參閱:WFU - Blogger 多層下拉選單實作
不想花費時間研究的話直接參閱:WFU - Blogger 多層下拉選單實作
➋圖片輪播選單
常見於各大網路媒體網站首頁,近年來工作室、部落格亦風行。
因為我嫌佔空間很礙眼,沒用就沒去研究,所以只能給答案無法說為什麼。請參閱:WFU - 最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包
因為我嫌佔空間很礙眼,沒用就沒去研究,所以只能給答案無法說為什麼。請參閱:WFU - 最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包
➌格狀/便利貼式文帖
原理和我寫的這篇實作探討將首頁單欄文章變成多欄大同小異,假設你一排要放四個,總共要放兩排,一面共八個文帖,在後台設定一面顯示八,包覆文帖的區塊則設定文帖寬度×4加上間隔(margin、padding)。因為只是設定在首頁和分頁顯示,所以條件式記得先下,詳細作法一樣參見本段第一行的連結。
另外,想讓各個文帖內顯示【圖】+【說明】+【繼續閱讀】的話,【圖】的部份有兩種作法,一種比較佔資源,即每一篇都要製作一張縮圖,然後點進內頁時隱藏;另一種則是內頁圖片大小一致,下首頁條件式,在式中設定圖片在首頁/分頁格狀文帖中縮小。如果圖片大小不一,首頁縮小的大小也就不一,看起來會很凌亂。
至於【說明】沒什麼,避開圖片設內外距的情形,段落自然會貼在圖下,至於顯示多少中斷,看【繼續閱讀】插在哪裡。當然了,也可以用另一種作法,先給這段文字區塊命個名,在首頁條件式中指定它的寬高,我覺得前者比較省事。
在網誌首頁【繼續閱讀】雖然很方便,但Google blogger 的此項功能卻讓我嫌不方便,點進去是從中而不是從頭往下讀,我比較習慣點進去從頭看起。要固定【繼續閱讀】在首頁/分頁格狀文帖的位置,利用位置控制項(position),設成雖然位置固定但會受捲軸影響,跟著自然捲動的效果(position: absolute; )。
另外,想讓各個文帖內顯示【圖】+【說明】+【繼續閱讀】的話,【圖】的部份有兩種作法,一種比較佔資源,即每一篇都要製作一張縮圖,然後點進內頁時隱藏;另一種則是內頁圖片大小一致,下首頁條件式,在式中設定圖片在首頁/分頁格狀文帖中縮小。如果圖片大小不一,首頁縮小的大小也就不一,看起來會很凌亂。
至於【說明】沒什麼,避開圖片設內外距的情形,段落自然會貼在圖下,至於顯示多少中斷,看【繼續閱讀】插在哪裡。當然了,也可以用另一種作法,先給這段文字區塊命個名,在首頁條件式中指定它的寬高,我覺得前者比較省事。
在網誌首頁【繼續閱讀】雖然很方便,但Google blogger 的此項功能卻讓我嫌不方便,點進去是從中而不是從頭往下讀,我比較習慣點進去從頭看起。要固定【繼續閱讀】在首頁/分頁格狀文帖的位置,利用位置控制項(position),設成雖然位置固定但會受捲軸影響,跟著自然捲動的效果(position: absolute; )。
➍置底清單
這個好像沒什麼好說。
以上,就是這樣,俺出門了。
PS.(摸下巴)沒有惡意的提醒:如果要做和商業掛勾的網誌,千萬別用別人的圖,涉及牟利即違法。
太感謝您了!
回覆刪除不客氣。
刪除不過,在信裡面我能說的都說完了,再下去我也沒轍囉XD
你加油吧!