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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

計算機技術基礎實驗李簡紅

lijianhong@網(wǎng)站設計與制作HTML基礎南京航空航天大學本門課程目標和課程項目展示課程目標學完本門課程后，你能夠：能制作界面美觀大方、簡潔實用的靜態(tài)網(wǎng)站，不含動態(tài)腳本功能。課程項目展示演示示例1：課程項目展示南京航空航天大學預習檢查請詳述HTML文檔的基本結構。圖像與文本的對齊方式有哪幾種？通常使用哪個標簽的哪個屬性來創(chuàng)建超鏈接？南京航空航天大學本章任務制作圖文并茂的“廣告”頁面查看源代碼南京航空航天大學本章目標會使用HTML的基本結構創(chuàng)建網(wǎng)頁會使用文本相關標簽實現(xiàn)文字修飾和布局會使用圖像相關標簽實現(xiàn)圖文并茂的頁面會使用超鏈接相關標簽實現(xiàn)頁面間的跳轉南京航空航天大學HTML文件的基本結構HTML文檔的結構<HTML><HEAD><TITLE>我的第一個網(wǎng)頁

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

標簽內這部分包括標題和其他說明信息。包括在<HEAD>…</HEAD>

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

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

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

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

網(wǎng)頁背景圖像

南京航空航天大學文本相關標簽字體、字號標題標簽<H1>－<H6><FONT>標簽特殊符號行的控制段落標簽<P>換行標簽<BR>使用了<H2>…<H2>換段了設置了字體的大小和顏色換行了特殊符號南京航空航天大學字體、字號相關標簽標題標簽

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

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

引號(“”)"小于(<)<大于(>)>版權號(?)©南京航空航天大學字體、字號相關標簽查看源代碼......<BODY><P><FONTsize="+2"color="red">

手機充值、IP卡/電話卡

</FONT><BR/>

移動 | 100| 聯(lián)通

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

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

編寫如下圖所示效果對應的html代碼字號大小為3練習答案練習代碼南京航空航天大學文字布局內容分隔<HR>標簽項目列表和編號有序列表<OL>無序列表<UL>預格式文本<PRE>標簽水平分隔線<HR>有序列表無序列表用了預先定義好的格式南京航空航天大學如何使用內容分隔<HR>標簽<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>標簽用于在頁面上繪制水平線南京航空航天大學如何使用列表無序列表語法<UL> <LI>列表項內容</LI> ……</UL>有序列表語法<OL><LI>列表項內容</LI> ……</OL><H4>注冊步驟：</H4><OLtype="1"><LI>填寫信息</LI>

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

<LI>注冊成功</LI>

</OL>

新人上路指南

<ULtype="circle">

<LI>如何激活會員名？

</LI>

<LI>如何注冊淘寶會員？

</LI>

<LI>注冊時密碼設置有什么要求？</LI>

<LI>支付寶認證</LI>

</UL>查看源代碼南京航空航天大學預格式文本<PRE>標簽

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

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

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

一口價：26.45元運費：賣家承擔運費剩余時間：5天寶貝類型：全新

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

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

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

使用錨記標簽南京航空航天大學頁面鏈接<A>標簽鏈接到本頁面錨記標簽用于使用戶“跳”到文檔的某個部分HTML的NAME

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

<ANAME=“marker”>主題名稱</A>為達到這種跳轉效果，請在HREF

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

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

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

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

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

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

滾動文字或圖像</MARQUEE>滾動延遲時間滾動對象的方向南京航空航天大學滾動<MARQUEE>標簽查看源代碼<MARQUEEscrolldelay="100">水平滾動</MARQUEE><MARQUEEscrolldelay="200"

溫馨提示

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

評論

0/150

提交評論