多媒體技術(shù)與網(wǎng)頁制作_第1頁
多媒體技術(shù)與網(wǎng)頁制作_第2頁
多媒體技術(shù)與網(wǎng)頁制作_第3頁
多媒體技術(shù)與網(wǎng)頁制作_第4頁
多媒體技術(shù)與網(wǎng)頁制作_第5頁
已閱讀5頁，還剩42頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

超文本與超媒體超文本這一術(shù)語最早由美國人納爾松（T.Nelson）在60年代正式提出來。超文本（Hypertext）和超媒體(HyperMedia)是按人腦的聯(lián)想思維方式非線性地組織管理信息的一種先進(jìn)技術(shù)。一種新型的管理文本或媒體信息的技術(shù)。隨著多媒體技術(shù)的發(fā)展，計(jì)算機(jī)中表達(dá)信息的媒體已不再限于文字與數(shù)字，超文本中也廣泛采用圖形、圖像、音頻、視頻等媒體元素來表達(dá)思想。這時(shí)人們改稱超文本為“超媒體”。超媒體的三要素（超媒體組成）節(jié)點(diǎn)：節(jié)點(diǎn)是信息表達(dá)單元。節(jié)點(diǎn)中表達(dá)信息的媒體可以是文本、圖形、圖像、動(dòng)畫、音頻、視頻，甚至可以是一段計(jì)算機(jī)程序。鏈：鏈?zhǔn)遣煌?jié)點(diǎn)信息單元之間的邏輯聯(lián)系，它的主要用途是模擬人腦思維的自由聯(lián)想。網(wǎng)：網(wǎng)是由節(jié)點(diǎn)和鏈構(gòu)成一個(gè)網(wǎng)絡(luò)有向圖。在這個(gè)網(wǎng)中節(jié)點(diǎn)可以看作是對(duì)單一概念或思想的表達(dá)，而節(jié)點(diǎn)之間的鏈則表示概念之間的語境關(guān)聯(lián)（上下文關(guān)系）。超鏈接超鏈接是WWW上的一種鏈接技巧,它通過已定義好的關(guān)鍵字和圖形,只要您點(diǎn)取某個(gè)圖標(biāo)或某段文字,就可以自動(dòng)連上相對(duì)應(yīng)的其他文件。靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁使用HTML語言，動(dòng)態(tài)網(wǎng)頁使用HTML和ASP/PHP/JSP等。靜態(tài)網(wǎng)頁技術(shù)不需要程序在服務(wù)器端運(yùn)行，而動(dòng)態(tài)網(wǎng)頁技術(shù)則需要在服務(wù)器端運(yùn)行有關(guān)程序，以滿足不同客戶的不同需求，并返回不同的網(wǎng)頁。例如申請(qǐng)電子郵件的過程。靜態(tài)網(wǎng)頁的特點(diǎn)每個(gè)網(wǎng)頁都有一個(gè)固定的URL，且網(wǎng)頁URL以.htm、.html等常見形式為后綴；每個(gè)靜態(tài)網(wǎng)頁都是一個(gè)獨(dú)立的文件，并保存在網(wǎng)站服務(wù)器上；內(nèi)容相對(duì)穩(wěn)定；沒有數(shù)據(jù)庫的支持，在網(wǎng)站制作和維護(hù)方面工作量較大；交互性較差。動(dòng)態(tài)網(wǎng)頁的特點(diǎn)以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，可以大大降低網(wǎng)站維護(hù)的工作量；可以實(shí)現(xiàn)更多的功能，如用戶注冊(cè)、用戶登錄、在線調(diào)查、用戶管理、訂單管理等；動(dòng)態(tài)網(wǎng)頁實(shí)際上并不是獨(dú)立存在于服務(wù)器上的網(wǎng)頁文件，只有當(dāng)用戶請(qǐng)求時(shí)服務(wù)器才返回一個(gè)完整的網(wǎng)頁。制作網(wǎng)站的基本流程1、定位網(wǎng)站的主題和名稱主題小而精。選擇自己擅長和喜愛的內(nèi)容。題材不要太濫。目標(biāo)不要太高。很難超越已有的優(yōu)秀網(wǎng)站。名稱名稱要正。合理合法。易記。不要太長，便于其他網(wǎng)站的鏈接和排版要有特色。2、確定網(wǎng)站的風(fēng)格風(fēng)格服務(wù)于內(nèi)容設(shè)計(jì)網(wǎng)站的標(biāo)志LOGO設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體設(shè)計(jì)網(wǎng)站的宣傳語使用統(tǒng)一的語氣和人稱……3、確定網(wǎng)站的組織結(jié)構(gòu)/目錄結(jié)構(gòu)確定網(wǎng)站的鏈接：頁面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)樹狀鏈接結(jié)構(gòu)、星狀鏈接結(jié)構(gòu)首頁欄目一欄目二欄目三1234567首頁欄目一12欄目三67欄目二345首頁欄目一12欄目三67欄目二3454、設(shè)計(jì)與制作網(wǎng)頁4.1網(wǎng)頁的設(shè)計(jì)網(wǎng)頁構(gòu)成要素網(wǎng)頁布局網(wǎng)頁構(gòu)成要素網(wǎng)頁：網(wǎng)站的基本信息單元，是萬維網(wǎng)的基本文檔?；驹兀何谋竞蛨D片超級(jí)鏈接動(dòng)畫表單音頻、視頻網(wǎng)頁的布局頁面標(biāo)題：標(biāo)識(shí)和說明網(wǎng)頁的性質(zhì)和內(nèi)容網(wǎng)站標(biāo)識(shí)LOGO：代表網(wǎng)站的形象。一般會(huì)放在網(wǎng)頁上最顯眼的地方，以加深瀏覽者對(duì)網(wǎng)站的印象。頁眉：放置網(wǎng)站最希望瀏覽者關(guān)注的內(nèi)容。導(dǎo)航：提供欄目索引，使網(wǎng)站方便易用。內(nèi)容：網(wǎng)站的精神所在，一般都有方向性。4.2素材的搜集、制作搜集、整理加工、制作、存儲(chǔ)網(wǎng)站所需素材4.3制作網(wǎng)頁選擇網(wǎng)頁制作工具，制作網(wǎng)頁Dreamweaver、Frontpage5、測試與發(fā)布網(wǎng)站申請(qǐng)域名測試網(wǎng)站發(fā)布網(wǎng)站Dreamweaver8.0的使用(1)要點(diǎn)創(chuàng)建和管理站點(diǎn)創(chuàng)建簡單網(wǎng)頁利用表格、布局、框架進(jìn)行網(wǎng)頁布局站點(diǎn)管理新建站點(diǎn)站點(diǎn)/新建站點(diǎn)OR站點(diǎn)/編輯站點(diǎn)/新建注意：不要用中文名字來命名站點(diǎn)，容易出錯(cuò)在站點(diǎn)文件夾下，建立專門的image文件夾來存放圖片等信息刪除站點(diǎn)站點(diǎn)/編輯站點(diǎn)/單擊要?jiǎng)h除的站點(diǎn)/刪除添加既有文件夾為站點(diǎn)在“文件”面板中，單擊“管理站點(diǎn)”；選擇“新建”/站點(diǎn)，為站點(diǎn)取一個(gè)名字，單擊下一步；選擇“否，我不想使用服務(wù)器技術(shù)”，單擊下一步；存儲(chǔ)位置：選擇存放站點(diǎn)文件的文件夾，例如“E:\本科生教學(xué)\多媒體技術(shù)與網(wǎng)頁制作\2008-2009年第二學(xué)期\網(wǎng)頁制作案例\”，表示所有html文件及有關(guān)素材都存放在“網(wǎng)頁制作案例”文件夾下，單擊下一步；在“您如何連接到遠(yuǎn)程服務(wù)器”中，選擇“無”，單擊下一步；單擊“完成”。例1：簡單網(wǎng)頁的制作創(chuàng)建網(wǎng)頁文檔保存和關(guān)閉網(wǎng)頁文檔打開網(wǎng)頁文檔預(yù)覽網(wǎng)頁例如創(chuàng)建網(wǎng)頁文檔選擇“文件”/”新建”命令在彈出的“新建文檔”對(duì)話框中，在“常規(guī)”選項(xiàng)卡的“類別”列表框中選擇“基本頁”在“基本頁”中選擇“HTML”選擇“創(chuàng)建”輸入文字在網(wǎng)頁中輸入詩句，每輸入一行，按回車鍵換行；選中所有文字，在屬性面板上選擇文字居中，并設(shè)置文字的大小、顏色等注意：在html文檔的標(biāo)題欄中輸入：楓橋夜泊。保存和關(guān)閉網(wǎng)頁文檔選擇“文件”菜單中“保存”命令即可保存網(wǎng)頁文檔。選擇“文件”菜單中“關(guān)閉”命令即可關(guān)閉網(wǎng)頁文檔。注意：在Dreamweaver中保存網(wǎng)頁文檔時(shí)，文件的名稱最好使用英文和數(shù)字，而不要使用中文。如果是主頁，文件名稱一般為index.html打開和預(yù)覽網(wǎng)頁文檔選擇“文件”菜單中“打開”命令，在“打開”對(duì)話框中的“查找范圍”下拉列表框中選擇網(wǎng)頁所在的位置，選中需要打開的網(wǎng)頁后，單擊“打開”按鈕即可打開網(wǎng)頁文檔。選擇“文件”菜單/“在瀏覽器中預(yù)覽”/”IExplore6.0”可以預(yù)覽網(wǎng)頁。HTML標(biāo)記語言標(biāo)記：在HTML中用于描述功能的符號(hào)。必須用<>括起來。單標(biāo)記：只需單獨(dú)使用就能完整地表達(dá)意思的標(biāo)記。如<BR>（強(qiáng)制換行）雙標(biāo)記：由“始標(biāo)記”和“尾標(biāo)記”兩部分構(gòu)成，必須成對(duì)使用。如<HEAD></HEAD>HTML標(biāo)記語言（續(xù)）標(biāo)記屬性在單標(biāo)記和雙標(biāo)記中可以包含的一些屬性語法：<標(biāo)記名稱屬性1屬性2屬性3…>如：<fontsize=“”color=“”…>具體文字</font>說明：各屬性之間無先后次序，屬性也可以省略。如省略，則取默認(rèn)值。注釋語句可以放在任何地方，不會(huì)在瀏覽器中顯示出來目的是方便設(shè)計(jì)人員的閱讀和理解HTML基本結(jié)構(gòu)<HTML> HTML文件開始

