網(wǎng)頁制作與網(wǎng)站建設(shè)初學(xué)者必看教程(免費(fèi)下載)_第1頁
網(wǎng)頁制作與網(wǎng)站建設(shè)初學(xué)者必看教程(免費(fèi)下載)_第2頁
網(wǎng)頁制作與網(wǎng)站建設(shè)初學(xué)者必看教程(免費(fèi)下載)_第3頁
網(wǎng)頁制作與網(wǎng)站建設(shè)初學(xué)者必看教程(免費(fèi)下載)_第4頁
網(wǎng)頁制作與網(wǎng)站建設(shè)初學(xué)者必看教程(免費(fèi)下載)_第5頁
已閱讀5頁，還剩87頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第1章網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)2知識技能要點(diǎn)互聯(lián)網(wǎng)、Web瀏覽器網(wǎng)頁的類型網(wǎng)頁設(shè)計(jì)的基本流程31.1互聯(lián)網(wǎng)技術(shù)隨著Internet／Intranet的不斷普及和發(fā)展，越來越多的公司、企業(yè)和個(gè)人正在開始建設(shè)自己的Web站點(diǎn)、編寫Web網(wǎng)頁，以一種新的方式向外界發(fā)布信息，供人們?nèi)g覽、閱讀和應(yīng)用。因此，網(wǎng)頁制作已經(jīng)受到越來越多的專業(yè)人員的重視。4網(wǎng)頁網(wǎng)頁是指通過Internet向全球提供信息的一些文檔文件，包括個(gè)人信息、商業(yè)、娛樂等內(nèi)容。567網(wǎng)頁是在瀏覽因特網(wǎng)時(shí)看到的一個(gè)個(gè)的畫面；文字、圖片和動畫等網(wǎng)站則是指存放在網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體，它包含一個(gè)或多個(gè)網(wǎng)頁，這些頁以超鏈接方式連接在一起，形成一個(gè)整體，描述一組完整的信息。首頁(主頁):構(gòu)成網(wǎng)站的第一頁8網(wǎng)頁是利用超文本標(biāo)記語言HTML(HyperTextMarkupLanguge)編寫的，存放在Internet／Intranet上的Web服務(wù)器中，供訪問者使用瀏覽器來閱讀。利用HTML語言編寫出來的網(wǎng)頁又稱為超文本，即網(wǎng)頁中包含有文本、圖形、聲音、圖像和超鏈接(HyperLink)等多媒體信息。通常我們看到的網(wǎng)頁，都是以

htm

或

html

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

HTML

文件。9第26次中國互聯(lián)網(wǎng)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告(2010.7.15)2006.12-2010.6中國網(wǎng)站規(guī)模變化101.1.2

互聯(lián)網(wǎng)的應(yīng)用技術(shù)現(xiàn)在的網(wǎng)絡(luò)資源及各種業(yè)務(wù)、應(yīng)用日趨豐富。電子政務(wù)、遠(yuǎn)程教育、遠(yuǎn)程醫(yī)療、移動短信、在線數(shù)字內(nèi)容等網(wǎng)上各類業(yè)務(wù)日新月異，電子商務(wù)交易額快速增長，信息交流更加便捷高效。11Internet提供的服務(wù)：WWW服務(wù)（網(wǎng)上沖浪）電子郵件服務(wù)（Email）網(wǎng)上傳呼（OICQ、QQ）文件傳輸（FTP）BBS12萬維網(wǎng)（WWW）

WWW

是WorldWideWeb（環(huán)球信息網(wǎng)）的縮寫,簡稱為Web，中文名字為“萬維網(wǎng)”。通過萬維網(wǎng)，人們可以使用很簡單的方法，就可以很迅速方便地取得豐富的信息資料。

是當(dāng)前Internet上最受歡迎、最為流行、最新的信息檢索服務(wù)系統(tǒng)。13蒂姆·伯納斯-李（TimBerners-Lee）于1990年創(chuàng)建了WorldWideWeb(WWW)。Web最初的構(gòu)想和研發(fā)的目的是為了滿足在世界各個(gè)大學(xué)、不同研究所工作的科學(xué)家信息共享的需求。WWW的基本概念是把所有個(gè)人計(jì)算機(jī)、計(jì)算機(jī)網(wǎng)絡(luò)和超文本整合成一個(gè)功效強(qiáng)大并且易于使用的全球信息系統(tǒng)。14“互聯(lián)網(wǎng)之父”151.2瀏覽器16瀏覽器

