辦公自動化實訓(xùn)教程課件

1、網(wǎng)頁設(shè)計與制作教程單元一 網(wǎng)頁基礎(chǔ)知識清華大學(xué)出版社單元一 網(wǎng)頁基礎(chǔ)知識教學(xué)目標(biāo)認(rèn)識互聯(lián)網(wǎng)中網(wǎng)站的分類，能夠深入分析每一類網(wǎng)站的特點。 認(rèn)識網(wǎng)頁中相關(guān)的知識與元素，進(jìn)一步了解網(wǎng)站。 了解常用網(wǎng)頁設(shè)計軟件Dreamweaver的基本操作。單元一 網(wǎng)頁基礎(chǔ)知識返回教材總目錄 單元一 網(wǎng)頁基礎(chǔ)知識任務(wù)1.1 確立課程目標(biāo)任務(wù)1.2 優(yōu)秀網(wǎng)站賞析任務(wù)1.3 初識網(wǎng)頁任務(wù)1.4 認(rèn)識網(wǎng)頁基礎(chǔ)語言任務(wù)1.5 DreamWeaver簡介上機實訓(xùn)返回教材總目錄任務(wù)1.1 確立課程目標(biāo)：任務(wù)描述 了解網(wǎng)頁設(shè)計與制作行業(yè)的社會需求及前景，確定學(xué)習(xí)網(wǎng)頁設(shè)計與制作課程目標(biāo)：獨立完成深圳可盈資產(chǎn)經(jīng)營有限公司網(wǎng)站開發(fā)項目

2、。單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.1 確立課程目標(biāo)：工作過程1.1.1行業(yè)需求、前景傳統(tǒng)企業(yè)同互聯(lián)網(wǎng)聯(lián)姻，借助互聯(lián)網(wǎng)展示企業(yè)形象，發(fā)布產(chǎn)品信息，做好客戶服務(wù)已經(jīng)成為業(yè)界的共識，成為現(xiàn)代企業(yè)發(fā)展中一個不可或缺的步驟；互聯(lián)網(wǎng)為企業(yè)服務(wù)，滲透到企業(yè)的生產(chǎn)、銷售、管理當(dāng)中去，這也成為互聯(lián)網(wǎng)發(fā)展的重要模式之一。如圖1-1所示為客戶在威客網(wǎng)發(fā)布與網(wǎng)站設(shè)計制作有關(guān)的任務(wù)需求信息。單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.1 確立課程目標(biāo)：工作過程1.1.2目標(biāo)對任務(wù)的理解，分析，表達(dá)能力； 項目任務(wù)的執(zhí)行能力； 對項目任務(wù)結(jié)果的展示，分析，評價能力； 對工作環(huán)境的熟悉能力； 按照規(guī)范操作的能力； 按照安全要求

3、操作的能力； 主要工具的使用能力； 事故處理的能力； 在復(fù)雜環(huán)境中做事，與人競爭協(xié)作的能力； 在完成任務(wù)過程中自我學(xué)習(xí)和持續(xù)發(fā)展的能力。單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.1 確立課程目標(biāo)：任務(wù)回顧凡事預(yù)則立，不預(yù)則廢。在學(xué)習(xí)新知識的時候，我們不明確自己的學(xué)習(xí)目標(biāo)，不思考通過學(xué)習(xí)后需要掌握什么樣的能力，那么就無法事先做好學(xué)習(xí)準(zhǔn)備和計劃，最終導(dǎo)致學(xué)習(xí)效率低下。單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.2 優(yōu)秀網(wǎng)站賞析：任務(wù)描述 在制作網(wǎng)站之前，必須先了解一下當(dāng)前網(wǎng)站的主要分類。了解互聯(lián)網(wǎng)中網(wǎng)頁設(shè)計的主流方向，了解各類網(wǎng)站的設(shè)計方法和風(fēng)格特點。根據(jù)網(wǎng)站的主題、形式、客戶企業(yè)的特點以及企業(yè)的業(yè)務(wù)背景，目前

4、主要有五種類型網(wǎng)站：門戶類網(wǎng)站、商務(wù)類網(wǎng)站、政府類網(wǎng)站、文娛類網(wǎng)站及動漫游戲類網(wǎng)站。單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.2 優(yōu)秀網(wǎng)站賞析：工作過程1.2.1門戶類網(wǎng)站門戶類網(wǎng)站特點是擁有龐大的信息量和用戶資源，設(shè)計上以內(nèi)容為主，設(shè)計為輔。如新浪。單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.2 優(yōu)秀網(wǎng)站賞析：工作過程1.2.2商務(wù)類網(wǎng)站產(chǎn)品型企業(yè)網(wǎng)站：設(shè)計上突出產(chǎn)品特色，制作精美。如NIKE。 信息、客戶服務(wù)型網(wǎng)站：設(shè)計上以需求為中心，風(fēng)格簡潔明了。如眾品網(wǎng)。 在線商店網(wǎng)站：設(shè)計上注重功能實現(xiàn)，易用性。如VANCL凡客誠品。 單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.2 優(yōu)秀網(wǎng)站賞析：工作過程1.2.3政府網(wǎng)

