（中職）網(wǎng)頁設(shè)計與制作項目一了解網(wǎng)頁基礎(chǔ)電子課件

1、正版可修改PPT課件（中職）網(wǎng)頁設(shè)計與制作項目一了解網(wǎng)頁基礎(chǔ)電子課件項目一 了解網(wǎng)頁基礎(chǔ)任務一 認識網(wǎng)頁、了解網(wǎng)站網(wǎng)頁定義 網(wǎng)頁元素網(wǎng)站定義網(wǎng)站分類=本節(jié)提綱網(wǎng)頁定義網(wǎng)頁(web)是網(wǎng)站上的某一個頁面，是萬維網(wǎng)中的一“頁”，它是一個純文本文件，是向訪問者傳遞信息的載體，以超文本和超媒體為技術(shù)，采用HTML、CSS、XML等語言來描述組成頁面的各種元素，包括文字、圖像、音樂等，并通過客戶端瀏覽器進行解析，從而向瀏覽者呈現(xiàn)網(wǎng)頁的各種內(nèi)容。網(wǎng)頁元素文本聲音視頻圖像動畫網(wǎng)頁元素文本網(wǎng)頁中的信息以文本為主。文本一直是人類最重要的信息載體與交流工具，網(wǎng)頁中的信息也以文本為主。文本在網(wǎng)頁中的主要功能是顯示信

2、息和超級鏈接圖像圖像的功能：提供信息、展示作品、裝飾網(wǎng)頁、表現(xiàn)風格和超級鏈接。網(wǎng)頁中使用的圖像主要是GIF、JPEG、PNG等格式。動畫在網(wǎng)頁中使用動畫的功能是：提供信息、展示作品、裝飾網(wǎng)頁、動態(tài)交互，可以有效地引起瀏覽者的注意，比靜止的圖像更具有吸引力。在網(wǎng)頁中使用較多的是GIF動畫和Flash動畫。網(wǎng)頁元素聲音聲音是多媒體網(wǎng)頁的一個重要組成部分。在網(wǎng)頁中添加聲音，能豐富瀏覽者的感官體驗，進而延長瀏覽者在網(wǎng)頁的停留時間，以此達到商業(yè)目的或其他目的。用于網(wǎng)絡的聲音文件格式非常多，常用的是MIDI、WAV、MP3和AIF等。視頻視頻文件的采用讓網(wǎng)頁變得非常精彩而且有動感。網(wǎng)絡上的許多插件也使向網(wǎng)

3、頁中插入視頻文件的操作變得非常簡單。常見的格式有RealPlayer、MPEG、AVI和DivX等。網(wǎng)站定義網(wǎng)站(Website)是指在因特網(wǎng)上，根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容的相關(guān)網(wǎng)頁的集合。簡單地說，網(wǎng)站是一種溝通工具，人們可以通過網(wǎng)站來發(fā)布自己想要公開的資訊，或者利用網(wǎng)站來提供相關(guān)的網(wǎng)絡服務。人們可以通過網(wǎng)頁瀏覽器來訪問網(wǎng)站，獲取自己需要的資訊或者享受網(wǎng)絡服務。交易類網(wǎng)站互動游戲類網(wǎng)站有償資訊類網(wǎng)站咨訊類網(wǎng)站功能型網(wǎng)站綜合類網(wǎng)站辦公類網(wǎng)站根據(jù)網(wǎng)站所提供的服務分類網(wǎng)站定義網(wǎng)站分類交易類網(wǎng)站互動游戲類網(wǎng)站有償資訊類網(wǎng)站咨訊類網(wǎng)站資訊類網(wǎng)站這類網(wǎng)站以提供信息為主要目的

