第1章 網頁設計基礎_第1頁
第1章 網頁設計基礎_第2頁
第1章 網頁設計基礎_第3頁
第1章 網頁設計基礎_第4頁
第1章 網頁設計基礎_第5頁
已閱讀5頁，還剩13頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

第1章網頁設計基礎隨著Internet（因特網）的發展和普及，越來越多的個人和公司都想在Internet上安個家，各種各樣的網站應運而生。網頁設計和制作技術也越來越受到人們的關注，網站是如何創建的？需要掌握哪些計算機技術？本章介紹網頁設計的基礎知識，主要包括以下內容：

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

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

2．添加和刪除代碼注釋

上機練習

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

溫馨提示

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

評論

0/150

提交評論