網(wǎng)頁(yè)制作初學(xué)_第1頁(yè)
網(wǎng)頁(yè)制作初學(xué)_第2頁(yè)
網(wǎng)頁(yè)制作初學(xué)_第3頁(yè)
網(wǎng)頁(yè)制作初學(xué)_第4頁(yè)
網(wǎng)頁(yè)制作初學(xué)_第5頁(yè)
已閱讀5頁(yè)，還剩46頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

網(wǎng)頁(yè)制作初學(xué)第一頁(yè)，共五十一頁(yè)，編輯于2023年，星期三第1章網(wǎng)頁(yè)制作基礎(chǔ)Web和瀏覽器Web的特點(diǎn)和結(jié)構(gòu)Web最大的特點(diǎn)是使用了超文本（Hypertext）WWW采用C/S（客戶機(jī)/服務(wù)器）工作模式在瀏覽器和服務(wù)器之間應(yīng)用HTTP（HyperTextTransferProtocol，超文本傳輸協(xié)議）作為網(wǎng)絡(luò)應(yīng)用層通信協(xié)議第二頁(yè)，共五十一頁(yè)，編輯于2023年，星期三URL

Internet上所有的資源都有一個(gè)唯一的URL地址，一般將URL地址稱為網(wǎng)址。

URL的完整格式如下：協(xié)議://主機(jī)名（或IP地址）：端口號(hào)/路徑名/文件名第三頁(yè)，共五十一頁(yè)，編輯于2023年，星期三4【例】幾個(gè)URL的例子.

（1），用http協(xié)議和缺省端口號(hào)（80）訪問(wèn)微軟公司服務(wù)器。這里沒(méi)有指定路徑和文件名，所以訪問(wèn)的結(jié)果是把一個(gè)缺省主頁(yè)送給瀏覽器。

（2）/pub/ms-windows/winvn926.zip，用FTP協(xié)議訪問(wèn)北京大學(xué)FTP服務(wù)器上路徑名為pub/ms-windows、文件名為winvn926.zip的文件。第四頁(yè)，共五十一頁(yè)，編輯于2023年，星期三5（3）:8001///uu-gna/index.html，從運(yùn)行在端口號(hào)8001的服務(wù)器上訪問(wèn)index.html主頁(yè)。（4)/Addressing/URL/5-BNF.html#httpaddress，訪問(wèn)服務(wù)器上Addressing/URL目錄下的5-BNF.html網(wǎng)頁(yè)文件中錨點(diǎn)標(biāo)識(shí)為httpaddress的地方。第五頁(yè)，共五十一頁(yè)，編輯于2023年，星期三瀏覽器概述分類InternetExplorerNetscapeNavigatorMosaic等專業(yè)瀏覽器以及一些以上述瀏覽器為內(nèi)核的專用瀏覽器。

其中使用最廣泛的是Microsoft出品的InternetExplorer6.0（簡(jiǎn)稱IE6）。第六頁(yè)，共五十一頁(yè)，編輯于2023年，星期三IE6的界面標(biāo)題欄工具欄菜單欄地址欄狀態(tài)欄瀏覽窗口第七頁(yè)，共五十一頁(yè)，編輯于2023年，星期三認(rèn)識(shí)網(wǎng)站第八頁(yè)，共五十一頁(yè)，編輯于2023年，星期三門戶網(wǎng)站

這類網(wǎng)站是一種綜合性網(wǎng)站，涉及領(lǐng)域非常廣泛，包含文學(xué)、音樂(lè)、影視、體育、新聞和娛樂(lè)等方方面面的內(nèi)容，具有論壇、搜索和短信等功能。

