《《網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)例教程》第2章(夏蘭)ppt課件(全).ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《《網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)例教程》第2章(夏蘭)ppt課件(全).ppt（20頁(yè)珍藏版）》請(qǐng)?jiān)趨R文網(wǎng)上搜索。

1、清華大學(xué)出版社 網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)例教程第2章高等學(xué)校計(jì)算機(jī)應(yīng)用規(guī)劃教材 2022/9/14主編 方其桂內(nèi)容提要第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)一個(gè)專業(yè)的網(wǎng)站在上線運(yùn)營(yíng)之前必須經(jīng)過(guò)規(guī)劃、設(shè)計(jì)、搭建一個(gè)專業(yè)的網(wǎng)站在上線運(yùn)營(yíng)之前必須經(jīng)過(guò)規(guī)劃、設(shè)計(jì)、搭建等一系列環(huán)節(jié)。前期的規(guī)劃基本上確定了網(wǎng)站的后續(xù)發(fā)展方向，等一系列環(huán)節(jié)。前期的規(guī)劃基本上確定了網(wǎng)站的后續(xù)發(fā)展方向，所以前期的規(guī)劃在整個(gè)網(wǎng)站生命周期中扮演著所以前期的規(guī)劃在整個(gè)網(wǎng)站生命周期中扮演著“舵手舵手”的角色，的角色，網(wǎng)站后續(xù)的所有運(yùn)營(yíng)工作、推廣方式、人員配置、物資配置都會(huì)網(wǎng)站后續(xù)的所有運(yùn)營(yíng)工作、推廣方式、人員配置、物資配置都會(huì)圍繞網(wǎng)站最初的定位和方向來(lái)展開。圍

2、繞網(wǎng)站最初的定位和方向來(lái)展開。本章通過(guò)介紹網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)的相關(guān)知識(shí)，包括規(guī)劃網(wǎng)站主題、本章通過(guò)介紹網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)的相關(guān)知識(shí)，包括規(guī)劃網(wǎng)站主題、網(wǎng)頁(yè)版面布局及網(wǎng)頁(yè)顏色設(shè)計(jì)，可以使讀者對(duì)網(wǎng)頁(yè)的規(guī)劃設(shè)計(jì)有網(wǎng)頁(yè)版面布局及網(wǎng)頁(yè)顏色設(shè)計(jì)，可以使讀者對(duì)網(wǎng)頁(yè)的規(guī)劃設(shè)計(jì)有一個(gè)整體的、直觀的認(rèn)識(shí)，從而規(guī)劃設(shè)計(jì)出合理美觀的網(wǎng)頁(yè)，以一個(gè)整體的、直觀的認(rèn)識(shí)，從而規(guī)劃設(shè)計(jì)出合理美觀的網(wǎng)頁(yè)，以便更好地為后面的網(wǎng)頁(yè)開發(fā)建設(shè)服務(wù)。便更好地為后面的網(wǎng)頁(yè)開發(fā)建設(shè)服務(wù)。教學(xué)目錄規(guī)劃網(wǎng)站主題規(guī)劃網(wǎng)站主題 網(wǎng)頁(yè)版面布局網(wǎng)頁(yè)版面布局網(wǎng)頁(yè)顏色設(shè)計(jì)網(wǎng)頁(yè)顏色設(shè)計(jì)010203第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)2.1 規(guī)劃網(wǎng)站主題教學(xué)內(nèi)容2.1.1 2.1.1 網(wǎng)站

3、需求分析網(wǎng)站需求分析1.網(wǎng)站需求分析原則網(wǎng)站需求分析原則完整性正確可行性優(yōu)先級(jí)簡(jiǎn)明性可測(cè)試2.網(wǎng)站需求分析的內(nèi)容網(wǎng)站需求分析的內(nèi)容（1）網(wǎng)站背景分析（2）總體需求分析（3）具體需求分析第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)2.1 規(guī)劃網(wǎng)站主題教學(xué)內(nèi)容2.1.1 2.1.1 網(wǎng)站需求分析網(wǎng)站需求分析3.網(wǎng)站需求分析采集方法網(wǎng)站需求分析采集方法問(wèn)卷調(diào)查用戶訪談4.需求分析常用方法需求分析常用方法（1）數(shù)據(jù)流圖是一種分析系統(tǒng)數(shù)據(jù)流程的圖形工具，從數(shù)據(jù)傳遞和加工角度，以圖形方式來(lái)表達(dá)系統(tǒng)的邏輯功能、數(shù)據(jù)在系統(tǒng)內(nèi)部的邏輯流向和邏輯變換過(guò)程。成績(jī)管理系統(tǒng)數(shù)據(jù)流圖第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)2.1 規(guī)劃網(wǎng)站主題教學(xué)內(nèi)容2.1.1 2

