網(wǎng)頁制作綜合技術(shù)教程

前言

　　隨著互聯(lián)網(wǎng)技術(shù)的迅速發(fā)展，網(wǎng)頁設(shè)計、網(wǎng)站開發(fā)等職業(yè)隨之應(yīng)運而生了。在伴隨著網(wǎng)站設(shè)計與開發(fā)技術(shù)發(fā)展的過程中，相應(yīng)的工作流程也在不斷地變化和完善。目前，網(wǎng)頁設(shè)計與開發(fā)已經(jīng)成為了一項綜合性、技術(shù)性都很強的專業(yè)工作。因此，我們希望編寫一本具有較強綜合性和實踐性的教學(xué)用書。本書結(jié)合了作者多年的網(wǎng)頁設(shè)計、開發(fā)教學(xué)和工程實踐經(jīng)驗，以HTML、CSS和JavaScript為主線，即以Dreamweavel為開發(fā)工具，通過實例介紹在Dreamweavel軟件中如何運用HTML、CSS及JavaScript程序代碼來制作網(wǎng)頁。編寫和出版本書的指導(dǎo)思想有如下三點：　　“技術(shù)原理”與“配套工具”相配合，先講清原理，再實際操作；·網(wǎng)頁設(shè)計的綜合性很強，涉及很多不同方面的技術(shù)，因此本教程強調(diào)“綜合”掌握相關(guān)技術(shù)，“綜合”使用相應(yīng)軟件和工具；　　教學(xué)與實踐環(huán)節(jié)相配合。

內(nèi)容概要

　　HTML和CSS這兩個標(biāo)準(zhǔn)，以及使用制作網(wǎng)頁中常用的軟件進行網(wǎng)頁設(shè)計和制作的各方面內(nèi)容和技巧?！毒W(wǎng)頁制作綜合技術(shù)教程》分為6部分18章，內(nèi)容包括HTML網(wǎng)頁設(shè)計、美工與動畫元素設(shè)計、CSS頁面樣式設(shè)計、CSS頁面布局設(shè)計、JavaScript基礎(chǔ)以及綜合案例等。全書遵循Web標(biāo)準(zhǔn)，強調(diào)網(wǎng)頁中“表現(xiàn)”與“內(nèi)容”分離的思想，從規(guī)范的角度全面系統(tǒng)地介紹網(wǎng)頁設(shè)計的制作方法與技巧。書中給出了大量詳細的案例，并進行了詳細的分析，便于讀者理解?！毒W(wǎng)頁制作綜合技術(shù)教程》可作為高等院校各專業(yè)“網(wǎng)頁設(shè)計與制作”課程的教材，也可供網(wǎng)頁設(shè)計、制作和開發(fā)人員參考使用。

書籍目錄

