課件html部分培訓(xùn)_第1頁
課件html部分培訓(xùn)_第2頁
課件html部分培訓(xùn)_第3頁
課件html部分培訓(xùn)_第4頁
課件html部分培訓(xùn)_第5頁
已閱讀5頁，還剩94頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1-網(wǎng)頁設(shè)計(jì)與制作

—初識主要內(nèi)容課程概述學(xué)習(xí)資料網(wǎng)頁相關(guān)知識網(wǎng)頁的基本結(jié)構(gòu)1、課程概述網(wǎng)頁三劍客：Dreamweaver：“所見即所得”的可視化網(wǎng)站開發(fā)工具。

Photoshop：以設(shè)計(jì)和處理平面圖片為特長。Flash：以制作網(wǎng)上動畫為特長，它做出的動畫聲音動畫效果都是其他軟件無法比擬的。網(wǎng)頁三劍客招聘網(wǎng)站網(wǎng)站設(shè)計(jì)相關(guān)職位人數(shù)需求表

職位搜索14525（2011年3月8日）（2012年3月5日）31445實(shí)例展示html->標(biāo)記->網(wǎng)頁內(nèi)容CSS->屬性->網(wǎng)頁樣式美觀的網(wǎng)頁+=課程內(nèi)容體系網(wǎng)頁設(shè)計(jì)與制作30課時(shí)本課程分為4個部分，安排如下：（1）HTML部分（6學(xué)時(shí)）網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識、HTML。（2）Dreamweaver部分（4學(xué)時(shí)）Dreamweaver基本操作、網(wǎng)站設(shè)計(jì)綜述。（3）CSS部分（16學(xué)時(shí)）CSS基礎(chǔ)、Dreamweaver中使用CSS、盒模型、DIV+CSS。（4）綜合部分（4學(xué)時(shí)）網(wǎng)站綜合設(shè)計(jì)項(xiàng)目綜合案例學(xué)習(xí)資料w3school.chmcss2.0參考手冊.chm

布啦布啦網(wǎng)站網(wǎng)頁相關(guān)知識頁面瀏覽過程瀏覽器靜態(tài)和動態(tài)頁面HTML頁面的執(zhí)行過程瀏覽器（Browser）IE6.07.08.0Firefox更多……完成的網(wǎng)頁應(yīng)在多種瀏覽器中都有較好的瀏覽效果?，F(xiàn)實(shí)中的網(wǎng)頁靜態(tài)網(wǎng)頁動態(tài)網(wǎng)頁可從文件的擴(kuò)展名來判斷靜態(tài)網(wǎng)頁的URL的后綴是.htm、.html、.shtml、.xml等;動態(tài)網(wǎng)頁的URL的后綴是.asp、.aspx、.jsp、.php、

.perl、.cgi等。什么是HTML文件？

HTML的英文全稱是HyperTextMarkUpLanguage，中文叫做“超文本標(biāo)記語言”。一個HTML文件的后綴名是.htm或者是.html。用記事本就可以編寫HTML文件。

HTML的標(biāo)記HTML標(biāo)記最基本的格式是：

<標(biāo)記>內(nèi)容</標(biāo)記>標(biāo)記通常成對使用：<標(biāo)記>表示某種格式的開始，</標(biāo)記>表示這種格式的結(jié)束。實(shí)例1用記事本寫第一個網(wǎng)頁標(biāo)準(zhǔn)HTML文件的結(jié)構(gòu)<html><head><title>這是網(wǎng)頁的標(biāo)題

</title></head><body>這是頁面的主體內(nèi)容。</body></html>html標(biāo)記頭

部

信

息主體網(wǎng)頁的題目2-網(wǎng)頁設(shè)計(jì)與制作

—html基本標(biāo)記html基本標(biāo)記–文本<h?>……</h?>標(biāo)題<p>……</p>段落<br/>換行<!--……-->注釋<em>斜體<strong>粗體<ul>無序列表<li>列表項(xiàng)實(shí)例2標(biāo)題字<h?>通過上面的實(shí)例，可以發(fā)現(xiàn)：（1）<h1>到<h6>的內(nèi)容都自動加粗并且顯示為黑體字。（2）<h1>到<h6>自動換行。<html><head><title>標(biāo)題標(biāo)記的作用</title></head><body>

