《商務(wù)網(wǎng)站設(shè)計I》1_第1頁
《商務(wù)網(wǎng)站設(shè)計I》1_第2頁
《商務(wù)網(wǎng)站設(shè)計I》1_第3頁
《商務(wù)網(wǎng)站設(shè)計I》1_第4頁
《商務(wù)網(wǎng)站設(shè)計I》1_第5頁
已閱讀5頁，還剩22頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

商務(wù)網(wǎng)站設(shè)計I何山Teleshanwzj@163.com學(xué)什么？怎樣學(xué)？商務(wù)網(wǎng)頁設(shè)計HTMLJavaScriptCSS課程講述案例：獨(dú)立思考與表達(dá)作業(yè)實驗教學(xué)選課碼：ACWL-5312教材與參考資料教材：

《網(wǎng)頁設(shè)計基礎(chǔ)與上機(jī)指導(dǎo)-HTML+CSS+JavaScript》參考網(wǎng)站：

/考試與考核辦法

考核方式：閉卷筆試課程總成績=平時成績30%+期末考試成績70%注：平時成績=課堂出勤及課堂表現(xiàn)（10%）+實驗課成績（20%）第1章網(wǎng)頁設(shè)計入門本章主要內(nèi)容：網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)頁制作相關(guān)技術(shù)HTML入門HTML基本語法1.1網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)站是由若干網(wǎng)頁構(gòu)成的，這些網(wǎng)頁按照一定的邏輯關(guān)系組織在一起。每個網(wǎng)頁都包含一定的組成元素，網(wǎng)頁的設(shè)計與制作就是對這樣元素的規(guī)劃和構(gòu)建。1.1.1網(wǎng)站和網(wǎng)頁網(wǎng)站（Website）是指在因特網(wǎng)上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。網(wǎng)站由域名（domainname），網(wǎng)頁和網(wǎng)站空間這三部分組成。網(wǎng)頁用某種形式的HTML來編寫，多個網(wǎng)頁由超級鏈接聯(lián)系起來。網(wǎng)站空間由專門的獨(dú)立服務(wù)器或租用的虛擬主機(jī)承擔(dān)，網(wǎng)頁需要上傳到網(wǎng)站空間中，才能供瀏覽者訪問網(wǎng)站中的內(nèi)容。網(wǎng)站首頁布局示意圖LogoBanner導(dǎo)航欄公告欄精彩圖書推薦橫幅廣告位新書快遞精品圖書高校教材專家書評友情鏈接版權(quán)欄1.1.2網(wǎng)頁基本元素文本：文本是網(wǎng)頁中最主要的信息載體，瀏覽者主要通過文字了解各種信息。圖片：圖片可以使網(wǎng)頁看上到更加美觀。水平線：在網(wǎng)頁中主要起到分隔區(qū)域的功能，以使網(wǎng)頁的結(jié)構(gòu)更加美觀合理。表格：表格是網(wǎng)頁設(shè)計過程中使用最多的基本元素。首先表格可以顯示分類數(shù)據(jù)，其次使用表格進(jìn)行網(wǎng)頁排版可以達(dá)到更好的定位效果。表單：訪問者有時要查找一些信息或申請一些服務(wù)時需要向網(wǎng)頁提交一些信息，這些信息就是通過表單的方式輸入到Web服務(wù)器，并根據(jù)所設(shè)置的表單處理程序進(jìn)行加工處理的。表單中包括輸入文本、單選按鈕、復(fù)選框和下拉菜單等。超鏈接：超鏈接是實現(xiàn)網(wǎng)頁按照一定邏輯關(guān)系進(jìn)行跳轉(zhuǎn)的元素。動態(tài)元素：包括GIF動畫、Flash動畫、滾動字幕、懸停按鈕、廣告橫幅、網(wǎng)站計數(shù)器等。1.2網(wǎng)頁制作相關(guān)技術(shù)早期的網(wǎng)站功能比較簡單，單獨(dú)使用HTML就可以實現(xiàn)前臺網(wǎng)頁的制作，而現(xiàn)在的網(wǎng)站功能越來越完善，網(wǎng)頁的設(shè)計與制作要符合Web標(biāo)準(zhǔn)。在Web標(biāo)準(zhǔn)體系下，HTML/XHTML負(fù)責(zé)頁面結(jié)構(gòu)，CSS負(fù)責(zé)樣式表現(xiàn)，JavaScript負(fù)責(zé)動態(tài)行為。1.2.1初識HTMLHTML是英文HypertextMarkedLanguage的縮寫，中文意思是超文本標(biāo)記語言，是一種用來制作超文本文檔的簡單標(biāo)記語言。所謂超文本，是指用HTML創(chuàng)建的文檔可以加入圖片、聲音、動畫、影視等內(nèi)容，并且可以實現(xiàn)從一個文件跳轉(zhuǎn)到另一個文件，與世界各地主機(jī)的文件連接。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺（如UNIX，WINDOWS等）。自1990年以來HTML就一直被用作WWW（WorldWideWeb）的信息表示語言，用于描述網(wǎng)頁的格式設(shè)計和它與WWW上其它網(wǎng)頁的鏈接信息。使用HTML語言描述的文件，需要通過WWW瀏覽器顯示出效果。1.2.1初識HTML1.2.2HTML編輯工具1．記事本記事本是Windows操作系統(tǒng)自帶的一個應(yīng)用程序，使用起來十分方便和簡單。2．EditPlusEditPlus是一款功能全面的文本、HTML、程序源代碼編輯器。它提供了更加便捷的代碼編輯功能，默認(rèn)支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript和VBScript等語法高亮顯示；提供了與Internet的無縫連接，可以在EditPlus的工作區(qū)域中打開Internet瀏覽窗口；提供了多工作窗口，不用切換到桌面，便可在工作區(qū)域中打開多個文檔。3．DreamweaverDreamweaver是一個“所見即所得”的網(wǎng)頁制作和網(wǎng)站管理開發(fā)工具，利用Dreamweaver可以設(shè)計、開發(fā)并維護(hù)符合Web標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序。無論網(wǎng)站開發(fā)者是喜歡直接編寫HTML代碼的駕馭感還是偏愛在可視化編輯環(huán)境中工作，Dreamweaver都會提供幫助良多的工具，豐富Web創(chuàng)作體驗。1.2.3CSS和JavaScript1．CSSCSS（CascadingStyleSheet，可譯為“層疊樣式表”或“級聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁面的外觀。通過使用CSS樣式設(shè)置頁面的格式，可將頁面的內(nèi)容與表現(xiàn)形式分離。頁面內(nèi)容存放在HTML文檔中，而用于定義表現(xiàn)形式的CSS規(guī)則存放在另一個文件中或HTML文檔的某一部分，通常為文件頭部分。將內(nèi)容與表現(xiàn)形式分離，不僅可使維護(hù)站點(diǎn)的外觀更加容易，而且還可以使HTML文檔代碼更加簡練，縮短瀏覽器的加載時間。CSS是W3C（WorldWideWebConsortium）定義和維護(hù)的標(biāo)準(zhǔn)，是一種用來為結(jié)構(gòu)化文檔（如HTML文檔或XML應(yīng)用）添加樣式（字體、間距和顏色等）的計算機(jī)語言。它可以使網(wǎng)頁制作者的工作更加輕松和靈活，現(xiàn)在越來越多的網(wǎng)站采用了CSS技術(shù)。由于允許同時控制多重頁面的樣式和布局，CSS可以稱得上Web設(shè)計領(lǐng)域的一個突破。網(wǎng)頁設(shè)計者能夠為每個HTML元素定義樣式，并將之應(yīng)用于希望的任意多的頁面中。如需進(jìn)行全局的更新，只需簡單地改變樣式，然后網(wǎng)站中的所有元素均會自動地更新。1.2.3CSS和JavaScript2．JavaScriptJavaScript是目前在網(wǎng)頁中廣泛使用的腳本語言，它是Netscape公司利用Java的程序概念，將自己原有的Livescript重新進(jìn)行設(shè)計后而產(chǎn)生的腳本語言。JavaScript是一種基于對象和事件驅(qū)動并具有安全性能的腳本語言，有了JavaScript，可使網(wǎng)頁變得生動、活潑。使用它的目的是與HTML、Java小程序（JavaApplet）一起實現(xiàn)在一個網(wǎng)頁中鏈接多個對象，與網(wǎng)絡(luò)客戶進(jìn)行交互，從而可以開發(fā)客戶端的應(yīng)用程序。一個JavaScript程序其實是一個代碼文檔，它需要嵌入或者調(diào)入到HTML文檔進(jìn)行使用。任何可以編寫HTML代碼的軟件都可以用來編寫JavaScript程序。1.3HTML入門<html><head>頭部內(nèi)容，定義標(biāo)題、樣式等</head><body>

