六年制學程/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 段落
取自「http://jendo.org/wikiGrade1/index.php?title=六年制學程/01/2013.10.08&oldid=14308」