第1部分 HTML網(wǎng)頁設(shè)計第1章 網(wǎng)頁設(shè)計基礎(chǔ)知識 21.1 網(wǎng)頁的基礎(chǔ)概念 21.2 網(wǎng)頁與HTML 31.3 Web標(biāo)準(zhǔn) 41.3.1 標(biāo)準(zhǔn)的重要性 41.3.2 “Web標(biāo)準(zhǔn)”概述 51.4 網(wǎng)頁設(shè)計與開發(fā)過程 61.4.1 基本任務(wù)與角色 61.4.2 明確網(wǎng)站定位 71.4.3 收集信息和素材 71.4.4 策劃欄目內(nèi)容 71.4.5 設(shè)計頁面方案 81.4.6 制作頁面 81.4.7 實現(xiàn)后臺功能 81.4.8 整合與測試網(wǎng)站 81.5 HTML基礎(chǔ) 91.5.1 創(chuàng)建第一個HTML文件 91.5.2 HTML文件結(jié)構(gòu) 101.6 簡單的HTML案例 111.7 網(wǎng)頁源文件的獲取 141.7.1 直接查看源文件 141.7.2 保存網(wǎng)頁 151.8 利用Dreamweaver快速建立基本文檔 161.8.1 Dreamweaver簡介 161.8.2 創(chuàng)建新的空白文檔 171.8.3 案例——創(chuàng)建新文檔 191.9 思考與練習(xí) 21第2章 用HTML設(shè)置文本和圖像 232.1 文本排版 232.1.1 實現(xiàn)段落與段內(nèi)換行 232.1.2 設(shè)置標(biāo)題 252.1.3 使文字水平居中 252.1.4 設(shè)置文字段落的縮進 262.2 文字列表 262.2.1 建立無序列表 262.2.2 建立有序列表 272.3 HTML標(biāo)記與HTML屬性 282.3.1 控制段落的水平位置 282.3.2 設(shè)置背景顏色 282.3.3 文字的特殊樣式 292.3.4 文字的大小和顏色 302.4 HTML標(biāo)記和屬性的局限性 312.5 特殊文字符號 312.6 使用圖像 332.6.1 網(wǎng)頁中的圖像格式 332.6.2 簡單案例 332.6.3 文件路徑 342.7 設(shè)置圖片的尺寸 362.8 設(shè)置圖像的替換文本 372.9 利用Dreamweaver設(shè)置文本和圖像 372.10 利用Dreamweaver代碼視圖提高效率 412.10.1 代碼提示 412.10.2 代碼折疊 422.10.3 拆分視圖與代碼快速定位 432.11 思考與練習(xí) 43第3章 超鏈接 453.1 設(shè)置文字超鏈接 453.1.1 URL的格式 453.1.2 URL的類型 463.2 設(shè)置頁面內(nèi)部鏈接 473.3 設(shè)置圖片超鏈接 483.4 設(shè)置電子郵件鏈接 483.5 設(shè)置鏈接頁面的目標(biāo)窗口 493.6 創(chuàng)建熱點區(qū)域 493.6.1 用HTML建立熱點區(qū)域 503.6.2 利用Dreamweaver定位熱點區(qū)域 513.7 框架之間的鏈接 533.7.1 建立框架與框架集 533.7.2 用cols屬性將窗口分為左右部分 543.7.3 用rows屬性將窗口分為上下部分 543.7.4 框架的嵌套 553.7.5 在框架中插入網(wǎng)頁 553.7.6 在框架之間進行鏈接 563.7.7 嵌入式框架 583.8 網(wǎng)站的組織結(jié)構(gòu)與維護 593.9 思考與練習(xí) 60第4章 使用表格與表單 614.1 使用表格 614.1.1 表格的基本結(jié)構(gòu) 614.1.2 合并單元格 624.1.3 設(shè)置對齊方式 634.1.4 設(shè)置表格背景色和邊框顏色 654.1.5 cellpadding屬性和cellspacing屬性 664.1.6 完整的表格標(biāo)記 664.1.7 用表格進行頁面布局的局限性 684.2 使用表單 714.2.1 表單的用途和原理 714.2.2 表單類型 724.3 Dreamweaver中的模板 764.3.1 認識模板 764.3.2 制作模板 774.3.3 使用模板 784.3.4 將文檔和模板分離 804.4 思考與練習(xí) 81第2部分 美工與動畫元素設(shè)計第5章 圖像處理與設(shè)計基礎(chǔ) 845.1 網(wǎng)頁美術(shù)設(shè)計的基礎(chǔ)知識 845.1.1 基本概念 845.1.2 Fireworks的基本操作流程 855.1.3 畫布 885.2 在Fireworks中編輯位圖 915.2.1 創(chuàng)建和取消選區(qū) 915.2.2 編輯選區(qū)中的像素區(qū)域 945.2.3 變形和扭曲 965.3 繪制矢量圖形 975.3.1 創(chuàng)建基本矢量圖形 975.3.2 調(diào)整矢量線條 995.4 美術(shù)基礎(chǔ)理論 1015.4.1 平面構(gòu)圖 1015.4.2 色彩 1035.5 案例——科技網(wǎng)站頁面設(shè)計 1055.5.1 繪制背景 1065.5.2 繪制主體區(qū)域 1065.5.3 制作Banner 1085.5.4 添加文字和素材 1095.6 思考與練習(xí) 110第6章 圖像的優(yōu)化與導(dǎo)出 1116.1 了解圖像文件類型 1116.2 使用“圖像預(yù)覽”命令優(yōu)化導(dǎo)出圖像 1126.2.1 使用“圖像預(yù)覽”命令 1126.2.2 優(yōu)化JPEG格式的圖像 1136.2.3 優(yōu)化GIF格式的圖像 1136.3 使用“切片” 1156.3.1 切片與導(dǎo)出 1156.3.2 用切片實現(xiàn)“分別優(yōu)化” 1196.4 思考與練習(xí) 121第7章 在網(wǎng)頁中使用Flash 1227.1 使用Dreamweaver添加內(nèi)置的Flash對象 1227.1.1 使用Dreamweaver內(nèi)置的Flash按鈕對象 1227.1.2 使用Dreamweaver內(nèi)置的Flash文本對象 1237.2 Flash軟件簡介 1247.2.1 Flash的基本功能 1247.2.2 Flash的工作界面 1257.2.3 Flash的工作流程 1267.3 在Flash中繪制圖形 1277.4 Flash動畫基本原理 1287.5 創(chuàng)建形狀補間動畫 1297.6 動畫補間 1317.7 在網(wǎng)頁中發(fā)布Flash動畫 1347.7.1 插入動畫 1357.7.2 設(shè)置Flash對象的屬性 1367.8 思考與練習(xí) 137第3部分 CSS樣式設(shè)計第8章 （X）HTML與CSS概述 1408.1 HTML與XHTML 1408.1.1 追根溯源 1408.1.2 DOCTYPE的含義與選擇 1418.1.3 XHTML與HTML的重要區(qū)別 1428.2 （X）HTML與CSS 1438.2.1 CSS標(biāo)準(zhǔn) 1438.2.2 傳統(tǒng)HTML的缺點 1448.2.3 CSS的引入 1448.2.4 如何編輯CSS 1468.2.5 瀏覽器與CSS 1468.3 構(gòu)造CSS規(guī)則 1478.4 基本CSS選擇器 1488.4.1 標(biāo)記選擇器 1498.4.2 類別選擇器 1498.4.3 ID選擇器 1528.5 在HTML中使用CSS的方法 1538.5.1 行內(nèi)式 1538.5.2 內(nèi)嵌式 1548.5.3 鏈接式 1548.5.4 導(dǎo)入式 1558.5.5 各種方式的優(yōu)先級問題 1578.6 思考與練習(xí) 159第9章 CSS樣式設(shè)置實踐 1609.1 手工編寫頁面 1609.1.1 構(gòu)造頁面框架 1609.1.2 設(shè)置標(biāo)題 1619.1.3 控制圖片 1629.1.4 設(shè)置正文 1629.1.5 設(shè)置整體頁面 1639.1.6 對段落分別進行設(shè)置 1639.1.7 完整代碼 1649.1.8 CSS的注釋 1659.2 使用Dreamweaver進行CSS設(shè)置 1659.2.1 創(chuàng)建頁面 1659.2.2 新建CSS規(guī)則 1679.2.3 編輯CSS規(guī)則 1699.2.4 為圖像創(chuàng)建CSS規(guī)則 1709.3 復(fù)合選擇器 1729.3.1 “交集”選擇器 1729.3.2 “并集”選擇器 1739.3.3 后代選擇器 1759.4 CSS的繼承特性 1769.4.1 繼承關(guān)系 1779.4.2 CSS繼承的運用 1789.5 CSS的層疊特性 1799.6 思考與練習(xí) 181第10章 用CSS設(shè)置文本和圖像 18210.1 使用CSS設(shè)置文本樣式 18210.1.1 長度單位 18210.1.2 準(zhǔn)備頁面 18310.1.3 設(shè)置文字的字體 18310.1.4 設(shè)置文字的傾斜效果 18410.1.5 設(shè)置文字的加粗效果 18510.1.6 英文字母大小寫轉(zhuǎn)換 18610.1.7 控制文字的大小 18610.1.8 文字的裝飾效果 18710.1.9 設(shè)置段落首行縮進 18810.1.10 設(shè)置字詞間距 18910.1.11 設(shè)置段落內(nèi)部的文字行高 18910.1.12 設(shè)置段落之間的距離 19010.1.13 控制文本的水平位置 19110.1.14 設(shè)置文字與背景的顏色 19210.2 用CSS設(shè)置圖像樣式 19310.2.1 設(shè)置圖片邊框 19310.2.2 圖片縮放 19510.2.3 圖文混排 19610.2.4 案例——八大行星科普網(wǎng)頁 19810.2.5 設(shè)置圖片與文字的對齊方式 20110.3 用CSS設(shè)置背景樣式 20510.3.1 設(shè)置背景顏色 20510.3.2 設(shè)置背景圖像 20610.3.3 設(shè)置背景圖像平鋪 20710.3.4 設(shè)置背景圖像位置 20910.3.5 固定背景圖片位置 21110.3.6 設(shè)置標(biāo)題的圖像替換 21210.4 思考與練習(xí) 214第11章 用CSS設(shè)置鏈接與導(dǎo)航菜單 21611.1 豐富的超鏈接特效 21711.2 控制鼠標(biāo)指針 21911.3 設(shè)置項目列表樣式 21911.3.1 列表的符號 22011.3.2 圖片符號 22111.4 創(chuàng)建簡單的導(dǎo)航菜單 22311.4.1 簡單的豎直排列菜單 22311.4.2 橫豎自由轉(zhuǎn)換菜單 22511.5 應(yīng)用滑動門技術(shù)的玻璃效果菜單 22611.5.1 基本思路 22611.5.2 設(shè)置菜單整體效果 22711.5.3 使用“滑動門”技術(shù)設(shè)置玻璃材質(zhì)背景 22811.5.4 進一步解決的問題 22911.6 思考與練習(xí) 230第12章 用CSS設(shè)置表格和表單樣式 23112.1 控制表格 23112.1.1 設(shè)置表格的邊框 23112.1.2 確定表格的寬度 23412.1.3 其他與表格相關(guān)的標(biāo)記 23412.2 美化表格 23512.2.1 搭建HTML結(jié)構(gòu) 23512.2.2 整體設(shè)置 23612.2.3 設(shè)置單元格樣式 23712.2.4 斑馬紋效果 23712.3 案例——日歷 23812.3.1 搭建HTML結(jié)構(gòu) 23912.3.2 設(shè)置整體樣式和表頭樣式 24012.3.3 設(shè)置日歷單元格樣式 24112.4 CSS與表單 24312.4.1 表單中的元素 24412.4.2 多彩的下拉菜單 24612.5 案例——網(wǎng)上調(diào)查問卷 24712.6 思考與練習(xí) 249第4部分 CSS頁面布局設(shè)計第13章 CSS盒子模型 25213.1 “盒子”與“模型”的概念探究 25213.2 邊框 25313.2.1 設(shè)置邊框樣式 25413.2.2 屬性值的簡寫形式 25513.3 設(shè)置內(nèi)邊距 25613.4 設(shè)置外邊距 25713.5 盒子之間的關(guān)系 25813.5.1 HTML與DOM 25913.5.2 標(biāo)準(zhǔn)文檔流 26113.5.3 標(biāo)記與標(biāo)記 26213.6 盒子在標(biāo)準(zhǔn)流中的定位原則 26413.6.1 行內(nèi)元素之間的水平margin 26413.6.2 塊級元素之間的豎直margin 26513.6.3 嵌套盒子之間的margin 26613.6.4 margin可以設(shè)置為負值 26813.7 盒子模型概念的案例 26913.8 思考與練習(xí) 272第14章 盒子的浮動與定位 27314.1 盒子的浮動 27314.1.1 準(zhǔn)備代碼 27314.1.2 實驗1——設(shè)置第1個浮動的div 27414.1.3 實驗2——設(shè)置第2個浮動的div 27514.1.4 實驗3——設(shè)置第3個浮動的div 27514.1.5 實驗4——改變浮動的方向 27514.1.6 實驗5——再次改變浮動的方向 27614.1.7 實驗6——全部向左浮動 27714.1.8 實驗7——使用clear屬性清除浮動的影響 27714.1.9 實驗8——擴展盒子的高度 27814.2 盒子的定位 27914.2.1 靜態(tài)定位 28014.2.2 相對定位 28014.2.3 絕對定位 28314.2.4 固定定位 28814.3 z-index空間位置 28814.4 盒子的display屬性 28814.5 思考與練習(xí) 289第15章 CSS+div布局方法剖析 29015.1 CSS排版觀念 29015.1.1 將頁面用div分塊 29015.1.2 設(shè)計各塊的位置 29115.1.3 用CSS定位 29215.2 固定寬度且居中的版式 29415.2.1 方法一 29415.2.2 方法二 29615.3 左中右版式 29715.4 塊的背景色問題 29915.5 div排版與傳統(tǒng)的表格方式排版的分析 30115.6 排版實例：電子相冊 30215.6.1 搭建框架 30315.6.2 幻燈片模式 30415.6.3 詳細信息模式 30715.7 思考與練習(xí) 308第5部分 JavaScript基礎(chǔ)第16章 使用JavaScript增強網(wǎng)頁效果 31016.1 JavaScript概述 31016.1.1 JavaScript簡介 31016.1.2 JavaScript的特點 31016.1.3 JavaScript與CSS 31116.2 JavaScript語法基礎(chǔ) 31116.2.1 數(shù)據(jù)類型和變量 31216.2.2 表達式及運算符 31316.2.3 基本語句 31416.3 使用 Dreamweaver的“行為”功能 31716.3.1 “行為”的本質(zhì) 31716.3.2 “行為”的構(gòu)成 31816.3.3 案例——交換圖像與恢復(fù)交換圖像 31816.4 使用JavaScript庫jQeury 32116.4.1 jQuery的概念 32216.4.2 jQuery的優(yōu)勢 32216.4.3 下載并使用jQuery 32516.4.4 用jQuery實現(xiàn)“前3行”特殊樣式 32516.4.5 用jQuery實現(xiàn)漸變背景色表格效果 32616.5 思考與練習(xí) 327第6部分 綜合案例第17章 綜合案例——企業(yè)網(wǎng)站 33017.1 分析構(gòu)架 33017.1.1 設(shè)計分析 33117.1.2 排版構(gòu)架 33117.2 模塊拆分 33217.2.1 Logo與頂端鏈接 33217.2.2 左側(cè)導(dǎo)航與搜索 33317.2.3 主體內(nèi)容 33417.2.4 內(nèi)容Banner 33517.2.5 新聞快遞 33517.2.6 公司咨詢 33617.2.7 英文刊物 33717.3 整體調(diào)整 34017.4 思考與練習(xí) 340第18章 綜合案例——網(wǎng)上購物網(wǎng)站 34118.1 分析構(gòu)架 34118.1.1 設(shè)計分析 34118.1.2 排版構(gòu)架 34218.2 模塊分析 34318.2.1 Banner圖片 34318.2.2 導(dǎo)航菜單 34418.2.3 鮮花導(dǎo)購 34518.2.4 主體內(nèi)容 34818.3 整體調(diào)整 350參考文獻 351