4、，其網(wǎng)站投資者的主要目的是在互聯(lián)網(wǎng)上建立一個宣傳冊，不要求實現(xiàn)業(yè)務或工作邏輯。目前大部分的政府和企業(yè)網(wǎng)站都屬于這類網(wǎng)站。代表網(wǎng)站：政府網(wǎng)站交易類網(wǎng)站就是人們通常所理解的電子商務網(wǎng)站。這類網(wǎng)站是以實現(xiàn)交易為目的，以訂單為中心的。商品如何展示；訂單如何生成；訂單如何執(zhí)行是這類網(wǎng)站必須具備的功能。代表網(wǎng)站：淘寶、京東等資訊類網(wǎng)站代表交易類網(wǎng)站代表網(wǎng)站分類交易類網(wǎng)站互動游戲類網(wǎng)站有償資訊類網(wǎng)站咨訊類網(wǎng)站互動游戲類網(wǎng)站這是近年來國內(nèi)逐漸風靡起來的一種網(wǎng)站。其代表有網(wǎng)站有傳奇、仙劍情緣、聯(lián)眾等。這類網(wǎng)站的投入是根據(jù)所承載游戲的復雜程度來定。代表網(wǎng)站：魔獸世界有償資訊類網(wǎng)站與資訊類網(wǎng)站相似，這類網(wǎng)站也是以提

5、供資訊為主。所不同的是它們提供的資訊是要求有直接回報的，就因為這一點，這類網(wǎng)站都有一個業(yè)務模型。通常的做法是要求訪問者或按次，或按時間，或按量付費。代表網(wǎng)站：101網(wǎng)?；佑螒蝾惥W(wǎng)站代表有償資訊類網(wǎng)站代表網(wǎng)站分類功能型網(wǎng)站這類網(wǎng)站的特點是將一個具有廣泛需求的功能擴展開來，開發(fā)一套強大的支撐體系，將該功能的實現(xiàn)推向極值?？此坪唵蔚捻撁鎸崿F(xiàn)，卻往往需要相當驚人的投入。代表網(wǎng)站：百度綜合類網(wǎng)站這類網(wǎng)站可以把它看成一個網(wǎng)站服務的大賣場，不同的服務由不同的服務商去提供。這類網(wǎng)站的首頁在設(shè)計時都盡可能把所能提供的服務都包含進來，一般看起來非常擁擠代表網(wǎng)站：新浪綜合類網(wǎng)站辦公類網(wǎng)站功能型網(wǎng)站辦公類網(wǎng)站目前很

6、多單位的內(nèi)聯(lián)網(wǎng)網(wǎng)站還應該算作資訊類網(wǎng)站，如果它們加上一個多級的權(quán)限控制功能，向服務于一種辦公管理方式的方向發(fā)展，就會變成這種辦公類網(wǎng)站。代表網(wǎng)站：清華同方功能類網(wǎng)站代表綜合類網(wǎng)站代表辦公類網(wǎng)站代表自主練習網(wǎng)頁名稱網(wǎng)頁元素淘寶網(wǎng)京東商城1號店蘇寧電器請瀏覽以下網(wǎng)頁，記錄這些網(wǎng)頁中都包含了哪些元素?！揪毩?】請瀏覽以下類型網(wǎng)站的代表網(wǎng)站，并將這些網(wǎng)站的首頁以截圖的形式保存下來。【練習2】網(wǎng)站類型網(wǎng)頁截圖有償咨訊類網(wǎng)站功能型網(wǎng)站綜合類網(wǎng)站辦公類網(wǎng)站任務二 了解網(wǎng)頁制作方法代碼制作網(wǎng)頁軟件制作網(wǎng)頁HTML網(wǎng)頁制作軟件=本節(jié)提綱代碼制作網(wǎng)頁網(wǎng)頁是由HTML語言構(gòu)建的，所以早期最基本的制作網(wǎng)頁方法就是用文

7、本編輯程序，比如記事本編寫HTML代碼即可做成網(wǎng)頁。HTMLHTML即Hypertext Markup Language，是超文本標記語言，用于描述網(wǎng)頁文檔的一種標記語言，它不是一種編程語言，而是一種標記語言(markup language)。 無標題文檔 HTMLHTML文檔文件分兩部份，由至稱為開頭，至稱本文。 Head部分用標記界定，一般包含網(wǎng)頁標題、文檔屬性參數(shù)等不在頁面上顯示的網(wǎng)頁元素。Body部分是網(wǎng)頁的主體，內(nèi)容均會反映在頁面上，用標記來界定，頁面的內(nèi)容組織在其中。頁面的內(nèi)容主要包括文字、圖像、動畫、超鏈接等。案例11、打開windows的記事本,粘貼以下代碼：2、點擊記事本菜單

