計算機高級應(yīng)用課件第3講_第1頁
計算機高級應(yīng)用課件第3講_第2頁
計算機高級應(yīng)用課件第3講_第3頁
計算機高級應(yīng)用課件第3講_第4頁
計算機高級應(yīng)用課件第3講_第5頁
已閱讀5頁，還剩41頁未讀， 繼續(xù)免費閱讀

付費下載

下載本文檔

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

文檔簡介

第3講網(wǎng)頁及網(wǎng)頁設(shè)計的基本方法參考資源：

《大學(xué)計算機高級應(yīng)用》2023/12/16廣東金融學(xué)院2《網(wǎng)頁設(shè)計篇》要求方法內(nèi)容目的教學(xué)目的2023/12/16廣東金融學(xué)院3掌握一種全新的信息展示平臺1儲備必要的網(wǎng)頁制作技能2為進一步學(xué)習(xí)網(wǎng)頁設(shè)計打好基礎(chǔ)3教學(xué)內(nèi)容2023/12/16廣東金融學(xué)院4網(wǎng)頁制作的基本步驟1站點的設(shè)計和發(fā)布2網(wǎng)頁的布局技巧3多媒體網(wǎng)頁的制作4表單網(wǎng)頁制作5網(wǎng)頁的高級格式化6教學(xué)方法2023/12/16廣東金融學(xué)院5啟發(fā)式教學(xué)法1多媒體教學(xué)法2案例教學(xué)法3學(xué)習(xí)要求2023/12/16廣東金融學(xué)院6多討論1多思考2多上機3多交流4本次課主要內(nèi)容2023/12/16廣東金融學(xué)院7網(wǎng)頁概念、特點和結(jié)構(gòu)1第1個網(wǎng)頁作品2一種高效的網(wǎng)頁制作工具3課堂討論4介紹DreamweaverCS6的界面5網(wǎng)頁文件的基本操作6總結(jié)并布置作業(yè)71．網(wǎng)頁概念、特點和結(jié)構(gòu)認識幾個網(wǎng)頁

2023/12/16廣東金融學(xué)院8認識幾個網(wǎng)頁

1．網(wǎng)頁概念、特點和結(jié)構(gòu)2023/12/16廣東金融學(xué)院9認識幾個網(wǎng)頁

1．網(wǎng)頁概念、特點和結(jié)構(gòu)2023/12/16廣東金融學(xué)院10認識幾個網(wǎng)頁

1．網(wǎng)頁概念、特點和結(jié)構(gòu)2023/12/16廣東金融學(xué)院11內(nèi)容豐富網(wǎng)頁的基本特點2023/12/16廣東金融學(xué)院12網(wǎng)頁元素構(gòu)成圖片文字動畫其他聲音視頻網(wǎng)頁的基本特點顏色絢麗多彩2023/12/16廣東金融學(xué)院13網(wǎng)頁的基本特點格式豐富多樣2023/12/16廣東金融學(xué)院14網(wǎng)頁元素（如：文本、圖像、表格等）可設(shè)置的格式非常豐富。網(wǎng)頁中的格式提供了一種快捷、方便的格式設(shè)置方法，如樣式表、模板等。網(wǎng)頁的基本特點網(wǎng)頁瀏覽軟件的通用性2023/12/16廣東金融學(xué)院15InternetExplorer瀏覽器Netscape瀏覽器網(wǎng)頁的結(jié)構(gòu)2023/12/16廣東金融學(xué)院16“國”字形結(jié)構(gòu)1“

