屏東縣立內埔國中資訊應用線上暨自編教材

目前位置：8年級下教材

[ 目錄 ]　[ 8年級上 ]　[ 8年級下 ]

網站製作-導論　　影像處理軟體 Gimp　　網頁編輯軟體 Kompozer

課程說明

電腦教室常規

不吃、不喝（只攜帶課本、文具）
不得站立、走動、更換座位
不得遠距離交友

自由活動常規

不違反法律
不違反校規
不違反善良風俗

學期課程計畫
評量方式

口頭問答
作業繳交
紙筆測驗

內埔國中全球資訊網
Google Classroom 線上學習系統
八年級網頁製作觀摩網
內埔國中電子郵件信箱（帳號：學號@npjh.ptc.edu.tw，密碼：passXXXX生日月日）
好康報報

問卷調查

網站製作-導論　Top

網路演進：

網站
部落格（網誌，2-3個禮拜發一篇文，而且長度至少要1500字以上）
微網誌（講求以簡短文字，通常少於200字，及時更新）推特 Twitter、噗浪 Plurk、微博 Weibo、臉書 Facebook
智慧型手機時代（直播、網紅、自媒體、IG (Instagram)）

網站

由許多網頁集合而成
網頁的檔案名稱必須是英文，絕不能是中文
輸入網站網址後，所看到的第一個網頁，稱為首頁
網站首頁的檔案名稱有統一的規定，通常是 index.html
網頁是由 HTML 程式語言撰寫而成，它是一種標記語言，標記指的是< >符號
網頁透過超連結達到翻頁的效果
網頁中的特殊造型文字需以圖片方式製作呈現

製作網站步驟

設定網站定位
替網站命名
製作網頁橫幅

影像處理軟體

製作靜態網頁內容

影像處理軟體
網頁編輯軟體

影像處理軟體 GIMP　Top

影像處理軟體種類

Adobe PhotoShop (商業軟體)
Ulead PhotoImpact (商業軟體)
Gimp (自由軟體)

Gimp

啟動 Gimp

工具箱視窗（關閉此視窗，並不會結束Gimp）
圖片處理程式視窗
面板集視窗（關閉此視窗，並不會結束Gimp）

影像處理先備知識

常見圖片格式 (副檔名)

BMP：全彩、無法壓縮
JPG/JPEG：全彩、破壞壓縮
GIF：只支援256色、非破壞壓縮，支援透明圖、動畫圖 (GIF動畫)、交錯圖
PNG：全彩、非破壞壓縮，支援透明圖、交錯圖
XCF：Gimp 的專屬格式，可編修，無法在網頁上顯示

尺寸大小（或稱解析度）

表示法：寬x高，如：1024x768
單位：像素 (pixel)
尺寸愈大，解析度愈高，所佔檔案大小愈大

電腦螢幕顯示圖片時的單位是像素/英吋（ppi，pixel per inch）
彩色圖片因比黑白圖片使用更多顏色，因此檔案大小較大

製作網頁橫幅（一）

建立本機工作資料夾

在 F 槽新增工作資料夾（命名 3 碼年班）如：803
在工作資料夾中建立 images 圖片夾

網頁橫幅設計原則

確認電腦螢幕解析度

依電腦螢幕解析度，決定網頁橫幅製作寬度。如電腦螢幕解析度1024X768下，網頁橫幅寬度保持在1002以內，就不會出現水平滾動條。

決定網頁橫幅的大小

檔案 /新增
參考尺寸：寬度 900、高度100
進階選項 /填上 /透明度

橫幅背景

填色工具

單一色
圖樣

混色工具

漸層色

製作網頁橫幅（二）

圖片素材網站

開放美工圖庫OpenClipArt Library
Google/ 圖片/ 工具/ 使用權限

標示為允許再利用且可修改
標示為允許以非商業用途再利用且可修改

CC台灣社群

CC 資源

圖片編輯技巧

尺寸調整

縮放比例工具（範例檔 Gigi）

此動作將改變原圖的品質

剪裁工具

範圍選取

規則範圍

橢圓形選取工具
羽化邊緣

不規則範圍

自由選取工具
羽化邊緣

圖層管理

愈先產生的圖層，置於愈下層
圖層可以複製、移動、刪除、重新命名

製作網頁橫幅（三）

基本文字

工具箱 /文字工具

進階文字

漸層字

鎖定透明色版
工具箱 /混色工具

立體字

重製圖層
工具箱 /文字工具（改變本體與陰影的顏色）
移動圖層

製作網頁橫幅（四）

存檔 xcf 格式 (修改用)

檔案 /儲存 /banner.xcf
儲存目錄：D 槽個人本機工作資料夾下 images 目錄內

存檔 png 格式 (網頁用)

檔案 /匯出 /banner.png
儲存目錄：D 槽個人本機工作資料夾下 images 目錄內

上傳網頁橫幅到網站

網站網址 http://192.168.2.20/~login
帳號：班級座號、密碼：班級座號
上傳至 images 目錄內

網頁編輯軟體 KompoZer　Top

網頁編輯軟體種類

Microsoft Frontpage (商業軟體)
Adobe DreamWeaver (商業軟體)
Namo WebEditor (商業軟體)
KompoZer (自由軟體)

下載 KompoZer

官方網站

KompoZer環境介紹

3種編輯模式

設計（所見即所得模式）
分離
原始碼

網頁製作先備知識

網址

每一台連上網際網路的電腦都有一個獨一無二的 IP 位址，如 163.24.58.8
為了方便記憶，我們以網址代替 IP 位址
內埔國中網址：www.npjh.ptc.edu.tw

