3 appt07mai nc

15
7.1 超文本標示語言的簡介 超文本標示語言 (HTML) 是製作網頁最常用的標示語言。 它含有一套稱為標記 的特殊格式符號,用來定義網頁的版 面和外觀。 在網頁瀏覽器內展示出來的 HTML 文件

Upload: brillndb

Post on 12-Jul-2015

257 views

Category:

Education


0 download

TRANSCRIPT

7.1 超文本標示語言的簡介– 超文本標示語言 (HTML) 是製作網頁最常用的標示語言。– 它含有一套稱為標記的特殊格式符號,用來定義網頁的版

面和外觀。

在網頁瀏覽器內展示出來的 HTML 文件

– HTML 文件– 包含 HTML 標記的純文字檔案。– 可分成兩部分

– 起始部分– 主體部分

– 以下的 HTML 文件展示如何使用 HTML 標記來製作網頁。

7.1 超文本標示語言的簡介

<HTML><HEAD><TITLE>Bonnie</TITLE></HEAD><BODY>Bonnie's Homepage<BR><IMG src="bonnie.jpg"><BR><A href="page2.html">Next Page</A></BODY></HTML>

定義 HTML 文件的開始和結尾

定義起始部分

定義主體部分文字換行

圖像

超連結

7.1 超文本標示語言的簡介

<HTML><HEAD><TITLE>Bonnie</TITLE></HEAD><BODY>Bonnie's Homepage<BR><IMG src="bonnie.jpg"><BR><A href="page2.html">Next Page</A></BODY></HTML>

定義 HTML 文件的開始和結尾

定義起始部分

定義主體部分文字換行

圖像

超連結

7.1 超文本標示語言的簡介

7.2 基本網頁編寫• 網頁編寫軟件

– 可幫助我們製作大規模的專業網站。– 除了可管理整個網頁及包含一些加入多媒體元素和互動

控制於網頁內等額外功能外,網頁編寫軟件的基本功能與一般的文書處理器相近。

– 專業的網頁編寫軟件亦包含一些特別的工具,用來管理及更新網站內數以百計的網頁。

• 網頁編寫軟件

Dreamweaver 的工作環境

一般工具列插入列

文件工具列

文件視窗

屬性檢測器

面板群組

檔案面板

7.2 基本網頁編寫

• 網頁編寫軟件– Microsoft FrontPage 和 Dreamweaver 都是流行的網頁

編寫軟件。– 你也可以從互聯網上下載一些免費的網頁編寫軟件,例

如 FrontPage Express 和 Netscape Composer 來編寫網頁。

Microsoft FrontPage Netscape Composer

7.2 基本網頁編寫

• 網站製作的流程– 網站製作可分成數個步驟。– 這些步驟同時適用於製作簡單和複雜的網站。

構思題材1. 定義網站的目的。2. 決定網站的版面。

搜集及組織材料1. 決定網站所需的材料。2. 搜集或製作相關的材料。3. 組織搜集所得的材料。4. 編輯材料,使之適合作演示。

7.2 基本網頁編寫

• 網站製作的流程

建立網站1. 使用網頁編寫軟件來建立網站。

上載1. 登記一個網站。2. 上載網頁。

7.2 基本網頁編寫

• 網站製作的流程

測試及修改1. 使用網頁瀏覽器來測試網頁。2. 如有需要,修改及重新上載網頁。

宣傳1. 尋找方法來吸引用戶瀏覽網頁。

7.2 基本網頁編寫

• 加入超連結– 超連結是網頁其中一項重要的元素。– 它讓瀏覽者從一個網頁跳到其他網頁。– 超連結亦能連結至其他元素,例如文本、圖像及視像檔案

連接此網站的其他網頁

跳至此份文件的其他位置

啟動媒體播放器播放視像檔案連接互聯網上的其他網站開啟電郵軟件傳送電郵

7.2 基本網頁編寫

不同類型的超連結

• 加入超連結– 如果超連結所指向的是網頁瀏覽器未能處理的檔案或指令,相應的應用軟件便會開啟。

7.2 基本網頁編寫

• 加入超連結

電郵程序或網頁瀏覽器

啟動電郵程序,並開啟一封寄往此電郵地址的新郵件。

電郵地址

外掛程序 ( 例如 Flash

Player) 及網頁瀏覽器

啟動外掛程序來開啟該檔案。

Flash 檔案(例如 SWF 檔案 )

網頁瀏覽器開啟該圖像檔案。圖像檔案(例如 JPG 檔案 )

網頁瀏覽器開啟該網頁。HTML 文件

所需的應用軟件按此項目的結果超連結的類型

7.2 基本網頁編寫

點擊超連結的結果及其所需的應用軟件

• 使用 Dreamweaver 製作網頁– Dreamweaver 提供了一個用戶友好的界面來讓使用者製

作網頁。– 下圖展示製作網頁時一些常用的功能。

插入圖像

插入表格

粗體 改變字型大小

插入超連結

7.2 基本網頁編寫

Dreamweaver 中製作網頁的功能

• 使用 Dreamweaver 製作網頁– Dreamweaver 提供了一個用戶友好的界面來讓使用者製

作網頁。– 下圖展示製作網頁時一些常用的功能。

插入圖像

插入表格

粗體 改變字型大小

插入超連結

7.2 基本網頁編寫

Dreamweaver 中製作網頁的功能