CYUT NC

(1)

CYUT NC

視聽教學媒體認識與應用 Introduction and

application in audio-visual media of instruction

課號：3663

上課班級：幼保二進四A

上課地點：G-609

(2)

CYUT

Outline

NC

Introduction

Internet Explorer & data searching

Construction personal website

Homepage design (FrontPage)

Graphic software (PhotoImpact)

Animation software (Flash)

Video & audio software

(3)

CYUT

網頁製作流程

NC

設定主題

(專業、教學、下載、個性…)

取得工具

(PhotoShop, PhotoImpact, Flash,Animator, …)

編寫網頁

(FrontPage, Dreamweaver,…)

上傳網頁

(Ftp,…)

登陸宣傳

(By your self)

維護更新

(By your self)

(4)

CYUT

個人網頁空間（學校提供）

NC

空間大小：二技四技學生50MB

首頁檔案名稱：index.htm或index.html

建置方式：

登入主機、建立public_html路徑

• 利用telnet或Ftp軟體登入home.cyut.edu.tw

• 帳號、密碼：學校提供之email帳號及密碼

• 建立public_html路徑 (mkdir public_html)

• 改變此路徑權限 (chmod 755 public_html)

• 改變個人目錄的存取權限 (chmod 711 s8954486)

網頁資料上傳至public_html路徑內 (Ftp軟體)

瀏灠個人網頁

http://www.cyut.edu.tw/~s8954486 (Note: 紅色字體請改為自己的學號)

(5)

CYUT NC

個人CGI放置說明

目前支援 PHP(*.php)、PERL (*.cgi)、

ShellScript(*.cgi)

若是使用perl language,程式路徑請改為

"/usr/local/bin/perl“

Note：在 UNIX 系統中大小寫是不同的，如：

index.html 不等於 Index.html ， simple.jpg 不等於 simple.JPG

。

(6)

CYUT

1. FrontPage NC

*Main Structure of HTML *

<HTML>

<HEAD>

<TITLE>...</TITLE>

</HEAD>

<BODY>

… …

</BODY>

</HTML>

*空格與空行不具作用*

(7)

CYUT NC

BR (Break) & P (Paragraph)

<BR> and <P>

[說明]: 斷行與分段指令，基本上分段會比斷行還

多空出一行

BLINK

<BLINK> ... </BLINK>

[說明]: 閃爍功能 Example :

<BLINK>閃爍（IE好像沒效果）

</BLINK>

(8)

CYUT NC

建立個人網頁首頁(index.htm)

網頁內容編輯(似MS Word)

使用可摺疊式大綱

將文字全部選取，並設項目符號

• 格式→項目符號及編號→一般項目符號/編號→選取適當選項

再次選取全部資料，並設定摺疊大綱

• 格式→項目符號及編號→其他→勾選啟用可摺疊大綱

選取子項目資料，並內縮二層

插入水平線

插入→水平線

點擊二下水平線，可修改水平線內容（寬、高、對齊方式、色彩等）

(9)

CYUT NC

表格製作(似MS Word)

表格標題建立

表格→插入→標號

表格→表格內容→表格/儲存格/標號

(修改表格屬性)

文繞圖方式

表格→表格內容→表格→文繞圖（靠左、右）

表格框線

表格→表格內容→表格→框線

(大小＝0表示不顯示線

條)

表格背景

表格→表格內容→表格→背景

表格→手繪表格→清除

(刪除不必要的線條)

(10)

CYUT

框架的製作

NC

檔案→開新檔案→單頁網站→單頁網站

插入內置框架

繪製２Ｘ２的表格（依個人需求）

插入→內置框架，將內置框架放入右下角儲存格中→儲存檔案

準備子頁面

開新頁面後，輸入標題→儲存檔案

指定初始網頁

點選設定初始網頁→選擇預設頁面的檔案。

建立結構樹

將子頁面拖曳到結構樹中→調整結構樹的內容

建立導覽 (回設計畫面)

