商務網(wǎng)頁第3課課件

1、第3章 HTML網(wǎng)頁制作技術(shù)3.1 網(wǎng)頁基礎知識3.1.1 網(wǎng)頁源文件1網(wǎng)頁源文件的概念網(wǎng)頁源文件是一個什么樣的文件？網(wǎng)頁源文件其實是一個純文本文件，是按照超文本標記語言的規(guī)范定義和顯示網(wǎng)頁內(nèi)容（包括多媒體、動態(tài)數(shù)據(jù)）的文本文件。2網(wǎng)頁源文件的存儲格式文件擴展名通常為.html或.htm，動態(tài)網(wǎng)頁通常采用.jsp/.asp等格式。如果一個網(wǎng)頁含有圖片，則網(wǎng)頁源文件中一定有標記該圖片存儲位置、以及以如何顯示的語句。3網(wǎng)頁源文件的運行方式瀏覽器就是“翻譯官”，HTML就是“世界語”3.1.2 網(wǎng)頁解釋代碼1網(wǎng)頁解釋代碼的產(chǎn)生2網(wǎng)頁解釋代碼的查看與保3.1.3 網(wǎng)頁制作語言介紹1HTML語言（1）H

2、TML定義HTML是超文本標記語言，是標準通用標記語言下的一個應用，是一種標準規(guī)范，它通過標記符號（即標簽）標記要顯示的網(wǎng)頁中的各個部分，是最基礎的網(wǎng)頁制作語言。（2）HTML發(fā)展（3）HTML與XML、XHTML的關(guān)系 HTML與XML的關(guān)系XML（EXtensible Markup Language，可擴展標記語言）是標準通用標記語言的子集，是一種用于標記電子文件使其具有結(jié)構(gòu)性的標記語言。兩者的設計目的不同。XML被設計用來傳輸和存儲數(shù)據(jù)，其焦點是數(shù)據(jù)的內(nèi)容；HTML被設計用來顯示數(shù)據(jù)，其焦點是數(shù)據(jù)的外觀。聯(lián)系是：兩者都是標記語言，XML雖然是后來出現(xiàn)的，但不是HTML的替代，而是對HTM

3、L的補充。 HTML與XHTML的關(guān)系XHTML（Extensible HyperText Markup Language，可擴展超文本標記語言），其目的就是取代HTML，結(jié)合了部分XML的強大功能及大多數(shù)HTML的簡單特性。其表現(xiàn)方式與HTML類似，不過語法上更加嚴格。2CSS語言CSS是一種用來表現(xiàn)HTML或XML等文件樣式的文本通用標記語言，其主要作用就是增強HTML網(wǎng)頁的顯示效果。CSS的本質(zhì)是一系列式樣格式的設置規(guī)則，用來設置網(wǎng)頁的外觀。CSS源文件與HTML源文件一樣也是純文本文件。3.1.4 HTML基礎知識1網(wǎng)頁元素在HTML語言規(guī)范里，網(wǎng)頁元素是指文本、圖像、聲音、視頻、動畫

4、、超鏈接、菜單、表單和程序等網(wǎng)頁基礎單元。網(wǎng)頁元素可以是一個最基礎的單元素，也可以是由多個元素組合而成的組合元素。網(wǎng)頁組合元素有時也稱為網(wǎng)頁構(gòu)件。2HTML標簽的作用和特點（1）HTML標簽的概念HTML標簽就是標記符號，是專門定義網(wǎng)頁元素用的，通常由元素的英文名稱或者縮寫來標識，并用尖括號“”括起來。尖括號連同擴起來的文本字符的組合就是一個標簽，形式為“”（如“”），也可以把標簽理解為用尖括號包圍的關(guān)鍵字，其定義了后續(xù)的元素是什么。標簽通常成對出現(xiàn)，有開始標簽和結(jié)束標簽，分別采用“”“”形式表示。如“” “”。（2）HTML標簽的作用識別網(wǎng)頁元素是什么類型的。無標簽的網(wǎng)頁源代碼：包含標簽的網(wǎng)

5、頁源代碼：（3）HTML標簽的特點HTML標簽具有以下顯著特點： 由尖括號包圍的關(guān)鍵詞，比如 。 通常是成對出現(xiàn)的，比如和。標簽對中的第1個標簽是開始標簽，第2個標簽是結(jié)束標簽。開始和結(jié)束標簽也被稱為開放標簽和閉合標簽。 也有單獨呈現(xiàn)的標簽，如：等。 一般成對出現(xiàn)的標簽，標簽的內(nèi)容在兩個標簽中間。而單獨呈現(xiàn)的標簽，則在標簽屬性中賦值。如：標題 通常，網(wǎng)頁的標題、字符格式、語言、兼容性、關(guān)鍵字、網(wǎng)頁整體描述等信息顯示在標簽中，而網(wǎng)頁需展示的內(nèi)容需嵌套在標簽中。這是一種規(guī)范的編寫習慣，雖然不按規(guī)范的編寫習慣書寫代碼也可以正常顯示，但是從職業(yè)素養(yǎng)的角度講，還是應該養(yǎng)成規(guī)范的編寫習慣。3HTML標簽的

