1、Internet與網(wǎng)頁設計實驗指導書信息學院 電子商務系二一三年一月目 錄實驗1 Internet基礎11、Internet起源12、WWW工作原理23、瀏覽器24、搜索引擎的使用35、網(wǎng)站規(guī)劃56、網(wǎng)站發(fā)布方法（IIS）6實驗2 Internet基本應用101、Internet基本服務102、常用IP命令113、LOGO設計軟件12實驗3 HTML基礎與Dreamweaver操作161、HTML語言簡介162、Dreamweaver CS5窗口布局193、創(chuàng)建與管理站點204、新建與保存文件225、設置頁面基本屬性236、表格與列表277、超鏈接308、多媒體329、表單3510、框架*40

2、11、使用模板*4612、行為面板*5013、CSS面板*57實驗4 Fireworks基本操作621、Fireworks CS5窗口布局622、基本知識663、常用操作68實驗5 CSS基礎901、CSS（層疊樣式表）簡介902、CSS樣式的聲明903、CSS樣式的應用914、CSS高級語法945、CSS的常用屬性1026、CSS頁面布局113實驗6 JavaScript語言和JQuery基礎*1431、JavaScript的使用1432、JavaScript的基本元素1453、JavaScript基本語句1534、使用JavaScript函數(shù)1585、JavaScript中的對象1616、

3、JavaScript的內(nèi)置對象1667、對象的操作語句1778、DOM對象及事件編程1809、jQuery基礎*197- II -實驗6 JavaScript語言和JQuery基礎*實驗1 Internet基礎Internet，中文正式譯名為因特網(wǎng)，又叫做國際互聯(lián)網(wǎng)。它是由那些使用公用語言互相通信的計算機連接而成的全球網(wǎng)絡。一旦你連接到它的任何一個節(jié)點上，就意味著您的計算機已經(jīng)連入Internet網(wǎng)了。Internet目前的用戶已經(jīng)遍及全球，有超過幾億人在使用Internet，并且它的用戶數(shù)還在以等比級數(shù)上升。一、實驗目的1、 了解Internet起源與常用瀏覽器；2、 了解搜索引擎的基本原理

4、；3、 了解網(wǎng)站發(fā)布方法；二、實驗準備1、 實驗環(huán)境：Windows XP professional以上（包含IIS）、Internet三、實驗資料1、Internet起源Internet的雛形是ARPANet。ARPANet是美國國防部高級研究計劃局ARPA（Advanced Research Project Agency）為了將幾個軍事及研究用計算機主機連接起來而建立的，該網(wǎng)于1969年投入使用。1974年，TCP/IP協(xié)議誕生，隨后美國國防部決定將協(xié)議公開，全世界可以無條件免費使用。1983年，ARPANet分裂為兩部分：ARPANet和純軍事用的MILNet。并在1983年初，ARPA

5、Net的所有主機的協(xié)議都轉換成為TCP/IP協(xié)議。1983年至1989年，Internet逐漸在教育、科研領域發(fā)展和普及。其中，最為引人注目的是NSFNet。這是美國國家科學基金會NSF（National Science Foundation）在1986年建立的主要用于教育科研的網(wǎng)絡。NSFNet使得Internet向全社會開放，而不象以前那樣僅僅由計算機研究人員、政府職員和政府承包商使用。1989年，從ARPANet分離出來的MILNet和NSFNet實現(xiàn)連接，開始采用Internet這個名稱，ARPANet宣告解散。自此，各類局域網(wǎng)和廣域網(wǎng)相繼并入到Internet中，Internet逐步

6、壯大起來。而1989年誕生的萬維網(wǎng)（World Wide Web，WWW）更是為Internet解決了信息的存儲、發(fā)布和交換的難題，從此Internet進入了高速成長期。20世紀90年代初開始，商業(yè)機構開始進入Internet，成為Internet發(fā)展的強大推動力，Internet開始了它的商業(yè)化進程，而Internet的服務也逐漸向多樣化發(fā)展。現(xiàn)在Internet已進入到日常生活的各個領域，其在規(guī)模和結構上都有了巨大的發(fā)展，可以說Internet已成為一個名副其實的“全球網(wǎng)”。圖1.1 Internet發(fā)展史2、WWW工作原理WWW是一種B/S結構（Browse/Server，客戶機/服務器

7、）的系統(tǒng)。在WWW方式下，客戶端使用瀏覽器訪問服務器，過程大致如下：（1）用戶通過客戶端瀏覽器向Web服務器發(fā)出一個請求，通常是一個URL。（2）Web服務器接收到請求后，把URL轉換成頁面所在服務器上的文件路徑名。（3）如果URL指向的是一個普通的HTML文檔，Web服務器直接將它的代碼傳送給客戶端瀏覽器。HTML中可能包含Java、JavaScript、VBScript等編寫的小程序，這些程序也傳送到瀏覽器。（4）如果URL指向的是CGI、ASP或JSP等類型的文檔，則Web服務器先執(zhí)行其中的程序，再將結果以HTML的形式傳送到瀏覽器。（5）客戶端瀏覽器根據(jù)HTML的格式顯示網(wǎng)頁，由于HT