現(xiàn)在國(guó)內(nèi)較著名的門戶網(wǎng)站有搜狐（）網(wǎng)易（）等。第九頁(yè)，共五十一頁(yè)，編輯于2023年，星期三個(gè)人網(wǎng)站個(gè)人網(wǎng)站具有較強(qiáng)個(gè)性化，是以個(gè)人名義開(kāi)發(fā)創(chuàng)建的網(wǎng)站，其內(nèi)容、樣式、風(fēng)格等都是非常有個(gè)性的。第十頁(yè)，共五十一頁(yè)，編輯于2023年，星期三專業(yè)網(wǎng)站這類網(wǎng)站具有很強(qiáng)的專業(yè)性，通常只涉及某一個(gè)領(lǐng)域，內(nèi)容專業(yè)。如榕樹(shù)下網(wǎng)站（）即是一個(gè)專業(yè)文學(xué)網(wǎng)站。第十一頁(yè)，共五十一頁(yè)，編輯于2023年，星期三職能網(wǎng)站職能網(wǎng)站具有專門的功能，如政府職能網(wǎng)站等。目前逐漸興起的電子商務(wù)網(wǎng)站也屬于這類網(wǎng)站，較有名的電子商務(wù)網(wǎng)站有淘寶（）、卓越網(wǎng)（）和當(dāng)當(dāng)網(wǎng)上書(shū)店（）等。第十二頁(yè)，共五十一頁(yè)，編輯于2023年，星期三13認(rèn)識(shí)網(wǎng)頁(yè)Flash動(dòng)畫導(dǎo)航欄GIF動(dòng)畫文字表單圖片超級(jí)鏈接第十三頁(yè)，共五十一頁(yè)，編輯于2023年，星期三網(wǎng)頁(yè)中的元素第十四頁(yè)，共五十一頁(yè)，編輯于2023年，星期三網(wǎng)頁(yè)制作的相關(guān)知識(shí)HTML語(yǔ)言概述

是一種超文本標(biāo)記語(yǔ)言，作為一種網(wǎng)頁(yè)編輯語(yǔ)言，易學(xué)易懂。第十五頁(yè)，共五十一頁(yè)，編輯于2023年，星期三1）HTML網(wǎng)頁(yè)HTML網(wǎng)頁(yè)通常是由三部分內(nèi)容組成的：版本信息、網(wǎng)頁(yè)標(biāo)題（HEAD）和文檔主體（BODY）。

下面就是網(wǎng)頁(yè)結(jié)構(gòu)的總體框架：<!HTML網(wǎng)頁(yè)版本信息說(shuō)明><HTML><HEAD><!標(biāo)題標(biāo)記、屬性及其內(nèi)容></HEAD><BODY><!主體標(biāo)記、屬性及其內(nèi)容></BODY></HTML>第十六頁(yè)，共五十一頁(yè)，編輯于2023年，星期三（1）版本信息版本信息位于HTML網(wǎng)頁(yè)文件的第一行（2）HTML文件標(biāo)記大部分網(wǎng)頁(yè)文件都是以<HTML>標(biāo)記開(kāi)始的，在文件的結(jié)尾處又以</HTML>結(jié)束（3）頭部信息

HEAD標(biāo)記之間是HTML文檔的頭部，用來(lái)標(biāo)明當(dāng)前文檔的有關(guān)信息

在HEAD標(biāo)記之間，使用頻率最高的標(biāo)記就是TITLE，它用于定義顯示在瀏覽器標(biāo)題欄的文檔標(biāo)題。第十七頁(yè)，共五十一頁(yè)，編輯于2023年，星期三【例】給網(wǎng)頁(yè)設(shè)置“勵(lì)志學(xué)社”的文檔標(biāo)題，可在頭部輸入以下代碼：<TITLE>勵(lì)志學(xué)社</TITLE>第十八頁(yè)，共五十一頁(yè)，編輯于2023年，星期三（4）主體標(biāo)記網(wǎng)頁(yè)的主體是“<BODY>……</BODY>”標(biāo)記對(duì)作用的范圍

<BODY>標(biāo)記用于定義HTML文檔主體的開(kāi)始，它能夠設(shè)置網(wǎng)頁(yè)的背景圖像、背景顏色、鏈接顏色和網(wǎng)頁(yè)邊距等屬性，其基本用法如下所示：<BODYBackground="URL"Bgclolr=ColorBgpropeties=FixedLeftmargin=nLink=ColorAlink=ColorText=ColorTopmargin=nVlink=Color>

Bgcolor為背景顏色。關(guān)于顏色的值后面會(huì)詳細(xì)介紹。Text為不包含超級(jí)鏈接的文字顏色。

Link為超級(jí)鏈接文字的顏色。

Alink為正被點(diǎn)擊的超級(jí)鏈接文字的顏色。第十九頁(yè)，共五十一頁(yè)，編輯于2023年，星期三

Leftmargin、Topmargin用于設(shè)置網(wǎng)頁(yè)的左邊距和上邊框，它們是以像素為單位【例1】將網(wǎng)頁(yè)的上邊距和左邊距分別設(shè)置為40和30個(gè)像素的寬度，使用黑色文本、白色背景，未訪問(wèn)的鏈接源采用藍(lán)色，已訪問(wèn)的鏈接源標(biāo)記為暗紅色。<BODYBackground="moom.gif"Bgcolor="White"Bgproperties=FixedLeftmargin=30Link="Blue"Text="Black"Topmargin=40Vlink="Maroon">

