網(wǎng)頁設(shè)計入門范文

網(wǎng)頁設(shè)計入門范文 第一次課的內(nèi)容基本概念代碼初識語言學(xué)第第1章網(wǎng)頁設(shè)計入門?網(wǎng)頁設(shè)計基礎(chǔ)知識?網(wǎng)頁制作相關(guān)技術(shù)?HTML入門（初識和練習(xí)）?HTML基本語法本章主要內(nèi)容網(wǎng)頁設(shè)計制作基礎(chǔ)與上機(jī)指導(dǎo)HTML+CSS+JavaScript清華大學(xué)出版社本次課的要求?一些概念?簡單HTML1.1網(wǎng)頁設(shè)計基礎(chǔ)知識網(wǎng)站（Web Site）是由若干網(wǎng)頁構(gòu)成的，這些網(wǎng)頁按照一定的邏輯關(guān)系組織在一起。 每個網(wǎng)頁都包含一定的組成元素，網(wǎng)頁的設(shè)計與制作就是對這樣元素的規(guī)劃和構(gòu)建。 ?概念?網(wǎng)站又稱Web站點(diǎn)，是Inter中提供信息服務(wù)的機(jī)構(gòu)，這些機(jī)構(gòu)的計算機(jī)連接到Inter中，向用戶提供Web服務(wù)。 ?從技術(shù)上看?一個Web站點(diǎn)是由一個主目錄和主目錄下的文件夾和大量的網(wǎng)頁文件以及相關(guān)的數(shù)據(jù)庫構(gòu)成，這些網(wǎng)頁文件通過超鏈接連接在一起，形成特定的應(yīng)用邏輯，構(gòu)成一個特定的Web應(yīng)用。 ?網(wǎng)站又稱為Web應(yīng)用（Web Application），是基于B/S架構(gòu)的計算機(jī)軟件。 U15Web應(yīng)用與發(fā)展趨勢?B/S三層架構(gòu)與計算模式的演變?計算機(jī)應(yīng)用模式的演變?集中式計算?C/S架構(gòu)?B/S三層架構(gòu)?軟件體系架構(gòu)設(shè)計與開發(fā)模式的演化B/S三層架構(gòu)與計算機(jī)應(yīng)用模式的演變單機(jī)運(yùn)行與集中式計算模式20世紀(jì) 60、70年代20世紀(jì)80年代客戶服務(wù)器（C/S）計算模式瀏覽器服務(wù)器（B/S）計算模式20世紀(jì)90年代單機(jī)運(yùn)行與集中式計算?集中式計算，即計算所需要的數(shù)據(jù)和程序都是集中在一臺計算機(jī)上進(jìn)行的。 ?集中式計算往往形成一種由大型機(jī)和多個與之相連的終端組成的網(wǎng)絡(luò)結(jié)構(gòu)，形成主機(jī)終端計算機(jī)網(wǎng)絡(luò)中央計算機(jī)終端終端終端終端終端客戶/服務(wù)器（C/S）計算模式?兩層結(jié)構(gòu)（Client/Server，C/S）?客戶機(jī)安裝客戶端應(yīng)用軟件?客戶機(jī)完成與用戶的交互任務(wù)，具有強(qiáng)壯的數(shù)據(jù)操縱和事務(wù)處理能力?服務(wù)器安裝服務(wù)器程序?服務(wù)器負(fù)責(zé)數(shù)據(jù)管理，提供數(shù)據(jù)庫的查詢和管理、大規(guī)模的計算等服務(wù)?計算機(jī)局域網(wǎng)?優(yōu)點(diǎn)和缺點(diǎn)?通過異種平臺集成，分布式管理；能充分發(fā)揮客戶端PC的處理能力?它必須在客戶端安裝大量的應(yīng)用程序,維護(hù)復(fù)雜?不適應(yīng)互聯(lián)網(wǎng)的發(fā)展瀏覽器/服務(wù)器（B/S）計算模式?基于Web的協(xié)同計算?B/S三層結(jié)構(gòu)概念圖?Web瀏覽器?Web服務(wù)器?數(shù)據(jù)庫服務(wù)器?工作過程?在用戶端，在瀏覽器地址欄中，用戶輸入要訪問的網(wǎng)頁網(wǎng)址URL，回車確認(rèn)。 ?Web服務(wù)器根據(jù)URL中指定的網(wǎng)址、路徑和網(wǎng)頁文件，調(diào)出相應(yīng)的網(wǎng)頁文件。 ?如果用戶要瀏覽的頁面是普通的html頁面，Web服務(wù)器將把該頁面直接發(fā)送給用戶。 ?如果是服務(wù)器頁（jsp,asp等），Web服務(wù)器將把該頁面交給應(yīng)用服務(wù)器（如Tomcat），由應(yīng)用服務(wù)器執(zhí)行頁面中的服務(wù)器腳本，執(zhí)行完后，將頁面返給Web服務(wù)器，Web服務(wù)器再將頁面發(fā)送到用戶端。 ?在用戶端，文檔在瀏覽器中打開，即完成網(wǎng)頁瀏覽。 ?優(yōu)點(diǎn)?瘦客戶機(jī)，減少客戶端維護(hù)?突破局域網(wǎng)限制，將應(yīng)用分布到整個互聯(lián)網(wǎng)（客戶端腳本、服務(wù)器腳本）腳本語言！軟件體系架構(gòu)設(shè)計及開發(fā)模式的演化?模塊化體系結(jié)構(gòu)設(shè)計和結(jié)構(gòu)化編程?函數(shù)?庫?基于組件的軟件體系架構(gòu)?CORBA（Common ObjectRequest BrokerArchitecture）通用對象請求代理體系架構(gòu),1991年?/D（Distributed ComponentObject Model）-商業(yè)應(yīng)用ActiveX，1993年，1996年?面向服務(wù)的體系架構(gòu)(SOA)模式（Service OrientedArchitecture）oriented?r?ent?dadj.以.為方向的,以.為目的的1.1.1網(wǎng)站和網(wǎng)頁網(wǎng)站（Website）是指在因特網(wǎng)上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。 簡單地說，網(wǎng)站是一種通訊工具，就像布告欄一樣，人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊，或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務(wù)。 人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。 ?Web1.0?xx年以前的互聯(lián)網(wǎng)模式?靜態(tài)的網(wǎng)頁?信息消費(fèi)的時代?Netscape脫穎而出，瀏覽器?Yahoo提出了互聯(lián)網(wǎng)黃頁?Google推出了深受歡迎的搜索服務(wù)?Web2.0時代?xx年3月提出?網(wǎng)民的參與?論壇?博客?更注重用戶的交互作用，用戶既是網(wǎng)站內(nèi)容的消費(fèi)者（瀏覽者），也是網(wǎng)站內(nèi)容的制造者。 1.1.1網(wǎng)站和網(wǎng)頁概念及術(shù)語（Cont1.）?超文本（Hypertext）?超文本是一種文本顯示與連接技術(shù)，可以對文本中的有關(guān)詞匯或句子建立鏈接（即超鏈接），使其指向其他段落、文本或鏈接到其他文檔。 ?當(dāng)超文本顯示時，建立了鏈接的文本、圖片通常以下劃線、高亮等不同的方式顯示，來表明這些文本或圖片對應(yīng)一個超鏈接。 ?超級鏈接（Hyperlink）?Web頁中當(dāng)用戶單擊它時可以轉(zhuǎn)到其他Web頁或當(dāng)前頁面的其他地方的文字、圖片等對象概念及術(shù)語（Cont2.）?Web頁（Web page）?Web頁是指Web服務(wù)器上的一個個超文本文件，或者是它們在瀏覽器上的顯示屏幕。 ?主頁（Home page）?用戶在Web服務(wù)器上看到的第一個Web頁?首頁中往往列出了網(wǎng)站的信息目錄，或指向其他站點(diǎn)的超鏈接，主頁是一個網(wǎng)站的入口。 ?Index.htm或default.htm概念及術(shù)語（Cont3.）?統(tǒng)一資源定位器URL（Uniform ResourceLocator）?信息資源類型/網(wǎng)址端口號/文件路徑/文件名？參數(shù)表?網(wǎng)址?端口號?文件路徑?文件名?參數(shù)表?URL的結(jié)構(gòu)如下?通信協(xié)議/服務(wù)器名稱【:通信端口編號】/文件夾1【/文件夾2】/文件名?在URL語法格式中，除了協(xié)議名稱及主機(jī)名稱是絕對必須有的外，其余像通信端口編號、文件夾等都可以不要。 ?例如news.163./07/1227/21/40OIJ1GT0001121M.html。 其中是超文本傳輸協(xié)議；news.163.是服務(wù)器名；07/1227/21/是文件夾；40OIJ1GT0001121M.html是文件名。 ?例如.jliae./newjliae/stylenew111.htm練習(xí)打開一個常用網(wǎng)站，讀懂URL！概念及術(shù)語（Cont4.）?端口（port）?端口的分類?按協(xié)議類型劃分，端口可以分為TCP、UDP、IP和ICMP（Inter控制消息協(xié)議）等。 其中TCP端口和UDP端口是最常見端口類型。 ?按照端口號分布劃分，端口分為知名端口（Well-Known Ports）和動態(tài)端口（Dynamic Ports）兩部分。 ?知名端口?范圍從0到1023，這些端口號一般固定分配給一些知名的公共服務(wù)。 ?21端口-FTP服務(wù)?25端口-SMTP服務(wù)?80端口-服務(wù)?135端口-RPC（遠(yuǎn)程過程調(diào)用）服務(wù)等?動態(tài)端口?范圍從1024到65535例如同一臺計算機(jī)同時提供服務(wù)和FTP服務(wù)，服務(wù)使用端口80，F(xiàn)TP服務(wù)使用端口21；同一計算機(jī)，相同IP地址下，可以建立多個Web站點(diǎn)，用不同的端口號區(qū)分。 （World WideWeb）萬維網(wǎng)?Web這個Inter上最熱門的應(yīng)用架構(gòu)是由Tim Berners-Lee發(fā)明的。 ?1990年11月，第一個Web服務(wù)器nxoc01.cern.ch開始運(yùn)行，Tim Berners-Lee在自己編寫的圖形化Web瀏覽器WorldWideWeb上看到了最早的Web頁面。 1991年，CERN（European ParticlePhysics Laboratory）正式發(fā)布了Web技術(shù)標(biāo)準(zhǔn)。 目前，與Web相關(guān)的各種技術(shù)標(biāo)準(zhǔn)都由著名的W3C組織（World WideWeb Consortium）管理和維護(hù)。 有想法了，就得有標(biāo)準(zhǔn)！consortiumk?ns?tj?mn.協(xié)會,公會不是Inter喲！概念及術(shù)語（Cont5.）?從技術(shù)層面看，Web架構(gòu)的精華有三處用超文本技術(shù)（HTML）實(shí)現(xiàn)信息與信息的連接；用統(tǒng)一資源定位技術(shù)（URI）實(shí)現(xiàn)全球信息的精確定位；用新的應(yīng)用層協(xié)議（）實(shí)現(xiàn)分布式的信息共享。 這三個特點(diǎn)無一不與信息的分發(fā)、獲取和利用有關(guān)。 其實(shí)，Tim Berners-Lee早就明確無誤地告訴我們“Web是一個抽象的（假想的）信息空間。 也就是說，作為Inter上的一種應(yīng)用架構(gòu)，Web的首要任務(wù)就是向人們提供信息和信息服務(wù)。 1.1.1網(wǎng)站和網(wǎng)頁網(wǎng)站由域名（domain name），網(wǎng)頁和網(wǎng)站空間這三部分組成。 網(wǎng)站域名就是在訪問網(wǎng)站時在瀏覽器地址欄中輸入的網(wǎng)址，比如.cai8.（課件吧網(wǎng)站的一級域名）、down2.cai8.（課件吧網(wǎng)站的二級域名）。 網(wǎng)頁用某種形式的HTML來編寫，多個網(wǎng)頁由超級鏈接聯(lián)系起來。 網(wǎng)站空間由專門的獨(dú)立服務(wù)器或租用的虛擬主機(jī)承擔(dān)，網(wǎng)頁需要上傳到網(wǎng)站空間中，才能供瀏覽者訪問網(wǎng)站中的內(nèi)容。 練習(xí)查找的服務(wù)器空間，建立一個班級同學(xué)介紹網(wǎng)站！1.1.1網(wǎng)站和網(wǎng)頁網(wǎng)站是一個整體，它是由網(wǎng)頁及為用戶提供的服務(wù)構(gòu)成的，網(wǎng)站為瀏覽者提供的內(nèi)容是通過網(wǎng)頁展示出來的，使瀏覽者了解該網(wǎng)站為用戶提供的服務(wù)及展示的信息，瀏覽者訪問網(wǎng)站實(shí)際上就是瀏覽網(wǎng)頁。 網(wǎng)頁經(jīng)由網(wǎng)址（URL）來識別和存取，當(dāng)在瀏覽器中輸入網(wǎng)址后，瀏覽器可以從上下載指定的網(wǎng)頁，傳送到本地計算機(jī)，然后再通過瀏覽器解釋網(wǎng)頁的內(nèi)容，再展現(xiàn)到窗口內(nèi)。 首頁（Home page）也可以稱之為主頁，它是一個單獨(dú)的網(wǎng)頁，和一般網(wǎng)頁一樣，可以存放各種信息，同時又是一個特殊的網(wǎng)頁，作為整個網(wǎng)站的起始點(diǎn)和匯總點(diǎn)，是瀏覽者訪問網(wǎng)站的第一個網(wǎng)頁。 1.1.1網(wǎng)站和網(wǎng)頁Logo Banner導(dǎo)航欄公告欄精彩圖書推薦橫幅廣告位新書快遞精品圖書高校教材專家書評友情鏈接版權(quán)欄網(wǎng)站首頁布局示意圖這是一個簡單的例子，我們?nèi)绾螌?shí)現(xiàn)呢？1.1.2網(wǎng)頁基本元素構(gòu)成網(wǎng)頁的基本元素主要包括文本、圖片、水平線、表格、表單、超鏈接及各種動態(tài)元素。 大家想一想，網(wǎng)頁上還有什么要表現(xiàn)的？我們要學(xué)習(xí)的，就是如何制作包含這些元素的網(wǎng)頁！1.1.2網(wǎng)頁基本元素文本文本是網(wǎng)頁中最主要的信息載體，瀏覽者主要通過文字了解各種信息。 圖片圖片可以使網(wǎng)頁看上到更加美觀。 如果是新聞類或說明類網(wǎng)頁，插入圖片后可以讓瀏覽者更加快捷的了解網(wǎng)頁所要表達(dá)的內(nèi)容。 水平線在網(wǎng)頁中主要起到分隔區(qū)域的功能，以使網(wǎng)頁的結(jié)構(gòu)更加美觀合理。 表格表格是網(wǎng)頁設(shè)計過程中使用最多的基本元素。 首先表格可以顯示分類數(shù)據(jù)，其次使用表格進(jìn)行網(wǎng)頁排版可以達(dá)到更好的定位效果。 1.1.2網(wǎng)頁基本元素表單訪問者有時要查找一些信息或申請一些服務(wù)時需要向網(wǎng)頁提交一些信息，這些信息就是通過表單的方式輸入到Web服務(wù)器，并根據(jù)所設(shè)置的表單處理程序進(jìn)行加工處理的。 表單中包括輸入文本、單選按鈕、復(fù)選框和下拉菜單等。 超鏈接超鏈接是實(shí)現(xiàn)網(wǎng)頁按照一定邏輯關(guān)系進(jìn)行跳轉(zhuǎn)的元素。 一般情況下在瀏覽網(wǎng)頁時將鼠標(biāo)指針指向具有超鏈接的文本或圖片的時候，鼠標(biāo)指針就是變成小手的形狀。 動態(tài)元素現(xiàn)在的網(wǎng)頁中的動態(tài)元素可以說是豐富多彩，包括GIF動畫、Flash動畫、滾動字幕、懸停按鈕、廣告橫幅、網(wǎng)站計數(shù)器等。 這些動態(tài)元素使網(wǎng)頁不再是一個靜止的畫面，可以說動態(tài)元素賦予了網(wǎng)頁生命力，使網(wǎng)頁活了起來。 1.2網(wǎng)頁制作相關(guān)技術(shù)網(wǎng)站是由若干網(wǎng)頁構(gòu)成的，這些網(wǎng)頁按照一定的邏輯關(guān)系組織在一起。 每個網(wǎng)頁都包含一定的組成元素，網(wǎng)頁的設(shè)計與制作就是對這樣元素的規(guī)劃和構(gòu)建。 1.2.1初識HTML HTML是英文Hypertext MarkedLanguage的縮寫，中文意思是超文本標(biāo)記語言，是一種用來制作超文本文檔的簡單標(biāo)記語言。 所謂超文本，是指用HTML創(chuàng)建的文檔可以加入圖片、聲音、動畫、影視等內(nèi)容，并且可以實(shí)現(xiàn)從一個文件跳轉(zhuǎn)到另一個文件，與世界各地主機(jī)的文件連接。 關(guān)于標(biāo)記語言言1.2.2HTML工具編寫HTML代碼的工具有很多，本節(jié)介紹兩種最常用的工具記事本、EditPlus和Dreamweaver。 記事本是一個簡單的文本器，EditPlus是一個比較專業(yè)的文本器，Dreamweaver是一個所見即所得的網(wǎng)頁制作工具1.2.2HTML工具記事本是Windows操作系統(tǒng)自帶的一個應(yīng)用程序，使用起來十分方便和簡單。 下面通過簡單網(wǎng)頁實(shí)例介紹用記事本編寫HTML代碼的方法。 （1）選擇“開始”|“所有程序”|“附件”|“記事本”，運(yùn)行“記事本”程序。 在“記事本”窗口中輸入以下代碼11記事本1.2.2HTML工具 歡迎光臨圖書網(wǎng)站 這是第一個簡單網(wǎng)頁!練習(xí)打用記事本并保存成網(wǎng)頁文件（HTML），再試試修改，看那些語句是干什么的！1.2.2HTML工具 （2）選擇“文件”|“保存”命令，在彈出的“另存為”對話框中選擇要保存的路徑，在“文件名”文本框中輸入文件名myweb001.html （3）打開“資源管理器”窗口，根據(jù)剛才保存網(wǎng)頁的位置，找到myweb001.html文件 （4）雙擊myweb001.html文件圖標(biāo)，系統(tǒng)自動啟動IE瀏覽器并打開這個網(wǎng)頁文件1.2.2HTML工具2EditPlus EditPlus是一款功能全面的文本、HTML、程序源代碼器。 它提供了更加便捷的代碼功能，默認(rèn)支持HTML、CSS、PHP、ASP、Perl、C/C+、Java、JavaScript和VBScript等語法高亮顯示；提供了與Inter的無縫連接，可以在EditPlus的工作區(qū)域中打開Inter瀏覽窗口；提供了多工作窗口，不用切換到桌面，便可在工作區(qū)域中打開多個文檔。 總之，EditPlus功能強(qiáng)大，界面簡潔美觀，且啟動速度快；中文支持比較好；支持語法高亮；支持代碼折疊；支持代碼自動完成（但其功能比較弱），不支持代碼提示功能；配置功能強(qiáng)大，很適合初學(xué)者使用。 1.2.2HTML工具3Dreamweaver Dreamweaver是一個“所見即所得”的網(wǎng)頁制作和網(wǎng)站管理開發(fā)工具，利用Dreamweaver可以設(shè)計、開發(fā)并維護(hù)符合Web標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序。 無論網(wǎng)站開發(fā)者是喜歡直接編寫HTML代碼的駕馭感還是偏愛在可視化環(huán)境中工作，Dreamweaver都會提供幫助良多的工具，豐富Web創(chuàng)作體驗。 1.2.3CSS和JavaScript在進(jìn)行網(wǎng)頁設(shè)計與制作時，除了HTML外，還有CSS和JavaScript等技術(shù)與網(wǎng)頁設(shè)計密切相關(guān)。 11CSS CSS（Cascading StyleSheet，可譯為“層疊樣式表”或“級聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁面的外觀。 通過使用CSS樣式設(shè)置頁面的格式，可將頁面的內(nèi)容與表現(xiàn)形式分離。 頁面內(nèi)容存放在HTML文檔中，而用于定義表現(xiàn)形式的CSS規(guī)則存放在另一個文件中或HTML文檔的某一部分，通常為文件頭部分。 將內(nèi)容與表現(xiàn)形式分離，不僅可使維護(hù)站點(diǎn)的外觀更加容易，而且還可以使HTML文檔代碼更加簡練，縮短瀏覽器的加載時間。 1.2.3CSS和JavaScript CSS是W3C（World WideWeb Consortium）定義和維護(hù)的標(biāo)準(zhǔn)，是一種用來為結(jié)構(gòu)化文檔（如HTML文檔或XML應(yīng)用）添加樣式（字體、間距和顏色等）的計算機(jī)語言。 課后練習(xí)訪問W3C School網(wǎng)站，看看里面都有什么，保存到書簽頁！1.2.3CSS和JavaScript22JavaScript JavaScript是目前在網(wǎng)頁中廣泛使用的腳本語言，它是Netscape公司利用Java的程序概念，將自己原有的Livescript重新進(jìn)行設(shè)計后而產(chǎn)生的腳本語言。 JavaScript是一種基于對象和事件驅(qū)動并具有安全性能的腳本語言，有了JavaScript，可使網(wǎng)頁變得生動、活潑。 使用它的目的是與HTML、Java小程序（Java Appl