8、ML文件與其中要顯示的元素是分開存放的，因此如果網(wǎng)頁中包含圖片等元素，瀏覽器還要再次向服務器請求相應的元素文件。（6）當所有HTML代碼文件和其中的元素文件都傳送完畢，訪問過程結束。圖1.2 WWW工作原理3、瀏覽器瀏覽器是指可以顯示網(wǎng)頁服務器或者文件系統(tǒng)的HTML文件內(nèi)容，并讓用戶與這些文件交互的一種軟件。網(wǎng)頁瀏覽器主要通過HTTP協(xié)議與網(wǎng)頁服務器交互并獲取網(wǎng)頁，這些網(wǎng)頁由URL指定，文件格式通常為HTML，并由MIME在HTTP協(xié)議中指明。一個網(wǎng)頁中可以包括多個文檔，每個文檔都是分別從服務器獲取的。大部分的瀏覽器本身支持除了HTML之外的廣泛的格式，例如JPEG、PNG、GIF等圖像格式，

9、并且能夠擴展支持眾多的插件（plug-ins）。另外，許多瀏覽器還支持其他的URL類型及其相應的協(xié)議，如FTP、Gopher、HTTPS（HTTP協(xié)議的加密版本）。HTTP內(nèi)容類型和URL協(xié)議規(guī)范允許網(wǎng)頁設計者在網(wǎng)頁中嵌入圖像、動畫、視頻、聲音、流媒體等。圖1.1 主流瀏覽器四大類瀏覽器：(1) IE內(nèi)核：包括IE、360安全瀏覽器、MyIE9、Greenbrowser、Maxthon2、世界之窗、以及剛開始的搜狗。(2) Chrome內(nèi)核：如 Chrome瀏覽器。(3) 雙核（IE和Chrome/webkit內(nèi)核）：雙核的意思是一般網(wǎng)頁用Chrome內(nèi)核（即高速模式）打開，網(wǎng)銀等指定的網(wǎng)頁用

10、IE內(nèi)核打開。如360高速瀏覽器、搜狗高速瀏覽器。(4) Firefox。提示：不同瀏覽器采用不同排版引擎，因此顯示同一網(wǎng)頁的效果會有較大差異，即使同是IE瀏覽器，不同版本的差異也很大，在網(wǎng)頁制作過程中要考慮不同瀏覽器的效果。4、搜索引擎的使用搜索引擎按其工作方式主要可分為三種，分別是全文搜索引擎（Full Text Search Engine）、目錄索引類搜索引擎（Search Index/Directory）和元搜索引擎（Meta Search Engine）。Ø 全文搜索引擎 全文搜索引擎是名副其實的搜索引擎，國外具代表性的有Google、Fast/AllTheWeb、Alta

11、Vista、Inktomi、Teoma、WiseNut等，國內(nèi)著名的有百度（Baidu）。它們都是通過從互聯(lián)網(wǎng)上提取的各個網(wǎng)站的信息（以網(wǎng)頁文字為主）而建立的數(shù)據(jù)庫中，檢索與用戶查詢條件匹配的相關記錄，然后按一定的排列順序?qū)⒔Y果返回給用戶，因此他們是真正的搜索引擎。從搜索結果來源的角度，全文搜索引擎又可細分為兩種，一種是擁有自己的檢索程序（Indexer），俗稱“蜘蛛”（Spider）程序或“機器人”（Robot）程序，并自建網(wǎng)頁數(shù)據(jù)庫，搜索結果直接從自身的數(shù)據(jù)庫中調(diào)用，如上面提到的7家引擎；另一種則是租用其他引擎的數(shù)據(jù)庫，并按自定的格式排列搜索結果，如Lycos引擎。 圖1.2 常用全文搜索

12、引擎Ø 目錄索引 目錄索引雖然有搜索功能，但在嚴格意義上算不上是真正的搜索引擎，僅僅是按目錄分類的網(wǎng)站鏈接列表而已。用戶完全可以不用進行關鍵詞（Keywords）查詢，僅靠分類目錄也可找到需要的信息。目錄索引中最具代表性的莫過于大名鼎鼎的Yahoo雅虎。其他著名的還有Open Directory Project（DMOZ）、LookSmart、About等。國內(nèi)的搜狐、新浪、網(wǎng)易搜索也都屬于這一類。 圖1.3 常用目錄搜索引擎Ø 元搜索引擎 (META Search Engine)元搜索引擎在接受用戶查詢請求時，同時在其他多個引擎上進行搜索，并將結果返回給用戶。著名的元搜索

13、引擎有InfoSpace、Dogpile、Vivisimo等（元搜索引擎列表），中文元搜索引擎中具代表性的有搜星搜索引擎。在搜索結果排列方面，有的直接按來源引擎排列搜索結果，如Dogpile，有的則按自定的規(guī)則將結果重新排列組合，如Vivisimo。除上述三大類引擎外，還有以下幾種非主流形式：1、集合式搜索引擎：如HotBot在2002年底推出的引擎。該引擎類似META搜索引擎，但區(qū)別在于不是同時調(diào)用多個引擎進行搜索，而是由用戶從提供的4個引擎當中選擇，因此叫它“集合式”搜索引擎更確切些。2、門戶搜索引擎：如AOL Search、MSN Search等雖然提供搜索服務，但自身即沒有分類目錄也沒

14、有網(wǎng)頁數(shù)據(jù)庫，其搜索結果完全來自其他引擎。3、免費鏈接列表（Free For All Links，簡稱FFA）：這類網(wǎng)站一般只簡單地滾動排列鏈接條目，少部分有簡單的分類目錄，不過規(guī)模比起Yahoo等目錄索引來要小得多。由于上述網(wǎng)站都為用戶提供搜索查詢服務，為方便起見，我們通常將其統(tǒng)稱為搜索引擎。其他專用的搜索引擎：i. 職位搜索 : ii. 房產(chǎn)搜索： iii. 購物搜索： iv. 旅行搜索 : v. 生活搜索: vi. 論壇搜索： vii. Blog 搜索： 5、網(wǎng)站規(guī)劃(1) 網(wǎng)站目錄結構通常網(wǎng)站中的文件和圖片素材較多，為了使網(wǎng)站目錄清晰、便于管理，需要建立網(wǎng)站根目錄，并在根目錄下建立不同

