網(wǎng)頁制作課件第1章 網(wǎng)頁設(shè)計(jì)基礎(chǔ)

第1章網(wǎng)頁設(shè)計(jì)基礎(chǔ)制作人：曾俊國重點(diǎn)和難點(diǎn)

了解互聯(lián)網(wǎng)的相關(guān)概念理解網(wǎng)頁與網(wǎng)站的基礎(chǔ)知識及其關(guān)系HTML基礎(chǔ)知識網(wǎng)站設(shè)計(jì)基本流程1.1互聯(lián)網(wǎng)(Internet)基礎(chǔ)互聯(lián)網(wǎng)(Internet)已經(jīng)滲透到了當(dāng)今社會的各個方面。用戶通過互聯(lián)網(wǎng)即可以坐在家里了解最近的新聞，閱讀當(dāng)天的報紙，了解股市行情，還可以實(shí)現(xiàn)網(wǎng)上購物，預(yù)訂機(jī)票和酒店房間，查閱資料。各類學(xué)校還可以通過互聯(lián)網(wǎng)實(shí)現(xiàn)遠(yuǎn)程教學(xué)。

1.1.1WebWeb是WorldWideWeb的簡稱，業(yè)界簡寫為WWW（萬維網(wǎng)或全球蜘蛛網(wǎng)），其本質(zhì)是一個將信息檢索與超文本（hypertext）技術(shù)結(jié)合起來的全球信息系統(tǒng)，這些信息主要采用HTML(hypertextmarkuplanguage，超文本置標(biāo)語言)文件格式。Web最大的特點(diǎn)是采用超文本置標(biāo)語言進(jìn)行編輯文本，文本中含有大量的超鏈接，一旦鼠標(biāo)單擊超鏈接元素，在瀏覽器窗口中就會顯示相應(yīng)的內(nèi)容。1.1.2、URL為了確定被訪問的站點(diǎn)及其網(wǎng)頁的位置，瀏覽器運(yùn)用了統(tǒng)一資源定位器（UniformResourceLocation，URL）技術(shù)，它提供了在Web上訪問資源的唯一方法和路徑。瀏覽器運(yùn)用了URL技術(shù)、URL路由協(xié)議類型、主機(jī)域名和資源文件三部分組成，一般URL的完整使用格式如下：協(xié)議://主機(jī)域名或IP地址:端口號/路徑名/文件名。1.1.3、瀏覽器瀏覽器是用來定位和訪問Web信息的工具軟件，它的作用是把各種從Web上接收的信息解釋成人們?nèi)菀鬃R別和接受的屏幕顯示方式呈現(xiàn)給用戶。根據(jù)不同的計(jì)算機(jī)平臺、操作系統(tǒng)，以及用戶界面需求，上網(wǎng)的用戶可以選擇不同的瀏覽器。近年來，隨著Web技術(shù)的發(fā)展，瀏覽器的功能越來越強(qiáng)，不但可以瀏覽各類網(wǎng)頁，還可以進(jìn)行網(wǎng)上會議、收發(fā)電子郵件、視頻點(diǎn)播等工作。1.2網(wǎng)頁與網(wǎng)站的概念用戶是通過Internet上的各種諸如Web服務(wù)器提供的服務(wù)來獲取自己所需的信息。如果把網(wǎng)站比作各種信息的集散地，網(wǎng)頁則是把信息從集散地（網(wǎng)站）輸送到各地的主要載體。1.2.1、網(wǎng)頁網(wǎng)頁是我們在瀏覽器上看到的窗口界面，是一種可以在萬維網(wǎng)上傳輸，并被瀏覽器認(rèn)識和翻譯成頁面顯示出來的文件。網(wǎng)頁的最大特色就是超鏈接，通過超鏈接使各個網(wǎng)頁之間連接起來，使網(wǎng)站中眾多的頁面構(gòu)成一個有機(jī)整體，單擊超鏈接瀏覽器可以進(jìn)入一個新的網(wǎng)頁或轉(zhuǎn)到當(dāng)前網(wǎng)頁的其他位置。1.2.2、網(wǎng)站網(wǎng)站（Website）是一群相關(guān)網(wǎng)頁的集合，這就意味著需要單獨(dú)編輯若干個網(wǎng)頁文件，然后通過“超鏈接”把它們鏈接在一起，讓瀏覽者可以看到網(wǎng)站中所有的網(wǎng)頁。1.2.3、網(wǎng)頁設(shè)計(jì)網(wǎng)頁設(shè)計(jì)的專業(yè)軟件比較多，如微軟公司的FrontPage等，但最經(jīng)典的還屬網(wǎng)頁設(shè)計(jì)三劍客：Dreamweaver最初是由美國著名的軟件開發(fā)商Macromedia公司（現(xiàn)已被Adobe公司收購）推出的一個“所見即所得”的可視化網(wǎng)站開發(fā)工具。Fireworks是網(wǎng)頁設(shè)計(jì)“三劍客”之“火焰”，它以處理網(wǎng)頁圖片為特長，并可以輕松創(chuàng)作GIF動畫。Flash是網(wǎng)頁三劍客之中的“閃電”，其以制作網(wǎng)上動畫為特長，它做出的動畫聲音動畫效果都是其他軟件無法比擬的。1.3網(wǎng)頁設(shè)計(jì)的基礎(chǔ)知識1.3.1、HTML的概念及基本語法

