webok20180316

2008年5月12日星期一

FrontPage基本操作界面介紹

要學好FrontPage，首先要先瞭解他的操作介面，FrontPage有分成97、98、2000、2002、2003等版本，介面雖稍有差異但使用原理是近似的。

安裝完Frontpage後，要啟動Frontpage，只要從”開始”→”程式集”中，執行”Microsoft Frontpage”，便可以開啟Frontpage，基本的介面如下。

首先先來認識Frontpage中，常見的幾個工具列：

除了一開始會出現的工具列外，我們可以從功能表列上的檢視→工具列，點選其它的工具列，將其開啟或關閉。
　
選擇工具/WEB設定，如果你的網頁語系是繁體中文的話，記得確定語系標籤裡是設定成為Big5碼或是UTF-8。

2008年3月9日星期日

如何去觀看網頁是否有使用CSS做編排？推薦使用微軟開發的Internet Explorer Developer Toolbar這個IE瀏覽器外掛軟體。

您可以下載http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en該軟體安裝後，即可在IE瀏覽器的右上角按下Internet Explorer Developer Toolbar圖示開啟此功能，例如以Yahoo首頁為例http://www.webspace.com.tw/E-C/images/yahoo-css1.jpg目前是這樣的正常顯示，您到瀏覽器下方的Internet Explorer Developer Toolbar裡選擇"Disable"勾選"All CSS"，就可以看到Yahoo首頁被抽離CSS的畫面http://www.webspace.com.tw/E-C/images/yahoo-css2.jpg，這樣做的另一個好處是可以使搜尋引擎更容易分析找到您的網頁，對於在搜尋引擎裡的排序也會有幫助。

目前台灣的業者很少有運用這些技術來作為版面配置製作網站的，大多只有把CSS拿來運用在一些文字連結變色等小層面零碎運用，其實相當的可惜。

附帶說明一下，如果您使用IE8，則已經有內建這項工具，不需要另行安裝。

網頁製作未來的走向規範

W3C是制訂網頁設計規格發展裡最重要的國際性組織，新的瀏覽器與網頁編輯軟體都會去注重W3C規範的網頁裡必須加上DOCTYPE標示，並且逐漸由過渡性的(Transitional)演進成嚴謹的(Strict)的標示與寫法，傳統網頁寫法將會逐漸被淘汰。

過渡性的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

嚴謹的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

在未來網頁設計裡，遵循W3C國際組織的訂定的相關網頁規範是勢必的發展潮流，遲早都必須面對！但仍有不少業者與網站經營者仍是採用舊的網站製作技術與軟體，其實產生出來的網站會降低其競爭力！

瀏覽器版本與現況

根據W3schools這個國外知名網頁設計資源網站的統計http://http//w3schools.com/browsers/browsers_stats.asp，Firefox在瀏覽器市場的佔有率正逐步提升，在歐美等國外地區近半年使用Firefox的比率超過三成，後續發展頗有點像前幾年瀏覽器市場上IE與Netscape兩強競爭的態勢，在目前台灣的市場雖沒像國外使用Firefox的比率這樣高，但保守估計市佔率至少仍有一、兩成，而且台灣市場的特色是往往相關網路資訊使用慢國外半年到一年左右才會發酵，未來如果您設計的網站不能有在Firefox瀏覽器觀看，將會逐漸喪失競爭力，但網頁美編與程式設計要同時在IE與Firefox瀏覽器執行皆無誤，其實需要相當的設計技巧與技術的。

Firefox瀏覽器說明與下載：http://www.moztw.org/firefox/

另一個需要注意的是新版的IE7跟舊的IE6部分解析也有不同，之前在IE6可以正常執行無誤的網頁，在IE7上執行仍有可能會有不相容的情形，但IE7絕對是未來市場的主流，設計的網頁能否因應提升相容，仍是需多注意測試的。