15、的文件夾來存放各種素材，如“images”文件夾存放各種圖片素材、“style”文件夾存放樣式表（.css）文件、“js”文件夾存放網(wǎng)頁腳本（.js）文件等，如果網(wǎng)頁文件（.html或.htm）也很多，建議也分類存放，如下圖所示。網(wǎng)頁制作過程中使用的素材、鏈接的外部文件必須要復制到根目錄下，并且使用后不能隨意移動，否則會影響網(wǎng)頁的瀏覽。MyWebimagesjsstyleswfindex.htmljianjie.htmllogo.giftop_bg.gifmenu.jsweb.cssfly.swf圖1.4 網(wǎng)站目錄結構提示：由于漢字編碼在不同操作系統(tǒng)或軟件中存在差異，所以網(wǎng)站文件夾或網(wǎng)頁文件名

16、應當使用英文或拼音字母。(2) 頁面風格設計一個網(wǎng)站應該具有一個相對統(tǒng)一的風格，如頁面布局、主要顏色、文字大小等，因此，在設計網(wǎng)站之初就應該確定一些通用的屬性，如鏈接樣式、正文字體、網(wǎng)頁背景等，這些功能都可以通過CSS來實現(xiàn)，另外，合理的使用Dreamweaver的模板功能也能夠讓網(wǎng)頁設計事半功倍。(3) 首頁網(wǎng)站都有一個首頁，是網(wǎng)站的主要入口，通常網(wǎng)站主頁命名為“index.htm”或“index.html”，通過首頁中的鏈接可以找到其他的網(wǎng)頁。一個好的網(wǎng)站應該是所有的頁面都可以通過鏈接的跳轉打開，并且其他頁面也可以隨時跳回首頁（是頁面鏈接，而不是使用IE的“退回”功能），并且每個頁面都沒有

17、“死鏈接”，即鏈接到不存在的位置。(4) 圖片素材網(wǎng)站素材是網(wǎng)站最重要的組成部分，網(wǎng)站LOGO、背景、一些導航圖片和按鈕等，都要用到各種圖片素材。通常網(wǎng)頁中的圖片素材可以通過一些素材網(wǎng)站下載，也可以使用fireworks等圖像工具制作。為了能讓網(wǎng)站的素材也符合網(wǎng)站的總體風格，可以使用fireworks制作網(wǎng)頁整體效果圖，然后分割成不同部分，以備網(wǎng)頁設計時使用。6、網(wǎng)站發(fā)布方法（IIS）(1) 安裝IIS 5.0IIS是微軟出品的可以架設WEB、FTP、SMTP服務器的一套整合軟件，捆綁在 Windows XP中，但在部分版本的默認安裝中是不會安裝的，可以在操作系統(tǒng)安裝時選擇安裝IIS，或者在操

18、作系統(tǒng)安裝后，在控制面板的【添加/刪除程序】|【添加/刪除Windows組件】|【Internet信息服務(IIS) 】。 圖1.4 選擇IIS組件 圖1.5 安裝過程安裝完成后，系統(tǒng)自動創(chuàng)建一個Web服務器，設置了一個默認的Web站點，該站點位于C:InetPubwwwroot下，默認的IP地址為，域名為http:/localhost。(2) 啟動IIS啟動【控制面板】|【管理工具】中找到應用程序【Internet信息服務】（IIS），IIS程序窗口如下圖：圖1.6 IIS程序窗口選擇目錄樹中的【默認網(wǎng)站】，可以通過點擊窗口工具欄中的“”、“”和“”來控制IIS程序的運行、

19、停止、暫停。提示：IIS成功安裝以后，IIS服務在Windows啟動時是自動啟動運行的，可以在【控制面板】中的【管理工具】的【服務】中設置是否自動啟動【IIS Admin Service】服務。(3) 設置主目錄與主文檔每個Web站點必須有一個主目錄，也應該在該目錄下設置一個主文檔。主目錄映射為站點的域名、服務器名或IP地址。當客戶端在瀏覽器地址欄內(nèi)輸入Web服務器的域名、服務器名或IP地址后，瀏覽器就會查找主目錄下的主文檔。要改變Web服務器默認的主目錄，在如圖1.6所示的IIS程序窗口中，用鼠標右鍵單擊目錄樹中的【默認網(wǎng)站】項，打開如圖1.7所示的屬性頁，指定主目錄的位置。主目錄可以是計算

20、機硬盤上的目錄、另一計算機上的共享位置、重定向到新的URL。本例主目錄指向D:MyWebSite。 圖1.7 默認Web站點屬性-主目錄 圖1.8 默認Web站點屬性-主文檔要改變Web服務器的主文檔，可在如圖1.7所示的對話框中選擇【文檔】選項卡，打開主文檔設置對話框，如圖1.8所示。選中【啟用默認文檔】復選框，點擊【添加】按鈕后，在【添加默認文檔】對話框中，輸入主文檔名。主文檔名可以使用任何名稱，但必須是操作系統(tǒng)支持的文件名。名稱必須由字母和數(shù)字組成，不能包含空格。最常用的名稱是default.htm和Index.htm。當主文檔不止一個時，系統(tǒng)會自動從上到下查找主文檔是否存在，可以使用“

