陳擎文教學網：數典實作

數典管理系統的核心技術與實作步驟：
(1)建立描述物品的後設資料建置（Word，Excel）
(2)建立物品資料庫（SQL server, Access）
(3)物品數位化典藏（影片，照片，3D建模）
(4)架設網站（IIS，Apache）
(5)建立各種互動網頁來表示數位化成果（Asp.net，php，jsp）

介紹3種常用的互動式網頁設計方法：【Dreamweaver ASP.NET網頁設計、Visual Studio .NET 免程式互動式網頁設計、Visual Studio .NET ASP.NET網頁設計】

所需相關的工具與知識：
 資料庫操作 -- Access，或SQL server
 資料庫程式 -- SQL 語法
 Dreamweaver-- 坊間最常用來製作網頁的基本軟體
 Visual Studio .NET (ASP.NET)-- 坊間最常用來製作與伺服器資料庫連線的網頁工具
 ASP.NET程式-- 一種常見的互動網頁程式
 VB.NET程式-- 一種常見的視窗程式

上課程式碼即時貼網站

線上黑板( Online blackboard)

上課加分系統

上課求助系統

學生互動網頁作業超連結上傳區

下載軟體（Apache架站軟體)

課外參考書籍電子書下載

作業與考試上傳方法

上傳注意事項

範例網站示範：dreamweaver

範例網站示範：vb.net+asp.net+網頁模板

Chp0 :試用版軟體下載安裝

vs.net 2008 免費版下載

vs.net 2008 Express

Chp1 : 簡介

下載講義

Chp1講義

下載講義

教學大綱

Chp2 : 架站練習，與蒐集已經寫好的各類互動網站

(1)

(1)windows 7使用IIS架站

01.window 7打開IIS功能的方法：
A.進入控制台->程式和功能->選擇關閉或開啟Windows功能：
B.勾選Internet Information Service並按下確定：
C.打開IIS服務：控制台->程式和功能->開啟或關閉windows功能->勾選：Internet Information Service(IIS)->
（注意：要再勾選：world wild web功能->應用程式開發功能->勾選ASP.net，ASP）
D：如何打開IIS：進入控制台->系統管理工具->Internet Information Service(IIS)->點開連線->站台，預設會有一個Default Web Site啟動
E.檢查有無開啟服務：打開瀏覽器輸入localhost，就會看到預設的IIS網頁
F.建立虛擬目錄（實際目錄不可有中文名稱，例如：桌面）

02.IIS執行asp.net程式與資料庫，必須修改有些設定，尤其是64位元電腦：注意事項

03.練習範例：源碼
A.貓走路網頁（html)
B.網頁模板（html)
C.iPod網路商店（asp.net+Access資料庫）
D.訪客留言簿（asp.net+Access資料庫）
E .拍賣網站（asp.net+Access資料庫）
F.網路商店（asp.net+SQL Server 資料庫）

(2)

(1)windows 10 使用IIS架站

01.window 10打開IIS功能的方法：
A.window 10打開IIS功能：
教學網頁1
教學網頁2
教學網頁3

下載講義

下載網站(1)

請購陳會安ASP.NET 2.0範例(旗標出版社)

下載網站(2)

(2)

(2)使用Apache架站

01.下載架站軟體：下載phpStudy

02.練習範例：源碼
A.貓走路網頁（html)
B.網頁模板1，網頁模板2（html)

C.PHP討論區範例（php+mySQL資料庫）
D.discuz論壇範例（php+mySQL資料庫）
解壓縮，將upload複製到www
帳號密碼root

常用的論壇程式：Molyx，Discuz，PHPwind，BMB
範例：
常見的的論壇程式有：
1. vBB (PCZone )
2. IPB ( MSFN )
3. phpBB ( 竹貓 )
4. Discuz ( 大多數中文網站，載點二）
5. PHPWind ( 數位男女 )

Chp3 : 申請免費的網站空間

(1)byethost免費網站空間

（1） byethost登入教學檔案
（2）Byethost介紹：
月流量：50GB
網站空間：1GB
綁定域名：可(5組)
支援服務：PHP、MySQL、FTP
後台管理：Cpanel
是PHP 資料庫MySQL與bytehost免費架站
優點：能建立多個資料庫，是其它免費空間的母網站，行之多年，沒有關閉
缺點：網絡不穩，常常斷線
缺點：php支援5版本，印出json，text會加上很多<>tag（造成appinventor的讀取錯誤）
（3）申請網址
線上申請完畢後，要到你的email信箱啟動帳號（被放在垃圾郵件區），啟動後它會給你Control panel username（登入帳號）
圖式：
（4）登入cpanel網址
（5）上傳檔案：在file manager直接拖曵上傳
（6）範例：http://acupun.byethost7.com/appinventor/personnel.xml

(2)0fees免費網站空間

（1）0fees介紹：
月流量：10GB
網站空間：300M
支援服務：PHP、MySQL、FTP
後台管理：Cpanel
0fees提供300M的免費空間，月流量10GB，1個FTP帳號，最多可綁定5個功能變數名稱。最多可以創建7個MySql資料庫，容量跟Byethost一樣也僅有50M
功能與byethost一樣，它是向byethost購買的二包
優點：網絡穩，不太會斷線
缺點：php支援5版本，印出json，text會加上很多<>tag（造成appinventor的讀取錯誤）
（2）申請網址
線上申請完畢後，要到你的email信箱啟動帳號（被放在垃圾郵件區），啟動後它會給你Control panel username（登入帳號）
（3）登入cpanel網址
（4）上傳檔案：在file manager直接拖曵上傳

(3)AwardSpace老牌高速免費網站空間

（1）AwardSpace介紹：
優點1：php支援7.2版本，印出json，text沒有加上很多<>tag
優點2：所以若要結合app inventor，就要用awardSpace
優點3：網絡穩，不太會斷線
缺點：只能建立一個資料庫，第二個要收錢
使用教學

（2）申請網址
線上申請完畢後，要到你的email信箱啟動帳號（被放在垃圾郵件區），啟動後它會給你Control panel username（登入帳號）
（3）登入cpanel網址
（4）上傳檔案：在file manager直接拖曵上傳

Chp4 : 響應式網頁設計(Responsive Web Design簡稱RWD)，可以自動適應電腦，平板，手機的網頁

(1)傳統網頁

A.貓走路網頁（html)
B.網頁模板1（html)
C.網頁模板2（html)

