今天在臉書數媒系上的社團真是愉快的和大家討論，碰到不少同好呢！
說真的，沒想到數媒系的大家都這麼讚，到時候一定會有很快樂的大學生活。

然後這邊還是依照原訂計畫寫一篇「多媒體組與遊戲組不專業分系」摟～

因為超不專業，所以就請路過高手順便指正，以面我提供不正確資訊給其他同學了！

多媒體組 – 大概就是所謂網頁設計組了！

我自己對於網頁設計接觸比較久，抑或是說對於架站部份接觸很深。
因此對於像是 HTML / CSS / JavaScript 等等都有一定程度的接觸，也對 PHP / MySQL 等有一定的撰寫能力。

臉書社團上有簡單貼過一些訊息，這部份就是做一個簡單的整理。
大多是我自己有瞭解或聽說過的知識，如果有誤就請路過的高手指正摟！

• 網頁需要注意延展性
  這和一般平面設計真的有一個很大的差異，因為我們必須隨時考慮垂直的延伸或者水平的延伸。
  當碰到這個問題時，我們不能像平面設計一樣，固定好版面，而要隨時注意背景圖的延展以及區塊的變化。
• 文字無法自由選擇
  這又是一項大問題了！如果是靜態網頁設計，為了漂亮把一些字作成圖檔還好，但是如果是現在熱門的架站機，那我們就該頭痛拉！一方面是 @font-face 還不能完美的對中文支援，下載字體時間也較英文字體久上很多，還有版權上問題。那麼有限的字體運用也是我們需要好好思考的問題。
• 使用者的可視範圍
  過去，能上網的就是電腦，螢幕解析度就是 800 * 600 亦或是 1027 * 768 但隨著時代進步，除了寬螢幕外，還有手機的 VGA / WVGA 以及電視的超大史吋，都能夠上網瀏覽網頁，那麼如何取捨佈景與對齊支援也是一大問題。
  最好還要針對不同螢幕大小設計不同的畫面，以免破壞了美感。
• 瀏覽器相容問題
  最常碰到大概就是 IE6 的相容問題，老是讓人頭痛，又不肯退休呢！
  在各家瀏覽器的核心設計上繪圖引擎不同，甚至連 JavaScript 設計也不同，那們我們就會很頭痛，因為必須用不同的方式去呼叫繪圖引擎，以及用比較特殊的方式觸發事件。
  在有統一規定之前，都得要東奔西跑去把他弄好呢！

以上是我自己常碰到的四個問題，不過我也一直不能好好解決呢！

再來，還有一些像是設計上也是很需要注意的，雖然看起來不怎麼樣，細節上也是需要很講究的！
而且繪畫和攝影能力對網頁設計影響也不小，這是我自己做這麼久的心得。

而大家真的應該要多學學 HTML5 相關的技術，像是新的 HTML 和 CSS3 跟 JavaScript 才好。
雖然 HTML5 多了一些 API 可以讓 JavaScript 做處理，不過既然要使用 JS 來處理，就意謂我們還需要有一定程度的程式撰寫能力，雖然不需要最高階，但是一定得熟悉 JS 使用以及基礎的程式。否則就會失去很多特效的使用。

而 HTML5 也會在未來佔不少優勢，先學起來也不遲呢！

參考資料
http://uedc.163.com/6675.html – HTML5粗略之淺見 （個人認為很貼切）
http://tutsplus.com/ – Tuts+ Network （在這學習設計相關知識真的很棒，資料都非常優質，不過英文文章真的得多練練才能讀下去）

遊戲組 – 就是做遊戲，但是我誠心希望大家做好遊戲

因為我自身不是對遊戲很瞭解，所以只能提供一點點淺見。不過對於過去也是有以遊戲設計師為目標過，一直到國中時期都還是保有一定程度興趣，也因為遊戲實在離不開大家身邊，因此還是希望大家努力做遊戲。看到對岸的遊戲已經如此精緻，而我們卻沒有卓越的進展，只剩下幾間公司努力，真的是十分讓人痛心的！

