網站設計與開發從新手到高手

第1 篇 網站設計與開發入門

第1 章　網站設計基礎. 001

1.1 預備知識  001

1.1.1　什麽是網站 … 001

1.1.2　靜態網頁和動態網頁  001

1.1.3　申請域名 …… 002

1.1.4　申請服務器空間 …… 004

1.2 常用的網頁設計軟件 … 004

1.2.1　網頁設計軟件Dreamweaver  004

1.2.2　圖像設計軟件Photoshop … 005

1.2.3　HTML  006

1.2.4　FTP 軟件 …… 007

1.3 創建網站的基本步驟 … 007

1.3.1　網站的定位 … 007

1.3.2　確定網站主題  008

1.3.3　網站整體規劃  008

1.3.4　收集資料與素材 …… 008

1.3.5　設計網頁圖像  008

1.3.6　切圖並製作成頁面 … 009

1.3.7　開發動態網站模塊 … 009

1.3.8　發布與上傳 … 010

1.3.9　後期更新與維護 …… 011

1.3.10　網站的推廣  012

1.4 本章小結  012

 

第2 章　網站頁面的策劃與佈局 013

2.1 網站欄目和頁面設計策劃 …… 013

2.1.1　為什麽要進行策劃 … 013

2.1.2　網站的欄目策劃 …… 014

2.1.3 網站的頁面策劃 …… 015

2.2　網站佈局的基本元素 … 016

2.2.1　網站Logo …… 016

2.2.2　網站Banner … 016

2.2.3　導航欄  016

2.2.4　主體內容 …… 017

2.2.5　文本 … 017

2.2.6　圖像 … 017

2.2.7　頁腳 … 018

2.2.8　廣告區  018

2.3　網頁版面佈局設計 …… 018

2.3.1　網頁版面佈局原則 … 018

2.3.2　點、線、面的構成 … 020

2.4　網頁佈局方法 … 021

2.4.1　紙上佈局法 … 021

2.4.2　軟件佈局法 … 021

2.5　常見的網頁面結構類型  022

2.5.1　“廠”字形佈局 …… 022

2.5.2　“國”字形佈局 …… 022

2.5.3　“框架”型佈局 …… 023

2.5.4　“封面”型佈局 …… 023

2.5.5　Flash 型佈局  023

2.6　文字與版式設計  023

2.6.1　文字的字體、字號、行距 … 023

2.6.2 文字的顏色 … 024

2.6.3　文字的圖形化  024

2.7　圖像設計排版 … 025

2.7.1　網頁中應用圖像的註意事項  025

2.7.2　讓圖片更合理  026

2.8　本章小結  026

 

第3 章　網頁的色彩搭配. 027

3.1 色彩基礎知識 … 027

3.1.1　色彩的基本概念 …… 027

3.1.2　網頁安全色 … 028

3.2 色彩的三要素 … __________029

3.2.1　色相 … 029

3.2.2　明度 … 030

3.2.3　純度 … 030

3.3 色彩與心理 …… 030

3.3.1　紅色的心理與網頁表現 …… 031

3.3.2　黃色的心理與網頁表現 …… 031

3.3.3　藍色的心理與網頁表現 …… 031

3.3.4　綠色的心理與網頁表現 …… 031

3.3.5　紫色的心理與網頁表現 …… 032

3.3.6　橙色的心理與網頁表現 …… 032

3.3.7　白色的心理與網頁表現 …… 032

3.3.8　黑色的心理與網頁表現 …… 032

3.3.9　灰色的心理與網頁表現 …… 033

3.4 頁面色彩搭配 … 033

3.4.1　網頁色彩搭配原理 … 033

3.4.2　網頁設計中色彩搭配的技巧  034

3.4.3　使用配色軟件  036

3.4.4 使用輔助色 … 036

3.5 本章小結  037

 

第2 篇 網頁的排版與製作

4.1 認識Dreamweaver 界面 …… 038

4.2 創建本地站點 … 039

4.3 輸入文本  040

4.3.1　在網頁中插入文本 … 040

4.3.2　改變字體 …… 041

4.3.3　設置字號 …… 042

4.4 插入其他文本元素 …… 042

4.4.1　插入特殊字符  042