這里是正文……

<h1>

我是H1標(biāo)題字，我最大

</h1><h2>

我是H2標(biāo)題字

</h2>

<h3>

我是H3標(biāo)題字

</h3>

<h4>

我是H4標(biāo)題字

</h4><h5>

我是H5標(biāo)題字

</h5><h6>

我是H6標(biāo)題字，我最小

</h6></body></html>headline實(shí)例3分段標(biāo)記和換行標(biāo)記<p>……</p>是分段標(biāo)記，它是一個成對的標(biāo)記，段之間的距離較大，相當(dāng)于換行后又空一行。

<br/>是換行標(biāo)記，它是一個單標(biāo)記，表示換行。<body>

大家好<p>我是分段標(biāo)記，是一對哦~</p>

看清楚哦<br/>我是換行標(biāo)記，是個單標(biāo)記！</body>paragraphbreakline實(shí)例4注釋語句的應(yīng)用<!--注釋語句-->注釋語句中的內(nèi)容不顯示在網(wǎng)頁上。1、說明文字2、隱藏暫時(shí)不用的代碼或功能<body>

這是標(biāo)有制作日期的頁面。<!--2011年-8月-18日--></body>常用文本格式標(biāo)記文本標(biāo)記含義說明對應(yīng)英文釋義<em>強(qiáng)調(diào)文本，通常以斜體顯示emphasis

<strong>加重強(qiáng)調(diào)，通常是黑體strong實(shí)例5常用文本格式標(biāo)記<body><p>斜體字可以用<em>em表示。</em></p><p>粗體不換行的話，可以用<strong>strong表示。</strong></p></body>html基本標(biāo)記-列表<ol><li>（有序列表）<ul><li>（無序列表）實(shí)例6有序列表在有序列表中，每個列表項(xiàng)前標(biāo)有數(shù)字，表示順序。有序列表由<ol>開始，每個列表項(xiàng)由<li>開始。<body><h2>常用的搜索引擎</h2>

<ol>

<li>百度</li>

<li>Google</li>

<li>雅虎</li>

</ol></body>ordered

listlist實(shí)例7無序列表無序列表不用數(shù)字標(biāo)記每個列表項(xiàng)，而采用一個符號標(biāo)志每個列表項(xiàng)，比如圓黑點(diǎn)、方塊等。無序列表由<ul>開始，每個列表項(xiàng)同樣由<li>開始。<body><h2>兒時(shí)的經(jīng)典動畫片</h2>

<ul>

<li>大鬧天宮</li>

<li>九色鹿</li>

<li>阿凡提</li>

</ul></body>unordered

listhtml的屬性HTML標(biāo)記可以有很多屬性，屬性可以擴(kuò)展HTML標(biāo)記的功能。語法格式如下：<標(biāo)記屬性1="屬性值1"

屬性2="屬性值2"

……>……</標(biāo)記>屬性通常是寫在開始標(biāo)記里面，屬性值一般用雙引號標(biāo)記起來（注意：是英文半角狀態(tài)下的雙引號）,多個屬性并列的時(shí)候，用空格間隔，