根據我自己蒐集的資料來看，銘傳在遊戲的培養上以「遊戲美術」為主，因此幾乎不會傳授到程式相關的知識。不過，也是因為這樣，大家只要努力，製作出精緻的遊戲畫面肯定不是難事，但是優良的程式就是一大問題了！根據之前學長姐打電話來，我向學長姐諮詢後的結果，大家可以考慮再多學資工部份的知識，來彌補這部份的缺陷。如此一來，我想在大學期間應該能做出不錯的遊戲。

參考資料
http://www.doujingame.cn/ – 中文同人遊戲 （對岸的同人遊戲情報站，可以發現對岸品質已經很高了，希望大家能一起加油！）
http://blog.monkeypotion.net/ – 猴子靈藥 （我很佩服這個網站的站長，裡面寫了很多遊戲相關的重要知識）
http://www.rpgchina.net/index.php?m=bbs – 幻想森林 （對岸算是大規模的遊戲論壇了！）

以上大略就是我對遊戲、遊戲組的認知，而且台灣也還未有比較正式的遊戲相關論壇。
如果對於架設 ACGN + W （動漫、遊戲、小說、架站）的論壇有興趣而且有目標，可以找我一起努力，我可以提供不少架站技術上的支援，而我們都是數媒系學生，我想再版面設計上能做更好，我也同時能提供網站程式開發支援。

好久沒寫的長篇文呢～～

於是就選了一天看似有點閒的日子趕緊再寫個一篇。

頁尾，大致上就是內容結束。
底下要放些版權訊息時使用的部份。

假設你打算讓整個版面都顯示側邊欄，那麼也可以把側邊欄寫在這個區段裡面。

下面為 貳夢之弦 V5 的 Footer 檔案內容。

<div id="sidebar"> <!-- 側邊攔 -->
 <div id="menu"> <!-- 選單 -->
 <?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
 </div>
 <?php get_sidebar(); ?>
 </div>
 </div>
 <div id="footer"> <!-- 頁尾 -->
 <div id="foot-ad"> <!-- 頁尾廣告 -->
 </div>
 <div id="about"> <!-- 關於站長 -->
 <div>
 <?php echo get_avatar( get_bloginfo('admin_email'), 100 ); ?>
 </div>
 <div>
 <strong><?php the_author_meta('nickname', 1); ?></strong>
 <p>
 <!-- 目前高三，是快被玩死的考生。喜愛架站、動漫、畫畫、設計、程式等。夢想是成為獨一無二的網頁設計師…… -->
 <?php the_author_meta('description', 1); ?>
 </p>
 </div>
 </div>
 <div id="copyright"> <!-- 版權 -->
 <div id="icons"> <!-- 頁尾圖示 -->
 <a href="http://blog.frost.tw" title="貳夢之弦"><img src="<?php bloginfo('template_url'); ?>/images/2ds_logo.gif" alt="貳夢之弦" /></a><a href="http://wordpress.org" title="WordPress" target="_WordPress"><img src="<?php bloginfo('template_url'); ?>/images/wordpress_logo.gif" alt="WordPress" /></a>
 </div>
 © 2010 <a href="http://blog.frost.tw" title="貳夢之弦">貳夢の弦</a>. Powered by <a href="http://wordpress.org" title="WordPress" target="_blank">WordPress</a> <?php bloginfo('version'); ?>. 2Dreams[Changing] Desigened by <a href="http://frost.tw" title="蒼時弦也" target="_blank">Aotoki</a>.
 </div>
 </div>
 </div>
 <?php
 //After Every things end, run wp_footer();
 wp_footer();

 if(is_home() || is_front_page()){
 ?>
 <script type="text/javascript">
 var $j = jQuery.noConflict();
 //Slide Show Function
 function slideSwitch()
 {
 var $active = $j('#slidebox div.slide-active');
 if ( $active.length == 0 ) $active = $j('#slidebox div.slide:last');
 var $next =  $active.next().length ? $active.next() : $j('#slidebox div.slide:first');

 $active.removeClass('slide-active').hide();
 $next.fadeIn(1000).addClass('slide-active');
 }

 $j(function() {
 setInterval( "slideSwitch()", 5000 );
 });
 </script>
 <?php
 }
 ?>
