網(wǎng)頁制作-簡介和超鏈接使用

網(wǎng)頁程序設(shè)計基礎(chǔ)第一章

網(wǎng)頁簡介和超鏈接

張新課程信息目標(biāo)掌握HTML文檔結(jié)構(gòu)和標(biāo)記的使用了解互聯(lián)網(wǎng)了解HTML在HTML文檔中使用超鏈接在HTML文檔中使用特殊字符使用<META>標(biāo)記4網(wǎng)頁是利用超文本標(biāo)記語言HTML(HyperTextMarkupLanguge)編寫的，存放在Internet／Intranet上的Web服務(wù)器中，供訪問者使用瀏覽器來閱讀。利用HTML語言編寫出來的網(wǎng)頁又稱為超文本，即網(wǎng)頁中包含有文本、圖形、聲音、圖像和超鏈接(HyperLink)等多媒體信息。通常我們看到的網(wǎng)頁，都是以

.htm

或

html

后綴結(jié)尾的文件，稱

.HTML

文件。5網(wǎng)頁是在瀏覽因特網(wǎng)時看到的一個個的頁面；文字、圖片和動畫等網(wǎng)站是指存放在網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體：它是由一個或多個網(wǎng)頁，按照一定的邏輯順序，以超鏈接（A）方式連接在一起，形成的一組描述完整信息的整體。首頁(主頁):構(gòu)成網(wǎng)站的第一頁，一般起目錄、導(dǎo)航作用，所以又叫導(dǎo)航頁。6主頁個人簡歷我的相冊作品展示家庭相冊心情隨筆個人相冊網(wǎng)站作品平面作品涂鴉作品7互聯(lián)網(wǎng)簡介互聯(lián)網(wǎng)是世界上最大的計算機網(wǎng)絡(luò)互聯(lián)網(wǎng)被稱為網(wǎng)絡(luò)的網(wǎng)絡(luò)萬維網(wǎng)是互聯(lián)網(wǎng)中的一個子網(wǎng)WWW