Vlink為已經(jīng)點(diǎn)擊過(guò)的超級(jí)鏈接文字的顏色。

Background設(shè)置，如果設(shè)置了背景圖片，圖片會(huì)覆蓋已經(jīng)設(shè)置的顏色。第二十頁(yè)，共五十一頁(yè)，編輯于2023年，星期三2）XML語(yǔ)言

XML（eXtensibleMarkupLanguage）被稱作是下一代的網(wǎng)頁(yè)標(biāo)記語(yǔ)言，也是采用各種標(biāo)記來(lái)形成網(wǎng)頁(yè)的源代碼。

XML中包括可擴(kuò)展格式語(yǔ)言XSL(ExtensibleStyleLanguage)和可擴(kuò)展鏈接語(yǔ)言XLL(ExtensibleLinkingLanguage)。第二十一頁(yè)，共五十一頁(yè)，編輯于2023年，星期三3）

靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)靜態(tài)網(wǎng)頁(yè)指基本上全部使用HTML語(yǔ)言制作的網(wǎng)頁(yè)，頁(yè)面的內(nèi)容是固定不變的。動(dòng)態(tài)網(wǎng)頁(yè)（DynamicHTML，DHTML）利用JavaScript，CSS(層疊樣式表)及其它類似的語(yǔ)言如VBScript等與HTML進(jìn)行有機(jī)的結(jié)合來(lái)使靜態(tài)的HTML網(wǎng)頁(yè)變成動(dòng)態(tài)。第二十二頁(yè)，共五十一頁(yè)，編輯于2023年，星期三4）Web服務(wù)器端程序?qū)I(yè)的網(wǎng)站都是建立在使用數(shù)據(jù)庫(kù)的基礎(chǔ)上的，要將這些數(shù)據(jù)庫(kù)變成可以通過(guò)瀏覽器顯示和操作的Web頁(yè)面，就要編寫服務(wù)器端的程序。用戶向服務(wù)器傳送提交的表單（個(gè)人信息、選擇等）需要在服務(wù)器端進(jìn)行記錄、篩選等處理。大量的數(shù)據(jù)庫(kù)查詢、修改處理也需要服務(wù)器端程序的支持。目前常用的服務(wù)器端編程技術(shù)主要有CGI、ASP、PHP、JSP等，不同的技術(shù)需要不同的系統(tǒng)環(huán)境支持。第二十三頁(yè)，共五十一頁(yè)，編輯于2023年，星期三

網(wǎng)頁(yè)制作的基本方法制作網(wǎng)頁(yè)的基本步驟常用的網(wǎng)頁(yè)制作工具有Frontpage、Dreamweaver等。第二十四頁(yè)，共五十一頁(yè)，編輯于2023年，星期三網(wǎng)頁(yè)制作的原則第二十五頁(yè)，共五十一頁(yè)，編輯于2023年，星期三制作網(wǎng)頁(yè)時(shí)要注意的問(wèn)題第二十六頁(yè)，共五十一頁(yè)，編輯于2023年，星期三開(kāi)始網(wǎng)頁(yè)制作第二十七頁(yè)，共五十一頁(yè)，編輯于2023年，星期三MacromediaStudioMX2004

MacromediaStudioMX2004是目前應(yīng)用最廣泛的網(wǎng)頁(yè)制作工具組件，使用方便、功能齊全，Dreamweaver、Flash、Fireworks被稱作“網(wǎng)頁(yè)三劍客”。在Dreamweaver里用豐富的層疊樣式表制作耐看，專業(yè)的網(wǎng)站。Fireworks通過(guò)自動(dòng)變形，用動(dòng)的效果，圖片編輯工具和拖拽工具能傳送較精彩的Fireworks圖片。

第二十八頁(yè)，共五十一頁(yè)，編輯于2023年，星期三Dreamweave

8的菜單共有10個(gè)，即文件、編輯、視圖、插入、修改、文本、命令、站點(diǎn)、窗口和幫助。其中，編輯菜單里提供了對(duì)Dreamweaver菜單中[首選參數(shù)]的訪問(wèn)。文件：用來(lái)管理文件。例如新建，打開(kāi)，保存，另存為，導(dǎo)入，輸出打印等。

編輯：用來(lái)編輯文本。例如剪切，復(fù)制，粘貼，查找，替換和參數(shù)設(shè)置等。

