何如利 2012.3nnf課程安排n? 本門課程學(xué)習(xí)主要以視覺藝術(shù)設(shè)計和網(wǎng)頁設(shè)計理論基礎(chǔ)結(jié)合 以視覺藝術(shù)設(shè)計和網(wǎng)頁設(shè)計理論基礎(chǔ)結(jié)合講解網(wǎng) 以視覺藝術(shù)設(shè)計和網(wǎng)頁設(shè)計理論基礎(chǔ)結(jié)合 頁設(shè)計，培養(yǎng)網(wǎng)頁設(shè)計的知

何如利 2012.3nnf課程安排n? 本門課程學(xué)習(xí)主要以視覺藝術(shù)設(shè)計和網(wǎng)頁設(shè)計理論基礎(chǔ)結(jié)合 以視覺藝術(shù)設(shè)計和網(wǎng)頁設(shè)計理論基礎(chǔ)結(jié)合講解網(wǎng) 以視覺藝術(shù)設(shè)計和網(wǎng)頁設(shè)計理論基礎(chǔ)結(jié)合 頁設(shè)計，培養(yǎng)網(wǎng)頁設(shè)計的知識與設(shè)計能力。nn? 理論與實際相結(jié)合，展示大量的案例及布置主題性的網(wǎng)頁設(shè)計作業(yè)， 加強大家的實踐動手操作能力。nnf主題作業(yè)nn? 為“川音綿陽藝術(shù)學(xué)院造型與設(shè)計藝術(shù)系 造型與設(shè)計藝術(shù)系”設(shè)計 造型與設(shè)計藝術(shù)系 一張首頁nn? 為“王蒙文學(xué)藝術(shù)館”設(shè)計一張首頁nnf欣賞與思考nnffffffff本課內(nèi)容nn? 網(wǎng)站 ? 網(wǎng)頁 ? 網(wǎng)頁設(shè)計 ? 網(wǎng)頁設(shè)計的常用工具nnfWebn? World Wide Web （世界寬邊網(wǎng)絡(luò)） 世界寬邊網(wǎng)絡(luò)） 的縮寫，也可以簡稱為Web，中文名 的縮寫，也可以簡稱為 ， 字為“萬維網(wǎng)” 字為“萬維網(wǎng)”。 ? Web采用瀏覽器 服務(wù)器工作模式。 采用瀏覽器/服務(wù)器工作模式 采用瀏覽器 服務(wù)器工作模式。 信息以頁面（或稱Web頁）的形式存 信息以頁面（或稱 頁 儲在Web服務(wù)器中，通過瀏覽器為用 服務(wù)器中， 儲在 服務(wù)器中 戶提供方便的信息瀏覽界面。 戶提供方便的信息瀏覽界面。 ? 統(tǒng)一資源定位器 統(tǒng)一資源定位器URL。 。 ? 超鏈接。 超鏈接。nnfWEB1.0nnWEB2.0 博客、QQ空間nnWEB3.0（未出現(xiàn)） WEB3.0（未出現(xiàn)）nn<想了解更多請在百度搜索>nnf客戶機 服務(wù)器nnf站點n? 將網(wǎng)頁文件和素材文件 網(wǎng)頁文件和素材文件，有條理地放置站點文件夾里，這些文件 網(wǎng)頁文件和素材文件 與文件夾就構(gòu)成了網(wǎng)站的實質(zhì)內(nèi)容 網(wǎng)站的實質(zhì)內(nèi)容。 網(wǎng)站的實質(zhì)內(nèi)容nn? 站點文件夾里除了網(wǎng)頁文件還有素材文件，所謂素材就是網(wǎng)頁中 所謂素材就是網(wǎng)頁中 所用到的圖像、聲音、視頻等， 所用到的圖像、聲音、視頻等，這些內(nèi)容是以單獨文件的形式存 在。nnfURLnn? ?nn– URL（Uniform Resource Locator），即統(tǒng)一資源定位符 統(tǒng)一資源定位符。 統(tǒng)一資源定位符 – URL是對能從Internet上得到的資源的位置和訪問方法的一種 簡潔的表示 ； – 標(biāo)準(zhǔn)的URL由3部分組成：服務(wù)器類型、主機名和路徑及文件 名 http：//www.nankai.edu.cn/index.html 協(xié)議類型 主機名 路徑及地址nnfIP地址 地址n? IP地址是Internet地址的一種表示形式；nn? 一臺Internet主機至少有一個IP地址，而且這個IP地址是全網(wǎng)唯 一的。nn? IP地址長度為32位，采用x.x.x.x的格式來表示，每個x為8位。例 如，202.113.29.119，每個x的值為0～255。這種格式的地址被稱 為點分十進(jìn)制地址；nnf域名nn? 如果WWW服務(wù)器地址 IP地址用點分十進(jìn)制表示，例如為 202.113.19.122，那么用戶很難記??； – 如果告訴用戶WWW服務(wù)器地址用字符表示為 www.nankai.edu.cn，每個字符