章節(jié)摘錄

　　通常來說，最終導(dǎo)出的文件由于文件大小的限制，質(zhì)量都會比制作出來的原始圖像有所下降。例如，繪制的圖像可能比較大，每一個細節(jié)都很清晰，但是這樣的文件就會很大，而為了適用于網(wǎng)頁，就必須在導(dǎo)出時做一些處理，盡可能在保持清晰的情況下減小文件大小。但是或多或少，圖像質(zhì)量還是有所損失，因此對于每一個作品都應(yīng)該保留一個“源文件”，它是沒有任何損失的，這樣以后還可以隨時導(dǎo)出為不同格式或質(zhì)量的文件。這里所說的“優(yōu)化”常常和“導(dǎo)出”同時進行，就是在導(dǎo)出的時候再進行優(yōu)化。另外，要注意，所謂“優(yōu)化”并不是使圖像的質(zhì)量更高，而是使文件變小?！　?yōu)化和導(dǎo)出圖像最方便的方法是使用“圖像預(yù)覽”命令。當(dāng)繪制完成一幅圖像以后，選擇菜單欄中的“圖像預(yù)覽”命令，就會打開“圖像預(yù)覽”窗口，如圖6．1所示，要做的工作就是在其中進行設(shè)置，然后單擊“導(dǎo)出”按鈕，導(dǎo)出最終的成果文件?！皥D像預(yù)覽”的預(yù)覽區(qū)域所顯示的文檔或圖像與導(dǎo)出時的完全相同，該區(qū)域還估算當(dāng)前導(dǎo)出設(shè)置下的文件大小和下載時間。在“預(yù)覽圖像”的左側(cè)進行相關(guān)選項的設(shè)置，同時在右側(cè)預(yù)覽導(dǎo)出以后的效果，以及導(dǎo)出后的文件大小。隨著參數(shù)的調(diào)整，預(yù)覽圖和文件大小的數(shù)值都會隨之改變，直到滿意后單擊“導(dǎo)出”按鈕即可。如果暫時不導(dǎo)出，可以單擊“確定”按鈕，這些設(shè)置會保存下來，下次預(yù)覽的時候會按照設(shè)定的選項進行顯示。

圖書封面

圖書標(biāo)簽Tags

無

評論、評分、閱讀與下載

---

    網(wǎng)頁制作綜合技術(shù)教程 PDF格式下載

---