21、”、“”調(diào)整主文檔的次序。也可以使用【刪除】按鈕刪去一些主文檔名。提示：只有當客戶端瀏覽器只請求域名、服務器名或IP地址時，系統(tǒng)才會查找主文檔，如果請求中包含所需要的文件名，則主文檔不會起作用。設置完成后，在瀏覽器窗口中輸入http:/localhost/、/或http:/本機機器名，即可看到如圖1.9所示的效果。圖1.9 瀏覽網(wǎng)頁如果要在網(wǎng)絡中的其他計算機上訪問上述站點，則窗口輸入對應主機名或IP地址。(4) 創(chuàng)建虛擬目錄Web服務器只能建立一個默認站點，若要在同一臺計算機上同時建立其他站點，可以創(chuàng)建虛擬目錄。虛擬目錄的原理與默認Web站點類似，也有一個供瀏覽器

22、讀取的目錄，但并不具有獨立的地址，而是假設為默認站點中的一個子目錄。虛擬目錄有一個別名，用于在Web瀏覽器中訪問此目錄。創(chuàng)建虛擬目錄的步驟：（1）右鍵點擊【默認網(wǎng)站】，選擇【新建】|【虛擬目錄】命令；（2）在向?qū)е休斎雱e名，如ec；（3）選擇Web站點內(nèi)容目錄，如E:projectec；（4）完成向?qū)А＿@時在【Internet信息服務】窗口中，在【默認網(wǎng)站】目錄樹下多了一個“Site”虛擬目錄，右鍵點擊該項，打開屬性頁，同樣可以設置【虛擬目錄】和【文檔】，如圖1.10所示。圖1.10 虛擬目錄的屬性在瀏覽器窗口中輸入http:/localhost/ec或/ec即可

23、測試該虛擬目錄。(5) 使用其他Web Server（Sws Asp Web Server）由于IIS服務器較為復雜，且包含了其他不必須的組件，因此并不是普通網(wǎng)頁開發(fā)者的首選。目前也有很多小巧的服務器軟件，功能強大且操作簡單，如迷你ASP服務器(Sws Asp Web Server) 是一款小巧輕盈的Asp Web服務器，能幾近完美的支持html網(wǎng)頁以及ASP。使用說明： 1. 將應用程序放置在網(wǎng)站根目錄下，雙擊運行；2. 雙擊右下角任務欄圖標即可為您開啟網(wǎng)站，也可以使用“http:/localhost:端口號/”訪問網(wǎng)站。圖1.11 Sws AspWebServer運行界面提示：在【默認端口

24、】中可輸入多個端口號，系統(tǒng)自動選擇最前面且未被占用的端口。四、實驗內(nèi)容和要點1、利用搜索引擎查找以下內(nèi)容（請利用Word保存搜索結果）：i. 寫出常見的幾種瀏覽器軟件（至少4種）及其主頁地址ii. 利用搜索引擎查找：我們學校在互聯(lián)網(wǎng)上申請的是A類網(wǎng)，B類網(wǎng)還是C類網(wǎng)，IP地址為多少？并記錄（其中IP地址記錄地址段即可）。iii. 互聯(lián)網(wǎng)的組織結構是怎么樣的，互聯(lián)網(wǎng)由誰來管理？iv. 目前IPv4的使用狀況如何，IPv4和IPv6分別是如何分配的？v. 如何申請域名和IP地址？vi. 互聯(lián)網(wǎng)的接入方式有哪些？2、制作一個簡易的網(wǎng)頁，步驟：a) 創(chuàng)建以自己學號命名的文件夾，并按圖1.4的要求建立網(wǎng)

25、站目錄結構；b) 在文件夾內(nèi)新建一記事本文件，并直接編輯網(wǎng)頁內(nèi)容；<html><head><title>我的第一張網(wǎng)頁</title></head><body>大家好，歡迎訪問*（此處為學生姓名）的個人主頁！</body></html>c) 選擇【文件】【另存為】1-1.htm或1-1.html，注意文件取名寫上擴展名“.htm”或“.html”都可以。d) 雙擊剛才保存的網(wǎng)頁文件進行瀏覽。e) 下次再編輯可直接在網(wǎng)頁上單擊右鍵，選擇【查看源文件】進行編輯。3、將以上網(wǎng)頁在本地系統(tǒng)中發(fā)布五、實驗課時

26、：3課時六、課后練習1、瀏覽學校網(wǎng)站，查看部分網(wǎng)頁的HTML代碼，并分析學校網(wǎng)站的網(wǎng)站結構。2、了解Google、Baidu搜索引擎的原理，思考如何利用其規(guī)則對網(wǎng)站進行優(yōu)化，以便讓網(wǎng)站排名更靠前（SEO，搜索引擎優(yōu)化）。- 232 -實驗2 Internet基本應用當我們進入Internet后，就可以利用其中各類網(wǎng)絡和各種計算機上無窮無盡的資源，同世界各地的人們自由通信和交換信息，以及去做通過計算機能做的各種各樣的事情，享受Internet為我們提供的各種服務。一、實驗目的1、 了解Internet中的常用服務；2、 了解常用的IP命令；3、 熟悉LOGO設計軟件；二、實驗準備1、 實驗環(huán)境：

