貳夢の弦 » 網站專案 http://blog.frost.tw 夢醒之時，驚覺一切都是虛幻。前行吧！迷途者。 Wed, 26 Oct 2011 13:28:00 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 WordPress 購物車製作筆記(1) http://blog.frost.tw/web-project/poston-2011-03-27/postid-1144 http://blog.frost.tw/web-project/poston-2011-03-27/postid-1144#comments Sun, 27 Mar 2011 11:18:54 +0000 蒼時弦や http://blog.frost.tw/?p=1144 似乎已經很久沒有寫網誌了～
最近和備審、面試對抗，難得抽出時間來寫。
（直到上週都是備審，之後又是個面試大戰呢！）

弦也運氣不錯，申請六所上四所。
（沒上那兩所也是差了一點點就上了，大約1~2級分左右。）

這次會做主要是因為我大學的伙食費阿（誤

主要還是寒假那個老爸的 Project 拉！
不過使用WordPress如有神助呢！

至少到現在，都還沒有自己寫過GUI控制（增加Meta Box算是簡單的加上吧……）
其餘的，大多是使用Custom Post Type就完成了！

就這方面來看，使用WordPress這個決定真是太正確了！

目前商品的設定項都差不多了，接下來就是比較進階的訂單和金流的處理摟！
（期待我完成的那天，因為可以開始領傳說中的維護費……）

休息一下就來繼續製作～

]]> http://blog.frost.tw/web-project/poston-2011-03-27/postid-1144/feed 1 弦也式 WP 版面製作之三 – Footer 檔尾 http://blog.frost.tw/web-project/poston-2011-02-17/postid-1114 http://blog.frost.tw/web-project/poston-2011-02-17/postid-1114#comments Thu, 17 Feb 2011 11:12:03 +0000 蒼時弦や http://blog.frost.tw/?p=1114 Continue reading →]]> 距離上次的文章不知道又過了多久。
我才想起來，我竟然忘記寫後續了啦！

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

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

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

下面為 貳夢之弦 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 的切版、製版阿～～

]]> http://blog.frost.tw/web-project/poston-2011-02-17/postid-1114/feed 0 寒假結束前夕的趕工 http://blog.frost.tw/web-project/poston-2011-02-08/postid-1080 http://blog.frost.tw/web-project/poston-2011-02-08/postid-1080#comments Tue, 08 Feb 2011 11:17:09 +0000 蒼時弦や http://blog.frost.tw/?p=1080 寒假時間不多了！
不知道我是否能夠如期完成網站呢～

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

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

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

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

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

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

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

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

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

]]> http://blog.frost.tw/web-project/poston-2011-02-08/postid-1080/feed 0 弦也式 WP 版面製作之二 – Header 檔首 http://blog.frost.tw/web-project/poston-2011-02-02/postid-992 http://blog.frost.tw/web-project/poston-2011-02-02/postid-992#comments Wed, 02 Feb 2011 11:50:02 +0000 蒼時弦や http://blog.frost.tw/?p=992 Continue reading →]]> 現今的網站，已經鮮少有一頁一頁製作的情況。
現在的「動態網頁」大多會 Load 三個部份。
檔首、內容、頁尾。

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

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

我們先來看一下下面這段 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 版面前進吧（喂
註：想做的精美只需要在後期自己慢慢修飾即可摟！

]]> http://blog.frost.tw/web-project/poston-2011-02-02/postid-992/feed 0 弦也式 WP 版面製作之二 – 切版與架構篇 http://blog.frost.tw/web-project/poston-2011-01-26/postid-974 http://blog.frost.tw/web-project/poston-2011-01-26/postid-974#comments Wed, 26 Jan 2011 11:13:27 +0000 蒼時弦や http://blog.frost.tw/?p=974 Continue reading →]]> 今天再來一篇～
明天就要學測了，不過一點都不緊張（苦笑
唯一擔心的是能不能在八點左右去睡覺（喂

那麼，開始吧！

版面的切版處理

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

我們的 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 或預設版模來替代，你能做的變化就會減少。）

那麼，下次再見摟！

]]> http://blog.frost.tw/web-project/poston-2011-01-26/postid-974/feed 6 弦也式 WP 版面製作之一 – 工具篇 http://blog.frost.tw/web-project/poston-2011-01-25/postid-972 http://blog.frost.tw/web-project/poston-2011-01-25/postid-972#comments Tue, 25 Jan 2011 11:42:40 +0000 蒼時弦や http://blog.frost.tw/?p=972 Continue reading →]]> 前幾天換了新版面後，感覺自己差不多能掌握 WordPress 版面設計的要點了！
想一想，其實WordPress版面還能做很多變化。
不分享出來，就覺得心裡怪怪的。

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

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

  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, 他會幫助你在各瀏覽器顯示的更齊一、優良。）

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

http://www.wordpress.la/

]]> http://blog.frost.tw/web-project/poston-2011-01-25/postid-972/feed 7 Fate of Eternity 的版面設計 http://blog.frost.tw/web-project/poston-2010-08-09/postid-629 http://blog.frost.tw/web-project/poston-2010-08-09/postid-629#comments Mon, 09 Aug 2010 10:48:15 +0000 蒼時弦や http://blog.frost.tw/?p=629 前幾天和另外兩位創始者討論了論壇的必要性。
後來發現，論壇似乎打亂了我們很多計畫。
因此決定重製網站，不過論壇採取疏散政策（待考量，基本上是推薦會員至幾個推薦的網站活動。）