查看：用來(lái)切換視圖模式以及顯示、隱藏標(biāo)尺、網(wǎng)格線等輔助視圖功能。

第二十九頁(yè)，共五十一頁(yè)，編輯于2023年，星期三插入：用來(lái)插入各種元素，例如圖片、多媒體組件，表格、框架及超級(jí)鏈接等。

修改：具有對(duì)頁(yè)面元素修改的功能，例如在表格中插入表格，拆分、合并單元格，對(duì)其對(duì)象等。

文本：用來(lái)對(duì)文本操作，例如設(shè)置文本格式等。

命令：所有的附加命令項(xiàng)

站點(diǎn)：用來(lái)創(chuàng)建和管理站點(diǎn)

窗口：用來(lái)顯示和隱藏控制面板以及切換文檔窗口

幫助：聯(lián)機(jī)幫助功能。例如按下F1鍵，就會(huì)打開(kāi)電子幫助文本第三十頁(yè)，共五十一頁(yè)，編輯于2023年，星期三思考題1.1什么是WWW？什么是網(wǎng)頁(yè)？1.2一個(gè)完整的URL由哪幾部分組成？舉出幾個(gè)URL的例子。1.3如何設(shè)置IE的主頁(yè)？如何用IE收藏一個(gè)網(wǎng)頁(yè)？1.4網(wǎng)頁(yè)中一般都使用了哪些技術(shù)？1.5MacromediaStudioMX2004有哪幾部分組成？第三十一頁(yè)，共五十一頁(yè)，編輯于2023年，星期三1站點(diǎn)設(shè)置站點(diǎn)的概念規(guī)劃站點(diǎn)結(jié)構(gòu)創(chuàng)建站點(diǎn)第三十二頁(yè)，共五十一頁(yè)，編輯于2023年，星期三站點(diǎn)的概念多個(gè)網(wǎng)頁(yè)文檔通過(guò)各種鏈接關(guān)聯(lián)起來(lái)就構(gòu)成了站點(diǎn)，站點(diǎn)可以小到一個(gè)網(wǎng)頁(yè)，也可以大到整個(gè)網(wǎng)站。DreamweaverMX2004提供了3類站點(diǎn)：本地站點(diǎn)、遠(yuǎn)程站點(diǎn)和測(cè)試站點(diǎn)。用戶可通過(guò)本地站點(diǎn)和遠(yuǎn)程站點(diǎn)在本地磁盤和Web服務(wù)器之間傳輸文件，測(cè)試站點(diǎn)可用于對(duì)動(dòng)態(tài)站點(diǎn)的測(cè)試。 本地站點(diǎn) 遠(yuǎn)程站點(diǎn) 測(cè)試站點(diǎn)第三十三頁(yè)，共五十一頁(yè)，編輯于2023年，星期三規(guī)劃站點(diǎn)結(jié)構(gòu)設(shè)計(jì)站點(diǎn)的必要前提是規(guī)劃站點(diǎn)結(jié)構(gòu)。規(guī)劃站點(diǎn)結(jié)構(gòu)是指利用不同的文件夾將不同的網(wǎng)頁(yè)內(nèi)容分門別類地保存，合理地組織站點(diǎn)結(jié)構(gòu)，可提高工作效率，加快對(duì)站點(diǎn)的設(shè)計(jì)。在制作站點(diǎn)時(shí)通常先在本地磁盤上創(chuàng)建一個(gè)文件夾，將所有在制作過(guò)程中創(chuàng)建和編輯的網(wǎng)頁(yè)內(nèi)容都保存在該文件夾中。在發(fā)布站點(diǎn)時(shí)，直接將這些文件夾上傳到Web服務(wù)器上即可。如果站點(diǎn)內(nèi)容較多或站點(diǎn)較大，則還需建立子文件夾以存放不同類型的網(wǎng)頁(yè)內(nèi)容。第三十四頁(yè)，共五十一頁(yè)，編輯于2023年，星期三在站點(diǎn)規(guī)劃過(guò)程中，需使用合理的文件名稱、文件夾名稱。通常在命名時(shí)，可以采用與其內(nèi)容相同的英文或拼音進(jìn)行命名，應(yīng)避免使用長(zhǎng)文件名和中文。制作網(wǎng)頁(yè)所需的圖片或動(dòng)畫等文件的存放位置也是規(guī)劃站點(diǎn)結(jié)構(gòu)時(shí)應(yīng)考慮的。若是大型站點(diǎn)，可分別創(chuàng)建相應(yīng)的文件夾在各個(gè)類別的文件夾下，如在站點(diǎn)根目錄下創(chuàng)建一個(gè)名稱為picture的文件夾用以存放主頁(yè)中用到的圖片和動(dòng)畫。如果站點(diǎn)內(nèi)容較少，可以只在站點(diǎn)的根目錄下創(chuàng)建一個(gè)文件夾。規(guī)劃站點(diǎn)結(jié)構(gòu)第三十五頁(yè)，共五十一頁(yè)，編輯于2023年，星期三【實(shí)例1】創(chuàng)建一個(gè)站點(diǎn)使用菜單“站點(diǎn)”“管理站點(diǎn)”打開(kāi)站點(diǎn)管理對(duì)話框，進(jìn)行操作創(chuàng)建站點(diǎn)第三十六頁(yè)，共五十一頁(yè)，編輯于2023年，星期三使用“高級(jí)”方式定義站點(diǎn)