4.4.2　插入水平線 … 043

4.4.3　插入時間 …… 044

4.4.4　插入空格 …… 045

4.5 列表的設置 …… 046

4.5.1　使用無序列表  046

4.5.2　使用有序列表  047

4.6 創建超鏈接 …… 048

4.6.1　創建電子郵件鏈接 … 048

4.6.2　創建腳本超鏈接 …… 049

4.6.3　創建下載文件超鏈接  050

4.6.4　創建圖像熱點超鏈接  050

4.7 實戰應用—創建文本網頁 … 052

4.8 本章小結  053

 

第5 章　用表格進行網頁排版 054

5.1 在網頁中插入表格 …… 054

5.1.1　插入表格 …… 054

5.1.2　添加內容到單元格 … 055

5.2 設置單元格和表格屬性  055

5.2.1　設置單元格屬性 …… 056

5.2.2　設置表格屬性  056

5.3 表格的基本操作  056

5.3.1　選定表格 …… 057

5.3.2　添加行或列 … 057

5.3.3　刪除行或列 … 058

5.3.4　合並單元格 … 058

5.3.5　拆分單元格 … 058

5.3.6　調整表格大小  059

5.3.7　調整單元格大小 …… 060

5.4 表格的其他功能  061

5.4.1　導入表格式數據 …… 061

5.4.2　排序表格 …… 062

5.5 綜合案例  063

5.6 本章小結  068

 

第6 章　利用圖像和多媒體美化網頁 069

6.1 網頁中常用的圖像格式  069

6.2 在網頁中插入圖像 …… 070

6.2.1 插入圖像 …… 070

6.2.2 設置圖像屬性  071

6.3 在網頁中簡單地編輯圖像 …… 072

6.3.1 裁剪圖像 …… 072

6.3.2 調整圖像亮度和對比度 …… 073

6.3.3 銳化圖像 …… 073

6.4 插入鼠標經過圖像 …… 074

6.5 插入聲音  076

6.5.1　音頻文件格式  076

6.5.2　添加背景音樂  076

6.6 插入視頻  078

6.6.1　視頻文件格式  078

6.6.2　在網頁中插入視頻文件 …… 078

6.7 綜合案例  079

6.8 本章小結  080

 

第7 章　使用模板和庫. 081

7.1 認識模板  081

7.2　創建模板  081

7.2.1 在空白文檔中創建模板 …… 082

7.2.2　從現有文檔創建模板  082

7.2.3　創建可編輯區域 …… 083

7.3　創建基於模板的頁面 … 084

7.4　庫的創建、管理與應用  085

7.4.1　創建庫項目 … 086

7.4.2　庫項目的應用  087

7.4.3　編輯庫項目 … 088

7.5　綜合案例—創建完整的企業網站

模板 …… 089

7.6　綜合案例—利用模板創建網頁 …… 093

7.7　本章小結  095

 

第8 章　使用行為添加網頁特效 096

8.1 特效中的行為和事件 … 096

8.1.1　網頁行為 …… 096

8.1.2 網頁事件 …… 097

8.2　使用Dreamweaver 內置行為  098

8.2.1　交換圖像 …… 098

8.2.2　彈出信息 …… 099

8.2.3　打開瀏覽器窗口 …… 100

8.2.4　轉到URL …… 101

8.2.5　預先載入圖像  103

8.2.6　調用JavaScript …… 104

8.2.7　設置狀態欄文本 …… 105

8.3　本章小結  106

 

第9 章　利用表單對象創建表單文件 107

9.1 表單概述  107

9.1.1　關於表單 …… 107

9.1.2　表單元素 …… 107

9.2　插入輸入類表單對象 … 108

9.2.1　插入表單域 … 108

9.2.2　插入文本域 … 109

9.2.3　插入密碼域 … 110

9.2.4　插入多行文本域 …… 110

9.2.5　插入隱藏域 … 111

9.2.6　插入復選框 … 111

9.2.7　插入單選按鈕  112

9.2.8　插入選擇框 … 113

9.2.9　插入URL …… 114

9.2.10　插入圖像域  114

9.2.11　插入文件域  115

9.2.12　插入按鈕 … 115

9.3　實戰應用—製作網站註冊頁面 …… 116

