企業(yè)網(wǎng)站設(shè)計(jì)與制作

1、第二章 HTML超文本標(biāo)記語言 理論部分IP、HTTP、FTP分別是那些英文單詞的縮寫？網(wǎng)站開發(fā)基本流程是什么？正確的站點(diǎn)目錄結(jié)構(gòu)Images、Image文件夾應(yīng)存放什么文件？如何使用dreamwaver創(chuàng)建網(wǎng)頁？插入圖像的方法有哪些？范圍、圖像標(biāo)簽分別是什么？課前小考2/40本章技能點(diǎn)了解HTML文檔結(jié)構(gòu)使用文本相關(guān)標(biāo)簽和行控制相關(guān)標(biāo)簽使用水平線、范圍、圖像標(biāo)簽設(shè)置頁面使用超鏈接相關(guān)標(biāo)簽實(shí)現(xiàn)頁面跳轉(zhuǎn)使用列表相關(guān)標(biāo)簽實(shí)現(xiàn)頁面有序/無序列表使用定義標(biāo)簽實(shí)現(xiàn)頁面定義樣式了解HTML代碼注釋技能展示3/40本章結(jié)構(gòu)HTML基本標(biāo)簽基本結(jié)構(gòu)和編輯工具HTML超文本標(biāo)記語言什么是HTMLHTML和瀏覽器

2、的關(guān)系HTML注釋HTML的基本結(jié)構(gòu)網(wǎng)頁的摘要信息4/40文本相關(guān)標(biāo)簽行控制相關(guān)標(biāo)簽范圍標(biāo)簽和圖像標(biāo)簽超鏈接和列表標(biāo)簽HTML超文本標(biāo)簽語言 Hyper Text Markup Language網(wǎng)頁的“源碼”瀏覽器：“解釋和執(zhí)行”HTML源碼的工具 什么是HTML5/40HTML告知瀏覽器如何顯示網(wǎng)頁HTML文檔的結(jié)構(gòu)HTML文檔的基本結(jié)構(gòu)6/40我的第一個(gè)網(wǎng)頁 Hello World!HTML 網(wǎng)頁頭部部分主體部分網(wǎng)頁標(biāo)題網(wǎng)頁內(nèi)容，包括文本、圖像等這部分包括標(biāo)題和其他說明信息，包括在 標(biāo)簽內(nèi)這部分包含文本、圖像和鏈接，它包括在 標(biāo)簽內(nèi)標(biāo)簽標(biāo)記 HTML 文檔的開始和結(jié)束記事本創(chuàng)建網(wǎng)頁1、打開

3、記事本2、輸入HTML代碼3、保存為*.html或*.htm文件，注意格式問題4、打開網(wǎng)頁預(yù)覽效果Dreamweaver CS5創(chuàng)建網(wǎng)頁HTML編輯工具7/40網(wǎng)頁摘要信息的作用有利于瀏覽器解析有利于搜索引擎搜索標(biāo)簽網(wǎng)頁的摘要信息2-1 8/40 搜狐-中國最大的門戶網(wǎng)站網(wǎng)頁標(biāo)題網(wǎng)頁的摘要信息2-2 9/40標(biāo)簽描述文檔類型和字符編碼描述搜索關(guān)鍵字和描述 提供搜索關(guān)鍵字和內(nèi)容描述信息，方便搜索引擎的搜索 基本HTML標(biāo)簽4-110/40 一級標(biāo)題 二級標(biāo)題 三級標(biāo)題 四級標(biāo)題 五級標(biāo)題 六級標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)簽h1最大h6最小前后隔行基本HTML標(biāo)簽4-211/40特殊符號連續(xù)空格的書寫方式特

4、殊字符轉(zhuǎn)義碼示例空格移動(dòng) | 100 | 大于 ()If A B Then A = A + 1 小于 ()If A B Then A = A + 1 引號 ( ) 淘寶網(wǎng) 版權(quán)號 () Copyright 2007 Copyright 1999-2011 北大青鳥 All rights.特殊符號顯示效果 讓子彈 多飛一會(huì)！ 讓子彈多飛一會(huì)！連續(xù)空格效果基本HTML標(biāo)簽4-312/40行控制相關(guān)標(biāo)簽段落標(biāo)簽換行標(biāo)簽 靜夜思 床前明月光 疑是地上霜 舉頭望明月 我是郭德綱！ 靜夜思 床前明月光 疑是地上霜 舉頭望明月 我是郭德綱！段落換行基本HTML標(biāo)簽4-413/40文本等行級內(nèi)容 靜夜思 床前

