目前分類：資訊 軟體 (4)

瀏覽方式： 標題列表 簡短摘要


在PIXNET上一段時日了，
一直覺得這兒版面CSS的教學資料，
官方所提供的實在是少得可憐。
最近又想要改東改西，
官方網站遍尋不著之下，
利用GOOGLE大神找到了下面二篇。
寫得相當的用心。
本文引用自 repeat - pixnet blog css 解析 (grey2)

這位大大圖文並茂的說明了這個模板，
(因為圖多，就請自行前往觀看)



而位大大也十足用心的整理了所有的class &ID 的parent element
摘錄如下(以下由http://blog.pixnet.net/give/post/11440765 引用)：

* #Container {}
 *
 * #Container #Top {}
 * #Container #Top #BlogHeader {}
 * #Container #Top #BlogDescr {}
 *
 * #Container #Main {}
 * #Container #Main #Sidebar {}
 * #Container #Main #Sidebar .SidebarHeader {}
 * #Container #Main #Sidebar .Sideblock {}
 * #Container #Main #Sidebar .Sideblock .Sidetitle {}
 * #Container #Main #Sidebar .Sideblock .Sidetitle h4 {}
 * #Container #Main #Sidebar .Sideblock .Sidebody {}
 * #Container #Main #Sidebar .Sideblock .Sidebody .isLock {}
 * #Container #Main #Sidebar .Sideblock .Sidebody .isLock img {}
 * #Container #Main #Sidebar .Sideblock .Sidebody .userImg {}
 * #Container #Main #Sidebar .Sideblock .Sidebody .userLink {}
 * #Container #Main #Sidebar .Sideblock .Sidebody #userBlog {}
 * #Container #Main #Sidebar .Sideblock .Sidebody #userAlbum {}
 * #Container #Main #Sidebar .Sideblock .Sidebody #userGuestBook {}
 * #Container #Main #Sidebar .Sideblock .Sidebody #userProfile {}
 * #Container #Main #Sidebar .Sideblock .Sidebody #adminConsole {}
 * #Container #Main #Sidebar .Sideblock .Sidebody #CategoryPlugin a {}
 * #Container #Main #Sidebar .Sideblock .Sidebody .nodecoration {}
 * #Container #Main #Sidebar .Sideblock .SideBottom {}
 * #Container #Main #Sidebar #CalendarPlugin {}
 * #Container #Main #Sidebar #LatestArt {}
 * #Container #Main #Sidebar #LatestComments {}
 * #Container #Main #Sidebar #LatestTrackbacks {}
 * #Container #Main #Sidebar #userBlock {}
 * #Container #Main #Sidebar #ArchivePlugin {}
 * #Container #Main #Sidebar #CategoryPlugin {}
 * #Container #Main #Sidebar #LinksPlugin {}
 * #Container #Main #Sidebar #FavoritePlugin {}
 * #Container #Main #Sidebar #PageviewPlugin {}
 * #Container #Main #Sidebar #RSSPlugin {}
 * #Container #Main #Sidebar .SidebarFooter {}
 *
 * #Container #Main #Content {}
 * #Container #Main #Content .mainEntry {}
 * #Container #Main #Content .mainEntry .mainEntryTitle {}
 * #Container #Main #Content .mainEntry .mainEntryTitle h3 {}
 * #Container #Main #Content .mainEntry .mainEntryTitle h3 a {}
 * #Container #Main #Content .mainEntry .mainEntryBody {}
 * #Container #Main #Content .mainEntry .mainEntryBody a {}
 * #Container #Main #Content .mainEntry .mainEntryBody .date {}
 * #Container #Main #Content .mainEntry .mainEntryBody .mainEntryBase {}
 * #Container #Main #Content .mainEntry .mainEntryBody .extended {}
 * #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot {}
 * #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot a {}
 * #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot a:hover {}
 * #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot p {}
 * #Container #Main #Content .mainEntry .mainEntryBody .mainEntryfoot .trackback_url {}
 * #Container #Main #Content .mainEntry .mainEntryBottom {}
 * #Container #Main #Content .mainEntry .mainEntryBottom .ptop {
 * #Container #Main #Content #Comments {}
 * #Container #Main #Content #Comments .commentTitle {}
 * #Container #Main #Content #Comments .commentTitle a {}
 * #Container #Main #Content #Comments .commentBody {}
 * #Container #Main #Content #Comments .commentBody .CommentInnerBox {}
 * #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentheader {}
 * #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentcontent {}
 * #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentcontent replyBox {}
 * #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentcontent replyBox replyContent {}
 * #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentcontent replyBox replyInfo {}
 * #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentposterinfo {}
 * #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentposterinfo br {}
 * #Container #Main #Content #Comments .commentBody .CommentInnerBox .commentposterinfo img {}
 * #Container #Main #Content .listall_msg {}
 * #Container #Main #Content .listall_pagelist {}
 * #Container #Main #Content .listall_date {}
 * #Container #Main #Content .listall_title {}
 *
 * #Container #pagefooter {}
 * #Container #pagefooter #Bottom {}
 * #Container #pagefooter #Bottom .style1 {}
 * #Container #pagefooter #Bottommenu {}


而我就依上面畫了個階層的圖。


這樣就比清楚了些。...

tsmt 發表在 痞客邦 留言(0) 人氣()

▲top



書中所提並非一般書籍教讀者如何使用軟體，
而是提出一些概念性的說法讓讀者去思考網頁設計這件事。

以下就簡略作些自以為是的note：
(note1)web檔案(html)命名重點：

(1)、全部使用英文小寫字母。
(2)、只使用字母或數字。
(3)、可以使用的符號：( _ )、( -)、( ~ )、( . )。
(4)、不可以有空格。
(5)、檔名必須是.htm(pc)或.html(mac)結尾。
(6)、圖檔使用正確的副檔名：
        ● photoshop用.psd
        ● TIFF用.tif
        ● GIF用.gif
        ● JPEG用.jpg
(7)、檔名盡量的簡短。
(note2) 內容永保新鮮。
  • 在首頁用容易察生得設計變更是文案更新。
  • 在首頁上放罝修是時間的簽章。
(note3)重視網站下載速度。

太多的設計師以為其他人都有一個大螢幕、一個高速的CPU、及寬頻。
(note4)設計的基本法則
  • 檢查對齊：
    • 選定基準
    • 隱藏表格框線，利用對齊表達出分格的效果。
    • 步驟：
      1. 選定一種對齊方式。
      2. 把所有元件自網頁最左移開。
      3. (英)大標題不要全用大寫，不易閱讀。
      4. 如果還是需要使用全部大寫，別併用斜體。
      5. 計數器等慎選放置位置。
  • 組合相近：
    • 用換行<br>取代段落<p>，可免文字間出現太寬的間隔。
  • 建立重複
  • 建立對比
(note5)對應800*600以內的螢幕

設計師不要只以自己的設備來考量網頁設計，
不是每個人都有22吋的寬螢幕，
2M以上的寬頻。
從最低的設備標準來考量，
讓上網瀏覽的人可以輕鬆的用既有的設備來看網站。

tsmt 發表在 痞客邦 留言(0) 人氣()

▲top
申請加入feedburn及sitemeter

雖然沒有什麼流量，
但還是在好奇心及虛榮心的驅使用下，
申請安裝使用。
(1)sitemeter：http://www.sitemeter.com/
功能覺得和google analystics相仿。
可以了解有多少人來，有多少網頁被瀏覽，也可以了解有誰從那裡來。
也有和google analystics相同的地圖界面。
(由97.1.24開始計算)


Site Meter





(2)feedburner：http://www.feedburner.com/
主要申請E-mail訂閱RSS的服務。
也可以炫耀有多少人訂閱。

->這裡有教怎麼申請：http://blog.mashow.tw/archives/121
->也有教怎麼把訂閱人數放進來：http://blog.mashow.tw/archives/126
(以上二個連結均來自馬修研究部落格：http://blog.mashow.tw/ )

Enter your email address:

Delivered by FeedBurner

tsmt 發表在 痞客邦 留言(0) 人氣()

▲top


因要房子裝修的關係，
原本只是用autocad在畫裝修的圖面，
但是在一些地方平面圖表達還是受到相當大的侷限。

所以一直在找合適的軟體來繪製，
但是大部份都是專業軟體，
一方面很貴，
另一方面很難上手。

後來看到google買了sketchup(以下簡稱SU)這個軟體，
通常他買的東西，幾乎就是品質保證。
而且有免費的版本喔!!
http://sketchup.google.com/
就去下載來看，發現，哇!!

看完簡介之後上手大約三天，另人相當驚艷的軟體。
我有些歐特克公司軟體的使用經驗。
autocad ver.r14到ver.2004
revit 6、8、9
是二種完全不同的使用歷程。

SU用極少的指命，來完成相常複雜的3D建立模型的工作。
常用的指命在10個以下，
樸實而不花梢。
就像金庸筆下的郭靖使的降龍18掌，就只有18掌。
而他更少，
至少比起AUTOCAD要熟悉50個左右指令才能稱得上是上手
他的學習曲線是令人滿意的。

這樣的比法或許是不倫不類的，
畢竟是二種不同取向的軟體。

另外一點是，
網站上提供大量的學習影音檔，是相當另人激賞的，
加上網路上有大量的討論區，
尤其是對岸，許多學習上的問題都有解決的方案，
至少在學習的過程中是讓人不覺得有障礙。
值得讓人推薦!


tsmt 發表在 痞客邦 留言(0) 人氣()

▲top