9.4　本章小結  119

 

第10 章　　使用CSS 樣式美化網頁. 120

10.1 初識CSS …… 120

10.1.1　CSS 概述 … 120

10.1.2　CSS 的作用  121

10.1.3　CSS 基本語法 …… 121

10.2　字體屬性 …… 122

10.2.1 字體font-family …… 122

10.2.2　字號font-size  122

10.2.3　字體加粗font-weight …… 123

10.2.4　字體風格font-style  123

10.2.5　字體變形font-variant …… 124

10.3　段落屬性 …… 125

10.3.1　單詞間隔word-spacing …… 125

10.3.2　文本行高line-height  125

10.3.3　文字修飾text-decoration … 126

10.3.4　文本對齊方式text-align … 126

10.3.5　文本轉換text-transform … 127

10.3.6　文本縮進text-indent  128

10.4　圖片樣式設置  128

10.4.1　定義圖片邊框 …… 128

10.4.2　設置文字環繞圖片  130

10.5　綜合案例—為圖片添加邊框 …… 131

10.6　本章小結 …… 131

 

第11 章　使用CSS+Div 靈活佈局頁面 132

11.1 初識Div  132

11.1.1　Div 概述 …… 132

11.1.2　創建Div …… 133

11.1.3　CSS+Div 佈局的優勢 …… 133

11.2　CSS 定位與Div 佈局  134

11.2.1　盒子模型 … 134

11.2.2　元素的定位  134

11.3　CSS+Div 佈局的常用方法 … 137

11.3.1　使用Div 對頁面整體規劃  138

11.3.2　設計各塊的位置　  138

11.3.3　使用CSS 定位 …… 138

11.4 本章小結 …… 139

 

第12 章　使用jQuery UI 和jQuery 特效 140

12.1 Tabs 設計選項卡 …… 140

12.2 Accordion 設計折疊面板 …… 142

12.3 Dialog 設計對話框 … 143

12.4 Shake 設計振動特效  145

12.5 Highlight 設計高亮特效 …… 146

12.6 設計頁視圖 … 148

12.7 使用按鈕組件  150

12.7.1 插入按鈕 … 150

12.7.2 按鈕組的排列 …… 151

12.8 使用表單組件  152

12.8.1 認識表單組件 …… 152

12.8.2 插入文本框  152

12.8.3 插入滑塊 … 155

12.8.4 插入翻轉切換開關  156

12.8.5 插入單選按鈕 …… 157

12.8.6 插入復選框  159

12.9　本章小結 …… 160

 

第3 篇 設計精美的網頁圖像

第13 章　網頁圖像設計軟件Photoshop. 161

13.1 Photoshop 介紹 …… 161

13.1.1　菜單欄 …… 162

13.1.2　工具箱及工具選項欄 …… 162

13.1.3　文檔窗口及狀態欄  162

13.1.4　面板  163

13.2　繪圖工具的使用 …… 163

13.2.1　使用矩形工具和圓角矩形工具 … 163

13.2.2　使用“直線工具”  164

13.2.3　使用油漆桶工具 … 164

13.2.4　使用漸變工具 …… 165

13.3　製作文本特效  166

13.3.1　圖層的基本操作 … 166

13.3.2　使用圖層樣式 …… 167

13.3.3　輸入文本 … 167

13.3.4　設置文本格式 …… 168

13.3.5　設置變形文字 …… 168

13.3.6　使用濾鏡 … 169

13.4　輸出圖像 …… 170

13.4.1　將圖片保存為PSD 格式 … 170

13.4.2　將圖片導出為JPEG 格式 … 171

13.4.3　將圖片導出為GIF 格式 … 171

13.5　綜合案例 …… 171

13.6　本章小結 …… 173

 

第14 章　頁面圖像的切割與優化 174

14.1 優化網頁圖像  174

14.1.1　圖像的優化  174

14.1.2　輸出圖像 … 175

14.1.3　輸出透明GIF 圖像  175

14.2　網頁切片輸出  176

14.2.1　創建切片 … 176

14.2.2　編輯切片 … 177

14.2.3　優化和輸出切片 … 177

14.3　創建GIF 動畫  178

14.3.1　GIF 動畫原理  178