5、明月光 疑是地上霜 舉頭望明月 低頭思故鄉(xiāng)范圍標(biāo)簽和水平線標(biāo)簽設(shè)置紅色、大號字突出顯示 水平線請思考：HTML文檔的基本結(jié)構(gòu)是什么？、分別代表什么？插入一條直線用什么標(biāo)簽？小結(jié)14/40圖像標(biāo)簽15/40圖像標(biāo)簽語法及應(yīng)用src：指定圖片所在的路徑alt：指定的替代文本表示圖像無法顯示時(shí)（圖片路徑錯(cuò)誤等）替代顯示的文本title：額外的提示或幫助信息圖像的替代文字鼠標(biāo)懸停提示信息 游戲手柄超便宜！ 音樂播放器2折！圖像文字混排絕對路徑文件在硬盤上的真正路徑從根目錄到文件的完整路徑絕對路徑名為 相對路徑由本文件所在路徑引起的跟其他文件的路徑關(guān)系其他文件相對與自身文件的路徑./表示當(dāng)前目錄，./表

6、示上一級目錄D:NatureAnimalExamplesindex.htmlD:NatureBird.jpg如果index.html頁面中插入Bird.jpg圖像相對路徑為 ./Bird.jpg絕對路徑與相對路徑16/40鏈接站點(diǎn)根目錄內(nèi)文件一般使用相對路徑鏈接網(wǎng)站根目錄外文件一般使用絕對路徑src屬性為 超鏈接標(biāo)簽17/40鏈接熱點(diǎn)文本或圖像超鏈接的基本語法href：用于設(shè)定鏈接地址target：指定鏈接在哪個(gè)窗口打開_blank：將鏈接的文檔加載到一個(gè)未命名的新瀏覽器窗口中_self：將鏈接的文檔加載到該鏈接所在的同一框架中，默認(rèn)值思科路由器鏈接在新窗口中打開鏈接路徑 18/40上級目錄上

7、上級目錄相對地址：相對于當(dāng)前目錄的地址，常用 絕對地址：指向目標(biāo)地址的完整描述 ，少用上級目錄：./上上級目錄：././搜狐登錄頁面間鏈接 最常用的一種鏈接，由A頁跳轉(zhuǎn)到B頁，用于網(wǎng)站導(dǎo)航錨鏈接 A頁甲位置到A頁（本頁）的乙位置A頁甲位置到B頁的乙位置功能性鏈接頁面中調(diào)用其他程序功能，電子郵件、QQ、下載等超鏈接的三類類型3-1 19/40 會(huì)員登錄 鮮花產(chǎn)品相對路徑常用于網(wǎng)站導(dǎo)航超鏈接的三類類型3-2 20/40實(shí)現(xiàn)錨鏈接（頁面內(nèi)錨鏈接）定義標(biāo)記（錨）設(shè)置鏈接到標(biāo)記位置第五首：蜀相蜀相作者：杜甫定義標(biāo)記設(shè)置鏈接到標(biāo)記位置 目標(biāo)位置 當(dāng)前位置適用于頁面內(nèi)容較多，超過一屏的場合（小說等網(wǎng)頁）實(shí)現(xiàn)

8、錨鏈接（頁面間錨鏈接）A頁面錨鏈接，設(shè)置鏈接到標(biāo)記位置B頁面（content.html）錨鏈接，定義標(biāo)記第五首：蜀相 蜀相超鏈接的三類類型3-3 21/40功能性鏈接郵箱鏈接：mailto子頁面上設(shè)置返回到主頁的鏈接音樂播放鏈接腳本鏈接文件下載鏈接 BENET課程郵箱 回到主頁 播放音頻文件 我想學(xué)習(xí)網(wǎng)絡(luò)工程師 BENET教學(xué)大綱下載音樂文件腳本內(nèi)容要下載的文件圖片鏈接22/40小圖頁面代碼大圖頁面代碼列表標(biāo)簽2-123/40金庸小說： 書劍恩仇錄 碧血?jiǎng)?射雕英雄傳 神雕俠侶 倚天屠龍記 雪山飛狐 天龍八部 列表項(xiàng)1 無序列表標(biāo)簽列表中列表項(xiàng)之間沒有先后順序無序列表新人上路指南 如何安裝游戲

