網(wǎng)頁(yè)制作-01-Html1課件_第1頁(yè)
網(wǎng)頁(yè)制作-01-Html1課件_第2頁(yè)
網(wǎng)頁(yè)制作-01-Html1課件_第3頁(yè)
網(wǎng)頁(yè)制作-01-Html1課件_第4頁(yè)
網(wǎng)頁(yè)制作-01-Html1課件_第5頁(yè)
已閱讀5頁(yè)，還剩30頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

計(jì)算機(jī)技術(shù)基礎(chǔ)實(shí)驗(yàn)李簡(jiǎn)紅

lijianhong@網(wǎng)站設(shè)計(jì)與制作HTML基礎(chǔ)南京航空航天大學(xué)本門課程目標(biāo)和課程項(xiàng)目展示課程目標(biāo)學(xué)完本門課程后，你能夠：能制作界面美觀大方、簡(jiǎn)潔實(shí)用的靜態(tài)網(wǎng)站，不含動(dòng)態(tài)腳本功能。課程項(xiàng)目展示演示示例1：課程項(xiàng)目展示南京航空航天大學(xué)預(yù)習(xí)檢查請(qǐng)?jiān)斒鯤TML文檔的基本結(jié)構(gòu)。圖像與文本的對(duì)齊方式有哪幾種？通常使用哪個(gè)標(biāo)簽的哪個(gè)屬性來(lái)創(chuàng)建超鏈接？南京航空航天大學(xué)本章任務(wù)制作圖文并茂的“廣告”頁(yè)面查看源代碼南京航空航天大學(xué)本章目標(biāo)會(huì)使用HTML的基本結(jié)構(gòu)創(chuàng)建網(wǎng)頁(yè)會(huì)使用文本相關(guān)標(biāo)簽實(shí)現(xiàn)文字修飾和布局會(huì)使用圖像相關(guān)標(biāo)簽實(shí)現(xiàn)圖文并茂的頁(yè)面會(huì)使用超鏈接相關(guān)標(biāo)簽實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)南京航空航天大學(xué)HTML文件的基本結(jié)構(gòu)HTML文檔的結(jié)構(gòu)<HTML><HEAD><TITLE>我的第一個(gè)網(wǎng)頁(yè)

</TITLE></HEAD><BODY>HelloWorld!</BODY></HTML>HTML網(wǎng)頁(yè)<HEAD>頭部部分<BODY>主體部分<HTML>…</HTML>標(biāo)簽標(biāo)記HTML文檔的開(kāi)始和結(jié)束網(wǎng)頁(yè)標(biāo)題網(wǎng)頁(yè)內(nèi)容，可以是文本、圖像等這部分包含文本、圖像和鏈接。它包括在<BODY>…</BODY>

標(biāo)簽內(nèi)這部分包括標(biāo)題和其他說(shuō)明信息。包括在<HEAD>…</HEAD>

標(biāo)簽內(nèi)查看源代碼南京航空航天大學(xué)使用記事本創(chuàng)建網(wǎng)頁(yè)使用記事本創(chuàng)建網(wǎng)頁(yè)使用記事本創(chuàng)建網(wǎng)頁(yè)的步驟：打開(kāi)記事本輸入HTML代碼保存為*.html或*.htm文件，注意格式問(wèn)題打開(kāi)網(wǎng)頁(yè)預(yù)覽效果演示示例2：如何在記事本里創(chuàng)建網(wǎng)頁(yè)

南京航空航天大學(xué)<META>標(biāo)簽網(wǎng)頁(yè)中出現(xiàn)亂碼，如何消除亂碼使其正常顯示？使用<META>標(biāo)簽<HEAD><METAhttp-equiv="Content-Type"content="text/html;charset=gb2312"><TITLE>網(wǎng)頁(yè)標(biāo)題</TITLE></HEAD>

簡(jiǎn)體中文：gb2312繁體中文：big5純英文網(wǎng)頁(yè)：iso-8859-1可以避免頁(yè)面中的亂碼南京航空航天大學(xué)頁(yè)面背景色或背景圖像

<BODYbgcolor="#FFCCFF“background="back_image.GIF">HelloWorld！</BODY>為了使頁(yè)面美麗大方，網(wǎng)頁(yè)背景要盡量地淺……<BODYbgcolor="#FFCCFF“> HelloWorld!</BODY>……查看源代碼網(wǎng)頁(yè)背景色彩

網(wǎng)頁(yè)背景圖像

南京航空航天大學(xué)文本相關(guān)標(biāo)簽字體、字號(hào)標(biāo)題標(biāo)簽<H1>－<H6><FONT>標(biāo)簽特殊符號(hào)行的控制段落標(biāo)簽<P>換行標(biāo)簽<BR>使用了<H2>…<H2>換段了設(shè)置了字體的大小和顏色換行了特殊符號(hào)南京航空航天大學(xué)字體、字號(hào)相關(guān)標(biāo)簽標(biāo)題標(biāo)簽