包含分散在世界范圍內(nèi)的眾多Web服務(wù)器（WorldWideWeb）8互聯(lián)網(wǎng)萬維網(wǎng)網(wǎng)絡(luò)99IE瀏覽器URL地址網(wǎng)頁HTTP協(xié)議10協(xié)議：訪問WWW上的資源必須遵循超文本傳輸協(xié)議HyperTextTransferProtocol（HTTP）地址：統(tǒng)一資源定位符UniformResourceLocators(URL)用來標(biāo)識Web上的頁面和資源HTML:超文本標(biāo)記語言HyperTextMarkupLanguage用于創(chuàng)建可以通過Web訪問的文檔www11WWW地址URL相當(dāng)于一個文件名在網(wǎng)絡(luò)范圍的擴展URL的格式：<URL的訪問方式>://<主機>:<端口>/<路徑>例如：:80/index.actionftp——文件傳送協(xié)議FTPhttp——超文本傳送協(xié)議HTTP存放資源的主機在因特網(wǎng)中的域名可省略，默認(rèn)端口80，文件指向主頁12流行的瀏覽器軟件包括：InternetExplorer（IE）NavigatorFirefox、騰訊TT、360安全瀏覽器、搜狗等B/S工作原理工作原理：基于B/S(Browser/Server,瀏覽器/服務(wù)器)模式Server因特網(wǎng)Http請求Http響應(yīng)靜態(tài)網(wǎng)頁技術(shù)靜態(tài)網(wǎng)頁技術(shù)所謂靜態(tài)是指網(wǎng)頁的內(nèi)容是事先設(shè)計好的，不會根據(jù)實際情況發(fā)生變化HTML語言（HpyerTextMarkupLanguage，超文本標(biāo)記語言）文件擴展名：.htm或.html制作工具MicrosoftFrontPageMacromediaDreamweaverText動態(tài)網(wǎng)頁技術(shù)動態(tài)網(wǎng)頁技術(shù)網(wǎng)頁的內(nèi)容不再是固定不變的，而會根據(jù)實際情況發(fā)生動態(tài)變化網(wǎng)頁里的內(nèi)容很大一部分是訪問數(shù)據(jù)庫得到的，用戶輸入的信息也將被保存到數(shù)據(jù)庫中與用戶的交互性大大加強分類Server端動態(tài)網(wǎng)頁技術(shù)Client端動態(tài)網(wǎng)頁技術(shù)Server端動態(tài)網(wǎng)頁技術(shù)Web服務(wù)器不只是簡單地將用戶請求的文件發(fā)送給Client端，而是先執(zhí)行相應(yīng)的腳本程序（Script），通常執(zhí)行的結(jié)果為HTML格式，然后將執(zhí)行結(jié)果返回給瀏覽器進行顯示用戶能夠看到的只是HTML文件，而看不到腳本程序的源代碼Server端動態(tài)網(wǎng)頁技術(shù)CGI（CommonGatewayInterface，通用網(wǎng)關(guān)接口）腳本程序文件擴展名：.cgi典型應(yīng)用實例：檢查用戶身份Server端動態(tài)網(wǎng)頁技術(shù)在HTML代碼中嵌入腳本程序代碼段，Web服務(wù)器同樣先將腳本程序代碼段執(zhí)行，轉(zhuǎn)變?yōu)镠TML代碼后，返回給瀏覽器顯示ASP（ActiveServerPages，動態(tài)服務(wù)器主頁），由Microsoft公司推出，以VisualBasic為腳本語言，文件擴展名為.aspASP.net，是微軟新一代動態(tài)服務(wù)器主頁，以任何支持.net技術(shù)的語言為腳本，文件擴展名為aspxPHP，采用了類似于C語言的腳本語言，擴展名為.phpJSP（JavaServerPages），以Java為腳本語言，擴展名為.jspServer端動態(tài)網(wǎng)頁技術(shù)開發(fā)工具VisualInterDev（CGI/ASP）VisualS（ASP.net）DreamweaverUltraDev（CGI/ASP/PHP/JSP）Dreamweaver

