網頁設計與網站組建標准教程

1、簡述網頁設計與策劃的三個步驟？

網頁設計：
第一步：域名注冊。
域名是企業在Internet上的地址和標識，是珍貴的電子商標，企業走向國際市場的第一步就是注冊域名。在域名步驟中，北京網站建設公司提供了包括國際/國內域名的注冊，以及中文域名注冊、域名轉移、域名解析、域名過戶等相關各種服務。
第二步：租用虛擬主機，設計網站。

擁有自己的網站，是在網際網路上開展網上服務、進行電子商務活動的基礎，是企業建立自己在網際網路上的存在、發揮網際網路威力、進行商務運作的平台。虛擬主機作為建設電子商務的服務平台，可以使廣大企業更加方便、省錢地運轉自己的網站。針對不同企業的各種建站要求和服務需要，北京網站建設公司提供了共享伺服器標准型、共享伺服器雙響炮型、專享伺服器型、「不停機」電子商務型等四種不同級別或檔次的主機可供選擇。哈爾濱網站建設公司網頁製作的Web界面的控制面板，可以輕松創建網站並進行管理。

第三步：網站優化

企業網站是產品行銷的關鍵。要想達到網站營銷，人力資源素質提升是首要條件，哈爾濱威揚網路在提供基礎的企業網站建設的同時,面向廣大企業、個人用戶開展了網站優化業務,使網站成為為企業開展網路營銷的先鋒。

2、網頁製作與網站開發從入門到精通的目錄