4、.1.1 網(wǎng)站需求分析網(wǎng)站需求分析4.需求分析常用方法需求分析常用方法（2）實(shí)體關(guān)系圖簡(jiǎn)記E-R圖，是指以實(shí)體、關(guān)系、屬性三個(gè)基本概念概括數(shù)據(jù)的基本結(jié)構(gòu)，用來(lái)描述現(xiàn)實(shí)世界的概念模型。實(shí)體關(guān)系圖表示在信息系統(tǒng)中概念模型的數(shù)據(jù)存儲(chǔ)。論壇網(wǎng)站的實(shí)體關(guān)系圖第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)2.1 規(guī)劃網(wǎng)站主題教學(xué)內(nèi)容2.1.1 2.1.1 網(wǎng)站需求分析網(wǎng)站需求分析4.需求分析常用方法需求分析常用方法（3）用例圖用例圖（Use Case）是指參與者（Actor）、用例（Use Case）以及它們之間的關(guān)系構(gòu)成的用于描述系統(tǒng)功能的動(dòng)態(tài)視圖稱為用例圖。它展示了一個(gè)外部用戶能夠觀察到的系統(tǒng)功能模型圖。子系統(tǒng)關(guān)系類型說(shuō)明表示

5、符號(hào)關(guān)聯(lián) 參與者與用例之間的關(guān)系 泛化 參與者之間或用例之間的關(guān)系 包含 用例之間的關(guān)系 包括 擴(kuò)展 用例之間的關(guān)系 擴(kuò)展 用例圖中的關(guān)系第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)2.1 規(guī)劃網(wǎng)站主題教學(xué)內(nèi)容2.1.2 2.1.2 網(wǎng)站主題確定網(wǎng)站主題確定謂網(wǎng)站的主題也就是網(wǎng)站的題材。現(xiàn)在網(wǎng)上比較知名的謂網(wǎng)站的主題也就是網(wǎng)站的題材?，F(xiàn)在網(wǎng)上比較知名的10類題材有：類題材有：第第1類：網(wǎng)上求職；第類：網(wǎng)上求職；第2類：網(wǎng)上聊天類：網(wǎng)上聊天/即時(shí)信息即時(shí)信息/ICQ；第；第3類：網(wǎng)上社區(qū)類：網(wǎng)上社區(qū)/討討論論/郵件列表；第郵件列表；第4類：計(jì)算機(jī)技術(shù)；第類：計(jì)算機(jī)技術(shù)；第5類：網(wǎng)頁(yè)類：網(wǎng)頁(yè)/網(wǎng)站開發(fā)；第網(wǎng)站開發(fā)；第6類

6、：娛樂(lè)類：娛樂(lè)網(wǎng)站；第網(wǎng)站；第7類：旅行；第類：旅行；第8類：參考類：參考/資訊；第資訊；第9類：家庭類：家庭/教育；第教育；第10類：生類：生活活/時(shí)尚。在選擇網(wǎng)站題材的時(shí)候要注意以幾點(diǎn)。時(shí)尚。在選擇網(wǎng)站題材的時(shí)候要注意以幾點(diǎn)。第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)1.主題小內(nèi)容精2.網(wǎng)站題材內(nèi)容恰當(dāng)3.題材新目標(biāo)準(zhǔn)2.1 規(guī)劃網(wǎng)站主題教學(xué)內(nèi)容2.1.3 2.1.3 網(wǎng)站內(nèi)容設(shè)計(jì)原則網(wǎng)站內(nèi)容設(shè)計(jì)原則網(wǎng)站要方便使用，并遵循一些設(shè)計(jì)慣例，因?yàn)橛脩粼谠L問(wèn)一個(gè)個(gè)網(wǎng)站網(wǎng)站要方便使用，并遵循一些設(shè)計(jì)慣例，因?yàn)橛脩粼谠L問(wèn)一個(gè)個(gè)網(wǎng)站時(shí)，難以記住任何特殊的交互訣竅，于是會(huì)把更多的時(shí)間花在更方便使用時(shí)，難以記住任何特殊的交互訣竅

