在 html 內head 區段內加入以下javascript

 

 

影像處像

1. 1. 選取圖形((出現圖形格式工具列)(選擇以下工具處理

·         圖上加字

·         影像透空

·         剪裁影像

·         打淡

·         彩色((黑白

·         旋轉

·         亮度

·         對比

·         立體化

 

 

影像地圖

1. 1.     選取圖形((出現圖形格式工具列)(

2. 2.     選擇以影像工具列(以矩形、圓形、多邊形拖曳圖中的區域(選取link 網頁

 

.書籤鏈結

 

1. 1.選擇「目的地」書籤名稱字串「教育網站」(這裡有介紹很多教育網站)

2. 2.設定書籤名稱 Edit( Bookmark(填入bookmark名稱(教育網站)(ok

3. 3.設定回本網頁端的「教育網站」(選取反白(edit hyperlink

4. 4.建立書籤鏈結 a.先鏈結同網頁 b.再選擇bookmark

5. 5.以後只要按上方的「教育網站」就可以跳到下方「教育網站」區

 

*亦可鏈結不同網頁之間的書籤

 

共用網頁

* include page 例如微軟的首頁上方部份

* 先規劃一個公用網頁

* 在目標網頁中插入公用網頁

1. 1.                設定公用網頁----取消theme 及share border

2. 2.                插入hover button 文字型態且設定鏈結

3. 3.                切換到其它網頁

4. 4.                Insert frontpage component \ include page

5. 5.                挑選公用網頁

 

 

FTP 網站設計

·         同建立 超連結，但是選取檔案後，把 http:// 刪除

用Fpexplor來管理網頁、網站

以不同方式管理網頁網站

 

 

 

 

 

 

 

 

 

如何更改網站名稱

 

如何刪除網站

 

 

如何建立新網站

 

 

把其他硬碟或目錄的網站加入這個網站內

 

 

如何開啟己存在的網站

 

 

 

網站一般設定

…

 

設定網站成中文 encode

 

左側Views模式

1 Folders 目錄 (查看網站結構)

2.ALL Files 檔案 (詳細列出所有網站，觀查是否有單一網頁、 重覆命名網頁)

3.Navigation瀏覽 (以階層式結構查看)

4.Hyperlinks 鏈結 (查看每頁link 關係)

5.Hyperlinks stats (查看鏈結的狀態是否正確)

6.Themes 主題 (快速變更網頁的整體外觀、風格)

7.Tasks 工作清單 (查看有那些網頁本完成，或是待完成)

 

 

 

·         Tools(Web setting ( configuration(WebName

 

 

·         File(Delete Frontpage web

 

 

·         File(New(FrontPage Web

 

 

·         File (Import

 

 

 

 

·         File (Open Frontpage Web …

(按fromWeb(from World wideweb(填入網站名(可以把網路上整個網站都拿下來哦！)

 

 

 

·         Tools(WebSetting

 

 

Tools(WebSetting(Language(Default page encode(選擇中文

設定網站所有網頁套用特定的主題(風格)

Theme(use Select theme

Vivid color :較活潑高亮度的顏色

Actitive Gracphics:引入java 做為按鈕

Background :選用背景！

建立表格

 

(如何建立「規則」的表格？

 

 

 

 

 

 

 

 

(如何調整「欄寬」與「列高」?

 

(table(Insert table(選取

Row列

Column欄

Alignment 整個大表格對齊方式

BorderSize 外框線寬度

Cell padding 字和邊的距離

Cell spacing 內框線的寬度

 

(拖曳表格框線即可

 

 

(如何插入一新列(row)?

 

 

(如何刪除一新列?

 

 

 

 

(把游標置入表格內(table(Insert Rows or Columns(選Rows(選left或right(ok!

 

(選起整列(table (delete Cell

(選取技巧要注意，游標小心移到每列前成為「(」形狀，再按一下左鍵即可！)

 

 

(如何插入一新欄(column)?

(如何刪除一新欄?

 

 

(和上面很像！先選好欄哦！

 

 

(如何插入一小格(cell)?

(如何刪除一小格?

 

 

(和上面很像，注意游標停好小格內位置就可以了

 

(如何合併多個小格成一大格?

(如何分把一大格分多個小格?

 

 

(以拖曳選取技巧選好連續Cell (table (merge Cells

 

(如何建立「不規則」的表格？

 

 

 

(如何設定整個表(table)格的「背景」顏色？

 

(如何設定整個表格(table)的「背景」圖？

 

 

(如何設定表格內小格(cell)的「背景」顏色？

 

(如何設定表格內小格(cell)的「背景」圖？

 

(table(Draw table((出現表格工具)(先以拖曳方式畫出一區域，再畫出表格線，或取橡皮擦去除格線！

 

 

(以滑鼠右鍵按表格(table property(選 Background Color

 

(以滑鼠右鍵按表格(table property(選 Use Background Image(Browse(ClipArt(

選圖！

 

(仝上，(Cell Property(同上

 

 

(仝上，(Cell Property(同上

 

(仝上，(Cell Property(同上

 

(如何設定整個表(table)格的「背景」？

 

 

Light border 格子內(左方)(上方)的格線

Dark border 格子內(古方)(下方)的格線

 

 

網頁動畫特效

(如何讓Home Page 內的段落以動畫方式出現？

 

(選定段落( format (Animation((自行選定一個效果)(Preview 即可看到效！效果說明如下！

Off

沒有任何動態物件的效果

Fly From Bottom

段落的內容從底下飛進來

Fly From Left

段落的內容從左邊飛進來

Fly From Right

段落的內容從右邊飛進來

Fly From Top

段落的內容從上面飛進來

Fly From Bottom-Left

段落的內容從左下方飛進來

Fly From Bottom-Right

段落的內容從右下方飛進來

Fly From Top-Left

段落的內容從左上方飛進來

Fly From Top-Right

段落的內容從右上方飛進來

Fly From Top-Right By Word

段落中的文字會一個一個從右上方飛進來

Fly From Bottom-Right By Word

段落中的文字會一個一個從右下方飛進來

Drop In By Word

段落中的文字會一個一個從上方掉落

Spiral

段落的內容以螺旋的方式飛進來

Zoom In

段落中的文字以逐漸放大的方式顯示段

Zoom Out

落中的文字以逐漸縮小的方式顯示

 

網頁過場特效

如何設定網頁過場特效

(過場特效只有IE 4.0才支援)

·         format( page transition(

·         event 進入或離開網頁

·         transtion effect 設定特效

·         duration 效果的作用秒數

 

 

FrameSet 框架

如何製作frameSet

 

 

 

如何設定frameSet

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

如何再分割frame

 

如何再分割frame

 

如何儲存frame

 

 

 

如何設定無框frame

 

 

 

 

 

 

 

如何設定frame中的超連結！

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

設定選擇出現的類型

 

 

·         File ( new ( frames (選取樣式(確定

·         在各個frame 按 Set initial page(選取網頁

·         或按 New Pages 從空白網頁製作！

 

·         在任何一frame 內(滑鼠右鍵(Frame Property

 

 

框架的名稱設定

框架是否可以調整大小 捲軸控制

·         frame 的寬度設定

·         frame 內文字與外框的距離

預設網頁

 

·         選取一個小frame 或大frame (點一下就可以)( frame (split frame

 

·         選取一個小frame 或大frame (點一下就可以)( frame (delete framet

·         儲存與一般不同是2個frame 要存三個檔，最後一個是包含2個小frame 的 frameSet，也就是一個 frameSet 內含2個frame，總共3個

 

·         在任何一frame 內(滑鼠右鍵(Frame Property(frame Pages(ShowBorder

 

 

 

 

·          

 

 

·         左frame 設定 超連結

 

·         選擇 link 目的網頁，選擇link 後要出現在那一視窗

 

 

·         選擇出現的類型

 

Page Default:範本預設的frame

Same Frame:與超連結相同的frame

Whole Page:取代目前整個frameSet

New Window:另行開啟新的windows

Parent:上一層frame

 

 

 

 

 

表單(Form)設計

簡易的訪客留言版

 

(FrontPage98 Editor (File (New(Page(Guest Book(出現表單(請把內容改成中文)(

(在表單虛線框內按右鍵(form Properties (SenTO 的FileName 欄選擇 留言結果的存檔

(option(指定FileFormat(輸出的格式)

 

自訂表單

Insert (Form Field-->

 

 

 

表單「欄位命名」

表單欄位按右鍵(form field properties

填入 name 及 Initial value(預設初始值) 欄

 

Drop down menu

1.(增加項目 add

2.(送出的值 choice = value

3.(預設選項 initial state = select

4.(允許多列

allow multiple selections

5.(上下順序 tab order

6.(驗證規則 validate

 

Drop down menu 應用

yahoo

蕃薯滕

gais

八爪魚

Text box

1.(name ( 欄位名 )接收儲存網頁所須對應的名稱

2.(initial value 設定預設值

3.(width in characters 顯示的寬度

4.(password field 以密碼方式顯示

5.(validation 驗證規則

a. a.  date type 內容型態

b. b.  text format 資料格式

c. c.  data length 資料長度

d. d.  date value 資料範圍

 

Radio button

1.(group name 群組名稱

2.(value 送出去的值為女生或男生

3.(initial state 預設值

4.(validate 驗證規則

* 製作時用copy 方式則group name 會相同

 

scrolling textbox

1.(name 欄位名

2.(initial value 預設值

3.(windth in characters 顯現的寬度

4.(number of lins 顯現的列高

5.(validate

 

push button

1.(name 取消不打

2.(value /label 提示文字

3.(button /type submit (送出) 或 reset (取消)

 

Form回應確認頁的設計(confirmation page)

1. 1.form 內按右鍵( Form properties(Confirmation page

2. 2.選擇欄位內網頁！

3. 3.編輯網頁內回應欄位: insert ( frontpage component(Confirmation field(填內表單欄位名稱

4. 4.回應確認頁即可在submir後依欄位而出現！

 

 

 

 

 

 

如何建置「總覽網頁」

insert(Table of Content (

·         「總覽網頁」的啟始點 ●有重覆網頁時只列出一次

·         「孤兒網頁也要列出嗎？」

·         每次都要重新計算建新的「總覽網頁」？

 

如何建置「蒐尋引擎」

insert (active elemtnt(search form

 

 

 

(預設蒐尋文字

(蒐尋文字欄寬度

(按鈕的文字

 

 

 

 

 

( All 是關鍵字 代表尋找所有網頁

 

(蒐尋網頁結果所列出的項目

score 代表結果與原蒐尋文字match 的程度

 

 

 

 

 

yahoo

蕃薯滕

gais

八爪魚

 

 

ASP (Active Server Page)

ASP 簡介

Active Server Pages（動態伺服器網頁，簡稱ASP），內含於IIS 3.0、或4.0（或以後版本）當中，提供一個伺服器端（server-side）執行的scripting環境，您可以結合 HTML 網頁、ASP指令和 ActiveX 元件，以產生和執行動態、互動、高效率的網站伺服器（web server）的應用程式。

 

執行Active Server Pages所須環境

以下任何一種環境可以執行Active Server Pages：

·         Windows NT Server 4.0/5.0：執行IIS 3.0、或4.0（或以後版本）。

·         Windows NT Workstation 4.0/5.0：執行IIS 3.0、或4.0（或以後版本）。

·         Windows 95/98：執行Microsoft Personal Web Server（PWS）1.0a/4.0（或以後版本）。

·         或是安裝aspc.exe

 

Active Server Pages語法

.asp檔案

Active Server Pages（ASP）製作成.asp附檔名的檔案，一個.asp檔案是一個文字檔，包括：

·         HTML標記（tags）：「<...>」的部份。

·         VBScript、或Jscript語言的程式碼

·         ASP語法：「<%...%>」的部份。

·         HTML標記（tags）使用「<...>」來將HTML碼包含起來，以與一般的文字區分開來，HTML碼係於使用者的瀏覽器當中執行；而ASP使用「<%...%>」來將ASP的script程式碼包含起來，ASP碼係於伺服器當中執行，執行後產生瀏覽器看得懂的HTML碼，再傳送給使用者。

 

Active Server Pages實作(一)

·         用記事本製作一個能顯示「目前時間」的網頁 now.asp

ASP

<%=now%>

·         把以上檔用記事本存成 now.asp 到 /webshare/scripts 目錄下

·         開啟瀏覽器，輸入 http://127.0.0.1/scripts/now.asp 即可看到結果

 

 

 

Active Server Pages實作(二)

1. 1.        FrontPage Editor ( Insert (Advanced (Script

2. 2.        選擇 VBScript 及 Run Script on Server

3. 3.        Scripe 欄填入 =now

4. 4.        OK! (也就是說 <% 和 %> 不用寫了，系統幫你加上)

 

Active Server Pages實作(三) --輸出字串到使用者的瀏覽器！

<%

Response.Write "歡迎光臨"

%>

以上是手動方式建立，使用 FrontPage Editor 時則不用打 <%及 %>

 

Active Server Pages實作(四) --使用迴圈

<% for i = 1 to 5 %>

COLOR=#0000FF>快速掌握Internet技術

<% next %>

 

Active Server Pages實作(五) --設定變數(=的用法)

<%

currentdate=date()

currenttime=time()

welcome=currentdate&currenttime

response.write(welcome)

%>

· 變數 currentdate 和 currenttime 及 welcome 可以直接指定值

· &表示字串連接

 

 

ASP 連接資料庫--登錄功能

以asp 建立「news」的新增功能

·         以Access建立通訊錄 mdb檔

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

·         設定Windows ODBC

 

 

 

 

 

 

 

 

 

· 建立登錄用的 htm

 

 

 

 

 

 

· 建立登錄ASP 程式

▼建立mdb 檔

開始(程式集(ACCESS(空白資料庫(確定((設定一新檔名juju)(建立。

到此為應該很簡單，只要有Word的經驗都很容易上手！

 

 

 

▼mdb 檔內建立表格檔

新增(資料表工作檢視(確定

(關閉視窗)((設定table 名稱 news)(確定(是(設計。

一個mdb 內可以有很多的table ，table 內欄位性質要唯一(atomic)符合 1NF，而且最好之間最好不要遞移相依，符合2NF(即使不合也沒關係！還是可以運作！)

 

▼定義table 欄位

 

定義每欄「允許零長度：是」「必須有資料：否」「設id 為主鍵值」

(記得要存檔，存放在 \wwwroot\database 不錯哦，我是這樣子放的！)

 

 

 

 

· ▼       設定ODBC32

開始(設定(控制台(ODBC(系統資料來源(新增(Microsoft Access Driver (*.mdb)(完成(

(資料來名稱填入自訂的名稱，我通常填入 mdb 檔同名，方便管理)(敘述可不填，看你的記性吧(選取(

選取juju.mdb(完成(ok !

 

 

請看http://192.192.59.7/run/news/news.html

寫在後頁(附A)上，可以直抄無妨看看，自己建立時要小心，各欄命名最好要和上面 mdb 欄位相同

如下圖！

 

 

 

· ▼       寫在後頁(附B)上，請把它存在 /webshare/scripts

 

ASP取得表單（form）輸入資料的方法

將輸入的資料傳送到伺服器的方法，係使用HTML標記

…的「表單」（form），於用戶端瀏覽器輸入資料，按下「SUBMIT」按鈕後，將輸入的資料傳送到伺服器加予處理。由表單（form）的METHOD得知，用戶端瀏覽器可以用下面兩種方法，將輸入的資料傳給網站的伺服器：

 

GET：用戶端將資料附加到 URL 後，格式為「?欄位1=輸入資料1&欄位2=輸入資料2&... 」，再將它送到伺服器。譬如ACTION設為http://www.abc.com，欄位Name的輸入資料為Jack，欄位Age的輸入資料為15，則使用GET方法，傳給網站伺服器資料為http://www.abc.com?Name=Jack&Age=15。

POST：用戶端利用HTTP訊息資料欄位將資料傳送到伺服器。

ASP取得表單（form）輸入資料的方法，係使用Active Server Pages一個內建的「物件」（object），叫做Request，依據GET、POST方法而異：

 

·         GET：

使用「輸入資料= Request.QueryString("欄位名稱")」或「Request. ("欄位名稱")」，將附加於URL後的資料取出，以取得此欄的輸入資料。

·         POST：

使用「輸入資料=Request.Form("欄位名稱")」或「Request. ("欄位名稱")」，讀取HTTP 訊息資料欄位，以取得此欄的輸入資料。

·         無論GET或 POST方式，都可以使用「Request. ("欄位名稱")」取得此欄的輸入資料。

 

 

 

 

 

 

ASP 連接資料庫--顯示資料庫內容功能

阿德的新消息

<%

Set Conn = Server.CreateObject("ADODB.Connection")

Conn.Open "juju","",""

SQLQ = "Select * from news order by Id desc"

Set RS = Conn.Execute(SQLQ)

%>

編號

公佈時間

消息標題

<% Do While Not RS.EOF %>

<% For i = 0 to RS.Fields.Count - 2 %>

<% = RS(i) %>

<% Next %>

<%

RS.MoveNext

Loop

RS.Close

Conn.Close

%>

妨

以IDC & HTX建立網站資料庫

以idc 建立「個人通訊錄」的新增功能

·         以Access建立通訊錄 mdb檔

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

·         設定Windows ODBC

 

 

 

 

 

 

 

 

 

· 建立 IDC 及 HTX 檔

 

 

 

 

 

· 設定 IDC 所在目錄的可執行權利

▼建立mdb 檔

開始(程式集(ACCESS(空白資料庫(確定((設定一新檔名juju)(建立。

到此為應該很簡單，只要有Word的經驗都很容易上手！

 

▼mdb 檔內建立表格檔

新增(資料表工作檢視(確定

(關閉視窗)((設定table 名稱 address)(確定(是(設計。

一個mdb 內可以有很多的table ，table 內欄位性質要唯一(atomic)符合 1NF，而且最好之間最好不要遞移相依，符合2NF(即使不合也沒關係！還是可以運作！)

 

▼定義table 欄位

定義每欄「允許零長度：是」「必須有資料：否」「設id 為主鍵值」

(記得要存檔，存放在 \wwwroot\database 不錯哦，我是這樣子放的！)

 

 

· ▼       設定ODBC32

開始(設定(控制台(ODBC(系統資料來源(新增(Microsoft Access Driver (*.mdb)(完成(

(資料來名稱填入自訂的名稱，我通常填入 mdb 檔同名，方便管理)(敘述可不填，看你的記性吧(選取(

選取juju.mdb(完成(ok !

 

 

 

寫在後頁(附一)上，可以直抄無妨看看，如果懶一點就

 

ftp://ennd.aide.gov.tw/software/idc裡頭有

 

 

· ▼       如果你是win95那就接放在 \wwwroot\sctipts裡就好了

 

 

· 撰寫 html 表單及網頁

 

 

 

 

· 終於完成了！

 

 

(請注意各表單內定義必與 mdb 檔各欄定相同!!)

如：

 

 

新增資料到ACCESS的功能！雖然還缺，查詢功能！不過簡易查詢那就比就容易了

 

 

·         以idc 建立「個人通訊錄」的查詢功能

 

· 查詢功能的 IDC 及HTX檔

· 查詢功能的網頁！

 

·         你可以試試看完成刪除及修改的功能！

 

 

 

 

 

· ▼在附三及附四裡！

 

 

· ▼但是可能無法控管權限(例如以密碼來辨別身分)，造成誰都可以來修改！這有點危險！還是改以ASP或其他CGI控管！

· ▼所以IDC + HTX 適合以「最新消息」登錄系統！較無刪除，修改的可能，

 

 

 

附一:(登錄功能之idc與htx)

address_add.idc 檔

DataSource:juju

Template:address_add.htx

SqlStatement:

+insert into juju(name,comment,tela,exta,telb,extb,手機,fax,email,address)

+values ('%name%','%comment%','%tela%','%exta%','%telb%','%extb%','%手機%','%fax%','%email%','%address%')

 

address_add.htx 檔

新增個人通訊錄

新增個人通訊錄

編號

姓名

其他

電話a

分機a

電話b

分機b

手機

傳真

email

地址

<%id.idc%>

<%idc.name%>

<%idc.comment%>

<%idc.tela%>

<%idc.exta%>

<%idc.telb%>

<%idc.extb%>

<%idc.手機%>

<%idc.fax%>

<%idc.email%>

<%idc.address%>

回主頁。

附二：(登錄功能的原html)

通訊錄

查詢

登錄

修改

刪除

姓名：

職稱：

電話 a：

分機 a：

電話 b：

分機 b：

手機：

FAX：

email：
地址：

[ 上一頁 |

回主頁 ]

附三：(查詢功能的idc與htx)

·         Address.idc 檔

DataSource:juju

Template:address.htx

SqlStatement:

+Select * from juju

·         Address.htx 檔

個人通訊錄

<%begindetail%>

<%if CurrentRecord EQ 0 %>

編號

姓名

其他

電話a

分機a

電話b

分機b

手機

傳真

email

地址

<%endif%>

<%id%>

<%name%>

<%comment%>

<%tela%>

<%exta%>

<%telb%>

<%extb%>

<%手機%>

<%fax%>

<%email%>

<%address%>

<%enddetail%>

<%if CurrentRecord EQ 0 %>

找不到資料啦！

<%endif%>

回主頁。

附四：(查詢功能的原html)

查詢

登錄

修改

刪除

姓名

職稱

電話a

電話b

手機

傳真

email

地址

照片

[ 上一頁 |

回主頁 ]

 

 

附五：常用SQL語法簡介

增加記錄

INSERT INTO

[({,})]

VALUES ( ,{})|

 

刪除記錄

DELETE FROM

[WHERE ]

 

更改記錄

UPDATE

SET = {, = }

[WHERE ]

 

立資料檔

CREATE TABLE

( [NOT NULL] 　{, [NOT NULL]})

附錄 A --新聞登錄 news.htm

阿德的新聞留言版

 

 

大家來互通有無，說說最近的活動！

留言的主題：
　

　　　

你的大名 (小名也可以唷)：
　　　　

發表內容：

　　　

 

附錄 B --新聞登錄 news_add.asp

阿德(ytpeng@mail.im.tku.edu.tw)的新消息

<%

Set Conn = Server.CreateObject("ADODB.Connection")

Conn.Open "juju","",""

SQL2 = "insert into news (Title, LogTime, Who, Content) VALUES(" & NewID & ",'" & Request.Form("Title") & "','" & DateValue(Now()) & "','" & Request.Form("Who") & "', '" & Request.Form("Content") & "')"

Set RS = Conn.Execute(SQL2)

%>

<% = DateValue(Now()) %>

<% =Request.Form("Title") %>

<% =Request.Form("Who") %>

<% =Request.Form("Content") %>

<%

Conn.Close

%>