改版面問題
改版心得: 最重要的是要有耐心, 而且一次只改一項, 改好後, 要到IE和firefox看一下改過的物件是否跟想要的相同, 若是不同, 要記得還原後再改, 不然obs總是不記得哪條改的對哪條不work.
6/15/2009
我改版的過程summary: 參考華文網部落格101
- 先選一個喜歡的版, 複製後修改。
- 每改一樣, 就要在IE和firefox看看是否跟想要的相同。
- 需要自己好用, 所以一定要放上方選單連結。好些模版沒有summary, 讓人進入後很難回到華文教師部落格的主頁。
- 試過背景音樂, 不過覺得聽多了有點煩, 所以不能一開網頁就直接放。
- 覺得不需要月曆, 所以刪掉了。
- 加寬版面, 不知道為什麼很多模版都設計的那麼窄。
- 加背景和標題圖, 無聊時就換。
- 站內搜尋一定要, 不然自己都找不到想要的。
- 加rss和bookmark, 方便取讀。
- 加最新迴響, 容易看到新的留言。
- 加google翻譯, 發現最常被用的是翻成簡體字。
- 加地圖, chat box, status是為了好玩。
- 文章彙整和我的連結太長時, 就不要放在side bar, 可以改成另網頁。
- 迴響區的格子太小時, 就找個滿意的版, 把那個版的comment抄過來用即可。
- 用firefox add-on CSS validator對改版的幫助很大, 找出錯誤也方便多了。
==========old==============
5/7/2009
Transformation from old FallingLeaves template to the current presentation.
==> 
舊: 上方是照片和名稱, 左方是主要的文章, 右方有站內搜尋, 日曆, 近期文章, 分類, 選單, 其他, 全寬度700px
新: 上方換上自選刊頭圖, 加背景和邊圖, 選單放在上方並加上網站的rss, (用網上小工具製作的橫向選單), 左方的文章區改寬度, 每篇加上點閱數 全寬度為800px, 右方刪除日曆, 選單, 其他, 加入站內搜尋, 翻譯, 近期文章, 分類加上rss, 我的連結, 在線網友, 最新迴響. 另外加上自製的favicon, 和自選的cursor.
==> 
舊: 只有刊頭圖, 文章和迴響, 沒有選單很不方便, 雖然文章區很大, 但是寫迴響的格子很小, 不喜歡.
新: 顯示出上方的選單, 比較容易到各處, 版面仍分為兩區與主頁面同, 容易看到各樣選擇, 加廣告在中間, 加點閱數, 加上下篇文章連結, 並顯示出文章名稱, 把寫迴響的格子放大, 製作一個button 圖在迴響區可以按.
5/4/2009 用同事的IE6看了抄來的menu, 很正常ㄟ. 看來自己沒法寫出covers older versions of browser code, 必須抄才行. 還好現在網上的小工具很多, 不必擔心.
5/01/2009 找到有橫向選單的css, 照抄過來使用, 不知道在ie6上看有沒有好一點。還是無法一次改很多, 只能依照原版每次小換幾樣。發現在firefox上, 那個rss的圖會和字的高度有些不同, 在ie7上則都一樣高度。
4/23/2009 學css
4/21/2009 做一個空白的buttom當背景, 放在迴響欄[發表]兩字的後面。Button上有字的話, 就會出錯。
把下面這段加在文章分類處, 就可以顯示出每樣分類的rss了. 需要找到個模版有這個功能, 就照抄。
<a href="{$url->categoryRssLink($articleCategory)}"><img src="{$url->getUrl("/imgs/rss_logo_small.gif")}" style="border:0px;" align="center" alt="RSS 0.90" /></a>
4/20/2009 又發現換了一台電腦的ie7, top menu又出錯了, 很洩氣呢! 結果加了一段沒有用的comments, 看來又好了, 真是詭異。不知道別人看是如何。
4/18/2009
把選單和rss放在上方比較容易找. 每次只能改一樣東西, 才不會出錯。 改stylesheet很花時間,放250px太大, 放200px太小, 結果是230px看來最合適, 做時還得把firefox和ie同時打開, 看看是否有變形。花了好幾個小時, refresh好多次, 才改好一樣東西。原來我的點閱數就是這樣累積來的!
4/17/2009
依照下面模版的comment, 依樣畫葫的把自己的comment區改大些, 顏色調一調. 但是弄不懂得是在'發表迴響', 在firefox上看是黑色的, 在ie上看是藍色的。把下面的 GreenSummer-Butterflys-JR模板的comment css抄過來, 改一下顏色, 就把comment區變大了.
4/16/2009
可自己下載的模版樣圖
4/15/2009
- 找到 http://juliettarose.ru/templates-lifetype 有好些美麗的模版可以免費下載. 這是一個俄文網, 不過在小花邊上,有zip檔名, 就是下載zip檔即可。
- 到個人網誌設定->新增網誌模版, 用browse選下載的zip檔後, 按新增,它就會自動上傳, 成為可以編輯的模版了。
- 在個人網誌設定->模版選項, 就可以選剛才新增的模版。
- LifeType模版可在sourceforge下載單獨版有好些版不在華文網上, 或下載目前最新的1.2.8 package, 再選自己要的上傳zip。
建議華文網的工程師把它們都放在選單上, 讓大家都可以用, 免得每個人都去下載。
4/14/2009 找了時間, 又改了一下版面, 現在比較接近我想要的版面了。
在firefox上裝了, CSS validator(add-on), 發現了我選用版面css有不少的錯誤。用了CSS validator後,就發現很多的模版裡的stylesheet都有問題, 並非只是我選用的版。換過幾個比較喜歡的新版後, 還是決定用原來自己改過的, 因為反正都要改寫的啦! 雖不是很懂, 把其指出的錯誤改正了後, 在firefox上出現的畫面比原來好得多了。
裝好CSS validator後, 看自己網頁時, 按mouse右鍵, 在選單裡, 會看到valicate css, 選了後,它就會popup另一個網頁, 告訴你所有css的錯。
4/7/2009-好事一件, bug一隻。
好事是苦惱了一陣子的版面, 今天突然它好像變好些了, 只有在firefox上看, 只有第二頁是沒有白底的。(還是有很奇怪的行為)
找到了另外一隻蟲。4/4發現佳佳老師有些links, 用firefox不能按, 留了言告知, 但是在ie中又沒問題。今天跟金慧老師討論了版面, 發現雅文老師的links也不能按, 再仔細看一下, 發現在flash下方的links都沒有問題。雅文老師改了路徑就可以按了。所以練習了甘老師的Flash動畫製作的老師們, 都會有同樣的問題。
我還沒練習, 因為沒有裝flash, 不過抓到蟲蟲一隻。(職業病)
雅文老師說, Flash的動畫漂浮在網頁上面﹐在IE裡對網頁沒有影響﹐但是在Firefox裡就顯現出遮罩效果﹐Flash下面所有的聯結和功能完全不能作用。所以﹐將Flash的高度做了修正。現在沒問題了。
4/2/2009 回佳佳老師 – 多謝佳佳老師關心又熱心的幫忙找, 我知道找這種bug很費時間的, 也許等到新版出爐後, 再請佳佳老師幫忙了。
看了佳佳老師的建議, 發現的確是少了個div, 但那是給最新迴響用的, 加在ul中了。yah… 少一個錯誤了。
LifeType template 下載區, 都是大同小異, 沒有exciting的templates. 有documents教你怎麼設計, 還沒看呢!
4/1/2009
我選的版面在ie和firefox上, 看起來不一樣, 本來以為是我改錯了什麼, 後來發現原版在ie和firefox上, 顯示不同的效果, 並不是我改的關係。
LifeType提供的版面, 我都不怎麼喜歡, 發現佳佳老師改的版面很棒, 我很喜歡, 但是自己的功力還差很多, 無法大改, 等有時間再說了吧!
old changes:
我用fallingLeaves的版, 不滿意的有:
版面太窄; 迴響區太小; 點入文章後, 文章面寬了, 但看不到menu選項, 另加在side bar上的都看不到; 顏色…..
學加了甘老師的雪花, favicon, 背景, icon, 等.
- 把版面container自700px 增加到800px, 把刊頭照片製作成800×300, 放在style.css中.
- 加寬content
- 在links.template中刪掉不要的, 例如月曆, 加上想要的, 例如: 我的連結, 地圖等.
- 留言版不顯示留言, 原來default是有留言, 要uncheck, 再re-check, 留言就會顯示了. wierd.
- 換cursors, 在body css欄加 cursor: url(http://blog2.huayuworld.org/gallery/8279/xwing.cur), default;
- 標圖
- 加背景
- 在foot.template中加甘老師的雪花.
- 檔案上傳, 音樂
- 複製模版
- 加最新迴響
Posted in Practice, System Issues, 問題與討論 by ucs with comments disabled.