選擇開新網頁
選擇表單網頁精靈
按下一步
按新增鈕
選聯絡資訊
勾名稱即可
採用預設值
採用預設值
完成精靈設定
產生畫面如下
插入新的一列
現在要新增多行的文字方塊
修改畫面如下
切換到HTML頁面，刪除以下反白文字
加入以下字串，修改E-MAIL為你自己的MAIL帳號
自己測試一下是否能收到E-MAIL吧！
2008年5月15日 星期四
Frontpage的表單設計
想做出如聯絡站長的表單式E-MAIL嗎？本範例一般免費網頁空間就可製作囉！
選擇開新網頁
選擇表單網頁精靈
按下一步
按新增鈕
選聯絡資訊
勾名稱即可
採用預設值
採用預設值
完成精靈設定
產生畫面如下
插入新的一列
現在要新增多行的文字方塊
修改畫面如下
切換到HTML頁面，刪除以下反白文字
加入以下字串，修改E-MAIL為你自己的MAIL帳號
自己測試一下是否能收到E-MAIL吧！
選擇開新網頁
選擇表單網頁精靈
按下一步
按新增鈕
選聯絡資訊
勾名稱即可
採用預設值
採用預設值
完成精靈設定
產生畫面如下
插入新的一列
現在要新增多行的文字方塊
修改畫面如下
切換到HTML頁面，刪除以下反白文字
加入以下字串，修改E-MAIL為你自己的MAIL帳號
自己測試一下是否能收到E-MAIL吧！
2008年5月14日 星期三
FrontPage的討論區設定
首先要跟大家先說明一下，你的網頁空間必須有FrontPage Server Extensions的伺服器功能，才可以使用以下FrontPage討論區精靈的設定建立自己的討論區
確定你的網頁空間有支援後使用FrontPage2000就能做出如本站的討論區功能，不必會CGI、ASP、資料庫等技術喔！(不過大部分免費網頁都無支援FrontPage Server Extensions的伺服器功能！)
先從檔案/開新檔案/Web進入
點選討論區精靈web精靈，如果是直接連上線上修改就勾選新增到目前的web，不然就要等全部設定完再用發送web去更新了。
點選下一步
通常是全部勾選
命名討論區標題
一般用途選第一個即可
通常一般討論區不會去設定要註冊
通常選從最新到最舊瀏覽者比較好看到最新資料
記得選否，不要選是喔！
一般設定為主題，大小，日期
這個步驟則看您自己喜好囉！
完成後記得自己先留言測試一下是否功能正常，不過搜尋功能只能找到英文與數字，無法支援中文...
例如下圖是完成的畫面
確定你的網頁空間有支援後使用FrontPage2000就能做出如本站的討論區功能，不必會CGI、ASP、資料庫等技術喔！(不過大部分免費網頁都無支援FrontPage Server Extensions的伺服器功能！)
先從檔案/開新檔案/Web進入
點選討論區精靈web精靈，如果是直接連上線上修改就勾選新增到目前的web，不然就要等全部設定完再用發送web去更新了。
點選下一步
通常是全部勾選
命名討論區標題
一般用途選第一個即可
通常一般討論區不會去設定要註冊
通常選從最新到最舊瀏覽者比較好看到最新資料
記得選否，不要選是喔！
一般設定為主題，大小，日期
這個步驟則看您自己喜好囉！
完成後記得自己先留言測試一下是否功能正常，不過搜尋功能只能找到英文與數字，無法支援中文...
例如下圖是完成的畫面
2008年5月13日 星期二
FrontPage的文字編輯
介紹一些關於在FrontPage裡的文字編輯方式...
★加入文字：文字是一個網站最基本的東西
若您有使用過文書處理軟體(如word)，加入文字是非常簡單。 將你的游標指到你要加入文字的地方。便可將文字加入。
★改變文字的大小、字型
改變文字大小、字型的方法有兩種：
可以直接點選格式工作列，便可以改變。
文字大小分為７級(8,10,12,14,18,24,36)
也可以由功能列上的"格式"→"字型"來改變。＜注意＞使用字型時，若瀏覽者的電腦無安裝你所設定的字型，將無法看出；一般電腦皆有的字型為：細明體及標楷體
★變更文字顏色：讓文字看起來較多色彩
要改變文字的色彩較快的方法，我們可以先將要改變的文字選取起來，然後點選格式工作列中的
，便可以改變。也可以由功能列上的"格式"→"字型"來改變。
★變更文字樣式
要使用粗體、斜體及加底線時，一樣將要改變的文字圈選起來，然後點選格式工作列中的
(由左到右為：粗體、斜體、加底線)，便可以改變。
也可以由功能列上的"格式"→"字型"來改變。
★文字特殊效果
要使文字更多彩多姿，我們可以設定文字的特殊效果：由功能列上的"格式"→"字型"便可以來改變一些文字特殊效果
PS:因為IE不支援閃爍，所以這效果只能在Netscape看出來。
★段落設定
將一段字用滑鼠左鍵拖曳反白，選擇格式/段落(或按滑鼠右鍵選擇段落)，會出現如word編輯時的段落設定畫面
★項目符號
選擇格式/項目符號及編號
也可以指定圖片
★註解
選擇插入/註解
會出現在FrontPage編輯中才看得到的註解功能
★加入文字：文字是一個網站最基本的東西
若您有使用過文書處理軟體(如word)，加入文字是非常簡單。 將你的游標指到你要加入文字的地方。便可將文字加入。
★改變文字的大小、字型
改變文字大小、字型的方法有兩種：
可以直接點選格式工作列，便可以改變。
文字大小分為７級(8,10,12,14,18,24,36)
也可以由功能列上的"格式"→"字型"來改變。＜注意＞使用字型時，若瀏覽者的電腦無安裝你所設定的字型，將無法看出；一般電腦皆有的字型為：細明體及標楷體
★變更文字顏色：讓文字看起來較多色彩
要改變文字的色彩較快的方法，我們可以先將要改變的文字選取起來，然後點選格式工作列中的
，便可以改變。也可以由功能列上的"格式"→"字型"來改變。★變更文字樣式
要使用粗體、斜體及加底線時，一樣將要改變的文字圈選起來，然後點選格式工作列中的
(由左到右為：粗體、斜體、加底線)，便可以改變。也可以由功能列上的"格式"→"字型"來改變。
★文字特殊效果
要使文字更多彩多姿，我們可以設定文字的特殊效果：由功能列上的"格式"→"字型"便可以來改變一些文字特殊效果
PS:因為IE不支援閃爍，所以這效果只能在Netscape看出來。
★段落設定
將一段字用滑鼠左鍵拖曳反白，選擇格式/段落(或按滑鼠右鍵選擇段落)，會出現如word編輯時的段落設定畫面
★項目符號
選擇格式/項目符號及編號
也可以指定圖片
★註解
選擇插入/註解
會出現在FrontPage編輯中才看得到的註解功能
2008年5月12日 星期一
FrontPage網站管理(WEB資料夾、導覽)
FrontPage基本操作界面介紹
2008年3月9日 星期日
抽離網頁上CSS的小工具
如何去觀看網頁是否有使用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，則已經有內建這項工具，不需要另行安裝。
您可以下載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國際組織的訂定的相關網頁規範是勢必的發展潮流，遲早都必須面對！但仍有不少業者與網站經營者仍是採用舊的網站製作技術與軟體，其實產生出來的網站會降低其競爭力！
過渡性的：
<!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絕對是未來市場的主流，設計的網頁能否因應提升相容，仍是需多注意測試的。
在未來網站建置的市場裡，相同瀏覽器不同版本間的差異性與不同瀏覽器之間的相容性，這些支援技術的研發仍是需要注重的，畢竟瀏覽者只有靠著瀏覽器來觀看網站，瀏覽者不會去注意這些問題，不能被瀏覽者所觀看的網站將會遭到放棄。
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可以有較大控制度的需求應也是會逐步增加。
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/
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/
訂閱：
文章 (Atom)
