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

下載本文檔

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

文檔簡介

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

《網(wǎng)頁設計基礎與上機指導-HTML+CSS+JavaScript》參考網(wǎng)站：

/考試與考核辦法

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

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

溫馨提示

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

評論

0/150

提交評論