27、Windows XP professional以上、Internet2、 使用軟件：AAA Logo三、實驗資料1、Internet基本服務1信息瀏覽（WWW） 服務 www，也叫做web，是我們登錄Internet后最常利用到的Internet的功能。人們連入Internet后，有一半以上的時間都是在與各種各樣的web頁面打交道。在基于web方式下，我們可以瀏覽、搜索、查詢各種信息，可以發(fā)布自己的信息，可以與他人進行實時或者非實時的交流，可以游戲、娛樂、購物等等等等。 2電子郵件（E-mail） 服務 在Internet上，電子郵件或稱為E-mail系統(tǒng)是使用最多的網(wǎng)絡通信工具，E-mail

28、已成為倍受歡迎的通信方式。你可以通過E-mail系統(tǒng)同世界上任何地方的朋友交換電子郵件。不論對方在哪個地方，只要他也可以連入Internet，那么你發(fā)送的信只需要幾分鐘的時間就可以到達對方的手中了。 3遠程登錄（Telnet） 服務 遠程登錄就是通過Internet進入和使用遠距離的計算機系統(tǒng)，就像使用本地計算機一樣。遠端的計算機可以在同一間屋子里，也可以遠在數(shù)千公里之外。它使用的工具是Telnet。它在接到遠程登錄的請求后，就試圖把你所在的計算機同遠端計算機連接起來。一旦連通，你的計算機就成為遠端計算機的終端。你可以正式注冊（login）進入系統(tǒng)成為合法用戶，執(zhí)行操作命令，提交作業(yè)，使用系統(tǒng)

29、資源。在完成操作任務后，通過注銷（logout）退出遠端計算機系統(tǒng)，同時也退出Telnet。 提示：試試啟動【命令提示符】，輸入以下命令telnet 、telnet towel.blinkenlights.nl4文件傳輸（FTP） 服務FTP（文件傳輸協(xié)議）是Internet上最早使用的文件傳輸程序。它同Telnet一樣，使用戶能登錄到Internet的一臺遠程計算機，把其中的文件傳送回自己的計算機系統(tǒng)，或者反過來，把本地計算機上的文件傳送并裝載到遠方的計算機系統(tǒng)。利用這個協(xié)議，我們就可以下載免費軟件，或者上傳自己的主頁了！2、常用IP命令(1) IPCONFIG ：用于顯示當前計算機的TCP

30、/IP配置值使用格式： IPCONFIG 或者 IPCONFIG -all，主要練習：查看本機的TCP/IP配置，并請比較以上兩者的不同。方法如下:提示：【開始】【運行】，鍵入CMD命令，回車；鍵入ipconfig /all 或ipconfig圖2.1 “ipconfig /all”運行結果(2) PING：用于檢驗與遠端計算機或本地計算機是否相連使用格式：Ping 參數(shù) 地址 參數(shù)介紹如下：i. t：檢驗與指定計算機的連接，直到用戶中斷（按ctrl+c鍵）ii. -a：將地址解析為計算機名 例如：ping a iii. -n count：發(fā)送由count指定數(shù)量的ech

31、o報文。在默認情況下，一般都只發(fā)送4個數(shù)據(jù)包，通過這個命令可以自己定義發(fā)送的個數(shù)，對衡量網(wǎng)絡速度很有幫助。比如想測試發(fā)送25個數(shù)據(jù)包的返回的平均時間為多少，最快時間為多少，最慢時間為多少就可以通過以下獲知：Ping n 25 iv. l length：定義echo數(shù)據(jù)包的大小，最大為65500。v. 常規(guī)使用 ping 地址 如ping 5 即為測試本機與IP地址為5是否互通。主要練習：查詢你的電腦與自己同學的電腦是否互通，請寫出查詢的ping命令。提示：【開始】【運行】，鍵入CMD命令，回車；鍵入對應的ping命令，可以不用

32、參數(shù)(3) NSLOOKUP：（選作）可以查詢一臺機器的IP地址和其對應的域名。它通常需要一臺域名服務器來提供域名服務。如果用戶已經(jīng)設置好域名服務器，就可以用這個命令查看不同主機的IP地址對應的域名。格式：nslookup IP地址域名 如 nslookup 查詢一個地址下的所有主機名（四級域名），例如nslookup （表示回車）Ls 主要練習：利用nslookup命令和子命令ls查詢財經(jīng)學院所有的主機名稱，并寫出其中4個。提示：【開始】【運行】，鍵入CMD命令，回車；鍵入nslookup命令，回車；再鍵入ls ，回車(4) 跟蹤路徑命令：TRACERT（選作）功能：tracert 命令顯示

33、 用于將數(shù)據(jù)包從計算機傳遞到目標位置的一組 IP 路由器，以及每個躍點所需的時間。如果數(shù)據(jù)包不能傳遞到目標，tracert 命令將顯示成功轉發(fā)數(shù)據(jù)包的最后一個路由器。 命令格式：TRACERT -d-h max_hops-w timeout 名稱或地址i. -d:指定不將地址解析為計算機名ii. -h max_hops:指定搜索目標的最大躍點數(shù)iii. -w timeout：指定每次應答的等待時間（微秒計）主要練習：查詢從學校訪問新浪網(wǎng)的路徑。提示：【開始】【運行】，鍵入CMD命令，回車；鍵入tracert 3、LOGO設計軟件AAA Logo 是一個功能強大的 LOGO 設計軟件，提供100

34、余種模板，2080多種素材。所有的素材都是向量圖，可以方便的放大縮小。你也可以自己創(chuàng)作素材，用于設計。(1) 軟件注冊圖2.2 注冊界面和注冊碼 (2) 選擇模板運行AAALogo后，就會彈出模板選擇窗口，該軟件集成100余種LOGO模板，可以點擊右下角的【Next Page】或【Previous Page】按鈕切換，瀏覽并選擇自己中意的模板，如果你不希望使用軟件集成的模板，相通過自己的創(chuàng)意制作來制作LOGO圖標，可以按下ESC鍵直接進入軟件主界面。圖2.3 選擇模板(3) 編輯圖標點擊選中的模板就可以進入軟件的編輯窗口，這也是軟件的主界面。中間的就是我們的LOGO模板重點的操作區(qū)域，我們的操

