第2章 Web頁面制作基礎,2.1 HTML語言概述 2.2 文檔的格式與風格 2.3 加入多媒體與超級鏈接 2.4 制作表格 2.5 制作表單 2.6 框架結構 2.7 CSS基礎,2.1 HTML語言概述,WWW（World Wide Web，萬維網）拉進了人們彼此間的距離，使得人與人之間的信息交流變得更加簡便和快捷。WWW上的信息，大部分是通過HTML語言發布的。,本章首頁,2.1 HTML語言概述,2.1.1 HTML概述 HTML是（Hyper Text Markup Language，超文本標記語言）的縮寫，最早源于SGML語言。 HTML用來表示網上信息的符號標記語言。在WWW上，發布信息通常使用HTML，它是Web頁面的基礎，任何一個Web頁面都離不開HTML，而且HTML也是Web應用開發的基礎。 HTML語言是大多數瀏覽器都能識別的語言，使用HTML語法規則建立的文本可以運行在不同的操作系統平臺上，而且能被大多數用戶所接受。,2.1 HTML語言概述,2.1.2 文檔的結構 頭部信息 正文部分 ,文件開頭和結尾由和來標記。 和標記頭部，用來包含文件的基本信息；和標記正文部分，是整個文件的主體部分。,2.1 HTML語言概述, 這是標題部分。 你好，這是正文部分！ ,2.1 HTML語言概述,2.1.3 HTML標記 1HTML文檔標記 格式： 功能：標志文檔開始和結尾的標記。 2HTML文件頭標記 格式： 功能：用于包含文件的基本信息。 3HTML文件主體標記 格式： 功能：文件主體標記。,2.1 HTML語言概述,2.1.4 常用HTML編輯工具 任何一個文檔編輯器都是HTML編輯器。 為了減少網頁設計師的工作，使設計網頁更加的方便，很多公司設計了專用的網頁編輯器，像Dreamweaver，FrontPage，CutePage，QuickSite等，是專門用來制作網頁的，利用它們可以很容易的編寫出精美的網頁，具有所見即所得的功能。 所謂所見即所得，就是在編輯網頁時看到的效果，與使用瀏覽器時顯示的效果基本一致。,2.2 文檔的格式與風格,在大多數網頁中，文檔是核心的內容，只有設置適當的文檔格式，才能得到絢麗多彩的網頁。設置文檔的格式包括：設置標題和文字的字體、字號、字型、顏色，段落格式、文本布局等。,本章首頁,2.2 文檔的格式與風格,2.2.1 設置的屬性,2.2 文檔的格式與風格,2.2.2 段落格式化 1標題標記 格式：， 功能：設置各種大小不同標題的標記。 2段落標記 格式： 功能：設置段落標記。 3注釋標記 格式： 功能：注釋標記。,2.2 文檔的格式與風格,4分區顯示標記 格式： 功能：分區顯示標記。 5換行標記 格式： 功能：強制換行。 6水平線標記 格式： 功能：插入水平線標記。,2.2 文檔的格式與風格,標記的使用 三種標記的使用！ 我在中間！ 中間 我在左邊！左邊 我在右邊！右邊 ,2.2 文檔的格式與風格,2.2.3 建立列表 1有序列表 格式： type屬性：數字（1，2，）、大寫英文字母（A，B，）、小寫英文字母（a，b，）、大寫羅馬字母（I，II，）和小寫羅馬字母（i，ii，），默認的序號是數字。,2.2 文檔的格式與風格,2.2.3 建立列表 2無序列表 格式： type屬性：可以為disc（實心圓點）、circle（空心圓點）、square（方塊）和自定義圖片，默認為實心圓點。,2.2 文檔的格式與風格,2.2.3 建立列表 3自定義列表 格式： 定義列表；定義列表項，項目會自動換行并左對齊，但項目間沒有空行；用來定義語句。,2.2 文檔的格式與風格,2.2.4 字符的格式化 1字體設置標記 格式： 功能：設置字體格式標記。,2.2 文檔的格式與風格,2.2.4 字符的格式化 2其他標記,2.3 加入多媒體與超級鏈接,圖像的出現為本來單調乏味的網絡世界增添了一道亮麗的風景線。圖像在網頁設計中是必不可少的，所以用戶應該掌握在網頁中操作圖像的方法。,本章首頁,2.3 加入多媒體與超級鏈接,插入多媒體的一般形式： 格式： 功能：在網頁中加入圖像、視頻、動畫等。,2.3 加入多媒體與超級鏈接,1插入圖像,2.3 加入多媒體與超級鏈接,2插入視頻,2.3 加入多媒體與超級鏈接,2.3.2 加入超級鏈接 格式： 功能：在當前頁和其他頁間建立超鏈接。 如：超級鏈接 如：超級鏈接,超級鏈接,超級鏈接可以指向E-mail地址 如：指向E-mail地址的超級鏈接 超級鏈接可以指向頁面內部鏈接（錨點鏈接） 指向本頁面錨點aa的超級鏈接,2.4 制作表格,表格可以把文字和圖片等內容按照行和列排列起來，可以用來建立主頁的框架，使得整個網頁更加清晰和條理化，有利于信息的表達。,本章首頁,2.4 制作表格,2.4.1 建立表格 格式：,2.4 制作表格,2.4.2 定制表格 格式：。功能：定義表格的一行。 格式：。功能：定義單元格。,2.5 制作表單,表單是用戶和Web應用程序、Web數據庫等進行交互的界面。在Web上，通過表單可以完成用戶和計算機或服務器之間進行的信息交換。,本章首頁,2.5 制作表單,Method屬性的兩個方法： GET方法：將表單數據附加在Action屬性指定的URL地址之后，并在URL地址與表單數據間加上一個“？”分割符，表單的各個數據項間用“&”分割符。 http:/localhost/test.asp?txtid=012&txtusename=ucau GET方式一次最多只能提交256個字符； POST方式是將表單數據作為一個獨立的數據塊在后臺直接發送給服務器。,2.5 制作表單,2.5.1 表單的結構 格式： 功能：定義表單。,2.5 制作表單,2.5.2 FORM中常用的標記 1輸入域 （1）單行輸入域。格式：。,2.5 制作表單,1）text類型。 2）password類型。 3）radio類型。 4）checkbox類型。 5）submit類型。 6）reset類型。 7）button類型 8）hidden類型。,1）文本框 ? 文本框的名字 * text,password,hidden * 默認值 * 長度 ? 最大輸入字符數,常用標記 表單對象標記,2）單選框(RadioButton) 一個表單里的所有變量名相同的單選框只能夠有一個被選中。 男 女 各個選項的name必須一樣，而value不一樣才能達到預期效果,常用標記 表單對象標記,3 ）復選框(Checkbox) 在一個表單里的所有多選框可以有一個或多個被選中。 ,常用標記 表單對象標記,2.5 制作表單,（2）多行輸入域。 格式為： 功能：定義多行文本輸入域。,2.5 制作表單,2按鈕 格式： 功能：定義按鈕。,4 ）按鈕 包括普通按鈕、重置按鈕和提交按鈕 ,常用標記 表單對象標記,2.5 制作表單,3選擇域 格式： 選項一 選項二 功能：定義選擇欄。,屬性：,屬性：,5）下拉列表 基本語法 碩士以上 大學本科 大專 中專以下 ,3、常用標記 表單對象標記,綜合練習（*） 試在當前頁面中設計一名為userinfo的表單，用以收集用戶的資料，并將其提交給userlogin.asp頁面處理。界面如下：,3、常用標記 表單對象標記,2.6 框架結構,2.6.1 框架結構的文件格式 ,本章首頁