HTML+CSS網頁設計詳解

第1篇 頁面制作入門篇
第1章 了解網頁
1.1 什麼是網頁
1.1.1 網頁的概述
1.1.2 靜態網頁
1.1.3 動態網頁
1.1.4 開發動態頁面和靜態頁面的聯系
1.2 開發網頁的工具
1.2.1 html頁面的開發工具
1.2.2 動態頁面的開發工具
1.3 使用網頁瀏覽器
1.3.1 網頁瀏覽器的工作原理
1.3.2 常用的兩種瀏覽器
1.4 html、xml和xhtml語言
1.4.1 超文本標記語言html
1.4.2 可擴展標識語言xml
1.4.3 可擴展超文本標識語言xhtml
1.5 編寫一個簡單的頁面
1.6 小結
1.7 本章習題
第2章 通過學習他人的網頁了解html能做什麼
2.1 用記事本打開一個頁面
2.2 初識html
2.2.1 html語法
2.2.2 html文檔的結構
2.3 html文檔基本結構標簽的作用
2.3.1 給頁面一個聲明——樣本代碼
2.3.2 踏出制作頁面的第一步——開始標簽(html)
2.3.3 頁面的”腦袋”——頭標簽和頭標簽的對象
2.3.4 給頁面起名字——標題標簽(title)
2.3.5 頁面的”身體”——主體標簽(body)
2.3.6 美化html文檔
2.4 案例：制作第一個頁面
2.5 小結
2.6 本章習題
第3章 動手在網頁中寫些什麼
3.1 新舊方法對比
3.2 文本的排版格式
3.2.1 寫一行換一行
3.2.2 在頁面文本中空格
3.2.3 文本的段落要對齊
3.3 文本的屬性樣式
3.3.1 不一樣的文本字體大小
3.3.2 奇妙的特殊符號
3.3.3 給文本加標注
3.4 整齊的文本列表
3.4.1 無序列表
3.4.2 有序列表
3.4.3 定義列表
3.4.4 列表嵌套
3.5 制作一則通知
3.6 小結
3.7 本章習題
第4章 將圖像放入頁面中
4.1 圖像的基礎知識
4.1.1 最常用的圖像——位圖
4.1.2 在頁面中常用的位圖格式
4.1.3 奇妙的矢量圖
4.1.4 圖像的分辨率
4.1.5 認識一些網頁中常用的banner尺寸
4.2 用圖像編織美麗的頁面
4.2.1 理解圖像路徑
4.2.2 像編輯文本對齊一樣在頁面中對齊圖像
4.2.3 圖像與文本的對齊方式
4.2.4 控制圖像與文本的距離
4.3 讓圖像變得更美觀
4.3.1 修改圖像的寬度和高度
4.3.2 不一樣的改變——給圖像添加邊框
4.3.3 獨樹一幟的水平線
4.4 改變頁面的背景
4.5 案例：把寵物的照片放到網頁上去
4.6 小結
4.7 本章習題
第5章 讓網頁變得更絢麗
5.1 了解計算機語言下的顏色描述
5.2 讓頁面絢麗多彩
5.2.1 改變頁面背景顏色
5.2.2 改變頁面文本字體顏色
5.3 不尋常的圖像應用
5.3.1 會動的gif圖像
5.3.2 圖像的透明通道
5.3.3 帶有透明通道圖像的應用
5.4 案例：修飾普通頁面
5.5 小結
5.6 本章習題
第6章 頁面鏈接
6.1 何為頁面鏈接
6.1.1 初識頁面鏈接
6.1.2 理解鏈接地址
6.2 鏈接的基本知識
6.2.1 基本的文本鏈接
6.2.2 基本的圖像鏈接
6.2.3 郵箱地址鏈接
6.2.4 在同一頁面中快速查找信息
6.3 提高頁面鏈接的友好度
6.3.1 美觀鏈接的狀態
6.3.2 特殊的鏈接方式
6.3.3 熱點圖像區域的鏈接
6.4 在新窗口中顯示鏈接窗口
6.5 案例：制作普通鏈接的主頁
6.6 小結
6.7 本章習題
第2篇 頁面制作提高篇
第7章 css規則
7.1 如何學習css
7.2 css基本的規則寫法
7.2.1 基本的樣式表的寫法
7.2.2 使用類class和標志id鏈接樣式表
7.2.3 創建選擇器
7.2.4 應用css樣式表
7.3 用css來修飾頁面文本
7.3.1 修飾頁面文本字體
7.3.2 文本的字號
7.3.3 文本段落行高
7.3.4 禁止文本自動換行
7.4 給頁面對象添加顏色
7.5 案例：使用css制作個人頁面
7.6 小結
7.7 本章習題
第8章 表格
8.1 理解頁面中的表格
8.2 普通表格的應用
8.2.1 制作普通表格
8.2.2 表格的基本屬性
8.2.3 合並單元格
8.2.4 表格標題
8.2.5 拆分表格
8.2.6 設置表格的列
8.3 修飾單元格
8.3.1 通過css修飾單元格的邊框
8.3.2 合並相鄰單元格
8.4 編輯單元格中的內容
8.4.1 單元格中文本與單元格大小
8.4.2 修飾單元格中的內容
8.5 案例：制作球賽積分表
8.6 小結
8.7 本章習題
第9章 創建框架結構的頁面
9.1 創建窗口框架頁面
9.1.1 創建窗口框架的(frameset)和(frame)標簽
9.1.2 橫向分割窗口
9.1.3 縱向分割窗口
9.1.4 框架的嵌套
9.1.5 將頁面放入窗口框架中
9.2 修飾框架的細節
9.2.1 給無法處理框架的瀏覽器注釋說明
9.2.2 固定框架的位置
9.2.3 框架中設置滾動條
9.3 修改框架邊框的樣式
9.3.1 判定邊框是否顯示
9.3.2 改變邊框的表現效果
9.3.3 邊框的邊距
9.4 框架集中頁面之間的鏈接
9.4.1 在指定的框架中打開鏈接
9.4.2 框架內的錨點鏈接
9.5 靈活的(iframe)框架
9.6 案例：制定自己的鏈接主頁
9.7 小結
9.8 本章習題
第10章 當css樣式表遇到層
10.1 理解塊級的意義
10.2 頁面中的層
10.2.1 行(span)和層(div)
10.2.2 層的基本定位
10.2.3 層的疊加
10.3 框模型
10.3.1 理解框模型
10.3.2 空距padding屬性
10.3.3 邊框border的擴展屬性
10.3.4 邊距（margin）
10.3.5 框模型的溢出
10.4 定制層的display屬性
10.5 css hack
10.6 案例：簡單的css+div
10.7 小結
10.8 本章習題
第11章 進一步討論頁面布局的方法
11.1 頁面中的定位
11.1.1 靜態定位
11.1.2 相對位置
11.1.3 絕對定位
11.1.4 固定定位
11.2 浮動層
11.3 css的新奇技術以及未來發展
11.3.1 圖像替換技術
11.3.2 css 3.0的新發展
11.3.3 實現圓角框模型
11.4 案例：有效地管理頁面布局
11.5 小結
11.6 本章習題
第3篇 動感頁面篇
第12章 神奇的表單
12.1 表單的工作原理
12.1.1 (script)標簽
12.1.2 創建表單
12.1.3 表單域
12.2 通過表單展示不一樣的頁面
12.2.1 input對象下的多種表單表現形式
12.2.2 text文本框的樣式表單
12.2.3 password輸入密碼的樣式表單
12.2.4 checkbox復選框的樣式表單
12.2.5 radio單選按鈕的樣式表單
12.2.6 submit提交數據的樣式表單
12.2.7 hidden隱藏域的樣式表單
12.2.8 image樣式的表單
12.2.9 file上傳文件的樣式表單
12.3 textarea對象的表單
12.4 select對象的表單
12.5 表單域集合
12.6 案例：制作一個精美的由表單構成的頁面
12.7 小結
12.8 本章習題
第13章 在網頁中加入神奇的效果
13.1 什麼是腳本語言
13.1.1 初識vbscript
13.1.2 學習javascript的起步
13.2 javascript和java的區別
13.3 javascript的基本語法
13.3.1 javascript中的標識符和保留關鍵字
13.3.2 javascript語法的特殊規則
13.4 javascript的數據類型
13.4.1 常量
13.4.2 變量
13.4.3 數據類型轉換
13.4.4 運算符
13.4.5 表達式
13.5 流程控制
13.5.1 順序結構
13.5.2 選擇結構
13.5.3 循環結構
13.6 了解函數
13.7 案例：一個使用基本語法的javascript例子
13.8 小結
13.9 本章習題
第14章 javascript入門
14.1 了解一下何為”對象”
14.1.1 javascript對象概述
14.1.2 dom介紹
14.2 javascript中的數組
14.2.1 定義和操作數組
14.2.2 多維數組
14.3 內部對象
14.3.1 math對象
14.3.2 date對象
14.3.3 string對象
14.4 window對象
14.4.1 window對象屬性
14.4.2 window對象方法
14.4.3 window對象事件
14.5 document對象
14.5.1 document對象屬性
14.5.2 document對象方法
14.5.3 document對象事件
14.6 案例：一個運用javascript實現的動態頁面
14.7 小結
14.8 本章習題
第15章 了解制作頁面的工具
15.1 可視化編輯頁面工具——dreamweaver
15.1.1 了解dreamweaver cs6的界面
15.1.2 dreamweaver的菜單
15.2 神奇的”美工筆”——photoshop
15.2.1 了解photoshop的界面
15.2.2 photoshop的使用技巧
15.3 網頁中的動畫——flash
15.3.1 認識flash文件
15.3.2 在頁面中放入flash文件
15.3.3 制作flash的軟件
15.3.4 flash 8的菜單
15.3.5 flash 8的主要功能
15.3.6 flash的常用交互技巧
15.4 案例：使用dreamweaver制作頁面
15.5 小結
15.6 本章習題
第4篇 頁面實戰篇
第16章 綜合案例1：制作主流網站界面
16.1 構思基礎的布局
16.2 設計基礎模塊的樣式表
16.3 完善網站的子模塊
16.3.1 網站的導航欄
16.3.2 頁面的側欄
16.4 最終頁面
16.5 小結
第17章 綜合案例2：設計復雜頁面
17.1 頁面的框架布局
17.1.1 定位頁面的內容
17.1.2 頁面初級布局的代碼
17.2 細化頁面的局部
17.2.1 intro部分
17.2.2 頁面的左側部分
17.2.3 頁面的右側欄主體部分和頁腳
17.3 小結
第18章 綜合案例3：制作英文網站
18.1 分析效果圖
18.2 切圖
18.2.1 制作首頁的切圖
18.2.2 二級頁面的切圖
18.3 制作站點首頁頭部
18.3.1 首頁頭部的信息和基礎樣式的制作
18.3.2 首頁頭部的分析
18.3.3 首頁頭部結構的制作
18.3.4 首頁頭部css代碼的編寫
18.4 制作首頁的主體部分
18.4.1 分析主體部分效果圖
18.4.2 制作主體左側部分的結構
18.4.3 制作主體左側部分的樣式
18.4.4 制作主體中間部分的結構
18.4.5 制作主體中間部分的樣式
18.4.6 制作主體右側部分的結構
18.4.7 制作主體右側部分的樣式
18.5 制作首頁的底部
18.6 二級頁面的制作
18.6.1 分析二級頁面的效果圖
18.6.2 制作二級頁面中間內容部分的結構
18.6.3 制作二級頁面中間內容部分的樣式
18.6.4 制作二級頁面右側部分的結構
18.6.5 制作二級頁面右側部分的樣式
18.8 小結
第19章 綜合案例4：使用dreamweaver制作中文網站
19.1 分析效果圖
19.2 制作首頁的切圖
19.3 制作站點首頁頭部
19.3.1 首頁頭部的信息和基礎樣式的制作
19.3.2 首頁頭部的分析
19.3.3 首頁頭部logo和banner部分的制作
19.3.4 導航列表的制作
19.4 制作首頁的主體部分
19.4.1 分析主體部分效果圖
19.4.2 制作主體部分的父元素
19.4.3 制作主體左側部分的樣式
19.4.4 制作主體右側內容中”關於我們”的部分
19.4.5 制作”今日新聞”部分
19.4.6 制作”證券點撥”和”證券時評”部分
19.4.7 制作”合作伙伴”部分
19.5 制作首頁的底部
19.6 二級頁面的制作
19.7 小結
附錄1 html 4.0快速參考
附錄2 css中支持的顏色名稱