在未來網站建置的市場裡，相同瀏覽器不同版本間的差異性與不同瀏覽器之間的相容性，這些支援技術的研發仍是需要注重的，畢竟瀏覽者只有靠著瀏覽器來觀看網站，瀏覽者不會去注意這些問題，不能被瀏覽者所觀看的網站將會遭到放棄。

何謂CSS技術？

CSS(Cascading Style Sheets)中文翻譯是「串接樣式表」，是W3C組織所擬定出的一套網頁標準格式，以往CSS大多只常被用來做一些超連結文字的樣式設定，而網頁排版則是使用框線為零的表格做編排，事實上表格拿來做排版運用，在W3C 裡被認為是錯誤的作法，正確的作法應該使用CSS做版面編排配置，但由於需考量相容性、網頁編輯人員的舊習慣等技術操作問題，所以導致在台灣的網頁設計頁裡仍大多是使用表格做排版，隨著CSS的語法架構演進越來越成熟，舊的表格排版作法會慢慢逐漸被淘汰，台灣的市場反應通常都會比國外慢上半年到一年左右的腳步，但目前台灣一些知名的大型網站其實已經都悄悄採用CSS做排版了，例如Yahoo!奇摩、 MSN台灣、 Yam天空……，由此得知CSS版面編排架構未來在台灣一定會更普及。

CSS語法可達成的功能眾多，所產生的好處也非常多，不只是運用在網頁排版上，善用CSS幾乎可以達成美編語法跟傳統HTML語法以及其他程式語法完全分離，除了方便維護之外，對於網頁美編人員與程式開發人員的分工也可以更為明確，較少產生以前美編人員與程式人員彼此修改後去動到對方的語法的缺陷，如果能做成系統讓一般客戶修改，基本上可以讓客戶自行編修豐富的美編效果，未來一般企業網站對CSS可以有較大控制度的需求應也是會逐步增加。

測試網站效能

要測試自己新設計的網站整體效能(程式執行、伺服器回應、網路速度等綜合因素)，可以利用下面介紹的這幾個網站進行測試，網站管理者以比對出調整修改後的網站(硬體或網頁)或連線速度是否效能有提升，對於程式設計師、網頁設計師、MIS等職業的人應該會蠻有幫助的～！

http://tools.pingdom.com/fpt/

http://www.websiteoptimization.com/services/analyze/

http://www.webscale.com/cgi-bin/timer.dll?Mode=Timer

http://www.gomez.com/info_center/instant_test.php

下面這個網址則是一個需要安裝的小工具：
HttpWatch Basic Edition 網頁診斷工具

http://www.httpwatch.com/

2008年2月25日星期一

什麼是部落格？

部落格(Blog)並非是什麼新技術，但它是一個新的網路平台，提供了良好的操作介面與串連與互動性，讓人不需要知道太多複雜的電腦技術，便可以盡情組織一個屬於自己的高度傳播的網路媒體，這是一般網站平台所很難達到的一種特性，所以企業使用Blog跟使用傳統的網站，兩者並不相抵觸，反而還具有相乘的功效。

Blog的好處，在於它的後台介面簡易，可以節省教育訓練學習上手的時間，而且它在搜尋引擎上的能見度與曝光度，比傳統的網站好更多，Blog本身適用於經常會有文件發佈的產業，可以提供更多的延伸閱讀服務(例如成為企業電子報的輔助連結、或利用RSS的訂閱特性進行網路傳播)，使用Blog也可以加強與網友的互動，能夠以故事敘述性的方式做產品置入性行銷與蒐集回應，也能當作是新的客服回答溝通管道，所以說用Blog來做為行銷輔助、探測市場反應或後續客服都是相當適當的選擇，使用Blog是一種趨勢，而未來會有更多行業領域的企業，使用類似或是更新的平台來進行商業的行為。

2008年2月20日星期三

Google Blogger的優勢