實(shí)例1align屬性align屬性的作用是定義水平對齊方式，常見屬性值有：left、center、right三種，能夠控制大多數(shù)元素的左對齊、居中對齊和右對齊。<body><palign="left">左對齊</p><palign="center">居中對齊</p><palign="right">右對齊</p></body>實(shí)例2style屬性<標(biāo)記style="屬性名稱1：屬性值1;屬性名稱2：屬性值2">……</標(biāo)記><body><pstyle="color:red;font-size:12px;">文字的顏色和大小都改變了哦~</p></body>網(wǎng)頁顏色RGB分別是Red、Green、Blue的首字母，即紅、綠、藍(lán)三原色的意思。表示方式為#rrggbb。其中紅、綠、藍(lán)三色的對應(yīng)取值范圍都是00到ff。 如：白色的RGB值(255,255,255)，就用#ffffff表示；黑色的RGB值(0,0,0)，就用#000000表示。<body><pstyle="color:#ff0000;font-size:12px;">文字的顏色和大小都改變了哦~</p></body>實(shí)例3添加背景顏色<bodystyle="background-color:#006600">我有背景顏色了，哈哈~</body>實(shí)例4<div>和<span><div>標(biāo)記是一個塊狀的容器，其默認(rèn)的狀態(tài)就是占據(jù)整個一行。<span>標(biāo)記是一個行間的容器，其默認(rèn)狀態(tài)是行間的一部分，占據(jù)行的長短由內(nèi)容的多少來決定。<body><divstyle="background-color:#3399FF">塊狀區(qū)域1</div><divstyle="background-color:#99CCFF">塊狀區(qū)域2</div><spanstyle="background-color:#FFCCFF">行間區(qū)域1</span><spanstyle="background-color:#993399">行間區(qū)域2</span></body>實(shí)例5marquee應(yīng)用1滾動字幕標(biāo)記的基本語法結(jié)構(gòu)如下：<marquee>……</marquee>實(shí)例6marquee應(yīng)用2<body><marqueedirection="up"onmouseover="stop()"onmouseout="start()">通知<br/>有人看我就停下來<br/>沒人看我就繼續(xù)走~</marquee></body>html基本標(biāo)記小結(jié)文本標(biāo)記含義說明<h?>設(shè)置正文標(biāo)題字體的大小<p>設(shè)置文本的段落<br/>換行<em>強(qiáng)調(diào)文本，通常以斜體顯示<strong>加重強(qiáng)調(diào)，通常是黑體<!--注釋-->HTML文件中的解釋和說明<ul>表示不排序的項(xiàng)目列表<li>表示列表中的一個項(xiàng)目<div>是一個塊狀的容器，默認(rèn)的狀態(tài)是占據(jù)整個一行<span>是一個行間的容器，其默認(rèn)狀態(tài)是行間的一部分，占據(jù)行的長短由內(nèi)容的多少來決定。Xhtml

代碼撰寫規(guī)范1．所有的標(biāo)記都必須要有一個相應(yīng)的結(jié)束標(biāo)記。例如：<p>……</p><br/>2.所有標(biāo)簽的元素和屬性的名字都必須使用小寫.例如：<BODY>必須寫成<body>3.XHTML元素必須合理嵌套。例如：下面的代碼：<p><b></p></b>必須修改為：<p><b></b></p>4.所有的屬性必須用英文雙引號括起來。例如：<palign="left">左對齊</p>課后練習(xí)-電影介紹編寫一個電影介紹頁面，如圖所示。注意所選html標(biāo)簽的含義要準(zhǔn)確，代碼簡單、有效。不需要應(yīng)用任何樣式。拓展文檔：定義標(biāo)題的最好方法3-網(wǎng)頁設(shè)計(jì)與制作

—html標(biāo)記進(jìn)階上節(jié)課知識點(diǎn)復(fù)習(xí)html標(biāo)記長什么樣子？網(wǎng)頁的基本結(jié)構(gòu)是什么？常用的標(biāo)記有哪些？主要內(nèi)容圖片超鏈接表格表單插入圖片圖像格式文件路徑絕對路徑相對路徑插入圖片站點(diǎn)網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程圖像格式圖片有很多格式，常見的有BMP、JPG、GIF、PNG等，網(wǎng)頁設(shè)計(jì)中最常用的是JPG和GIF兩種。JPG格式：可壓縮文件，擴(kuò)展名為jpg或jpeg，數(shù)碼相機(jī)所采用的圖片格式大多是JPG。GIF格式：壓縮文件，可在一個GIF文件中可以同時(shí)存多幅彩色圖像，構(gòu)成GIF動畫。應(yīng)避免在網(wǎng)頁中使用體積較大的圖片。支持透明功能的圖片格式：GIF、PNG