6、種類HTML標簽的種類很多，目前上沒有規(guī)范的分類方法。基于實用的角度，總體上可分為以下13個種類：基礎標簽、格式標簽、表單標簽、框架標簽、圖像標簽、視音頻標簽、鏈接標簽、列表標簽、表格標簽、樣式標簽、元信息標簽、編程標簽、全局標簽表3.1 基礎標簽標簽 描述定義文檔類型 定義HTML文檔 定義網(wǎng)頁標題 定義文檔的主體 定義 HTML文檔標題 定義段落 定義簡單的折行 定義水平線 定義注釋 表3.2 格式標簽標簽 描述 定義只取首字母的縮寫 定義縮寫 定義文檔作者或擁有者的聯(lián)系信息 定義粗體文本 定義文本的文本方向，使其脫離其周圍文本的方向設置 定義文字方向 定義大號文本 定義長的引用 定義居中

7、文本（不贊成使用） 定義引用（citation） 定義計算機代碼文本 定義被刪除文本 定義項目 定義強調(diào)文本 定義文本的字體、尺寸和顏色（不贊成使用） 定義斜體文本 定義被插入文本4.HTML標簽屬性形象理解：標簽是定義類別的，屬性是個性化描述的。標簽屬性必須配合標簽使用，進一步描述該標簽元素的顯示特性的。打個比方，魚是魚類的標簽，魚的名稱、品種、大小、形狀、顏色、生活習性等就是某種魚（或者某個魚）的屬性，這些屬性的值決定了該魚具體是哪種魚（或哪條魚）。如：我們用標簽定義“理解標簽屬性”是“一級文檔標題”，再采用標簽屬性進一步標明這個標題是黑體字、藍顏色、6號字大?。ㄗⅲ壕W(wǎng)頁中的字體標簽中的字

8、的大小與Word中字的大小的概念不一樣，1號2號3號）等。具體代碼如下：5HTML事件屬于高級網(wǎng)頁設計的內(nèi)容，常見與腳本語言。6設置標簽及標簽屬性的方法 標簽內(nèi)容 標簽實例 7HTML基本結(jié)構(gòu) 標記語言含義文檔頭部分html為標記語言聲明的標簽，告訴瀏覽器以下文件為超文本標記語言是html文檔頭部的標簽，網(wǎng)頁頭部及頭部以上的信息不在網(wǎng)頁中顯示，主要作用是描述整個網(wǎng)頁，定義或聲明CSS樣式等。如網(wǎng)頁標題、字符格式、語言、兼容性、關(guān)鍵字等 網(wǎng)頁結(jié)構(gòu)介紹 為網(wǎng)頁標題的標簽。指明“網(wǎng)頁結(jié)構(gòu)介紹”標題顯示在瀏覽器標題欄中是文檔頭部結(jié)束的標簽文檔體部分 這里是正文內(nèi)容是網(wǎng)頁文檔體正文開始的標簽。所有網(wǎng)頁需

9、要顯示的內(nèi)容，均應在此標識后面處理。本例中的正文內(nèi)容是“這里是正文內(nèi)容”。是網(wǎng)頁文檔體結(jié)束的標簽是超文本標記語言結(jié)束的標簽，也代表了網(wǎng)頁結(jié)束3.2 文本設置方法文本設置主要包括網(wǎng)頁標題、文字、文檔標題的設置。3.2.1 設置網(wǎng)頁標題網(wǎng)頁標題是網(wǎng)頁的總標題，相當于一本書的書名，顯示在瀏覽器頂端的標題欄中。設置網(wǎng)頁標題的標簽：設置方法：將標題內(nèi)容放在、之間。即：網(wǎng)頁標題實例完整的示例代碼如下： 網(wǎng)頁標題介紹 網(wǎng)頁標題是對一個網(wǎng)頁內(nèi)容的高度概括。網(wǎng)頁標題命名沒有固定的要求，通常根據(jù)本網(wǎng)頁的主要內(nèi)容進行高度歸納概括而成。一般來說，網(wǎng)站首頁的標題就是網(wǎng)站的正式名稱，子頁面文章內(nèi)容的標題就是該子頁面的網(wǎng)頁