在“定義站點(diǎn)”向?qū)нM(jìn)行的任意一個(gè)步驟，選擇對(duì)話框上部的“高級(jí)”標(biāo)簽，可打開(kāi)高級(jí)站點(diǎn)定義對(duì)話框。第三十七頁(yè)，共五十一頁(yè)，編輯于2023年，星期三2文本與列表控制第三十八頁(yè)，共五十一頁(yè)，編輯于2023年，星期三文本與列表控制第三十九頁(yè)，共五十一頁(yè)，編輯于2023年，星期三問(wèn)題：文本中輸入空格1）【工具箱】-【文本】-【不換行空格】2）直接在代碼中粘貼空格符號(hào)3）全角模式下直接輸入4）【編輯】-【首選參數(shù)】-【常規(guī)】：選中“允許多個(gè)連續(xù)的空格”第四十頁(yè)，共五十一頁(yè)，編輯于2023年，星期三3鏈接的使用第四十一頁(yè)，共五十一頁(yè)，編輯于2023年，星期三說(shuō)明目標(biāo)：_blank：打開(kāi)一個(gè)新窗口顯示目標(biāo)網(wǎng)頁(yè)。_parent：目標(biāo)網(wǎng)頁(yè)的內(nèi)容在父框架窗口中顯示。_self：目標(biāo)網(wǎng)頁(yè)的內(nèi)容在當(dāng)前所在框架窗口中顯示。_top：目標(biāo)網(wǎng)頁(yè)的內(nèi)容在最頂層框架窗口中顯示代碼：鏈接文字顏色的設(shè)置通過(guò)【修改】-【頁(yè)面屬性】-【外觀】來(lái)設(shè)置的3鏈接的使用第四十二頁(yè)，共五十一頁(yè)，編輯于2023年，星期三3鏈接的使用設(shè)置錨第四十三頁(yè)，共五十一頁(yè)，編輯于2023年，星期三4插入圖像圖像的格式用于網(wǎng)頁(yè)的圖像通常只有GIF、JPE和PNG3種格式。插入圖像的步驟如下：（1）把工具欄切換到“常用”狀態(tài)，然后單擊“圖像：圖象”按鈕（2）選擇要插入的圖像文件，在文件列表中單擊一個(gè)圖象文件時(shí)，圖象預(yù)覽區(qū)會(huì)顯示這個(gè)圖象的縮略圖。（3）單擊確定按鈕，如果圖像文件在站點(diǎn)文件夾中，就會(huì)直接插入到網(wǎng)頁(yè)中，同時(shí)在編輯窗口顯示出圖像。第四十四頁(yè)，共五十一頁(yè)，編輯于2023年，星期三設(shè)置圖像的基本屬性練習(xí)：改變圖像大小圖文混排垂直邊距和水平邊距圖像替代圖像邊框第四十五頁(yè)，共五十一頁(yè)，編輯于2023年，星期三圖片超級(jí)鏈接和圖像地圖1.圖片超級(jí)鏈接2.圖像地圖

如果想在一個(gè)圖像的不同位置上點(diǎn)擊，就跳轉(zhuǎn)到相應(yīng)的目標(biāo)網(wǎng)頁(yè)，就需要使用圖像地圖。（1）設(shè)置矩形熱區(qū)（2）設(shè)置圓形熱區(qū)（3）設(shè)置多邊形熱區(qū)第四十六頁(yè)，共五十一頁(yè)，編輯于2023年，星期三

單擊工具欄上的圖像按鈕旁邊的小三角形，在下拉式菜單中選擇圖像占位符按鈕

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論