（示例）網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程文件路徑HTML超文本標(biāo)記語言能夠利用URL，將不同格式、不同屬性、不同位置的各種網(wǎng)絡(luò)資源，用統(tǒng)一的方式互相鏈接起來。常見的文件路徑有兩種：一種是絕對路徑，另一種是相對路徑，下面分別來介紹。網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程絕對路徑絕對路徑是指帶域名的文件的完整路徑。一個完整的絕對路徑包括以下幾個部分：一個傳輸協(xié)議（如HTTP協(xié)議）網(wǎng)絡(luò)域名或者服務(wù)器IP地址網(wǎng)站結(jié)構(gòu)的目錄樹文件名（文本、圖片、音頻和視頻等）這些部分就構(gòu)成了一個完整的絕對路徑，例如：/news/2011/0801/article_3439.html網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程相對路徑相對路徑這個概念，在網(wǎng)頁制作中經(jīng)常遇到，比如超鏈接、鏈接圖片、背景音樂、CSS文件、JS文件、數(shù)據(jù)庫等，都要應(yīng)用到相對路徑。什么是相對路徑？相對路徑就是指由這個文件所在的位置引起的跟其它文件(或文件夾)的路徑關(guān)系，也就是自己相對于目標(biāo)的位置。網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程實(shí)例演示

在網(wǎng)頁中插入圖片網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程在網(wǎng)頁中使用圖片HTML中插入圖片用的是<img/>標(biāo)記,它的屬性包括圖片的路徑、寬、高和替代文字等。基本語法格式如下：<imgsrc="#"

title="**"/>

#代表圖片的URL**代表在瀏覽器尚未完全讀入圖片時(shí)，在圖片位置顯示的替代文字。網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程實(shí)例分析目前在本地硬盤有這樣的一個文件結(jié)構(gòu)：一個網(wǎng)頁3-1.html：需要瀏覽的網(wǎng)頁。一幅圖片heart.jpg：心的圖片。一個文件夾image：里面有一副圖片f.jpg。網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程各種相對路徑總結(jié)歸納起來，對于各種相對路徑主要有三種情況。（1）當(dāng)前目錄：src=”a.jpg”

如果源文件和引用文件在同一個目錄里，直接寫引用文件名即可。（2）當(dāng)前目錄上一層：src=”../a.jpg”../表示源文件所在目錄的上一級目錄，../../表示源文件當(dāng)前目錄的上一級目錄的上一級目錄。（3）下級目錄：src=”**/a.jpg”

引用下級目錄的文件，直接寫下級目錄文件的路徑即可，其中**代表具體的文件名或者目錄名。網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程來個游戲,考驗(yàn)一下~~path_test文件夾中一共有4個文件，分別是a1.html,a2.html,a3.html,a4.html,每個文件要求顯示4副圖片，但現(xiàn)在每個網(wǎng)頁只能顯示一幅圖片，查看html文件和圖片文件的位置，使用相對路徑改寫路徑，讓每個網(wǎng)頁都能夠顯示全部圖片。測試題：實(shí)例

多媒體音頻：wma、mp3、wav視頻：avi、rm、rmvb、mpg、wmv<embedsrc=“#"width="200"height="25"/>綜合練習(xí)續(xù)1：電影介紹超鏈接超鏈接外部鏈接、內(nèi)部鏈接與空鏈接target和title屬性圖片超鏈接基本語法例如：<ahref="http://">yahoo</a><ahref="sport.html">sport</a><ahref=“#”>空鏈接</a>anchor:下錨

<ahref="URL“target=""title="">...</a>實(shí)例1：外部鏈接、空鏈接與內(nèi)部鏈接<ahref="http:///">布啦布啦首頁</a><ahref="link.html">電影介紹頁面</a><ahref="#">空鏈接</a></body>實(shí)例2：title屬性和target屬性不同的打開超鏈接方式：target

_blank：在一個未命名的新瀏覽器窗口載入所鏈接的文檔。_self：是瀏覽器的默認(rèn)值，會在當(dāng)前窗口或框架中打開鏈接的網(wǎng)頁。還有其他兩種方式：_parent_top<ahref=“6”target=“_blank”>16網(wǎng)站</a>實(shí)例3：圖片超鏈接測試：點(diǎn)擊圖片打開一個網(wǎng)站，看誰能實(shí)現(xiàn)？圖片超鏈接即在<a>和</a>之間包含<img

src="***"/>，鼠標(biāo)點(diǎn)擊圖片即可鏈接到href所對應(yīng)的文件。實(shí)例4：文件的鏈接<ahref="a.doc"><img