10、標題。當然這種原則并不是固定不變的，在實際工作中會適當調(diào)整。 3.2.2 設置文字屬性文字屬性主要包括字體、字號、顏色、粗體、斜體等。設置方式為：設置文字標簽及其相關(guān)屬性。1.設置字體標簽：,屬性 face；設置方法：文字實例其中，屬性值為“宋體”、“楷體”、“仿宋”、“黑體”等，為桌面計算機系統(tǒng)里面已經(jīng)安裝的字體。如果設置的字體系統(tǒng)中沒有，則按照默認的字體顯示。示例代碼如下： 楷體字體 宋體字體 黑體字體 仿宋字體 幼圓字體 方正行楷/默認字體 2設置字號設置字號需要使用標簽的size屬性，設置方法為文字實例其中，屬性值是數(shù)字17中的任何一個數(shù)值。默認值為系統(tǒng)默認字號。示例代碼為： 設置文字

11、字號示例 第三章 網(wǎng)頁制作技術(shù) 第三章 網(wǎng)頁制作技術(shù) 第三章 網(wǎng)頁制作技術(shù) 第三章 網(wǎng)頁制作技術(shù) 第三章 網(wǎng)頁制作技術(shù) 第三章 網(wǎng)頁制作技術(shù) 第三章 網(wǎng)頁制作技術(shù) 注意字號大小與word中字號大小的不同。3設置文字顏色設置文字顏色需要使用標簽的color屬性，設置方法為文字實例其中，“color”的屬性值（代表一種顏色）有3種表達形式：即顏色名稱（如red、green、blue、yellow等）；十六進制顏色值（如“#FF00FF”“#0099CC”等比較常用）；rgb顏色代碼（如rgb(255,0,0)、rgb(0,255,255)等）。顏色的默認值為黑色。有關(guān)“十六進制的顏色”或者“rgb

12、代碼”需要閱讀有關(guān)資料，本書不做重點介紹。本書僅介紹通用的216種顏色及其對應的十六進制顏色值 設置文字顏色示例 第三章 網(wǎng)頁制作技術(shù) 第三章 網(wǎng)頁制作技術(shù) 第三章 網(wǎng)頁制作技術(shù) 4其他文字相關(guān)屬性與文字設置相關(guān)的常用標簽還有以下這些。：粗體字標簽。放在與標簽之間的文本將以粗體方式顯示。 ：斜體字標簽。放在與標簽之間的文本將以斜體方式顯示。：下劃線標簽。放在與標簽之間的文本將以下劃線方式顯示。：刪除線標簽。放在與標簽之間的文本將以刪除線方式顯示。：水平線標簽，用于美化界面。：小字體標簽。放在與標簽之間的文本將以小字體方式顯示。：換行標簽。：注釋標簽，用于注釋文檔內(nèi)容。注釋標簽中的內(nèi)容不會顯示出

13、來。注釋標簽是非常重要的，優(yōu)秀的HTML文檔必須有完善的注釋說明，方便其他程序員閱讀代碼及修改完善。3.2.3 設置文檔標題為了美化網(wǎng)頁的界面，通常要設置網(wǎng)頁的文章標題及章節(jié)標題。我們把這些文章標題和章節(jié)標題統(tǒng)稱為標題。為了區(qū)分于網(wǎng)頁標題，本教材把這些標題稱之為文檔標題。如果把一本書的書名比作網(wǎng)頁標題，那么書中各章節(jié)標題就可比作文檔標題。很多時候在網(wǎng)頁設計制作中提及的標題均指文檔標題。文檔標題設置比網(wǎng)頁標題設置要復雜一些，因為文檔標題是文檔的構(gòu)成部分，在主頁面中顯示的，具有文本文字的一切屬性。文檔標題一共分6級，分別用、這6個標簽表示。標題為最大的標題標簽，標題為最小的標題標簽。 六級文檔標題 這是標題一 這是標題二 這是標題三 這是標題四 這是標題五 這是標題六 1設置文檔標題的水平位置設置文檔標題位置需要使用標題標簽的對齊屬性（align屬性），下面我們以標簽為例介紹其設置方法： 一級文檔標題實例常用的屬性值有l(wèi)eft（左）、center（居中）、right（右）3個屬性值，默認值是“l(fā)eft”。2設置文檔標題的綜合范例要求采用文字屬性設置結(jié)合文檔標題設置，采用不同的顯示風格顯示文檔標題。要求顯示的文檔標題樣式如圖。從樣式中可以看出，標題采用了一級、二級、三級、四級，而且，各級標題