插入→導覽→連結列→根據導覽結構的列→下一步→下一步→直式→ 完成→選子層級→確定

指定連結框架

在網頁中按右鍵找［網頁內容］ →點選筆→點選L1 →確定

(11)

CYUT

垂直框架

NC

<html>

<frameset cols="25%,50%,25%">

<frame src="frame_a.htm">

<frame src="frame_b.htm">

<frame src="frame_c.htm">

</frameset>

</html>

(12)

CYUT

水平框架

NC

<html>

<frameset rows="25%,50%,25%">

</frameset>

</html>

(13)

CYUT

混合框架

NC

<html>

<frameset rows="50%,50%">

<frameset cols="25%,75%">

</frameset>

</html>

(14)

CYUT

圖片格式（副檔名）

NC

插入→圖片→從檔案

gif

(graphics interchange format)：以8 位元或256 色儲存點陣影像資料

jpg

(joint photographic expert group)：

失真壓縮方法，24位元影像（全彩影像，可支援16.7 百萬色）

png

(portable network graphic)：48位元的彩色影像

bmp (bitmap)：點陣圖，未經過壓縮的圖檔格式

wmf (Windows MetaFile )：16 位元的中繼檔格式，

可以同時包含向量資訊以及點陣圖資訊

dib (device-independent bitmap)：在檔案內包含了顏色的資訊，所以在不同顯示器之下，所顯示的結果仍然相同

右鍵→網頁內容→設定格式→背景圖片/色彩

(15)

CYUT

圖片屬性設定

NC

檢視→工具列→圖片→設定透明色彩

點擊圖片→一般→替代顯示→選擇低解析度圖片或輸入替代文字

製作按鈕圖片

檢視→工具列→圖片→按鈕形

(16)

CYUT

超連結

NC

選取文字/圖片/按鈕→插入→超連結→輸入或選取網址/電子郵件地址/檔案

網頁內部連結

選取資料(被連結處)→插入→書籤→確定（可自行修改書籤名稱）

選取資料(欲連結處)→插入→ 超連結→書籤

圖像地圖製作

檢視→工具列→圖片→矩形/圓形/多角形作用區→選取

連結目的地

(17)

CYUT NC

<A HREF= scheme://host-name/path

>

[說明] : 錨 (ANCHOR) 之設定與使用 -- scheme : http, ftp, telnet

-- hostname : web pages 的 link若在同一 host，則可以省略

-- path : 路徑或html檔名

(18)

CYUT NC

anchor (link) in other server :

<A HREF=“http://www.cyut.edu.tw”>朝陽科技大學首頁</A>

<A HREF="course.html">Course</A>

FTP download :

<A HREF=“ftp://techart.nia.edu.tw/pub/win95/media

/acdc3222.exe">Here</A> to download Gifcon.exe

Telnet :

(19)

CYUT NC

target=框窗名稱：

這在『框架標籤』中也有提到，而且也只有在框架（框窗 or Frame）中才用得到。正常而言，框窗有各自的名稱，因此，我們可以利用此標籤，來指定連結的內容顯示到哪一個框窗中。

target=_blank：

將連結的畫面內容，開在新的瀏覽視窗中。

target=_parent：

將連結的畫面內容，當成文件的上一個畫面。

target=_self：

將連結的畫面內容，顯示在目前的視窗中。

target=_top：

這個參數可以解決新連結的畫面內容，被舊框窗包圍的困擾，使用這參數，會將整個畫面重新顯示成連結的畫面內容。

<A HREF=http://www.cyut.edu.tw/

target=blank>朝陽科技大學首頁</A>

(20)

CYUT

Homework #1 NC

1.

請建立個人網頁之首頁(分割頁面方式)，並自行設計底色/底圖及美工(20%)

2.

請建立個人資料之網頁(含學、經歷及個人簡短自述)並與首頁連結(20%)

3.

請建立我的課表之網頁(課程須與程網頁連結，或學校之教學大綱網頁連結)並與首頁連結(20%)

4.

