html網(wǎng)頁設(shè)計第一章.ppt

1、第一章,HTML的基本標簽,課程地位,就業(yè)技能結(jié)構(gòu)圖,本門課程目標和課程項目展示,本門課程目標 學(xué)完本門課程后，你能夠： 課程項目展示,演示示例1：課程項目展示,能制作界面美觀大方、面向企業(yè)應(yīng)用的靜態(tài)商業(yè)網(wǎng)站，不含動態(tài)腳本功能。,預(yù)習(xí)檢查,請詳述HTML文檔的基本結(jié)構(gòu)。 圖像與文本的對齊方式有哪幾種？ 通常使用那個標簽的那個屬性來創(chuàng)建超鏈接？,本章任務(wù),制作圖文并茂的“廣告”頁面,查看源代碼,本章目標,會使用HTML的基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁 會使用文本相關(guān)標簽實現(xiàn)文字修飾和布局 會使用圖像相關(guān)標簽實現(xiàn)圖文并茂的頁面 會使用超鏈接相關(guān)標簽實現(xiàn)頁面間的跳轉(zhuǎn),HTML文件的基本結(jié)構(gòu),HTML文檔的結(jié)構(gòu),

2、我的第一個網(wǎng)頁 Hello World! ,HTML 網(wǎng)頁,頭部部分,主體部分,標簽標記 HTML 文檔的開始和結(jié)束,網(wǎng)頁標題,網(wǎng)頁內(nèi)容，可以是文本、圖像等,這部分包含文本、圖像和鏈接。它包括在 標簽內(nèi),查看源代碼,這部分包括標題和其他說明信息。包括在 標簽內(nèi),使用記事本創(chuàng)建網(wǎng)頁,演示示例2：如何在記事本里創(chuàng)建網(wǎng)頁,使用記事本創(chuàng)建網(wǎng)頁的步驟： 1、打開記事本 2、輸入HTML代碼 3、保存為*.html或*.htm文件，注意格式問題 4、打開網(wǎng)頁預(yù)覽效果,使用記事本創(chuàng)建網(wǎng)頁,標簽, 網(wǎng)頁標題 ,網(wǎng)頁頁面中出現(xiàn)亂碼，那如何消除亂碼使其正常顯示？,使用標簽,簡體中文：gb2312 繁體中文：big

3、5 純英文網(wǎng)頁：iso-8859-1,可以避免頁面中的亂碼,頁面背景色或背景圖像, Hello World！ ,為了使頁面美麗大方，網(wǎng)頁背景要盡量地淺, Hello World! ,查看源代碼,網(wǎng)頁背景色彩,網(wǎng)頁背景圖像,文本相關(guān)標簽,字體、字號 標題標簽 標簽 特殊符號 行的控制 段落標簽 換行標簽,使用了 ,換段了,設(shè)置了字體的大小和顏色,換行了,特殊符號,字體、字號相關(guān)標簽,標題標簽 . #=1, 2, 3, 4, 5, 6 說明：到 字體大小依 次遞減, 一級標題 二級標題 三級標題 四級標題 五級標題 六級標題 ,H1 到 H6 標簽用于指定不同級別的標題,查看源代碼, . ,字體、

4、字號相關(guān)標簽,標簽 特殊符號,字體的 大小值,字體的 顏色,字體的 類型,字體、字號相關(guān)標簽,查看源代碼,. 手機充值、IP卡/電話卡 移動 All rights. ,空格效果,. 淘寶集市歡迎您！ 淘寶網(wǎng)首屆翠友會！ ,行的控制相關(guān)標簽,段落標簽 段(Paragraph) (可以看作是空行) 換行標簽 換行 ,查看源代碼,換段了,換行了,圖像標簽,常見的圖片格式介紹,圖像標簽,圖像的基本語法 , ,查看源代碼,鼠標移到圖像上，出現(xiàn)的提示性文字,圖像的位置,圖像的寬度,圖像的高度,為圖像添加的提示性文字,圖像標簽,圖像與文本的對齊方式 ,圖像與文本居中對齊,還可以取 top, bottom 值

