1網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)基礎(chǔ)入門

第第頁1網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)基礎(chǔ)入門第1章初識網(wǎng)站

1

2022年8月26日9時(shí)21分

主要內(nèi)容123456782

1.1網(wǎng)站的基本概念1.2網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)基礎(chǔ)入門1.3網(wǎng)站開發(fā)流程1.4網(wǎng)站頁面策劃與設(shè)計(jì)1.5視覺空間的構(gòu)成1.6網(wǎng)頁色調(diào)搭配及精致網(wǎng)站賞析1.7上機(jī)實(shí)訓(xùn)——查看與分析網(wǎng)站1.8本章小結(jié)

2022年8月26日9時(shí)21分

1.1認(rèn)識網(wǎng)站1.1.1什么是網(wǎng)站網(wǎng)站是因特網(wǎng)上一塊固定的面對全世界發(fā)布消息的地方，由域名和網(wǎng)站空間構(gòu)成。網(wǎng)站頁面通常包括主頁和其他具有超鏈接功能的頁面。如今，很多公司都擁有自己的網(wǎng)站，并利用網(wǎng)站平臺來進(jìn)行產(chǎn)品宣揚(yáng)、資訊發(fā)布、人員聘請等。隨著網(wǎng)頁制作技術(shù)的流行與普及，許多人也開始擁有個(gè)人主頁，通常是制用來自我介紹、呈現(xiàn)性格的地方。與此同時(shí)，也涌現(xiàn)出一批專業(yè)企業(yè)網(wǎng)站制作的公司，通常這些公司的網(wǎng)站上提供了各種有關(guān)服務(wù)、新聞、旅游、娛樂、經(jīng)濟(jì)等的資訊。

3

2022年8月26日9時(shí)21分

1.1認(rèn)識網(wǎng)站1.1.2網(wǎng)站的分類及特點(diǎn)1.個(gè)人網(wǎng)站2.企業(yè)類網(wǎng)站3.娛樂休閑類網(wǎng)站4.機(jī)構(gòu)類網(wǎng)站5.電子商務(wù)類網(wǎng)站6.綜合門戶類網(wǎng)站7.搜尋引擎類網(wǎng)站

圖1-1個(gè)人網(wǎng)站

4

2022年8月26日9時(shí)21分

1.1認(rèn)識網(wǎng)站1.1.3什么是網(wǎng)頁用戶在訪問網(wǎng)站時(shí)所看到的實(shí)際內(nèi)容即為網(wǎng)頁。一個(gè)網(wǎng)站中通常由很多的網(wǎng)頁構(gòu)成，常見的網(wǎng)頁文件格式為HTML格式，其文件擴(kuò)展名為“.html”、“.htm”、“.asp”、“.asp*”、“.php”和“.jsp”等。網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，而網(wǎng)頁那么是由一些基本元素構(gòu)成的，包括文本、圖像、超鏈接、表格、動畫、音樂和交互式表單等。

5

2022年8月26日9時(shí)21分

1.1認(rèn)識網(wǎng)站1.1.4網(wǎng)頁基本構(gòu)成1.文本2.圖像和動畫3.聲音和視頻4.表單5.超鏈接6.表格7.其他元素

圖1-11網(wǎng)頁中的表單

6

2022年8月26日9時(shí)21分

1.1認(rèn)識網(wǎng)站1.1.5網(wǎng)頁的類型依據(jù)網(wǎng)頁中的交互功能，可將網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁兩種類型。純粹HTML格式的網(wǎng)頁通常被稱為“靜態(tài)網(wǎng)頁”,也就是以.htm、.html、.shtml和.*ml等為后綴的文件。“動態(tài)網(wǎng)頁”的文件里包含了程序代碼，通過后臺數(shù)據(jù)庫與Web服務(wù)器進(jìn)行信息交互，由后臺數(shù)據(jù)庫提供實(shí)時(shí)數(shù)據(jù)更新和數(shù)據(jù)查詢服務(wù)。

7

2022年8月26日9時(shí)21分