<H#>...</H#>#=1,2,3,4,5,6說(shuō)明：<H1>到<H6>字體大小依次遞減……<BODY><H1>一級(jí)標(biāo)題</H1><H2>二級(jí)標(biāo)題</H2><H3>三級(jí)標(biāo)題</H3><H4>四級(jí)標(biāo)題</H4><H5>五級(jí)標(biāo)題</H5><H6>六級(jí)標(biāo)題</H6></BODY>……查看源代碼H1到H6標(biāo)簽用于指定不同級(jí)別的標(biāo)題南京航空航天大學(xué)字體、字號(hào)相關(guān)標(biāo)簽<FONT>標(biāo)簽特殊符號(hào)<FONTsize=“+2”

color=“red”face=“律書(shū)”> ...</FONT>字體的大小值字體的顏色字體的類型特殊字符轉(zhuǎn)義碼空格

引號(hào)(“”)"小于(<)<大于(>)>版權(quán)號(hào)(?)©南京航空航天大學(xué)字體、字號(hào)相關(guān)標(biāo)簽查看源代碼......<BODY><P><FONTsize="+2"color="red">

手機(jī)充值、IP卡/電話卡

</FONT><BR/>

移動(dòng) | 100| 聯(lián)通

| 50</P>Copyright©2007"淘寶網(wǎng)"Allrights.</BODY>……空格效果南京航空航天大學(xué)行的控制相關(guān)標(biāo)簽段落標(biāo)簽<P>段(Paragraph)(可以看作是空行)<p>換行標(biāo)簽<BR>換行<br>…….

<Palign="center">淘寶集市歡迎您！</P><Palign="left">淘寶網(wǎng)首屆翠友會(huì)！<BR>……</P>……查看源代碼換段了換行了南京航空航天大學(xué)圖像標(biāo)簽常見(jiàn)的圖片格式介紹圖像類型優(yōu)點(diǎn)缺點(diǎn)適用場(chǎng)合制作工具*.jpg體積小，比較清晰有損壓縮、畫面失真網(wǎng)頁(yè)圖片Photoshop*.gif支持Internet標(biāo)準(zhǔn),支持無(wú)損耗壓縮和透明度，很流行支持有限的透明度,效果不如別的圖像網(wǎng)頁(yè)圖片Photoshop*.swf體積小,便于網(wǎng)絡(luò)傳輸制作麻煩網(wǎng)頁(yè)動(dòng)畫Flash*.bmp支持24位顏色深度，兼容性好不支持壓縮容量大桌面墻紙photoshop南京航空航天大學(xué)圖像標(biāo)簽圖像的基本語(yǔ)法<IMGsrc="images/adv_2.jpg"width="300“height="150“alt="明星演唱會(huì)開(kāi)幕">圖像的位置圖像的寬度圖像的高度為圖像添加的提示性文字……<BODY><IMGsrc="images/adv_2.jpg"alt="明星演唱會(huì)開(kāi)幕"width="300"height="150"></BODY>……查看源代碼鼠標(biāo)移到圖像上，出現(xiàn)的提示性文字南京航空航天大學(xué)圖像標(biāo)簽圖像與文本的對(duì)齊方式<IMGalign="middle">圖像與文本居中對(duì)齊,還可以取top,bottom值….<BODY><Ahref="star.html"><IMGalign="middle"src="images/adv_2.jpg"width="180"height="95"border="0"/></A>請(qǐng)點(diǎn)擊廣告進(jìn)入明星專區(qū)</BODY>……查看源代碼圖像和文本居中對(duì)齊南京航空航天大學(xué)小結(jié)1

編寫如下圖所示效果對(duì)應(yīng)的html代碼字號(hào)大小為3練習(xí)答案練習(xí)代碼南京航空航天大學(xué)文字布局內(nèi)容分隔<HR>標(biāo)簽項(xiàng)目列表和編號(hào)有序列表<OL>無(wú)序列表<UL>預(yù)格式文本<PRE>標(biāo)簽水平分隔線<HR>有序列表無(wú)序列表用了預(yù)先定義好的格式南京航空航天大學(xué)如何使用內(nèi)容分隔<HR>標(biāo)簽<HRsize="5"color="red"width="300">線的厚度值線的寬度線的顏色……<BODY><HRsize="5"color="red"width="300"><HRsize="10"color="black"width="200"><HRsize="5"color="#0000FF"width="50%"></BODY>……查看源代碼<HR>標(biāo)簽用于在頁(yè)面上繪制水平線南京航空航天大學(xué)如何使用列表無(wú)序列表語(yǔ)法<UL> <LI>列表項(xiàng)內(nèi)容</LI> ……</UL>有序列表語(yǔ)法<OL><LI>列表項(xiàng)內(nèi)容</LI> ……</OL><H4>注冊(cè)步驟：</H4><OLtype="1"><LI>填寫信息</LI>

<LI>收電子郵件</LI>

<LI>注冊(cè)成功</LI>

</OL>

新人上路指南

<ULtype="circle">

<LI>如何激活會(huì)員名？

</LI>