35、作將會在這里進行，同時這也是你制作出來的LOGO的雛形。圖2.4 軟件主界面在AAA Logo軟件中把每個模型分為若干個矢量圖，這些矢量圖疊加組成一個LOGO圖標，同時每一個矢量圖都可以看作是一層。如圖2.4所示的模板中我們可以看出是由“TOUCHMEDIA”、“interactive”、“手”及兩個形狀等五層組成，點擊模型中的某層，就可以在左上角顯示該層的矢量圖，同時會在窗口上方生成專門針對該層進行操作的工具，用【前】【后】 來選擇其它對象。工具欄的其他按鈕如下圖所示：圖2.5 編輯工具欄點擊【Text】按鈕，就可以打開基本文字選項窗口，在這里可以對文字內(nèi)容、字體大小、字符間距及文字的縱橫比

36、等進行設置，在設置的同時在預覽窗口中可以實時看到調(diào)整后的效果，另外還可以通過點擊其它按鈕對文字的效果、漸變、變形及顏色來進行設置，我們也可以通過點擊【窗口】菜單中的菜單項來對各個層進行設置，也能起到同樣的效果。編輯對象時，可以使用窗口右下角的系統(tǒng)默認的顏色方案。其它各層的設置與文字層基本一致，在這里就不再贅述。提示：AAA_Logo不支持中文字體，如果想使用中文，可先預留空白，導出圖標后在Photoshop或Fireworks中進行編輯。 圖2.6 “Text”對話框 圖2.7 “Effects”對話框 圖2.8 “Gradient”對話框 圖2.9 “Transform”對話框 圖2.10

37、“Colors”對話框圖 2.11 系統(tǒng)默認的顏色方案如果在選取層對象的時候不方便選擇，我們可以點擊主界面左上角的【Current Object】按鈕，在彈出菜單中選擇相應的層對象就可以了，我們還可以通過調(diào)整層與層之間的前后關系來對LOGO圖標進行設置，從而使之做的更完美，只要點擊【項目】菜單里的相應菜單項就可以了。現(xiàn)在整個LOGO圖標就制作完成了，為了讓LOGO圖標更加完美，還可以點擊【文件】|【圖像選項】，在對話框中對LOGO圖標的色調(diào)、飽和度、光亮度等進行設置，使整體看起來更漂亮。(4) 導出圖標現(xiàn)在一個完美的LOGO圖標就完成了，最后一步就是把圖標輸出以備使用，點擊【文件】【保存log

38、o文件】菜單，然后在彈出窗口中選擇圖像保存的格式，最后點擊保存就可以了，如果想以后多次使用這個LOGO，只要把它存為模板就可以了。圖2.11 “輸出Logo圖像”對話框四、實驗內(nèi)容和要點1、 使用以上常用IP命令，選擇一個結果界面截圖；2、 設計一個LOGO并導出；3、 使用Dreamweaver新建一張網(wǎng)頁，命名為2-1.htm，輸入內(nèi)容：“這是我的實驗成果”，并將以上兩張圖插入網(wǎng)頁中。五、實驗課時：3課時六、課后練習1、 利用搜索引擎，搜索以下問題：a) Internet的常用服務的服務端工具有哪些；b) 什么是計算機的物理地址，如何獲得物理地址；c) 如何利用PING命令判斷基本的網(wǎng)絡故

39、障；d) 設計LOGO應該注意哪些方面。2、 結合AAA Logo與Fireworks或Photoshop設計LOGO。實驗3 HTML基礎與Dreamweaver操作HTML（Hypertext Marked Language，即超文本標記語言）是一種用來制作超文本文檔的簡單標記語言。自1990年以來HTML就一直被用作WWW（是World Wide Web的縮寫，也可簡寫WEB、中文叫做萬維網(wǎng)) 的信息表示語言，使用HTML語言描述的文件，需要通過WEB瀏覽器顯示出效果。Dreamweaver是目前最常用的網(wǎng)頁設計軟件之一。Dreamweaver CS5是Dreamweaver的最新版本,

40、 用于對Web站點、Web頁和 Web應用程序進行設計、編碼和開發(fā)。 Dreamweaver CS5 包含有一個嶄新、簡潔、高效的界面，且性能也得到了改進。此外，還包含了眾多新增的功能，改善了軟件的易用性并使您無論處于設計環(huán)境還是編碼環(huán)境都可以方便地生成頁面。一、實驗目的1、了解HTML的特點，熟悉HTML的用法，熟悉常用標記的功能和屬性；2、掌握Dreamweaver CS5的基本操作；3、了解框架類頁面的制作，了解模板、庫的應用，熟悉常見行為的添加4、掌握Dreamweaver CS5中“CSS樣式”面板的使用二、實驗準備1、 實驗環(huán)境：Dreamweaver CS5、IE8以上瀏覽器三、

