第1章 網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第1頁
第1章 網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第2頁
第1章 網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第3頁
第1章 網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第4頁
第1章 網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第5頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第1章網(wǎng)頁設(shè)計(jì)基礎(chǔ)隨著Internet（因特網(wǎng)）的發(fā)展和普及，越來越多的個(gè)人和公司都想在Internet上安個(gè)家，各種各樣的網(wǎng)站應(yīng)運(yùn)而生。網(wǎng)頁設(shè)計(jì)和制作技術(shù)也越來越受到人們的關(guān)注，網(wǎng)站是如何創(chuàng)建的？需要掌握哪些計(jì)算機(jī)技術(shù)？本章介紹網(wǎng)頁設(shè)計(jì)的基礎(chǔ)知識(shí)，主要包括以下內(nèi)容：

HTML基礎(chǔ)初識(shí)Dreamweaver在代碼視圖中創(chuàng)建HTML1.1HTML基礎(chǔ)在Internet上瀏覽的一個(gè)個(gè)精美網(wǎng)頁都是用超文本標(biāo)記語言HTML制作而成。本節(jié)先介紹HTML的基礎(chǔ)知識(shí)。1.1.1什么是HTML1.1.2課堂實(shí)例――創(chuàng)建和測(cè)試第一個(gè)網(wǎng)頁1.1.3認(rèn)識(shí)HTML標(biāo)簽1.1.4HTML文檔的基本結(jié)構(gòu)1.1.1什么是HTMLHTML是英文HypertextMarkedLanguage的縮寫，中文意思是超文本標(biāo)記語言，是一種用來制作超文本文檔的簡(jiǎn)單標(biāo)記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)（如UNIX，WINDOWS等）。自1990年以來HTML就一直被用作WWW（WorldWideWeb）的信息表示語言，用于描述網(wǎng)頁的格式設(shè)計(jì)和它與WWW上其它網(wǎng)頁的連結(jié)信息。使用HTML語言描述的文件，需要通過WWW瀏覽器顯示出效果。所謂超文本，是指用HTML創(chuàng)建的文檔可以加入圖片、聲音、動(dòng)畫、影視等內(nèi)容，并且可以實(shí)現(xiàn)從一個(gè)文件跳轉(zhuǎn)到另一個(gè)文件，與世界各地主機(jī)的文件連接。

