08:20-09:10 筆試, 筆試總分 50分
(最後第21題簡答題10分, 其餘每題2分)
答案請寫在答案卷, 別忘了學號姓名, 9:21收筆試答案卷 !
(最後第21題簡答題10分, 其餘每題2分)
答案請寫在答案卷, 別忘了學號姓名, 9:21收筆試答案卷 !
(1)下列何者可讓您在DreamWeaver同時檢視頁面設計與程式碼?
A. 檢查
B. 程式碼檢查
C. 分割檢視
D. 設計檢視
(2)HTML程式碼的哪一行敘述使用<A>標籤與href屬性連結到絕對URL的連結?
A. <a href="123.htm">Overview</a>
B. <a href="#chapter1">Overview</a>
C. <a href="http://www.acmetoon.org">Acme Toons!</a>
D. <img src="http://www.acmetoon.org/toonstory/image11.png" />
(3) 下列哪些是合法的CSS選擇器(Selector)名稱?(複選)
A. id_swf
B. _swfHeader
C. .swfHeader
D. #swfHeader
(4)哪個HTML標籤會將文字以斜體顯示?
A. tr
B. h1
C. title
D. em
(5)如何在插入點將div標籤元素新增到html文件上?(兩個答案)
A. 選取「插入」>「版面物件」>「Div標籤」
B. 選取「插入」>「版面物件」>「HTML」>「水平尺規」
C. 在「插入」面板的「版面」類別中,按一下「iFrame」按鈕
D. 在「插入」面板的「版面」類別中,按一下「插入Div標籤」按鈕
(6)使用div標籤而代替表格來安排網頁版面的主要益處為?
A. 方便程式設計人員進行程式撰寫
B. 能更輕易在網頁上顯示影像
C. 在更短時間內載入嵌入式Flash項目
D. 提供遵守標準結構的網站
(7)絕對位置(AP)元素如何放置在html頁面上?
A. 使用定位點
B. 在表格儲存格中
C. 在表格的欄(column)與列(row)中
D. 依據上(top)與左(left)座標
(8)哪一種功能用來建立與存放代碼以便重新使用?
A. 資產
B. 範本
C 巨集
D. 片段
(9)哪三種選項是建立動畫與互動式內容的工具?(選擇三項)
A. PERL
B. CSS3
C. JavaScript
D. Adobe Flash
E. HTML5
(10)當使用「Dreamweaver CSS入門者版面」來建立CSS頁面版面時,
可選取哪兩種頁面類型?(兩個答案)
A. PHP
B. XML
C. CSS
D. HTML
E. Javascript
F. Actionscript
(11)設定網站測試伺服器時,能使用哪三種伺服器模式?(三個答案)
A. Ruby
B. PHP MySQL
C. ColdFusion
D Asp Javascript
E. ActionScript
(12)建立連結區域後,必須使用「屬性檢視窗」改變什麼以啟動功能?
A. 目標
B. 地圖名稱
C. CSS替代
D. 替代文字
(13)使用不同的監視器與瀏覽器顯示時,下列哪兩個顯示元素會有所改變?(兩個答案)
A. 色彩
B. 多媒體
C. 瀏覽
D. 頁面版面配置/大小
E. 計算速度
(14)當在網站中選擇納入多媒體類型時,應考慮哪個項目?
A. 資料庫結構
B. 所使用之CSS的複雜性
C. 使用者的教育程度
D. 必要之外掛程式的可用性
(15)哪一種原則能確保網站的可存取性?
A. 使用乾淨版面與設計
B. 使用CSS區分內容與設計
C. PARC(近似、對齊、重複、對比)
D. POUR(可察覺、可操作、可理解、耐用)
(16)選取「檢視」>「視覺輔助」>「CSS版面背景」時,
會執行什麼動作使所有CSS版面區塊可以被看見?(兩個答案)
A. 隱藏背景色彩與影像
B. 在所有CSS版面方塊周圍顯示外框
C. 顯示所選取之CSS版面方塊的邊框間距與邊界
D. 使用不同顏色暫時顯示每一個CSS版面區塊
(17)哪一種選項可用來限制編輯可修改的html文件部分?
A. 參與面板
B. CSS樣式表
C. 輔助功能選項
D. Dreamweaver範本
(18)哪一類型的著作內容可以在不需要授權的狀況下存取使用?
A. 具著作權的素材
B. 未發表的素材
C. 具註冊商標的素材
D. 網站擁有者建立的素材
(19)視障人士用的螢幕讀取器可以讀取HTML頁面的哪兩種元素?(兩個答案)
A. 頁面中的文字
B. meta標籤資訊
C. Shockwave檔案裡的文字
D. 影像上的替代文字
(20)在建立網站時,分鏡板常使用於哪兩種選項?(兩個答案)
A. 顯示網頁頁面的詳細內容
B. 在網站開發完成前供客戶事先許可
C. 在開發之前建立可用性測試
D. 顯示頁面元素的放置
(21)簡答題(本子題 10 分)
(a)3%在建立網站時,通常很基本的網頁會有這三項:
一個 index.html 和 兩個子目錄 pages, image;
請簡單說明這三項各自的用途(或可能用途)
(b)2%請簡單說明何謂網頁的錨點? (不可超過20字)
(c)2%請簡單說明為何現在做網頁已經很少人使用"割版"? (不可超過25字)
(d)3%請簡單說明何謂RWD網頁? (不可超過35字)
09:10-10:45實作, 請依規定上傳到你的 xxx.LionFree.net
並在數位學習今日簽到區依規定繳交截圖與你的網址
並在數位學習今日簽到區依規定繳交截圖與你的網址
** 如果實作題都沒做, 則你這門課分數最高不會超過75分!
(再次提醒: 全勤或通過 DW CS6 證照可及格, 全勤且通過 DW CS6 證照則至少70分)
Hostinger 也有免費 Web Host (據說免費很慢)
英國 https://www.hostinger.co.uk/web-hosting
香港 https://www.hostinger.com.hk/web-hosting
日本 https://www.hostinger.jp/web-hosting
英國 https://www.hostinger.co.uk/web-hosting
香港 https://www.hostinger.com.hk/web-hosting
日本 https://www.hostinger.jp/web-hosting
這有一篇關於免費虛擬主機 Hostinger 的推薦文
https://free.com.tw/hostinger/
https://free.com.tw/hostinger/
申請 000Webhost
好消息是這個不是使用 CPanel, 所以不會動不動就把你 LogOut !
(1)認證有點麻煩, 有如整人節目, 注意不要急著按下認證, 因為它會不斷生出新圖片 !
ㄍ 暗 .. 我點了將近三分鐘才通過 ! 差點沒氣死 !!
(2)通過圖片認證後, 它會寄信給你, 收信並點連結以便驗證你信箱
(3)驗證通過後, 選一個容易記的網站名稱(子網域不要錢)以便建立網站
阿我當然還是選 tsaiwn
意思是我的網址會是 http://tsaiwn.000webhostapp.com/
真是麻煩 ㄝ .. 網址變這麼長 .. 沒辦法, 免費只好將就囉 :-)
** 其實, 000WebHost 佛心來著, 它有提供數十個免費的網址可建立子網域 (SubDomain)
打入子網域名稱, 例如我打入 tsaiwn
然後從下拉選單的數十免費個網域 (Domain) 選一個 (建議選越短越不容易弄錯的)
然後從下拉選單的數十免費個網域 (Domain) 選一個 (建議選越短越不容易弄錯的)
我選了 net23.net 這不會被看錯且又很短的網域
這樣, tsaiwn.net23.net 短多了吧 :-)
(4)接下來把你的電腦上做好的網站 Upload 上傳
(4a)提醒選上傳(有往上箭頭那個)以便把你電腦上的網頁上傳
(4b)然後進入它的檔案管理員 (File Manager)
(4c)點上傳檔案那個小 icon 之後, 可選擇檔案上傳
(4d)我故意上傳一個 test.htm
(5)先這樣, 看看它怎麼說 ?
(5b)結果它說裡面沒有 index.xxx ??? 不過有個 test.htm 可以點 :)
那就點看看囉 !
那就點看看囉 !
(5c)靠腰ㄟ.. 怎都是亂碼 ??
因為編碼問題啦 ...
就是我門製作的網頁內沒指定編碼, 瀏覽趣預設的與網頁不符合就會這樣 !!
因為編碼問題啦 ...
就是我門製作的網頁內沒指定編碼, 瀏覽趣預設的與網頁不符合就會這樣 !!
?? 怎麼辦?
有兩個解決方法:
一個是修改你的網頁內 <meta 描述正確的 encoding>
在 <head> 到 </head> 之間加入如下:
<meta charset="UTF-8">
或
<meta charset="Big5">
有兩個解決方法:
一個是修改你的網頁內 <meta 描述正確的 encoding>
在 <head> 到 </head> 之間加入如下:
<meta charset="UTF-8">
或
<meta charset="Big5">
另一個方法是要求瀏覽網頁者臨時設定網頁編碼 (這比較不合理 !)
這在 Chrome 新版本(chrome 55)之後比較麻煩:_
這在 Chrome 新版本(chrome 55)之後比較麻煩:_
要先加入外掛 (Chrome Extension) 才能設定 (Google 故意的)
(5d)加入外掛之後就可以設定網頁 Encoding 了
(5e)看到網頁囉 :
(6)偷看一下網頁原始碼 (View Source)
<html>
<head> <title>這是 test.htm</title>
<style>
P { font-size:24px;color:red; }
h2 { font-size:58px;
}
.ggg {
font-size:38px; color:blue;
}
.yyy {
font-size:58px; color:darkGreen;
}
#yyy {
font-size:116px; color:darkred;
}
<!---- 點開頭的 Selector (選擇子) 是 class 類別, #開頭的 Selector 是 id ----------->
</style>
</head>
<body background="cyan">
<b>
<p>
這是 P 啦 -- 不是屁喔 !
<br>
<p class="ggg">
這是第 2 個 P, 有 class 是 ggg
</p>
<p id="yyy">
這是第3 個 P, <br> 有 id 是 yyy
</p>
<h1> h1 h1標題 一 h1 </h1>
<h2> 這是 h2 標題 2 啦 ! 字比 h1 還大喔 ! 因為前面 style 的關係 !
</h2>
<br>
<hr color=red>
<br>
</b>
</body>
</html>
<head> <title>這是 test.htm</title>
<style>
P { font-size:24px;color:red; }
h2 { font-size:58px;
}
.ggg {
font-size:38px; color:blue;
}
.yyy {
font-size:58px; color:darkGreen;
}
#yyy {
font-size:116px; color:darkred;
}
<!---- 點開頭的 Selector (選擇子) 是 class 類別, #開頭的 Selector 是 id ----------->
</style>
</head>
<body background="cyan">
<b>
<p>
這是 P 啦 -- 不是屁喔 !
<br>
<p class="ggg">
這是第 2 個 P, 有 class 是 ggg
</p>
<p id="yyy">
這是第3 個 P, <br> 有 id 是 yyy
</p>
<h1> h1 h1標題 一 h1 </h1>
<h2> 這是 h2 標題 2 啦 ! 字比 h1 還大喔 ! 因為前面 style 的關係 !
</h2>
<br>
<hr color=red>
<br>
</b>
</body>
</html>
*** 如果是 IE 或舊版的 Chrome 可按滑鼠右鍵直接改 Encoding 編碼
(7)除了使用它的 File Manager 檔案管理員,
也可以用 FTP 或 DreamWeaver 把檔案丟上去你的網站
也可以用 FTP 或 DreamWeaver 把檔案丟上去你的網站
?? 那我的 FTP 網址和帳號呢 ?
(7a)注意看看你帳號內關於 FTP 的信息
*** 請注意! 它不必像 LionFree.Net 還要建立 FTP 帳號 (其實 LionFree 也可以不建立就用你 CPanel 帳號做 FTP)
還有, 它的 FTP 帳號很短, 不要包括 @機器名稱, 例如我的是 tsaiwn
還有, 它的 FTP 帳號很短, 不要包括 @機器名稱, 例如我的是 tsaiwn
(7b)把該些 FTP 信息拿來設定你的 DreamWeaver( 或 FileZilla)
***注意根目錄設定
***再次提醒, 注意根目錄設定 !! public_html 是一般網頁的根目錄 !
上傳網站之前務必仔細檢查 DW 設定是否正確 !!
(8)剛才我們已經從我的LionFree.Net 抓下我的 mid.tsaiwn.LionFree.Net 網站,
現在要從 DW 把我原先 LionFree 的網站丟上去 (Upload) 我的 000Webhost
現在要從 DW 把我原先 LionFree 的網站丟上去 (Upload) 我的 000Webhost
(9)來看看是否 https://tsaiwn.000webhostapp.com/ 已經 OK ?
Ohh Yeah !!!
Ohh Yeah !!!