”形結(jié)構(gòu)2上下結(jié)構(gòu)3其它結(jié)構(gòu)4有關(guān)概念網(wǎng)頁又稱網(wǎng)頁文檔（英文名是WebPage），一般由HTML文件組成，包含文本、圖像、超鏈接、動畫、音頻、視頻、表格及表單等，位于計算機的特定目錄中，其位置可以根據(jù)URL（即統(tǒng)一資源定位器）確定。瀏覽器是用于顯示網(wǎng)頁文檔的應(yīng)用軟件，常見的瀏覽器有：InternetExplorer；Google公司的Chrome和Apple公司的Safari等。2023/12/16廣東金融學(xué)院17有關(guān)概念Web服務(wù)器是指安裝了Web服務(wù)軟件的計算機，它使用HTTP或FTP等協(xié)議來響應(yīng)TCP/IP網(wǎng)絡(luò)上的Web客戶（即瀏覽器）請求。Web服務(wù)器中存放了大量的網(wǎng)頁文件及相關(guān)的文件資源（如圖像、音頻、視頻及動畫等），每個文件資源都有唯一的URL。Web服務(wù)器通過Web服務(wù)軟件向外提供Web服務(wù)，即響應(yīng)來自瀏覽器的各種請求。2023/12/16廣東金融學(xué)院18瀏覽器和Web服務(wù)器的網(wǎng)頁通信過程2023/12/16廣東金融學(xué)院19Web服務(wù)器網(wǎng)頁響應(yīng)請求Web瀏覽器2．第一個網(wǎng)頁作品2023/12/16廣東金融學(xué)院20網(wǎng)頁的最終效果2．第一個網(wǎng)頁作品啟動記事本，輸入下列文字，并以“MyFirstWebPage.html”保存。2023/12/16廣東金融學(xué)院21<html><head><title>一個簡單的HTML網(wǎng)頁</title></head><body><center><h3>少年行</h3>王維<br><hralign="center"width="160"color="red">新豐美灑斗十千，<br>咸陽游俠多少年。<br>相逢意氣為君飲，<br>系馬高樓垂柳邊。</center></body></html>兩個軟件打開同一文件的差異2023/12/16廣東金融學(xué)院22為何不同?！什么是HTML？HTML（HyperTextMarkupLanguage）即超文本標(biāo)記語言，是一種描述網(wǎng)頁文檔結(jié)構(gòu)的語言。它使用標(biāo)記符來描述網(wǎng)頁文檔的結(jié)構(gòu)，這些標(biāo)記是區(qū)分網(wǎng)頁文檔各個部分的分界符，它們將網(wǎng)頁文件分成不同的結(jié)構(gòu)，如標(biāo)題、段落及表格等。采用HTML編寫的網(wǎng)頁文檔是普通的文本格式文件，文件包含兩部分信息：文本和標(biāo)記符。文件擴展名是“*.htm”或“*.html”。2023/12/16廣東金融學(xué)院23HTML的優(yōu)點（1）同HTML編寫的網(wǎng)頁文檔很小，非常適合在網(wǎng)絡(luò)中傳輸。（2）同HTML編寫的網(wǎng)頁文檔是獨立于平臺的，只要有一個可以閱讀和解釋HTML的瀏覽器，就能在任何操作系統(tǒng)上瀏覽。（3）HTML是一種標(biāo)記語言，簡單易學(xué)。（4）制作HTML文檔并不需要特殊的軟件，只要一個文本編輯器就可以完成，如記事本，寫字板或Word等。2023/12/16廣東金融學(xué)院24關(guān)于標(biāo)記什么是標(biāo)記標(biāo)記是網(wǎng)頁格式化的基礎(chǔ)，HTML語言通過使用標(biāo)記來格式化網(wǎng)頁元素。2023/12/16廣東金融學(xué)院25<標(biāo)記名>結(jié)束符號標(biāo)記名稱開始符號關(guān)于標(biāo)記單獨標(biāo)記格式：<標(biāo)記名稱>如：<br>成對標(biāo)記格式：<開始標(biāo)記名稱>被標(biāo)識或格式化內(nèi)容<結(jié)束標(biāo)記名稱>如：<center>經(jīng)濟管理專業(yè)</center>2023/12/16廣東金融學(xué)院26關(guān)于標(biāo)記標(biāo)記的屬性許多單獨標(biāo)記或成對標(biāo)記的開始標(biāo)記內(nèi)可以包含一些屬性設(shè)置，這些屬性控制著標(biāo)記的基本特征。標(biāo)記的屬性都有自己的默認值，如果不想使用這些默認值，可以對它們的值進行修改。不管是單獨標(biāo)記還是成對標(biāo)記，它們的屬性設(shè)置格式都是一樣的。2023/12/16廣東金融學(xué)院27關(guān)于標(biāo)記標(biāo)記的屬性格式：

<標(biāo)記名稱屬性名1="屬性值"屬性名2="屬性值"…>[…</標(biāo)記名稱>]如：<hrsize="3"align="left"width="75%">2023/12/16廣東金融學(xué)院28關(guān)于標(biāo)記使用標(biāo)記時應(yīng)注意的問題標(biāo)記不區(qū)分大小寫，但必須使用半角字符（即英文字符）。成對標(biāo)記可以寫在一行，也可以寫在不同行（即開始子標(biāo)記與結(jié)束子標(biāo)記處在不同的行），其效果相同。標(biāo)記本身不能拆寫到不同行上。2023/12/16廣東金融學(xué)院29示例中的HTML標(biāo)記的含義標(biāo)記名稱說

