永和社大電腦社籌備期第十六次工作會議
2006/11/27
一.孫老師因參與社團顧問會議未能到場指導由社員自行討論
1.yahoo部落格張貼心得分享(玉娥主持)
內容在此 yahoo部落格張貼心得分享
2.Google earth.exe 的使用心得分享(老云主持)
3.討論園區網站中植物介紹網頁及溼地園區網頁的編輯(怡瑩主持)
二園區網站中植物介紹網頁編輯方式討論過程
| taco888 蔡章義 |
|
||||
圖版如>>http://tw.myblog.yahoo.com/jw!l1TpzHGGERQiiHpUKi7TDpg-/article?mid=377
玉娥
主旨： Re: 永和社大生態教育園區(版面設計)建議
請檢查看看連結正確嗎?是章義學長所想的嗎?滑鼠靠近圖片時顯示植物名稱,按下後連結至放大圖及植物說明,再按回左頁框生態園區植物介紹(二),大家集思廣益吧!
生態園區植物介紹(二)
玉娥
| taco888 蔡章義 |
|
||||
孫老師的回覆[email protected]
在一套完整的CMS裡面，主程式和模組（modules）和佈景（themes）是分開的。
這樣的好處是，程式開發者可以把開發工作拆成一個個部分，分頭進行開發，使得這個CMS的功能越來越強大。
所以，在Xoops裡面，網頁長什麼樣子，跟它的內容是兩回事，好比說老云提到的圖片的間距，它的設定是在統一的一個「style
sheet（樣式表）」裡面，而我們貼東西的時候，最好不要在我們的資料裡面加上太多的樣式，因為它很有可能會造成與網頁的樣式表不合的狀況。
尤其是如果我們的網站，想要更換theme的時候，如果每一頁的內容。都有自己的格式設定，那很可能會造成改版的困難（譬如說，你在一篇文章裡面，設定了紅色的字體，但有一天，我們想把網站的底色改成紅色的時候，這些字就不容易看到了）。
在編輯一份文件的時候，我們很容易隨著使用Word等文書編輯軟體的習慣，任意地設定網頁裡面的樣式，尤其是在像是Frontpage、Namo、Dreamweaver、NVU…等這些「所視即所得」的網頁編輯軟體裡面。我認為，在漸漸開始熟悉CMS（也包括了Yahoo、Yam這些部落格平台）之後，這樣的習慣，最好要作一些調整；否則，會使得樣式呈現與佈景產生不搭調的現象、破壞網站的整體感，更嚴重的是，這樣會讓我們在移轉和備分資料的時候顯得十分不便。
再來，我就玉娥目前編輯的這個「生態園區植物介紹<http://www.community-univ.org.tw/farm/modules/tinyd0/index.php?id=48>
」的頁面作簡單的一個說明，為什麼一些玉娥設定的樣式會沒有用：
在這個網站裡，每一頁都會去讀一個叫做style.css的檔案，這就是我前面提到的「樣式表」。所有的網頁樣式都寫在裡面，它是以一種叫做css的語法寫成的。css比起傳統html語法能夠設定的格式要多得多，目前已經成為通用的網頁格式設定語法，例如：
<font size="5">網頁文字</font>
這是傳統html語法
<font
style="font-size:15px;">網頁文字</font>
這就是css語法。
css有很容易設定一篇文章所有樣式的方法：
<head>
<style type = "text/css">
<!--
.item
{font-size:15px;}（在這裡指定了item的字體大小）
-->
</style>
</head>
<body>
<p
class="item">網頁文字</p>（這個段落的class是item，所以段落裡的文字，是15點大，而在此之後，任何一個被指定為item的html
tag，字體都會是15點大）
</body>
在上一段html原始碼裡，在<body>和</body>之間，如果有一段文字：
<font size="5">
網頁文字</font>
這個時候「網頁文字」在瀏覽器裡，會顯示為「五級字」。
但如果是：
<font size="5"
class="item"> 網頁文字</font>
這個時候，瀏覽器根本不會管你<font
size="5">這樣的設定，還是顯示為15點大。
因為css優先於傳統html的格式設定 。
css語法還有另一種應用方式，就是前面說的，可以放在另外的一個檔案裡，這個時候，要用：
<link rel="stylesheet" type="text/css" href="themes/style.css" />
這樣的一行html標籤，把樣式表放進來，把樣式表放在另外的檔案裡，是為了讓網站所有的檔案都可以放進同樣的樣式表，使得整個網站可以有同樣的樣式設定。
我拿玉娥修改的「生態園區植物介紹<http://www.community-univ.org.tw/farm/modules/tinyd0/index.php?id=48>
」作例子：
裡面有一行：
<table align="center" width="428" cellpadding="0"
cellspacing="0"
bgcolor="#FFCC99">
這是指定整張表格的樣式，其中width="428"是沒有用的，因為在整個樣式表裡面，已經設定了所有表格的寬度，都是100%，cellpadding="0"
cellspacing="0"也是沒有用的，因為樣式表已經指定了所有表格間距和表格邊界的寬度；只有bgcolor="#FFCC99"是有用的，因為樣式表並沒有設定表格的顏色。
所以玉娥在編輯器上編出來的東西，跟貼在Xoops裡面的東西，會有不同；因為有的設定有用，有的設定是沒有用的。
網頁設計有許多跟平面設計不一樣的邏輯，尤其是在「距離」的概念上。譬如，同樣在「生態園區植物介紹<http://www.community-univ.org.tw/farm/modules/tinyd0/index.php?id=48>
」老云會覺得圖片間的間距太小了，我想那是因為老云看網頁的時候螢幕的解析度比較低（譬如是800*600）的關係，請大家比對一下如果我把這個頁面分成：
左邊空間--左導覽列--中間內容--右邊空間
這四個部分加起來，左右邊空間各5%，而左導覽列是160點寬，在800*600的螢幕解析度，螢幕寬度是800點，扣掉捲軸（一般是40點），是760點，760點減去5%+5%是760-76=684點，一張小圖片的寬度是75點，如果依照
章義的圖版<http://tw.myblog.yahoo.com/jw%21l1TpzHGGERQiiHpUKi7TDpg-/article?mid=377>
一列八張圖片設計，寬度是75*8=600點，如果扣掉網頁的間距留白約40點，只剩下644點的空間，要放下600點的東西，八張圖是六個間距，在這個樣式設定下，圖片會平均排列，每個間距大概只有7點，所以會顯得擠。
但如果在1024*768的解析度下，圖片的空間多了224點，就成為268點，平均一個間距，變成44.5點，寬度也就加大了。
網頁的設計會隨著讀者電腦的解析度、瀏覽器、作業系統，而長成不一樣的樣子，依據我的觀察，目前大約有70%的瀏覽者是用1024點寬的解析度，大約15%用800點寬，而因為螢幕越來越大，1280點寬，甚至更寬的將越來越多。
以上的解釋，我想大家聽到已經差不多要昏倒，或者睡著了，不過，我想在任何的設計，最關鍵的，都是「距離」和「比例」；這一點在網頁設計上，更是一個困難的議題，「所視即所得」的網頁編輯軟體讓我們可以像在編輯平面海報一樣地編輯網頁，那很方便沒有錯，但是它也往往讓事情變得更複雜，在各種內容管理平台漸漸興起，成為架設網站主流的時候，網頁設計也漸漸朝簡單化和統一性的方向發展，畢竟，內容的生產還是更重要的。
以上，我將會在下次開會的時候，實際的操作、說明，也請大家作個參考。 窮理
玉娥
| taco888 蔡章義 |
|
||||