請建立我的最愛之網頁(內含文字及圖片形式之超連結) 並與首頁連結(20%)

5.

簡要個人心得及問題討論(20%)

Due: 2006/10/22

繳交方式：email至hcchu@cyut.edu.tw 郵件主旨：作業一（學號及姓名）

內容：個人網址及第５題之電子檔

(21)

CYUT

表單製作

NC

插入→表單→表單/文字方塊/文字區域/核取方塊/選項按鈕/下拉式清單方塊/進階按鈕

表單資料去向

右鍵→表單內容→選擇儲存結果的地方

(22)

CYUT NC Trick:

<html>

<head>

<meta http-equiv="Content-Type"

content="text/html; charset=big5">

<meta http-equiv="refresh" content="0;

url=http://www.cyut.edu.tw/~s8954486/ind ex.htm">

<title>新網頁1</title>

</head>

<body>

</body>

</html>

(23)

CYUT NC

<!–

javescript program / comment -->

CYUT NC

CYUT NC

視聽教學媒體認識與應用 Introduction and

application in audio-visual media of instruction

課號：3663

上課班級：幼保二進四A

上課地點：G-609

Outline









網頁製作流程

設定主題

取得工具

編寫網頁

上傳網頁

登陸宣傳

維護更新

個人網頁空間（學校提供）

空間大小：二技四技學生50MB

首頁檔案名稱：index.htm或index.html

建置方式：



• 利用telnet或Ftp軟體登入home.cyut.edu.tw

• 帳號、密碼：學校提供之email帳號及密碼

• 建立public_html路徑 (mkdir public_html)

• 改變此路徑權限 (chmod 755 public_html)

• 改變個人目錄的存取權限 (chmod 711 s8954486)





個人CGI放置說明





。

多空出一行

建立個人網頁首頁(index.htm)

網頁內容編輯(似MS Word)

使用可摺疊式大綱



• 格式→項目符號及編號→一般項目符號/編號→選取適當 選項



• 格式→項目符號及編號→其他→勾選啟用可摺疊大綱



插入水平線

 插入→水平線



表格製作(似MS Word)

表格標題建立

 表格→插入→標號

 表格→表格內容→表格/儲存格/標號

文繞圖方式

 表格→表格內容→表格→文繞圖（靠左、右）

表格框線

 表格→表格內容→表格→框線

條)

表格背景

 表格→表格內容→表格→背景

表格→手繪表格→清除

框架的製作

檔案→開新檔案→單頁網站→單頁網站

插入內置框架

準備子頁面

指定初始網頁

建立結構樹

建立導覽 (回設計畫面)

指定連結框架

垂直框架

水平框架

混合框架

圖片格式（副檔名）

插入→圖片→從檔案

 gif

 jpg

 png







右鍵→網頁內容→設定格式→背景圖片/色彩

圖片屬性設定

• 格式→項目符號及編號→一般項目符號/編號→選取適當選項

插入→水平線

表格→插入→標號

表格→表格內容→表格/儲存格/標號

表格→表格內容→表格→文繞圖（靠左、右）

表格→表格內容→表格→框線

表格→表格內容→表格→背景

gif

jpg

png

點擊圖片→一般→替代顯示→選擇低解析度圖片或輸入替代文字

檢視→工具列→圖片→按鈕形

選取文字/圖片/按鈕→插入→超連結→輸入或選取網址/電子郵件地址/檔案

檢視→工具列→圖片→矩形/圓形/多角形作用區→選取

請建立個人網頁之首頁(分割頁面方式)，並自行設計底色/底圖及美工(20%)

請建立個人資料之網頁(含學、經歷及個人簡短自述)並與首頁連結(20%)

請建立我的課表之網頁(課程須與程網頁連結，或學校之教學大綱網頁連結)並與首頁連結(20%)

插入→表單→表單/文字方塊/文字區域/核取方塊/選項按鈕/下拉式清單方塊/進階按鈕

右鍵→表單內容→選擇儲存結果的地方