六年制學程/01/2013.10.08:修訂版本之間的差異

出自六年制學程
跳轉到: 導覽搜尋
製作每位同學的個人網頁
 
(未顯示2位用戶所作出之20次版本)
第 1 行: 第 1 行:
[[分類:六年制學程/01]]
+
[[分類:六年制學程/01]]{{上課日誌}}
 
==製作每位同學的個人網頁==
 
==製作每位同學的個人網頁==
 +
===檔案編輯app===
 +
*ASTRO 文件管理器:內附「檔編輯器」,支援 UTF8 碼,文字編小。
 +
*文件大師:內附「文件大師文本編輯器」,預設中國的GB碼,也支援 UTF8 碼,文字較大。
 +
*文件管理器(資料夾及齒輪):內附「文本編輯器」,支援 UTF8 碼及多種編碼。
 +
 
===DS file===
 
===DS file===
*用來編輯和上傳網頁
+
用來編輯和上傳網頁
 +
*「DISKSTATION」指的是伺服器、網站,俗稱「上」;「本地檔案」指的是你眼前這部平板電腦,俗稱「下」。
 +
*首頁檔通常檔名叫做 index.html 或 index.htm
 +
*index.html 在「本地檔案」才能編輯修改;但必須在「DISKSTATION」中才能讓公眾透過瀏覽器來看。所以一定在要「本地檔案」和「DISKSTATION」兩者之間傳來傳去。
 +
*建立個人網頁:
 +
*#在「DISKSTATION」中的 home 之下,建立一個資料夾叫「www」。
 +
*#在「DISKSTATION」中的 6year 之下,找到 index.html 按久一點選「下載」,把它下載到「本地檔案」資料夾中。
 +
*#在「DISKSTATION/home/www」之下放三張照片,並記下照片的檔名,如果檔名太難記,就改成較好記的名字。
 +
*#在「本地檔案/dsfile」中找到 index.html  ,按久一點選「開啟」,再接著選「檔編輯器」或「文件大師文本編輯器」或「文本編輯器」(資料夾及齒輪),將三個圖檔的檔名改成剛剛記下三個圖檔的檔名,編好之後按右上角的圖示存檔。然後按「回上一動」退出編輯器。
 +
*#將剛剛存好的「本地檔案/dsfile/index.html」按久點選「複製」,然後複製到「DISKSTATION/home/www」之中。
 +
*#去瀏覽器看結果。
  
 
===瀏覽器===
 
===瀏覽器===
第 8 行: 第 23 行:
 
*在網址列打上「jendo.org/~同學姓名」即可看到個人網頁。
 
*在網址列打上「jendo.org/~同學姓名」即可看到個人網頁。
 
*如果網頁有異動,就重刷一次網頁。
 
*如果網頁有異動,就重刷一次網頁。
 +
{{:HTML}}

2014年7月20日 (日) 21:16的最新修訂版本

製作每位同學的個人網頁

檔案編輯app

  • ASTRO 文件管理器:內附「檔編輯器」,支援 UTF8 碼,文字編小。
  • 文件大師:內附「文件大師文本編輯器」,預設中國的GB碼,也支援 UTF8 碼,文字較大。
  • 文件管理器(資料夾及齒輪):內附「文本編輯器」,支援 UTF8 碼及多種編碼。

DS file

用來編輯和上傳網頁

  • 「DISKSTATION」指的是伺服器、網站,俗稱「上」;「本地檔案」指的是你眼前這部平板電腦,俗稱「下」。
  • 首頁檔通常檔名叫做 index.html 或 index.htm
  • index.html 在「本地檔案」才能編輯修改;但必須在「DISKSTATION」中才能讓公眾透過瀏覽器來看。所以一定在要「本地檔案」和「DISKSTATION」兩者之間傳來傳去。
  • 建立個人網頁:
    1. 在「DISKSTATION」中的 home 之下,建立一個資料夾叫「www」。
    2. 在「DISKSTATION」中的 6year 之下,找到 index.html 按久一點選「下載」,把它下載到「本地檔案」資料夾中。
    3. 在「DISKSTATION/home/www」之下放三張照片,並記下照片的檔名,如果檔名太難記,就改成較好記的名字。
    4. 在「本地檔案/dsfile」中找到 index.html ,按久一點選「開啟」,再接著選「檔編輯器」或「文件大師文本編輯器」或「文本編輯器」(資料夾及齒輪),將三個圖檔的檔名改成剛剛記下三個圖檔的檔名,編好之後按右上角的圖示存檔。然後按「回上一動」退出編輯器。
    5. 將剛剛存好的「本地檔案/dsfile/index.html」按久點選「複製」,然後複製到「DISKSTATION/home/www」之中。
    6. 去瀏覽器看結果。

