土芭樂數位學堂

BigData 大數據分析, 大數據平台建置及應用 (Hadoop/spark),虛擬核⼼技術,資訊技術的分享, TiddlyWiki教學, Google 服務應用教學, 3D列印創意思維


顯示具有 Ajax 網頁程式設計 標籤的文章。 顯示所有文章
顯示具有 Ajax 網頁程式設計 標籤的文章。 顯示所有文章

6月 30, 2011

Create an ADO SQL Recordset

星期四, 6月 30, 2011

<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open "c:/webdata/northwind.mdb"

set rs=Server.CreateObject("ADODB.recordset")
rs.Open "Select * from Customers", conn

for each x in rs.fields
response.write(x.name)
response.write(" = ")
response.write(x.value)
next
%>

ADO Database Connection Examples(ASP程式寫法)

星期四, 6月 30, 2011
ADO can be used to access databases from your web pages.
有二種寫法，
方法一：Create a DSN-less Database Connection

<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open "c:/webdata/northwind.mdb"
%>


方法二，Create an ODBC Database Connection

<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Open "northwind"
%>

6月 23, 2011

如何在框架內秀出網頁程式結果

星期四, 6月 23, 2011

<html>
<head>
</head>
<body>
<iframe src="img/test.html" width="80%" frameborder="0" scrolling="no">
</iframe>
</body>
</html>

運用mouseOver與mouseOut動態換圖

星期四, 6月 23, 2011

<html>
<head><script type="text/javascript">
function mouseOver()
{
document.getElementById("c1").src="dataf1.gif";
}

function mouseOut()
{
document.getElementById("c1").src="dataf.gif";
}

</script></head>

<body>
<a href="http://tobala.net" target="_blank">
<img id="c1" border="0" width="80%" alt="Chart!!" src="dataf.gif" onmouseover="mouseOver()" onmouseout="mouseOut()" />
</a>

</body>
</html>

10月 10, 2010

CSS 補充教材(一)-連結樣式設定

星期日, 10月 10, 2010
若要針對網頁上顯示效果的修改，必須對CSS樣式有一定程度的瞭解，有鑑於同學們學習上的需要，將課程上所講解的內容再延伸做補充，以下是有連結樣式的相關設定：
  • 基本樣式設定