瀏覽器是獲取WWW服務(wù)的基礎(chǔ)，它的基本功能就是對網(wǎng)頁進(jìn)行顯示，目前使用最廣泛的瀏覽器是微軟公司推出的InternetExplorer瀏覽器，還有火狐瀏覽器Firefox等等。1718瀏覽器之戰(zhàn)191.2.3網(wǎng)頁制作工具1.記事本20步驟如下：單擊“開始”按鈕，選擇“程序/附件/記事本”。在“記事本”的窗口中輸入HTML代碼。輸入代碼結(jié)束后，選擇“文件”菜單中的“保存”或“另存為”命令，則彈出圖1-1所示的另存為對話框。在“文件名”框中鍵入Web頁的名稱，注意文件名必須以.html或.htm為擴(kuò)展名。如果需要，應(yīng)在“保存在”列表框中定位到特定的目錄。單擊“保存”按鈕，即創(chuàng)建了一個(gè)Web頁。見圖1-2。進(jìn)入到你的文件架，單擊，進(jìn)行測試，你的HTML的網(wǎng)頁就完成了。21“另存為”對話框22單擊ie圖標(biāo)，進(jìn)行測試23例：<html><head><title>網(wǎng)站制作</title></head><body>文本內(nèi)容</body></html>24運(yùn)行效果如圖2526一個(gè)典型的HTML文本的基本結(jié)構(gòu)形式如下：<html>

<head>

<title>網(wǎng)頁標(biāo)題</title>

</head>

<body>網(wǎng)頁的主要內(nèi)容

</body>

</html>

結(jié)束標(biāo)記開始標(biāo)記文件頭文件主體28HTML標(biāo)簽，（HTMLTag）都是由一對“<>”括起來的，成對出現(xiàn)。<標(biāo)記名></標(biāo)記名>表示標(biāo)記的開始和結(jié)束，例如(<html></html>)HTML語言正是通過這些標(biāo)簽來設(shè)置網(wǎng)頁的結(jié)構(gòu)、網(wǎng)頁元素的位置和類別，網(wǎng)頁元素的顯示效果等。29標(biāo)記符屬性

屬性是用來描述對象特征的特性。例如，一個(gè)人的身高、體重就是人這個(gè)對象的屬性。在HTML中，所有的屬性都放置在開始標(biāo)記符里，多個(gè)屬性之間用空格分開。如：<bodybgcolor=“blue“text=“white”>

30關(guān)于顏色顏色值是一個(gè)關(guān)鍵字或一個(gè)RGB格式的數(shù)字。aqua，black，blue，fuchsia,gray，green，lime，maroon，navy，olive，purple，red，silver，teal，white，yellow31在HTML中對于顏色的定義可以用6位十六進(jìn)制數(shù)。電腦屏幕的色彩是由rgb（紅、綠、藍(lán)）三種色光所合成的，通過調(diào)整這三個(gè)基色就可以調(diào)配出其它的顏色。每2位數(shù)代表一種顏色的濃度，三種顏色的順序?yàn)榧t、綠、藍(lán)，00代表顏色濃度最小，F(xiàn)F代表顏色濃度最大。#000000代表純黑、#FFFFFF代表純白、32d圖中所示是部分顏色的RGB代碼:

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

<bodybgcolor=“#FFFF33”>332.網(wǎng)頁編輯器用FrontPage或者Dreamweaver工具FrontPage和Dreamweaver是最著名的網(wǎng)頁編輯工具。FrontPage是微軟的Office中的一件組件，是入門時(shí)很容易掌握的工具。342.網(wǎng)頁編輯器Dreamweaver是Macromedia公司出品的網(wǎng)頁三劍客其中的一個(gè)軟件，是專業(yè)網(wǎng)頁制作軟件。35Dreamweaver36美化網(wǎng)頁的基本工具PhotoshopPhotoshop是由Adobe公司開發(fā)的圖形處理軟件，它是目前公認(rèn)的PC機(jī)上最好的通用平面美術(shù)設(shè)計(jì)軟件，它功能完善、性能穩(wěn)定、使用方便，所以在幾乎所有的廣告、出版、軟件公司，Photoshop都是首選的平面制作工具。37FireworksFireworks是由Macromedia公司開發(fā)的圖形處理工具。第一套專門為制作網(wǎng)頁圖形而設(shè)計(jì)的軟件，同時(shí)也是專業(yè)的網(wǎng)頁圖形設(shè)計(jì)及制作的解決方案。38FlashFlash是美國Macromedia公司開發(fā)Flash是交互式矢量圖和Web動畫的標(biāo)準(zhǔn)。使用Flash可創(chuàng)作出既漂亮又可改變尺寸的導(dǎo)航界面以及其它奇特的效果。它易學(xué)、易用，可以做出有很多動畫的網(wǎng)站。39401.2.4網(wǎng)頁的基本構(gòu)成元素