（CGI/ASP/PHP/JSP）文本編輯器：UltraEdit,TextClient端動態(tài)網(wǎng)頁技術(shù)JavaScriptPlug-in（各類插件）媒體工具類AdobePhotoshop/MacromediaFireworksMacromediaFlashJava語言（JavaApplet）可移植性強，可以在不改動源程序的前提下讓應(yīng)用程序運行于不同的操作系統(tǒng)平臺上，適用于網(wǎng)絡(luò)環(huán)境21基于web的網(wǎng)絡(luò)應(yīng)用電子商務(wù)應(yīng)用電子商務(wù)(electroniccommerce)是指通過Internet進行的各種商務(wù)活動，它覆蓋與商務(wù)活動有關(guān)的所有方面電子商務(wù)是商務(wù)活動與信息技術(shù)相結(jié)合的產(chǎn)物，它是傳統(tǒng)商務(wù)領(lǐng)域的一場巨大變革電子商務(wù)代表著一種新的產(chǎn)品生產(chǎn)、銷售與企業(yè)運營管理方式電子商務(wù)的類型企業(yè)與企業(yè)(businesstobusiness，B2B)企業(yè)與消費者(businesstoconsumer，B2C)消費者與消費者(consumertoconsumer，C2C)22電子政務(wù)(electronicgovernment)通過應(yīng)用信息技術(shù)，實現(xiàn)全部政府業(yè)務(wù)處理的電子化，達到高效、方便、透明地處理政府機關(guān)之間，政府與企業(yè)、公眾的全部業(yè)務(wù)服務(wù)的目的電子政務(wù)的類型政府部門之間的電子政務(wù)(government-to-government，G-to-G)政府對企業(yè)的電子政務(wù)(government-to-business，G-to-B)政府對公眾的電子政務(wù)(government-to-citizen，G-to-C)23遠程教育應(yīng)用通過數(shù)字化音頻、視頻技術(shù)，實現(xiàn)文字、圖像和聲音的同步傳輸，有效解決教師與學(xué)生之間的距離與時間的限制，最大限度地共享優(yōu)質(zhì)的師資、授課環(huán)境、實驗環(huán)境等資源，實現(xiàn)交互式教學(xué)遠程教育培訓(xùn)服務(wù)主要包括：教育門戶網(wǎng)站、教育頻道、遠程教育培訓(xùn)平臺提供商、遠程教育培訓(xùn)內(nèi)容商等24博客應(yīng)用博客(blog)是以文章的形式在Internet上發(fā)表和信息共享博客在技術(shù)上屬于網(wǎng)絡(luò)共享空間，在形式上屬于個人Internet出版，博客是人們在Internet上思想交流的一種新方式博客的主要類型以個人的記事、表達與交流為主的博客，即個人博客由共同關(guān)心某類問題的人或團體構(gòu)成的博客社區(qū)，例如技術(shù)研討、新聞時事等25播客與網(wǎng)絡(luò)電視應(yīng)用播客是基于Internet的數(shù)字廣播技術(shù)。初期的播客借助一種iPodder的軟件與一些便攜播放器相結(jié)合播客錄制網(wǎng)絡(luò)語音廣播節(jié)目，并傳輸?shù)骄W(wǎng)絡(luò)中共享給其他用戶，用戶可將廣播節(jié)目下載到自己的播放器中收聽26搜索引擎應(yīng)用搜索引擎(searchengineer)是Internet中的一種Web服務(wù)器，它主動搜索其他Web服務(wù)器中的信息并索引，將索引內(nèi)容存儲在可供查詢的數(shù)據(jù)庫中包含Internet中各種信息的龐大數(shù)據(jù)庫，它必須不斷更新自己的數(shù)據(jù)庫，以便反映Internet中的最新信息常用的搜索引擎Google搜索引擎：/百度搜索引擎：httP:///搜索關(guān)鍵字、高級搜索27基于P2P的網(wǎng)絡(luò)應(yīng)用P2P(peer-to-peer)是一種客戶結(jié)點之間以對等的方式，通過直接交換信息達到共享計算機資源和服務(wù)的目的P2P網(wǎng)絡(luò)淡化服務(wù)提供者與服務(wù)使用者的界限，每個結(jié)點既是網(wǎng)絡(luò)服務(wù)的使用者，又可以向其他客戶提供資源和服務(wù)即時通信P2P軟件流媒體P2P軟件QQPPLivePoPoTvAntsMSNMessengerGoogleTalk2829301.HTML語言HTML語言的發(fā)展：80年代末在SGML的基礎(chǔ)上產(chǎn)生1994年，W3C（WorldWideWebConsortium）組織對HTML進行了標(biāo)準(zhǔn)化工作自1990年問世以來，已發(fā)行4個版本：HTML1.0、HTML2.0、HTML3.0、HTML4.0、HTML5.0HTML標(biāo)準(zhǔn)的網(wǎng)站：/pub/www●HyperText

Markup

Language—超文本標(biāo)記語言

制作Web頁面的基本編程語言

一系列標(biāo)記的集合用HTML編寫的超文本文檔稱為HTML文檔?！?/p>

HTML文檔的編寫方法手工直接編寫：記事本、EditPlus等，存成.htm

或.html文件

可視化編輯器：Dreamweaver、Frontpage等由Web服務(wù)器實時動態(tài)地生成：IIS、Tomcat等1.HTML語言HTML標(biāo)簽及其屬性