＜style type="text/css">
＜!--
a { text-decoration: none } 　 //定義連結消除底線
a:link {color:#00FFFF}　　　 //定義連結顏色
a:visited {color:#00FFFF}　 　//訪問過連結顏色
a:active {color:#0000FF} //目前執行中連結顏色
a:hover {color:#0000FF} //當滑鼠移到連結時連結顏色
-->
＜/style>
  • 雙線連結
a { color: #4D2078; text-decoration: underline overline;}
a:hover { color: #9900CC; text-decoration: none}
  • 有外框的連結
a { border: 1px #A498BD solid; height: 16px; color: #4D2078}
a:hover { border: 1px #0000FF solid; height: 16px; color: #9900CC}
  • 外框加背景色的連結-樣式1
a { border: 1px #A498BD solid; color: #4D2078; clip: height; background-color: #EEEBFF; height: 20px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; width: 130px: 0px}
a:hover { border: 1px #605080 solid; color: #9900CC; clip: height; background-color: #BDAAE2; height: 20px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; width: 130px: 0px}
  • 外框加背景色的連結-樣式2
a { color: #4D2078; text-decoration: none; height: 20px; width: 120px; font-size: 12px; background-image: url(bg1.gif); padding-top: 6px; padding-left: 5px; text-align: center}
a:hover { color: #9900CC; text-decoration: none; background-image: url(bg2.gif); height: 20px; width: 120px; padding-top: 6px; padding-left: 5px; text-align: center}
  • 外框加背景色的連結-樣式3
a { color: #4D2078; text-decoration: none; height: 20px; width: 120px; font-size: 12px; background-image: url(bg1.gif); padding-top: 5px; padding-left: 5px}
a:hover { color: #9900CC; text-decoration: none; background-image: url(bg2.gif); height: 20px; width: 120px; padding-top: 5px; padding-left: 5px}
  • 連結加動態底線樣式
a { text-decoration : none; color:#4D2078; }
a:hover{ text-decoration : underline;color:#9900CC; }
  • 連結雙底線
a { border: #A498BD solid; height: 0px; color: #4D2078; border-width: 0px 0px 1px; width: 200px; text-align: center}
a:hover { border: #605080 solid; height: 0px; color: #9900CC; border-width: 0px 0px 1px; width: 170px; text-align: center}
  • 按下連結產生位移效果
a { border: #A498BD double; height: 0px; color: #4D2078; border-width: 0px 0px 3px}
a:hover { border: #605080 double; height: 0px; color: #9900CC; border-width: 0px 0px 5px}
  • 具按鈕效果的連結
a { color: #4D2078; PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; background-color:#EEEBFF; height: 20px; width: 120px; text-align: center; ; border: #A498BD; border-style: outset; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px}
a:hover { BORDER-RIGHT: ##605080 1px outset; PADDING-RIGHT: 2px; BORDER-TOP: #605080 1px outset; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #605080 1px outset; PADDING-TOP: 2px; BORDER-BOTTOM: #605080 1px outset;background-color:#BDAAE2; height: 20px; width: 120px; text-align: center; }

10月 09, 2010

一個網頁如何設定二個以上的連結樣式設定

星期六, 10月 09, 2010
如果網頁中的 Menu 已經有做連結的樣式設定了，如何再設定另一組連結樣式呢？方法如下：
一個用在設定類別名稱為 table1 的連結樣式，一個用在類別名稱叫做 menu 的 DIV 標籤裡頭設定連結樣式。


.menu a{
color:#ffffff;
}
.menu a:hover{
color:#00ffff;
}

.table1 a{
color:#ff0000;
}
.table1 a:hover{
color:#000000;
}

10月 08, 2010

好書推薦暨色碼表參考

星期五, 10月 08, 2010
朋友們如果在設計網頁時，有需要配色這方面的參考用書，土芭樂推薦「Web配色事典」，書中依照色彩系統、印象感覺派、季節風格等等區別，以實例的網頁範例解說主色、副色間的搭配，以及適用的色彩觀念解說。最大的特色，就是此書有附上實用的網頁配色範例。很實用，土芭樂強力推薦的好書！
博碩出版，請點選此連結，閱讀目錄

另外，還有一本叫「多樣色-配色設計典」，此書很適合做海報輸出或EDM時使用，方便使用者隨時翻閱的配色 CMYK 和 RGB 色值。此書以季節的 4 大色域為基礎，再搭配 24 種經典色調來調配各種多樣色的組合應用實例，供大家配色時參考。

博碩出版，請點選此連結，閱讀目錄

不同的季節、不同的顏色，將帶給大家不同的視覺感受，筆者特別色碼表整理如下，方便設計網頁且需要配色的朋友查閱，歡迎多加利用：


CSS補充教材(二)

星期五, 10月 08, 2010
當設計者覺得 HTML 標籤可做的變化太少，就可以嚐試用 CSS 來做一些樣式變化。
舉例來說，例如 ：網頁中的標題文字都要呈現紅色字，但套用 Heading 1 樣式後，其文字只會加大、變粗，卻不會變換顏色，於是設計者還得自己手動更改文字色彩，一點都沒有效率，這就是傳統 HTML標籤的限制，使得設計者無法隨心所欲地編排版面。而 CSS樣式表可說是網頁排版的精髓所在，而在 Dreamweaver中使用 CSS 更是前所未有的簡單，只要用交談窗和 CSS Styles 面板來進行編輯、套用即可，完全不必學習任何語法。

一、開啟「CSS 專屬面版」
所有的CSS功能都集中放在「CSS專屬面板」之中，請選取功能表上的「視窗」→「CSS樣式」即可打開「CSS專屬面板」。


二、CSS 定義的三種類型

可分成三種類型，分別有「類別」、「標籤」、「進階」。分別說明如下：

  • 類別：將設定完成的 CSS樣式套用在選取的物件上，例如文字、圖片、表格...等。
實例練習：何設定文字的間距與行距
「只有此文件」所有的CSS樣式會直接寫在目前的網頁之內



  • 標籤：指定HTML標籤設定CSS樣式。

  • 進階：主要用來設定超連結的效果。CSS 判斷連結規則的四種模式：

　　a:link ：滑鼠未移至連結前
　　a:hover ：滑鼠移至連結上
　　a:active ：按下滑鼠連結瞬間
　　a:visited：滑鼠按下連結後離開
當套用a:link 和a:hover 兩種效果..滑鼠移至連結上會出現另一種顏色，套用後若顏色或效果不對 ,記得將 原始碼　a:link 中的　:link　去除，只留a 即可正確顯示，也可同時改變字體大小

7月 06, 2010

為何要使用UTF-8編碼，與BIG5的差異？

星期二, 7月 06, 2010
一、Big5 有幾個特色

1.每個中文字使用 2 bytes
2.因為制定者腦殘，用到了控制碼，所以許多程式與軟體都會有許、蓋、功這類中文字的沖碼問題
3.延伸字集中，有簡體字但是沒有定義日文字


二、UTF-8 則有以下特色

1.採用變動大小，中文字使用 3 bytes，英文則維持 1 byte
　因此若轉碼後，資料庫整體會變成 1.5 倍大，200MB(Big5) -> 300MB(UTF-8)

2.支援所有語言文字，還有一些怪怪圖形
3.簡體與正體中文重複字只定義一次，例如說，簡體的"山"，跟正體的"山"，是同一個 UTF-8 編碼

5月 29, 2010

CSS 語法學習的中文最佳網站

星期六, 5月 29, 2010
基本上，土芭樂還是推藨同學上 W3C 協會網站查詢(W3School也是很棒)並學習 CSS 語法，但考量同學對於閱讀英文網站的瓶頸，所以推薦下列幾個不錯 CSS 中文站台，希望初學者多加利用。
1.OECSPACE 網站

2.閒雲野鶴的CSS語法


3.洛杉磯學習中心

5月 24, 2010

HTML 語法學習的中文最佳網站

星期一, 5月 24, 2010
基本上，土芭樂還是推藨同學上 W3C 協會網站查詢(W3School也是很棒)並學習 HTML 語法，但考量同學對於閱讀英文網站的瓶頸，所以推薦下列幾個不錯 CSS 中文站台，希望初學者多加利用。


1、HTML 語法字典
這是由中研院原子與科學研究所整理的「HTML 語法字典」，可以幫助學習者迅速掌握HTML語法。
中央研究院原子與分子科學研究所網址：http://www.iams.sinica.edu.tw/

2.HTML教學目錄
這是由國立交通大學資訊工程學系所製作的教學網站，內容有分「初階學習、中階學習及進階學習」三種。
國立交通大學資訊工程學系網址：http://www.csie.nctu.edu.tw/

3.東湖國小的HTML教學及其語法測試
東湖國小網址：http://www.dfps.tp.edu.tw/

9月 21, 2009

免費的線上 Radio，讓您的網站隨時都有好音樂

星期一, 9月 21, 2009
合法的線上音樂點播服務哦，不需再申請會員，馬上挑馬上用～
讓您的網站隨時都有音樂飄揚。



POQbum.com 首頁：http://www.poqbum.com/internetradio/

步驟一、先挑選音樂頻道，有 「Top Hits、Rap&Hip Hop、Rock....」等音樂頻道。

步驟二、複製程式碼，請點「copy」。

步驟三、貼回部落格或自製的網頁。

8月 17, 2009

有了 W3School 寫網頁就簡單多了！

星期一, 8月 17, 2009

7月 22, 2009

製作網站 Logo 小圖示

星期三, 7月 22, 2009
如果希望訪客在進入自己的網站時，可在瀏覽器的網址列 Logo圖示(Favicon)，就要透過線上製作、產生favicon。首先必須先準備好一張圖檔，然後透過以下二種方式來製作即可：



方法一：直接連結到「favicon.cc」網站製作小icon圖示。
「favicon.cc」首頁網址：http://www.favicon.cc/

方法二：直接拿公司的 Logo 圖片檔(最好長、寬同等尺寸的圖)，至「favicongenerator」網站做小 icon 轉換。

「favicongenerator」網站首頁：http://www.favicongenerator.com/

以上二種方法，無論是自己做小圖示或拿小圖示轉檔，最後都必須輸出檔案(將檔案*.ico下載回來)，並將檔案放至網頁的影像資料夾中。然後在網頁的 Head 標籤範圍中加入下列程式碼：

<head>
<link rel="shortcut icon" href="images/favicon.ico" >
</head>

如果您還想要更特別的網址圖示，可以到下面這個網站來試試，做出來的小圖會有動畫效果哦！

網址：http://www.chami.com/html-kit/services/favicon/


倘若您有利用以上的網站服務製作動畫小圖示，請將以下的 HTML 程式碼複製到您的網頁 Head 標籤範圍中。

<head>
<link rel="shortcut icon" href="images/favicon.ico" >
<link rel="icon" type="image/gif" href="images/animated_favicon1.gif">
</head>


除此外，您還有下列的網站可以做選擇：
【網站網址】http://tools.dynamicdrive.com/favicon/
【網站網址】http://www.dagondesign.com/articles/favicon-generator/
【網站網址】http://www.rw-designer.com/online_icon_maker.php
【網站網址】http://www.favicon.jp/

7月 17, 2009

用 CSS 為「捲軸」改妝

星期五, 7月 17, 2009
來看看一個藍色捲軸的例子，可以試試不同的瀏覽器，對網頁有不同的詮釋
瀏覽器對於 CSS 的支援不盡相同，網頁應預先於數種不同的瀏覽器測試


<html><head>
<style type=text/css>
<!--
body {
scrollbar-arrow-color: #699EC7; /*--此是針對瀏覽器的捲軸上下指標做顏色設定--*/
scrollbar-face-color: Blue;/*--此是針對瀏覽器的捲軸介面做顏色設定--*/
}
-->
</style> </head>
<body><h1> 哈哈哈！捲軸會變色唷～ </h1></body>
</html>



和捲軸相關的樣式設定還有下面這幾項：

scrollbar-3dlight-color:#ffd700; /*--十六進位色碼，請參考配色表--*/
scrollbar-arrow-color:#ff0;
scrollbar-base-color:#ff6347;
scrollbar-darkshadow-color:#ffa500;
scrollbar-face-color:#008080;
scrollbar-highlight-color:#ff69b4;
scrollbar-shadow-color:#f0f;
scrollbar-track-color:#800080;

如是以上的樣式，倘若對瀏覽器捲軸的樣式沒有改變，可以試試下面的程式段：

<html>
<head>
<script type="text/javascript">
function setScrollbarColor()
{
document.body.style.scrollbarBaseColor="green";
}
</script>
</head>
<body onload="setScrollbarColor()" >
</body>
</html>

7月 16, 2009

您配色好幫手-設計網頁配色時，最佳的參考站台

星期四, 7月 16, 2009
推薦設計「網頁配色」會使用到的網頁安全色！此是一位丹麥國家的朋友所設計的網站，站內提供安全色的配色服務，同學可以利用站上所提供的網頁版面範本(請參考下圖Unsafe Colormatch Template )，直接在線上配色。

在網頁中嵌入音樂播放器

星期四, 7月 16, 2009
其實只是很短的一行程序，把它放在 body 標籤之間就行囉！

<body>....</body>

以下是重要的播器程式：

<embed src="音樂檔案路徑或網址" controls=smallconsole width=307 height=25 autostart=true>


說明：
（1）width=307 height=25是網頁中播放器的大小，而寬度可以自行調整；
（2）用此 embed 標籤，不單單只是播放 Mp3 音樂，可以播放其它類型的聲音文件，如 mid、au、wav 等，或是影片（wmv、mpeg、mpe、mpg）。
（3）基本上midi的檔案比較小，最適合放在網站上播放，不過和mp3比較起來實在很遜色，使用前可以多考慮。這提供一個 Midi 音樂(MidiMax音樂廳)整理站供大家參考一下。


音樂盒試播、試聽語法，以下分享的是楊培安的音樂盒，您可以複製語法貼到您的部落格：

<embed src="http://www.skyhigh.com.tw/peian/musicbox/musicbox.swf" width="140" height="400">
</embed>

如何讓網頁中的音樂重覆播放

星期四, 7月 16, 2009
Loop 是用來控制媒體是否要重覆播放功能，其預設的參數值為 false，所以音樂只播放一次。所以如果想要變更播放方式，請在下列程式碼中，使用 loop=true 來進行反覆的播放。

<embed src="音樂檔案路徑或網址" controls=smallconsole width=307 height=25 autostart=true loop=true ></embed>


說明：假如您不喜歡撥放音樂的圖形，可將 width 及 height 都設為零；我們也可以使用 hidden=true 來隱藏播放控制面版，此時就可以只有聽到背景音樂


<embed SRC="music/doremi.mid" hidden=true ></embed>


音樂盒試播、試聽語法，以下分享的是楊培安的音樂盒(自動播放的哦！)，您可以複製語法貼到您的部落格：

<embed src="http://www.skyhigh.com.tw/peian/musicbox/musicbox(autostart).swf" width="140" height="400">
</embed>

網頁設計範本大賞

星期四, 7月 16, 2009
以下這個網站，提供網頁設計範本的服務，索價都不便宜呢！(創意設計是很值錢的^^)不過，同學在設計網頁時可以參考：
Website Solution 提供許多精美的網頁範本

此外，土芭樂也幫同學找到一些免費的樣版範本，供同學設計網頁時，免費下載參考！！Template Beauty內含有一些免費的網頁範本，同學們可以到此站來翻翻找找，相信一定可以找到理想的版面。

7月 06, 2009

DIV 圖層透明的設定

星期一, 7月 06, 2009
因為同學們製作網頁上的需求，故將 DIV 圖層透明的 CSS 語法設定公告於站上，歡迎同學多加利用！


DIV{
background-color:#FFFFFF;
filter:alpha(opacity=50,Style=0);
width:300;
height:300;
}


Filter使用說明：定義透明度,和淡化的風格

opacity為透明度，值越大透明度越小
style是透明淡化的風格
0 普通透明
1 從左到右淡化
2 由中央淡化
3 星狀淡化
這些效果也可以套用在圖片上
訂閱： 文章 (Atom)

Recent Posts

推播廣告