src="img/doc.jpg"

/></a><ahref="b.pdf"><img

src="img/pdf.jpg"

/></a><ahref="c.ppt"><img

src="img/ppt.jpg"

/></a><ahref="d.rar"><img

src="img/rar.jpg"

/></a><ahref="e.xls"><img

src="img/xls.jpg"

/></a>實(shí)例應(yīng)用：電影主演介紹表格表格標(biāo)記表格的基本結(jié)構(gòu)表格的屬性網(wǎng)頁中常見其身影-1網(wǎng)頁中常見其身影-2網(wǎng)頁中常見其身影-3實(shí)例1表格的基本標(biāo)記<table

border=”1”><caption>期末成績</caption><tr><th>學(xué)號</th><th>姓名</th><th>成績</th>

</tr><tr><td>01</td><td>張三</td><td>85</td>

</tr><tr><td>02</td><td>李四</td><td>95</td>

</tr></table>網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程表單表單的功能表單標(biāo)記<form>表單中常用的控件和屬性網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程常見的表單身影1-登陸網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程常見的表單身影2-注冊網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程常見的表單身影3-搜索網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程常見的表單身影4-調(diào)查問卷或試題網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程HTML表單(Form)是HTML的一個重要部分，主要用于采集和提交用戶輸入的信息。表單的主要作用是向服務(wù)器提交信息，讓用戶和服務(wù)器進(jìn)行交互，但這需要服務(wù)器端程序的支持。表單的概念和功能表單的應(yīng)用表單1表單2網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程表單結(jié)構(gòu)<form>是表單的標(biāo)記，可以看做一個包含很多表單控件的容器，它的主要功能就是布局各種表單控件，讓表單以友好的界面呈獻(xiàn)給用戶?；菊Z法結(jié)構(gòu)是：<form>

表單的內(nèi)容</form>網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程表單控件(FormControls)通過HTML表單的各種控件，用戶可以輸入文字信息，或者從選項(xiàng)中選擇，以及做提交的操作。比如下面的例句里，inputtype=“text”就是一個表單控件，表示一個單行輸入框。網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程實(shí)例4簡單的表單輸入

<form><inputtype="text"name="search"/><inputtype="submit"value="搜索"/></form>網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程表單中常用的控件和屬性控件標(biāo)記作用inputtype="text"單行文本輸入框inputtype="password"密碼輸入框(輸入的文字用*表示，以防別人偷窺)inputtype="radio"單選框inputtype="checkbox"復(fù)選框inputtype="submit"將表單里的信息提交給表單里action所指向的文件inputtype="reset"清除用戶填的所有信息，回到初始狀態(tài)select下拉框textArea多行文本輸入框網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程實(shí)例5簡單的登陸頁面<form><h3>簡單的登陸頁面</h3>姓名:<inputtype="text"name="your_name"size="20"/><br/>密碼:<inputtype="password"name="pas"/><br/>確認(rèn)密碼:<inputtype="password"name="pas1"/><br/>您的主頁地址:<inputtype="text"name="add"value="http://"/><br/><inputtype="submit"value="發(fā)送"/><inputtype="reset"value="重設(shè)"/></form>網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程實(shí)例6單選和復(fù)選控件<form>您的性別是：<br/><inputtype="radio"name="sex"value="boy"/>男生<inputtype="radio"name="sex"value="girl"checked=”checked”/>女生<inputtype="radio"name="sex"value="secret"/>保密<br/>您最喜歡的休閑活動是：<br/><inputtype="checkbox"name="enjoy"/>聽音樂<inputtype="checkbox"name="enjoy"/>看電影<inputtype="checkbox"name="enjoy"/>打游戲<br/><inputtype="submit"value="發(fā)送"/><inputtype="reset"value="重置"/></form>網(wǎng)頁設(shè)計(jì)與制作實(shí)例教程實(shí)例7文本框和下拉菜單的練習(xí)<form>您的年齡：<br/><selectname="age"><option>0-17歲</option><option

selected=”selected”>18-30歲</option><option>30-45歲</option></select><br/>您的建議是：<br/><textareaname="advice"rows="5"cols="60">請寫下您寶貴建議

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論