目前分類：DHTML網頁 (22)
- Mar 28 Wed 2007 04:38
鼻要再問嚕啦
- Oct 03 Tue 2006 02:43
談談網頁製作軟體
目前市面上的網頁製作軟體，雖然也是很多，但是，還是以微軟 Office 家族中的 FrontPage 軟體，以及 Macromedia 公司的 Dreamweaver 軟體為主流。
若是以功能以及技術支援的角度而言，Dreamweaver 軟體要遠勝過 FrontPage 甚多；當然，若是以軟體的價錢而論，Dreamweaver 也是遠超過FrontPage。
- Oct 02 Mon 2006 00:09
DHTML標籤與屬性
我們上網使用的那個軟體叫做 Web Browser，中文的譯名就叫做「網路瀏覽器」。現今，市面上的網路瀏覽器產品雖然不一而足，但是，無論哪一種產品，它起碼必須具備的基本功能就是：
「一定要能夠解讀、執行、呈現DHTML(Dynamic HyperText Markup Language)網頁！」
2005年各常見廠牌瀏覽器的市場佔有率參考圖
- Sep 27 Wed 2006 04:51
再談「網址」
「網址」這兩個字，在英文中，並沒有與它對應的單字...勉強的話，就是 address 這個字
address？...ㄚ不是地址嗎？... ...是啊，一點都沒錯ㄝ！它就是(指出)一個位置的意思
在網路專業術語上，「網址」的英文應該是 Uniformed Resource Locator _ URL
真要把它照著字面翻譯出來的話，可以稱為... ...「統一的資源定位器」
- Sep 20 Wed 2006 06:20
網頁是什麼
在網頁設計教學上，最困擾的就是如何去說服這個觀念...網頁檔案的內容，實際上，只是一堆文字
意思也就是說，只要功力夠，最簡單的NotePad「記事本」文字編輯軟體就可以設計出非常好的網頁
應該會有一堆人要張口結舌......哪有可能！網頁上不是一大堆的圖片、音樂、影片、動畫嗎？
是的，沒錯啊！......但是，請試著回答這個問題：「你是在哪裡看到這一些五花八門的畫面？」
- Sep 02 Sat 2006 23:44
氣象與時間欄位
自從雅虎部落格開放【自定欄位】以來，各家格主無不竭盡所能，各展神通
我是知道的啦，我的學員是不會放過偶的，尤其是有心把不落歌唱好的...
其實，自定欄位的功能，雅虎部落格已經透過PHP的技術提供給使用者設定了
- Aug 10 Thu 2006 01:37
影音再試
沒啥威脅的颱風_桑美，倒是帶來了和平常不一樣的天空
臨時駐足拍了一些，ㄝ～...可以拿來示範一下影音的製作
雅虎部落格是不提供背景音樂播放的，只好，應變一下囉
雖然，製作粗糙了點，但是，聊勝於無...反正，只是個測試
- Aug 05 Sat 2006 04:28
影音試用
雅虎部落格改版後，已經允許在部落格網頁中插入影音的效果(沒有影像的純聲音檔仍不行)
有興趣的可以參考部落格小子的《試用在部落格中播放影音的功能》一文的介紹...
基本上，必須先將影音檔案上傳到雅虎的影音網站，然後才能在部落格中加以引用
目前還在試用的主因是，雅虎的影音網站仍未完成中文化(必須在英文的畫面中操作)
- Jul 01 Sat 2006 06:25
網路資源定位
最近，一代武林奇才～晨曦婆婆～，不斷在大師留言板上留下一些部落格怎麼玩的問題...。雖然，她總是說：「師父，不要理我...」云云...呵！呵！怎麼？心理戰蛤～？明知我是在教網頁的，怎麼可能置之不理...身為一個「善待問者」，如何能置之不鳴...偶就開始...嗚～哇～吧！
起個頭，這麼說吧，只要我們上網時看得到、聽得到的，就是已經在「World Wide Web_全球資訊網」上公開的資料。既然已經公開(還是有著作權、擁有權的問題)，有需要的話就可以加以引用。當然，有可能的話，最好取得所有人的同意，或者，註明出處...等等。
問題是，怎麼引用呢？「複製、貼上」，對「文字資料」沒問題，但，文字之外的多媒體檔案，包括圖片、聲音、影像...等，大多，不是簡單的複製、貼上就可以解決，這，牽涉到對URL網址的認知、網頁HTML原始碼的解讀，尤其是「絕對位址」、「相對位址」的觀念以及應用。
「絕對位址」，顧名思義，當然是「特定、不變的網路位址」。所有公開在全球資訊網(www)上的電腦檔案，都有一個特定的絕對位址。只要我們有辦法知道它的絕對位址，那，就可以在網頁中加以引用。部落格，也是網頁，只不過，有沒有網頁技術的背景，玩法有點不一樣而已。至於，怎麼引用？
- May 17 Wed 2006 04:13
Script & CSS
網頁的HTML原始檔內容中，除了我們之前所介紹的之外，其他較常出現的HTML標籤就是標示網頁瀏覽器端動態(Dynamic)效果的Script程式碼區塊，以及標示個別或整體網頁呈現效果的CSS(Cascading Style Sheet)連接樣式表Style定義區塊。
(一). <script…>標籤所標示的程式碼是由瀏覽器負責解讀與執行，所用的語言預定為JavaScript。JavaScript是一種專為瀏覽器所設計的(瀏覽器端)程式語言。網頁中如果加入了 <script…>標籤，即可稱為DHTML網頁。可以讓網頁具備與使用者互動的效果，或者，取得有關瀏覽器的一些資訊，以便進行相關的處理。
JavaScript程式碼可直接以下述第1.種方式撰寫在<script…>與</script>之間；也可以先將程式碼儲存在一個副檔名為 .js 的文字檔中，然後以下述的第2.種方式，透過<script…>起始標籤的 src (source)屬性加以引用。
1. <script language="javascript"> javascript(程式碼) </script>
- Apr 28 Fri 2006 01:56
常見HTML標籤
A. <font …> 文字 </font> 標籤組是在標示文字呈現的外觀樣式：
1. color屬性：指定文字的顏色；
網頁上的顏色可用已經定義好的顏色名稱(如附件)，如color = "olive"
或使用16進位的#RRGGBB(紅綠藍)表示法，如color = "#C0C02A"
2. size屬性：指定文字的大小
文字的大小可以用1～7的代碼表示(數值越大字越大，預定為3)；如size = "4"
- Apr 21 Fri 2006 03:21
Script & Style
網頁HTML原始檔的<head>與</head>內容中，除了我們之前所介紹的<meta ...>標籤之外，最常出現的特別HTML標籤就屬於標示網頁瀏覽器端動態(Dynamic)效果的script以及定義呈現樣式的style程式碼區塊。雖然日後我們都將進一步介紹，但為了解讀HTML原始檔，茲先簡介如下：
A. <script ...> ... </script> 標籤組區塊
1. <script language="javascript">
內部javascript(程式碼)
- Apr 21 Fri 2006 02:37
網頁meta標籤
網頁HTML原始檔的 <head> 與 </head> 之間，可以插入一些<meta ...>標籤。
<meta ...>標籤因用途的不同，可分為兩大類：
------------------------------------------------------
一. http-equiv 纇的<meta ...>標籤可以用來指示或規範瀏覽器的行為：
A. <meta http-equiv="content-type" content="text/html; charset=big5">
- Apr 16 Sun 2006 00:21
相對與絕對路徑
不熟悉電腦檔案路徑的人，進入網頁設計與網站管理的領域後，一開始，對於相對路徑與絕對路徑的觀念，往往無法很快地進入狀況，偏偏，它又是網頁設計的重點之一，只要觀念有點模糊，就算跟著課程一步步地完成作品，到最後，也不知道自己在做些什麼。其實，這只是一個簡單的觀念，先把它釐清了，再下手不遲。
我們已經強調過很多次，網頁檔案只是儲存依照HTML規則所撰寫的文字。那，它那些多采多姿的圖案、動畫，或者動人的音樂是怎麼來的呢？還是那句老話：網頁透過檔案的HTML文字「命令」我們上網時所用的那個IE瀏覽器來照著HTML文字，一行接一行、一個標籤接一個標籤地往下做！瀏覽器看到HTML的命令文字後會怎麼做？這，才是我們要學習的重點。
HTML文字的規則規定：
A. 除了下列少數的例外，所有HTML標籤都要有結束標籤：
- Apr 11 Tue 2006 09:25
WS_FTP Pro 8.03
雖然壓縮檔案在電腦的使用上非常方便，也是必須具備的電腦操作技巧，但是，我們再回頭來想想這個老問題，如果你想將壓縮檔傳送給很多的人時，假設，不要多，別說是全世界的人，就說一百個人就好，你要怎麼做？就算你擁有這些人的電子郵件信箱，也將這些資料輸入你的郵件通訊錄中，隨時可以透過群組加以發送。但是，別忘了，大部份的收信機制，都有攔截”垃圾信件”的一套標準，一但你信件的收信者超過一定人數時，就算你的發信單位允許，但收信的人恐怕沒事得常到他的”垃圾信件”中找找，才看得到你寄的信。是你，你願意收到這樣的信嗎？(我寄的信例外，我不得已啊！難到真要一個一個…)
這該怎麼解決？簡單！你們今天學的網頁設計，就是在解決這個問題。只要你將資料做成網頁，網頁放到網站上之後，只要他們知道你的網址(URL)，只要他們可以上網，無論他們身在何處，隨時都可以透過瀏覽器觀看或者下載最新的資料，任何的修正、補充，只要你修改資料或網頁，重新再放到網站上之後，全世界的人所看到的就是最新的資料啦！你說，這神不神奇？這就是為何1989年CERN要提出World Wide Web計畫的原因。(請參考網路簡史一章)
- Apr 07 Fri 2006 22:23
網頁表格
本週課程中，學員都練習了網頁表格的建立，也認識了網頁表格相關的HTML標籤與基本屬性設定。雖然第一個表格網頁已經完成，大多數的人也已經成功上傳到個人的網站中，但因課堂上的時間有限，雖然完成了，難免還有一些疑惑；我們在這裡就綜合學員課堂上的問題，將這些困惑解答如下。已經會的學員，就當它是複習吧，溫故可以知新！何況，有一些我們在課堂上還沒提到...
A.網頁表格的HTML標籤以<table ...>為起始標籤，以</table>為結束標籤。
起始標籤<table ...>中常見的屬性設定有：
1. 表格寬度的 width 屬性值有兩種設定方式
a. 以實際像素值(pixel,整數)表示，例如 width="778"
b. 以相對於螢幕解析度的百分比表示，例如 width="80%"
- Apr 03 Mon 2006 02:14
Dreamweaver簡介
Dreamweaver是Macromedia公司(參考網址：www.macromedia.com/tw )所開發出來的網頁製作軟體，是功能相當齊備的網頁開發軟體，目前最新的版本是Dreamweaver 8，前版則依序為Dreamweaver MX 2004、Dreamweaver MX。此軟體在一般3C店中都有販售，可以單獨購買(未稅價：英文版US$399，中文版NT$17,400)；也可以一次購買Macromedia所推出的優惠套餐Macromedia Studio 8(未稅價：英文版US$999，中文版NT$43,500)，該產品當中包含了Dreamweaver 8、Flash Professional 8以及Firework 8等三種網頁製作相關軟體。
Dreamweaver屬於較專業的網頁開發軟體，適合美工設計人員或者程式設計人員使用。對於初學者而言，雖然只會使用到其中的部份功能，但對於熟悉這個軟體的環境倒是有它正面的意義。如果你不想馬上購買，Macromedia公司也提供了一個有效30天的試用版供有興趣的使用者下載試用，下載的中文網頁網址為：http://www.macromedia.com/cfusion/tdrc/index.cfm?product=dreamweaver&loc=zh_tw 。試用期滿後，如果沒有付錢購買使用註冊碼，試用版的Dreamweaver軟體將無法繼續使用。
Dreamweaver的設定工具與操作介面較為複雜，對於一般視窗軟體功能較生疏者，想要快速上手比較不容易，但只要肯下點功夫，要駕馭它也不是真的那麼難。不過，無論如何，我們還是得再三強調：只要是想接觸網頁設計，學習HTML的網頁語法非常非常重要！任何的網頁製作軟體，都只是在幫忙使用者以最快速、最容易的方式建立網頁。使用者在該軟體上操作的動作與設定，網頁製作軟體都會在幕後默默將它們翻譯成相對的HTML文字。所以，只要是真的想把網頁設計技術學好的人，一定必須得學習HTML文字的結構與語法。就算我們使用Dreamweaver這個強大的軟體也是一樣，沒把HTML學好，那你只能被它牽著鼻子走。到時，呼天不應、搶地不靈就不能怪別人。我的經驗是，先苦後甘，大家都可欣然接受，先甘後苦，一般都會打退堂鼓。各位學員就聽聽我的建議吧！
為了滿足大家的好奇心，接下來，我們就透過目前最普遍的Dreamweaver MX 2004，為各位看倌介紹Dreamweaver(以下簡稱MD)軟體的基本操作：
- Mar 28 Tue 2006 01:47
網頁檔案的內容
經過今天的課程，我相信，學員應該能夠瞭解網頁檔案中所儲存的實際內容了吧！
(如果有興趣看看現在觀看中的部落格網頁內容，請點按瀏覽器視窗上方功能表的 檢視/原始檔)
網頁檔案中所儲存的不過是一堆依照HTML規則所撰寫的文字。這些文字經過瀏覽器解讀、執行之後，就會將結果顯示在螢幕上的瀏覽器視窗中。透過FrontPage或Dreamweaver等網頁編輯軟體，無論你在網頁中插入甚麼樣的圖片，除了會在網頁的指定位置(游標所在處)顯示插入的結果之外，同時也會在網頁的實際(HTML)內容中產生類似下列的html標籤：
<img src="file:///C:/Documents../.../goose_1.jpg" width="360" height="240">
img是HTML網頁圖片標籤的關鍵字，瀏覽器一解讀到<img …>的文字就知道要在瀏覽器視窗中插入一張圖片。接著，瀏覽器就會去查看<img …>標籤中的src(來源source)屬性值為何。基本上，除非src指定的是http://…或file:///...等的絕對位址，否則的話，瀏覽器會自動以網頁檔案目前的所在位置加上src所指定的相對位址來找出圖檔的所在位址，然後再透過網路要求該伺服器把指定位址的檔案傳送過來。
- Mar 16 Thu 2006 16:38
FrontPage網頁製作
微軟的 FrontPage 與 Macromedia 公司所開發的 Dreamweaver 網頁製作專用軟體，都是一般網頁設計者最常採用的工具。不過，因為FrontPage是微軟Office的一份子，只要電腦中有Office套裝軟體(如果整套買)就會有FrontPage；但Macromedia的Dreamweaver必須額外購買，經過正確安裝後才能夠使用。電腦中如果有安裝Office套裝軟體(也就是有Word、Excel…)，我們就應該就可以從 開始 / 所有程式 選單中找到Microsoft FrontPage來開啟 FrontPage。
有了網頁設計軟體之後，照理說，一般網頁的設計應該不是一件難事，事實上也是如此，不過，還是有一些觀念上的問題必須先釐清。觀念先建立了之後，萬一網頁發生問題才知道問題出在何處，也才知道該從何下手。
網頁設計軟體提供了一個類似於Word的編輯環境來讓我們製作網頁。但是，Word所做的.doc文件與網頁軟體所做出的.htm(或.html)文件之間最大的差別在於：雖然網頁文件中也可以插入圖片，甚至還可以插入聲音、動畫、影片…等多媒體的內容，但是，Word文件中的圖片(如照片、美工圖案、文字藝術師、快取圖案等)是直接"嵌入"(embed)到.doc文件中；然而，網頁中除了文字之外，圖片、聲音、動畫、影片…等的多媒體檔案只是透過文字命令從原始處所"連結" (link)到.htm網頁上，並沒有真正整個存入網頁中。