</body>
</html>

側邊欄的部份弦也是使用 get_sidebar() 來呼叫。
之後還會和大家介紹 get_header() 和 get_footer() 兩個函式。
這些都是 WordPress 用來輸出檔首、檔尾的函式。

從 貳夢之弦V5 的版面來看，可以看到下面這些東西。

1. 側邊欄
2. 選單（弦也的選單和側邊欄一組）
3. 版權資訊
4. 站長個人介紹

這些也是頁尾常見的資訊。

其中我們又會看見一個很熟悉的函式 bloginfo()
在 WordPress 版面中，關於網誌的基本資訊都可以利用他來呼叫。
如：網誌名稱、簡介、版本等等……

而在這個版面中，新出現的函式有幾組。
一個是 wp_nav_menu() 函式，用於呼叫「自訂選單」
如果你現在使用的版面支援自訂選單，那麼應該可以找到他的使用方法。
不過這方面的使用還需要在 functions.php 這個進階一點的檔案做些琢磨，因此就暫時不介紹了！

另一個函式為 the_author_meta() 函式。
Meta 是 -Press 系列網站使用的一種欄位，用來儲存各種資料。
而 the_author_meta 就是查詢某個「作者」的某項資訊。
弦也用這個方式來呼叫自己的暱稱(nickname)
因為弦也是自己撰寫網誌，所以就沒有呼叫問題，直接指定 ID 為1的作者（弦也）

如果你在某些WordPress網誌文章上看見「作者」的簡介，那就是利用這個函式產生的。

get_avatar 則是抓取頭像，我想有使用 GAvatar 的朋友應該就知道WordPress的頭像怎麼出來的。
並且使用 get_bloginfo() 函式取得站長（弦也）的信箱。
get_bloginfo() 是被 bloginfo() 呼叫的一個函式。

bloginfo() 其實就是 echo get_bloginfo() 的意思。
（程式中，輸出與傳入一個值是有差的。）

其實頁尾是一個很簡單使用的部份。
下一次就是告訴大家如何製作 index.php 這個頁面摟！
完成後，就要來介紹一些特別的函式以及運用。

寫到這邊，弦也才發現……
WordPress 的版面設計真的不難，麻煩的還是 HTML/CSS 的切版、製版阿～～

就目前情況來看，我可以先把程式放一邊。
先來準備做版面設計了（趴

今天的特色圖片就是正在製作的版面。
不過，老爸也沒告訴我這 Project 的站名呢～

我就暫時以我自己判定的「資訊」來命名吧！
也許有人會問為什麼是「入口頁」
我也不知道，不過老爸他們的想法認為這個東西有他的吸引力。
嘛，反正我不管這的。

今晚看完漫畫、動畫後，還有不少時間。
希望可以切版完成。

明天把會員系統完成後，再來把主體（頁面產生）的功能做出來。
接著是連結組的設定。

之後我想應該就沒什麼了吧（大概

看起來不多東西，後續還得再處理 Multi-Site 的部份呢（滾動
都處理好之後，我想就能上場了！

不過 Control Panel 的設計還是得要再加強。
（如果以我測試的版本，應該很多潛在用戶無法適應吧……）

呼，希望我如期完成！
（不過Codeigniter內建的jQuery功能是不是有點少阿？）

稍微區分開來，檔首切割到「內容開始」
如果你的選單在內容之前，就該到選單把內容切掉。

不過，這樣說明似乎還不是很清楚。

我們先來看一下下面這段 HTML 的區段。

<html>
<head>
<title> Title </title>
</head>
<body>
  <div id="wrap">
    <div id="header"> 我是選單 </div> <!-- 以上為頁首 -->
    <div id="container"> 我是文章 </div> <!-- 此為內容 -->
    <div id="footer"> 我是版權 </div> <!-- 之後頁尾 -->
  </div>
</body>
</html>

其實這樣說明還是不太清楚，不過弦也超懶不想話圖拉！