1.2網(wǎng)站建設(shè)的工具軟件及技術(shù)1.2.1網(wǎng)頁效果圖設(shè)計(jì)軟件Photoshop軟件是由Adobe公司推出的圖像處理軟件，它具有界面友好、易學(xué)易用等優(yōu)點(diǎn)，目前已被廣泛應(yīng)用于印刷、廣告設(shè)計(jì)、網(wǎng)頁圖像制作和照片編輯等領(lǐng)域。Fireworks軟件是創(chuàng)建、編輯和優(yōu)化網(wǎng)頁圖像的多功能應(yīng)用

程序。

圖1-12PhotoshopCS5工作界面

圖1-13FireworksCS5工作界面

8

2022年8月26日9時(shí)21分

1.2網(wǎng)站建設(shè)的工具軟件及技術(shù)1.2.2網(wǎng)頁內(nèi)容編排軟件

圖1-14DreamweaverCS5工作界面

9

2022年8月26日9時(shí)21分

1.2網(wǎng)站建設(shè)的工具軟件及技術(shù)1.2.3網(wǎng)頁動畫制作軟件

圖1-15FlashCS5工作界面

10

2022年8月26日9時(shí)21分

1.2網(wǎng)站建設(shè)的工具軟件及技術(shù)1.2.4超文本標(biāo)記語言HTML的英文全稱是HyperTe*tMarkupLanguage,中文通常稱為“超文本標(biāo)記語言”或“超文本標(biāo)簽語言”,是互聯(lián)網(wǎng)上編寫網(wǎng)頁的主要語言，提供了精簡而有力的文件定義，可以設(shè)計(jì)出多姿多彩的超媒體文件，通過HTTP通信協(xié)議還可以在全球互聯(lián)網(wǎng)(WorldWideWeb)上進(jìn)行跨平臺的文件交換。

11

2022年8月26日9時(shí)21分

1.2網(wǎng)站建設(shè)的工具軟件及技術(shù)1.2.5CSS標(biāo)記語言CSS(CascadingStyleSheet,可譯為“層疊樣式表”或“級聯(lián)樣式表”)是一組格式設(shè)置規(guī)章，用于掌握Web頁面的外觀。通過運(yùn)用CSS樣式設(shè)置頁面的格式，可以將頁面的內(nèi)容與表現(xiàn)形式分別，將頁面內(nèi)容存放在HTML文檔中，而用于定義表現(xiàn)形式的CSS規(guī)章被存放在另一個(gè)文件中或HTML文檔的某一部分，通常為文件頭部分。將內(nèi)容與表現(xiàn)形式分別，不僅可以使維護(hù)站點(diǎn)的外觀更加簡單，還可以使HTML文檔代碼更加簡練，縮短閱覽器的加載時(shí)間。

12

2022年8月26日9時(shí)21分

1.2網(wǎng)站建設(shè)的工具軟件及技術(shù)1.2.6網(wǎng)頁腳本程序語言JavaScript是一種基于對象和事項(xiàng)驅(qū)動并具有安全性能的腳本語言，利用JavaScript程序可以使頁面更加生動、活潑，以小的程序量完成大的功能。運(yùn)用它的目的是與超文本標(biāo)識語言、JavaScript語言一起實(shí)現(xiàn)在一個(gè)網(wǎng)頁中鏈接多個(gè)對象，與網(wǎng)絡(luò)客戶交互，從而可以開發(fā)客戶端的應(yīng)用程序。它是通過嵌入或調(diào)入到標(biāo)準(zhǔn)的HTML語言中實(shí)現(xiàn)的。

13

2022年8月26日9時(shí)21分

1.2網(wǎng)站建設(shè)的工具軟件及技術(shù)1.2.7動態(tài)網(wǎng)站編程語言動態(tài)網(wǎng)頁是與靜態(tài)網(wǎng)頁相對應(yīng)的，網(wǎng)頁URL的后綴不是以.htm、.html、.shtml、.*ml等靜態(tài)網(wǎng)頁的常見動態(tài)網(wǎng)頁制作形式存在的，而是以.asp*、.asp、.jsp、.php、.perl、.cgi等形式為后綴的。常見的動態(tài)網(wǎng)站編程語言有ASP、PHP、JSP、等。

14

2022年8月26日9時(shí)21分