一個(gè)構(gòu)思奇妙、制作精美的網(wǎng)頁會使整個(gè)網(wǎng)站形象地位得到提高。網(wǎng)頁制作是一個(gè)可簡單、可復(fù)雜的過程。制作一個(gè)優(yōu)秀的網(wǎng)頁不僅需要有藝術(shù)的修養(yǎng)，懂得必要的網(wǎng)絡(luò)語言，還要對圖形圖像、音頻、視頻制作，傳輸技術(shù)等有很深刻的理解。41設(shè)計(jì)頁面時(shí)經(jīng)常使用的一些元素：文字圖形菜單按鈕、鏈接、表單、數(shù)據(jù)交換...背景表格顏色多媒體元素頁面布局421.文字（標(biāo)題、字號、字型...）文字是網(wǎng)頁發(fā)布信息所用的主要形式。在網(wǎng)頁中可以通過字體、顏色、底紋、邊框等來設(shè)置文本的屬性。431.文字（標(biāo)題、字號、字型...）在網(wǎng)頁制作中，文字都可以很方便地設(shè)置成各種字體和大小，文字不要太大，也不要使用過多的字體，中文文字使用宋體，9像素或者12像素左右即可，因?yàn)檫^大的字在顯示器顯示時(shí)，線條不夠平滑。另外，顏色也不要使用太多，以免讓人看起來眼花繚亂。Web本身對文本和字體的格式化能力并不強(qiáng)，在Web頁面中，可以指定文本尺寸、如果需要使用某種特殊字體，可以把這些字畫在圖片上，然后將圖片插入到頁面中。44452.圖形圖形（網(wǎng)頁上經(jīng)常使用的圖片格式：Jpg、Gif...），可以使用Photoshop、Firework等圖像處理工具制作完成。46GIF在顏色數(shù)很少(256)的情況下，產(chǎn)生的文件很小。JPG最主要的優(yōu)點(diǎn)是能支持上百萬種顏色，從而可以用來表現(xiàn)照片PNG可移值網(wǎng)絡(luò)圖形。Macromedia公司的Fireworks的默認(rèn)存盤格式就是PNG。它集合了GIF和JPG格式的優(yōu)點(diǎn)。473.交互功能交互功能（菜單按鈕、鏈接、表單、數(shù)據(jù)交換...），幫助瀏覽者在Web內(nèi)導(dǎo)航。484.多媒體元素多媒體元素：包括聲音、動畫、視頻片斷、背景音樂等。例如，動畫可以使用flash等工具制作完成。491.3網(wǎng)站的設(shè)計(jì)、建設(shè)501.3.2網(wǎng)站類型的劃分網(wǎng)站有很多種類型，如門戶型網(wǎng)站、電子商務(wù)網(wǎng)站、個(gè)人網(wǎng)站等等。如果依據(jù)傳達(dá)信息內(nèi)容的特點(diǎn)來進(jìn)行類型的劃分，可以分為以下6種形式：511.信息查詢類：像新浪、網(wǎng)易、搜狐等門戶網(wǎng)站。這類站點(diǎn)將為訪問者提供大量的信息，而且訪問量較大。522.大眾媒體類：具代表性的就屬各大門戶網(wǎng)站的新聞版塊，傳統(tǒng)媒體在網(wǎng)絡(luò)空間的拓展——報(bào)刊雜志的電子版。533.宣傳窗口類：宣傳窗口類型的網(wǎng)頁具有內(nèi)容專一，形式多樣的特點(diǎn)。尤其是企業(yè)的網(wǎng)頁，具有企業(yè)形象傳達(dá)的作用，可以看作CI設(shè)計(jì)的延伸。個(gè)人網(wǎng)站也成為這種類型的重要組成部分，因此格外受到重視。544.電子商務(wù)類：電子商務(wù)的出現(xiàn)使單向的信息傳送變成了雙向的交互服務(wù)，從真正意義上實(shí)現(xiàn)了網(wǎng)絡(luò)的交互性。555.交流平臺類：各種論壇、BBS、聊天室566.網(wǎng)絡(luò)社區(qū)類：即虛擬網(wǎng)上生活。從網(wǎng)上交流發(fā)展到網(wǎng)絡(luò)社區(qū)，網(wǎng)絡(luò)已成為人們生活、存在的新空間，在網(wǎng)絡(luò)社區(qū)可以充分的消遣、放松，獲得深入交往并享有充分自由的理想場所。571.3.3網(wǎng)站設(shè)計(jì)的基本流程1、整體規(guī)劃 例如，網(wǎng)站主題、風(fēng)格、頁面元素、邏輯結(jié)構(gòu)等。2、資料收集 例如，收集與主題相關(guān)的文字圖片資料，一些優(yōu)秀的頁面風(fēng)格，下載一些你喜歡的交互頁面，開放的源代碼等。58主頁頁面1頁面2頁面3頁面4頁面5頁面7頁面8一級標(biāo)題二級標(biāo)題頁面6如：5960如：主頁個(gè)人簡歷我的相冊作品展示家庭相冊心情隨筆個(gè)人相冊網(wǎng)站作品平面作品涂鴉作品611.3.3網(wǎng)站設(shè)計(jì)的基本流程3、頁面設(shè)計(jì)