簡單來說，你在你的頁面畫出兩條水平線。
內容（文章、主要部份）的地方以上是頁首。
反之，以下部份是頁尾，中間則是內容。

以弦也 V5 來看 Slideshow + Logo 屬於頁首。
而 文章 + 選單 + 側欄 屬於主體（選單分類在主體，是因為他屬於側攔，側欄又是次要內容。）
剩下的部份即為「頁尾」

好吧，其實這樣說明還是非常不清楚，不過得跟上進度摟～
（其實你隨意分段都行，不過頁首、頁尾是比較不常變動內容的區段）

再來，我們參考一下貳夢  V5 的 header 部份。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
<title><?php
 //Print Title
 wp_title( '-', true, 'right' );

 //Print Site Name
 bloginfo( 'name' );

 //If in Home Page, Print Description
 $site_description = get_bloginfo( 'description', 'display' );
 if ( $site_description && ( is_home() || is_front_page() ) )
 echo " - {$site_description}";

 // Add a page number if necessary
 if ( $paged >= 2 || $page >= 2 )
 echo ' | ' . sprintf( __( 'Page %s', '2ds' ), max( $paged, $page ) );

 ?></title>
<!-- YUI 3.0 CSS Reset -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
 //Load jQuery
 wp_enqueue_script("jquery");
 //Show Head Tags
 wp_head();
?>
</head>

<body>
 <div id="wrap"> <!-- 主框架 -->
 <div id="header"> <!-- 頁首 -->
 <div id="slideshow"> <!-- Slide Show -->
 <div id="slidebox">
 <?php
 if(is_home() || is_front_page()){
 $recent_post = wp_get_recent_posts( 5 );
 foreach( $recent_post as $key => $current_post ) {
 ?>
 <div <?php echo ($key != 0) ? 'style="display:none;"' : ''; ?>>
 <a href="<?php echo get_permalink($current_post['ID']); ?>" title="<?php echo $current_post['post_title']; ?>">
 <?php
 //This must be in one loop
 if(has_post_thumbnail($current_post['ID'])) {
 echo get_the_post_thumbnail($current_post['ID'], '2ds_thumbnails');
 } else {
 echo '<img src="'.get_bloginfo("template_url").'/images/slideshow_default.jpg" alt="預設圖片" />';
 }
 ?>
 </a>
 <div>
 <h3><a href="<?php echo get_permalink($current_post['ID']); ?>" title="<?php echo $current_post['post_title']; ?>"><?php echo $current_post['post_title']; ?></a></h3>
 <div>
 <?php
 $content = explode('<!--more-->', $current_post['post_content']);
 echo cut_word($content[0], 300);
 ?>
 </div>
 </div>
 </div>
 <?php
 }
 }else{
 $current_post = wp_get_single_post();
 ?>
 <div>
 <?php
 if(has_post_thumbnail($current_post->ID)) {
 echo get_the_post_thumbnail($current_post->ID, '2ds_thumbnails');
 } else {
 echo '<img src="'.get_bloginfo("template_url").'/images/slideshow_default.jpg" alt="預設圖片" />';
 }

 if($current_post){
 ?>
 <div>
 <h3><a href="<?php echo get_permalink($current_post->ID); ?>" title="<?php echo $current_post->post_title; ?>"><?php echo $current_post->post_title; ?></a></h3>
 <div>
 <?php
 $content = explode('<!--more-->', $current_post->post_content);
 echo cut_word($content[0], 300);
 ?>
 </div>
 </div>
 <?php
 }
 ?>
 </div>
 <?php
 }
 ?>
 </div>
 </div>
 <div id="logo"> <!-- Logo -->
 <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
 <<?php echo $heading_tag; ?> id="site-title">
 <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
 <?php bloginfo( 'name' ); ?>
 </a> <!-- 網誌標題（連結） -->
 </<?php echo $heading_tag; ?>>
 <span id="site-description"><?php bloginfo( 'description' ); ?></span> <!-- 網誌說明文字 -->
 </div>
 </div>
 <div id="container"> <!-- 主體 -->