8、的“文件”按鈕打開“另存為”對話框,填寫文件名為“First.html”。3、預覽網(wǎng)頁制作軟件1、初級網(wǎng)頁制作軟件初級網(wǎng)頁制作軟件主要針對網(wǎng)頁制作初學者，常見的有FrontPage和dreamweaver軟件。2、高級網(wǎng)頁制作軟件Microsoft Visual Studio（簡稱VS）是美國微軟公司的開發(fā)工具包系列產(chǎn)品。Dreamweaver CS6Dreamweaver cs6（圖1-10）是針對專業(yè)網(wǎng)頁設(shè)計師特別設(shè)計的一款視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。Dreamweaver CS6 網(wǎng)頁設(shè)計軟件提供了一套直觀的可視界面，供使用者

9、創(chuàng)建和編輯 HTML 網(wǎng)站和移動應用程序。Dreamweaver CS6案例2任務三 了解網(wǎng)頁設(shè)計基礎(chǔ)網(wǎng)頁設(shè)計工作流程網(wǎng)頁美工標準=本節(jié)提綱網(wǎng)頁設(shè)計工作流程一個網(wǎng)站的成型，包括四個階段：設(shè)計階段、制作階段、檢測階段和發(fā)布階段。1、設(shè)計階段（1）選擇主題（2）收集和加工素材2、制作階段（1）選擇網(wǎng)頁制制作工具（2）制作網(wǎng)頁網(wǎng)頁設(shè)計工作流程3、檢測階段檢查網(wǎng)頁內(nèi)容的科學性、版面編排的合理性、超鏈接的正確性以及對網(wǎng)頁的內(nèi)容作適當?shù)脑鰷p等。4、發(fā)布階段 制作網(wǎng)頁的目的是要將網(wǎng)頁發(fā)布到網(wǎng)上，讓更多的瀏覽者來訪問發(fā)布的站點案例3網(wǎng)頁美工標準網(wǎng)頁美工是指精通美學，具有良好的創(chuàng)意和一定程度的審美觀，并且會ph

10、otoshop，flash，dreamwaver等網(wǎng)站制作軟件的網(wǎng)站制作人員。必要時需要一定的策劃知識，將網(wǎng)站所有的頁面畫出來并用DW和css排版出來。需要設(shè)計人員熟悉各種平面設(shè)計軟件，如Photoshop、ai等軟件，完成美術(shù)視覺上的設(shè)計排版等。網(wǎng)頁美工標準必備技能：基礎(chǔ)美術(shù)：素描（石膏幾何體、靜物寫生）；色彩（色彩構(gòu)成、簡單色彩靜物寫生）。Photoshop網(wǎng)頁配色及排版設(shè)計；Illustrator網(wǎng)頁設(shè)計；Dreamweaver網(wǎng)頁制作軟件網(wǎng)頁美工標準必備知識：1.色彩的平衡與呼應2.常用的色彩搭配3.注意頁面的分塊4.網(wǎng)頁安色的運用5.色彩模式網(wǎng)頁美工標準必備知識：1.色彩的平衡與呼應（1）色彩的平衡（2）色彩的呼應網(wǎng)頁美工標準必備知識：2.常用的色彩搭配藍白橙藍為主調(diào)。白底，藍標題欄，橙色按鈕或ICON做點綴。綠白藍綠為主調(diào)。白底，綠標題欄，藍色或橙色按鈕或ICON做點綴。橙白紅橙為主調(diào)。白底，橙標題欄，暗紅或桔紅色按鈕或ICON做點綴。暗紅黑暗紅主調(diào)。網(wǎng)頁美工標準必備知識：3.注意頁面的分塊著手設(shè)計一個頁面的時候，你必須根據(jù)所