HTML（HypertextMarkupLanguage）即超文本置標(biāo)語言是制作網(wǎng)頁的基礎(chǔ)語言，它是一系列的標(biāo)記符號或希望顯示在文件內(nèi)的代碼。這些標(biāo)記告訴瀏覽器應(yīng)該如何顯示文字和圖形。在WWW上最基本的傳輸單位是Web頁，而這些Web都是用HTML語言編寫的，因此，HTML是構(gòu)成Web頁面（Page）的主要工具。（1）HTML基本結(jié)構(gòu)（2）HTML標(biāo)記屬性（3）字體（4）文字布局標(biāo)記

（5）表格（6）表單的制作（7）圖像（8）鏈接1.3.2、靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁1.靜態(tài)網(wǎng)頁：靜態(tài)網(wǎng)頁是指網(wǎng)頁基本上全部用HTML語言制作，頁面的內(nèi)容是固定不變的，靜態(tài)網(wǎng)頁是網(wǎng)站建設(shè)的基礎(chǔ)。2.動態(tài)網(wǎng)頁：是指網(wǎng)頁文件不僅具有HTML標(biāo)記，而且含有需要Web服務(wù)器執(zhí)行的程序代碼，如數(shù)據(jù)庫連接、數(shù)據(jù)庫數(shù)據(jù)讀取與更新等，動態(tài)網(wǎng)頁能夠根據(jù)不同的時間和不同的用戶顯示不同的內(nèi)容專業(yè)的大中型網(wǎng)站都是建立在使用數(shù)據(jù)庫的基礎(chǔ)之上的，用戶要想通過瀏覽器在Web頁面上查詢數(shù)據(jù)庫里的相關(guān)數(shù)據(jù)，就要編寫服務(wù)器端的程序。1.4網(wǎng)站設(shè)計(jì)的流程網(wǎng)站開發(fā)者通過與客戶的交流，首先要了解客戶對網(wǎng)站的內(nèi)容、功能、規(guī)模和使用對象等方面的要求，讓用戶將所有的想法盡可能的闡述清楚，并把所有的要求羅列出來，不要遺漏，假如客戶的需求做得不完整，隨時可能會產(chǎn)生意料之外的變更，甚至這個變更會破壞已經(jīng)做的模型及結(jié)構(gòu)，那么這個網(wǎng)站的建設(shè)從開始就注定了會失敗。在此過程中，開發(fā)者還應(yīng)隨時和用戶保持溝通，共同探討各方面的可行性，排除不可行因素后制定出一份網(wǎng)站開發(fā)的需求文檔，作為開發(fā)的總體要求和標(biāo)準(zhǔn)，并根據(jù)該文檔，確定開發(fā)周期和進(jìn)度安排。1.4.1、客戶需求分析1.4.2、注冊域名與申請空間網(wǎng)站的開發(fā)計(jì)劃確定之后，下一步就是為該網(wǎng)站申請網(wǎng)絡(luò)空間和域名。網(wǎng)絡(luò)空間用于存放網(wǎng)站所包含的全部文件，其中包括網(wǎng)頁文件、圖像文件以及其他相關(guān)的數(shù)據(jù)文件等。域名是該網(wǎng)站在網(wǎng)絡(luò)上的唯一標(biāo)識地址，通過在瀏覽器中輸入該地址來訪問網(wǎng)站的全部內(nèi)容。目前，提供網(wǎng)絡(luò)空間和域名出售業(yè)務(wù)的公司很多，只需按時支付年費(fèi)，即可獲得一定大小的網(wǎng)絡(luò)空間以及網(wǎng)站域名。1.4.3、確定網(wǎng)站的主題與特色按照客戶的需求，網(wǎng)站開發(fā)者需要同客戶進(jìn)一步溝通以確定網(wǎng)站的主題、頁面特色、具體內(nèi)容以及需實(shí)現(xiàn)的功能等。如果前期沒能確定好主題及頁面特色等相關(guān)內(nèi)容就急于開始設(shè)計(jì)頁面，一旦開發(fā)過程中需要對主題或頁面風(fēng)格進(jìn)行更改，將涉及很多相關(guān)內(nèi)容，很可能造成網(wǎng)站開發(fā)成本的極大增加。因而這一步在網(wǎng)站開發(fā)過程中至關(guān)重要。1.4.4、提出網(wǎng)站建設(shè)方案確定網(wǎng)站的主題與特色經(jīng)過與客戶溝通，在網(wǎng)站的全部相關(guān)內(nèi)容都確定無誤之后，開發(fā)者需要進(jìn)一步提出詳細(xì)開發(fā)實(shí)施方案，即包括開發(fā)環(huán)境、開發(fā)工具的選取等。1.4.5、運(yùn)用網(wǎng)頁設(shè)計(jì)工具實(shí)施網(wǎng)站建設(shè)計(jì)劃接下來就用選好的DreamweaverCS4網(wǎng)頁設(shè)計(jì)軟件進(jìn)行網(wǎng)頁設(shè)計(jì)。1.4.6、上傳網(wǎng)站內(nèi)容到服務(wù)器當(dāng)網(wǎng)站全部開發(fā)完畢并在本地測試通過后，即可將網(wǎng)站設(shè)計(jì)的全部頁面文件和數(shù)據(jù)文件上傳到服務(wù)器。在此過程中，可以使用一些諸如FTP等工具加快上傳速度。此時在瀏覽器中輸入網(wǎng)站的域名和首頁地址即可打開站點(diǎn)進(jìn)行瀏覽了。1.4.7、網(wǎng)站的后期維護(hù)如何對建設(shè)好的網(wǎng)站進(jìn)行后期維修，是建一個優(yōu)秀網(wǎng)站必須重視的問題。網(wǎng)站上傳之后并不代表已經(jīng)全部開發(fā)完畢，后期維護(hù)也是網(wǎng)站開發(fā)過程中非常重要的一步。網(wǎng)站運(yùn)行時出現(xiàn)的問題，頁面中需要修改的瑕疵，以及可能在網(wǎng)站運(yùn)行時發(fā)現(xiàn)需要增刪的部分功能，都是后期維護(hù)階段需要完成的工作。1.5典例剖析：制作一個簡單的歡迎頁面本實(shí)例實(shí)際上是對本章所講述內(nèi)容的綜合，具體操作步驟如下：（1）網(wǎng)頁素材的準(zhǔn)備：為“相關(guān)鏈接”的導(dǎo)航按鈕及網(wǎng)頁背景準(zhǔn)備圖像，設(shè)置其合適的長度和寬度。（2）規(guī)劃網(wǎng)頁布局：本實(shí)例實(shí)際上是運(yùn)用了3個table來布局整個網(wǎng)頁，第一個table涵蓋了整個網(wǎng)頁，第二個table是嵌套在其中的，并將其設(shè)置在網(wǎng)頁的左邊，用于布局“相關(guān)鏈接”中的導(dǎo)航欄及圖片，第三個table也是嵌套在第一個table中，用于布局“自我介紹”、“我的家人”等欄目的鏈接。（3）調(diào)整每個表格的寬度和高度以及調(diào)整每個表格中的表元寬度與高度，做到網(wǎng)頁內(nèi)的所有元素相互協(xié)調(diào)、勻稱。1.6習(xí)題一、選擇題1．（）標(biāo)簽可應(yīng)用于<head>中。A）<HTML> B）<BODY> C）<TITLE> D）<IMAGE>2．一個標(biāo)準(zhǔn)的HTML語法結(jié)構(gòu)不包括（）標(biāo)簽。A）<html> B）<head> C）<title> D）<body>3．鏈接的基本語法標(biāo)簽是（）。A）<p> B）<a> C）<tr> D）<center>4．以下哪種不是對齊控制的屬性？（）A）<left> B）<right> C）<middle> D）<center>5．下列哪項(xiàng)不是在制作表格時要用到的標(biāo)記？（）A）<tr> B）<td> C）<table> D）<form>二、填