超長，對吧！

不過我們只要在這篇學會三個重點即可。

重點一 ： 顯示網誌標題。
焦點放到這段原始碼。

<title><?php
 //Print Title
 wp_title( '-', true, 'right' );

 //Print Site Name
 bloginfo( 'name' );

 //If in Home Page, Print Description
 $site_description = get_bloginfo( 'description', 'display' );
 if ( $site_description && ( is_home() || is_front_page() ) )
 echo " - {$site_description}";

 // Add a page number if necessary
 if ( $paged >= 2 || $page >= 2 )
 echo ' | ' . sprintf( __( 'Page %s', '2ds' ), max( $paged, $page ) );

 ?></title>

上面這段是由WordPress預設風格所複製過來使用的。
其中你要學會的函式，就是 bloginfo 了！
bloginof( ‘Key’ );
而這個 Key 可以在 WordPress CodeX 或者 WordPress啦！ 找到。

在標題列顯示網誌名稱只要如下動作。

<title><?php bloginfo('name'); ?></title>

當然，之後你還得為你的頁首顯示標題。
（網站標題、Logo通常都在頁首。）

重點二：輸出頁首需要的語法

前面有一段語法中包涵了 wp_head() 這個函式。
其作用會 Load 一些 CSS 進入 WordPress, 像是本站的語法高亮，就是透過這個才能實踐。
大多數的 Plugin 需要透過這個去追加 JavaScript 來使用。

使用方法很簡單，只需要在 head 之間加入。

<?php wp_head(); ?>

就算是完成了！

重點三：讀取網誌的 Style.css 文件。

現今網站都使用 CSS 排版，沒有讀取的話，版面肯定會很慘。
（這邊直接複製 WordPress 預設版面的語法，其中包涵一些WP功能相依，這部份就不用管了！）

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <!-- 引入CSS的語法 -->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

發現了嗎？
上面都是使用 bloginfo 函式去讀取喔！
bloginfo 會儲存一些基本的 WP 資訊，只需要在有需要時去呼叫即可。

最後，稍微整理一下，製成一個簡單的 WP Header 檔吧！
檔名為 header.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" /> <!-- 設定編碼（以WP為準）-->
<title><?php bloginfo('name'); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <!-- Load CSS -->
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
</head>
<body>
  <div id="wrap"> <!-- 主框架 -->
    <div id="header"> <!-- 頁首 -->
      <h1>
        <?php bloginfo('name'); ?>
        <span class="description"><?php bloginfo('description'); ?></div>
      </h1>
    </div>
    <div id="contanier">

一樣，弦也省略了宣告，還是要自己加上喔！
（這篇很明顯開始敷衍了！）

好！我們朝著簡陋的 WP 版面前進吧（喂
註：想做的精美只需要在後期自己慢慢修飾即可摟！

雖然早上睡到十點多才醒。
下午又玩小遊戲玩到兩點，不過有上次的經驗，這次速度更快了！

如果無失誤的話，我想大概在今天晚上就能完成吧！

晚上還要去看 Star Driver 呢！
得加緊腳步，不然今天肯定又會晚睡了！

經過我的製作情況，在 V5 瀏覽網誌，感覺會比 V4 更佳。
另一方面來看，在 V4 上一些讓瀏覽困難的問題都處理的差不多了！
我想，等 V5 上線後，應該會有更多人願意來拜訪。

明天是一月的最後一天，今天晚上晚餐時我也感覺到了一些新年的氣息。
而明天是什麼日子呢？
雖然和新年無關，但算是弦也另一個特別的日子！

學測和第一位網友見過面之後，明天還要再去見其他幾位網友摟！
我想，在我滿十八歲後，還會去見見更多網友吧！

到新竹時還要順便找找方眼筆記本，不然每次設計版面都畫不准（昏

那麼，繼續趕工 V5 啦！

那麼，開始吧！

版面的切版處理

這邊會簡單帶過，畢竟每個人作法不大相同。
只要有一個大方向即可。