tw：國碼（國碼省略，代表美國）
edu：領域，如 edu 教育及學術研究單位、gov 政府單位、com 商業團體組織、idv 個人等

網站版權宣告

保留所有權利

© 版權所有，翻印必究

保留部分權利

創用 CC 計畫、 CC 台灣社群

四個授權要素：
六種授權條款：
　　　　　　
姓名標示　　　　　　　　　姓名標示─相同方式分享　　姓名標示─禁止改作　　　姓名標示─非商業性

　　　　　　　　　　　　　　　
姓名標示─非商業性─相同方式分享　　　　　　　　　　姓名標示─非商業性─禁止改作

網頁的製作技巧

網頁版面可以表格分割完成，但表格框線需設定為 0 隱藏
網頁中圖片的使用為引入式而非崁入式，所以使用愈多的圖片，並不會使網頁的檔案大小快速膨脹，只是網頁顯示的速度，將會因多張圖片的傳輸而變得較慢
網頁中若需使用特殊造型文字，方法是將文字製作成圖片，而不是調整文字字型

標記語言（HTML）語法結構

<html>

:

<head>

:

</head>

<body>

:

:

:

:

</body>

</html>

製作首頁 index.html（一、設定基本資料）

設定頁面寬度、頁面置中、字體大小及行高 Vedio

拉動內文寬度，至原始碼將 <body style="width: 900px;"> 裡面的數字，修改成和網頁橫幅一樣寬
複製後面程式碼，至上一行程式碼 px; 與 " 中間：margin: auto; font-size: 15.4px; line-height: 1.4;
完成後的完整程式碼：<body style="width: 900px; margin: auto; font-size: 15.4px; line-height: 1.4;">

設定網頁基本資料 Vedio

格式/ 頁面標題與屬性

標題：首頁
作者：自己的名字
國際化

語言/ 中文/台灣 [zh-tw]
書寫方向/ 由左至右
字元編碼方式/ Unicode (UTF-8)

儲存首頁 Vedio

檔案/ 儲存
儲存目錄：D 槽本機工作資料夾
首頁的檔名必須為 index，存檔類型：html

上傳：http://192.168.2.20/~login
觀看：八年級網頁製作觀摩網

製作首頁 index.html（二、排製版面）

版面介紹 Vedio

左連結式

網頁橫幅

超

鏈

結

網頁內容

版權宣告

上連結式

網頁橫幅

超　鏈　結

網頁內容

版權宣告

以表格排製版面 Vedio(左連結式) Vedio(上連結式)

點選表格按鈕或表格/ 插入/ 表格

左連結式：2x2，列x欄

設定表格寬度100%
設定框線寬度為 0，隱藏框線
選取第一列兩儲存格
表格 / 加入選中的儲存格
選取第二列第二欄儲存格
設定第二列第二欄儲存格寬度

上連結式：3x1，列x欄

設定表格寬度100%
設定框線寬度為 0，隱藏框線

上傳：http://192.168.2.20/~login
觀看：八年級網頁製作觀摩網

製作首頁 index.html（三、編輯共同內容）

放置網頁橫幅 Vedio

網頁中圖片的使用為引入式而非崁入式
插入/ 圖片
網址是相對於此網頁位址
不要使用替代文字

輸入超連結文字 Vedio

左連結式：直立排列
上連結式：橫向排列

版權宣告文字 Vedio

你這作品的改作，能否再次被分享？ 可以，只要別人以相同授權方式分享
將是否允許你的著作被使用於商業目的? 否
在網頁上呈現？ 一般圖示
將授權原始碼貼入網頁原始碼中

上傳：http://192.168.2.20/~login
觀看：八年級網頁製作觀摩網

製作首頁 index.html（四、美化網頁）

設定網頁背景 Vedio

格式 / 頁面色彩及背景
可利用阿盛網頁素材下載背景圖

設定表格背景 Vedio

表格/ 表格屬性/ 背景色彩

上傳：http://192.168.2.20/~login
觀看：八年級網頁製作觀摩網

製作首頁 index.html（五、另存新檔成為其他網頁）

另存新檔成為其他網頁 Vedio

以 Kompozer 開啟舊檔 index.html
檔案/ 另存新檔 2次，存在本機工作資料夾
檔名自訂，不可使用中文檔名
參考檔名：第二個網頁叫 2nd.html ，第三個網頁叫 3rd.html

重新編輯網頁標題 Vedio

以 Kompozer 開啟三個網頁
重新命名頁面標題，標題名同超連結名

製作內部連結效果 Vedio

選取欲連結文字，使用連結按鈕
選擇內部欲連結網頁

上傳：http://192.168.2.20/~login
觀看：八年級網頁製作觀摩網

製作網頁主要內容

文字的處理 Vedio

貼上文字時，利用記事本中轉貼上
網頁中若需使用特殊字型文字，可將文字製作成圖片
其他文字功能

製作外部連結效果 Vedio

選取欲連結文字，使用連結按鈕
輸入網際網路上其他網站網址
選擇連結要開啟於新視窗

文繞圖技巧 Vedio

圖片按鈕/ 外觀設定/ 文字對齊圖片方式

利用表格，製作特殊圖文排列
上傳：http://192.168.2.20/~login
觀看：八年級網頁製作觀摩網

網站製作-導論　　影像處理軟體 Gimp　　網頁編輯軟體 Kompozer

[ 目錄 ]　[ 8年級上 ]　[ 8年級下 ]

創用 CC 授權條款

本著作係採用創用 CC 姓名標示-非商業性-相同方式分享 4.0 國際授權條款授權.