到底申請Google Blogger有何特點優勢，請聽我娓娓道來...

Blog可付費購買獨立網址設定成專屬的網址名稱，網址就等於是您的網路品牌，網址所有權有您自己擁有掌握，不用再去申請那種很長不容易記憶的網址(一看就是不專業的廉價服務)。
Blog內預設不會擺上其他廣告，讓您的不再需要擔心租用來的部落格上被放一堆不相干的廣告影響閱讀與形象。
可擴充Google眾多服務及豐富資源，可以整合：Picasa(圖片編輯管理與相簿服務)，網址：http://picasa.google.com/、http://picasaweb.google.com/、Google文件(上傳存放檔案、也可以在此撰寫文章再發表到Blogger裡)，網址：http://docs.google.com/、Google 協作平台(網頁空間與網頁編輯，以前是Google Page Creator)，網址：http://sites.google.com/、Google Analytics(流量分析)，網址：http://www.google.com/analytics、Google AdSense(藉由您網站上的相關廣告賺取收益)，網址：http://www.google.com/adsense
可支援高達100人共筆更新部落格，也可以用寫E-Mail的方式撰寫文章再發表到Blogger裡，更新維護超方便。
可以自行編輯模版與下載模版做備份及還原，也可以自行安裝備份軟體下載部落格文章與回應資料。
若不喜歡部落格預設的美編樣式，網路上有許多資源提供新模版可供您自行下載運用。
網路上有許多針對Blogger的專屬免費資源，可靈活運用加入或刪除元件，未來擴充彈性自由度高。
一篇文章可以放在多個分類(標籤)裡，增加被點閱觀看到的機率。
無限制發表文章上限數(但每天限制發表50篇文章)，亦無限制部落格流量。
上傳圖片容量可達到1GB的大空間，還可上傳AVI、MPEG、QuickTime、Real 及 Windows Media的多媒體影音檔案(每個檔案需為100MB以內，無容量限制上限)。
使用Blogger服務能在Google搜尋關鍵字時能得到較佳的排序。

WEBSPACE Blogger加值付費服務
若您弄不清楚與沒有時間去申請與設定Blogger，我們提供代為申請設定Google Blogger的服務(您就可以比較專心在寫部落格文章上)，第一年包含專屬網址及設定費共需4,000元(新台幣/含稅)，第二年以後每年繳交2,500元(新台幣/含稅)，可包含以下項目：

代您申請一個Gmail免費電子信箱服務。
代您申請一個Google Blogger服務，並代為做基本設定。
讓您擁有獨立專屬部落格網址(本方案內含贈送.com.tw或.tw台灣專屬獨立網址，並代您設定對應)，以您的名義註冊專屬獨立網址(不是子網域或子目錄，您擁有此網址所有權)，不怕網址被「綁架」造成未來經營困擾，方案上線時您可以查證網址是否標明為您所有，讓您輕鬆建立網路部落格品牌，不必再受限於人使用一些冗長無自有掌控權的次網域或子目錄網址。
提供相關資源說明文章以及使用經驗分享。

◆租用或購買WEBSPACE架站方案再申請上述WEBSPACE Google Blogger服務者，可享搭配優惠價：第一年年繳2,800元(新台幣/含稅)，第二年以後每年繳交2,000元(新台幣/含稅)。

◆需要額外美編設計或其他特殊設定則視您所需的規格再另行報價！

◆本服務僅協助您申請Google Blogger提供之網路服務並提供獨立網址對應設定，您必須同意遵守Google條款規定，若因Google服務政策變更需產生其他費用或中斷本服務時，您如不願意繼續遵守則該年費用不得申請退費，隔年到期日後則自動停止本服務不續租。！

◆本服務簡報請下載：http://www.webok1.com/WNHelp/Blog-Service.pdf

◆本服務合約與申請規格價位表請到此下載：http://www.webok1.com/WNHelp/Blog-Rent.doc
本服務的市場定位：