我們的 Model – 貳夢之弦 V5 版面
（好吧，雖然V4非常精緻，不過在內文呈現真的美中不足，我整個想快點更換。）

這次弦也選用的是藍色/白色系的配色，主要還是之前說的「白底黑字」原則。
當然，其中已經做了很多針對網誌的排版調整，不過這邊是討論切版，就不多做討論了！

切版原則、說明（應該有高手更熟，下面是我的習慣）

1. 不需切下部份者不切
2. 盡可能重複利用圖片
   > 如弦也側欄的標題，皆是由藍色的長條組成（切下原因：有陰影處理）
3. 可用CSS設定者不切
   > 如版面背景是白色，僅需將頁首、頁尾切下即可
4. 避免大面積切割
   > 弦也頁首的漸層可以用圖片+背景色處理，因此不需要整片切割，只需要將圖片部份做好去背。
5. 小圖示集中處理
   > 如果有使用小圖示、或者有變化的背景（可重複利用）則切好放到同一張圖，用CSS對位即可

切版還要依照你的版面架構來做調整。
（如貳夢之弦 V4 是背景寬度隨頁面切換，因此都只集中切中央部份。）

切版完成後，不一定要馬上存檔，可以在建立架構時再決定是否做微調。

確立架構
每種版面的架構並不會完全相同，就 V5 和 V4 的比較來看。
V5 是由一個 Wrap 圖層包裹，而 V4 則是沒有 Wrap 圖層包裹。
（差異在 V5 背景只有上半部，而V4背景圖較多，切版下來後無法統一呈現。）

弦也的 V5 預定架構（註：其實還要加上 XHTML 宣告，不過弦也跳過了！）

<html>
<head>
<title>網頁名稱</title>
<!-- JS, CSS, Meta 資訊區塊 -->
</head>
<body>
  <div id="wrap"> <!-- 主框架 -->
    <div id="header"> <!--頁首 -->
      <div id="sideshow"> <!-- Sideshow 區域 -->
      </div>
      <div id="logo"> <!-- 網站 Logo -->
      </div>
    </div>
    <div id="container"> <!-- 主體 -->
      <div id="content"> <!-- 內容區 -->
      </div>
      <div id="menu"> <!-- 選單 -->
      </div>
      <div id="sidebar"> <!-- 側欄 -->
      </div>
    </div>
    <div id="footer"> <!-- 頁尾 -->
      <div id="ad"> <!-- 頁尾廣告區 --> </div>
      <div id="copyright"> <!-- 版權宣告 --> </div>
      <div id="aboutme"> <!-- 關於我 --> </div>
    </div>
  </div>
</body>
</html>

設計時可以加上註解，增加之後修改的方便性。

圖層的配置以「由上到下」並且「由左到右」的原則排列。
這樣一來，就可以避免事後移動位子的問題。
註：如果像是 V4 頁底有特別的錯位，這個排列就可以減少錯位時移動像素數的計算複雜度。

到了這裡，我想應該已經花上五、六個小時在製作了！
（如果你很用心的設計版面、切割版面）
不過，接下來可能還有長達數十小時的細部處理。

後面的文章會分別從 header.php, index.php, footer.php 等檔案做介紹。
當你的 Theme 架構檔案越多，你的 WP 版面功能就越強。
（因為如果沒有該檔案，那麼WP就會找 index.php 或預設版模來替代，你能做的變化就會減少。）

那麼，下次再見摟！

雖然自己目前功力還不到家，不過能做出版面就算是不錯了！
尤其是有蠻多網友想做，卻不知道怎麼下手。
如果是這樣的話，可以先參考這篇的內容看看。

工欲善其事，必先利其器。
所以，在開始製作之前，我們得先準備好各種武器。

1. Google 搜尋引擎
   在你不知道該如何進行時，隨時都是你最好的幫手。
2. WordPress 啦！
   對岸的 WordPress 資源站，其最大幫助就是將 WP 官方的 Codex Docs 大量翻譯。
3. 一個好用的編輯器
   弦也愛用 Dreamweaver 和 Notepad++, 而你要用 NetBeans 都可，但是一定要你善用。