1.1.2課堂實(shí)例――創(chuàng)建和測(cè)試第一個(gè)網(wǎng)頁選擇“開始”|“所有程序”|“附件”|“記事本”，運(yùn)行“記事本”程序。在“記事本”窗口中輸入以下內(nèi)容：<html><head><title>歡迎光臨我的第一個(gè)網(wǎng)頁</title></head><body>這是第一個(gè)簡(jiǎn)單網(wǎng)頁!</body></html>選擇【文件】|【保存】命令，在彈出的“另存為”對(duì)話框中選擇要保存的路徑，在【文件名】文本框中輸入文件名myweb001.html。1.1.3認(rèn)識(shí)HTML標(biāo)簽HTML文檔中的標(biāo)簽包括單標(biāo)簽和雙標(biāo)簽，另外在標(biāo)簽中還可以包含一些屬性。（1）<html>和</html><html>和</html>在最外層，表示在這對(duì)標(biāo)簽里面的代碼是HTML語言。（2）<head>和</head>在這對(duì)標(biāo)簽里的內(nèi)容是網(wǎng)頁中的頭部信息，如網(wǎng)頁總標(biāo)題、網(wǎng)頁關(guān)鍵字等，若不需頭部信息則可省略此標(biāo)記。（3）<title>和</title>在<head>和</head>這對(duì)雙標(biāo)簽的中間還包含著<title>和</title>這樣一對(duì)標(biāo)簽。呈現(xiàn)在網(wǎng)頁的標(biāo)題，標(biāo)題會(huì)出現(xiàn)在IE瀏覽器窗口的標(biāo)題欄。（4）<body>和</body><body>和</body>之間的“這是第一個(gè)簡(jiǎn)單網(wǎng)頁!”部分，就是在網(wǎng)頁中實(shí)際看到的內(nèi)容。<body>和</body>之間是網(wǎng)頁的主體內(nèi)容部分，大部分HTML標(biāo)簽都包含在<body>和</body>之間。1.1.4HTML文檔的基本結(jié)構(gòu)一個(gè)HTML文檔分為兩部分：文件頭和文件體。文件頭中提供了文檔標(biāo)題，并建立了HTML文檔與文件目錄間的關(guān)系。文件體部分是網(wǎng)頁的實(shí)質(zhì)內(nèi)容，它是HTML文檔中最主要的部分，其中包含了文本、圖像、表格等元素，這些元素構(gòu)成了網(wǎng)頁的內(nèi)容。1.2初識(shí)DreamweaverMacromediaDreamweaver是是一款專業(yè)的HTML編輯器，用于對(duì)Web站點(diǎn)、Web頁和Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開發(fā)。無論開發(fā)者愿意享受手工編寫HTML代碼時(shí)的駕馭感，還是偏愛在可視化編輯環(huán)境中工作，Dreamweaver都會(huì)提供實(shí)用的工具，使網(wǎng)頁設(shè)計(jì)者擁有更加完美的Web創(chuàng)作體驗(yàn)。熟練掌握Dreamweaver的工作環(huán)境是進(jìn)一步學(xué)習(xí)網(wǎng)頁制作的關(guān)鍵，本節(jié)介紹Dreamweaver的工作環(huán)境，并且通過一個(gè)實(shí)例介紹用Dreamweaver制作一個(gè)簡(jiǎn)單網(wǎng)頁的方法。1.2.1Dreamweaver工作環(huán)境1.2.2課堂實(shí)例――用Dreamweaver制作一個(gè)簡(jiǎn)單網(wǎng)頁1.2.3站點(diǎn)的建立1.2.1Dreamweaver工作環(huán)境1．起始頁2．工作窗口3．自定義界面4．三種視圖模式1.2.2課堂實(shí)例――用Dreamweaver制作一個(gè)簡(jiǎn)單網(wǎng)頁下面使用Dreamweave制作一個(gè)簡(jiǎn)單的網(wǎng)頁，介紹一下Dreamweave制作網(wǎng)頁的基本流程。1．新建網(wǎng)頁2．編輯網(wǎng)頁3．保存網(wǎng)頁4．預(yù)覽網(wǎng)頁5．繼續(xù)編輯網(wǎng)頁6．再次預(yù)覽網(wǎng)頁1.2.3站點(diǎn)的建立Dreamweaver8不僅僅是網(wǎng)頁設(shè)計(jì)工具，更是網(wǎng)站設(shè)計(jì)工具，提供了大量和網(wǎng)站管理維護(hù)相關(guān)的功能，能夠?qū)W(wǎng)站中的文件、鏈接、媒體文件等多種資源進(jìn)行統(tǒng)一管理，使網(wǎng)站設(shè)計(jì)工作事半功倍。要想使用Dreamweaver8的網(wǎng)站管理功能，必須首先建立“站點(diǎn)”。下面就介紹如何創(chuàng)建一個(gè)站點(diǎn)。1．設(shè)置站點(diǎn)名稱2．設(shè)置是否使用服務(wù)器技術(shù)3．設(shè)置站點(diǎn)的本地文件夾4．設(shè)置遠(yuǎn)程服務(wù)器連接方式5．完成站點(diǎn)向?qū)?.3在代碼視圖中創(chuàng)建HTML前面在記事本程序中手工編寫了一個(gè)簡(jiǎn)單的HTML文檔，本節(jié)講解在Dreamweaver代碼視圖中創(chuàng)建HTML文檔的方法。在Dreamweaver代碼視圖中，利用標(biāo)簽選擇器、代碼提示工具和編碼工具欄可以快速地創(chuàng)建專業(yè)的HTML文檔。1.3.1標(biāo)簽選擇器1.3.2代碼提示工具1.3.3編碼工具欄1.3.1標(biāo)簽選擇器標(biāo)簽選擇器是Dreamweaver的一個(gè)重要功能，利用它可以方便地編輯HTML代碼，下面介紹標(biāo)簽選擇器的使用方法。插入----標(biāo)簽1．輸入html標(biāo)簽2．輸入body標(biāo)簽3．插入title標(biāo)簽1.3.2代碼提示工具為了方便用戶對(duì)HTML源代碼進(jìn)行編輯，Dreamweaver8提供了代碼提示工具。在代碼視圖中編輯源代碼時(shí)，這種提示工具會(huì)根據(jù)上下文的環(huán)境自動(dòng)彈出來（通常需要按一下空格鍵，或者通過調(diào)用菜單命令使其顯示出來），從彈出的列表中選擇需要輸入的內(nèi)容雙擊鼠標(biāo)左鍵或者按下鍵盤上的回車鍵就能直接插入代碼，效率非常高，而且不容易出錯(cuò)。1.3.3編碼工具欄網(wǎng)頁源文件（比如HTML）通常包含有數(shù)量龐大的代碼，對(duì)其進(jìn)行編輯經(jīng)常讓人眼花繚亂，Dreamweaver8提供的編碼工具欄大大方便了代碼的編輯工作。1．編碼折疊和展開

2．添加和刪除代碼注釋

上機(jī)練習(xí)

練習(xí)1編寫HTML代碼用記事本創(chuàng)建一個(gè)HTML文檔，網(wǎng)頁效果如圖1-68所示；在Dreamweaver中在代碼視圖下利用標(biāo)簽選擇器創(chuàng)建HTML文檔以及在設(shè)計(jì)視圖下完成同樣的效果。練習(xí)2文件頭標(biāo)簽的應(yīng)用練習(xí)用“HTML”工具欄中的“文件頭”按鈕（如圖1-69所示）進(jìn)行網(wǎng)頁文件頭的設(shè)計(jì)，包括設(shè)置網(wǎng)頁關(guān)鍵字、設(shè)置頁面自動(dòng)切換等功能。這個(gè)練習(xí)主要是讓讀者了解元信息標(biāo)記<meta>的使用方法。元信息標(biāo)記<meta>位于HTML文件的<head></head>區(qū)域中，他們記錄網(wǎng)頁

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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ì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論