都有一定的意義，并且書寫有 一定的規(guī)律，這樣地址用戶就容易理解，又容易記憶，因此 提出了域名的概念； – Internet的域名結(jié)構(gòu)是由TCP/IP協(xié)議集的域名系統(tǒng)（DNS）定 義的； – 域名系統(tǒng)也與IP地址的結(jié)構(gòu)一樣，采用的是典型的層次結(jié)構(gòu)；nnf域名n– 域名系統(tǒng)將整個Internet劃分為多個頂級域，并為每個頂級域規(guī) 定了通用的頂級域名；nn頂級域名 com edu gov int mil net com 國家代碼nn域名類型 商業(yè)組織 教育機構(gòu) 政府部門 國際組織 軍事部門 網(wǎng)絡(luò)支持中心 各種非贏利性組織 各個國家nnf域名n? 我國的域名機制 – 中國互聯(lián)網(wǎng)信息中心（CNNIC）負(fù)責(zé)管理我國的頂級域，它將 cn域劃分為多個二級域； – Internet主機域名的格式為：四級域名.三級域名.二級域名.頂級 域名。例如，主機域名cs.nankai.edu.cn 代表中國南開大學(xué)計 算機系的主機。nnf我國的域名機制nn二級域名 ac com edu gov int net com 行政區(qū)代碼nn域名類型 科研機構(gòu) 商業(yè)組織 教育機構(gòu) 政府部門 國際組織 網(wǎng)絡(luò)支持中心 各種非贏利性組織 我國的各個行政區(qū)nnf? 首頁n? 首頁是網(wǎng)站的門戶。 首頁是網(wǎng)站的門戶。 ? 訪問某個網(wǎng)站，首先打開的第一個網(wǎng)頁就是首頁。例如，要訪問搜狐 訪問某個網(wǎng)站，首先打開的第一個網(wǎng)頁就是首頁。 公司的網(wǎng)站，在IE地址欄中輸入：www.sohu.com，打開的第一個頁 面就是www.sohu.com/index.html。 ? 首頁起網(wǎng)站索引的作用，通過首頁的導(dǎo)航功能去訪問網(wǎng)站中其他的網(wǎng) 首頁起網(wǎng)站索引的作用， 頁。 ? 一般首頁的取名為index.htm或default.htm，“index”的意思是“索 引”，“default”的意思是“默認(rèn)”。nnf超鏈接n? 瀏覽網(wǎng)頁時，當(dāng)鼠標(biāo)指針指向某段文本或是某個圖像，鼠標(biāo)指針 瀏覽網(wǎng)頁時，當(dāng)鼠標(biāo)指針指向某段文本或是某個圖像， 變成小手狀， 變成小手狀，單擊鼠標(biāo)可以打開其他的網(wǎng)頁或是跳轉(zhuǎn)到其他的網(wǎng) 這就是超鏈接。 站，這就是超鏈接。nn? 采用超鏈接技術(shù)可以將不同的網(wǎng)站、網(wǎng)站中的不同網(wǎng)頁、網(wǎng)頁中 采用超鏈接技術(shù)可以將不同的網(wǎng)站、網(wǎng)站中的不同網(wǎng)頁、 的不同位置彼此串在一起，實現(xiàn)相互間的跳轉(zhuǎn)， 的不同位置彼此串在一起，實現(xiàn)相互間的跳轉(zhuǎn)，方便信息的瀏覽 和查找。 和查找。人們通過超鏈接可以很方便很迅速地訪問分布于全球計 算機上的海量資源，實現(xiàn)在互聯(lián)網(wǎng)中的漫游。nn? 超鏈接能使Web服務(wù)存在廣泛和持久的生命力，超鏈接可以說是 超鏈接可以說是 Web的靈魂。 的靈魂。 的靈魂nnfHTTP協(xié)議 協(xié)議: 協(xié)議n超文本傳輸協(xié)議，是www服務(wù)器使用的主要協(xié)議；另有https協(xié)議， 是一種具有安全性的ssl加密傳輸協(xié)議，需要CA申請證書。nnFTP協(xié)議 ： 協(xié)議n文件傳輸?shù)挠脩艏?br>