4. 優質的繪圖軟體
   要說的話，大概就是能讓你做設計的軟體。如 PhotoShop, Fireworks, Illustarator 等……
5. 各種瀏覽器
   FireFox, Chrome, IE7+ 這幾款主流，都要備好來測試。
6. 標記語言、程式語言的工具書
   如果你已經精通，那麼就沒有這個必要。不然，最好有 HTML, CSS, PHP 的參考書幫助你。
7. jQuery 的資料
   如果你想和弦也一樣做個簡單的 Slideshow, 或者其他特效，建議你使用 jQuery 輔助。
8. Web Server 或 *AMP 環境
   不論你用虛擬主機，或者像弦也搞個 LAMP 環境，還是用 WAMP 環境都行。
9. 其他
   如果你想在這個網誌版面上用上什麼，別忘記帶上！像是相片、色票等等

當這些備齊後，我們就可以開始摟！

不過，因為這篇只介紹工具，所以只能很唬爛的說明下去。

Google
再講下去也是廢話，一有不會馬上 Google it!
（弦也的 Slideshow 也是靠 Google 讀程式碼改出來的！）

WordPress La!
不用說你也知道，看中文絕對比看英文簡單。
雖然沒有完整的翻譯，但也好歹有個 70% 左右。
當你想像弦也一樣做個 Slideshow 或者 特殊的分類排版，那你就不能再繼續用預設的產生文章方式了！
（如弦也的 Slideshow 就是另外用程式碼產生，而非預設的方式。）

好用的編輯器
唔，這個其實攸關效率阿！
當你用著 Dreamewaver CS5 的時候，你會知道你大多數的 PHP 錯誤。
使用 Notepad++ 時，你可以很清楚的區分保留字、變數。
這對於製作版面這種費力的任務，有很大的幫助。

優質的繪圖軟體
即便你想走簡潔風，或者 CSS3 大師秀，你還是會需要他的幫助。
除非你百分之百不使用任何圖片元素在你的版面上。
Photoshop – 適合現代感的網頁設計（預設的功能上，比較適合）
Illustrator – 適合向量風格的設計（因為本身就是向量軟體阿！如果你擅長剪影，那麼成品會很美的！）
Fireworks – 本身就是做網頁設計的軟體，結合 PS 和 Ill 的特色。
其他還有什麼軟體，就看各位的私藏摟！

各種瀏覽器
先不論你偏好哪個，身為設計者，你必須先考慮你的讀者（訪客）
因此，一定要有足夠的測試確認各版本的瀏覽器都能正常使用。
假使你和弦也一樣認為 IE6 已經不合時宜，那也可以不用準備。
（但你得確保你的訪客幾乎不會使用IE6以及版面勉強可以閱讀。）

標記語言、程式語言的工具書
唔，如果你是第一次做，而且沒有足夠的 HTML, CSS, PHP 經驗，那麼最好備著。
弦也自己也有一本 CSS 手冊，不過因為已經很熟了，所以也沒什麼在使用。
（如果 PHP 不熟，也沒有版面上的特殊需求，可以跳過。）

jQuery 的資料
在省力方面，選用 jQuery 做特效真是個明智的選擇。
而且他也有 CDN (Google Code) 支援，以及 WordPress 內建。
就各方面來看，他會協助你在版面製作上很多。

網站環境
如果你已經有 WordPress 了，還是建議在本機測試後在上傳使用。
Windows 環境下可以選用 Appserv, XAMPP 等軟體。
在 Linux 環境，使用指令安裝 Apach, PHP, MySQL 即可。
（不過 Linux 環境得稍微注意檔案權限的問題。）

其他
像弦也的版面，就用到蠻多額外的元素。
如 Slideshow 預設圖，就是網路上的圖片素材。
Logo 上的字體、頁底的裝飾等等，都是網路素材。

當然，弦也還使用到了 Yahoo 的 CSS Reset 語法。
（非常建議使用 CSS Reset, 他會幫助你在各瀏覽器顯示的更齊一、優良。）

