企業(yè)網(wǎng)站設(shè)計與制作_第1頁
企業(yè)網(wǎng)站設(shè)計與制作_第2頁
企業(yè)網(wǎng)站設(shè)計與制作_第3頁
企業(yè)網(wǎng)站設(shè)計與制作_第4頁
企業(yè)網(wǎng)站設(shè)計與制作_第5頁
已閱讀5頁,還剩35頁未讀, 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認(rèn)領(lǐng)

文檔簡介

1、第二章 HTML超文本標(biāo)記語言 理論部分IP、HTTP、FTP分別是那些英文單詞的縮寫?網(wǎng)站開發(fā)基本流程是什么?正確的站點目錄結(jié)構(gòu)Images、Image文件夾應(yīng)存放什么文件?如何使用dreamwaver創(chuàng)建網(wǎng)頁?插入圖像的方法有哪些?范圍、圖像標(biāo)簽分別是什么?課前小考2/40本章技能點了解HTML文檔結(jié)構(gòu)使用文本相關(guān)標(biāo)簽和行控制相關(guān)標(biāo)簽使用水平線、范圍、圖像標(biāo)簽設(shè)置頁面使用超鏈接相關(guān)標(biāo)簽實現(xiàn)頁面跳轉(zhuǎn)使用列表相關(guān)標(biāo)簽實現(xiàn)頁面有序/無序列表使用定義標(biāo)簽實現(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我的第一個網(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)義碼示例空格移動 | 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.特殊符號顯示效果 讓子彈 多飛一會! 讓子彈多飛一會!連續(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:指定的替代文本表示圖像無法顯示時(圖片路徑錯誤等)替代顯示的文本title:額外的提示或幫助信息圖像的替代文字鼠標(biāo)懸停提示信息 游戲手柄超便宜! 音樂播放器2折!圖像文字混排絕對路徑文件在硬盤上的真正路徑從根目錄到文件的完整路徑絕對路徑名為 相對路徑由本文件所在路徑引起的跟其他文件的路徑關(guān)系其他文件相對與自身文件的路徑./表示當(dāng)前目錄,./表

6、示上一級目錄D:NatureAnimalExamplesindex.htmlD:NatureBird.jpg如果index.html頁面中插入Bird.jpg圖像相對路徑為 ./Bird.jpg絕對路徑與相對路徑16/40鏈接站點根目錄內(nèi)文件一般使用相對路徑鏈接網(wǎng)站根目錄外文件一般使用絕對路徑src屬性為 超鏈接標(biāo)簽17/40鏈接熱點文本或圖像超鏈接的基本語法href:用于設(shè)定鏈接地址target:指定鏈接在哪個窗口打開_blank:將鏈接的文檔加載到一個未命名的新瀏覽器窗口中_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 會員登錄 鮮花產(chǎn)品相對路徑常用于網(wǎng)站導(dǎo)航超鏈接的三類類型3-2 20/40實現(xiàn)錨鏈接(頁面內(nèi)錨鏈接)定義標(biāo)記(錨)設(shè)置鏈接到標(biāo)記位置第五首:蜀相蜀相作者:杜甫定義標(biāo)記設(shè)置鏈接到標(biāo)記位置 目標(biāo)位置 當(dāng)前位置適用于頁面內(nèi)容較多,超過一屏的場合(小說等網(wǎng)頁)實現(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金庸小說: 書劍恩仇錄 碧血劍 射雕英雄傳 神雕俠侶 倚天屠龍記 雪山飛狐 天龍八部 列表項1 無序列表標(biāo)簽列表中列表項之間沒有先后順序無序列表新人上路指南 如何安裝游戲

9、? 如何注冊登陸賬號? 如何領(lǐng)取新手任務(wù)? 列表項1 有序列表標(biāo)簽列表中列表項之間有明顯的先后順序有序列表列表標(biāo)簽2-224/40 中文名稱:路由器 英文名稱:router 定義:為信息流或數(shù)據(jù)分組選擇路由的設(shè)備 用定義描述標(biāo)簽實現(xià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è)必做教員填寫選做教員填寫教員備課時根據(jù)班級情況在此添加內(nèi)容,應(yīng)區(qū)分必做、選做內(nèi)容,以滿足不同層次學(xué)員的需求28/40預(yù)習(xí)作業(yè)預(yù)習(xí)目標(biāo)了解使用表格顯示數(shù)據(jù)使用表格相關(guān)標(biāo)簽實現(xiàn)跨行、跨列表格使用表格進行簡單的頁面布局預(yù)習(xí)下一章學(xué)生用書,完成預(yù)習(xí)作業(yè)表格標(biāo)簽的語法是什么?使用表格標(biāo)簽時,跨行跨列的屬性是什么?作業(yè)29/40HTML文檔結(jié)構(gòu)是什么?HTML的基本標(biāo)簽都有哪些?段落標(biāo)簽、換行標(biāo)簽的作用是什么?圖像標(biāo)簽的語法是什么?超鏈接標(biāo)簽的基本語法是什么?考題30/40第二章 HTML超文本標(biāo)記語言 實驗部分本次實驗共完成2個實驗案例實驗案例一:制作商品促銷頁面實驗案例二:制作

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

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論