若有需要上述代為申請設定付費服務請與我聯絡
電子郵件：eyeshop.jerry@gmail.com
Msn：jerrysu@ms27.url.com.tw

2008年2月13日星期三

網站鑑賞電視錄影教學

Jerry受邀到國立空中大學教學頻道電視課程影音錄影，以網站鑑賞為一系列主題教授播放在空大電視訊道與華視超高頻，播出時間為從93年9月中旬至94年1月中旬每週五晚間8～9點。

第一段錄影：

第二段錄影：

Blogger首頁長篇文章的收合或繼續閱讀連結設定

這是針對Blogger首頁的單篇文章直接全部顯示出來佔到太多首頁版面的問題所做的修正設定，這樣您就可以自行決定該篇文章在首頁只要出現哪幾行摘要....(站長說明，這篇是舊的作法，目前Google Blogger已有內建繼續閱讀的功能，詳情請參考本站另一篇文章說明)

登入Blogger管理後台，版面配置/修改HTML，記得勾選「展開小裝置範本」，到最前面定義CSS Style的地方，隨便哪裡都可以，貼入以下基本的定義，其中那兩個<span> 用的 class "showDetail", "hideDetail" 是用來定義那個收合文章用的連結樣式，自己可以新增對該連結的設定：


/* Style of detail article toggle */

span.showDetail {

  float: right;

  border: 1px solid #333;

  font-size: 8pt;

  margin: 10px 0 10px 0;

  padding: 0 10px 0 10px;

}



span.hideDetail {

  display: none;

  float: right;

  border: 1px solid #333;

  font-size: 8pt;

  margin: 10px 0 10px 0;

  padding: 0 10px 0 10px;

}

找範本的 </head> 標籤，把下面幾行 javascript 貼到該標籤的前面：


<!-- User defined inline javascript -->

<script language='javascript' type='text/javascript'>
<!-- Script functions for show detail article checking: showDetail(), hideDetail(), checkDetail() -->
function showDetail(id) { 
  var spans = document.getElementById(id).getElementsByTagName('span');

  for (var i = 0; i &lt; spans.length; i++) {

    if (spans[i].id == 'detail' || spans[i].id == 'hideDetail')

      spans[i].style.display = 'inline';

    if (spans[i].id == 'showDetail')

      spans[i].style.display = 'none';

  }

}


function hideDetail(id) {

  var post = document.getElementById(id);

  var spans = post.getElementsByTagName('span');

  for (var i = 0; i &lt; spans.length; i++) {

    if (spans[i].id == 'detail' || spans[i].id == 'hideDetail')

      spans[i].style.display = 'none';

    if (spans[i].id == 'showDetail')

      spans[i].style.display = 'inline';

  }

  post.scrollIntoView(true);    

}



function checkDetail(id, link) {

  var spans = document.getElementById(id).getElementsByTagName('span');

  for (var i = 0; i &lt; spans.length; i++) {

    if (spans[i].id == 'detail') {

      spans[i].style.display = 'none';

      document.write('&lt;span id=showDetail class=showDetail&gt;');

      document.write('&lt;a onclick=javascript:showDetail(\&quot;'+id+'\&quot;); href=javascript:void(0);&gt;完整閱讀...&lt;/a&gt;'); 

      document.write('&lt;/span&gt;');

      document.write('&lt;span id=hideDetail class=hideDetail&gt;');

      document.write('&lt;a onclick=javascript:hideDetail(\&quot;'+id+'\&quot;); href=javascript:void(0);&gt;文章收合...&lt;/a&gt;'); 

      document.write('&lt;/span&gt;');

    }

    else {

      if (spans[i].id == 'fullpost') {

        spans[i].style.display = 'none';

        document.write('&lt;span id=showDetail class=showDetail&gt;');

        document.write('&lt;a href=\"'+link+'\"&gt;閱讀全文...&lt;/a&gt;');

        document.write('&lt;/span&gt;');

      }

    }

  }

}