14.3.2　認識“時間軸”面板 …… 179

14.4　綜合案例 …… 179

14.4.1 在Photoshop 中優化圖像 … 179

14.4.2 切割輸出網站主頁  180

14.5　本章小結 …… 181

 

第15 章　設計網站的圖片元素 182

15.1 網頁中的設計元素 … 182

15.1.1　Logo  182

15.1.2　導航欄 …… 182

15.1.3　頁面佈局區  183

15.2　網站Logo …… 183

15.2.1　網站Logo 設計標準  184

15.2.2　設計網站Logo …… 184

15.3　設計網站Banner …… 186

15.3.1　什麽是Banner …… 186

15.3.2　設計有動畫效果的Banner  186

15.4　製作網頁導航條 …… 189

15.4.1　網頁導航條簡介 … 189

15.4.2　設計橫向導航條 … 189

15.5　本章小結 …… 190

 

第4 篇 HTML 網站開發

第16 章　使用HTML 語言編寫網頁. 191

16.1 認識HTML … 191

16.1.1　HTML 是什麽 …… 191

16.1.2　HTML 基本標簽 … 192

16.1.3　HTML 文件組成 … 192

16.2　HTML 文檔頭部標簽  193

16.2.1　文檔類型聲明 …… 193

16.2.2　文檔頭部標簽 …… 193

16.2.3　文檔描述 … 193

16.2.4　網頁標題 … 194

16.3　基本的HTML 標簽 … 194

16.3.1　主體標簽 … 194

16.3.2　設置頁面邊距 …… 195

16.3.3　標題標簽 … 195

16.3.4　換行標簽 … 196

16.3.5　段落標簽 … 197

16.3.6　水平線標簽  197

16.4　文字和超鏈接  198

16.4.1　文本格式化標簽 … 198

16.4.2　文本引用與縮進 … 199

16.4.3　字體的設置  199

16.4.4　文本顏色設置 …… 200

16.4.5　超鏈接標簽  200

16.4.6　相對路徑和絕對路徑 …… 201

16.4.7　設置目標窗口 …… 202

16.4.8　電子郵件鏈接mailto  202

16.5　圖片和列表 … 203

16.5.1　圖像標簽 … 203

16.5.2　用圖像作為超鏈接  204

16.5.3　有序列表 … 204

16.5.4　無序列表 … 205

16.5.5　嵌套列表 … 206

16.6　表格 … 206

16.6.1　創建基本表格 …… 207

16.6.2　表格的邊框和顏色  207

16.6.3　設置表格的背景 … 208

16.6.4　表格的間距與邊距  208

16.7　表單 … 209

16.7.1　表單標簽 … 209

16.7.2　HTML 表單控件 … 210

16.7.3　文本域（text） …… 210

16.7.4　下拉列表控件 …… 211

16.8　本章小結 …… 211

 

第17 章　HTML 5 的新特性 212

17.1 認識HTML 5 … 212

17.2　HTML 5 與HTML 4 的區別 … 213

17.2.1　HTML 5 的語法變化  213

17.2.2　HTML 5 中的標記方法 …… 214

17.2.3　HTML 5 語法中的3 個要點  214

17.2.4　標簽實例 … 215

17.3　HTML 5 新增和廢除的元素 … 215

17.3.1　新增的結構元素 … 215

17.3.2　新增的塊級語義元素 …… 216

17.3.3　新增的行內語義元素 …… 218

17.3.4　新增的嵌入多媒體元素與交

互性元素 … 220

17.3.5　新增的input 元素的類型 … 220

17.4　本章小結 …… 221

 

第18 章　HTML 5 的結構. 222

18.1 新增的主體結構元素  222

18.1.1　article 元素 … 222

18.1.2　section 元素  223

18.1.3　nav 元素 …… 224

18.1.4　aside 元素 … 225

18.1.5　pubdate 屬性  226

18.2　新增的非主體結構元素 …… 226

18.2.1　header 元素  226

18.2.2　hgroup 元素  227

18.2.3　footer 元素 … 228

18.2.4　address 元素  228

18.3　播放視頻 …… 229

18.4　HTML 5 canvas 畫布  230

18.5　本章小結 …… 231

 

