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

下載本文檔

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

文檔簡介

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

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

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

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

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

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

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

HTML的標記HTML標記最基本的格式是：

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

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

部

信

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

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

這里是正文……

<h1>

我是H1標題字，我最大

</h1><h2>

我是H2標題字

</h2>

<h3>

我是H3標題字

</h3>

<h4>

我是H4標題字

</h4><h5>

我是H5標題字

</h5><h6>

我是H6標題字，我最小

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

<br/>是換行標記，它是一個單標記，表示換行。<body>

大家好<p>我是分段標記，是一對哦~</p>

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

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

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

<ol>

<li>百度</li>

<li>Google</li>

<li>雅虎</li>

</ol></body>ordered

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

<ul>

<li>大鬧天宮</li>

<li>九色鹿</li>

<li>阿凡提</li>

</ul></body>unordered

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

屬性2="屬性值2"

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

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

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

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

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

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

title="**"/>

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

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

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

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

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

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

src="***"/>，鼠標點擊圖片即可鏈接到href所對應的文件。實例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>實例應用：電影主演介紹表格表格標記表格的基本結(jié)構(gòu)表格的屬性網(wǎng)頁中常見其身影-1網(wǎng)頁中常見其身影-2網(wǎng)頁中常見其身影-3實例1表格的基本標記<table

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

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

<form><inputtype="text"name="search"/><inputtype="submit"value="搜索"/></form>網(wǎng)頁設(shè)計與制作實例教程表單中常用的控件和屬性控件標記作用inputtype="text"單行文本輸入框inputtype="password"密碼輸入框(輸入的文字用*表示，以防別人偷窺)inputtype="radio"單選框inputtype="checkbox"復選框inputtype="submit"將表單里的信息提交給表單里action所指向的文件inputtype="reset"清除用戶填的所有信息，回到初始狀態(tài)select下拉框textArea多行文本輸入框網(wǎng)頁設(shè)計與制作實例教程實例5簡單的登陸頁面<form><h3>簡單的登陸頁面</h3>姓名:<inputtype="text"name="your_name"size="20"/><br/>密碼:<inputtype="password"name="pas"/><br/>確認密碼:<inputtype="password"name="pas1"/><br/>您的主頁地址:<inputtype="text"name="add"value="http://"/><br/><inputtype="submit"value="發(fā)送"/><inputtype="reset"value="重設(shè)"/></form>網(wǎng)頁設(shè)計與制作實例教程實例6單選和復選控件<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è)計與制作實例教程實例7文本框和下拉菜單的練習<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)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論