<HEAD>

文件頭開始文件頭

</HEAD>

文件頭結(jié)束

<BODY>

文件體開始 文件體

</BODY>

文件體結(jié)束</HTML> HTML文件結(jié)束文字格式標(biāo)記用于設(shè)置網(wǎng)頁中普通文字的顯示效果格式<FONTface=“字體”size=“字號(hào)”color=“顏色”>文字</FONT>字體：如黑體、宋體、隸書等字號(hào)：1~7；+n；-n。N的基準(zhǔn)值為3顏色：red、white、black等；16進(jìn)制的RGB顏色，如紅色#FF0000段落標(biāo)記設(shè)置文章段落的開始和結(jié)束格式<Palign=“對(duì)齊方式”>…</P>對(duì)齊方式：取值可為left,right,center例2：利用表格布局網(wǎng)頁在開始制作網(wǎng)頁之前，要做好如下準(zhǔn)備：應(yīng)該對(duì)網(wǎng)站的頁面數(shù)量、頁面與頁面之間的關(guān)系有設(shè)計(jì)應(yīng)該對(duì)要制作的每一個(gè)網(wǎng)頁頁面的布局有設(shè)計(jì)應(yīng)該把所有要用到的素材準(zhǔn)備好頁面屬性的設(shè)置在屬性面板中，選擇“頁面屬性”選項(xiàng)，即可，如下：利用表格布局新建html文檔，并保存到站點(diǎn)文件夾下面。在“常用”插入欄中，單擊表格按鈕，插入一個(gè)6行1列的表格，并設(shè)置表格寬度為701，邊框粗細(xì)、單元格間距、單元格邊距均為0。選擇表格，在“屬性”面板“對(duì)齊”下拉列表框中選擇“居中對(duì)齊”。將鼠標(biāo)定位到第4行的單元格中，選擇“常用”插入欄中的表格按鈕，插入一個(gè)1行2列的表格，表格寬度為619像素。其余為0。利用表格布局（續(xù)）將鼠標(biāo)定位到嵌套表格的最后，插入一個(gè)1行5列、寬度為643像素、單元格間距為5、單元格邊距為4的表格。將鼠標(biāo)定位到1行5列嵌套表格的最后，插入一個(gè)1行2列、表格寬度619像素、其余為0的表格。將鼠標(biāo)定位到1行2列嵌套表格的最后，插入一個(gè)1行4列、表格寬度643像素、單元格間距為5、單元格邊距為4的表格。將鼠標(biāo)定位到整個(gè)表格的最后一行，插入一個(gè)3行1列、表格寬度701像素的表格。設(shè)置表格背景選中整個(gè)大表格，在屬性面板中，選擇背景圖像為：bb_bg.gif。選中由第4行拆分的表格，方法是將鼠標(biāo)定位在該表格的最前面，然后單擊<td>，然后再屬性面板中，選擇背景顏色為：#FFFFFF。往表格中添加內(nèi)容將已經(jīng)制作好的素材存放到站點(diǎn)文件夾下，利用“插入”菜單中的有關(guān)命令往表格中添加相應(yīng)的內(nèi)容：動(dòng)畫、圖像表格的創(chuàng)建和刪除創(chuàng)建表格插入菜單、常用工具欄表格對(duì)話框的設(shè)定表格屬性的設(shè)定明邊框和暗邊框（是否為0）刪除表格表格的編輯選取表格、單元格、行、列；相鄰或者不相鄰單元格、行、列的屬性設(shè)置單元格的合并和拆分插入/刪除行或列表格的嵌套單擊現(xiàn)有表格中的一個(gè)單元格，選擇“插入”>“表格”。表格格式設(shè)置的優(yōu)先順序如下：單元格、行、表格Photoshop中的切片工具切片的作用：許多網(wǎng)頁（比如歡迎頁面）為了追求更好的視覺效果，往往采用一整幅圖片來布局網(wǎng)頁。而網(wǎng)頁圖像設(shè)計(jì)與一般平面設(shè)計(jì)的最大區(qū)別正是圖像大小與圖像下載速度。為了加快下載速度，常常需要將一張整圖切割成若干部分，分別進(jìn)行壓縮和優(yōu)化，不僅能縮小圖像的體積，還可以分別設(shè)置不同的參數(shù)和制作

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論