7、，于是會(huì)把更多的時(shí)間花在更方便使用的網(wǎng)站上。的網(wǎng)站上。第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)1.日期、時(shí)間和數(shù)字2.歡迎詞3.彈出窗口和引導(dǎo)頁(yè)面4.新聞和公告信息5.網(wǎng)址6.控件7.鏈接8.主頁(yè)內(nèi)容2.1 規(guī)劃網(wǎng)站主題教學(xué)內(nèi)容2.1.4 2.1.4 網(wǎng)站內(nèi)容組織網(wǎng)站內(nèi)容組織網(wǎng)站的內(nèi)容是網(wǎng)站訪客停留時(shí)間的決定要素，內(nèi)容空泛的網(wǎng)站，訪客網(wǎng)站的內(nèi)容是網(wǎng)站訪客停留時(shí)間的決定要素，內(nèi)容空泛的網(wǎng)站，訪客會(huì)匆匆離去；只有內(nèi)容充實(shí)豐富的網(wǎng)站，才能吸引訪客細(xì)細(xì)閱讀。一個(gè)標(biāo)會(huì)匆匆離去；只有內(nèi)容充實(shí)豐富的網(wǎng)站，才能吸引訪客細(xì)細(xì)閱讀。一個(gè)標(biāo)準(zhǔn)的網(wǎng)站應(yīng)該包含以下準(zhǔn)的網(wǎng)站應(yīng)該包含以下10項(xiàng)內(nèi)容。項(xiàng)內(nèi)容。第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)1.站點(diǎn)結(jié)構(gòu)圖2

8、.導(dǎo)航欄3.聯(lián)系方式頁(yè)面4.反饋表5.引人入勝的內(nèi)容6.常見問(wèn)題解答7.精美的圖片8.有效查詢9.新聞頁(yè)面10.相關(guān)站點(diǎn)鏈接2.2 設(shè)計(jì)版面布局教學(xué)內(nèi)容2.2.1 2.2.1 版面布局的基本概念版面布局的基本概念最開始，一個(gè)新的網(wǎng)頁(yè)它就像一張白紙，它需要設(shè)計(jì)者任意揮灑設(shè)計(jì)最開始，一個(gè)新的網(wǎng)頁(yè)它就像一張白紙，它需要設(shè)計(jì)者任意揮灑設(shè)計(jì)才思。在開始的時(shí)候，需要明白，雖然能隨意設(shè)計(jì)一些東西，但當(dāng)了解了才思。在開始的時(shí)候，需要明白，雖然能隨意設(shè)計(jì)一些東西，但當(dāng)了解了什么是一種約定俗成的標(biāo)準(zhǔn)或者說(shuō)大多數(shù)訪問(wèn)者的瀏覽習(xí)慣時(shí)，那么可以什么是一種約定俗成的標(biāo)準(zhǔn)或者說(shuō)大多數(shù)訪問(wèn)者的瀏覽習(xí)慣時(shí)，那么可以在此基礎(chǔ)上加

9、上自己的東西。當(dāng)然也可以創(chuàng)造出自己的設(shè)計(jì)方案。在此基礎(chǔ)上加上自己的東西。當(dāng)然也可以創(chuàng)造出自己的設(shè)計(jì)方案。第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)1.頁(yè)面尺寸2.整體造型2.2 設(shè)計(jì)版面布局教學(xué)內(nèi)容2.2.2 2.2.2 網(wǎng)頁(yè)布局類型網(wǎng)頁(yè)布局類型網(wǎng)頁(yè)的布局不可能像平面設(shè)計(jì)那么簡(jiǎn)單，除了上文提到過(guò)的可操作網(wǎng)頁(yè)的布局不可能像平面設(shè)計(jì)那么簡(jiǎn)單，除了上文提到過(guò)的可操作性外，技術(shù)問(wèn)題也是制約網(wǎng)頁(yè)布局的一個(gè)重要因素。雖然網(wǎng)頁(yè)制作已經(jīng)擺性外，技術(shù)問(wèn)題也是制約網(wǎng)頁(yè)布局的一個(gè)重要因素。雖然網(wǎng)頁(yè)制作已經(jīng)擺脫了脫了HTML時(shí)代，但是還沒有完全做到揮灑自如，這就決定了網(wǎng)頁(yè)的布局時(shí)代，但是還沒有完全做到揮灑自如，這就決定了網(wǎng)頁(yè)的布局是有一定