</script>

找到這一段(位置和版面可能會因樣版不同而有所差異)：


<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->

改成：


<div class='post-body' expr:id='"post-" + data:post.id'> <!-- Add show detail check -->

<b:if cond='data:blog.pageType == "item"'>

      <p><data:post.body/></p>

<b:else/>

      <style>#detail, #fullpost {display:none;}</style>

      <p><data:post.body/></p>

      <script type='text/javascript'>

        checkDetail(&quot;post-&quot; + &quot;<data:post.id/>&quot;, &quot;<data:post.url/>&quot;);

      </script>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

在Blogger的後台：設定/格式/文章範本裡加入下面這一行：


<span id="detail"></span>

以後每次要發表新文章的時候在切換到「修改Html」時就會出現以下標籤：

<span id="detail">

這是要隱藏剩下的完整內文

</span>

標籤內的文字就會在首頁被隱藏起來，而標籤外(不管是前面或後面)的文字就變成該文章的前言或摘要。以上是只有在首頁才會有的效果，如果是單篇獨立文章的連結，不會有展開折疊的連結。如果你不想使用文章收合的效果，要用固定連結，只要把上面的 id 名稱從 detail 改成 fullpost，就可以有獨立文章連結的效果了。

成立源由及宗旨

本站成立於2008年2月，主要是以網站相關軟體設計與應用的教學資訊為主，並將原本CorelDRAW網路藝廊、FrontPage教室、PhotoImpact愛秀網等教學站台資料轉到本站以部落格形式繼續經營分享！
希望以部落格的型態能提高互動與即時便利，整合過的資料也會較為利於尋找觀看！也期許自己與觀看的網友們能夠在學習上都很OK順利～！

2008年2月5日星期二

部分課程回顧

這篇的內容，已經改更新到 http://webok.tw/p/course-look-back.html

2005年3月15日星期二

PhotoImpact10 創意實務工房

書名：PhotoImpact10 創意實務工房
作者：創意眼資訊蘇東偉
書號：EA312
價格：新台幣520元
類別：影像繪圖
出版日期：2005/3/15
頁數：406
印色：彩色書
對象：入門→高階
尺寸：17x23 公分
附件：CD*1

簡介：
homemade賀卡自己做，修照合成不求人。
優質網站，商業DM，PotoImpact做出自己的特色！
範例導向學習，多達60個範例讓您理論與實務並重！
專屬網站討論支援讓您輕鬆學！
加值提供虛擬主機與網址的讀者專屬優惠卷。
章節介紹：
第一章：認識基本環境～觀念入門操作
1-1 PhotoImpact的演進與優勢
1-2安裝簡介
1-3工作環境介紹
1-4新增影像與開啟及儲存檔案
1-5圖層與PhotoImpact各類物件屬性觀念
範例：圖層與物件示範
1-6百寶箱介紹

第二章：初階數位暗房～影像修片技巧
2-1數位影像素材的取得與準備
2-2調整影像大小與類型、擴大底框
2-3相片修正
範例一：舊照片編修【NEW】
範例二：拍攝相片基本編修【NEW】
範例三：照片紅眼問題與膚色變更【NEW】
範例四：產生變焦模糊相片【NEW】
範例五：夜景特效【NEW】
2-4相片邊框設計
範例六：懷舊典雅風格相片
範例七：相框與陰影設定及匯出桌面底色圖案

第三章：進階數位暗房～影像合成處理
3-1挑選工具運用
3-1選取工具的運用
範例一：局部圈選美化【NEW】
範例二：如夢似幻的世界【NEW】
範例三：邊緣發光商品【NEW】
範例四：照片擬真粉彩化【NEW】
3-2仿製工具的繪製
範例五：炭筆筆觸仿製
範例六：龍
3-3橡皮擦、遮罩工具的使用
範例七：玩具商店廣告【NEW】