協(xié)議。通過FTP，用戶與存有大量文件的遠(yuǎn)程計算 機（FTP服務(wù)器）連接，查看遠(yuǎn)程計算機上的文件，然后把文件從遠(yuǎn) 程計算機上復(fù)制到本地的計算機上（稱為下載），或者把本地計算機 上的文件傳送到遠(yuǎn)程計算機上去（稱為上傳）。nnf什么是網(wǎng)頁？？ 什么是網(wǎng)頁？？nn? 究竟什么是網(wǎng)頁？ ? 網(wǎng)頁使用來干什么？ ? 他有什么作用？nnffHTML 靜態(tài)網(wǎng)頁 JavaScript VBScriptn應(yīng)該熟練掌握網(wǎng)頁開發(fā)工 具和相關(guān)工具（圖像處理、 Flash、FireWork等）nnJavanORACLEnnSQLnAccessn/SQL Servernn動態(tài)網(wǎng)頁nC# 應(yīng)該熟練掌握網(wǎng)頁語言， 主要通過程序設(shè)計實現(xiàn)動 態(tài)服務(wù)頁面的開發(fā)。nnJSPnnASP.netnnf靜態(tài)網(wǎng)頁n? 靜態(tài)網(wǎng)頁，就是該網(wǎng)頁文件里沒有程序代碼，只有 該網(wǎng)頁文件里沒有程序代碼， 標(biāo)記， 該網(wǎng)頁文件里沒有程序代碼 只有HTML標(biāo)記， 標(biāo)記 這種網(wǎng)頁文件的后綴為.htm或.html。靜態(tài)網(wǎng)頁一經(jīng)制成，內(nèi)容就 這種網(wǎng)頁文件的后綴為 或 。 不會再變化，不管何時何人訪問，顯示的都是一樣的內(nèi)容，如果要 修改有關(guān)內(nèi)容，就必須修改源代碼，然后重新上傳到服務(wù)器上。 ? 靜態(tài)網(wǎng)頁的工作原理如下：當(dāng)你在瀏覽器里輸入一個網(wǎng)址回車后， 就向服務(wù)器端提出了一個瀏覽網(wǎng)頁的請求。服務(wù)器端接到請求后， 就會找到你要瀏覽的靜態(tài)網(wǎng)頁文件，然后發(fā)送到你的瀏覽器上顯示 出來。nnff動態(tài)網(wǎng)頁n? 動態(tài)網(wǎng)頁，就是該網(wǎng)頁文件不僅含有 該網(wǎng)頁文件不僅含有HTML標(biāo)記，而且含有程序 標(biāo)記， 該網(wǎng)頁文件不僅含有 標(biāo)記 代碼，這種網(wǎng)頁的后綴一般根據(jù)不同的程序設(shè)計語言來定， 代碼，這種網(wǎng)頁的后綴一般根據(jù)不同的程序設(shè)計語言來定，如 ASP文件的后綴為 文件的后綴為.asp。動態(tài)網(wǎng)頁能夠根據(jù)不同的時間、不同的 文件的后綴為 。 來訪者而顯示不同的內(nèi)容，還可以根據(jù)用戶的即時操作和即時請求， 動態(tài)網(wǎng)頁的內(nèi)容發(fā)生相應(yīng)的變化。如常見的BBS、留言板、聊天室 等就是用動態(tài)網(wǎng)頁來實現(xiàn)的。 ? 動態(tài)網(wǎng)頁的工作原理與靜態(tài)網(wǎng)頁有很大的不同。當(dāng)你在瀏覽器里 輸入一個動態(tài)網(wǎng)頁網(wǎng)址回車后，就向服務(wù)器端提出了一個瀏覽網(wǎng)頁 的請求，服務(wù)器端接到請求后，首先會找到你要瀏覽的動態(tài)網(wǎng)頁文 件，然后就執(zhí)行網(wǎng)頁文件中的程序代碼，將含有程序代碼的動態(tài)網(wǎng) 頁轉(zhuǎn)化為標(biāo)準(zhǔn)的靜態(tài)網(wǎng)頁，最后將靜態(tài)網(wǎng)頁發(fā)送給你。nn?SP :Active Server Pages 動態(tài)服務(wù)器主頁，常用vbscript或 javascript為設(shè)計語言，腳本語言，代碼被ASP引擎解釋執(zhí)行。工作 原理：當(dāng)訪問者發(fā)出瀏覽請求時，服務(wù)器自動將ASP的程序代碼解釋 為標(biāo)準(zhǔn)html格式的網(wǎng)頁內(nèi)容，再將其發(fā)送到訪問者的瀏覽器上顯示出 來。ASP比HTML靈活性大。 PHP :Hypertext preprocessor