9、？ 如何注冊登陸賬號？ 如何領(lǐng)取新手任務(wù)？ 列表項(xiàng)1 有序列表標(biāo)簽列表中列表項(xiàng)之間有明顯的先后順序有序列表列表標(biāo)簽2-224/40 中文名稱：路由器 英文名稱：router 定義：為信息流或數(shù)據(jù)分組選擇路由的設(shè)備 用定義描述標(biāo)簽實(shí)現(xiàn)圖文混編的效果文字有一定的縮進(jìn)HTML注釋 25/40注釋的作用用于增加代碼的可讀性，不顯示 !-桔子- 香蕉 蘋果 注釋行不顯示本章總結(jié)26/40HTML基本標(biāo)簽基本結(jié)構(gòu)和編輯工具HTML超文本標(biāo)記語言什么是HTMLHTML和瀏覽器的關(guān)系HTML注釋HTML的基本結(jié)構(gòu)網(wǎng)頁的摘要信息文本相關(guān)標(biāo)簽行控制相關(guān)標(biāo)簽范圍標(biāo)簽和圖像標(biāo)簽超鏈接和列表標(biāo)簽課堂練習(xí)課堂練習(xí)提問與講

10、解27/40作業(yè)課后作業(yè)必做教員填寫選做教員填寫教員備課時(shí)根據(jù)班級情況在此添加內(nèi)容，應(yīng)區(qū)分必做、選做內(nèi)容，以滿足不同層次學(xué)員的需求28/40預(yù)習(xí)作業(yè)預(yù)習(xí)目標(biāo)了解使用表格顯示數(shù)據(jù)使用表格相關(guān)標(biāo)簽實(shí)現(xiàn)跨行、跨列表格使用表格進(jìn)行簡單的頁面布局預(yù)習(xí)下一章學(xué)生用書，完成預(yù)習(xí)作業(yè)表格標(biāo)簽的語法是什么？使用表格標(biāo)簽時(shí)，跨行跨列的屬性是什么？作業(yè)29/40HTML文檔結(jié)構(gòu)是什么？HTML的基本標(biāo)簽都有哪些？段落標(biāo)簽、換行標(biāo)簽的作用是什么？圖像標(biāo)簽的語法是什么？超鏈接標(biāo)簽的基本語法是什么？考題30/40第二章 HTML超文本標(biāo)記語言 實(shí)驗(yàn)部分本次實(shí)驗(yàn)共完成2個(gè)實(shí)驗(yàn)案例實(shí)驗(yàn)案例一：制作商品促銷頁面實(shí)驗(yàn)案例二：制作

11、網(wǎng)絡(luò)集成公司網(wǎng)站實(shí)驗(yàn)任務(wù)32/40實(shí)驗(yàn)案例一：制作商品促銷頁面33/40需求描述使用文本相關(guān)標(biāo)簽、行控制標(biāo)簽、范圍標(biāo)簽、圖片標(biāo)簽完成游戲介紹頁面實(shí)現(xiàn)思路新建頁面，另存為index.html標(biāo)題修改為“商品促銷”網(wǎng)頁中插入圖片，輸入相關(guān)文本，使用換行內(nèi)容“促銷信息”為一級標(biāo)題鼠標(biāo)懸停提示文字顯示為產(chǎn)品名稱顯示替代字也為產(chǎn)品名稱只用連續(xù)空格控制文字與瀏覽器左框的距離；使用范圍標(biāo)簽設(shè)定價(jià)格的顏色為紅色，字體大小為50px學(xué)員練習(xí)新建頁面，另存為index.html標(biāo)題修改為“商品促銷”網(wǎng)頁中插入圖片，輸入相關(guān)文本，使用換行使用范圍標(biāo)簽設(shè)定價(jià)格樣式設(shè)置完成后保存頁面，通過瀏覽器瀏覽效果實(shí)驗(yàn)案例一：制作商品促銷頁面20分鐘完成34/40共性問題集中講解常見問題及解決辦法實(shí)驗(yàn)案例小結(jié)共性問題集中講解35/40實(shí)驗(yàn)案例二：制作網(wǎng)絡(luò)集成公司網(wǎng)站36/40需求描述公司網(wǎng)站包括4個(gè)頁面主頁（index.html，標(biāo)題為“BENET公司主頁”）登錄頁面（login.html，標(biāo)題為“登錄頁面”）新聞中心（news.html，標(biāo)題為“公司新聞”）產(chǎn)品頁面（product.html，標(biāo)題為“公司產(chǎn)品”）使用HTML基本標(biāo)簽制作首頁、登錄、新聞頁面使用HTML基本標(biāo)簽制作產(chǎn)品頁面網(wǎng)站主頁新聞中心登錄頁面網(wǎng)站產(chǎn)品