網頁製作教程

網頁製作教程

網頁製作教程是針對普通用戶學習製作網頁的相關教程,簡單來說,網頁製作的目的就是產生網站,什麼是網站呢,就是伺服器內的一系列網頁的組合,終端用戶發出請求後伺服器通過傳輸特定的網頁向用戶傳輸所需的信息。

基本信息

簡介

網頁製作教程
網頁製作教程是指使用標識語言,通過一系列設計、建模、和執行的過程將電子格式的信息通過網際網路傳輸,最終以圖形用戶界面(GUI)的形式被用戶所瀏覽,簡單來說,網頁設計的目的就是產生網站,什麼是網站呢,就是伺服器內的一系列網頁的組合,終端用戶發出請求後[[伺服器通過傳輸特定的網頁向用戶傳輸所需的信息。簡單的信息如文字,圖片(GIFs,JPEGs,PNGs)和表格,都可以通過使用HTML/XHTML/XML放置到網站頁面上。而更複雜的信息如vector graphics,動畫,視頻,聲頻則需要外掛程式程式例如Flash, QuickTime, Java run-time environment,等等,這些外掛程式程式也是通過HTML/XHTML/XML植入網頁的。隨著瀏覽器和W3C標準一致性的改善,XHTML/XML(可擴展標識語言)與CSS(層疊樣式表)共同用作網頁內容的設計已經被廣泛的接受和使用。最新的標準和建議則是朝著瀏覽器的能力擴充和改善發展,使之能夠不需要外掛程式程式也能夠給用戶傳輸多媒體信息和更多的選擇。

內容簡介

本書系統全面地介紹網頁製作技術的基本理論和實際套用。全書共10章,分為3大部分。前5章為第1部分,主要介紹網頁製作的基本理論——HTML,同時穿插介紹Fireworks,Flash,Anfy軟體在網頁製作過程中的套用;第6章~第8章為第2部分,主要介紹網頁製作技術,包括CSS技術、客戶端腳本技術(DHTML)以及XML技術;第9章~第10章為第3部分,主要介紹當前最流行的網頁製作工具——Dreamweaver,以及提供12個實訓項目,使讀者能夠從實際套用的角度進一步鞏固所學知識。 本書以實用為基本的出發點,不但包括各種網頁製作技術的基礎理論,而且強調網頁製作的具體套用,使讀者既能打下堅實的理論基礎,又能掌握實際的操作技能。
本書可作為高等職業學校、成人高校、本科院校設立的二級職業技術學院和培訓班講授網頁製作課程的教材或參考書,也適合廣大網頁製作愛好者或相關從業人員自學之用。

圖書目錄

第1章 HTML基礎 1
1.1 什麼是HTML 1
1.1.1 網頁的基本概念 1
1.1.2 HTML的工作原理 3
1.1.3 創建和測試網頁 5
1.1.4 網頁製作工具 6
1.2 創建網頁 7
1.2.1 標記符基礎 7

1.2.2 網頁的基本結構 8
1.2.3 設定頁面屬性 11
1.2.4 添加注釋 13
1.2.5 顯示特殊字元 14
1.3 發布網頁 14
1.3.1 創建本地站點 14
1.3.2 申請網頁空間 14
1.3.3 用FTP上傳網頁 15
練習題 16
第2章 文本格式 18
2.1 文本分段 18
2.1.1 段落標記符P和換行標記符BR 18

2.1.2 水平線標記符HR 19
2.1.3 標題標記符Hn 21
2.1.4 段落對齊 22
2.2 控制文本的顯示效果 25
2.2.1 字型控制標記符FONT 25
2.2.2 物理字元樣式 28
2.2.3 邏輯字元樣式 29
2.2.4 滾動字幕效果 30
2.3 列表格式 32
2.3.1 有序列表 32
2.3.2 無序列表 33
2.4 創建超連結 34
2.4.1 相對地址與絕對地址 35
2.4.2 頁面連結 36
2.4.3 錨點連結 37
2.4.4 電子郵件連結 38
2.5 網站實例 39
2.5.1 網站規劃 40
2.5.2 頁面設計 41
2.5.3 代碼實現 42
練習題 46
第3章 使用圖像 48

圖像處理圖像處理

3.1 網頁圖像基礎 48
3.1.1 點陣圖與矢量圖 48
3.1.2 網頁圖像格式 49
3.1.3 使用網頁圖像的要點 51
3.2 圖像處理基本操作 51
3.2.1 Fireworks的界面 51
3.2.2 修改圖像的大小 53
3.2.3 用適當的格式導出圖像 53
3.2.4 製作GIF動畫 55
3.3 圖像標記符IMG 57
3.3.1 插入圖像 57
3.3.2 設定圖像屬性 58
3.4 使用圖像映射 61
3.4.1 什麼是圖像映射 61
3.4.2 創建圖像映射 61
練習題 62
第4章 表格與框架 63
4.1 創建表格 63
4.1.1 表格的基本構成 63
4.1.2 合併單元格 65
4.1.3 構造表格的步驟 65
4.2 表格的屬性設定 66
4.2.1 框線與分隔線 66
4.2.2 控制單元格空白 68
4.2.3 表格的對齊 69
4.3 使用表格設計網頁布局 71
4.3.1 控制表格和單元格大小 71

4.3.2 設定表格和單元格的背景 72
4.3.3 使用嵌套表格 73
4.3.4 表格布局綜合套用 74
4.4 創建框架 78
4.4.1 什麼是框架 79
4.4.2 指定框架結構 79

4.4.3 框架的嵌套 82
4.4.4 框架的初始化 83
4.5 控制框架的顯示效果 85
4.5.1 框線效果 85
4.5.2 設定框架空白 86
4.6 使用框架設計網頁布局 87
4.6.1 指定超連結的目標框架 87
4.6.2 使用頁內框架 89
練習題 91
第5章 表單與特殊對象 95
5.1 創建表單 95
5.1.1 什麼是表單 95
5.1.2 表單控制項的類型 97
5.1.3 FORM標記符 98
5.2 創建表單控制項 99

5.2.1 文本框與口令框 99
5.2.2 複選框與單選框 100
5.2.3 檔案選擇框 101
5.2.4 按鈕 102
5.2.5 多行文本框 104
5.2.6 選項選單 105
5.3 設定控制項的標籤 106
5.4 網頁中的特殊對象 108
5.4.1 多媒體對象 108
5.4.2 Java小應用程式對象 110
5.5 創建Flash對象 113

文本框文本框

5.5.1 什麼是Flash 114
5.5.2 創建逐幀動畫 116
5.5.3 創建形狀補間動畫 120
5.5.4 創建補間動畫 123
練習題 128
第6章 CSS技術 130
6.1 CSS入門 130
6.1.1 什麼是CSS 130
6.1.2 CSS的屬性單位 131
6.2 在網頁中使用CSS 133
6.2.1 在標記符中直接嵌套樣式信息 133
6.2.2 在STYLE標記符中定義樣式信息 133
6.2.3 連結外部樣式表中的樣式信息 134
6.2.4 樣式的優先權 135
6.3 CSS樣式定義 136
6.3.1 HTML標記符選擇器 136
6.3.2 具有上下文關係的HTML標記符選擇器 137
6.3.3 用戶定義的類選擇器 137
6.3.4 用戶定義的ID選擇器 138
6.3.5 虛類選擇器 138
6.4 CSS屬性 138
6.4.1 字型與文本屬性 139
6.4.2 顏色與背景屬性 142
6.4.3 布局屬性 144
6.4.4 定位和顯示屬性 150
6.4.5 列表屬性 153
6.4.6 滑鼠屬性 154
6.5 CSS過濾器效果 154
6.5.1 過濾器屬性列表 154
6.5.2 過濾器效果示例 156
練習題 158
第7章 JavaScript與DHTML技術 160
7.1 使用客戶端腳本 160
7.1.1 使用SCRIPT標記符 160
7.1.2 直接添加腳本 162
7.1.3 連結腳本檔案 162
7.2 JavaScript簡介 163
7.2.1 JavaScript語言基礎 163
7.2.2 使用JavaScript對象 169
7.2.3 使用瀏覽器對象 174
7.3 DHTML技術 181
7.3.1 什麼是DHTML 181
7.3.2 DHTML套用示例 183
練習題 187
第8章 XML入門 189
8.1 什麼是XML 189
8.1.1 XML的定義 189
8.1.2 XML和HTML的不同 190
8.1.3 XML的套用 191
8.1.4 XML相關技術 192
8.2 XML文檔規則 193
8.2.1 XML文檔的有效性 193
8.2.2 XML的語法 193
8.3 顯示XML文檔 195
8.3.1 直接查看XML文檔 195
8.3.2 用CSS顯示XML文檔 196
8.3.3 用XSL顯示XML文檔 197
8.3.4 在HTML中嵌入XML數據 199
8.3.5 用JavaScript顯示XML數據 201
8.4 檔案類型定義 203
8.4.1 什麼是DTD 203
8.4.2 DTD檔案聲明 204
8.4.3 元素的聲明 205
8.4.4 屬性的聲明 207
8.4.5 實體的聲明 208
8.4.6 驗證XML 208
8.5 XML模式 209
8.5.1 XML模式基礎 209
8.5.2 使用模式定義簡單類型 211
8.5.3 使用模式定義複雜類型 213
8.6 XML樣式表(XSL) 219
8.6.1 XSL簡介 220
8.6.2 使用XSLT將XML轉換為XHTML 220
8.7 XML編程接口 225
8.7.1 DOM 225
8.7.2 SAX 227
練習題 227
第9章 用Dreamweaver製作網頁 229
9.1 Dreamweaver的界面 229
9.1.1 Dreamweaver的界面元素 229
9.1.2 設定文檔視窗 231
9.2 創建與管理站點 233
9.2.1 網站開發流程 233
9.2.2 創建本地站點 237
9.2.3 管理本地站點 238
9.2.4 創建與管理遠程站點 239
9.3 文本修飾與超連結 240
9.3.1 製作網頁的一般過程 240
9.3.2 設定字元格式 241
9.3.3 設定段落格式 243
9.3.4 設定列表格式 243
9.3.5 使用超連結 244
9.4 使用圖像 246
9.4.1 插入圖像 246
9.4.2 設定圖像屬性 247
9.4.3 製作圖像映射 247
9.4.4 製作滑鼠經過圖像效果 248
9.5 使用多媒體對象 249
9.5.1 使用聲音與視頻 249
9.5.2 使用Flash對象 250
9.6 設計頁面版式 250
9.6.1 使用表格排版 251
9.6.2 使用層排版 257
9.6.3 使用框架排版 259
9.7 表單與行為 263
9.7.1 創建表單 264
9.7.2 創建表單控制項 265
9.7.3 添加表單控制項標籤 268
9.7.4 行為的概念與基本操作 269
9.7.5 使用Dreamweaver自帶的行為動作 270
9.8 使用CSS樣式 275
9.8.1 創建與編輯CSS樣式 275
9.8.2 套用CSS樣式 277
9.8.3 創建和連結外部CSS樣式表 278
練習題 279
第10章 實際技能訓練 281
10.1 實訓1——基本HTML檔案的編輯 281
10.2 實訓2——設定文本格式 281
10.3 實訓3——使用超連結和建立站點 282
10.4 實訓4——使用圖像 282
10.5 實訓5——使用表格 283
10.6 實訓6——使用框架 283
10.7 實訓7——使用表單 284
10.8 實訓8——製作Flash動畫 284
10.9 實訓9——使用CSS樣式表 285
10.10 實訓10——使用JavaScript與DHTML 285
10.11 實訓11——使用XML 286
10.12 實訓12——使用Dreamweaver 286
附錄1 HTML顏色表 288
附錄2 HTML 4.0快速參考 291
附錄2.1 通用屬性 291
附錄2.2 HTML文檔結構元素 291
附錄2.3 文本元素 292
附錄2.4 字型樣式元素 294
附錄2.5 列表元素 295
附錄2.6 表格元素 296
附錄2.7 框架元素 297

附錄2.8 表單元素 298
附錄2.9 其他元素 299
附錄3 Internet網址集粹 304

編輯推薦

隨著網路技術的不斷發展,網路套用已經逐步滲透到了人類社會的各行各業。網頁製作也隨之成為最熱門的網路套用技術。本書詳細介紹了網頁基礎知識、Dreamweaver和Flash套用,並用綜合實例提升讀者的網頁編程能力。

網頁製作教程基礎入門

最開始,網頁呈現在你面前的時候,它就好像一張白紙,它需要你任意揮灑你的設計才思。在開始的時候,你需要明白,雖然你能控制一切你所能控制的東西,但假如你知道什麼是一種約定俗成的標準或者說大多數訪問者的瀏覽習慣,那么你可以在此基礎上加上自己的東西。你當然也可以創造出自己的設計方案,但如果你是初學者,那么最好明白網站製作的基本概念。

1.頁面尺寸:

由於頁面尺寸和顯示器大小及解析度有關係,網頁的局限性就在於你無法突破顯示器的範圍,而且因為瀏覽器也將占去不少空間,留下給你的頁面範圍變得越來越小。一般解析度在800x600的情況下,頁面的顯示尺寸為:780x428個象素;解析度在640x480的情況下,頁面的顯示尺寸為:620X311個象素;解析度在1024X768的情況下,頁面的顯示尺寸為:1007x600。從以上數據可以看出,解析度越高頁面尺寸越大。 瀏覽器的工具列也是影響頁面尺寸的原因。一般目前的瀏覽器的工具列都可以取消或者增加,那么當你顯示全部的工具列時,和關閉全部工具列時,頁面的尺寸是不一樣的。 在網站製作過程中,向下拖動頁面是惟一給網頁增加更多內容(尺寸)的方法。但我想提醒大家除非你能肯定站點的內容能吸引大家拖動,否則不要讓訪問者拖動頁面超過三屏。如果需要在同一頁面顯示超過三屏的內容,那么你最好能在上面做上頁面內部連線,方便訪問者瀏覽。

2.整體造型:

什麼是造型,造型就是創造出來的物體形象。這裡是指頁面的整體形象,這種形象應該是一個整體,圖形與文本的接合應該是層疊有序。雖然,顯示器和瀏覽器都是矩形,但對於頁面的造型,你可以充分運用自然界中的其它形狀以及它們的組合:矩形,圓形,三角形,菱形等。 對於不同的形狀,它們所代表的意義是不同的。比如矩形代表著正式,規則,你注意到很多ICP和政府網頁都是以矩形為整體造型;圓形帶表著柔和,團結,溫暖,安全等,許多時尚站點喜歡以圓形為頁面整體造型;三角形代表著力量,權威,牢固,侵略等,許多大型的商業站點為顯示它的權威性常以三角形為頁面整體造型;菱形代表著平衡,協調,公平,一些交友站點常運用菱形作為頁面整體造型。雖然不同形狀帶表著不同意義,但目前的網頁製作多數是接合多個圖形加以設計,在這其中某種圖形的構圖比例可能占的多一些。

3.頁頭:

頁頭又可稱之為頁眉,頁眉的作用是定義頁面的主題。比如一個站點的名字多數都顯示在頁眉里。這樣,訪問者能很快知道這個站點是什麼內容。頁頭是整個頁面設計的關鍵,它將牽涉到下面的更多設計和整個頁面的協調性。頁頭常放置站點名字的圖片和公司標誌以及旗幟廣告。

4.文本:

文本在頁面中出現多數以行或者塊(段落)出現,它們的擺放位置決定者整個頁面布局的可視性。在過去因為頁面製作技術的局限,文本放置的位置的靈活性非常小,而隨著DHTML的興起,文本已經可以按照自己的要求放置到頁面的任何位置。

5.頁腳:

頁腳和頁頭相呼應。頁頭是放置站點主題的地方,而頁腳是放置製作者或者公司信息的地方。你能看到,許多製作信息都是放置在頁腳的。

6.圖片

圖片和文本是網頁的兩大構成元素,缺一不可。如何處理好圖片和文本的位置成了整個頁面布局的關鍵。而你的布局思維也將體現在這裡。

7.多媒體

除了文本和圖片,還有聲音,動畫,視頻等等其它媒體。雖然它們不是經常能被利用到,但隨著動態網頁的興起,它們在網站製作的布局設計上也將變得更重要。

網頁製作教程(第三版)

書名:網頁製作教程(第三版)(普通高等教育“十五”國家級規劃教材)
ISBN:711515222
作者:趙豐年
出版社:人民郵電出版社
定價:26

圖文格式圖文格式

頁數:305
出版日期:2006-10-1
版次:1
開本:16開
包裝:平裝
簡介:本書系統全面地介紹網頁製作技術的基本理論和實際套用。全書共10章,分為3大部分。前5章為第1部分,主要介紹網頁製作的基本理論——HTML,同時穿插介紹Fireworks,Flash,Anfy等軟體在網頁製作過程中的套用;第6章~第8章為第2部分,主要介紹網頁製作技術,包括CSS技術、客戶端腳本技術(DHTML)以及XML技術;第9章~第10章為第3部分,主要介紹當前最流行的網頁製作工具——Dreamweaver,以及提供12個實訓項目,使讀者能夠從實際套用的角度進一步鞏固所學知識。.
本書以實用為基本的出發點,不但包括各種網頁製作技術的基礎理論,而且強調網頁製作的具體套用,使讀者既能打下堅實的理論基礎,又能掌握實際的操作技能。..

本書可作為高等職業學校、成人高校、本科院校設立的二級職業技術學院和培訓班講授網頁製作課程的教材或參考書,也適合廣大網頁製作愛好者或相關從業人員自學之用。...

相關詞條

相關搜尋

熱門詞條

聯絡我們