41、實驗資料1、HTML語言簡介所謂超文本，是在普通的文本文件中加入圖片、聲音、動畫、影視等內(nèi)容，并且加入超鏈接以從一個文件跳轉到另一個文件，從而實現(xiàn)網(wǎng)絡文件的連接。超文本標記語言是一種用于制作超文本文檔的簡單標記語言，可以制作包含圖像、文字、聲音、超鏈接等精彩內(nèi)容的網(wǎng)頁。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統(tǒng)平臺（如UNIX，WINDOWS等）。在HTML文檔中，字符和數(shù)據(jù)的語法結構是通過標記來表示的。所謂標記，就是采用一系列的指令符號來控制輸出的效果，這些指令符號用“<標記名字 屬性>”來表示。常用的HTML標記有：Ø HTML文檔的基本結構&

42、lt;HTML><HEAD><!-頭部信息-></HEAD><BODY><!-文檔主體，正文部分-></BODY></HTML>Ø 標記的類型² 單標記：<br/>（換行）、<hr>（水平線）² 成對標記：又稱為容器，<marquee>滾動字幕</marquee>² 標記加屬性：屬性設置的一般格式為：屬性名屬性值，屬性值部分可以用英文的雙引號（ " ）或單引號（ ' ）引起來，也可以不使用任何引號，如

43、<font face="隸書" color='red' size=5>字體</font>Ø 顏色的表示網(wǎng)頁中的顏色表示為“#”+ 六位十六進制數(shù)字，兩位一組，分別代表R（紅色）G（綠色）B（藍色）的值，常用顏色也可用英文名稱表示。 圖3.1 常用顏色名 圖3.2 文件結構Ø 文件路徑的表示網(wǎng)頁中引用外部文件（圖片、樣式、腳本和鏈接等）需要使用文件路徑，如圖3.2的文件系統(tǒng)中，引用文件路徑分別表示為：² 同級使用“文件名”：index.html中引用word.html，"word.html&quo

44、t;；² 下級使用“目錄名/文件名”：index.html中引用footer_bg.gif， "images/footer_bg.gif"² 上級以外目錄使用“./目錄名/文件名”：index.html中引用nav_bg.gif，"./zsw/images/nav_bg.gif"² 根：如果網(wǎng)站根目錄（IIS中的主目錄）是websites，則以上文件表示為："/web/word.html"、"/web/images/footer_bg.gif"、"/zsw/images/na

45、v_bg.gif"。Ø 在網(wǎng)頁中顯示表格表格：<table width="100%"></table>行：<tr></tr>單元格：<td></td>Ø 表現(xiàn)出豐富多彩的設計風格圖片調(diào)用：<img src="文件url">文字格式：<font size="3" color="00ffff">文字</font>Ø 實現(xiàn)頁面之間的跳轉頁面跳轉：<a href=&quo

46、t;文件路徑/文件名">鏈接的文字</a>Ø 展現(xiàn)多媒體的效果音頻：<embed src="音樂文件名" autostart=true>視頻：<embed src="視頻文件名" autostart=true>提示：(1) html的標記：識別頁面元素、描述元素的樣式、指向其它資源，不分大小寫。但推薦使用小寫，這樣符合xhtml的規(guī)范；(2) 不同的標記可嵌套使用，但不可交叉；(3) 標記的屬性：要放在開始標記的尖括號中，可以有多個屬性，用空格分隔，通常不分大小寫；(4) 可以采用純文本文件編

47、輯html文件。例如記事本、editplus。以下html代碼是一個簡單的網(wǎng)頁示例，命名為“3-1.html”，該頁在瀏覽器中的效果如圖3.1所示。<html><head><title>一個簡單的html示例</title></head><body><center><h3>歡迎光臨我的主頁</h3><br><hr><font size=2>這是我第一次做<a href="">主頁</a>，無論怎么樣，我都會努

48、力做好！</font></center></body></html>圖3.1 HTML示例提示：隨著CSS的流行，部分HTML標記或?qū)傩酝耆梢员籆SS替代，因此不被新的XHTML標準支持，如bgcolor、text，有些雖然目前還支持，但不推薦使用，并且已被HTML5廢棄，如<font>、<center>等。2、Dreamweaver CS5窗口布局Adobe Dreamweaver CS5，是Adobe 最新開發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，也是第一套針對專業(yè)網(wǎng)頁設計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具

49、，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。Dreamweaver CS5的起始頁分為三欄：最近打開、新建文檔、主要功能，為用戶編輯和設計網(wǎng)頁提供了一個快捷通道。圖3.2 Dreamweaver CS5的起始頁若要新建網(wǎng)頁，可直接在起始頁的中間欄單擊“新建àHTML”命令。此時進入中文版Dreamweaver CS5的操作界面，也即新建頁面的編輯界面，如下圖所示：1、菜單欄2、工具欄：右鍵選擇【文檔】、【標準】、【編碼】等工具欄3、設計器：可調(diào)整界面布局4、代碼視圖5、設計視圖6、浮動面板組7、屬性面板8、對象選擇器和狀態(tài)欄9、編碼工具欄10、編輯文檔列

50、表圖3.3 中文版Dreamweaver CS5的操作界面其中：1、編輯和查看HTML代碼2、編輯和查看網(wǎng)頁界面3、在瀏覽器中預覽4、網(wǎng)頁標題（<title>）圖3.4 【文檔】工具欄 圖3.5 【插入】面板、【CSS樣式】面板、【文件】面板3、創(chuàng)建與管理站點在制作網(wǎng)頁之前先定義站點，這樣有助于理清網(wǎng)站的結構，方便管理網(wǎng)頁文檔和內(nèi)容。在創(chuàng)建站點之前，先在相應磁盤創(chuàng)建將要放置站點的文件夾，而后再創(chuàng)建本地站點。步驟1：在本地磁盤（如：D:盤）創(chuàng)建站點的根文件夾（如：myweb），并在其中創(chuàng)建“images”文件夾作為總的存放圖片的文件夾。提示：由于漢字編碼在不同操作系統(tǒng)或軟件中存在差異

