1 / 18

Dreamweaver III

Dreamweaver III. CSS( 串接樣式表 ) 簡介. CSS 的全名為 Cascading Style Sheets ，是一種樣式表 (Stylesheet) 語言。 目的 : 對 XHTML 及 HTML 之類的標記語言 (markup language) 提供一個顯示層。 可將網頁分為 : 資料層 : HTML 文件就只包括資料 顯示層 : CSS 則是告訴瀏覽器這些資料應該要如何顯現出來。. CSS( 串接樣式表 ) 簡介. 由於個人部落格的興起， CSS 已成為了一個眾人須知的電腦語言。

omar-gardner
Download Presentation

Dreamweaver III

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Dreamweaver III

  2. CSS(串接樣式表)簡介 • CSS 的全名為 Cascading Style Sheets，是一種樣式表 (Stylesheet) 語言。 • 目的:對 XHTML 及 HTML 之類的標記語言 (markup language) 提供一個顯示層。 • 可將網頁分為: • 資料層: HTML 文件就只包括資料 • 顯示層:CSS 則是告訴瀏覽器這些資料應該要如何顯現出來。

  3. CSS(串接樣式表)簡介 • 由於個人部落格的興起，CSS 已成為了一個眾人須知的電腦語言。 • 可由網站分享的CSS樣式並且修改一下 CSS ，可使自己的網站更有特色。

  4. CSS(串接樣式表)簡介 • CSS套用方式: • 行內套用 (Inline) • 嵌入套用 (Embed) • 外部連接套用 (External Link) • 匯入套用 (Import)

  5. CSS(串接樣式表)簡介 • 行內套用 (Inline) • 可以在 HTML 文件內直接宣告樣式。 • EX: • 可顯示

  6. CSS(串接樣式表)簡介 • 嵌入套用 (Embed): • 樣式可以嵌入於 HTML 文件中 (通常是在 <head> 內) 例如: 可顯示:

  7. CSS(串接樣式表)簡介 • 外部連接套用 (External Link): • 所有的 CSS 樣式宣告都是存在另外一個檔案中。(.css) • 利用以下的程式碼將.css 檔案連接進入 .css檔案

  8. CSS(串接樣式表)簡介 • 匯入套用 (Import): • 外部的 CSS 樣式也可以被匯入進 HTML 文件。 • 利用 @import 這個指令。 • CSS教學參考網站: • http://css.1keydata.com/tw/ 匯入網頁的.css格式

  9. 練習-上傳並顯示網頁 • 需要有網路上的空間或FTP空間 • 學校有提供個人的FTP空間 • 網址: ftp://ftp.sXX.tku.edu.tw/ • 需要使用帳號密碼登入 100學年度為s00

  10. 練習-上傳並顯示網頁 • 我的電腦->滑鼠右鍵->檔案總管 • 在網址列輸入學校給的FTP網址 注意學年度

  11. 練習-上傳並顯示網頁 • 輸入帳號和密碼: 自己的學號 預設密碼為身分證後六碼 可設定是否要儲存密碼

  12. 練習-上傳並顯示網頁 • 進入自己的FTP空間後將檔案放入www資料夾

  13. 練習-上傳並顯示網頁 • www資料夾內的檔案(練習範例一的檔案) 有用到的檔案接要放入(EX:圖片檔案 文件檔案 其它網頁檔案) 記住自行製作的首頁名稱

  14. 練習-上傳並顯示網頁 • 可利用下列網址再開啟網頁: • http://sXX.tku.edu.tw/~4XX410047/Untitled-2.htm 這邊要改成自己的學號 (EX:~XXXXXXXXX) 這邊為首頁網頁的名稱(需要副檔名)

  15. 練習-上傳並顯示網頁 • 顯示的結果:

  16. 期末作業 • 基本規定: • 關於我(自我介紹) • 自己有興趣的事物 • 參考與推薦的網站 • 其它

  17. 期末作業 • 基本規定樣式:(頁框) 這邊打標題 (EX:XXX的個人網頁) 這邊為項目: EX: 關於我 XXXX XXXX 這邊為顯示的網頁

  18. 期末作業 • 評分標準: • 基本規定都有為70分 • 內容越多分數越高 • 設計的創意性 • 繳交方式與期限: • 方式: 將網址用E-MAIL寄給我(請記得附上學號姓名) • 期限: 2012/5/28~2012/6/8PM:23:59 • 標題: 系級_學號_姓名

More Related