5、,. 請點擊廣告進入明星專區(qū) ,查看源代碼,圖像和文本居中對齊,小結(jié)1,字號大小為3,練習(xí)答案,練習(xí)代碼,編寫如下圖所示效果對應(yīng)的html代碼,文字布局,內(nèi)容分隔標簽 項目列表和編號 有序列表 無序列表 預(yù)格式文本標簽,水平分隔線,有序列表,無序列表,用了預(yù)先定義好的格式,如何使用內(nèi)容分隔標簽, ,線的厚度值,線的寬度,查看源代碼, 標簽用于在頁面上繪制水平線,線的顏色,如何使用列表,無序列表語法 列表項內(nèi)容 有序列表語法 列表項內(nèi)容 ,查看源代碼,注冊步驟： 填寫信息 收電子郵件 注冊成功 新人上路指南 如何激活會員名？ 如何注冊淘寶會員？ 注冊時密碼設(shè)置有什么要求？ 支付寶認證 ,預(yù)格式文

6、本標簽,如何實現(xiàn)如下圖所示的頁面中的文字效果？,使用 標簽可以實現(xiàn),如何使用預(yù)格式文本標簽, 騰訊-QQ幣/QQ幻想-30元卡 一 口 價：26.45元 運費：賣家承擔運費 剩余時間：5天 寶貝類型： 全新 賣主聲明：貨到付款，可試用10天！ ,查看源代碼,HTML中代碼格式與瀏覽器中顯示效果一樣,頁面鏈接標簽,鏈接到其他頁面 免費注冊,鏈接內(nèi)容,鏈接的地址, 鏈接到其他頁面 免費注冊 登錄 ,單擊”免費注冊”之后鏈接到的頁面,查看源代碼,頁面鏈接標簽,鏈接到其他頁面 相對路徑 指定從根目錄到文件的完整路徑。 絕對路徑 指定相對于當前文件的文件位置。,在同一個文件夾下有兩個html文件，從一個

7、文件超鏈接到另一個文件的路徑有幾種方式？,兩種方式：相對路徑和絕對路徑,頁面鏈接標簽,要鏈接到同一目錄 (C:HTML) 下的頁面，可編寫 或 ,相對路徑名,絕對路徑名,頁面鏈接標簽,要實現(xiàn)如下圖所示的超鏈接效果，怎么辦？,演示示例3：演示錨鏈接的例子,使用錨記標簽,頁面鏈接標簽,鏈接到本頁面 錨記標簽用于使用戶“跳”到文檔的某個部分 HTML 的 NAME 屬性用于創(chuàng)建錨標記 主題名稱 為達到這種跳轉(zhuǎn)效果，請在 HREF 參數(shù)中使用該標記 主題名稱,演示示例4：演示錨鏈接的例子, 鏈接到其他頁面 新人上路 新人上路指南 ,1、定義錨標記,2、鏈接到錨標記所在位置,頁面鏈接標簽,電子郵件鏈接

8、要鏈接電子郵件，可在鏈接標簽中插入”mailto:郵箱地址” 站長信箱,演示示例5：演示電子郵件鏈接, 電子郵件鏈接 站長信箱 ,單擊”站長信箱”鏈接后的輸出結(jié)果,任何正確的電子郵箱地址均可,滾動標簽, 滾動文字或圖像 ,滾動延遲時間,滾動對象的方向,說明： scrolldelay：表示滾動延遲時間，默認值為90。 direction：表示滾動的方向，默認為從右向左。,查看源代碼,滾動標簽,水平滾動 垂直滾動 Avon化妝品 雅詩蘭黛 ,水平向左移動,垂直向上移動,圖片和文字同時垂直向上移動,聲明滾動文字結(jié)束,聲明滾動文字“水平滾動”開始，并且將會以默認方式從右向左滾動,小結(jié)2,有序列表OL,無序列表UL,練習(xí)答案,練習(xí)代碼,