標(biāo)記:是HTML語言的基本組成部分，要用<>括起來?！耠p邊標(biāo)記：頭標(biāo)與尾標(biāo)。如：<title>…</title><html>…</html>。●單邊標(biāo)記：只有頭標(biāo)。如：<hr>標(biāo)記屬性：對標(biāo)記的狀態(tài)進行描述，出現(xiàn)在標(biāo)記的<>內(nèi)，屬性值用“”或者’’引起來。常見共有屬性：color、bgcolor、background、size、width、height、align、src。34HTML開發(fā)HTML標(biāo)記的格式組成：<HTML>...</HTML>HTML標(biāo)記用于標(biāo)記HTML文檔的開始和結(jié)束元素-標(biāo)識標(biāo)記屬性-描述標(biāo)記值-分配給屬性的內(nèi)容<ELEMENTATTRIBUTE=value>標(biāo)記:人(事物)屬性:性別、頭發(fā)、職業(yè)……值:女性、長頭發(fā)、工程師……

男性、黃頭發(fā)、培訓(xùn)師……35HTML作用使用HTML標(biāo)記或元素，可以：控制頁面和內(nèi)容的外觀發(fā)布聯(lián)機文檔使用HTML文檔中插入的鏈接檢索聯(lián)機信息創(chuàng)建聯(lián)機表單，收集用戶的信息、執(zhí)行事務(wù)等等插入動畫開發(fā)幫助文件36HTML語法示例：<HTML><HEAD> <TITLE>歡迎學(xué)習(xí)HTML</TITLE></HEAD><BODY> <H3>我的第一個HTML文檔</H3></BODY></HTML>運行結(jié)果37標(biāo)記<HTML> <HEAD> <TITLE>歡迎使用HTML</TITLE> </HEAD> <BODYBGCOLOR=lavender> <P>這會是一種很有趣的體驗 <P>另一個段落元素 </BODY></HTML>運行結(jié)果38補充：關(guān)于顏色顏色值是一個關(guān)鍵字或一個RGB格式的數(shù)字。aqua，black，blue，fuchsia,gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，yellow色彩的概述色彩具有五顏六色，千變?nèi)f化的特點。平時我們看到的白光，經(jīng)過分析在色帶上可以看到，事實上包括了7種顏色。色彩有冷、暖之分，其巧妙運用會達到意想不到的效果。紅色代表：熱情、活潑、熱鬧、溫暖、幸福橙色代表：光明、華麗、興奮、快樂。黃色代表：明朗、愉快、高貴、希望綠色代表：平靜、和平、柔和、安靜、青春藍色代表：永恒、沉靜、理智、誠實紫色代表：高貴、魅力、自傲白色代表：純潔、樸實、神圣灰色代表：消極、謙虛、平凡、中庸、寂寞黑色代表：堅實、嚴(yán)肅、粗莽40在HTML中對于顏色的定義可以用6位十六進制數(shù)。電腦屏幕的色彩是由rgb（紅、綠、藍）三種色光所合成的，通過調(diào)整這三個基色就可以調(diào)配出其它的顏色。每2位數(shù)代表一種顏色的濃度，三種顏色的順序為紅、綠、藍，00代表顏色濃度最小，F(xiàn)F代表顏色濃度最大。#000000代表純黑、#FFFFFF代表純白、41d圖中所示是部分顏色的RGB代碼:

例：為頁面設(shè)置背景色：

<bodybgcolor=“#FFFF33”>42HTML文檔的結(jié)構(gòu)HTML部分文檔頭部分正文部分<HTML> <HEAD> <TITLE>歡迎進入HTML世界</TITLE> </HEAD> <BODY> <P>這會是一種很有趣的體驗</P> </BODY></HTML>基本結(jié)構(gòu)：運行結(jié)果43段落標(biāo)記<HTML> <HEAD> <TITLE>歡迎使用HTML</TITLE> </HEAD> <BODYBGCOLOR=lavender>

<P>這會是一種很有趣的體驗

<P>

另一個段落元素 </BODY></HTML>運行結(jié)果44換行標(biāo)記<HTML> <HEAD> <TITLE>歡迎使用HTML</TITLE> </HEAD> <BODYBGCOLOR=lavender> <P>這會是一種很有趣的<BR>體驗 <P>另一個段落元素 </BODY></HTML>運行結(jié)果45使用對齊屬性<HTML>