版本一
第1章標准網頁設計概述
1．1Web標准發展概述
1．2什麼是網頁標准
1．2．1網頁結構化語言
1．2．2網頁表現語言
1．2．3網頁行為語言
1．3學習標准設計將會給你帶來什麼
l．3．1對於用戶來說，更易用
1．3．2對於設計者來說，更高效
1．3．3對於服務來說，成本更低
1．4學習標准設計中應注意的問題
1．4．1不要為了驗證而驗證
1．4．2不要被傳統布局思維所束縛
1．4．3不要亂用標簽和屬性
1．5如何學習標准網頁設計
1．5．1一位拓荒者的標准學習之路
1．5．2你需要准備什麼
第2章Demo，一起體驗標准化設計流程
2．1與客戶交流獲取資料
2．1．1不要張口就問設計效果
2．1．2向客戶獲取有價值的資料
2．2構建符合語義的結構
2．2．1不要使用表格設計結構
2．2．2不要把結構當作段落文本
2．2．3div不是萬能的
2．2．4使用符合語義的元素
2．3與客戶溝通並設計頁面表現效果
2．3．1不要為了設計樣式而隨意設置id屬性和class屬性
2．3．2設計精緻典雅的界面風格
2．3．3設計個性灑脫的界面風格
第3章HTML語言基礎
3．1HTML語言概述
3．1．1認識HTML語言
3．1．2HTML語言的發展歷史
3．2HTML語言規范
3．2．1HTML文檔結構
3．2．2HTML基本語法
3．3HTML文檔類型和名字空間
3．3．1認識DOCTYPE
3．3．2DOCTYPE結構分析
3．3．3HTML文檔類型分類
3．3．4HTML文檔類型使用誤區
3．3．5探析文檔類型定義(DTD)
3．3．6名字空間
3．4HTML文檔元信息
第4章HTML元素的語義性及其使用
4．1網頁語義化概述
4．1．1什麼是語義化網頁
4．1．2HTML語義化現狀和發展
4．2HTML元素的語義分類
4．2．1結構語義元素
4．2．2內容語義元素
4．2．3修飾語義元素
4．3HTML屬性的語義分類
4．3．1核心語義屬性
4．3．2語言語義屬性
4．3．3鍵盤語義屬性
4．3．4內容語義屬性
4．3．5其他語義屬性
4．4文本信息的語義結構
4．4．1標題信息的語義結構
4．4．2段落信息的語義結構
4．4．3引用信息的語義結構
4．4．4強調信息的語義結構
4．4．5格式化文本的語義結構
4．4．6輸出信息的語義結構
4．4．7信息縮寫的語義結構
4．4．8插入和刪除信息的語義結構
4．4．9其他文本信息的語義結構
4．5表信息的語義結構
4．5．1認識列表結構
4．5．2使用普通列表結構
4．5．3使用定義列表結構
4．5．4使用定義列表的誤區
4．6數據表格的語義化結構
4．6．1認識數據表的結構
4．6．2使用表格元素
4．6．3數據分組
4．7表單的語義化基本結構
4．7．1認識表單的結構
4．7．2認識表單元素
4．7．3form元素
4．7．4input元素
4．7．5textarea和select元素
4．8表單結構的語義化高級設計
4．8．1表單分組
4．8．2綁定提示標簽到表單域
4．8．3快捷鍵、訪問鍵和禁止訪問
4．8．4select選項分區
4．8．5使用按鈕
第5章網頁結構化實施與應用
5．1HTML元素的顯示類型
5．1．1認識元素顯示類型
5．1．2塊狀元素
5．1．3行內元素
5．1．4其他元素
5．2HTML結構嵌套規則詳解
5．2．1結構亂套何時休
5．2．2(X)HTMLStrict下嵌套規則
5．2．3HTM[，嵌套規則解析
5．3解析Stopdesign的結構
5．3．1認識Stopdesign
5．3．2Stopdesign首頁內容版塊分析
5．3．3構建基本結構
5．3．4構建微觀結構
5．3．5結構的SEO設計
5．3．6版式結構設計
5．4解析CSSZENGARDEN結構
5．4．1認識CSS禪意花園
5．4．2禪意花園內容版塊分析
5．4．3構建禪意花園的基本結構
5．4．4構建禪意花園的微觀結構
5．4．5版式結構設計
第6章CSS語言基礎
6．1創建CSS樣式
6．1．1網頁樣式發展概述
6．1．2CSS樣式的構成
6．2應用CSS樣式
6．2．1行內樣式
6．2．2內部樣式
6．2．3外部樣式
6．2．4引入外部樣式
6．3准確選用CSS選擇器
6．3．1基本選擇器
6．3．2選定范圍?選擇器
6．3．3屬性選擇器
6．3．4選擇器分組、嵌套和指定
6．4靈活使用CSS的層疊和繼承
6．4．1CSS的層疊性
6．4．2CSS的繼承性
第7章設計網頁文本格式和段落版式
7．1字體樣式
7．1．1字體類型
7．1．2字體大小
7．1．3字體顏色
7．1．4字體粗細
7．1．5斜體
7．1．6下劃線
7．1．7大小寫
7．2段落格式
7．2．1水平對齊
7．2．2垂直對齊
7．2．3字距和詞距
7．2．4行高
7．2．5首行縮進
7．3網頁文本格式實戰
7．3．1寧靜、含蓄的英文格式
7．3．2干練、灑脫的英文格式
7．3．3層級式中文格式
7．3．4報刊式中文格式
第8章網頁圖像美化與設計
8．1圖像樣式
8．1．1圖像大小
8．1．2圖像邊框
8．1．3圖像透明度
8．1．4圖像位置
8．2控制背景圖像
8．2．1定義背景圖像
8．2．2背景圖像顯示方式
8．2．3背景圖像位置
8．2．4固定背景圖像
8．2．5靈活使用背景圖像
8．3網頁圖像設計實戰
8．3．1博客主頁中的圖像應用
8．3．2網路相冊中的圖像應用
第9章設計超鏈接樣式
9．1超鏈接基本樣式
9．1．1簡單認識超鏈接
9．1．2偽類和偽對象
9．1．3超鏈接基本樣式
9．2設計超鏈接樣式
9．2．1下劃線樣式
9．2．2立體樣式
9．2．3動態樣式
9．2．4圖像樣式
9．2．5滑鼠樣式
第10章設計列表和菜單樣式
10．1列表基本樣式
10．1．1定義列表的基本樣式
10．1．2自定義項目符號
10．1．3使用背景圖像定義項目符號
10．2列表布局
10．2．1垂直布局樣式
10．2．2水平布局樣式
10．3菜單樣式設計
10．3．1滑動樣式(上)
10．3．2滑動樣式(下)
10．3．3Tab樣式
10．3．4導航下拉麵板樣式
第11章設計表格樣式
11．1表格基本樣式設計
11．1．1使用表格屬性設計樣式
11．1．2使用CSS設計表格邊框
11．1．3單元格分離和補白樣式
11．1．4空單元格顯示處理
11．1．5單元格數據水平對齊和垂直對齊
11．2表格布局模型和高級樣式設計
11．2．1表格布局模型
11．2．2數據列和行的樣式
11．2．3表格標題的樣式
11．2．4合並單元格
11．2．5數據表格內元素層疊優先順序
11．3表格樣式設計實戰
11．3．1清新悅目的數據表樣式
11．3．2層次清晰的數據表樣式
第12章標准網頁布局的基本方法
第13章標准網頁布局的兼容性處理
第14章JavaScript語言基礎
第15章精通DOM文檔對象模型
第16章掌握JavaScript事件處理模型
第17章使用JavaScript動態控制CSS樣式
第18章使用Ajax技術實現動態數據交互
第19章使用jQuery框架擴展JavaScript的功能
第20章使用Dreamweaver構建HTML結構
第21章使用Dreamweaver設計CSS樣式
第22章使用Dreamweaver開發JavaScript腳本
第23章綜合實戰：專題資訊
第24章綜合實戰：電子相冊
……
版本二
目 錄
入 門 篇
第1章 初涉網站建設 3
1.1 網頁製作基礎知識 4
1.1.1 什麼是網頁 4
1.1.2 網頁的組成元素 4
1.1.3 什麼是網站 6
1.1.4 網頁的類型 7
1.1.5 網頁製作中的專業術語 7
1.2 常用網頁製作相關軟體 8
1.2.1 圖像製作與處理軟體 8
1.2.2 動畫製作軟體 9
1.2.3 網頁製作與編輯軟體 9
1.2.4 網頁配色輔助軟體 10
1.2.5 網頁發布與推廣軟體 10
1.3 網站建設的一般流程 10
1.3.1 確定網站主題 11
1.3.2 網站整體規劃 11
1.3.3 收集資料與素材 12
1.3.4 設計網頁圖像 12
1.3.5 製作網頁 12
1.3.6 開發動態網站模塊 13
1.3.7 測試與發布網站 13
1.3.8 後期更新與維護網站 14
1.3.9 宣傳與推廣網站 14
1.4 基礎實例——設計
「讓心去旅行」個人網站 14
1.5 基礎練習 15
1.5.1 瀏覽各種網站確定其類型 15
1.5.2 指出網頁中各部分的名稱 15
1.6 本章小結 15
知識關聯 16
第2章 網頁圖像的簡單處理 17
2.1 初識Fireworks CS3 18
2.1.1 啟動Fireworks CS3 18
2.1.2 認識Fireworks CS3的工作環境 19
2.1.3 退出Fireworks CS3 21
2.2 文檔的基本操作 22
2.2.1 新建文檔 22
2.2.2 另存為文檔 22
2.2.3 導入圖像 23
2.2.4 打開文檔 24
2.2.5 關閉文檔 24
2.3 處理文本 24
2.3.1 輸入文本 24
2.3.2 設置文本屬性 25
2.3.3 設置文本的特殊效果 26
2.3.4 文本與路徑 27
2.4 選擇並編輯點陣圖 27
2.4.1 選擇點陣圖 28
2.4.2 編輯點陣圖 28
2.5 繪制矢量圖 30
2.5.1 繪制圓角矩形 30
2.5.2 繪制正圓 31
2.5.3 使用鋼筆工具繪制路徑 32
2.6 創建切片與導出圖像 32
2.6.1 創建切片 32
2.6.2 優化圖像 33
2.6.3 導出圖像 34
2.7 基礎實例——製作網站Banner 35
2.8 基礎練習 36
2.8.1 處理點陣圖 36
2.8.2 繪制卡通頭像 37
2.9 本章小結 38
知識關聯 38
第3章 網頁動畫製作基礎知識 39
3.1 認識Flash CS3的工作環境 40
3.1.1 菜單欄 40
3.1.2 「工具」面板 41
3.1.3 時間軸 41
3.1.4 場景 41
3.1.5 面板組 42
3.2 文檔的基本操作 42
3.2.1 新建文檔 42
3.2.2 設置文檔屬性 43
3.2.3 保存文檔 43
3.2.4 關閉文檔 44
3.2.5 打開文檔 44
3.3 繪制動畫對象 44
3.3.1 使用繪圖工具繪制圖像 45
3.3.2 選擇對象 50
3.3.3 填充對象 51
3.4 基礎實例——繪制網站形象卡通 54
3.5 基礎練習 57
3.6 本章小結 57
知識關聯 58
第4章 創建簡單的網頁動畫 59
4.1 認識並操作幀 60
4.1.1 認識幀 60
4.1.2 操作幀 61
4.2 圖層的基本操作 65
4.2.1 認識圖層 65
4.2.2 操作圖層 66
4.3 元件和庫 69
4.3.1 認識元件 69
4.3.2 創建元件 69
4.3.3 庫的基本操作 73
4.4 創建基本動畫 75
4.4.1 創建逐幀動畫 76
4.4.2 創建動畫補間動畫 77
4.4.3 創建形狀補間動畫 79
4.5 基礎實例——創建「行走.fla」
動畫 81
4.6 基礎練習 83
4.7 本章小結 84
知識關聯 84
第5章 認識網頁製作軟體 85
5.1 認識Dreamweaver CS3的
工作界面 86
5.1.1 「插入」欄 86
5.1.2 文檔工具欄 86
5.1.3 面板組 87
5.1.4 「屬性」面板 87
5.1.5 狀態欄 88
5.2 網頁文檔的基本操作 88
5.2.1 創建網頁 89
5.2.2 預覽網頁 89
5.2.3 保存網頁 89
5.2.4 打開網頁 90
5.3 設置頁面屬性 90
5.3.1 設置外觀屬性 91
5.3.2 設置鏈接屬性 92
5.3.3 設置標題屬性 93
5.4 規劃與創建站點 93
5.4.1 認識站點 93
5.4.2 規劃站點 94
5.4.3 創建並管理站點 94
5.5 基礎實例——規劃並
創建「在線閱讀」站點 97
5.5.1 規劃站點 98
5.5.2 創建站點 98
5.6 基礎練習 99
5.7 本章小結 100
知識關聯 100
第6章 添加網頁元素 101
6.1 添加網頁文本 102
6.1.1 添加普通文本 102
6.1.2 添加特殊字元 103
6.1.3 添加空格 104
6.1.4 添加水平線 104
6.1.5 添加日期 105
6.2 設置網頁文本格式 105
6.2.1 設置文本格式 106
6.2.2 設置段落格式 107
6.3 添加並設置列表 108
6.3.1 編號列表 108
6.3.2 項目列表 108
6.3.3 定義列表 109
6.3.4 設置列表屬性 109
6.3.5 創建嵌套列表 110
6.4 添加網頁圖像 111
6.4.1 插入圖像 111
6.4.2 設置圖像屬性 112
6.4.3 創建滑鼠經過圖像 113
6.4.4 創建導航條 114
6.5 添加超級鏈接 115
6.5.1 添加基本超級鏈接 116
6.5.2 添加圖像熱點超級鏈接 117
6.5.3 添加電子郵件超級鏈接 118
6.5.4 添加錨鏈接 118
6.5.5 添加空超級鏈接 119
6.6 添加動畫及音樂 119
6.6.1 添加Flash動畫 119
6.6.2 添加Flash視頻 119
6.6.3 添加背景音樂 121
6.6.4 添加音樂下載鏈接 121
6.7 基礎實例——為「網來網去」
網頁添加內容 122
6.8 基礎練習 125
6.9 本章小結 126
知識關聯 126
第7章 發布網站 127
7.1 本地測試站點 128
7.1.1 測試兼容性 128
7.1.2 測試超級鏈接 129
7.1.3 設置下載速度 130
7.2 申請主頁空間和域名 131
7.2.1 申請主頁空間 131
7.2.2 申請域名 133
7.3 使用相應軟體發布站點 133
7.3.1 使用Dreamweaver CS3發布站點 133
7.3.2 使用LeapFTP發布站點 135
7.4 管理和推廣網站 137
7.4.1 管理網站 137
7.4.2 推廣網站 138
7.5 基礎實例——申請收費空間 143
7.6 基礎練習 146
7.7 本章小結 146
知識關聯 146
提 高 篇
第8章 Fireworks CS3的高級應用 149
8.1 使用蒙版編輯圖像 150
8.1.1 矢量蒙版 150
8.1.2 點陣圖蒙版 151
8.2 使用樣式和形狀 152
8.2.1 使用樣式快速創建特效文本 153
8.2.2 使用形狀快速創建對象 153
8.3 創建動畫 154
8.3.1 創建所選動畫 154
8.3.2 創建逐幀動畫 154
8.3.3 創建補間動畫 156
8.4 創建按鈕 157
8.5 創建彈出式菜單 158
8.6 提高實例——創建導航條 160
8.7 提高練習 161
8.8 本章小結 162
提高知識問答 162
第9章 使用Flash CS3
創建特殊動畫 163
9.1 創建引導動畫 164
9.1.1 引導動畫的創建原理 164
9.1.2 創建引導動畫 164
9.2 創建遮罩動畫 166
9.2.1 遮罩動畫的創建原理 166
9.2.2 創建遮罩動畫 167
9.3 創建有聲動畫 168
9.3.1 Flash CS3中可使用的聲音
文件類型 168
9.3.2 添加與編輯聲音 169
9.3.3 設置聲音的導出屬性 170
9.4 創建濾鏡動畫 171
9.5 提高實例——創建
太陽升空動畫 172
9.6 提高練習 175
9.7 本章小結 176
提高知識問答 176
第10章 使用Flash CS3
創建交互動畫 177
10.1 ActionScript快速入門 178
10.1.1 ActionScript 3.0的特性 178
10.1.2 變數 178
10.1.3 函數 180
10.1.4 運算符 181
10.1.5 ActionScript的數據類型 183
10.1.6 ActionScript的語法規則 184
10.1.7 常用的AcitonScript語句 185
10.2 認識「動作-幀」面板 190
10.3 在Flash CS3中添加代碼 191
10.3.1 在時間軸上添加代碼 191
10.3.2 創建單獨的ActionScript文件 192
10.4 使用組件創建互動式動畫 193
10.4.1 認識「組件」面板 193
10.4.2 Flash CS3中的常用組件 194
10.4.3 創建組件 197
10.4.4 組件檢查器 200
10.5 提高實例——創建雪景 201
10.6 提高練習 203
10.7 本章小結 204
提高知識問答 204
第11章 使用CSS樣式美化網頁 205
11.1 認識並創建CSS樣式表 206
11.1.1 認識「CSS樣式」面板 206
11.1.2 CSS樣式表的定義和保存方式 207
11.1.3 創建CSS樣式表 208
11.2 設置並應用CSS樣式表 209
11.2.1 設置CSS樣式表屬性 209
11.2.2 應用CSS樣式表 213
11.3 管理CSS樣式表 215
11.3.1 編輯CSS樣式表 215
11.3.2 鏈接外部CSS樣式表文件 216
11.3.3 刪除CSS樣式表 217
11.4 提高實例——用CSS樣式表
美化「認識我」網頁 217
11.5 提高練習 222
11.6 本章小結 223
提高知識問答 223
第12章 布局網頁 225
12.1 使用表格布局網頁 226
12.1.1 創建表格 226
12.1.2 編輯表格 227
12.1.3 設置表格和單元格屬性 230
12.2 使用AP元素布局網頁 232
12.2.1 創建AP元素 232
12.2.2 編輯AP元素 233
12.2.3 AP元素的屬性設置 236
12.3 使用框架布局網頁 238
12.3.1 創建框架集 238
12.3.2 編輯框架 239
12.3.3 設置框架和框架集的屬性 241
12.3.4 保存框架及框架集網頁 242
12.4 使用Spry構件布局網頁 244
12.4.1 Spry構件的概念 244
12.4.2 Spry菜單欄構件 244
12.4.3 Spry選項卡式面板構件 245
12.4.4 Spry折疊構件 247
12.4.5 Spry可折疊面板構件 247
12.5 使用模板創建網頁 248
12.5.1 創建並編輯模板 248
12.5.2 通過模板創建新網頁 249
12.6 提高實例——製作
冰雪世界」網頁 250
12.6.1 創建模板網頁 251
12.6.2 根據模板製作其他網頁 252
12.7 提高練習 253
12.7.1 「購書送大禮」網頁製作 253
12.7.2 「Logo製作教程」網頁效果 254
12.8 本章小結 255
提高知識問答 255
第13章 應用表單和行為 257
13.1 應用表單 258
13.1.1 創建表單 258
13.1.2 創建表單對象 259
13.1.3 創建具驗證功能的表單對象 264
13.2 應用行為 268
13.2.1 添加與編輯行為 268
13.2.2 為網頁添加行為 270
13.3 提高實例——「用戶登錄」
網頁製作 274
13.4 提高練習 278
13.4.1 製作「按揭貸款計算器」 278
13.4.2 製作「用戶注冊」網頁 279
13.5 本章小結 279
提高知識問答 280
精 通 篇
第14章 網站布局與配色技巧 283
14.1 網頁版面布局設計 284
14.1.1 網頁版面布局原則 284
14.1.2 網頁布局方法 285
14.1.3 常見版面布局 286
14.2 網頁色彩搭配 287
14.2.1 色彩基礎知識 287
14.2.2 網頁色彩搭配方案 289
14.2.3 網頁色彩搭配技巧 289
14.3 網頁配色輔助軟體的使用 291
14.3.1 配色網頁「peise.htm」的使用 291
14.3.2 Color Schemer Studio的使用 293
14.4 精通實例——製作
「自助發布系統」網頁 296
14.5 精通練習 297
14.6 本章小結 298
第15章 網頁圖像製作與處理技巧 299
15.1 網頁圖像處理技巧 300
15.1.1 摳圖技巧 300
15.1.2 圖像用色技巧 305
15.2 網頁文字特效製作 308
15.2.1 立體文字製作 308
15.2.2 「NT」LOGO製作 311
15.3 網頁按鈕和導航條製作 311
15.3.1 網頁按鈕製作 311
15.3.2 導航條製作 313
15.4 網站LOGO製作 314
15.4.1 LOGO的作用 314
15.4.2 LOGO的顏色 315
15.4.3 LOGO中的圖案 315
15.4.4 LOGO的幾種表現形式 316
15.4.5 LOGO的設計 317
15.4.6 LOGO製作實例 318
15.5 精通實例——製作網頁頭部 319
15.6 精通練習 322
15.7 本章小結 322
第16章 網頁動畫製作與處理技巧 323
16.1 鼠繪技巧 324
16.1.1 什麼是鼠繪 324
16.1.2 常見鼠繪方法 324
16.2 文字效果及動畫製作 325
16.2.1 常見文字效果製作 325
16.2.2 文字特效動畫製作 327
16.3 Flash按鈕和菜單製作 330
16.3.1 按鈕特效製作 330
16.3.2 Flash菜單製作 332
16.4 精通實例——製作
「記憶」動畫 335
16.5 精通練習 339
16.5.1 繪制「家」 339
16.5.2 製作「電影宣傳」動畫 339
16.6 本章小結 340
第17章 動態網頁基礎知識 341
17.1 認識動態網頁 342
17.2 資料庫基礎 342
17.2.1 Access 343
17.2.2 SQL Server 345
17.2.3 MySQL 348
17.3 動態網頁開發語言 350
17.3.1 ASP 350
17.3.2 .NET 351
17.3.3 PHP 351
17.3.4 JSP 352
17.4 Web伺服器 353
17.4.1 IIS 353
17.4.2 Apache 355
17.5 動態網頁開發流程 357
17.6 精通實例——用ASP開發
一個簡單的網頁 357
17.6.1 製作動態網頁 358
17.6.2 瀏覽動態網頁 358
17.7 精通練習 359
17.8 本章小結 360
第18章 製作動態網頁 361
18.1 Access資料庫的創建 362
18.2 動態站點的創建及配置 362
18.2.1 IIS的配置 362
18.2.2 動態站點的創建及配置 364
18.3 數據源的創建 365
18.3.1 了解連接字元串 365
18.3.2 在Dreamweaver中
創建資料庫連接 366
18.4 製作資料庫動態網頁 367
18.4.1 創建記錄集 367
18.4.2 製作動態頁面 371
18.5 精通練習 385
18.6 本章小結 386
第19章 網頁特效製作與
網頁製作技巧 387
19.1 JavaScript簡介 388
19.1.1 JavaScript的特點 388
19.1.2 JavaScript的函數 388
19.1.3 在網頁中使用JavaScript 389
19.2 JavaScript腳本應用 390
19.2.1 檢查表單元素是否為空 390
19.2.2 限制輸入字元串的長度 392
19.2.3 去除字元串的首尾空格 394
19.2.4 隨機產生指定位數的驗證碼 394
19.2.5 刪除確認 396
19.2.6 日期聯動下拉列表框 396
19.2.7 禁止使用滑鼠右鍵 397
19.2.8 實現「添加到收藏夾」功能 399
19.2.9 禁止保存網頁 400
19.3 網頁製作技巧 400
19.3.1 消除網頁中的亂碼 400
19.3.2 定時跳轉 400
19.3.3 更換IE地址欄前的圖標 401
19.3.4 製作「設為主頁」超級鏈接 401
19.3.5 製作「1」像素的表格邊框 401
19.3.6 去掉單擊圖像鏈接後的圖像虛線 403
19.3.7 讓表單和其他內容之間無間隙 404
19.4 精通實例——特效頁面製作 404
19.5 精通練習 407
19.6 本章小結 408
實 戰 篇
第20章 「互邦」網站靜態頁面製作 411
20.1 實例說明 412
20.2 製作要點 412
20.3 製作過程 412
20.3.1 頁面布局 412
20.3.2 LOGO標志製作 415
20.3.3 主菜單背景製作 416
20.3.4 切片輸出 416
20.3.5 LOGO動畫製作 418
20.3.6 布局基本頁面 419
20.3.7 為網頁添加內容 422
20.4 拓展練習 423
第21章 「互邦」網站動態頁面製作 425
21.1 實例說明 426
21.2 製作要點 426
21.3 製作過程 426
21.3.1 創建資料庫 427
21.3.2 配置IIS 429
21.3.3 創建站點 429
21.3.4 創建數據源 430
21.3.5 製作登錄驗證頁面 431
21.3.6 製作添加公告頁面 432
21.3.7 製作公告顯示頁面 433
21.3.8 製作公司風采部分 434
21.3.9 增加管理頁面 436
21.3.10 增加網頁安全性 437
21.3.11 進行伺服器IIS的配置 438
21.3.12 進行防火牆設置 440
21.3.13 進行伺服器IP的配置 441
21.3.14 發布站點 442
21.3.15 配置IE瀏覽器 443
21.4 拓展練習 444

3、如何建立自己的網頁或網站？具體步驟是什麼？謝謝！

2. 搭建最簡單的個人博客

在1. 購買雲伺服器和域名中，我們得到了雲伺服器的登錄密碼和域名的所有權，下面，我們將介紹如何利用雲伺服器和域名，搭建一個最簡單的個人博客網站。這篇文章之後，你就可以隨時隨地通過瀏覽器訪問自己的個人網站了！

以下操作以在騰訊雲購買雲伺服器、域名為演示，並且你已經完成了域名備案。阿里雲的操作方法類似，暫時不特別寫文章演示了。如果你還沒購買，請點擊1. 購買雲伺服器和域名，也可以參與下面的活動：

- 騰訊雲代金券領取，

- 阿里雲最新優惠活動，老用戶也可享受

文章看著很長，但是很容易操作。這篇文章的本質就是我們在雲伺服器安裝了一個博客軟體，然後將域名指向了雲伺服器可供訪問而已。

2.1 配置安全組並登錄雲伺服器

每一台雲伺服器都有很多埠負責對外實現不同功能的通訊（比如遠程連接，傳輸文件，網頁訪問等），騰訊雲的安全措施比較完備，默認將許多埠關閉，我們要安裝寶塔軟體（一種雲伺服器管理面板），就需要將埠打開，這個功能由」安全組「負責。

2.1.1 配置騰訊雲伺服器安全組，放行埠

雲伺服器和世界的通訊分為入站和出站兩種，也就是接受外面輸入的信息（比如我們的瀏覽器請求訪問），和向外界輸出信息（比如向外界傳輸網頁內容），下面我們先分別下載這兩個規則，再將規則導入我們的雲伺服器安全組。

騰訊雲-寶塔面板安裝-入站規則下載 

騰訊雲-寶塔面板安裝-出站規則下載

下載後將其保存在你喜歡的地址，這里我們保存在電腦桌面上。

下面，我們點擊雲伺服器>安全組，選擇我們購買雲伺服器時的地域，會顯示一個安全組欄目，這個欄目已經自動跟你的實例關聯，我們點擊欄目右邊的修改規則：

- 入站規則：點擊導入規則，瀏覽器會彈框提示選擇文件，我們選擇剛下載的入站規則excel表即可；

- 出站規則：點擊導入規則，瀏覽器會彈框提示選擇文件，我們選擇剛下載的出站規則excel表即可；

整個流程如下面動畫所示：

至此，我們已經完成安全組的設置，下面可以登錄雲伺服器安裝寶塔面板了。

2.1.2 登錄雲伺服器

進入騰訊雲控制台，點擊左上角雲產品>雲伺服器，自動跳轉到實例界面，你會看到自己購買的雲伺服器在列表上（如果沒有出現，在左上角實例旁邊可切換伺服器地域，比如我們購買的成都）。

在雲伺服器欄目的右側，點擊登錄，跳轉到登錄頁面，這時候只需要粘貼我們在1. 購買雲伺服器和域名中獲得的登錄密碼，就可以實現登錄。看著屏幕上一閃一閃的游標，你是第一次見到程序員的傢伙事兒，但是不要害怕，它不是洪水猛獸，不過就是一個輸入頁面而已，就像微信聊天頁面的輸入框一樣，只不過你是在和雲伺服器聊天。

2.2 安裝寶塔(bt)面板並安裝軟體運行LNMP環境

下面我們安裝寶塔面板，在上面一閃一閃的游標處，完全復制粘貼下面的命令並回車：

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

這嘩啦啦的字元串流動看著有點嚇人，其實不過是一堆文字描述，來告訴你程序在下載什麼東西，安裝好了沒有等等。這一串下來，是不是感覺自己像個程序員了==、

等待屏幕出現下面字元時，表示寶塔面板的安裝已經完成，提示顯示我們安裝面板花了3分鍾。記錄這些信息（建議復制文本放在自己的文件夾裡面），後續會需要通過這個信息登錄寶塔面板。

Congratulations! Installed successfully!

==================================================================

Bt-Panel: http://132.232.13.95:8888/eaef30a6

username: r0wiopgd

password: fa7120fd

Warning:

If you cannot access the panel, 

release the following port (8888|888|80|443|20|21) in the security group

==================================================================

Time consumed: 3 Minute!

如果你安裝遇到問題，可以去寶塔官網查看安裝說明。

上一步得到了下面的信息：

- 寶塔面板登錄地址；

- 登錄用戶名；

- 登錄密碼；

下面我們根據這些信息，登錄寶塔面板後台，在瀏覽器中打開登錄地址，填寫用戶名密碼：

進入面板後，網頁會自動跳出來一個彈框，顯示推薦安裝套件，我們選擇LNMP（推薦），記得將php的版本從PHP5.6改成PHP7.3，點擊一鍵安裝，這里針對LNMP的含義稍微解釋一下：

- 」L「： 指Linux系統，這個我們在購買雲伺服器的時候已經安裝了CentOS這個Linux系統分支；

- 」N「： 指Nginx，是一個網頁伺服器軟體，是它將我們的網站程序變成了網頁文件供我們瀏覽；

- 」M「： 指Mysql，是一個資料庫軟體，我們網站要運行，網站程序一般是寫死的，然後程序從資料庫讀取數據顯示給人看，這樣的話一旦數據有變動不需要重新編寫軟體，而只需要程序讀取變化的數據就行了。比如微信聊天，微信這個程序是寫死的，而你的聊天信息是放在資料庫裡面的，微信從資料庫讀取別人發給你的聊天信息，然後顯示在你的手機里；

- 」P「： 指PHP編程語言，因為我們後面要裝的WordPress博客軟體是用php寫的，所以需要安裝這個語言讓計算機能夠識別。這就像我們在大學可能學過C++，用C++寫出來的代碼需要C++這個語言包來支持運行一樣。這里我們選擇PHP7.3，因為WordPress博客軟體官方推薦我們使用最新版的PHP語言。

- phpMyAdmin：這是資料庫管理軟體，WordPress程序將我們的數據存放在Mysql這個資料庫軟體中，有時候需要手動改資料庫，但是Mysql對普通人比較難上手，就用phpMyAdmin來管理。簡單點說，phpMyAdmin相當於雲伺服器上的Excel軟體，能查看，修改網頁數據。

下面是操作動畫，等畫面中顯示任務為空就說明環境安裝完成了。動畫我加速了一下方便大家看，總體時間大概花了7，8分鍾。

2.3 一鍵部署WordPress網站程序

軟體運行LNMP環境安裝完成之後，我們終於要開始安裝WordPress這個網站程序了。這個程序非常出名，有數據統計WordPress驅動著世界上30%以上的網站。它以博客程序起家，現在功能十分完善，不僅可以用來搭建個人博客，還能做圖片展示，新聞網站，論壇系統，外貿企業官網等等。

我們點擊寶塔面板左邊的軟體商店>一鍵部署>選擇WordPress，跳出下面的彈框。其中，

- 域名： 填寫你購買的域名，比如你購買了yigehaomingzi.com(一個好名字)，那就填上去。意思是當伺服器接收到瀏覽器請求訪問yigehaomingzi.com，伺服器會把網站根目錄下面的網頁文件傳輸給伺服器。這里我因為沒有其他備案的域名，使用一個子域名yanshi.jiqianhanre.com作為演示。

- 備註： 可以不填；

- 根目錄： 自動生成，不用更改；

- 資料庫： 這是面板隨機生成的資料庫用戶名和密碼，你也可以自己設置。記錄這兩個信息，後續需要把信息告訴WordPress程序，讓它知道自己要把信息存到這個資料庫裡面，網站程序才能運行；

下面是動畫演示，WordPress部署完成之後，網頁會再次彈框告訴你之前的資料庫信息（資料庫名和資料庫用戶名自動設置是相同的），如果你前面沒保存這些信息，現在復制粘貼到自己的文檔裡面。

2.4 設置域名指向雲伺服器

現在我們已經完成雲伺服器端的所有設置，可以將寶塔面板關閉了。

到目前為止，我們還沒對域名做任何操作，當我們再瀏覽器輸入yanshi.jiqianhanre.com的時候，瀏覽器並不知道我們到底要訪問哪個雲伺服器，所以它會提示「無法訪問此網站，找不到xxx的伺服器ip地址」。

這時候我們就需要對域名進行設置，讓瀏覽器知道它應該找哪台伺服器。伺服器有一個唯一的ip地址，我們在域名商那裡進行設置，這個過程叫做域名解析。我的域名在阿里雲購買的（所以我知道域名和伺服器不在同一家廠商備案的苦），下面動畫演示下。登錄後進入阿里雲控制台，左上角選擇雲解析DNS（如果你是第一次進入可能得仔細找一找，在域名與網站欄目下面），進入域名列表，選擇我們購買的域名，這里我選擇本網站域名jiqianhanre.com，為其添加子站點yanshi.jiqianhanre.com的解析記錄。點擊添加記錄，選擇添加A記錄：

- 主機記錄： 這里我填寫「yanshi」，意思是為yanshi.jiqianhanre.com添加解析記錄。你們不一樣，這里需要填寫「@」或者什麼也不填，表示是為自己購買的主域名添加解析記錄；

- 記錄值： 填寫雲伺服器的公網ip地址，這個可以去騰訊雲的控制台復制過來；

- TTL： 默認就行，不用管它；

此外，你們還可以為自己的域名添加CNAME記錄，假如你購買了域名yigehaomingzi.com，這樣做可以使瀏覽器在訪問www.yigehaomingzi.com的時候自動跳轉到yigehaomingzi.com，保證網站域名的一致性。

基本上等個五六分鍾，域名解析就可以設置完成。從現在開始，當你在瀏覽器中輸入自己的域名的時候，瀏覽器就知道自己要去找哪個雲伺服器要網站了。

騰訊雲域名解析

騰訊雲的域名解析方法類似，登錄騰訊雲控制台， 點擊左上角雲產品>域名與網站>雲解析，跳轉到域名列表。下面動畫中因為我沒有在騰訊雲購買域名所以是空白的。剩下的域名解析環節參照前面阿里雲的域名解析即可。

2.5 恭喜你！網站已經上線

好了，至此，我們已經在伺服器端安裝了WordPress博客程序，也為域名添加了解析記錄，可以重新打開瀏覽器，輸入你購買的域名，就能看到網站了！

准備好了嗎？走你--->>>>>>>>>>>》》》》》》》》》》》》

在瀏覽器中輸入你在1. 購買雲伺服器和域名購買的的主域名，這里我用的是子域名yanshi.jiqianhanre.com。

YES！能訪問了！不過還需要簡單設置一下。我們觀察到網址自動從yanshi.jiqianhanre.com跳轉到了yanshi.jiqianhanre.com/wp-admin/setup-config.php，這是WordPress博客程序在運作，提示你開始進行設置。下面，為了完成WordPress網站的啟動設置，我們需要准備以下信息：

- 前面步驟2.3 一鍵部署WordPress網站程序中的資料庫名；

- 前面步驟2.3 一鍵部署WordPress網站程序中的資料庫用戶名（在我們教程中，用戶名和資料庫名相同）；

- 前面步驟2.3 一鍵部署WordPress網站程序中的資料庫密碼；

我們點擊Continue，因為絕大多數WordPress插件都是英文，翻譯成中文不太容易理解，如果你後續覺得不方便，以後可以在後台設置中換成中文。當然如果你是准備做外貿網站，推薦一直使用英文，以免網站出現中文影響國外訪客瀏覽時的用戶體驗。

看WordPress安裝配置的過程，我們分別來講一講主要的兩個頁面：資料庫信息設置頁和站點信息設置頁面：

資料庫信息設置頁：這個頁面主要是告訴WordPress程序自己應該把網站數據存放在哪個資料庫下面。並告訴它這個資料庫的登錄用戶名和密碼是什麼，這樣，WordPress就有許可權存放網站數據了。

站點信息設置頁：主要是填寫你希望網站叫什麼名字，你登錄網站管理後台的用戶名、密碼等。這里使用程序隨機生成的密碼，注意復制下來保存。這里再提示一下最下面那個「Search Engine Visibility」一欄，勾選它，表示希望搜索引擎（比如百度、谷歌等）不要收錄本站點，這是因為現在我們的網站還是一片白紙，我們不希望搜索引擎認為自己的站點不重要。

網站已經上線

是的，恭喜你！你的網站已經可以訪問了，通過瀏覽器訪問你的主域名，會顯示下面的網頁。你現在可以試試用手機瀏覽器打開自己的主域名，也能顯示你的網站。我們已經完成了最簡單的博客網站的搭建！能跟著教程做到這一步，為你自己鼓掌！下面圖片的左邊是電腦端的瀏覽器展示效果，右邊是手機端的展示效果，我們的網站是自適應的，也就是隨著瀏覽器的尺寸變化，會自動調整網站布局。

2.6 收尾工作

我們已經成功建成了一個最簡單的博客網站，理論上，我們可以開始寫文章，傳日常生活照片了，但是為了以後的使用方便，以及網站在搜索引擎上的表現，現在來進行一些收尾的工作吧。

2.6.1 WordPress語言換成中文

這在前面說過，如果你不習慣英文，可以換成中文。再提示一下，外貿網站還是全程使用英文比較好。

我們打開網站後台（在瀏覽器中打開yigehaomingzi.com/wp-admin這個頁面，記得把域名換成你購買的主域名），登錄進去，在左邊欄目中選擇Settings>General，跳轉到設置頁，在其中的Site Language中，選擇最下面的中文，滑到頁面底部，選擇Save Changes即可。整個切換WordPress站點語言的過程如下面動畫所示。

2.6.2 給網站傳輸加密-開通SSL

你可能已經注意到了，瀏覽器最上方的網址URL前面有顯示「不安全」，這是因為我們在瀏覽器訪問網站時，瀏覽器和伺服器之間沒有加密，所以訪客在網站輸入的信息可能會在傳輸過程中被竊取。這對我們普通的展示型網頁影響不大，但是對於需要輸入銀行卡密碼，交易信息的網站就很有必要。現在因為搜索引擎都比較偏愛傳輸有加密的網站，所以我們就給網站傳輸加密吧，不花一分錢！

現在我們的網站url是（http://yanshi.jiqianhanre.com）,下面我們通過給網站訪問嵌套一層SSL，讓網站url變成https://yanshi.jiqianhanre.com。

首先，使用我們在2.2 安裝寶塔(bt)面板並安裝軟體運行環境中保存的登錄信息，登錄寶塔面板，在面板左側點擊網站，選擇列表中我們剛建立的網站，瀏覽器自動跳出一個彈框，我們選擇左邊的SSL，選擇Let's Encrypt，並選擇文件驗證，勾選我們的域名，點擊申請，此時瀏覽器彈出一個黑色的命令提示框，提示我們SSL部署的進度。

等待30秒左右，提示SSL已部署成功，我們再點擊右上角的強制HTTPS，強制所有指向雲伺服器的網頁流量都經過https://yanshi.jiqianhanre.com訪問。這里簡單說明一下Let's Encrypt，它給全球網站提供免費加密服務，缺點是每3個月要為網站申請一次加密證書。幸好，寶塔已經幫我們提供了自動續簽服務，這樣設置完成之後，我們就可以不管它了。

現在我們訪問我們的網站，在url前面就會顯示小綠鎖了，顯示站點連接是安全的。下面，我們還需要在站點後台對站點url進行設置。

網站部署SSL之後更改站點地址（URL）

因為我們網站安裝之時未開啟SSL，WordPress自動將我們的站點地址設置成了http://yanshi.jiqianhanre.com，這導致我們後續上傳圖片等媒體文件時，自動將圖片url設置成http而非https**，導致有圖片的頁面瀏覽器顯示不安全。

為了解決這個問題，我們到網站後台，點擊設置>常規，將裡面的WordPress地址（URL）和站點地址（URL）均改成https開頭。

2.6.3 更改網頁固定鏈接樣式-LNMP環境下wordpress程序站點偽靜態

WordPress後台的設置頁面有一個固定鏈接，這里我們可以指定我們撰寫文章後文章網址url的樣式，一般為了站點美觀以及搜索引擎優化，我們選擇下面文章名這種樣式，點擊保存更改。

對於運行Nginx的網頁伺服器，我們直接更改固定鏈接會出現WordPress網站只能訪問首頁的問題（所有其他頁面都顯示404 Not Found），有很多人就掉進了這個坑。為了解決404Not Found的問題，我們需要設置站點偽靜態來解決這個問題。

「站點偽靜態」這個名字不太容易理解。意思是我們的WordPress程序是一個動態程序，它每接收一次瀏覽器訪問請求，都會去資料庫中查詢數據，所以是個動態的過程。靜態程序不一樣，都是寫死的網頁，比如一個純粹的網頁文本。「偽靜態」的意思，就是開通這個服務之後，可以讓動態網頁程序表現地像靜態網頁一樣（對我們來說主要就是網頁url能夠自由設置），便於搜索引擎抓取。

登錄寶塔面板後，在左邊欄選擇網站，選擇我們的網站，在瀏覽器彈框中選擇偽靜態，左上角選擇wordpress，點擊保存即可。我們重新刷新下之前無法訪問的網站，發現已經可以訪問了。

2.6.4 WordPress網站後台的基本設置

我們還需要對網站後台進行一些基本設置，保證後續的使用體驗。

刪除無用的插件

使用2.3 一鍵部署WordPress中保存的登錄信息，登錄網站後台（如yigehaomingzi.com/wp-admin），點擊左邊的插件>已安裝插件，刪除其中的你好多莉，這是個開發人員的情懷插件，沒什麼用。

啟用Akismet攔截垃圾評論

當我們的網站上線後，會有很多機器爬蟲自動在我們網站上留言垃圾留言，如果不設置Akisment，我們每天刪除這些留言都得費些功夫。

在插件>已安裝的插件頁面，點擊Akismet Anti-Spam下面的啟用，網站會自動跳轉到Akismet的激活頁面，點擊Set up your Akismet account按照網頁提示激活服務即可。

選擇PERSONAL版本的就夠用了，他自動跳出來讓你按意願支持點錢，可以選擇0元。

填寫網站標題和副標題

在2.5 恭喜你，網站已經上線那一節，我們已經設置了網站標題，我們在這里可以進行更改，在網站後台，點擊設置>常規，填寫站點標題和副標題，滑到最下方點擊保存更改即可。

安裝WP Acceleration for China插件-解決WordPress網站國內訪問慢的問題

因為WordPress內置了一些谷歌的服務以及Gravatar的頭像服務，而中國大陸是將這些服務屏蔽的，所以我們打開網站的速度會比較慢。下面我們通過下載一個插件「WP Acceleration for China」來解決這個問題。這個插件的功能就是將這些被屏蔽的服務替換成了國內能訪問的服務鏡像。

在網站後台，我們進入插件>安裝插件，搜索WP Acceleration for China，等出現結果後，點擊現在安裝，待安裝完成，點擊啟用即可。

最近WordPress網站抽風，經常拒絕國內的訪問，可能會提示安裝失敗：下載失敗。Too Many Requests：

這個時候不要慌，我們可以多試幾次，我多試了兩次，安裝成功。如果還是不行，請登錄插件下載頁面（https://wordpress.org/plugins/wp-acceleration-for-china/），將插件先下載到本地電腦桌面，然後通過上傳插件功能完成安裝，安裝之後點擊啟用，啟用之後無需其他操作。如果你的電腦不能訪問上面的網址，多試幾次。如果還是不行，那就掛上番強（諧音）軟體再試試，FQ軟體下面我有一個推薦的，可以點擊購買使用，買15塊錢一個月的就行。希望大家在外網不要被所謂的民主自由帶偏了，國外的媒體也都不是什麼天使大姐，都是吃資本飯的。你也知道，資本是會吃人的。

番強服務推薦

這時候我們再用瀏覽器訪問自己的網站（按Ctrl+F5強制刷新），會發現速度快了很多。

2.7 總結

這篇文章，我們通過自己購買的雲伺服器和備案後的域名，成功搭建了一個最簡單的個人博客網站。我們首先登錄雲伺服器，安裝了伺服器管理面板（寶塔bt面板）。然後通過寶塔面板安裝了博客程序所需要的運行環境（LNMP環境），並且使用寶塔面板一鍵部署了WordPress博客程序。接著，我們通過域名解析，將自己購買的域名指向雲伺服器，實現了域名的訪問功能。最後，我們設置安裝了WordPress程序，完成了個人博客網站的搭建。

直觀地看，在搭建個人網站的流程中，我們做了以下的事情：

步驟  需要這些信息  得到這些信息 

2.1 配置安全組並登錄雲伺服器  雲伺服器登錄密碼* -  

2.2 安裝寶塔(bt)面板並安裝軟體運行LNMP環境 雲伺服器登錄密碼  寶塔面板登錄用戶名密碼

2.3 一鍵部署WordPress網站程序 寶塔面板登錄用戶名密碼 資料庫用戶名密碼 

2.4 設置域名指向雲伺服器  域名管理權*  -  

2.5 恭喜你！網站已經上線  資料庫用戶名密碼  後台登錄用戶名密碼  

2.6 收尾工作  後台登錄用戶名密碼 -  

*雲伺服器和域名是我們在第一篇1. 購買雲伺服器和域名中獲得的信息。

在這系列建站教程中，我們總共有4篇文章介紹普通人如何從0到1搭建個人網站：

1. 購買雲伺服器和域名

2. 搭建最簡單的博客網站

3. 發布第一篇博客文章

4. 個性化自己的網站

現在訪問我們的域名，展現的是WordPress預設的博客網站，裡面只有一篇自動生成的文章。下一篇，我們會給網站添加自己的文章，一起進入3. 發布第一篇文章吧！

【若圖片及演示gif動畫無法打開，請點擊本文原始地址-幾千寒熱】https://jiqianhanre.com/wangzhan-weihu/wordpress-beifen-huanyaun.html

4、網頁設計製作詳細流程

分析如下：

1、首先下載安裝Dreamweaver，打開後，新建一個網頁，一般選擇「HTML」建立網頁。選擇「經典」界面，有助於我們更便捷使用這個軟體。

2、下面選擇這三個界面，代碼、拆分、設計，一般默認設計界面，對於新手這個功能具有可視化，能更好的製作網頁。

3、下面我們來製作網站站點，在電腦上建一個文件作為根目錄。我們所建網站的所有文件和網頁都保存在這個文件中。站點的作用就是使你的網站網頁之間框架清晰。同時給站點起個名字。

4、然後再在站點根目錄下建立一個專門儲存網站圖片的文件，並設置默認。這樣你添加到這個網站的所有圖片都自動保存到這個文件，不會丟失。注意文件命名要用英文。下面我用我建立的（籃球資訊網）來介紹，點擊右下方籃球資訊網——下拉點擊管理站點——點擊高級設置——設置默認圖像文件夾為剛建立的images。保存。

5、下面我們來製作這個網站首頁，先學習添加圖片。插入——圖像——選擇素材添加。點擊圖片，下面屬性可以編輯修改圖片大小，添加超鏈接等等。下面我修改圖片大小做示範。

6、下面學習添加文本。編輯「籃球資訊網」，下面屬性可以設置文本字體、添加超鏈接等等，點擊頁面屬性，可以詳細編輯文本屬性。

7、網頁基本就是文字和圖片的組合，添加視頻還需要學習者好好搜索Dreamweaver 的使用視頻加以學習。最後製作完一個網頁要記得保存。左上角文件——保存。

8、最後我們學習添加超鏈接。我用建立的第二個網頁來做示範。選中籃球資訊網文本，點擊頁面下方屬性——鏈接——點文件小按鈕——選中第一個網頁，這樣籃球資訊網文本變成藍色。這是網站內部鏈接，相反就有外部鏈接。添加如圖，一定要寫http://......就可以了。

9、最後我們瀏覽網頁。左上角文件——在瀏覽器中瀏覽網頁，點擊網頁中兩個鏈接都能到達指定網頁。

(4)網頁設計與網站組建標准教程擴展資料：

網頁設計

設計網站要注意兩個要點：整體風格和色彩搭配。

風格

網站的整體風格及其創意設計是最難以學習的。難就難在沒有一個固定的模式可以參照和模仿。給你一個主題，任何兩人都不可能設計出完全一樣的網站。

風格（Style）是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個「整體形象」包括站點的CI（標志、色彩、字體、標語）、版面布局、瀏覽方式、交互性、文字、語氣、內容價值、存在意義、站點榮譽等等諸多因素。

色彩搭配

無論是平面設計，還是網頁設計，色彩永遠是最重要的一環。當我們距離顯示屏較遠的時候，我們看到的不是優美的版式或者是美麗的圖片，而是網頁的色彩。

網頁配色小技巧：

1．用一種色彩：這里是指先選定一種色彩，然後調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感；

2．用兩種色彩：先選定一種色彩，然後選擇它的對比色；

3．用一個色系：簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。

在網頁配色中，還要切記一些誤區：

1．不要將所有顏色都用到，盡量控制在三至五種色彩以內；

2．背景和前文的對比盡量要大（絕對不要用花紋繁復的圖案作背景），以便突出主要文字內容。

5、建立一個網站的基本步驟

建立一個網站的基本步驟如下：

1、購買域名與空間（萬網、新網都可以購買）；
2、空間與域名做備案（如不明白具體操作，可以撥打空間服務商的售後電話）；
3、製作網站，並上傳到空間（網站上傳可以使用FTP工具）；
4、等備案完成後，解析、綁定域名到空間（登陸購買域名和空間的服務商網站進行操作）；
5、網站可以正常訪問。

（說明：一般製作網站是個比較困難的一步，你可以直接花錢請人做，也可以套用一些網上免費的模板）

6、闡述網頁設計與製作的基本原則與流程

1、網站的主題定位製作網站首先要考慮網站主題。好的網站不僅應該有美感、個性、創意，更要有質量。網站的內容是最重要的因素，空洞的網站對人沒有任何吸引力。
(1)網站的題材目前網站的題材主要有：新聞、體育、聊天、即時信息、ICQ、社區、郵件列表、計算機技術、網站開發、娛樂、旅行、參考、資訊、求職、家庭、教育、生活、時尚、電子商務以及一些體現個人特色和愛好的網站。
(2)定位題材的建議主題最好是你最擅長並且最有興趣的東西; 主題要小而精; 題材不要太濫或者目標太高; 體現自己的個性。
(3)網站的名稱
2、資料搜集互聯網的強大就是它豐富的資源，可以搜集盡可能多的資料，並根據一定的規則進行整理。還要精心設計一些別人沒有的東西，已體現自己的個性。
3、結構設計
(1)欄目和版塊網站的結構設計其實也就是合理的設計網站的欄目和版塊。首先應突出主題;其次應該有個網站指南或更新列表之類的欄目;接著要有一個與讀者交流的欄目;最後最好有個說明性的欄目，以方便網友。
(2)目錄的結構設計目錄的結構設計要注意以下幾點：按欄目內容建立子目錄; 在每個主目錄下都建立獨立的images目錄; 目錄的層次不要太深; 避免使用中文目錄; 盡量使用意義明確的目錄。
4、形象設計
(1)網站的標志：即設計網站的Logo。 
(2)網站的標准色彩 
(3)網站的標准字體 
(4)網站的宣傳標語
5、主頁設計
6、其他頁面設計
7、站點規劃
(1)用文件夾來保存文檔 
(2)使用合理的文件名稱 
(3)使用模板和庫 
(4)使用ALT
8、定義站點
9、首頁製作頁面屬性設置; 表格設計; 填寫內容; 添加鏈接和交互; 添加其它內容。
10、測試
11、申請域名和空間
12、站點文件上傳
13、站點的宣傳

7、網頁開發與設計的基本流程是什麼?

網頁製作流程

--------------------------------------------------------------------------------

主要內容介紹：

一、構成網頁的基本要素
二、製作及美化的基本工具
三、網頁製作的基本步驟
四、界面設計及交互研究探討
五、實例製作演示

一.構成網頁的基本要素

1.文字（標題、字型大小、字型...）
2 圖形（網頁上經常使用的圖片格式：jpg、jpeg、Gif、Swf...）
3.交互功能（菜單按鈕、鏈接、表單、數據交換...）
...

超文本標識語言（HTML）

HTML（Hypertext Markup Language）是一種專門用於Web頁製作的編程語言，用來描述超文本各個部分的內容，告訴瀏覽器如何顯示文本，怎樣生成與別的文本或圖像的鏈接點。

在HTML中，所有的標記符都用尖括弧括起來。
例如，<HTML>表示HTML標記符。絕大多數標記符都是成對出現的，包括開始標記符和結束標記符。
如：<HTML>…<／HTML> .

HTML文檔的基本結構

一個典型的HTML文本的基本結構形式如下：

<HTML>
<HEAD>
<TITLE>網站製作流程及界面交互設計研究探討<／TITLE>
<／HEAD>
<BODY>文本內容：<／BODY>
<／HTML>

二.製作及美化的基本工具

1．超文本標識語言（HTML）
編輯工具：editplus、dreamweaver、記事本、FrontPage、

2．頁面設計及美化工具
使用工具：所有可製作平面的軟體
推薦使用Photoshop、FireWorks、Flash

三、網頁製作的基本步驟

1、整體規劃
需要完成的規劃：網站主題、風格、頁面元素、邏輯結構等

2、資料收集
收集內容：
a、跟主題相關的文字圖片資料
b、一些優秀的頁面風格
c、下載一些你喜歡的交互頁面
d、開放的源代碼

3、偽界面設計
根據事先規劃的結構，在平面軟體里設計你想要的最終效果，利用平面圖片的形式先展示一次，設計時要注意宜人性、人機、心理等各方面因素

4、代碼轉換及交互添加
把平面的偽界面轉化為HTML代碼，添加相應的交互功能Js、按紐、表單，以及一些與資料庫相連接的代碼。

5、測試網頁兼容性
你可以不必嚴格按照W3C標准來製作頁面，但是你必須保證讓所有現有的瀏覽器能比較好的展示你的作品。

6、發布站點
測試完畢，符合你的要求，當然就可以開始發布你的網站了，發布的伺服器可以是遠程，也可以是本地，各個語言有各自的相應的伺服器，比如ASP，就應該對應的是ASP伺服器，上傳可利用遠程FTP工具。

四.界面設計及交互研究探討

a、導航欄設計
導航要素設計的好壞決定著用戶是否能方便使用網站導航要素要設計的直接而明確，並最大限度為用戶的方便考慮。

b、網頁布局
網頁的布局是整個界面的核心，這里體現了一切以用戶為中心、以及製作者如何與欣賞著溝通的思想在裡面，你必須知道自己要傳達什麼樣的信息，別人使用起來合適不，字體的大小、型號、字間距、行間距，以及配色所有的一切都在這個階段完成，所以如何表現功能以及美感就是你研究的重點。

PS:布局之前要緊密連接你網站的主題，要注意把握整體風格，你可以事先在紙上勾畫草圖，利用你習慣的元素來表現你想要的效果

網頁布局--主要構成原則
醒目性：指用戶把注意力集中到你誘導起瀏覽的部分和內容
可讀性：指網站的內容讓人容易讀懂
明快性：指准確、快速轉達網站的構成內容
造型性：維持整體外型上的穩定感和均衡性
創造性：有鮮明個性，創意是必不可少的
布局的構成原則上是:統一、協調、流動、強調、均衡

c、交互研究
我這邊的交互主要集中在人機操作方面，研究用戶瀏覽網站心理我個人認為一個成功的個人主頁，單純的美觀是不夠的，重要的是宜人性方面應該注重，喜歡Google、Douban就居於這。

五、實例製作演示(略）

1、頁面製作整體規劃

對象：一個列印商業宣傳主頁
格調:活潑，色彩，簡單，大方

2、資料收集

a 、商標、網址、公司宣傳冊、了解企業文化，了解負責人的品位、他們的案例、跟負責人溝通掌握信息
b 、網上下載相似印刷行業的公司主頁，了解現有行業的的一些設計特點
c、下載一些色彩比較華麗的圖片，或跟印刷相關連的圖片
d、如果你自己不會動態語言，下載一個滿足你功能的新聞發布系統和留言源碼

3、偽界面設計

a、在PS設計偽界面

b、切片工具對整體進行合理的分割
注意點：隱藏你要通過輸入的文字，分割時要保持他的整體意義，盡量讓每一部分是完整的，注意一些交互上操作。

c、導成WEB格式-直接導成HTML格式—步驟:
1、.點擊文件存儲為WEB文件格式
2、在界面裡面調整理想參數
3、導出保存PS能自動生成一些HTML代碼，但是他不是很標准，你必須在Dreamweave裡面進行加工

d、在Dreamweave裡面進行代碼加工
具體步驟：
1、先修改標題
2、修改頁面屬性：背景顏色、背景圖片.....
3、把頁面調整為布局格式（這個可以按照自己習慣來設置，有標準的表格方式，也有布局類型）
4、把要添加文字的圖片轉化為背景形式
a、找到對應圖片路徑
b、拷貝路徑後刪除圖片
c、轉化為標准形式
d、把路徑粘貼到背景屬性上
e、回到布局界面
5、添加具體文字連接設置等操作
6、CSS設置
7、修整代碼，發布預覽按F12即可預覽效果

4、測試網頁兼容性

按照你設計時的對象,根據IE版本以及瀏覽器的不同，調整理想的效果，但是大部分出現問題的是JS\VB等代碼，如果只是單純靜態圖片，基本不會有很大的差別，推選大家盡量往W3C標准靠

5、發布站點

購買自己的空間域名，其實事先就應該購買的，利用FTP上傳軟體，把你的頁面上傳到你的網上伺服器上推薦一款FTP上傳工具LeadFTP

8、如何建立自己的個人網站，網頁？及其簡單教程

又是這個問題~！這個真的很復雜，我也是邊製作邊學習，大概5年了，做得還不是很像樣，不過美工技巧肯定能超過一些大型網站了，我告訴你，學習做網站絕不是輕而易舉的事，這得學要前期的投資，你最好去報個班，學習一下，這樣才行。比如報 dreamweaver 製作，或者先學 （frontpage ps:感覺沒用）。不懂就可以到baidu上問。告訴你都要學習什麼 dreamweaver . flash . fireworks. HTML代碼. （asp，php. java.css.後期) 甚至你還要懂 pascal.c++. 告訴你個技巧，你可以先去 265 網站 下載個整站，申請個免費空間，傳上去，這樣既可以快速擁有自己的網站，又可以進行學習，一舉兩得，比如可以進行修改，從而了解網站代碼之間的關系，可以認識到伺服器，可以查看它的html代碼，進行修改，或保留（以後用）