主體內(nèi)容，網(wǎng)頁要顯示的各種信息，包括文本、超鏈接、圖像、動畫等</body></html>1.3.1HTML文檔的結(jié)構(gòu)1．頭部內(nèi)容HTML頭部內(nèi)容里包含關(guān)于所在網(wǎng)頁的信息。頭部內(nèi)容里的信息，主要是被瀏覽器所用，不會顯示在網(wǎng)頁的正文內(nèi)容里。標(biāo)題是最常用的頭部信息，它不是顯示在網(wǎng)頁的正文內(nèi)容中，而是顯示在瀏覽器的標(biāo)題欄中。用<title>標(biāo)記指定網(wǎng)頁標(biāo)題，即在<title>…</title>之間寫上網(wǎng)頁標(biāo)題，如程序1-2所示。<html><head><title>專業(yè)的圖書網(wǎng)站</title></head><body></body></html>1.3.1HTML文檔的結(jié)構(gòu)1.3.1HTML文檔的結(jié)構(gòu)<html><head><title>專業(yè)的圖書網(wǎng)站</title><metaname="generator"content="editplus"/><metaname="author"content="miaoliang"/><metaname="keywords"content="圖書,教材,教程,出版社"/><metaname="description"content="這是一個包含大量圖書信息的網(wǎng)站"/></head><body></body></html>除了<title>和<meta>標(biāo)記外，網(wǎng)頁的頭部內(nèi)容還有<script>、<link>、<style>等標(biāo)記。<script>標(biāo)記用來設(shè)定頁面中程序腳本的內(nèi)容；<link>標(biāo)記用來建立和外部文件的鏈接，常用的是對CSS外部樣式表文件的鏈接；<style>標(biāo)記用來設(shè)定CSS樣式表的內(nèi)容。1.3.1HTML文檔的結(jié)構(gòu)2．主體內(nèi)容主體內(nèi)容是網(wǎng)頁呈現(xiàn)給瀏覽器者的信息，是網(wǎng)頁的中心和重心所在。主體內(nèi)容放在標(biāo)記<body>…</body>之間，包括文字、圖片、動畫、視頻、表格、表單、超級鏈接等元素。<html><head><title>專業(yè)的圖書網(wǎng)站</title></head><body><h2>最新教材公告</h2><p>清華大學(xué)出版社出版發(fā)行了一套經(jīng)典教材。</p></body></html>1.3.2<！DOCTYPT>標(biāo)記DOCTYPE是DocumentType（文檔類型）的簡寫，在頁面中，用來指定頁面所使用的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基本語法HTML文檔是在普通文件中的文本上加上標(biāo)記（或者叫標(biāo)簽），使其達(dá)到預(yù)期的顯示效果。當(dāng)瀏覽器打開一個HTML文檔時，會根據(jù)標(biāo)記的含義顯示HTML文檔中的內(nèi)容。1.4.1標(biāo)記語法1．雙標(biāo)記雙標(biāo)記由開始標(biāo)記和結(jié)束標(biāo)記兩部分構(gòu)成，它必須成對使用。開始標(biāo)記告訴瀏覽器從此處開始執(zhí)行該標(biāo)記所表示的功能，結(jié)束標(biāo)記告訴瀏覽器在這里結(jié)束該標(biāo)記。雙標(biāo)記的基本語法是：<標(biāo)記名稱>內(nèi)容</標(biāo)記名稱>例如：<h1>網(wǎng)站簡介</h1>，其作用就是將“網(wǎng)站簡介”這段文本按<h1>標(biāo)記規(guī)定的功能來顯示，即以一級標(biāo)題來顯示。而<h1>和</h1>之外的文本不受這組標(biāo)記的影響。1.4.1標(biāo)記語法2．單標(biāo)記標(biāo)記單獨(dú)出現(xiàn)，只有開始標(biāo)記而沒有結(jié)束標(biāo)記。這種標(biāo)記單獨(dú)使用就可以表達(dá)完整的意思。單標(biāo)記的基本語法是：<標(biāo)記名稱>比如<br>就是一個最常用的單標(biāo)記，它表示換行。1.4.2屬性語法HTML可以為某些標(biāo)記附件一些信息，這些附件信息被稱為屬性（attribute）。通過屬性可以設(shè)置HTML元素的更豐富的信息。屬性是在開始標(biāo)記中設(shè)定，它以“名稱/值”對的形式出現(xiàn)，比如：name="value"。屬性的基本語法是：<標(biāo)記名稱屬性名1="屬性值"屬性名2="屬性值">屬性應(yīng)該添加在開始標(biāo)記內(nèi)，并且和標(biāo)記名之間有一個空格分隔。一個標(biāo)記可以包含多個屬性，各屬性之間無先后次序，用空格分開。例如：<bodybackground="back_ground.gif"text="red">大家好！</body>這是一個body標(biāo)記，其中Background屬性用來表示HTML文檔的背景圖片，text屬性用來表示文本的顏色。1.4.3注釋標(biāo)記注釋標(biāo)記用于在HTML文檔中插入注釋。注釋內(nèi)容并不會在瀏覽器中顯示，它會被瀏覽器忽略?？梢允褂米⑨寣Τ绦虼a進(jìn)行解釋，適當(dāng)?shù)淖⑨寣σ院蟠a的閱讀和維護(hù)產(chǎn)生很多的幫助。注釋標(biāo)記的基本語法是：<!--注釋內(nèi)容--><body>…<s

溫馨提示

  • 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)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論