<HEAD>

<TITLE>學(xué)習(xí)HTML</TITLE>

</HEAD> <BODYBGCOLOR=lavender> <Palign=right>這會是一種很有趣的體驗</P> </BODY></HTML>

運行結(jié)果右對齊Left：左對齊Center：居中Right：右對齊46使用META標(biāo)記2-1提供關(guān)于網(wǎng)頁的信息<METAname=“Author”content=“GrahamBrown”>

<METAname=“KEYWORDS”content=“...”>

<METAname="DESCRIPTION"content="...">對網(wǎng)頁的描述根據(jù)關(guān)鍵詞生成響應(yīng)獲得文檔的作者名稱2.應(yīng)用：關(guān)鍵詞生成響應(yīng)<METAhttp-equiv="Expires"content="Mon,15Sep200314:25:27GMT">Expires:Mon,15Sep200314:25:27GMT設(shè)置網(wǎng)頁的到期值:響應(yīng)

473.自動刷新頁面<METAhttp-equiv="Refresh"content="10;url=http://yourlink">4.使用網(wǎng)頁所使用的編碼<METAhttp-equiv="Content-Type"content="text/html;charset=gb2312">應(yīng)用：如網(wǎng)上實時新聞報道。應(yīng)用：如在不同瀏覽器上正確顯示中文。使用META標(biāo)記2-248在HTML文檔中使用特殊字符……<TDwidth="100%"height=18><FONTsize=-1>Userid   用戶名/口令。</FONT></TD>…………200>189……>號……20<189……<號……"風(fēng)馳電掣"……

“號……x>y;&x=120……

與符號……©CopyRight版權(quán)所有……

?版權(quán)符號……®APTECH……

