網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 第 6章 第 1頁 本章概述 本章的學(xué)習(xí)目標 主要內(nèi)容 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 本章概述 目前大部分的網(wǎng)頁都是用 多網(wǎng)頁制作工具軟件，比如 以自動生成一些固定格式的網(wǎng)頁元素，因此學(xué)習(xí) 是掌握其基本語法格式后應(yīng)用到動態(tài)程序中去。在學(xué)習(xí)本章的過程中，不要一味去死記一些標識內(nèi)容，章介紹 簽和屬性以及常用標簽的應(yīng)用如文本標簽、圖像標簽、超鏈接標簽等。 第 2頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 本章的學(xué)習(xí)目標 掌握 掌握 掌握 了解 第 3頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 主要內(nèi)容 本標簽 像標簽 鏈接標簽 格標簽 單標簽 表標簽 它標簽 章小結(jié) 第 4頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 即超文本鏈接標記語言。它是在互聯(lián)網(wǎng)發(fā)布超文本文件（通常所說的網(wǎng)頁）的通用語言。所謂超文本，就是它可以加入圖片、聲音、動畫、影視等內(nèi)容，每一個 個文件里面包含了 些標記并不是一種程序語言，它只是一種排版網(wǎng)頁中資料顯示位置的標記語言。 第 5頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 構(gòu)建網(wǎng)頁的一種基本單位，是由 成的。 第 6頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 也就是網(wǎng)頁，是由成的，互聯(lián)網(wǎng)的所有內(nèi)容都是由一個個 網(wǎng)頁其實就是 個 片這些內(nèi)容，還包含一些 文稱為“標簽”，也有的稱為“標記”。 第 7頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 件頭”和“文件體”兩部分，在文件頭中，對 文件體中才是要顯示的各種文檔信息， 第 8頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 簽在一對尖括號之間，格式如下所示： 標簽分為成對標簽和非成對標簽，如： 、 、 等屬于成對標簽， 、 等屬于非成對標簽。標簽忽略大小寫，書寫格式非常靈活 。 可使用標簽的屬性來進一步限定標簽，一個標簽可以有多個屬性項，各屬性項的次序不限定，各屬性項間用空格來進行分隔。如下所示： 第 9頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 性可以擴展 像描述一個人，可以用性別、身高和體重等屬性來細化。屬性通常由屬性名和屬性值組成，語法格式如下 屬性通常寫在開始標簽里面，屬性值一般用雙引號標簽起來（注意：是英文半角狀態(tài)下的雙引號），多個屬性并列的時候，用空格間隔。 第 10頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 主要內(nèi)容 本標簽 像標簽 鏈接標簽 格標簽 單標簽 表標簽 它標簽 章小結(jié) 第 11頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 文本標簽 文字屬性標記 標題、段落標記 第 12頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 文字屬性標記 標題文字標記 標記用于設(shè)置網(wǎng)頁中的標題文字，被設(shè)置的文字將以黑體或粗體的方式顯示在網(wǎng)頁中。 標題標記的格式： 例 6各級標題的設(shè)定 第 13頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 文字屬性標記 文字格式控制標記 標記用于控制文字的字體，大小和顏色?？刂品绞绞抢脤傩栽O(shè)置得以實現(xiàn)的。 標記的格式： 第 14頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 文字屬性標記 例 6置文字的字體、大小和顏色。 第 15頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 文字屬性標記 特定文字樣式標記 例 6設(shè)置文字的字形或字體 第 16頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 標題、段落標記 換行標記 換行標記是個單標記，也叫空標記，不包含任和內(nèi)容，在 記，該標記之后的內(nèi)容將顯示在下一行。 換段落標記 由 標記所標識的文字，表明是同一個段落的文字。兩個段落間的間距等于連續(xù)加了兩個換行符，也就是要隔一行空白行。 原樣顯示文字標記 要保留原始文字排版的格式，就可以通過 標記來實現(xiàn)，方法是把制作好的文字排版內(nèi)容前后分別加上始標記 和尾標記 。 第 17頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 標題、段落標記 居中對齊標記 在頁面中使用 標記進行居中顯示， 是成對標記，在需要居中的內(nèi)容部分開頭處加 ，結(jié)尾處加 。 水平分隔線標記 標記是單獨使用的標記，是水平線標記。 特殊字符 在 些字符沒辦法直接顯示出來，例如“ ”。使用特殊字符可以將鍵盤上沒有的字符表達出來，而有些 瀏覽器在解析 如“ 第 19頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 主要內(nèi)容 本標簽 像標簽 鏈接標簽 格標簽 單標簽 表標簽 它標簽 章小結(jié) 第 20頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 圖像標簽 圖像會使網(wǎng)頁更加生動，可以描述更復(fù)雜的問題。 簽：代表 定網(wǎng)頁圖片的方法有以下幾種： 設(shè)定 景顏色：使用. 設(shè)定圖片：使用 標記。 設(shè)定地圖：使用 . 第 21頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 圖像標記基本知識 圖像標簽語法 像）的縮寫，定義圖像的語法如下： 圖像標簽 和源屬性 替換文本屬性 提示文字屬性 性 第 22頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 圖像標記基本知識 例 6在網(wǎng)頁中顯示圖像 和動畫圖像 。 第 23頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 圖像標記基本知識 例 6將其他文件夾或服務(wù)器的圖片顯示到網(wǎng)頁中。 第 24頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 圖像標記基本知識 例 6向 面添加背景圖片。 例 6將圖片調(diào)整到不同的尺寸。 例 6將圖像作為一個鏈接使用。 第 25頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 圖像標記基本知識 網(wǎng)頁設(shè)計中常見的圖像格式簡介 最多支持 256色，支持透明，支持多幀動畫顯示效果，可以使用在品質(zhì)較差或者需要透明或動畫顯示的情況。 支持多種顏色，可以有很高的壓縮比，使用了有損壓縮，不支持透明，不支持動畫效果，可以使用在品質(zhì)要求較高的場合：風(fēng)景、寫真等。 是一種新的圖片技術(shù)，可以表現(xiàn)品質(zhì)比較高的圖片，使用了無損壓縮，支持透明，不支持動畫。 第 26頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 圖像標記應(yīng)用技巧 網(wǎng)頁設(shè)計給圖片加邊框 例 6給圖片加邊框后效果如圖所示。 給圖片加動態(tài)說明和替代文字 例 6給圖片加動態(tài)說明和替代文字。 第 27頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 圖像標記應(yīng)用技巧 圖像與文字混排 圖文混排主要是設(shè)置 動態(tài)替換圖像 例 6當(dāng)鼠標放在圖片上時，圖片會自動更換，鼠標離開之后，圖片又會恢復(fù)原來的樣了。 第 28頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 圖像標記應(yīng)用技巧 在網(wǎng)頁加入影像片斷 例 6在 現(xiàn)要在網(wǎng)頁中播放。那么源代碼是這樣的： 第 29頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 圖像標記應(yīng)用技巧 創(chuàng)建圖像地圖 例 6創(chuàng)建帶有可供點擊區(qū)域的圖像地圖。其中的每個區(qū)域都是一個超級鏈接。 第 30頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 主要內(nèi)容 本標簽 像標簽 鏈接標簽 格標簽 單標簽 表標簽 它標簽 章小結(jié) 第 31頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 超鏈接標簽 超鏈接概念 鏈接是超級鏈接的縮寫 ,英文是 就是文本的意思。超文本鏈接語言（網(wǎng)頁）的精髓就是鏈接，通過鏈接才可以把世界各地的網(wǎng)頁鏈到一起，成為互聯(lián)網(wǎng)。 鏈接語法 超級鏈接 標記代表一個鏈接點，是英文 點）的簡寫。它的作用是把當(dāng)前位置的文本或圖片連接到其他的頁面、文本或圖像，語法結(jié)構(gòu)如下： 顯示的文字 第 32頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 應(yīng)用技巧 提供下載文件 在新窗口中打開鏈接的網(wǎng)頁 鼠標移到鏈接，顯示一行說明文字 鼠標移到一個鏈接上彈出一個窗口 鏈接到本頁的指定內(nèi)容 鏈接到其它頁面的指定內(nèi)容位置 鏈接到 鏈接到圖像 第 33頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 應(yīng)用技巧 例 6鏈接到圖像。 第 34頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 主要內(nèi)容 本標簽 像標簽 鏈接標簽 格標簽 單標簽 表標簽 它標簽 章小結(jié) 第 35頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 表格標簽 表格是 用其多種屬性能夠設(shè)計出多樣化的表格。使用表格可以使頁面有很多意想不到的效果，使頁面更加整齊美觀。 表格的基本結(jié)構(gòu) 第 36頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 表格標簽及屬性 標簽 標簽表示一個表格的開始。 標簽與 標簽 標簽表示表格的一行， 標簽表示表格的一個單元格。 表格標簽的實例 第 37頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 主要內(nèi)容 本標簽 像標簽 鏈接標簽 格標簽 單標簽 表標簽 它標簽 章小結(jié) 第 38頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 表單標簽 表單在 是與用戶交互信息的主要手段。一個表單至少應(yīng)該包括說明性文字、用戶填寫的表格、提交和重填按鈕等內(nèi)容。用戶填寫了所需的資料之后，按下“提交資料”按鈕，這樣所填資料傳到 頁的設(shè)計者隨后就能在 而完成了從用戶到作者之間的反饋和交流。 第 39頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 表單中的元素 通按鈕 選按鈕 選框 拉式菜單 行文本框 行文本框 交按鈕 填按鈕 第 40頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 設(shè)計表單標記 表單標記 表單輸入標記 下拉菜單標記 選項標記 多行文本輸入標記 第 41頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 主要內(nèi)容 本標簽 像標簽 鏈接標簽 格標簽 單標簽 表標簽 它標簽 章小結(jié) 第 42頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 列表標簽 在 理的使用列表標記可以起到提綱和格式排序文件的作用。列表分為兩類，一是無序列表，一是有序列表，無序列表就是項目各條列間并無順序關(guān)系，純粹只是利用條列來呈現(xiàn)資料而已，此種無序標記，在各條列前面均有一符號以示區(qū)隔。而有序條列就是指各條列之間是有順序的，比如從 1、 2、 3， 一直延伸下去。 第 43頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 無序列表 無序列表不用數(shù)字標簽每個列表項，而采用一個符號標志每個列表項，比如黑圓點、小方塊等。無序列表使用的一對標記是 ，每一個列表項前使用 。 例 6無序列表的顯示方式 第 44頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 有序列表 有序列表和無序列表的使用格式基本相同，它使用標記 ，每一個列表項前使用 。 例 6有序列表的顯示方式 第 45頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 定義列表 定義列表通常用于術(shù)語的定義和解釋。定義列表由 標簽開始， 標簽的含義是定義題目，即定義了列表中的項目。術(shù)語的解釋用 定義，即 標簽的含義是定義描述。 例 6定義列表的顯示方式 第 46頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 主要內(nèi)容 本標簽 像標簽 鏈接標簽 格標簽 單標簽 表標簽 它標簽 章小結(jié) 第 47頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 其它標簽 多視窗口框架 第 48頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 身沒有具體的顯示效果，由其 過兩者在使用方法上存在著很大的差別。 例 6 第 49頁 網(wǎng)頁設(shè)計與制作教程 第 1章 網(wǎng)頁設(shè)計與制作基礎(chǔ) 多視窗口框架 框架就是把一個瀏覽器窗口劃分為若干個小窗口，每個窗口可以顯示不同的 頁。使用框架可以非常方便的在瀏覽器中同時瀏覽不同的頁面效果，也可以非常方便的完成導(dǎo)航工作。 而所有的框架標記要放在一個 檔中?？蚣芗瘶擞浰〈?，然后通過 的子窗口標記 定義每一個子窗口和子窗口的頁面屬性。 第 50頁 網(wǎng)頁設(shè)計與制作教程 第 1章