<LI>如何注冊(cè)淘寶會(huì)員？

</LI>

<LI>注冊(cè)時(shí)密碼設(shè)置有什么要求？</LI>

<LI>支付寶認(rèn)證</LI>

</UL>查看源代碼南京航空航天大學(xué)預(yù)格式文本<PRE>標(biāo)簽

如何實(shí)現(xiàn)如下圖所示的頁(yè)面中的文字效果？使用<PRE>標(biāo)簽可以實(shí)現(xiàn)南京航空航天大學(xué)如何使用預(yù)格式文本<PRE>標(biāo)簽

<PRE><IMGsrc="images/QQ.JPG"width="159"height="133"align="LEFT">

騰訊-QQ幣/QQ幻想-30元卡

一口價(jià)：26.45元運(yùn)費(fèi)：賣家承擔(dān)運(yùn)費(fèi)剩余時(shí)間：5天寶貝類型：全新

賣主聲明：貨到付款，可試用10天！

</PRE>查看源代碼HTML中代碼格式與瀏覽器中顯示效果一樣南京航空航天大學(xué)頁(yè)面鏈接<A>標(biāo)簽鏈接到其他頁(yè)面<Ahref="register/register.html">[免費(fèi)注冊(cè)]</A>鏈接內(nèi)容鏈接的地址<HTML><HEAD><TITLE>鏈接到其他頁(yè)面</TITLE></HEAD><BODY><Ahref="register/register.html">[免費(fèi)注冊(cè)]</A><Ahref="login/login.htm">[登錄](méi)</A></BODY></HTML>單擊”[免費(fèi)注冊(cè)]”之后鏈接到的頁(yè)面查看源代碼南京航空航天大學(xué)頁(yè)面鏈接<A>標(biāo)簽在同一個(gè)文件夾下有兩個(gè)html文件，從一個(gè)文件超鏈接到另一個(gè)文件的路徑有幾種方式？鏈接到其他頁(yè)面相對(duì)路徑指定從根目錄到文件的完整路徑。絕對(duì)路徑指定相對(duì)于當(dāng)前文件的文件位置。兩種方式：相對(duì)路徑和絕對(duì)路徑南京航空航天大學(xué)頁(yè)面鏈接<A>標(biāo)簽要鏈接到同一目錄(C:\HTML)下的頁(yè)面，可編寫<AHREF=“Doc1.htm”>或

<AHREF=“C:\html\Doc2.htm”>相對(duì)路徑名絕對(duì)路徑名南京航空航天大學(xué)頁(yè)面鏈接<A>標(biāo)簽要實(shí)現(xiàn)如下圖所示的超鏈接效果，怎么辦？演示示例3：演示錨鏈接的例子

使用錨記標(biāo)簽?zāi)暇┖娇蘸教齑髮W(xué)頁(yè)面鏈接<A>標(biāo)簽鏈接到本頁(yè)面錨記標(biāo)簽用于使用戶“跳”到文檔的某個(gè)部分HTML的NAME

屬性用于創(chuàng)建錨標(biāo)記

<ANAME=“marker”>主題名稱</A>為達(dá)到這種跳轉(zhuǎn)效果，請(qǐng)?jiān)贖REF

參數(shù)中使用該標(biāo)記

<AHREF=“#marker”>主題名稱</A>演示示例4：演示錨鏈接的例子

<HTML><HEAD><TITLE>鏈接到其他頁(yè)面</TITLE></HEAD><BODY><Ahref="#helpme">[新人上路]</A> ……<A

name="helpme">新人上路指南</A> ……</BODY></HTML>1、定義錨標(biāo)記2、鏈接到錨標(biāo)記所在位置南京航空航天大學(xué)頁(yè)面鏈接<A>標(biāo)簽電子郵件鏈接要鏈接電子郵件，可在鏈接標(biāo)簽中插入mailto:郵箱地址

<Ahref="mailto:webmaster@">站長(zhǎng)信箱</A>演示示例5：演示電子郵件鏈接

<HTML><HEAD><TITLE>電子郵件鏈接</TITLE></HEAD><BODY> ……<Ahref="mailto:taobaoWebMater@">站長(zhǎng)信箱</A> ……</BODY></HTML>單擊”站長(zhǎng)信箱”鏈接后的輸出結(jié)果任何正確的電子郵箱地址均可南京航空航天大學(xué)滾動(dòng)<MARQUEE>標(biāo)簽說(shuō)明：scrolldelay：表示滾動(dòng)延遲時(shí)間，默認(rèn)值為90。direction：表示滾動(dòng)的方向，默認(rèn)為從右向左。<MARQUEEscrolldelay=“100”direction=“up">

滾動(dòng)文字或圖像</MARQUEE>滾動(dòng)延遲時(shí)間滾動(dòng)對(duì)象的方向南京航空航天大學(xué)滾動(dòng)<MARQUEE>標(biāo)簽查看源代碼<MARQUEEscrolldelay="100">水平滾動(dòng)</MARQUEE><MARQUEEscrolldelay="200"

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論