51、，所以網(wǎng)站文件夾或網(wǎng)頁文件名應當使用英文或拼音字母，制作網(wǎng)頁過程中使用的圖片或其他素材也在網(wǎng)站根文件夾下分類存放，如：images存放圖片、js存放腳本程序、swf存放FLASH素材等。步驟2：【站點】|【新建站點】或者【文件】面板 |【管理站點】|【新建】，打開站點設置對話框，輸入【站點名稱】并指定網(wǎng)站根文件夾。圖3.6 站點設置對話框提示：指定網(wǎng)站根文件夾時，當打開窗口能看到images文件夾時單擊【選擇】即可。圖3.7 選擇根文件夾步驟3：設置完成后，單擊“保存”按鈕以完成站點的創(chuàng)建，彈出【管理站點】對話框，并可在文件面板中查看當前站點下的全部文件。單擊【站點】|【管理站點】或【文件】面

52、板 |下拉列表中的【管理站點】會彈出“管理站點”對話框，在這個對話框中可以對已有的站點進行“編輯”、“復制”、“刪除”、“導出”和“導入”等操作， 圖3.8 當前站點下的文件 圖3.9 管理站點對話框4、新建與保存文件在熟悉了Dreamweaver CS5的操作界面并且創(chuàng)建了站點之后，用戶就可以大展手腳，在站點中創(chuàng)建網(wǎng)頁、編輯網(wǎng)頁內(nèi)容完成網(wǎng)頁制作。Ø 新建文件在Dreamweaver CS5中新建網(wǎng)頁可以通過“起始頁”（圖3.2）創(chuàng)建，也可以通過【文件】|【新建】來完成，如下圖。除了可創(chuàng)建普通網(wǎng)頁外，還可創(chuàng)建具有默認風格的網(wǎng)頁，如圖3.10所示。圖3.10 “新建文檔”對話框圖3.1

53、1 “2列固定，右側欄”界面效果Ø 保存文件網(wǎng)頁新建之后，建議馬上進行保存操作，這樣可以確定網(wǎng)頁的存放路徑，并且使后續(xù)應用圖片、超鏈接等對象時生成的URL地址為相對路徑。【文件】菜單提供了多種保存網(wǎng)頁的方式。除了常規(guī)的“保存”和“另存為”之外，還有“保存全部”、“另存為模板”等命令。其中“保存全部”是指將當前應用程序中在編輯的所有網(wǎng)頁文檔都保存，而“另存為模板”是將當前的頁面保存為模板的形式。針對新建的網(wǎng)頁，一般直接選擇“保存”命令即可。5、設置頁面基本屬性(1) 文件頭Ø 網(wǎng)頁標題：<title> 頁面標題 </title>在Dreamweaver

54、 CS5中設置頁面標題主要有3種方式：1、通過Dreamweaver CS5文檔工具欄中的標題文本框來設置網(wǎng)頁的標題，如下圖所示；2、直接在代碼視圖中的<title></title>標記中設置網(wǎng)頁標題；通過單擊【頁面屬性】按鈕，在彈出的“頁面屬性”對話框中選擇“標題/編碼”選項來設置頁面標題。 圖3.12 標題文本框中設置標題 圖3.13 在“頁面屬性”對話框中設置標題Ø <meta>標記<!- 說明頁面編碼 -><meta http-equiv="Content-Type" content="tex

55、t/html; charset=UTF-8"><!- 頁面關鍵字，思考一下關鍵字有什么用！ -><meta name="keywords" content="web,education,internet" ><!- 5秒后跳轉到new.htm -><meta http-equiv="refresh" content="5;url=new.htm" ><!- 頁面加載動畫效果 -><meta http-equiv="Page-

56、Enter" content="RevealTrans(duration=3,Transition=12)">Ø 注釋：<!-注釋性文字->(2) 頁面總體效果Ø 標記：<body> 頁面內(nèi)容 </body>Ø 常用屬性：背景顏色（bgcolor）、文本顏色（text）、背景圖片（background="圖片URL"）、鏈接顏色：link（鏈接）、alink（當前鏈接）、vlink（已鏈接）、滾動條（scroll=yes | no）、頁左邊留白（leftmarging=值）

57、；在“設計”視圖單擊“屬性”面板中的“頁面屬性”按鈕，彈出 “頁面屬性”對話框。圖3.14 頁面屬性對話框² “外觀（CSS）”選項：通過CSS方式設置頁面的字體、背景和邊距等，出現(xiàn)在CSS文件的BODY樣式中。² “外觀（HTML）”選項：通過HTML標記方式設置背景、文本顏色等，出現(xiàn)在HTML文件的BODY屬性中。² “鏈接（CSS）”選項：通過CSS設置頁面中超鏈接的相關顯示效果。² “標題（CSS）”選項：通過CSS來設置頁面中正文標題標記的顯示效果。² “標題/編碼”選項：設置頁面的標題、文檔類型、編碼格式等信息。這些設置有可能影響到網(wǎng)頁的顯示格式。² “跟蹤圖像”選項：選擇跟蹤圖像，在設計時將通過背景圖像的方式顯示在設計視圖中，為頁面的布局等設計提供參考。(3) 正文標題和文字Ø 標題：<h1> </h6>Ø 換行符：<br>、<br/>（不改變上下文格式）Ø 段落：<p> </p>（上下文格式有所變化，主要是段前段后）Ø 水平線：<hr>，主要屬性：粗細（size）、寬