5、站設(shè)計風(fēng)格給人嚴(yán)肅、公正、可信賴的感覺。如中華人民共和國外交部 。 單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.2 優(yōu)秀網(wǎng)站賞析：工作過程1.2.4文娛類網(wǎng)站設(shè)計風(fēng)格輕松休閑。如幻劍書盟 。 單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.2 優(yōu)秀網(wǎng)站賞析：工作過程1.2.5游戲類網(wǎng)站設(shè)計上突出游戲氛圍，交互性強。如魔獸世界 。 單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.2 優(yōu)秀網(wǎng)站賞析：工作過程1.2.6項目案例本書以”網(wǎng)站開發(fā)項目作為學(xué)習(xí)載體。因此，要認(rèn)真分析網(wǎng)站的業(yè)務(wù)背景，做到對不同類型的網(wǎng)站能準(zhǔn)確定位和歸類。當(dāng)我們與客戶洽談網(wǎng)站業(yè)務(wù)事宜時，通過分析對方提供的網(wǎng)站規(guī)劃文案和公司背景情況后，能快速對所建網(wǎng)站進(jìn)行歸類

6、，頭腦中能迅速浮現(xiàn)出該類型網(wǎng)站的設(shè)計風(fēng)格和表現(xiàn)形式特點，這樣才能在接下來與客戶的交流中處于主動的位置，通過了解網(wǎng)站類型，向客戶提供網(wǎng)站設(shè)計理念和視覺特效的可行性方案 。 單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.2 優(yōu)秀網(wǎng)站賞析：任務(wù)回顧互聯(lián)網(wǎng)是一個豐富多彩的信息世界，擁有大量的網(wǎng)站資源，對于網(wǎng)站種類的劃分，讓我們可以更清晰的了解我們的客戶群體。有利于我們在網(wǎng)頁設(shè)計中擁有更加明確的思路 。單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.3 初識網(wǎng)頁：任務(wù)描述 了解網(wǎng)站在互聯(lián)網(wǎng)中的運行環(huán)境，網(wǎng)站的各種相關(guān)知識，還有網(wǎng)頁的基本元素和基本術(shù)語。本次項目的完成使學(xué)者具備與客戶更深層次的交流能力 。單元一 網(wǎng)頁基礎(chǔ)知識返

7、回目錄任務(wù)1.3 初識網(wǎng)頁：工作過程1.3.1網(wǎng)站的相關(guān)知識1.3.2網(wǎng)頁中的基本元素與常用術(shù)語1網(wǎng)頁中的基本元素 文本、圖形圖像（JPG、GIF和PNG類型）、超鏈接、交互功能、多媒體2網(wǎng)頁中的常用術(shù)語網(wǎng)站與網(wǎng)頁 服務(wù)器（Server）與瀏覽器（Browser） 遠(yuǎn)程站點(Remote Site)和本地站點（Local Site） 統(tǒng)一資源定位器URL單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.3 初識網(wǎng)頁：工作過程1.3.3靜態(tài)網(wǎng)站與動態(tài)網(wǎng)站簡介1靜態(tài)網(wǎng)頁是指以純粹HTML(超文本標(biāo)記語言) 制作的網(wǎng)頁，通常是以.htm、.html、.shtml、.xml等為后后綴的。2動態(tài)網(wǎng)頁是指使用網(wǎng)頁腳本語

8、言，如php、asp、jsp等制作的網(wǎng)頁，其網(wǎng)址通常是以.aspx、.asp、.jsp、.php、.perl、.cgi等形式為后綴。是否有程序在服務(wù)器端運行，是區(qū)別靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的重要標(biāo)志。網(wǎng)站采用動態(tài)網(wǎng)頁還是靜態(tài)網(wǎng)頁主要取決于網(wǎng)站的功能需求和網(wǎng)站內(nèi)容的多少，如果網(wǎng)站功能比較簡單，內(nèi)容更新量不是很大，采用純靜態(tài)網(wǎng)頁的方式會更簡單，反之一般要采用動態(tài)網(wǎng)頁技術(shù)來實現(xiàn)。 單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.3 初識網(wǎng)頁：工作過程1.3.4網(wǎng)頁制作的常用軟件1網(wǎng)頁制作三劍客：Flash、Dreamweaver、Fireworks2Photoshop3應(yīng)用程序開發(fā)技術(shù)：ASP、PHP、JSP、Jav