超文本預(yù)處理器，優(yōu)勢在于運行效 率高，并且是全開放的。 JSP ：使用java語言，代碼被編譯成server并由java虛擬機運行。nnff網(wǎng)頁與網(wǎng)站nn網(wǎng)站是由網(wǎng)頁集合而成 ? 信息資源以網(wǎng)頁的形式存儲在WWW服務(wù)器中； ? 用戶通過瀏覽器向WWW服務(wù)器發(fā)出請求，服務(wù)器根據(jù)客戶請求內(nèi) 容，將保存在WWW服務(wù)器中的某個頁面發(fā)送給客戶； ? 用戶可以通過頁面中的鏈接，方便地訪問位于其他WWW服務(wù)器中 的頁面，或其他類型的網(wǎng)絡(luò)信息資源； ? 主頁（home page）是一種特殊的Web頁面，是指包含個人或機構(gòu) 基本信息的頁面，用于對個人或機構(gòu)進(jìn)行綜合性介紹，是訪問個人 或機構(gòu)詳細(xì)信息的入口點。nnf網(wǎng)頁包含的基本元素： 網(wǎng)頁包含的基本元素：n? 文本（text）：最基本的元素，就是通常所說的文字；nn? 圖像（image）：WWW瀏覽器一般只識別GIF與JPG兩種圖像格式；nn? 表格（table）：類似于Word中的表格，表格單元內(nèi)容一般為字符類型；nn? 超鏈接（hyperlink）：用于將HTML與其他主頁相連。nnf網(wǎng)頁是豐富多彩的nn久久音樂網(wǎng)、一聽音樂網(wǎng)等，同樣是音樂， 給我們的感覺是否完全相同？nnf什么是網(wǎng)頁設(shè)計？？ 什么是網(wǎng)頁設(shè)計？？nn定義 一個成功的網(wǎng)頁設(shè)計n– 首先，在觀念上要確立活躍的思維方式nn特點nn– 其次，要有效地將圖形引入網(wǎng)頁設(shè)計之中，增加人們?yōu)g覽網(wǎng)頁的興趣nn在崇尚鮮明個性風(fēng)格的今天，網(wǎng)頁設(shè)計應(yīng)增加個性化因素。nnf前臺（界面設(shè)計，所謂平面設(shè)計） 前臺（界面設(shè)計，所謂平面設(shè)計） 后臺（程序處理，專業(yè)計算機操作） 后臺（程序處理，專業(yè)計算機操作）nn網(wǎng)頁設(shè)計制作一般分三階段： 網(wǎng)頁設(shè)計制作一般分三階段：n設(shè)計：網(wǎng)頁美化工具（圖像），Photoshop Fireworks Photoshop和Fireworks Photoshop Fireworks等 布局：網(wǎng)頁排版工具，DreamWeaver FrontPage DreamWeaver和FrontPage DreamWeaver FrontPage等。 動畫的添加：網(wǎng)頁美化工具，F(xiàn)lash Swish Flash和Swish Flash Swish等，復(fù)雜網(wǎng)頁要涉足到腳 本程序。nnf? 網(wǎng)頁設(shè)計軟件n– – – – FrontPage Dreamweaver Flash Fireworksnn? 其他技術(shù)n– VBScript、JavaScript – ASP、JSP、PHP – CGI（通用網(wǎng)關(guān)接口，如Delphi、C 等）、IDC（網(wǎng)絡(luò)數(shù)據(jù) 庫接口）、ADO（ActiveX Data Object） – XML（可擴展標(biāo)記語言） – VRML（虛擬現(xiàn)實模型語言）nnf網(wǎng)頁設(shè)計 設(shè)計與交互設(shè)計nUI(U nterface,用戶界面 用戶界面) UI(User Interface,用戶界面) UE或者UX (User Experience,用戶體驗) UX (U Experience,用戶體驗) perience,用戶體驗 UEnn網(wǎng)頁設(shè)計要注意一下幾個方面： 網(wǎng)頁設(shè)計要注意一下幾個方面：n?內(nèi)容及框架結(jié)構(gòu)(Frame Sets) ?圖象區(qū)塊(Image Maps)與flash ?特效等nnf交互設(shè)計n? 交互設(shè)計是人工制品、環(huán)境和

