網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)是目前****的技術(shù)職位之一,《網(wǎng)站設(shè)計(jì)與開發(fā)從新手到高手》由淺入深、循序漸進(jìn)地向讀者介紹了網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)的各種相關(guān)技術(shù),終目的是使讀者能夠勝任網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)這項(xiàng)工作,同時(shí)達(dá)到能夠獨(dú)立開發(fā)網(wǎng)站的技術(shù)水平。
《網(wǎng)站設(shè)計(jì)與開發(fā)從新手到高手》共23章,以網(wǎng)站設(shè)計(jì)與開發(fā)入門網(wǎng)頁(yè)的排版與制作設(shè)計(jì)精美的網(wǎng)頁(yè)圖像HTML網(wǎng)站開發(fā)動(dòng)態(tài)網(wǎng)站開發(fā)網(wǎng)站發(fā)布維護(hù)與推廣網(wǎng)站綜合案例為線索展開,循序漸進(jìn)地講述了網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站建設(shè)方面的知識(shí)。內(nèi)容涵蓋網(wǎng)站頁(yè)面的策劃與布局,網(wǎng)頁(yè)的色彩搭配,Dreamweaver,Photoshop,HTML,CSS,CSS Div布局,HTML 5,ASP,VBScript,網(wǎng)站的發(fā)布維護(hù)與推廣等技術(shù)。
《網(wǎng)站設(shè)計(jì)與開發(fā)從新手到高手》知識(shí)全面實(shí)用,通俗易懂,讓讀者輕松實(shí)現(xiàn)自己制作網(wǎng)站的夢(mèng)想。本書可作為大專院校、高職高專、中等職業(yè)學(xué)校計(jì)算機(jī)專業(yè)的教材,也可以作為各種計(jì)算機(jī)培訓(xùn)班的培訓(xùn)教材,還可以作為想學(xué)習(xí)網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)自學(xué)者的參考用書。
1 篇 網(wǎng)站設(shè)計(jì)與開發(fā)入門
1 章 網(wǎng)站設(shè)計(jì)基礎(chǔ). 001
1.1 預(yù)備知識(shí) 001
1.1.1 什么是網(wǎng)站 … 001
1.1.2 靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè) 001
1.1.3 申請(qǐng)域名 …… 002
1.1.4 申請(qǐng)服務(wù)器空間 …… 004
1.2 常用的網(wǎng)頁(yè)設(shè)計(jì)軟件 … 004
1.2.1 網(wǎng)頁(yè)設(shè)計(jì)軟件Dreamweaver 004
1.2.2 圖像設(shè)計(jì)軟件Photoshop … 005
1.2.3 HTML 006
1.2.4 FTP 軟件 …… 007
1.3 創(chuàng)建網(wǎng)站的基本步驟 … 007
1.3.1 網(wǎng)站的定位 … 007
1.3.2 確定網(wǎng)站主題 008
1.3.3 網(wǎng)站整體規(guī)劃 008
1.3.4 收集資料與素材 …… 008
1.3.5 設(shè)計(jì)網(wǎng)頁(yè)圖像 008
1.3.6 切圖并制作成頁(yè)面 … 009
1.3.7 開發(fā)動(dòng)態(tài)網(wǎng)站模塊 … 009
1.3.8 發(fā)布與上傳 … 010
1.3.9 后期更新與維護(hù) …… 011
1.3.10 網(wǎng)站的推廣 012
1.4 本章小結(jié) 012
2 章 網(wǎng)站頁(yè)面的策劃與布局 013
2.1 網(wǎng)站欄目和頁(yè)面設(shè)計(jì)策劃 …… 013
2.1.1 為什么要進(jìn)行策劃 … 013
2.1.2 網(wǎng)站的欄目策劃 …… 014
2.1.3 網(wǎng)站的頁(yè)面策劃 …… 015
2.2 網(wǎng)站布局的基本元素 … 016
2.2.1 網(wǎng)站Logo …… 016
2.2.2 網(wǎng)站Banner … 016
2.2.3 導(dǎo)航欄 016
2.2.4 主體內(nèi)容 …… 017
2.2.5 文本 … 017
2.2.6 圖像 … 017
2.2.7 頁(yè)腳 … 018
2.2.8 廣告區(qū) 018
2.3 網(wǎng)頁(yè)版面布局設(shè)計(jì) …… 018
2.3.1 網(wǎng)頁(yè)版面布局原則 … 018
2.3.2 點(diǎn)、線、面的構(gòu)成 … 020
2.4 網(wǎng)頁(yè)布局方法 … 021
2.4.1 紙上布局法 … 021
2.4.2 軟件布局法 … 021
2.5 常見的網(wǎng)頁(yè)面結(jié)構(gòu)類型 022
2.5.1 廠字形布局 …… 022
2.5.2 國(guó)字形布局 …… 022
2.5.3 框架型布局 …… 023
2.5.4 封面型布局 …… 023
2.5.5 Flash 型布局 023
2.6 文字與版式設(shè)計(jì) 023
2.6.1 文字的字體、字號(hào)、行距 … 023
2.6.2 文字的顏色 … 024
2.6.3 文字的圖形化 024
2.7 圖像設(shè)計(jì)排版 … 025
2.7.1 網(wǎng)頁(yè)中應(yīng)用圖像的注意事項(xiàng) 025
2.7.2 讓圖片更合理 026
2.8 本章小結(jié) 026
3 章 網(wǎng)頁(yè)的色彩搭配. 027
3.1 色彩基礎(chǔ)知識(shí) … 027
3.1.1 色彩的基本概念 …… 027
3.1.2 網(wǎng)頁(yè)安全色 … 028
3.2 色彩的三要素 … __________029
3.2.1 色相 … 029
3.2.2 明度 … 030
3.2.3 純度 … 030
3.3 色彩與心理 …… 030
3.3.1 紅色的心理與網(wǎng)頁(yè)表現(xiàn) …… 031
3.3.2 黃色的心理與網(wǎng)頁(yè)表現(xiàn) …… 031
3.3.3 藍(lán)色的心理與網(wǎng)頁(yè)表現(xiàn) …… 031
3.3.4 綠色的心理與網(wǎng)頁(yè)表現(xiàn) …… 031
3.3.5 紫色的心理與網(wǎng)頁(yè)表現(xiàn) …… 032
3.3.6 橙色的心理與網(wǎng)頁(yè)表現(xiàn) …… 032
3.3.7 白色的心理與網(wǎng)頁(yè)表現(xiàn) …… 032
3.3.8 黑色的心理與網(wǎng)頁(yè)表現(xiàn) …… 032
3.3.9 灰色的心理與網(wǎng)頁(yè)表現(xiàn) …… 033
3.4 頁(yè)面色彩搭配 … 033
3.4.1 網(wǎng)頁(yè)色彩搭配原理 … 033
3.4.2 網(wǎng)頁(yè)設(shè)計(jì)中色彩搭配的技巧 034
3.4.3 使用配色軟件 036
3.4.4 使用輔助色 … 036
3.5 本章小結(jié) 037
2 篇 網(wǎng)頁(yè)的排版與制作
4.1 認(rèn)識(shí)Dreamweaver 界面 …… 038
4.2 創(chuàng)建本地站點(diǎn) … 039
4.3 輸入文本 040
4.3.1 在網(wǎng)頁(yè)中插入文本 … 040
4.3.2 改變字體 …… 041
4.3.3 設(shè)置字號(hào) …… 042
4.4 插入其他文本元素 …… 042
4.4.1 插入特殊字符 042
4.4.2 插入水平線 … 043
4.4.3 插入時(shí)間 …… 044
4.4.4 插入空格 …… 045
4.5 列表的設(shè)置 …… 046
4.5.1 使用無(wú)序列表 046
4.5.2 使用有序列表 047
4.6 創(chuàng)建鏈接 …… 048
4.6.1 創(chuàng)建電子郵件鏈接 … 048
4.6.2 創(chuàng)建腳本鏈接 …… 049
4.6.3 創(chuàng)建下載文件鏈接 050
4.6.4 創(chuàng)建圖像熱點(diǎn)鏈接 050
4.7 實(shí)戰(zhàn)應(yīng)用創(chuàng)建文本網(wǎng)頁(yè) … 052
4.8 本章小結(jié) 053
5 章 用表格進(jìn)行網(wǎng)頁(yè)排版 054
5.1 在網(wǎng)頁(yè)中插入表格 …… 054
5.1.1 插入表格 …… 054
5.1.2 添加內(nèi)容到單元格 … 055
5.2 設(shè)置單元格和表格屬性 055
5.2.1 設(shè)置單元格屬性 …… 056
5.2.2 設(shè)置表格屬性 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 調(diào)整表格大小 059
5.3.7 調(diào)整單元格大小 …… 060
5.4 表格的其他功能 061
5.4.1 導(dǎo)入表格式數(shù)據(jù) …… 061
5.4.2 排序表格 …… 062
5.5 綜合案例 063
5.6 本章小結(jié) 068
6 章 利用圖像和多媒體美化網(wǎng)頁(yè) 069
6.1 網(wǎng)頁(yè)中常用的圖像格式 069
6.2 在網(wǎng)頁(yè)中插入圖像 …… 070
6.2.1 插入圖像 …… 070
6.2.2 設(shè)置圖像屬性 071
6.3 在網(wǎng)頁(yè)中簡(jiǎn)單地編輯圖像 …… 072
6.3.1 裁剪圖像 …… 072
6.3.2 調(diào)整圖像亮度和對(duì)比度 …… 073
6.3.3 銳化圖像 …… 073
6.4 插入鼠標(biāo)經(jīng)過(guò)圖像 …… 074
6.5 插入聲音 076
6.5.1 音頻文件格式 076
6.5.2 添加背景音樂(lè) 076
6.6 插入視頻 078
6.6.1 視頻文件格式 078
6.6.2 在網(wǎng)頁(yè)中插入視頻文件 …… 078
6.7 綜合案例 079
6.8 本章小結(jié) 080
7 章 使用模板和庫(kù). 081
7.1 認(rèn)識(shí)模板 081
7.2 創(chuàng)建模板 081
7.2.1 在空白文檔中創(chuàng)建模板 …… 082
7.2.2 從現(xiàn)有文檔創(chuàng)建模板 082
7.2.3 創(chuàng)建可編輯區(qū)域 …… 083
7.3 創(chuàng)建基于模板的頁(yè)面 … 084
7.4 庫(kù)的創(chuàng)建、管理與應(yīng)用 085
7.4.1 創(chuàng)建庫(kù)項(xiàng)目 … 086
7.4.2 庫(kù)項(xiàng)目的應(yīng)用 087
7.4.3 編輯庫(kù)項(xiàng)目 … 088
7.5 綜合案例創(chuàng)建完整的企業(yè)網(wǎng)站
模板 …… 089
7.6 綜合案例利用模板創(chuàng)建網(wǎng)頁(yè) …… 093
7.7 本章小結(jié) 095
8 章 使用行為添加網(wǎng)頁(yè)特效 096
8.1 特效中的行為和事件 … 096
8.1.1 網(wǎng)頁(yè)行為 …… 096
8.1.2 網(wǎng)頁(yè)事件 …… 097
8.2 使用Dreamweaver 內(nèi)置行為 098
8.2.1 交換圖像 …… 098
8.2.2 彈出信息 …… 099
8.2.3 打開瀏覽器窗口 …… 100
8.2.4 轉(zhuǎn)到URL …… 101
8.2.5 預(yù)先載入圖像 103
8.2.6 調(diào)用JavaScript …… 104
8.2.7 設(shè)置狀態(tài)欄文本 …… 105
8.3 本章小結(jié) 106
9 章 利用表單對(duì)象創(chuàng)建表單文件 107
9.1 表單概述 107
9.1.1 關(guān)于表單 …… 107
9.1.2 表單元素 …… 107
9.2 插入輸入類表單對(duì)象 … 108
9.2.1 插入表單域 … 108
9.2.2 插入文本域 … 109
9.2.3 插入密碼域 … 110
9.2.4 插入多行文本域 …… 110
9.2.5 插入隱藏域 … 111
9.2.6 插入復(fù)選框 … 111
9.2.7 插入單選按鈕 112
9.2.8 插入選擇框 … 113
9.2.9 插入U(xiǎn)RL …… 114
9.2.10 插入圖像域 114
9.2.11 插入文件域 115
9.2.12 插入按鈕 … 115
9.3 實(shí)戰(zhàn)應(yīng)用制作網(wǎng)站注冊(cè)頁(yè)面 …… 116
9.4 本章小結(jié) 119
10 章 使用CSS 樣式美化網(wǎng)頁(yè). 120
10.1 初識(shí)CSS …… 120
10.1.1 CSS 概述 … 120
10.1.2 CSS 的作用 121
10.1.3 CSS 基本語(yǔ)法 …… 121
10.2 字體屬性 …… 122
10.2.1 字體font-family …… 122
10.2.2 字號(hào)font-size 122
10.2.3 字體加粗font-weight …… 123
10.2.4 字體風(fēng)格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 文字修飾tet-decoration … 126
10.3.4 文本對(duì)齊方式tet-align … 126
10.3.5 文本轉(zhuǎn)換tet-transform … 127
10.3.6 文本縮進(jìn)tet-indent 128
10.4 圖片樣式設(shè)置 128
10.4.1 定義圖片邊框 …… 128
10.4.2 設(shè)置文字環(huán)繞圖片 130
10.5 綜合案例為圖片添加邊框 …… 131
10.6 本章小結(jié) …… 131
11 章 使用CSS Div 靈活布局頁(yè)面 132
11.1 初識(shí)Div 132
11.1.1 Div 概述 …… 132
11.1.2 創(chuàng)建Div …… 133
11.1.3 CSS Div 布局的優(yōu)勢(shì) …… 133
11.2 CSS 定位與Div 布局 134
11.2.1 盒子模型 … 134
11.2.2 元素的定位 134
11.3 CSS Div 布局的常用方法 … 137
11.3.1 使用Div 對(duì)頁(yè)面整體規(guī)劃 138
11.3.2 設(shè)計(jì)各塊的位置 138
11.3.3 使用CSS 定位 …… 138
11.4 本章小結(jié) …… 139
12 章 使用jQuery UI 和jQuery 特效 140
12.1 Tabs 設(shè)計(jì)選項(xiàng)卡 …… 140
12.2 Accordion 設(shè)計(jì)折疊面板 …… 142
12.3 Dialog 設(shè)計(jì)對(duì)話框 … 143
12.4 Shake 設(shè)計(jì)振動(dòng)特效 145
12.5 Highlight 設(shè)計(jì)高亮特效 …… 146
12.6 設(shè)計(jì)頁(yè)視圖 … 148
12.7 使用按鈕組件 150
12.7.1 插入按鈕 … 150
12.7.2 按鈕組的排列 …… 151
12.8 使用表單組件 152
12.8.1 認(rèn)識(shí)表單組件 …… 152
12.8.2 插入文本框 152
12.8.3 插入滑塊 … 155
12.8.4 插入翻轉(zhuǎn)切換開關(guān) 156
12.8.5 插入單選按鈕 …… 157
12.8.6 插入復(fù)選框 159
12.9 本章小結(jié) …… 160
3 篇 設(shè)計(jì)精美的網(wǎng)頁(yè)圖像
13 章 網(wǎng)頁(yè)圖像設(shè)計(jì)軟件Photoshop. 161
13.1 Photoshop 介紹 …… 161
13.1.1 菜單欄 …… 162
13.1.2 工具箱及工具選項(xiàng)欄 …… 162
13.1.3 文檔窗口及狀態(tài)欄 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
……