版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
商務(wù)網(wǎng)站設(shè)計(jì)I何山Teleshanwzj@163.com學(xué)什么?怎樣學(xué)?商務(wù)網(wǎng)頁(yè)設(shè)計(jì)HTMLJavaScriptCSS課程講述案例:獨(dú)立思考與表達(dá)作業(yè)實(shí)驗(yàn)教學(xué)選課碼:ACWL-5312教材與參考資料教材:
《網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)與上機(jī)指導(dǎo)-HTML+CSS+JavaScript》參考網(wǎng)站:
/考試與考核辦法
考核方式:閉卷筆試課程總成績(jī)=平時(shí)成績(jī)30%+期末考試成績(jī)70%注:平時(shí)成績(jī)=課堂出勤及課堂表現(xiàn)(10%)+實(shí)驗(yàn)課成績(jī)(20%)第1章網(wǎng)頁(yè)設(shè)計(jì)入門本章主要內(nèi)容:網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)網(wǎng)頁(yè)制作相關(guān)技術(shù)HTML入門HTML基本語(yǔ)法1.1網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)網(wǎng)站是由若干網(wǎng)頁(yè)構(gòu)成的,這些網(wǎng)頁(yè)按照一定的邏輯關(guān)系組織在一起。每個(gè)網(wǎng)頁(yè)都包含一定的組成元素,網(wǎng)頁(yè)的設(shè)計(jì)與制作就是對(duì)這樣元素的規(guī)劃和構(gòu)建。1.1.1網(wǎng)站和網(wǎng)頁(yè)網(wǎng)站(Website)是指在因特網(wǎng)上,根據(jù)一定的規(guī)則,使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁(yè)的集合。網(wǎng)站由域名(domainname),網(wǎng)頁(yè)和網(wǎng)站空間這三部分組成。網(wǎng)頁(yè)用某種形式的HTML來(lái)編寫(xiě),多個(gè)網(wǎng)頁(yè)由超級(jí)鏈接聯(lián)系起來(lái)。網(wǎng)站空間由專門的獨(dú)立服務(wù)器或租用的虛擬主機(jī)承擔(dān),網(wǎng)頁(yè)需要上傳到網(wǎng)站空間中,才能供瀏覽者訪問(wèn)網(wǎng)站中的內(nèi)容。網(wǎng)站首頁(yè)布局示意圖LogoBanner導(dǎo)航欄公告欄精彩圖書(shū)推薦橫幅廣告位新書(shū)快遞精品圖書(shū)高校教材專家書(shū)評(píng)友情鏈接版權(quán)欄1.1.2網(wǎng)頁(yè)基本元素文本:文本是網(wǎng)頁(yè)中最主要的信息載體,瀏覽者主要通過(guò)文字了解各種信息。圖片:圖片可以使網(wǎng)頁(yè)看上到更加美觀。水平線:在網(wǎng)頁(yè)中主要起到分隔區(qū)域的功能,以使網(wǎng)頁(yè)的結(jié)構(gòu)更加美觀合理。表格:表格是網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中使用最多的基本元素。首先表格可以顯示分類數(shù)據(jù),其次使用表格進(jìn)行網(wǎng)頁(yè)排版可以達(dá)到更好的定位效果。表單:訪問(wèn)者有時(shí)要查找一些信息或申請(qǐng)一些服務(wù)時(shí)需要向網(wǎng)頁(yè)提交一些信息,這些信息就是通過(guò)表單的方式輸入到Web服務(wù)器,并根據(jù)所設(shè)置的表單處理程序進(jìn)行加工處理的。表單中包括輸入文本、單選按鈕、復(fù)選框和下拉菜單等。超鏈接:超鏈接是實(shí)現(xiàn)網(wǎng)頁(yè)按照一定邏輯關(guān)系進(jìn)行跳轉(zhuǎn)的元素。動(dòng)態(tài)元素:包括GIF動(dòng)畫(huà)、Flash動(dòng)畫(huà)、滾動(dòng)字幕、懸停按鈕、廣告橫幅、網(wǎng)站計(jì)數(shù)器等。1.2網(wǎng)頁(yè)制作相關(guān)技術(shù)早期的網(wǎng)站功能比較簡(jiǎn)單,單獨(dú)使用HTML就可以實(shí)現(xiàn)前臺(tái)網(wǎng)頁(yè)的制作,而現(xiàn)在的網(wǎng)站功能越來(lái)越完善,網(wǎng)頁(yè)的設(shè)計(jì)與制作要符合Web標(biāo)準(zhǔn)。在Web標(biāo)準(zhǔn)體系下,HTML/XHTML負(fù)責(zé)頁(yè)面結(jié)構(gòu),CSS負(fù)責(zé)樣式表現(xiàn),JavaScript負(fù)責(zé)動(dòng)態(tài)行為。1.2.1初識(shí)HTMLHTML是英文HypertextMarkedLanguage的縮寫(xiě),中文意思是超文本標(biāo)記語(yǔ)言,是一種用來(lái)制作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言。所謂超文本,是指用HTML創(chuàng)建的文檔可以加入圖片、聲音、動(dòng)畫(huà)、影視等內(nèi)容,并且可以實(shí)現(xiàn)從一個(gè)文件跳轉(zhuǎn)到另一個(gè)文件,與世界各地主機(jī)的文件連接。用HTML編寫(xiě)的超文本文檔稱為HTML文檔,它能獨(dú)立于各種操作系統(tǒng)平臺(tái)(如UNIX,WINDOWS等)。自1990年以來(lái)HTML就一直被用作WWW(WorldWideWeb)的信息表示語(yǔ)言,用于描述網(wǎng)頁(yè)的格式設(shè)計(jì)和它與WWW上其它網(wǎng)頁(yè)的鏈接信息。使用HTML語(yǔ)言描述的文件,需要通過(guò)WWW瀏覽器顯示出效果。1.2.1初識(shí)HTML1.2.2HTML編輯工具1.記事本記事本是Windows操作系統(tǒng)自帶的一個(gè)應(yīng)用程序,使用起來(lái)十分方便和簡(jiǎn)單。2.EditPlusEditPlus是一款功能全面的文本、HTML、程序源代碼編輯器。它提供了更加便捷的代碼編輯功能,默認(rèn)支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript和VBScript等語(yǔ)法高亮顯示;提供了與Internet的無(wú)縫連接,可以在EditPlus的工作區(qū)域中打開(kāi)Internet瀏覽窗口;提供了多工作窗口,不用切換到桌面,便可在工作區(qū)域中打開(kāi)多個(gè)文檔。3.DreamweaverDreamweaver是一個(gè)“所見(jiàn)即所得”的網(wǎng)頁(yè)制作和網(wǎng)站管理開(kāi)發(fā)工具,利用Dreamweaver可以設(shè)計(jì)、開(kāi)發(fā)并維護(hù)符合Web標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序。無(wú)論網(wǎng)站開(kāi)發(fā)者是喜歡直接編寫(xiě)HTML代碼的駕馭感還是偏愛(ài)在可視化編輯環(huán)境中工作,Dreamweaver都會(huì)提供幫助良多的工具,豐富Web創(chuàng)作體驗(yàn)。1.2.3CSS和JavaScript1.CSSCSS(CascadingStyleSheet,可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”)是一組格式設(shè)置規(guī)則,用于控制Web頁(yè)面的外觀。通過(guò)使用CSS樣式設(shè)置頁(yè)面的格式,可將頁(yè)面的內(nèi)容與表現(xiàn)形式分離。頁(yè)面內(nèi)容存放在HTML文檔中,而用于定義表現(xiàn)形式的CSS規(guī)則存放在另一個(gè)文件中或HTML文檔的某一部分,通常為文件頭部分。將內(nèi)容與表現(xiàn)形式分離,不僅可使維護(hù)站點(diǎn)的外觀更加容易,而且還可以使HTML文檔代碼更加簡(jiǎn)練,縮短瀏覽器的加載時(shí)間。CSS是W3C(WorldWideWebConsortium)定義和維護(hù)的標(biāo)準(zhǔn),是一種用來(lái)為結(jié)構(gòu)化文檔(如HTML文檔或XML應(yīng)用)添加樣式(字體、間距和顏色等)的計(jì)算機(jī)語(yǔ)言。它可以使網(wǎng)頁(yè)制作者的工作更加輕松和靈活,現(xiàn)在越來(lái)越多的網(wǎng)站采用了CSS技術(shù)。由于允許同時(shí)控制多重頁(yè)面的樣式和布局,CSS可以稱得上Web設(shè)計(jì)領(lǐng)域的一個(gè)突破。網(wǎng)頁(yè)設(shè)計(jì)者能夠?yàn)槊總€(gè)HTML元素定義樣式,并將之應(yīng)用于希望的任意多的頁(yè)面中。如需進(jìn)行全局的更新,只需簡(jiǎn)單地改變樣式,然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地更新。1.2.3CSS和JavaScript2.JavaScriptJavaScript是目前在網(wǎng)頁(yè)中廣泛使用的腳本語(yǔ)言,它是Netscape公司利用Java的程序概念,將自己原有的Livescript重新進(jìn)行設(shè)計(jì)后而產(chǎn)生的腳本語(yǔ)言。JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有安全性能的腳本語(yǔ)言,有了JavaScript,可使網(wǎng)頁(yè)變得生動(dòng)、活潑。使用它的目的是與HTML、Java小程序(JavaApplet)一起實(shí)現(xiàn)在一個(gè)網(wǎng)頁(yè)中鏈接多個(gè)對(duì)象,與網(wǎng)絡(luò)客戶進(jìn)行交互,從而可以開(kāi)發(fā)客戶端的應(yīng)用程序。一個(gè)JavaScript程序其實(shí)是一個(gè)代碼文檔,它需要嵌入或者調(diào)入到HTML文檔進(jìn)行使用。任何可以編寫(xiě)HTML代碼的軟件都可以用來(lái)編寫(xiě)JavaScript程序。1.3HTML入門<html><head>頭部?jī)?nèi)容,定義標(biāo)題、樣式等</head><body>
主體內(nèi)容,網(wǎng)頁(yè)要顯示的各種信息,包括文本、超鏈接、圖像、動(dòng)畫(huà)等</body></html>1.3.1HTML文檔的結(jié)構(gòu)1.頭部?jī)?nèi)容HTML頭部?jī)?nèi)容里包含關(guān)于所在網(wǎng)頁(yè)的信息。頭部?jī)?nèi)容里的信息,主要是被瀏覽器所用,不會(huì)顯示在網(wǎng)頁(yè)的正文內(nèi)容里。標(biāo)題是最常用的頭部信息,它不是顯示在網(wǎng)頁(yè)的正文內(nèi)容中,而是顯示在瀏覽器的標(biāo)題欄中。用<title>標(biāo)記指定網(wǎng)頁(yè)標(biāo)題,即在<title>…</title>之間寫(xiě)上網(wǎng)頁(yè)標(biāo)題,如程序1-2所示。<html><head><title>專業(yè)的圖書(shū)網(wǎng)站</title></head><body></body></html>1.3.1HTML文檔的結(jié)構(gòu)1.3.1HTML文檔的結(jié)構(gòu)<html><head><title>專業(yè)的圖書(shū)網(wǎng)站</title><metaname="generator"content="editplus"/><metaname="author"content="miaoliang"/><metaname="keywords"content="圖書(shū),教材,教程,出版社"/><metaname="description"content="這是一個(gè)包含大量圖書(shū)信息的網(wǎng)站"/></head><body></body></html>除了<title>和<meta>標(biāo)記外,網(wǎng)頁(yè)的頭部?jī)?nèi)容還有<script>、<link>、<style>等標(biāo)記。<script>標(biāo)記用來(lái)設(shè)定頁(yè)面中程序腳本的內(nèi)容;<link>標(biāo)記用來(lái)建立和外部文件的鏈接,常用的是對(duì)CSS外部樣式表文件的鏈接;<style>標(biāo)記用來(lái)設(shè)定CSS樣式表的內(nèi)容。1.3.1HTML文檔的結(jié)構(gòu)2.主體內(nèi)容主體內(nèi)容是網(wǎng)頁(yè)呈現(xiàn)給瀏覽器者的信息,是網(wǎng)頁(yè)的中心和重心所在。主體內(nèi)容放在標(biāo)記<body>…</body>之間,包括文字、圖片、動(dòng)畫(huà)、視頻、表格、表單、超級(jí)鏈接等元素。<html><head><title>專業(yè)的圖書(shū)網(wǎng)站</title></head><body><h2>最新教材公告</h2><p>清華大學(xué)出版社出版發(fā)行了一套經(jīng)典教材。</p></body></html>1.3.2<!DOCTYPT>標(biāo)記DOCTYPE是DocumentType(文檔類型)的簡(jiǎn)寫(xiě),在頁(yè)面中,用來(lái)指定頁(yè)面所使用的XHTML(或者HTML)的版本。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""/TR/xhtml1/DTD/xhtml1-frameset.dtd">1.4HTML基本語(yǔ)法HTML文檔是在普通文件中的文本上加上標(biāo)記(或者叫標(biāo)簽),使其達(dá)到預(yù)期的顯示效果。當(dāng)瀏覽器打開(kāi)一個(gè)HTML文檔時(shí),會(huì)根據(jù)標(biāo)記的含義顯示HTML文檔中的內(nèi)容。1.4.1標(biāo)記語(yǔ)法1.雙標(biāo)記雙標(biāo)記由開(kāi)始標(biāo)記和結(jié)束標(biāo)記兩部分構(gòu)成,它必須成對(duì)使用。開(kāi)始標(biāo)記告訴瀏覽器從此處開(kāi)始執(zhí)行該標(biāo)記所表示的功能,結(jié)束標(biāo)記告訴瀏覽器在這里結(jié)束該標(biāo)記。雙標(biāo)記的基本語(yǔ)法是:<標(biāo)記名稱>內(nèi)容</標(biāo)記名稱>例如:<h1>網(wǎng)站簡(jiǎn)介</h1>,其作用就是將“網(wǎng)站簡(jiǎn)介”這段文本按<h1>標(biāo)記規(guī)定的功能來(lái)顯示,即以一級(jí)標(biāo)題來(lái)顯示。而<h1>和</h1>之外的文本不受這組標(biāo)記的影響。1.4.1標(biāo)記語(yǔ)法2.單標(biāo)記標(biāo)記單獨(dú)出現(xiàn),只有開(kāi)始標(biāo)記而沒(méi)有結(jié)束標(biāo)記。這種標(biāo)記單獨(dú)使用就可以表達(dá)完整的意思。單標(biāo)記的基本語(yǔ)法是:<標(biāo)記名稱>比如<br>就是一個(gè)最常用的單標(biāo)記,它表示換行。1.4.2屬性語(yǔ)法HTML可以為某些標(biāo)記附件一些信息,這些附件信息被稱為屬性(attribute)。通過(guò)屬性可以設(shè)置HTML元素的更豐富的信息。屬性是在開(kāi)始標(biāo)記中設(shè)定,它以“名稱/值”對(duì)的形式出現(xiàn),比如:name="value"。屬性的基本語(yǔ)法是:<標(biāo)記名稱屬性名1="屬性值"屬性名2="屬性值">屬性應(yīng)該添加在開(kāi)始標(biāo)記內(nèi),并且和標(biāo)記名之間有一個(gè)空格分隔。一個(gè)標(biāo)記可以包含多個(gè)屬性,各屬性之間無(wú)先后次序,用空格分開(kāi)。例如:<bodybackground="back_ground.gif"text="red">大家好!</body>這是一個(gè)body標(biāo)記,其中Background屬性用來(lái)表示HTML文檔的背景圖片,text屬性用來(lái)表示文本的顏色。1.4.3注釋標(biāo)記注釋標(biāo)記用于在HTML文檔中插入注釋。注釋內(nèi)容并不會(huì)在瀏覽器中顯示,它會(huì)被瀏覽器忽略。可以使用注釋對(duì)程序代碼進(jìn)行解釋,適當(dāng)?shù)淖⑨寣?duì)以后代碼的閱讀和維護(hù)產(chǎn)生很多的幫助。注釋標(biāo)記的基本語(yǔ)法是:<!--注釋內(nèi)容--><body>…<s
溫馨提示
- 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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年中考英語(yǔ)一輪復(fù)習(xí)之一般過(guò)去時(shí)
- 手工藝品店前臺(tái)服務(wù)感悟
- 醫(yī)療行業(yè)專業(yè)技能培訓(xùn)總結(jié)
- 酒店行業(yè)服務(wù)員工作概述
- 銀行工作總結(jié)嚴(yán)謹(jǐn)高效服務(wù)至上
- 餐廚垃圾處理工作總結(jié)
- 畜牧行業(yè)安全工作總結(jié)
- 2024年秋葉的教案
- 2025屆張家口市高三語(yǔ)文上學(xué)期期末質(zhì)量監(jiān)測(cè)試卷及答案解析
- 農(nóng)貿(mào)市場(chǎng)租賃合同(2篇)
- 2023北師大版六年級(jí)上冊(cè)數(shù)學(xué)期末試卷(共8套)
- 企業(yè)的涉稅風(fēng)險(xiǎn)
- 武漢大學(xué)抬頭信簽紙
- 新人教版七年級(jí)下冊(cè)生物每課知識(shí)點(diǎn)總結(jié)
- 印刷作業(yè)指導(dǎo)書(shū)
- 浙江產(chǎn)業(yè)帶分布情況
- 2022年農(nóng)業(yè)示范基地建設(shè)工作總結(jié)
- 硬筆書(shū)法比賽方案精選
- 火力發(fā)電廠山谷型干貯灰場(chǎng)設(shè)計(jì)
- 柳宗元毛筆楷書(shū)字帖
- 電伴熱帶熱計(jì)算表xls
評(píng)論
0/150
提交評(píng)論