首先，要來看看某弦的作品摟！
這個作品主要是參考 WSQ 大大的版面設計所做的。
（這次靈感來源大概就是 WSQ 大大吧！那種風格我真的很喜歡。）

版面設計#終版

其實版面有修改過幾次，主要是 Logo 上的背景圖。
（最後決定採取去除的方式，這點看起來較佳。）

之後應該會抽空製成 WordPress 的版面。
結構上採取參考 WSQ 大大的方式，即是網站混合WordPress的作法。
（簡單說，網誌只是其中一個頁面。）

最後，就是要期待最後的暑假摟！
（我的編曲軟體老是裝不成功，這樣我要怎麼弄社團光碟呢？有些音效自己做還是比較好呢～～）

]]> http://blog.frost.tw/web-project/poston-2010-08-09/postid-629/feed 4 Fly Angain 入口頁設計 http://blog.frost.tw/web-project/poston-2010-04-29/postid-513 http://blog.frost.tw/web-project/poston-2010-04-29/postid-513#comments Thu, 29 Apr 2010 10:53:25 +0000 蒼時弦や http://blog.frost.tw/?p=513 其實這是先前加入的同人社團一個Project的入口頁。
不過詳細，我不能公佈太多。
畢竟網站以後會公佈，所以就先把入口頁面（暫定）給大家看看～
而 Fly Angain 是否會繼續使用，我就不清楚了！

這次的設計是使用四種顏色來象徵四個季節。
（其實這樣做法我是在聊天時，意外閃過的！）

Enter-Page.png

Enter-Page.png

因為是走「極簡風」所以我盡可能讓畫面變得乾淨。

而較大的圓，則是我在想如何產生律動感。
（之前書上看到是利用翻轉和大小變化，因為我沒辦法翻轉，所以只採用放大。）

說真的，有時候這類東西其實很需要思考。
就像我現在，還在思考如何設計內頁，才能配上這樣的入口畫面呢！
設計，真的沒有我想像的單純。

也許我該多研究些，畢竟我的路還很長！
這個網站是關於什麼的呢？
這邊小小透露，是關於「音樂」的網站喔！

裡面有四個虛擬角色，並由四個人提供聲音。
我想，大家應該清楚網站大概試作什麼的吧！
（而網站其實也很快就會登場，大概是最近就會有東西可以「聽」到喔！）

那麼，請期待！
（網站可是會變化的，別忘記時常上去晃晃！）

]]> http://blog.frost.tw/web-project/poston-2010-04-29/postid-513/feed 0 瑪奇公會網站製作筆記（二） http://blog.frost.tw/web-project/poston-2010-04-10/postid-485 http://blog.frost.tw/web-project/poston-2010-04-10/postid-485#comments Sat, 10 Apr 2010 10:51:59 +0000 蒼時弦や http://blog.frost.tw/?p=485 昨天很混的說完網站之後，就真的跑去混了！
不過今天不同，今天會「乖乖」的把 System 做出來喔～
目前內頁已經切好，準備成型了！

今天要做什麼，大致上和大家報備一下（？

1. 撰寫公會日誌功能
2. 撰寫訪客留言功能

其實就這樣，整個很「普通」

系統是採用之前參考 Goolog 的製作方式，也就是單檔案儲存。
雖然挺想學「晉級留言板」製作升級功能，不過總覺得麻煩（汗

公會日誌製作完畢後，是否加入 RSS 功能還要等我考慮（掩面
為什麼要考慮呢？
（因為……如果沒設定好是會被打的！！）

據說今天是Mabinogi的「王城宴會日」
因為有抽獎，而我想拿抽獎券看看（限量100名）
所以我只好草草結束這篇文章拉！

不過下次寫公會網站製作時，會分享「一些技巧」給大家，別忘記再次拜訪喔！

]]> http://blog.frost.tw/web-project/poston-2010-04-10/postid-485/feed 0 瑪奇公會網站製作筆記（一） http://blog.frost.tw/web-project/poston-2010-04-09/postid-484 http://blog.frost.tw/web-project/poston-2010-04-09/postid-484#comments Fri, 09 Apr 2010 11:04:18 +0000 蒼時弦や http://blog.frost.tw/?p=484 先來張首頁畫面：


這次可以說是我第一次製作遊戲公會網站，
過去頂多是興趣，做做好玩而已～

不過這次可以說是「下定決心」要長期待在 Mabinogi 的世界，所以就比過去更專注。
不過，也是因為我的技術提昇很多，才可以這樣搞。

以前做過挺多次遊戲網站，不過最後都化為灰燼。
其實挺慘的，不過這也算是「事實」吧！

—

目前首頁做好之後，還有許多部份需要開發。
Ex. 公會日誌、訪客留言等……

今天除了很高興的 ACG 一下之外，就是把內頁成型。
並且製作公會日誌的部份（不然感覺我好像很久沒動工了！？）

不過這次還是有「新挑戰」
因為，公會日誌為了要能在奇幻世界（瑪奇資訊站）上顯示聯播，所以需要 RSS 功能。
不過我對 XML 不熟，也沒做過 RSS 所以其實挺具有挑戰性的！？

這次的網站圖示，其實挺精美的！？
（大概是我有進步吧～～）

]]> http://blog.frost.tw/web-project/poston-2010-04-09/postid-484/feed 0