9、aScript 。 單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.3 初識網(wǎng)頁：任務(wù)回顧了解網(wǎng)站的相關(guān)知識和網(wǎng)頁的基本元素，是一個網(wǎng)頁設(shè)計師應(yīng)具備的基礎(chǔ)知識。而對基本的理論知識的了解，讓設(shè)計師能夠更深層次的了解互聯(lián)網(wǎng)中網(wǎng)站的運行環(huán)境 。單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.4 認(rèn)識網(wǎng)頁基礎(chǔ)語言：任務(wù)描述 認(rèn)識網(wǎng)頁基礎(chǔ)語言，了解HTML的概念和HTML的基本結(jié)構(gòu) 。單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.4 認(rèn)識網(wǎng)頁基礎(chǔ)語言：工作過程1.4.1關(guān)于HTMLHTML（HyperTextMark-upLanguage）即超文本標(biāo)記語言，是WWW的描述語言，也是網(wǎng)頁的基本語言。該語言使用“標(biāo)記（標(biāo)簽符號，TAG）對文

10、件的內(nèi)容進(jìn)行標(biāo)注，指出內(nèi)容的輸出格式，如字體大小及顏色、背景顏色、表格形式、各部分之間邏輯關(guān)系等 。單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.4 認(rèn)識網(wǎng)頁基礎(chǔ)語言：工作過程1.4.2了解HTML的基本結(jié)構(gòu)1HTML的基本結(jié)構(gòu)，例1。單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.4 認(rèn)識網(wǎng)頁基礎(chǔ)語言：工作過程1.4.2了解HTML的基本結(jié)構(gòu)2標(biāo)簽符號是以括起來的，一般成對出現(xiàn)，表示起始和結(jié)尾。以下是一些常用標(biāo)簽： （1）標(biāo)簽：標(biāo)識HTML文件的開始和結(jié)束，中間是一些HTML語言的元素。它允許網(wǎng)絡(luò)瀏覽器把文件內(nèi)容確認(rèn)為HTML文件。（2）標(biāo)簽：標(biāo)題標(biāo)簽，其中的信息不會出現(xiàn)在網(wǎng)頁中。但其中包含了許多網(wǎng)頁的屬性信息標(biāo)

11、簽一般緊跟標(biāo)簽，標(biāo)簽在標(biāo)簽之前。（3）標(biāo)簽：主體標(biāo)簽，它是文檔的主干，包含了文檔的內(nèi)容。可以通過多種途徑來表現(xiàn)這些內(nèi)容。（4）標(biāo)簽：段落標(biāo)簽，中間是一段文字的內(nèi)容，可以設(shè)置其屬性來對文字排版。HTML的瀏覽器是基于窗口的，用戶可以隨時改變顯示區(qū)的大小。HTML的分段完全依賴于分段元素。（5）標(biāo)簽：字體標(biāo)簽，可通過設(shè)置其屬性來美化字體。（6）標(biāo)簽：圖像標(biāo)簽，設(shè)置網(wǎng)頁中圖像的來源、尺寸、對齊方式和說明等。（7）標(biāo)簽：超鏈接標(biāo)簽，設(shè)置超鏈接的鏈接目標(biāo)和名字等。（8）標(biāo)簽：標(biāo)題標(biāo)簽，設(shè)置頁面的標(biāo)題。 單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.4 認(rèn)識網(wǎng)頁基礎(chǔ)語言：任務(wù)回顧通過認(rèn)識基本的網(wǎng)頁文件源代碼，了解H

12、TML的概念和HTML的基本結(jié)構(gòu)，這樣才能夠清楚的了解互聯(lián)網(wǎng)中網(wǎng)頁制作與網(wǎng)頁展示的本質(zhì) 。單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.5 Dreamweaver簡介 ：任務(wù)描述 Dreamweaver是網(wǎng)頁制作最常用的軟件，要求在掌握網(wǎng)頁設(shè)計的基本工作流程后，了解Dreamweaver 在網(wǎng)頁制作中的重要性 。單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.5 Dreamweaver簡介 ：工作過程1.5.1 Dreamweaver CS3概述1.5.2 Dreamweaver CS3的新增功能單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.5 Dreamweaver簡介 ：工作過程1.5.3 Dreamweaver CS3的操作界面單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.5 Dreamweaver簡介 ：工作過程1.5.4網(wǎng)頁文檔的基本操作 1新建網(wǎng)頁2保存網(wǎng)頁3設(shè)置新文檔4打開現(xiàn)有文檔5使用頁面單元一 網(wǎng)頁基礎(chǔ)知識返回目錄任務(wù)1.5 Dreamweaver簡介 ：任務(wù)回顧項目介紹了中文版Dreamweaver CS3的功能以及它的工作界面，菜單，工具欄、屬性面板和浮動面板組。讓學(xué)生通過本項目的學(xué)習(xí)，對Dreamweaver CS3有個初步的認(rèn)識，為學(xué)生進(jìn)行網(wǎng)站項目的開發(fā)做技術(shù)準(zhǔn)備 。單元一 網(wǎng)頁基礎(chǔ)知識返回目錄上機實訓(xùn) ：目的要求 練習(xí)插入網(wǎng)頁文本和圖片；利