2021學(xué)年第6課 我的網(wǎng)頁課文內(nèi)容ppt課件

這是一份2021學(xué)年第6課 我的網(wǎng)頁課文內(nèi)容ppt課件，共23頁。PPT課件主要包含了一什么是網(wǎng)頁，二網(wǎng)站設(shè)計要求，網(wǎng)站導(dǎo)航內(nèi)容，網(wǎng)頁設(shè)計的設(shè)計法則，版面設(shè)計布局等內(nèi)容，歡迎下載使用。
因特網(wǎng)起源于美國國防部高級研究計劃管理局建立的阿帕網(wǎng)。網(wǎng)站是指在因特網(wǎng)上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。簡單地說，網(wǎng)站是一種通訊工具，就像布告欄一樣，人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊，或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡(luò)服務(wù)。人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)絡(luò)服務(wù)。
許多公司都擁有自己的網(wǎng)站，他們利用網(wǎng)站來進行宣傳、產(chǎn)品資訊發(fā)布、招聘等等。隨著網(wǎng)頁制作技術(shù)的流行，很多個人也開始制作個人主頁，這些通常是制作者用來自我介紹、展現(xiàn)個性的地方。也有以提供網(wǎng)絡(luò)資訊為盈利手段的網(wǎng)絡(luò)公司，通常這些公司的網(wǎng)站上提供人們生活各個方面的資訊如時事新聞、旅游、娛樂、經(jīng)濟等
在因特網(wǎng)的早期，網(wǎng)站還只能保存單純的文本。經(jīng)過幾年的發(fā)展，當萬維網(wǎng)出現(xiàn)之后，圖像、聲音、動畫、視頻，甚至3D技術(shù)開始在因特網(wǎng)上流行起來，網(wǎng)站也慢慢地發(fā)展成我們現(xiàn)在看到的圖文并茂的樣子。通過動態(tài)網(wǎng)頁技術(shù)，用戶也可以與其他用戶或者網(wǎng)站管理者進行交流。也有一些網(wǎng)站提供電子郵件服務(wù)。
因特網(wǎng)與網(wǎng)絡(luò)和網(wǎng)站建設(shè)
網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺。通俗的說，網(wǎng)頁是由網(wǎng)站組成的頁面。 如果您只有域名和虛擬主機而沒有制作任何網(wǎng)頁的話，您的客戶仍舊無法訪問您的網(wǎng)站。 在互聯(lián)網(wǎng)上應(yīng)用最為廣泛的功能是網(wǎng)頁的瀏覽,瀏覽器窗口中顯示了一個頁面被稱為網(wǎng)頁.網(wǎng)頁中可以包括:文字\圖片\動畫\視頻\音頻等 網(wǎng)頁的學(xué)名稱作HTML文件，是一種可以在www網(wǎng)上傳輸，并被瀏覽器認識和翻譯成頁面顯示出來的文件。
(一)、建設(shè)網(wǎng)站前的市場分析
1、相關(guān)行業(yè)的市場是怎樣的,市場有什么樣的特點，是否能夠在互聯(lián)網(wǎng)上開展公司業(yè)務(wù)。 　　 　　2、市場主要競爭者分析，競爭對手上網(wǎng)情況及其網(wǎng)站策劃、功能作用。 　　3、公司自身條件分析、公司概況、市場優(yōu)勢，可以利用網(wǎng)站提升哪些競爭力，建設(shè)網(wǎng)站的能力（費用、技術(shù)、人力等）。
(二)、建設(shè)網(wǎng)站目的及功能定位
1、為什么要建立網(wǎng)站，是為了樹立企業(yè)形象，宣傳產(chǎn)品，進行電子商務(wù)，還是建立行業(yè)性網(wǎng)站？是企業(yè)的基本需要還是市場開拓的延伸？ 　　2、整合公司資源，確定網(wǎng)站功能。根據(jù)公司的需要和計劃，確定網(wǎng)站的功能類型： 企業(yè)型網(wǎng)站、應(yīng)用型網(wǎng)站、商業(yè)型網(wǎng)站（行業(yè)型網(wǎng)站）、電子商務(wù)型網(wǎng)站；企業(yè)網(wǎng)站又分為企業(yè)形象型、產(chǎn)品宣傳型、網(wǎng)上營銷型、客戶服務(wù)型、電子商務(wù)型等。 　　3、根據(jù)網(wǎng)站功能，確定網(wǎng)站應(yīng)達到的目的作用。 　　4、企業(yè)內(nèi)部網(wǎng)（Intranet）的建設(shè)情況和網(wǎng)站的可擴展性。
4、確定網(wǎng)站內(nèi)容的實現(xiàn)方式。如產(chǎn)品中心使用動態(tài)程序數(shù)據(jù)庫還是靜態(tài)頁面；營銷網(wǎng)絡(luò)是采用列表方式還是地圖展示
1、根據(jù)網(wǎng)站的目的確定網(wǎng)站的結(jié)構(gòu)導(dǎo)航。 　　一般企業(yè)型網(wǎng)站應(yīng)包括：公司簡介、企業(yè)動態(tài)、產(chǎn)品介紹、客戶服務(wù)、聯(lián)系方式、在線留言等基本內(nèi)容。更多內(nèi)容如：常見問題、營銷網(wǎng)絡(luò)、招賢納士、在線論壇、英文版等等。
2、根據(jù)網(wǎng)站的目的及內(nèi)容確定網(wǎng)站整合功能。 　　如FLASH引導(dǎo)頁、會員系統(tǒng)、網(wǎng)上購物系統(tǒng)、在線支付、問卷調(diào)查系統(tǒng)、在線支付、信息搜索查詢系統(tǒng)、流量統(tǒng)計系統(tǒng)等。
3、確定網(wǎng)站的結(jié)構(gòu)導(dǎo)航中的每個頻道的子欄目。 　　如公司簡介中可以包括：總裁致詞、發(fā)展歷程、企業(yè)文化、核心優(yōu)勢、生產(chǎn)基地、科技研發(fā)、合作伙伴、主要客戶、客戶評價等；客戶服務(wù)可以包括：服務(wù)熱線、服務(wù)宗旨、服務(wù)項目等。
1.網(wǎng)頁設(shè)計之精彩配色
顏色的使用在網(wǎng)頁制作中起著非常關(guān)鍵的作用，有很多網(wǎng)站以其成功的色彩搭配令人過目不忘。但是對于剛開始學(xué)習(xí)制作網(wǎng)頁的人來說，往往不容易駕馭好網(wǎng)頁的顏色搭配。
著名網(wǎng)站的顏色搭配方法，讓我們的學(xué)習(xí)少走彎路，快速提高我們的網(wǎng)頁制作水平
(1)、網(wǎng)頁顏色原理和象征意義
紅色：熱情、奔放、喜悅、莊嚴 　　 黃色：高貴、富有、燦爛、活潑 　　 黑色：嚴肅、夜晚、沉著 　　 白色：純潔、簡單、潔凈 　　 藍色：天空、清爽、科技 　　 綠色：植物、生命、生機 　　 灰色：莊重、沉穩(wěn) 　　 紫色：浪漫、富貴 　　 棕色：大地、厚樸
介紹十個配色較好的網(wǎng)站，大家可以學(xué)習(xí)和借鑒一下，培養(yǎng)對色彩的敏感以及獨到的審美能力。 1）這是個大型的NBA網(wǎng)站。通常我們經(jīng)常看到的此類網(wǎng)站以白色為背景，但是這個網(wǎng)站卻用灰黑色RGB為（48，48，48/#333333）（以下顏色都用RGB表示），文章標題用色為RGB為（203，201，153/#CCCC99），菜單使用的RGB為（112，119，112/#707770）。這樣的配色可以顯示獨特的個性，又不失大型網(wǎng)站的風(fēng)采。
2）下面是一個娛樂類的綜合性網(wǎng)站UGO，他的配色方案是背景色為黑色RGB為（0，0，0）中嵌套RGB（0，0，82），字體白色RGB（255,255,255）,菜單為RGB（77,114,159）。這樣的雖以黑藍為主色調(diào)，但是配以漂亮的圖片，給人的感覺是生機盎然，充滿了互動色彩和青春氣息。如圖2?！?
3）下面的這個網(wǎng)站是大名鼎鼎的微軟公司網(wǎng)站，微軟不僅軟件做的好，連網(wǎng)頁制作也是世界一流。他的每一個網(wǎng)頁都是制作的樣板。從網(wǎng)頁我們就可以看出微軟公司的風(fēng)格、作風(fēng)，以及雄厚的實力。背景顏色使用藍色RGB為（0，151，254），菜單為黑色RGB（0，0，11），菜單為灰色RGB（200，200，200），字體為黑色RGB（0，0，0），如圖3。
4)現(xiàn)在介紹的網(wǎng)站相對簡單，但是她的用色也別具匠心，現(xiàn)在我們來看一看，整體上使用的是白色RGB（255，255，255），輔助色為RGB（79，88，95），菜單色為RGB（48，64，64）和RGB（0，81，111）字體使用的是RGB（83，86，91）。雖然簡單，但顏色搭配非常的科學(xué)合理。如圖4
5）下面的網(wǎng)站采用黃色調(diào)為主，很體現(xiàn)公司的個性，現(xiàn)在我們就來看一看她的顏色搭配。主色調(diào)為黃色RGB為（255，199，48/#FFC730），輔助色調(diào)為RGB（49，102，46）字體為棕色RGB（153，103，0），中間再配以抽象的圖片，顯得個性十足但又不單調(diào)。如圖5
6）橘紅色如果運用得當?shù)脑捠且环N非常使用于網(wǎng)頁上的顏色。下面的這個網(wǎng)站就是一個非常著名的例子。他的主色調(diào)為RGB（255，151，0）輔助色調(diào)為RGB（255，103，4），菜單RGB為（252，200，0）。字體使用黑色RGB為（0，0，0）。此種配色顯得主人較為前衛(wèi)，色彩熱烈，給人的震懾力較強。如圖6
7）鮮紅色也是一種震撼感很強的顏色，如果搭配不當，也可能使網(wǎng)站沒有風(fēng)格和特點。下面的這個網(wǎng)站就是使用紅色比較好的網(wǎng)站。我們來看看他的顏色搭配。他使用的主色調(diào)是RGB（200，9，0），配以抽象的圖形，文字使用的是RGB（213，229，167）顯得美觀而不失獨特，大氣而不逼人。如圖7
8）下面介紹的這種色調(diào)是我們制作網(wǎng)頁的時候不會經(jīng)常用到的顏色，如果使用到你的網(wǎng)頁中，肯定會給人耳目一新的感覺。他的主色調(diào)為RGB（144，151，97）輔助色調(diào)為RGB（173，168，112）邊飾為黑色RGB（0，0，0）字體為黑色RGB（0，0，0）。這樣的搭配顯得風(fēng)格獨特，顏色和諧而莊重。如圖8
9）下面的設(shè)計更加的簡單化，但是顏色的使用使網(wǎng)頁并不呆板，反而讓人感覺到一股濃濃的生活和家庭氣氛，使人置身于美麗和愛中。他的主體是由兩種顏色構(gòu)成，分別是RGB（239，200，161）和RGB（201，254，200）。如此簡單，但是卻栩栩如生，躍然網(wǎng)上。如圖9
10）下面舉出這個例子是想證明一個道理——只要你有足夠的想象力，你就能夠設(shè)計出漂亮的網(wǎng)頁。目前在網(wǎng)上非常流行一句話就是網(wǎng)頁的搭配不要超過四種主要顏色，否則就有雜亂之感。下面的這個網(wǎng)站遠遠的超過了三種顏色，但是她并不失美麗。因此重要的還是色彩的駕馭能力。下面這個例子的菜單就使用了7種顏色，但是我們看到的網(wǎng)頁并不雜亂，相反感覺作者很有創(chuàng)意。如圖10
網(wǎng)頁設(shè)計的顏色搭配需要在實踐中不斷的摸索和不斷的創(chuàng)新，認真學(xué)習(xí)別人的先進方法和經(jīng)驗，可以快速的提高我們的制作水平?？梢哉f。網(wǎng)頁顏色搭配得當，成功也就走了一半。
就象傳統(tǒng)的報刊雜志編輯一樣，我們將網(wǎng)頁看作一張報紙，一本雜志來進行排版布局
布局，就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。
1、正常平衡---亦稱“勻稱”。多指左右、上下對照形式，主要強調(diào)秩序，能達到安定、誠實、信賴的效果。
2、異常平衡---即非對照形式，但也要平衡和韻律，當然都是不均整的，此種布局能達到強調(diào)性、不安性、高注目性的效果。
3、對比---所謂對比，不僅利用色彩、色調(diào)等技巧來作表現(xiàn)，在內(nèi)容上也可涉及古與今、新與舊、貧與富等對比。
4、凝視---所謂凝視是利用頁面中人物視線，使瀏覽者仿照跟隨的心理，以達到注視頁面的效果，一般多用明星凝視狀。
5、空白---空白有兩種作用，一方面對其他網(wǎng)站表示突出卓越，另一方面也表示網(wǎng)頁品?位的優(yōu)越感，這種表現(xiàn)方法對體顯網(wǎng)頁的格調(diào)十分有效。
6、盡量用圖片解說---此法對不能用語言說服、或用語言無法表達的情感，特別有效。圖片解說的內(nèi)容，可以傳達給瀏覽者的更多的心理因素。
7、網(wǎng)頁的白色背景太虛，則可以加些色快;
10、表格太規(guī)矩，可以改用導(dǎo)角試試。
9、左面文字過多，右面則可以插一張圖片保持平衡;
8、版面零散，可以用線條和符號串聯(lián);　
版面編排設(shè)計要求　　1.主次分明，中心突出。在一個頁面上，必然考慮視覺的中心，這個中心一般在屏幕的中央，或者在中間偏上的部位。因此，一些重要的文章和圖片一般可以安排在這個部位，在視覺中心以外的地方就可以安排那些稍微次要的內(nèi)容，這樣在頁面上就突出了重點，做到了主次有別。　　2.大小搭配，相互呼應(yīng)。較長的文章或標題，不要編排在一起，要有一定的距離，同樣，較短的文章，也不能編排在一起。對待圖片的安排也是這樣，要互相錯開，造成大小之間有一定的間隔，這樣可以使頁面錯落有致，避免重心的偏離?！　?.圖文并茂，相得益彰。文字和圖片具有一種相互補充的視覺關(guān)系，頁面上文字太多，就顯得沉悶，缺乏生氣。頁面上圖片太多，缺少文字，必然就會減少頁面的信息容量。因此，最理想的效果是文字與圖片的密切配合，互為襯托，既能活躍頁面，又使主頁有豐富的內(nèi)容。
網(wǎng)頁制作和美化工具網(wǎng)頁制作工具1．超文本標識語言（HTML） HTML（Hypertext Markup Language）是一種專門用于Web頁制作的編程語言，用來描述超文本各個部分的內(nèi)容，告訴瀏覽器如何顯示文本，怎樣生成與別的文本或圖像的鏈接點。 HTML文檔由文本、格式化代碼和導(dǎo)向其他文檔的超鏈接組成。2．FrntPage FrntPage是由Micrsft公司推出的新一代Web網(wǎng)頁制作工具。FrntPage使網(wǎng)頁制作者能夠更加方便、快捷地創(chuàng)建和發(fā)布網(wǎng)頁，具有直觀的網(wǎng)頁制作和管理方法，簡化了大量工作。 FrntPage界面與Wrd、PwerPint等軟件的界面極為相似，為使用者帶來了極大的方便，Micrsft公司將FrntPage封裝入Office之中，成為Office家族的一員，使之功能更為強大。
網(wǎng)頁美化工具 為了使制作的網(wǎng)頁更為美觀，用戶在利用網(wǎng)頁制作工具制作網(wǎng)頁時，還需利用網(wǎng)頁美化 工具對網(wǎng)頁進行美化。 1．Phtshp Phtshp是由Adbe公司開發(fā)的圖形處理軟件，它是目前公認的PC機上最好的通用平面美術(shù)設(shè)計軟件，它功能完善、性能穩(wěn)定、使用方便，所以在幾乎所有的廣告、出版、軟件公司，Phtshp都是首選的平面制作工具。2．Firewrks Firewrks是由Macrmedia公司開發(fā)的圖形處理工具，它的出現(xiàn)使Web作圖發(fā)生了革命性的變化。因為Firewrks是第一套專門為制作網(wǎng)頁圖形而設(shè)計的軟件，同時也是專業(yè)的網(wǎng)頁圖形設(shè)計及制作的解決方案。 作為一款為網(wǎng)絡(luò)設(shè)計而開發(fā)的圖像處理軟件，F(xiàn)irewrks還能夠自動切割圖像、生成光 標動態(tài)感應(yīng)的JavaScript程序等等，而且Firewrks具有強大的動畫功能和一個相當完美的 網(wǎng)絡(luò)圖像生成器。
3．Flash Flash是美國Macrmedia公司開發(fā)的矢量圖形編輯和動畫創(chuàng)作的專業(yè)軟件，它是一種交互式動畫設(shè)計工具，用它可以將音樂、聲效、動畫以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁動態(tài)效果。它主要應(yīng)用于網(wǎng)頁設(shè)計和多媒體創(chuàng)作等領(lǐng)域，功能十分強大和獨特，已成為交互式矢量動畫的標準，在網(wǎng)上非常流行。Flash廣泛應(yīng)用于網(wǎng)頁動畫制作、教學(xué)動畫演示、網(wǎng)上購物、在線游戲等的制作中。