第四章：立體造型繪製～路徑繪圖製作
4-1基本的路徑繪製
範例一：童話世界
範例二：小企鵝留言版
4-2 3D融合工具與設計
範例三：雪人賀聖誕
範例四：軟體行銷廣告
範例五：小熊金鑰匙鍊
範例六：珍藏版手錶

第五章：文字藝術師～編輯文字特效
5-1套用百寶箱的文字特效
範例一：預設的文字特效
5-2色彩多變的漸層字
範例二：彩虹陰影字
5-3發光字
範例三：發光陰影字
5-4圖檔材質字
範例四：金屬材質字
5-5外框字
範例五：多重外框材質字
5-6路徑變形字
範例六：輪廓變形字
範例七：環繞路徑字
範例八：環繞球體字
5-7外框鏤空字
範例九：MERRY X’MAS
5-8選取區的運用
範例十：挖空字
範例十一：融入背景字

第六章：優質網站建置～網頁設計介紹
6-1網站建置的順序流程
6-2網站版型的繪製與規劃
範例一：形象頁版型繪製
範例二：單元頁版型繪製
6-3剪裁工具與切割工具
範例三：形象頁剪裁切割
範例四：單元頁剪裁切割
6-4影像最佳化與去背處理
範例五：網頁影像最佳化
範例六：網頁圖檔去背
6-5 Script網頁特效
範例七：形象頁Rollover按鈕製作
範例八：形象頁彈出式選單製作
範例九：垂直捲動效果製作
6-6網頁輸出
範例十：形象網頁輸出
6-7背景設計
範例十一：使用背景設計師
範例十二：自行設計底圖
6-8元件設計師
範例十三：單元圖示製作
6-9按鈕設計師
範例十四：留言版按鈕製作
6-10影像地圖
範例十五：網站導覽製作
6-11連結Web物件
範例十六：形象頁FLASH動畫置入

第七章：動畫Action！～常見技巧說明
7-1動畫的原理
7-2 Photoimpact的動畫功能
範例一：水晶玻璃動畫效果
範例二：火焰動畫字
範例三：拼圖動畫
範例四：扭曲變形動畫字【NEW】→沒標到
7-3 GIF Animator 環境介紹
7-4動畫精靈的使用
範例五：廣告橫幅圖檔製作
7-5視訊特效的套用
範例六：置入動畫特效
7-6自動執行動畫檔
範例七：電子賀卡

第八章：附屬軟體搭配～擴充整合設定
8-1增加外掛模組
8-2擴充範本與更新程式
8-3批次轉換與快速指令錄製
範例一：修片指令錄製
8-4電子相簿PhotoImpact Album
範例二：網頁相簿
8-5 COOL 360的操作
範例三：虛擬實境製作
8-6輸入COOL 3D產生的物件做整合
範例四：置入立體文字效果

附錄
A-1新功能快速上手
A-2影像的基本原理
A-3 檔案格式介紹
A-4簡易的色彩觀念
A-5色彩管理校正
A-6相關網站介紹
A-7認識網頁上三種圖片格式
全面性介紹PhotoImpact各方向層面的運用，影像處理與修片、網頁製作、繪製圖形、產生動畫等多種功能一應俱全，一本書就可以抵購買好幾本書。
範例淺顯易懂但兼具質感，初學者容易學習吸收。
介紹附屬軟體與一些罕為人知小技巧運用，有助於進階者提升功力與融會貫通。
以範例為導向學習，多達60個範例讓您理論與實務並重！
超有料滿滿一張容量的隨書光碟，附上完整的範例練習檔案、50張專業圖庫、550張圖檔素材與相關軟體試用版。
詳細的附錄輔助說明。
專屬網站討論支援http://www.eyeshop.com.tw/photoimpact/。
出版商上奇科技網站本書介紹