明<html>…</html>標(biāo)識HTML文檔的開始和結(jié)束。<head>…</head>標(biāo)識HTML文檔頭的開始和結(jié)束。<title>…</title>網(wǎng)頁標(biāo)題標(biāo)記，作用是將開始和結(jié)束標(biāo)記之間的文本放在瀏覽器的標(biāo)題欄中。<body>…</body>標(biāo)識HTML文檔主體的開始和結(jié)束。<h3>…</h3>標(biāo)題標(biāo)記，作用是將開始和結(jié)束標(biāo)記之間的文本按照指定的標(biāo)題格式顯示。<p>…</p>分段標(biāo)記，作用是將開始和結(jié)束標(biāo)記之間的文本形成一個獨立的段落。<hr>水平線標(biāo)記，作用是在當(dāng)前位置插入一條水平線。水平線的特征是：水平居中，寬度為160像素，紅色。<br>換行標(biāo)記，作用是在當(dāng)前位置插入一個換行符，使標(biāo)記后的文本在下一行的開始位置顯示。<center>…</center>水平居中標(biāo)記，作用是將開始和結(jié)束標(biāo)記之間的文本在瀏覽器窗口中，以水平居中的方式顯示。2023/12/16廣東金融學(xué)院30HTML文檔的結(jié)構(gòu)2023/12/16廣東金融學(xué)院31記事本和瀏覽器在顯示網(wǎng)頁文件的差異記事本原封不動的顯示文件中的文本。瀏覽器需要解析文件中的HTML標(biāo)記，并按照標(biāo)記的要求將有關(guān)內(nèi)容在瀏覽器中以一定的格式顯示出來。2023/12/16廣東金融學(xué)院32包含HTML標(biāo)記的文本解析標(biāo)記由上例引出的思考1）用記事本制作網(wǎng)頁，不能達到“所見即所得的效果”2）需要記住大量標(biāo)記的用法3）網(wǎng)頁制作效率太差，無法滿足當(dāng)前網(wǎng)頁快速更新的需要4）對于內(nèi)容豐富、格式多樣的復(fù)雜網(wǎng)頁，仍然采用記事本程序是不現(xiàn)實的5）有沒有更高效的網(wǎng)頁制作方法？2023/12/16廣東金融學(xué)院33當(dāng)前制作網(wǎng)頁的主要工具及特點2023/12/16廣東金融學(xué)院34MicrosoftWord1MicrosoftFrontPage2MacromediaDreamweaverCS633．一種高效的網(wǎng)頁制作工具運用DreamweaverCS6代替記事本制作網(wǎng)頁“MyFirstWebPage.html”2023/12/16廣東金融學(xué)院352023/12/16廣東金融學(xué)院36DreamweaverCS6記事本PK4．課堂討論總結(jié)1)異同點相同點：操作思路類似，它們是經(jīng)歷“新建”→“編輯”→“保存”這一過程。不同點：①編輯對象上的差異：記事本直接編輯標(biāo)記，并通過標(biāo)記控制文本格式；②DreamweaverCS6只編輯文本，不需要對標(biāo)記進行編輯，格式使用可視化方式完成。2023/12/16廣東金融學(xué)院37總結(jié)2)優(yōu)缺點①DreamweaverCS6的優(yōu)點：方便、快捷、可視化格式編輯、“所見即所得”效果等。②記事本的缺點：格式編輯繁鎖、效率差、沒有“所見即所得”的排版效果等。2023/12/16廣東金融學(xué)院384．介紹DreamweaverCS6的界面2023/12/16廣東金融學(xué)院39菜單欄面板組文檔工具欄文檔窗口狀態(tài)欄屬性面板文件面板插入面板“文件”面板的外觀2023/12/16廣東金融學(xué)院40面板標(biāo)簽面板標(biāo)題欄控制菜單4．網(wǎng)頁文件的基本操作一個例子——“我的個人簡歷”2023/12/16廣東金融學(xué)院414．網(wǎng)頁文件的基本操作本例相關(guān)說明1)網(wǎng)頁設(shè)計的基本步驟，如新建、打開、編輯、保存和預(yù)覽等；2)網(wǎng)頁的基本編輯操作，如文字錄入、頁面屬性設(shè)置、格式化等；3)強調(diào)網(wǎng)頁編輯操作的重要性。2023/12/16廣東金融學(xué)院425．總結(jié)并布置作業(yè)總結(jié)1)網(wǎng)頁的基本概念：網(wǎng)頁、瀏覽器和Web服務(wù)器；HTML和網(wǎng)頁；瀏覽器和網(wǎng)頁的關(guān)系。2)使用DreamweaverCS6制作網(wǎng)頁的基本步驟和方法。2023/12/16廣東金融學(xué)院435．總結(jié)并布置作業(yè)布置作業(yè)1)試評價Google站點主頁和Sohu站點主頁在設(shè)計風(fēng)格上有什么異同點，并給出你的理由。2)設(shè)計一個頁面，顯示兩首七絕唐詩，要求兩首唐詩并排擺放在頁面上（類似于Word

溫馨提示

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

評論

0/150

提交評論