根據(jù)事先規(guī)劃的結(jié)構(gòu)，利用平面圖片的形式設(shè)計(jì)你想要的最終效果。

624、網(wǎng)頁測試5、網(wǎng)頁上傳6、網(wǎng)站推廣與維護(hù)631.4.1Web站點(diǎn)主頁的基本成分

頁面標(biāo)題（說明網(wǎng)站的性質(zhì)與內(nèi)容）網(wǎng)站標(biāo)識LOGO都是被精心設(shè)計(jì)的,Logo的作用很多，最重要的就是表達(dá)網(wǎng)站的理念、便于人們識別，廣泛用于站點(diǎn)的連接、宣傳等。一個(gè)絕妙的Logo不但會使首頁驀然生輝，而且會成為整個(gè)網(wǎng)站的形象大使。頁眉（用來放置最希望瀏覽者看到的內(nèi)容）導(dǎo)航欄（欄目索引）內(nèi)容頁腳（聯(lián)系方式、版權(quán)信息等）64d站標(biāo)導(dǎo)航欄標(biāo)題65d頁腳信息區(qū)66d站標(biāo)導(dǎo)航欄標(biāo)題671.4.2

版式布局

整體布局合理化、有序化、整體化字體的大小、型號、字間距、行間距，以及配色等表現(xiàn)功能。網(wǎng)頁的版式設(shè)計(jì)有創(chuàng)造性、藝術(shù)性將文字、圖形圖像、色彩、動畫、視頻圖像等網(wǎng)頁的傳達(dá)要素，根據(jù)特定的內(nèi)容和主題，在網(wǎng)頁所限定的范圍中，運(yùn)用造型元素和形式原理進(jìn)行視覺的關(guān)聯(lián)與配置，從而將設(shè)計(jì)意圖以視覺形式表現(xiàn)出來。686970用表格排版，717273由于人們習(xí)慣于將視線從左到右、從上到下移動，因而視區(qū)中的不同位置注目程度不同。74網(wǎng)頁中最常見的構(gòu)圖布局75/層次分明76/portfolio/這個(gè)網(wǎng)站用了寬大的邊框分隔內(nèi)容和背景，在背景處布置了大面積的圖案。頁面的寬度符合閱讀習(xí)慣，而擴(kuò)展出來的背景又在視覺上飽滿了屏幕尺寸77/2023/2/178/intl/top/about/corporate/career/pages/businessareas.aspx2023/2/179SGIsilicongraphics,inc/2023/2/180網(wǎng)站內(nèi)不同頁面的設(shè)計(jì)風(fēng)格要有所統(tǒng)一。有些是色彩和布局都統(tǒng)一；有些則是布局統(tǒng)一，色彩跳躍。2023/2/181色彩和布局都統(tǒng)一2023/2/182布局不同而色調(diào)一致/2023/2/183布局相同，色彩跳躍2023/2/1842023/2/1852023/2/18687推薦學(xué)習(xí)網(wǎng)站之網(wǎng)頁素材網(wǎng)頁制作大寶庫/sucai/素材精品屋/index.asp黑馬網(wǎng)頁素材/遐思素材屋h

溫馨提示

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

評論

0/150

提交評論