很好，一篇文章唬爛到此結束！
學測考完後雖然時間不多，不過弦也仍會繼續找時間把這套教學做完。
（網路上有很多大大都有很高超的教學，看我的最好參考其他大大的教學一起學習吧！）

不過也有打到折拉！
一本是新書，照原打折比例 75 折，另一本原本九折變 75 折也算是賺到了！

首先來看看比較舊的這本。
Web + Visual Design 主要就是在講網頁、視覺上的設計。

因為弦也在學校不是先看這本，所以不能給大家太多介紹。
不過，弦也到是很欣賞其 ICON 設計相關的作品。

這本大概比較偏向作品欣賞，隨手翻翻之後發現是有不少靈感的元素在其中喔！

另一本「輕鬆玩出網頁視覺大格局」這本就是推薦必敗之書拉！

弦也一開始看，馬上就得到啟發。
（註：其第一章第一節為網誌設計類，也明確的說明網誌版面設計重點。）

此時，剛好網誌新版面才設計完成。
弦也依照重點回顧檢視自己的版面後，很快就發現缺點了！

而其挑選出的最品味必全然符合弦也胃口，但是每種人的胃口大多都有符合。
而每一個作品也是能激發靈感的作品。

當弦也在博客來看內頁介紹時，我馬上就決定要這本。
因為他真的「非常棒」

書以不同主題作為分章。
「網站類型」、「網站風格」、「網站裝飾」、「網站配色」
分為四大章節，美一張節都有非常優秀而且能激發靈感的作品。
弦也認為當作參考書，抑或是訓練書都非常棒。

希望大家也可以買來看看，非常值得。

不過，後面還有很多挑戰要對抗吧！
如：是否適合閱讀、設計和實際美觀上的差異、設計缺失等等……

我想，白底黑字真的會比較適合閱讀。

不過，目前的弦也還不夠能力設計更好的版面。
光是這個設計，從打版型到製作出成品，就花上了約十二小時。
也許大家聽起來不長，不過這也還只是「不完美版本」的時間。

弦也想，這個版面如果真的要完成，至少還要好幾天吧！

伴隨這次改版，網誌的名稱也改動了！
其中，算是有一些小故事。

當然，大家也別忘記去注意一下「關於」這個分頁。
因為弦也偷偷地更新摟！

為什麼會叫做「貳夢」呢？
其一是取其諧音「惡夢」
再來，就是弦也想表現的一些心情和感覺摟！

沒記錯，那時候還不太能調是高三面臨考試的壓力。
當然，即使我在怎麼能夠適應，也總得需要調適。
而我所追求的設計，倒是有點瓶頸。

想了很多次版面，也還是沒有一個所以然。
此時，剛好接觸到剪影的呈現風格。
我就有了一個「用夢一般」的方式呈現版面吧！

於是，「貳夢」就這樣產生了！

雖然這次的版面其實沒有很強烈的「夢」或者「惡夢」的感覺。
不過，倒是讓人感覺蠻穩定的。

也許下次我該挑戰更強烈的感覺吧！
白底黑字，下次的目標。
（大概，又會是半年之後……）

如果情況良好，也許明天寫網誌之前就能開始啟用了吧！
不過，現在我們先來看看設計圖過過乾癮……

我想，成品和原圖多少會有差異的！
（在繪圖軟體裡面呈現的總是會比較好看些……）

總之，我們先來看看吧！

整體來看，是個非常精緻的版面呢！

不過，距離完成還有很長的一段路。
雖然弦也不是第一次製作WordPress版面了！

不過這次不但需求多，也有許多設定要做處理。
相較以往的製作，這次真的費時耗力。

目前預定的版本號為 1.0 版。
之後會隨著HTML, CSS, WordPress 發展而持續的修改。
我想是一個會用上好一陣子的網誌版面。

最快是預定明天就能上線使用。
最慢，也許要學測考完了！
明天還得把兩個東西做好處理，不然時間會有點不足。

接下來就是寒假，也要去做老爸的 Project, 不是那麼輕鬆。
只能稱現在這僅存的空閒時間，去努力摟！