瀏覽器

  • 有預設瀏覽器和 firefox 。
  • 在網址列打上「jendo.org/~同學姓名」即可看到個人網頁。
  • 如果網頁有異動,就重刷一次網頁。

HTML語法

  • 雙標記命令:一般由開始標記和結束標記構成一對,如:<×>....</×>其中的×代表標記命令。以上角括號及斜線均為英文半形。
  • 雙標記合一:img(圖照)、br(換行)、hr(水平線)是開始標記與結束標記合一的,寫成<img />、<br/>、<hr/>
  • 開始標記命令可以用「屬性」加以修飾,例如 img 標記可以有:
    1. src 屬性,指示圖的位置
    2. width 屬性,指示圖的寬度
    3. height 屬性,指示圖的高度
  • 屬性名後面是屬性值,屬性名與屬性值之間用「=」相連。同標記內兩組屬性是用空白相隔開。
  • 屬性值通常用一對單引號「'」或雙引號「"」包起來,如果屬性值當中不含空白,則引號通常可以省略;如果屬性值當中含空白,則引號絕對不可以省略。

class 屬性

引用已經定義的樣式。

style (樣式屬性)

HTML重要的標記命令

標籤
====
html     超文件(HyperText Markup Language)
head     文件頭
title    標題
body     本文

a        超連結(anchor)
img      圖(image)
p        段(paragraph)
br       跳行(break space)
hr       水平線(Horizontal Rule)

table    表
tr       表內之列(table row)
td       表內之格(table diamond)
th       表內之格(table head diamond)

ol       有次序的列表(order list)
ul       沒有次序的列表(unorder list)
li       列表項目(list item)

style    宣告樣式(修飾一個超文件)
span     文字小片段
div      區塊(division)
pre      保留原有斷行及排列之式(preserve)

form     表單

屬性(用=連等號兩邊)
====
src=      圖照來源(source)
href=     跳往那一個連結(hyper ref)(hyper reference)
target=   跳往瀏覽器的那裡,預設值為本頁的本窗框,值_blank為新的空白頁。
style=    樣式屬性(修飾一個標籤)
width=    寬度,可以用點(px,pt)或長度(cm)或百分比表示
height=   高度,可以用點(px,pt)或長度(cm)或百分比表示
border=   邊框。

樣式(用:連冒號兩邊)
====
font-family: 字體
font-size:   字的大小
font-weight: 字有多粗
text-align:  字的對齊方式
color:       字的顏色
width:       寬度
height:      高度
border:      邊框
border-collapse:collapse 合併框線

路徑

用於 img 的 src 屬性,以及 a 的 href 屬性。

  • 資料夾分層用「/」半型右上左下斜線隔開。
  • 相對路徑
    1. 不寫路徑,只寫檔名,代表和這個 html 同資料夾(同路徑)
    2. 「.」代表目前的資料夾(路徑),也就是這個 html 所在的資料夾(路徑),寫作「./」
    3. 「..」代表上一層資料夾(路徑),寫作「../」
    4. 上一層資料夾的再上一層資料用「../../」表示,依此類推。
  • 絕對路徑
    1. 同網站路徑:以「/」做為路徑的開頭,代表網站的「根目錄」
    2. 其他網站的檔名:如「http://xxxx/yyyy/zzzz/abc.jpg」
      • http:是協定
      • //是網際網路
      • xxxx是機器名稱,如 jendo.org
      • /yyyy/zzzz/abc.jpg的第一個「/」是機器上面的文件根資料夾,後面的路徑是從文件根資料夾算起。

使用時機

相對路徑絕對路徑
本機
其他機器不可

圖例

文件根資料夾:j

c.jpg

jj資料夾有:
b.jpg
qqq.html

jjj資料夾有:
a.jpg
ppp.html

kk資料夾有:
d.jpg


ii資料夾有:
e.jpg

iii資料夾有:
my lover.jpg
rrr.html

練習題(相對路徑與絕對路徑)

  1. 標籤在ppp.html需要a.jpg
  2. 標籤在rrr.html需要a.jpg
  3. 標籤在ppp.html需要e.jpg
  4. 標籤在qqq.html需要c.jpg
  5. 標籤在rrr.html需要b.jpg
  6. 標籤在rrr.html需要c.jpg
  7. 標籤在rrr.html需要b.jpg
  8. 標籤在qqq.html需要d.jpg
  9. 標籤在ppp.html需要my lover.jpg
  10. 標籤在qqq.html需要my lover.jpg

其他

  • http 超文件傳輸協定(HyperText Transfer Protocol)
  • 柏納李:HTTP 的發明人,在 1990年12月25日 實現第一次的 HTTP 傳輸,1991年8月6日第一個網頁伺服器上線。1994年柏納-李宣布全球資訊網完全免費的,不申請專利權,不徵收專利費,因此,人人都能輕易用上全球資訊網。
  • 從 wiki 頁複製 HTML 段落