(2) 響應式網頁設計(RWD)

有兩種：(1)jQuery Mobile(jQM)網頁，(2)Bootstrap網頁

(1)jQuery Mobile(jQM)網頁，模板，樣板，template
A.Jqm01（線上範例)
B.Jqm02（html)
C.Jqm03（html)

(2)Bootstrap網頁
A.Bootstrap01（html)
B.Bootstrap02（html)
C.Bootstrap03（html)
D.Bootstrap04（html)
E.Bootstrap05（html)
F.Bootstrap06（html)

Chp5:使用Bootstrap 當作CSS規格框架（結合免費web編輯工具brackets）

下載brackets(免費)

下載Bootstrap(免費)

下載Bootstrap3.37打包檔案

01.簡單練習

參考範本

實作結果

按鈕

標準按鈕
<button type="button" class="btn btn-default">Default</button>

藍色按鈕
<button type="button" class="btn btn-primary">Primary</button>

綠色按鈕
<button type="button" class="btn btn-success">Success</button>

水藍色按鈕
<button type="button" class="btn btn-info">Info</button>

橘色按鈕
<button type="button" class="btn btn-warning">Warning</button>

紅色按鈕
<button type="button" class="btn btn-danger">Danger</button>

02.簡單樣本程式

參考範本

簡單樣本程式

實作結果

簡單樣本範例

參考教學

碼雲：小馬bootstrap教學

建立第一個網頁

01.到官網複製基礎網頁樣板Basic template
（語言改成lang='zh-cmn-Hant'
1. 简体中文页面：html lang=zh-cmn-Hans
2. 繁体中文页面：html lang=zh-cmn-Hant
3. 英语页面：html lang=en
注意，index.html同目錄有沒有css,js等目錄

<!DOCTYPE html>
<html lang="zh-cmn-Hant">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 101 Template</title>

<link href="css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<h1>Hello, world!</h1>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>

03.bootstrap頁面配置,網格

參考範本

素材檔案下載

實作結果

官網教學

bootstrap的一列row，共12欄col-sm-12

頁面配置,網格

	Extra small devicesPhones (<768px)	Small devicesTablets (≥768px)	Medium devicesDesktops (≥992px)	Large devicesDesktops (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Container width	None (auto)小螢幕(手機)	750px平板	970px中型桌機螢幕	1170px大型桌機螢幕
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
# of columns	12

01.頁首：
<div id="header" class="container" style="background-color:royalblue;color:white;">Header</div>
如果兩邊不留白，就取消class="container"

02.頁中：
<div class="container">
<div class="row">
<div class="col-sm-3" style="background-color:orange">Left Bar</div>
<div class="col-sm-7">Main content</div>
<div class="col-sm-2" style="background-color:pink">Right Bar</div>
</div>
</div>
如果兩邊不留白，就取消class="container"

01.頁尾：
<div id="footer" class="container" style="background-color:green;color:white;">Footer</div>
如果兩邊不留白，就取消class="container"

04.Bootstrap 響應式網頁設計(Responsive Web Design簡稱RWD)

參考範本

RWD樣板CDN程式

RWD樣板local程式

實作結果

RWD樣板範例

官網教學

bootstrap的四種裝置網格CSS(英文版)

bootstrap的四種裝置網格grid(英文版)

bootstrap的四種裝置網格CSS(中文版)

頁面配置,網格

01.控制小屏幕(手機)顯示設定參數：xs
小螢幕時，欄位50%：col-xs-6
小螢幕時，欄位隱藏：hidden-xs

	Extra small devicesPhones (<768px)	Small devicesTablets (≥768px)	Medium devicesDesktops (≥992px)	Large devicesDesktops (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Container width	None (auto)小螢幕(手機)	750px平板	970px中型桌機螢幕	1170px大型桌機螢幕
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
# of columns	12

02.範例：小螢幕(手機)左邊menu顯示50%，主內容content顯示50%，右邊menu隱藏
<div class="col-sm-3 col-xs-6" style="background-color:orange;">左邊菜單</div>
<div class="col-sm-6 col-xs-6">主要內容</div>
<div class="col-sm-3 hidden-xs" style="background-color:pink">右邊菜單</div>

03.範例：小螢幕(手機)左邊menu顯示50%，主內容content顯示50%，右邊menu顯示100%一列
<div class="col-sm-3 col-xs-6" style="background-color:orange;">左邊菜單</div>
<div class="col-sm-6 col-xs-6">主要內容</div>
<div class="col-sm-3 col-xs-12" style="background-color:pink">右邊菜單</div>

05.Bootstrap表格樣式

參考範本

實作結果

官網教學

頁面配置,網格

01.控制小屏幕(手機)顯示設定參數：xs
小螢幕時，欄位50%：col-xs-6
小螢幕時，欄位隱藏：hidden-xs