第5 篇 動態網站開發

第19 章　動態網站基礎 232

19.1 動態網站原理  232

19.2　在Dreamweaver 中編碼 …… 232

19.3　動態網站技術類型 … 234

19.3.1　ASP … 234

19.3.2　PHP … 235

19.3.3　JSP … 235

19.3.4　ASP、PHP 和JSP 比較 … 235

19.4　搭建本地服務器 …… 236

19.4.1　安裝IIS …… 236

19.4.2　配置Web 服務器 … 237

19.5　數據庫相關術語 …… 238

19.5.1　什麽是數據庫 …… 238

19.5.2　數據庫表 … 238

19.6　常見的數據庫管理系統 …… 239

19.7　創建Access 數據庫 … 239

19.8　創建數據庫連接 …… 241

19.9 本章小結 …… 242

 

第20 章　動態網頁開發語言ASP 基礎與應用 243

20.1 動態網站原理  243

20.1.1　ASP 簡介 … 243

20.1.2　ASP 的工作原理 … 244

20.2　ASP 連接數據庫 …… 244

20.3　Request 對象  245

20.3.1　集合對象 … 245

20.3.2　屬性  245

20.3.3　方法  245

20.3.4　Request 對象使用實例 …… 245

20.4　Response 對象  246

20.4.1　集合對象 … 246

20.4.2　屬性  247

20.4.3　方法  247

20.4.4　Response 對象使用實例 … 247

20.5　Server 對象 … 248

20.5.1　屬性  248

20.5.2　方法  248

20.6　Application 對象 …… 248

20.6.1　方法  249

20.6.2　事件  249

20.7　Session 對象  249

20.7.1　屬性  250

20.7.2　方法  250

20.7.3　事件  250

20.7.4　Session 對象實例 … 250

20.8　本章小結 …… 251

 

第21 章　動態網頁腳本語言VBScript. 252

21.1 VBScript 概述  252

21.2　VBScript 數據類型 … 253

21.3　VBScript 變量  253

21.3.1　聲明變量 … 254

21.3.2　命名規則 … 254

21.3.3　為變量賦值  254

21.4　VBScript 運算符優先級 …… 254

21.5　使用條件語句  255

21.5.1　使用if…then…else 進行判斷 …… 255

21.5.2　使用 Select…Case 進行判斷  256

21.6　使用循環語句  256

21.6.1　使用Do…Loop 循環  257

21.6.2　使用While…Wend  257

21.6.3　使用For…Next …… 257

21.7　VBScript 過程  257

21.7.1　過程分類 … 258

21.7.2　過程的輸入/ 輸出 … 258

21.7.3　在代碼中使用Sub 和Function 過程 … 258

21.8　VBScript 函數  258

21.9　本章小結 …… 259

 

第6 篇 網站發布與運營

第22 章　網站的發布、維護與推廣 260

22.1 上傳發布網站  260

22.2　網站維護 …… 261

22.2.1　網站內容的更新 … 261

22.2.2　網站風格的更新 … 262

22.2.3　網站備份 … 262

22.3 網站推廣 …… 263

22.3.1　註冊到搜索引擎 … 263

22.3.2　友情鏈接 … 263

22.3.3　發布信息推廣 …… 264

22.3.4　微博營銷推廣 …… 264

22.3.5 微信營銷推廣 …… 264

22.3.6　設置QQ 簽名推廣  265

22.3.7　QQ 群推廣技巧 …… 265

22.4　本章小結 …… 265

 

第7 篇 網站綜合案例

第23 章　設計製作公司宣傳網站 266

23.1 網站前期策劃  266

23.1.1 網站總體策劃 …… 267

23.1.2 企業網站主要功能欄目 … 267

23.2 設計網站頁面  268

23.2.1 首頁的設計  268

23.2.2 切圖並輸出  273

23.3 在Dreamweaver 中進行頁面排版製作 274

23.3.1 創建本地站點 …… 274

23.3.2 創建二級模板頁面  275

23.3.3 利用模板製作其他網頁 … 279

23.4 給網頁添加特效 …… 281

23.4.1 滾動公告 … 281

23.4.2 製作彈出窗口頁面  281

23.5 本章小結 …… 282__