系統(tǒng)的行為，以及傳達(dá)這種行為的 外形元素的設(shè)計與定義。 ? 不像傳統(tǒng)的設(shè)計學(xué)科主要關(guān)注形式，則是關(guān)注內(nèi)容和內(nèi)涵，而交 互設(shè)計首先旨在規(guī)劃和描述事物的行為方式，然后描述傳達(dá)這種 行為的最有效形式。nn交互設(shè)計是一門特別關(guān)注以下內(nèi)容的學(xué)科： 交互設(shè)計是一門特別關(guān)注以下內(nèi)容的學(xué)科： ? 定義與產(chǎn)品的行為和使用密切相關(guān)的產(chǎn)品形式。 ? 預(yù)測產(chǎn)品的使用如何影響產(chǎn)品與用戶的關(guān)系，以及用戶對產(chǎn)品的 理解。 ? 探索產(chǎn)品、人和物質(zhì)、文化、歷史之間的對話。nnfHTML：HyperText Markup Language 超文本標(biāo)記語 ： 言n常見的網(wǎng)頁一般以.htm/.html為后綴的文件，還有就是 ASPPHPJSP等后綴的多種類型。 ?nn語言標(biāo)記： 語言標(biāo)記： ? ? 首部 主體 nnnn nnf? HTML語言是頁面制作的基礎(chǔ)語言，CSS、JAVASCRIPT、PHP、 語言是頁面制作的基礎(chǔ)語言， 語言是頁面制作的基礎(chǔ)語言 、 、 、 ASP、JSP等頁面語言都是以 、 等頁面語言都是以HTML為基礎(chǔ)，嵌入到HTML頁面中按 為基礎(chǔ)，嵌入到 頁面中按 等頁面語言都是以 為基礎(chǔ) 照服務(wù)器端和客戶端分類； 照服務(wù)器端和客戶端分類；HTML、CSS、JAVASCRIPT是基于瀏覽 器的客戶端語言；PHP、ASP、JSP是基于WEB服務(wù)器的服務(wù)器端 語言。 ? 用HTML編寫的超文本文檔稱為 編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作 文檔， 編寫的超文本文檔稱為 文檔 系統(tǒng)平臺（ 系統(tǒng)平臺（如UNIX，WINDOWS等）。 ， 等）。自1990年以來HTML就一直 被用作World Wide Web上的信息表示語言，用于描述網(wǎng)頁的格式設(shè) 計和它與WWW上其它網(wǎng)頁的連結(jié)信息。 ? HTML語言是通過各種標(biāo)記（tags）來標(biāo)識文檔的結(jié)構(gòu)以及標(biāo)識超 語言是通過各種標(biāo)記（ ） 語言是通過各種標(biāo)記 鏈接的信息。 鏈接的信息。HTML語言描述了文檔的結(jié)構(gòu)格式，但并不能精確地定 義文檔信息必須如何顯示和排列，最終在用戶面前的顯示結(jié)果取決于 Web瀏覽器本身的顯示風(fēng)格及其對標(biāo)記的解釋能力。nnfhtml 標(biāo)記及其屬性n? HTML標(biāo)記的格式為：<標(biāo)記>內(nèi)容 ? 標(biāo)記屬性的語法是：<標(biāo)記 屬性1=〝屬性值1〞 屬性2=〝屬性值2 〞…> – 標(biāo)記只是規(guī)定這是什么信息，如文本、圖片、表格等，但是如何 控制這些信息，就需要相關(guān)的屬性值來表示。 – 各屬性之間無先后次序，屬性也可省略（即取默認(rèn)值），如單標(biāo) 記