10、規(guī)則的，這種規(guī)則使得網(wǎng)頁(yè)布局只能在標(biāo)準(zhǔn)型、偏置型、復(fù)式結(jié)是有一定規(guī)則的，這種規(guī)則使得網(wǎng)頁(yè)布局只能在標(biāo)準(zhǔn)型、偏置型、復(fù)式結(jié)構(gòu)型、拐角型、國(guó)字型等等幾種布局的基本結(jié)構(gòu)中選擇。構(gòu)型、拐角型、國(guó)字型等等幾種布局的基本結(jié)構(gòu)中選擇。第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)1.標(biāo)準(zhǔn)型2.2 設(shè)計(jì)版面布局教學(xué)內(nèi)容2.2.2 2.2.2 網(wǎng)頁(yè)布局類型網(wǎng)頁(yè)布局類型第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)2.偏置型2.2 設(shè)計(jì)版面布局教學(xué)內(nèi)容2.2.2 2.2.2 網(wǎng)頁(yè)布局類型網(wǎng)頁(yè)布局類型第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)3.復(fù)式結(jié)構(gòu)型2.2 設(shè)計(jì)版面布局教學(xué)內(nèi)容2.2.2 2.2.2 網(wǎng)頁(yè)布局類型網(wǎng)頁(yè)布局類型第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)4.拐角布局2.2 設(shè)計(jì)版面布局教學(xué)內(nèi)

11、容2.2.2 2.2.2 網(wǎng)頁(yè)布局類型網(wǎng)頁(yè)布局類型第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)5.國(guó)字型布局2.2 設(shè)計(jì)版面布局教學(xué)內(nèi)容2.2.3 2.2.3 網(wǎng)頁(yè)布局方法網(wǎng)頁(yè)布局方法網(wǎng)頁(yè)版式布局的方法有兩種，一種為紙上手繪布局，另一種為軟件繪網(wǎng)頁(yè)版式布局的方法有兩種，一種為紙上手繪布局，另一種為軟件繪圖布局。下面分別加以介紹。圖布局。下面分別加以介紹。第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)1.紙上手繪布局2.軟件繪圖布局 Word軟件設(shè)計(jì)的網(wǎng)站布局圖2.3 網(wǎng)頁(yè)顏色設(shè)計(jì)教學(xué)內(nèi)容色彩基礎(chǔ)知識(shí)色彩基礎(chǔ)知識(shí)網(wǎng)站的色彩是最影響整體風(fēng)格的因素，也是網(wǎng)站美工設(shè)計(jì)中最令人頭網(wǎng)站的色彩是最影響整體風(fēng)格的因素，也是網(wǎng)站美工設(shè)計(jì)中最令人頭疼的問(wèn)題。許多

12、網(wǎng)頁(yè)設(shè)計(jì)者都缺乏色彩搭配的基本知識(shí)，所以在制作網(wǎng)頁(yè)疼的問(wèn)題。許多網(wǎng)頁(yè)設(shè)計(jì)者都缺乏色彩搭配的基本知識(shí)，所以在制作網(wǎng)頁(yè)之前往往有一個(gè)很好的想法，但是卻不知如何搭配網(wǎng)頁(yè)的顏色來(lái)表達(dá)預(yù)想之前往往有一個(gè)很好的想法，但是卻不知如何搭配網(wǎng)頁(yè)的顏色來(lái)表達(dá)預(yù)想的效果。因此，在介紹色彩搭配之前，先來(lái)看看色彩的基本知識(shí)。的效果。因此，在介紹色彩搭配之前，先來(lái)看看色彩的基本知識(shí)。第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)1.色彩的基本概念2.網(wǎng)頁(yè)安全色3.色彩三要素4.色彩的心理效應(yīng)2.3 網(wǎng)頁(yè)顏色設(shè)計(jì)教學(xué)內(nèi)容頁(yè)面色彩搭配頁(yè)面色彩搭配色彩本身具有非常微妙的表現(xiàn)力，它們可以產(chǎn)生出一種刺激人們大腦色彩本身具有非常微妙的表現(xiàn)力，它們可以產(chǎn)生出一種刺激人們大腦中對(duì)某種形式存在的物體的共鳴，展現(xiàn)出對(duì)待生活的新的看法與態(tài)度。合中對(duì)某種形式存在的物體的共鳴，展現(xiàn)出對(duì)待生活的新的看法與態(tài)度。合理使用色彩擴(kuò)大了設(shè)計(jì)者創(chuàng)作的想像空間，賦予了創(chuàng)作新的不定性。理使用色彩擴(kuò)大了設(shè)計(jì)者創(chuàng)作的想像空間，賦予了創(chuàng)作新的不定性。第2章 網(wǎng)頁(yè)規(guī)劃設(shè)計(jì)1.網(wǎng)頁(yè)色彩搭配原理2.網(wǎng)頁(yè)色彩搭配方法根據(jù)頁(yè)面風(fēng)格以及產(chǎn)品本身的訴求確定主色根據(jù)主色確定配色3.網(wǎng)頁(yè)色彩搭配技巧清華大學(xué)出版社 網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)例教程高等學(xué)校計(jì)算機(jī)應(yīng)用規(guī)劃教材 謝謝使用！聯(lián)系信箱：