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