1.3網(wǎng)站開發(fā)流程1.3.1網(wǎng)站整體規(guī)劃對網(wǎng)站的整體風(fēng)格和特色做出定位，可以從以下幾個(gè)方面考慮。(1)明確建立網(wǎng)站的目的：是宣揚(yáng)產(chǎn)品、進(jìn)行電子商務(wù)還是建立行業(yè)性網(wǎng)站？是企業(yè)需要還是市場需求?(2)整合公司資源，確定網(wǎng)站的類型：產(chǎn)品宣揚(yáng)、網(wǎng)上營銷、客戶服務(wù)、電子商務(wù)。(3)當(dāng)

前網(wǎng)站的規(guī)模及其擴(kuò)展性。

15

2022年8月26日9時(shí)21分

1.3網(wǎng)站開發(fā)流程1.3.2收集、整理網(wǎng)站資源重要的文本重要的圖像庫文件Flash等多媒體元素

16

2022年8月26日9時(shí)21分

1.3網(wǎng)站開發(fā)流程1.3.3設(shè)計(jì)網(wǎng)頁效果圖網(wǎng)頁效果圖設(shè)計(jì)是網(wǎng)站規(guī)劃中的一個(gè)特別重要的環(huán)節(jié)。網(wǎng)頁的設(shè)計(jì)包括網(wǎng)站的LOGO設(shè)計(jì)、網(wǎng)頁的布局設(shè)計(jì)、網(wǎng)頁的色調(diào)搭配和網(wǎng)站的字體等。

圖1-16Photoshop中設(shè)計(jì)的網(wǎng)頁效果圖172022年8月26日9時(shí)21分

1.3網(wǎng)站開發(fā)流程1.3.4編輯、制作網(wǎng)頁設(shè)計(jì)完網(wǎng)頁效果圖后，通常需要將網(wǎng)頁效果圖中要作為網(wǎng)頁圖像的部分圖像切片導(dǎo)出，然后根據(jù)規(guī)劃逐步制作網(wǎng)頁。編輯制作網(wǎng)頁是一個(gè)繁復(fù)而細(xì)致的過程，肯定要根據(jù)先大后小、先簡約后繁復(fù)的順次來進(jìn)行制作。

圖1-17運(yùn)用Dreamweaver編輯、制作網(wǎng)頁

18

2022年8月26日9時(shí)21分

1.3網(wǎng)站開發(fā)流程1.3.5開發(fā)動態(tài)網(wǎng)站模塊頁面設(shè)計(jì)制作完成后，假如還需要動態(tài)功能，就需要開發(fā)動態(tài)功能模塊。網(wǎng)站中常用的功能模塊有新聞發(fā)布系統(tǒng)、搜尋功能、留言板、產(chǎn)品展示管理系統(tǒng)、在線調(diào)查系統(tǒng)、在線購物、會員注冊管理系統(tǒng)、聘請系統(tǒng)、統(tǒng)計(jì)系統(tǒng)、留言系統(tǒng)、論壇及談天室等。

圖1-18在線購物網(wǎng)站

19

2022年8月26日9時(shí)21分

1.3網(wǎng)站開發(fā)流程1.3.6申請域名和空間域名是企業(yè)或事業(yè)單位在因特網(wǎng)上進(jìn)行相互聯(lián)絡(luò)的網(wǎng)絡(luò)地址。在網(wǎng)絡(luò)時(shí)代，域名是企業(yè)、機(jī)構(gòu)進(jìn)入因特網(wǎng)必不可少的身份認(rèn)證。域名是由一串用“.”分隔的名稱組成的因特網(wǎng)上某一臺計(jì)算機(jī)或計(jì)算機(jī)組的名稱，用于在數(shù)據(jù)傳輸時(shí)標(biāo)識計(jì)算機(jī)的電子方位(有時(shí)也指地理位置)。目前，域名已經(jīng)成為互聯(lián)網(wǎng)的品牌、網(wǎng)上商標(biāo)愛護(hù)必備的產(chǎn)品之一。

20

2022年8月26日9時(shí)21分

1.3網(wǎng)站開發(fā)流程1.3.7網(wǎng)站測試及維護(hù)(1)制訂網(wǎng)站改版計(jì)劃，實(shí)時(shí)更新網(wǎng)頁內(nèi)容：站點(diǎn)信息的不斷更新，讓閱覽者了解企業(yè)的進(jìn)展