?注冊商標(biāo)491、職位：關(guān)于可申請的職位……2、培訓(xùn)資源：本學(xué)院美術(shù)學(xué)位的培訓(xùn)資源請單擊此處查看視頻……3、聯(lián)盟：我們有許多聯(lián)盟……超鏈接簡介2-1主頁(落錨點）職位培訓(xùn)資源請單擊此處查看視頻聯(lián)盟50超鏈接簡介2-2鏈接類型內(nèi)部鏈接1、到同一網(wǎng)站內(nèi)的其它網(wǎng)頁的鏈接2、到同一文檔內(nèi)的其他部分的鏈接外部鏈接到其他網(wǎng)站或服務(wù)器上的頁面的鏈接。----------------------------------------------------------------------Web站點1Web站點251創(chuàng)建超鏈接要創(chuàng)建超鏈接，必須指定兩個部分要鏈接的文件的完整地址或URL熱點熱點可以是一行文字甚至一個圖像C:\internet\index.htmlservice/index.html

絕對URL文件的完整地址相對URL52超鏈接：錨記A<AHREF=protocol://host.domain:port/path/filename>

Hypertext</A>Protocol是協(xié)議類型http–超文本傳輸協(xié)議gopher–搜索文件telnet–打開

telnet會話ftp–文件傳輸協(xié)議mailto–發(fā)送電子郵件

Host.domain是服務(wù)器的Internet地址Port是目標(biāo)服務(wù)器的端口號Hypertext是用戶必須單擊才能激活鏈接的文本或圖像eg.<AHREF=Doc2.html>文檔2</A><AHREF="

:80/index.action">互聯(lián)網(wǎng)</A><AHREF="

">互聯(lián)網(wǎng)</A><AHREF="

/EnglishWeb/index.html">互聯(lián)網(wǎng)</A>

語法為:53鏈接到其他文檔<HTML>碼頭<HEAD><TITLE>使用鏈接</TITLE></HEAD><BODY><BR><BR><P>本頁的所有內(nèi)容都講述關(guān)于如何創(chuàng)建到文檔的鏈接

<AHREF=Doc2.html>單擊此處查看文檔2</A></BODY></HTML>

<HTML>船<HEAD><TITLE>文檔2</TITLE></HEAD><BODY><BR><BR><P>這是文檔2。單擊文檔1中的超鏈接后將顯示本頁。<BR><BR>

<AHREF=Doc1.html>返回</A></BODY></HTML>

54鏈接到同一文檔的各個部分<HTML><HEAD><TITLE>使用鏈接</TITLE></HEAD><BODY>

<AHREF=#Internet>互聯(lián)網(wǎng)</A><BR><BR>

<AHREF=#HTML>HTML簡介</A><BR><BR>

<AHREF=#Consistency>多樣化和統(tǒng)一性</A><BR><BR>

<Aname=Internet>互聯(lián)網(wǎng)</A><BR><P>互聯(lián)網(wǎng)是網(wǎng)絡(luò)的網(wǎng)絡(luò)。也就是說，計算機網(wǎng)絡(luò)可以跨越國家甚至全球的范圍連接到其他網(wǎng)絡(luò)。世界上所有的計算機都可以通過TCP/IP傳輸協(xié)議綁定在一起。</P>

<Aname=HTML>HTML簡介</A><BR><P>超文本標(biāo)記語言是Web用來創(chuàng)建和識別文檔的標(biāo)準(zhǔn)語言。雖然它不是標(biāo)準(zhǔn)通用標(biāo)記語言(SGML)的子集，但與它有著某種程度上的關(guān)聯(lián)。SGML是一種文檔格式語言表示方法。</P>

<Aname=Consistency>多樣性和統(tǒng)一性</A><BR><P>萬事萬物都離不開多樣性和統(tǒng)一性這樣一條基本準(zhǔn)則。也就是說，所有的事物都可以融合成一個整體，同時，又保持自己獨特的與眾不同的一面。站點的獨特性恰恰來源于它的一致性。顏色、字體、分欄布局以及其他設(shè)計元素應(yīng)在站點的每個部分都保持一致。</P><BR><BR><BR><BR><BR><BR></BODY></HTML>單擊55鏈接到另一文檔中某個特定位置<HTML><HEAD><TITLE>主文檔</TITLE></HEAD><BODY>

<AHREF=副文檔.html#Internet>互聯(lián)網(wǎng)</A><BR><BR>

<AHREF=副文檔.html#HTML>HTML簡介</A><BR><BR>

<AHREF=副文檔.html#Consistency>多樣性和統(tǒng)一性</A></BODY></HTML>

單擊56鏈接到另一文檔中某個特定位置<HTML><HEAD><TITLE>副文檔</TITLE></HEAD><BODY>

<Aname=Internet>互聯(lián)網(wǎng)</A><BR><P>互聯(lián)網(wǎng)是網(wǎng)絡(luò)的網(wǎng)絡(luò)。也就是說，計算機網(wǎng)絡(luò)可以跨越國家甚至全球的范圍連接到其他網(wǎng)絡(luò)。世界上所有的計算機都可以通過TCP/IP傳輸協(xié)議綁定在一起。</P>

<Aname=HTML>HTML簡介</A><BR><P>超文本標(biāo)記語言是Web用來創(chuàng)建和識別文檔的標(biāo)準(zhǔn)語言。雖然它不是標(biāo)準(zhǔn)通用標(biāo)記語言(SGML)的子集，但與它有著某種程度上的關(guān)聯(lián)。SGML是一種文檔格式語言表示方法。</P>

<Aname=Consistency>多樣性和統(tǒng)一性</A><BR><P>萬事萬物都離不開多樣性和統(tǒng)一性這樣一條基本準(zhǔn)則。也就是說，所有的事物都可以融合成一個整體，同時，又保持自己獨特的與眾不同的一面。站點的獨特性恰恰來源于它的一致性。顏色、字體、分欄布局以及其他設(shè)計元素應(yīng)在站點的每個部分都保持一致。</P><BR><BR><BR><BR><BR><BR