網(wǎng)頁設(shè)計與制作ppt課件.ppt

網(wǎng)頁設(shè)計與制作綜述 網(wǎng)頁設(shè)計與制作綜述 學(xué)習(xí)要點 網(wǎng)頁和網(wǎng)站網(wǎng)頁類型網(wǎng)頁的基本構(gòu)成元素網(wǎng)頁制作常用軟件和技術(shù)網(wǎng)站策劃與設(shè)計流程HTML語言基礎(chǔ)知識 學(xué)習(xí)任務(wù) 認(rèn)識網(wǎng)頁 互聯(lián)網(wǎng)是一個蘊藏著無窮資源的寶庫 在資源共享和信息交換方面具有得天獨厚的優(yōu)勢 網(wǎng)頁則正是這些資源和信息重要的傳遞載體 網(wǎng)頁不但可以提供文字 圖片 多媒體信息的瀏覽 并且網(wǎng)絡(luò)在娛樂 商務(wù)及各種領(lǐng)域的應(yīng)用例如電子郵件 聊天室 搜索引擎 網(wǎng)上交易 電子政務(wù)等都離不開網(wǎng)頁 什么是網(wǎng)頁 網(wǎng)頁是一種可以在互聯(lián)網(wǎng)上傳輸 能被瀏覽器認(rèn)識和翻譯成頁面并顯示出來的文件 網(wǎng)頁是網(wǎng)站的基本構(gòu)成元素 網(wǎng)頁實際上就是一個文件 一般網(wǎng)頁上都會有文本和圖片等信息 而復(fù)雜一些的網(wǎng)頁上還會有聲音 視頻 動畫等多媒體內(nèi)容 網(wǎng)頁比報紙 廣播 電視等傳統(tǒng)媒介在信息傳遞上更加迅速 多樣化 交互能力更強 網(wǎng)頁類型 網(wǎng)頁分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁兩種類型 靜態(tài)網(wǎng)頁就是設(shè)計者做什么樣 在客戶端瀏覽時就顯示什么樣 而動態(tài)網(wǎng)頁可以根據(jù)不同的用戶顯示不同的頁面 1 靜態(tài)網(wǎng)頁 靜態(tài)網(wǎng)頁的基本特點歸納如下 靜態(tài)網(wǎng)頁每個網(wǎng)頁都有一個固定的URL 且網(wǎng)頁URL以 htm html shtml等常見形式為后綴 而不含有 網(wǎng)頁內(nèi)容一經(jīng)發(fā)布到網(wǎng)站服務(wù)器上 無論是否有用戶訪問 每個靜態(tài)網(wǎng)頁的內(nèi)容都是保存在網(wǎng)站服務(wù)器上的 靜態(tài)網(wǎng)頁的內(nèi)容相對穩(wěn)定 因此容易被搜索引擎檢索 靜態(tài)網(wǎng)頁沒有數(shù)據(jù)庫的支持 靜態(tài)網(wǎng)頁的交互性較差 在功能方面有較大的限制 2 動態(tài)網(wǎng)頁 動態(tài)網(wǎng)頁的基本特點歸納如下 動態(tài)網(wǎng)頁以數(shù)據(jù)庫技術(shù)為基礎(chǔ) 可以大大降低網(wǎng)站維護的工作量 采用動態(tài)網(wǎng)頁技術(shù)的網(wǎng)站可以實現(xiàn)更多的功能 動態(tài)網(wǎng)頁實際上并不是獨立存在于服務(wù)器上的網(wǎng)頁文件 只有當(dāng)用戶請求時服務(wù)器才返回一個完整的網(wǎng)頁 動態(tài)網(wǎng)頁中的 對搜索引擎檢索存在一定的問題 什么是網(wǎng)站網(wǎng)址與域名網(wǎng)頁的基本構(gòu)成元素網(wǎng)頁制作常用軟件和技術(shù) 學(xué)習(xí)任務(wù) 認(rèn)識網(wǎng)站 學(xué)習(xí)任務(wù) 認(rèn)識網(wǎng)站 根據(jù)提供服務(wù)的不同 通常把提供網(wǎng)頁服務(wù)的服務(wù)器稱為web服務(wù)器 相關(guān)網(wǎng)站稱為web站點 網(wǎng)站是提供各種信息和服務(wù)的基地 如用戶熟悉的搜狐 新浪 雅虎等都是網(wǎng)站 網(wǎng)站是由很多網(wǎng)頁鏈接在一起組成的 用戶瀏覽到一個網(wǎng)站時看到的第一個頁面叫做主頁 1 網(wǎng)址與域名 網(wǎng)址瀏覽網(wǎng)頁時 在瀏覽器地址欄中輸入的諸如就是一個網(wǎng)址 瀏覽器訪問網(wǎng)頁是由URL UniformResourceLocator 統(tǒng)一資源定位器的方式來實現(xiàn)的 2 域名域名就是網(wǎng)站的名稱 企業(yè)在注冊域名時一般都會申請一個符合網(wǎng)站特點的域名 甚至?xí)延蛎醋髌髽I(yè)的網(wǎng)上商標(biāo) 2 網(wǎng)頁的基本構(gòu)成元素 文本元素圖像元素動畫元素超鏈接 3 網(wǎng)頁制作常用軟件和技術(shù) 網(wǎng)頁編輯排版軟件Dreamweaver網(wǎng)頁圖像制作軟件Photoshop和Fireworks網(wǎng)頁動畫制作軟件Flash網(wǎng)頁標(biāo)簽語言HTML網(wǎng)頁腳本語言JavaScript動態(tài)交互式網(wǎng)頁編程語言 網(wǎng)站建設(shè)基本流程 網(wǎng)站的需求分析規(guī)劃站點結(jié)構(gòu)收集素材設(shè)計與制作網(wǎng)站網(wǎng)站的發(fā)布 第1章DreamweaverCS3入門 第1章DreamweaverCS3入門 本章學(xué)習(xí)要點 DreamweaverCS3的主要功能和特點DreamweaverCS3的操作環(huán)境利用DreamweaverCS3制作網(wǎng)頁利用DreamweaverCS3創(chuàng)建并管理站點 認(rèn)識DreamweaverCS3 AdobeDreamweaverCS3是網(wǎng)頁設(shè)計與制作領(lǐng)域中用戶最多 應(yīng)用最廣 功能最強的軟件 它將可視布局工具 應(yīng)用程序開發(fā)功能和代碼編輯支持組合在一起 其功能強大 使得各個層次的開發(fā)人員和設(shè)計人員都能夠快速創(chuàng)建吸引人的 基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序 Dreamweaver與用于制作網(wǎng)頁矢量動畫的Flash 制作網(wǎng)頁圖像的Fireworks并稱為 網(wǎng)頁制作三劍客 DreamweaverCS3的主要功能 支持最新的Web技術(shù)供兩個選擇 既可以在直觀的可視布局界面中工作 又可以在簡化的編碼環(huán)境中工作借助AdobeDreamweaverCS3軟件 用戶可以快速 輕松地完成設(shè)計 開發(fā)與維護網(wǎng)站和Web應(yīng)用程序的全過程新增功能 Ajax的Spry框架 Spry構(gòu)件 Spry效果 高級PhotoshopCS3集成 瀏覽器兼容性檢查 AdobeCSSAdvisor CSS布局 管理SS AdobeDeviceCentral AdobeBridgeCS3 DreamweaverCS3操作環(huán)境介紹 本地站點的規(guī)劃與創(chuàng)建 利用Dreamweaver制作網(wǎng)頁步驟 規(guī)劃站點創(chuàng)建站點利用站點對文件進行管理 站點的概念 所謂站點 可以看作是一系列文檔的組合 這些文檔通過各種鏈接建立邏輯關(guān)聯(lián) 用戶在建立網(wǎng)站前必須要建立站點 修改某網(wǎng)頁內(nèi)容時 也必須打開站點 然后修改站點內(nèi)的網(wǎng)頁 規(guī)劃站點 站點的規(guī)劃 包括站點的目錄結(jié)構(gòu) 鏈接結(jié)構(gòu) 模板和庫的使用 網(wǎng)站的目錄結(jié)構(gòu)是網(wǎng)站組織和存放站內(nèi)所有文檔的目錄設(shè)置情況 網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間的相互鏈接關(guān)系模板和庫 可以在不同的文檔中重用頁面布局和頁面元素 給網(wǎng)頁的維護帶來很大的方便 創(chuàng)建本地站點 本地站點實際上是位