網頁設計
114 23 32
作業系統 & 硬體
• Unix 多架於專門電腦 ( 惠普 ) 可供上百人
連線而不濫線 , 純文字介面
• 類 Unix(Linux…) 內建多人多工環境
• Windows 以個人用戶也能成為工作站
(cpu), 伺服器作號召
伺服器可能不...
網頁製作流程
• 製作網頁原始檔 ( 方法
軟體 SMGL 程式碼介
面 , 良好的軟體 ) 重點
• 裝 windows 提供之 IIS
or 網路空間
• 申請網域 (server)

• 網路提供設計介面 &&
網路空間
(yahoo,m...
網路提供設計介面
網路提供設計介面
• 提供人性化設計的軟體介面
Ex: 論壇 , 群組 ,blog 無名
• 提供現有網路空間
Ex:you tube 等檔案分享
免承擔網站管理的
責任 && 被人入侵
的風險

格式多被介面所限
較少為動態網頁
網頁設計 DIY
製作網頁原始檔
動態網頁

靜態網頁
好用的設計軟體
直接套用設計好
的模組

• Microsoft Front Page
樹枝狀超連結 ( 網頁和首頁間樹枝狀架構 )

• Dream Waver

多屬靜態

ELSE 網狀
靜態網頁

~ 相對於動態

• 撰寫標準 html 檔 ( 採 SMGL 語法 )
由一堆標籤 (tag) 構成
標籤
控制物件 ( 文字 圖片 影片 ) 的插入
控制物件的屬性
<tag 名 屬性 = 值…… > 控制內容 </tag 名 ...
CSS
• 為某網路協會為因應特定的標籤屬性太少
而制定
• 可將外加屬性撰寫好在加入現有標籤
( 行內式 , 內嵌式 , 連結式 , 匯入式 )
• 無名小站等… .. 設計介面也仰賴此
範例
•
•
•
•
•
•
•
•

文字格式 ( 電流急急棒 )
插圖
• 打磚塊
表格
超連結
• 彈道模擬
跑馬燈 (1)(2)
框頁分割
表單
背景音樂
動態網頁

相對於靜態

1. 互動式網頁
( 對於用戶端的不同資料 , 產生不同結果 )
2. 每次執行都可能有不同結果
3. 特別注重用戶身分識別
以程式碼產生 html 指令檔
動態網頁模型
• 三層式架構
Client 前端
HTML
(browser)

&&
Browser
支援編譯程式
Ex:Java,Vb
script

網路伺服器
Web Server
(for CGI)

因應網路式
多工系統…
…

資...
通用閘道介面
• 簡稱 CGI(Common Gateway Interface)
• 多指稱置於 Web Server 上產生 html 之程
式
• 原指 Web Server 和 Server 端傳輸介面
• 不限任何程式語言 Ex:pe...
撰寫
• microsoft 內建 IE 瀏覽器 (Internet Explore)
可支援基本動態程式碼 VB,JavaScript
類 CGI -> 持續連結 server 程式
• php( 開放原始碼 ) 普遍性高 , 語法類 C++...
Microsoft ASP.NET
• 利用內建標籤元件 ( 控制項 ), 減少程式篇幅
• 更多的撰寫好的程式屬性 , 物件
(2.0 版 版面一致性 身分認證 資料存取 )
• 須先安裝 .net framework 開發環境
• 相關附加...
PHP
•
•
•
•
•

跨 linux unix windows 平台
需下載 php server 程式
同 xxscript 撰於內嵌 script 標籤
語法類 c 語言
網路上可找到較多免費共享軟體模組
資料庫
• 少量資料以資料 IO 指令存入 TXT 檔
• 以 SQL( 結構化資料查詢語言 ) 為大宗 :
(1) 資料分門別類
(2) 初步資料處理 ( 處理函式 )
EX: 計數器 , 聊天室 , 論壇會員管理等……
伺服程式 ( 架站 )
• 共享軟體 Apache server
(php only)
• Windows 的 IIS
(1) 介面良好
(2) 配合個人化電腦可成小型伺服器
最後…… ..
上 DDNS 網站申請網域替你的網站取
一個響亮的名字
Upcoming SlideShare
Loading in …5
×

網頁設計

1,081 views
966 views

Published on

我都不記得我小時後原來觀念這麼強XDDDD

1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,081
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • {}
  • 網頁設計

    1. 1. 網頁設計 114 23 32
    2. 2. 作業系統 & 硬體 • Unix 多架於專門電腦 ( 惠普 ) 可供上百人 連線而不濫線 , 純文字介面 • 類 Unix(Linux…) 內建多人多工環境 • Windows 以個人用戶也能成為工作站 (cpu), 伺服器作號召 伺服器可能不只一台 多作分散式網路分工
    3. 3. 網頁製作流程 • 製作網頁原始檔 ( 方法 軟體 SMGL 程式碼介 面 , 良好的軟體 ) 重點 • 裝 windows 提供之 IIS or 網路空間 • 申請網域 (server) • 網路提供設計介面 && 網路空間 (yahoo,msn,yam) • 論壇 ,blog, 社群 較便捷
    4. 4. 網路提供設計介面
    5. 5. 網路提供設計介面 • 提供人性化設計的軟體介面 Ex: 論壇 , 群組 ,blog 無名 • 提供現有網路空間 Ex:you tube 等檔案分享 免承擔網站管理的 責任 && 被人入侵 的風險 格式多被介面所限 較少為動態網頁
    6. 6. 網頁設計 DIY
    7. 7. 製作網頁原始檔 動態網頁 靜態網頁
    8. 8. 好用的設計軟體 直接套用設計好 的模組 • Microsoft Front Page 樹枝狀超連結 ( 網頁和首頁間樹枝狀架構 ) • Dream Waver 多屬靜態 ELSE 網狀
    9. 9. 靜態網頁 ~ 相對於動態 • 撰寫標準 html 檔 ( 採 SMGL 語法 ) 由一堆標籤 (tag) 構成 標籤 控制物件 ( 文字 圖片 影片 ) 的插入 控制物件的屬性 <tag 名 屬性 = 值…… > 控制內容 </tag 名 > <tag 名 /> 除內建屬性外 , 以 CSS 外加
    10. 10. CSS • 為某網路協會為因應特定的標籤屬性太少 而制定 • 可將外加屬性撰寫好在加入現有標籤 ( 行內式 , 內嵌式 , 連結式 , 匯入式 ) • 無名小站等… .. 設計介面也仰賴此
    11. 11. 範例 • • • • • • • • 文字格式 ( 電流急急棒 ) 插圖 • 打磚塊 表格 超連結 • 彈道模擬 跑馬燈 (1)(2) 框頁分割 表單 背景音樂
    12. 12. 動態網頁 相對於靜態 1. 互動式網頁 ( 對於用戶端的不同資料 , 產生不同結果 ) 2. 每次執行都可能有不同結果 3. 特別注重用戶身分識別 以程式碼產生 html 指令檔
    13. 13. 動態網頁模型 • 三層式架構 Client 前端 HTML (browser) && Browser 支援編譯程式 Ex:Java,Vb script 網路伺服器 Web Server (for CGI) 因應網路式 多工系統… … 資料庫 (DataBase) Ex:SQL Server 端 產生動態網頁的程式 Ex:asp,aspx,CGI…. 運算用主機 Ex: 超級電腦
    14. 14. 通用閘道介面 • 簡稱 CGI(Common Gateway Interface) • 多指稱置於 Web Server 上產生 html 之程 式 • 原指 Web Server 和 Server 端傳輸介面 • 不限任何程式語言 Ex:perl,vb ,shell script
    15. 15. 撰寫 • microsoft 內建 IE 瀏覽器 (Internet Explore) 可支援基本動態程式碼 VB,JavaScript 類 CGI -> 持續連結 server 程式 • php( 開放原始碼 ) 普遍性高 , 語法類 C++ • Asp.net 為微軟產品 , 可用簡單標籤達複雜程 式之效
    16. 16. Microsoft ASP.NET • 利用內建標籤元件 ( 控制項 ), 減少程式篇幅 • 更多的撰寫好的程式屬性 , 物件 (2.0 版 版面一致性 身分認證 資料存取 ) • 須先安裝 .net framework 開發環境 • 相關附加功能 Ex: 管理遠端 server 攻佔專業開發人員市場 Others 需付 費
    17. 17. PHP • • • • • 跨 linux unix windows 平台 需下載 php server 程式 同 xxscript 撰於內嵌 script 標籤 語法類 c 語言 網路上可找到較多免費共享軟體模組
    18. 18. 資料庫 • 少量資料以資料 IO 指令存入 TXT 檔 • 以 SQL( 結構化資料查詢語言 ) 為大宗 : (1) 資料分門別類 (2) 初步資料處理 ( 處理函式 ) EX: 計數器 , 聊天室 , 論壇會員管理等……
    19. 19. 伺服程式 ( 架站 ) • 共享軟體 Apache server (php only) • Windows 的 IIS (1) 介面良好 (2) 配合個人化電腦可成小型伺服器
    20. 20. 最後…… .. 上 DDNS 網站申請網域替你的網站取 一個響亮的名字

    ×