網(wǎng)頁制作綜合技術全冊配套完整課件

上傳人：金*** IP屬地：廣東上傳時間：2024-09-05 格式：PPT 頁數(shù)：576 大小：15.25MB 積分：60 舉報 版權申訴

已閱讀5頁，還剩571頁未讀，繼續(xù)免費閱讀

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

網(wǎng)頁制作綜合技術全冊配套完整課件網(wǎng)頁制作綜合技術教程第1部分HTML網(wǎng)頁設計

第1章網(wǎng)頁設計基礎知識

網(wǎng)頁的基礎概念1.1網(wǎng)頁與HTML1.2Web標準1.3網(wǎng)頁設計與開發(fā)過程1.4

HTML基礎1.5簡單的HTML案例1.6

用Dreamweaver快速建立基本文檔1.81.1網(wǎng)頁的基礎概念

圖1.1使用瀏覽器軟件顯示網(wǎng)頁

圖1.2服務器與瀏覽器的關系示意圖1.2網(wǎng)頁與HTML

圖1.3網(wǎng)頁的HTML源文件1.3Web標準

1.3.1標準的重要性1.3.2“Web標準”概述

圖1.4“結構”、“表現(xiàn)”和“行為”的關系

圖1.5僅使用HTML定義“結構”的頁面效果

圖1.6使用CSS設定樣式之后的效果1.4網(wǎng)頁設計與開發(fā)過程

簡單來說，網(wǎng)站開發(fā)的全過程大致可為策劃與定義、設計、開發(fā)、測試和發(fā)布5個階段。本節(jié)將對開發(fā)的流程進行介紹。1.4.1基本任務與角色策劃與定義設計開發(fā)測試發(fā)布客戶設計師設計師設計師程序開發(fā)員

客戶設計師程序開發(fā)員設計師程序開發(fā)員表1.1 網(wǎng)站建設與網(wǎng)頁設計流程中的人員角色

圖1.7網(wǎng)站開發(fā)的工作流程

1.4.2明確網(wǎng)站定位1.4.3收集信息和素材1.4.4策劃欄目內(nèi)容1.4.5設計頁面方案

1.4.6制作頁面1.4.7實現(xiàn)后臺功能1.4.8整合與測試網(wǎng)站1.5HTML基礎

HTML（HypertextMarkupLanguage，超文本標記語言）不是一種編程語言，而是一種描述性的標記語言，用于描述超文本中內(nèi)容的顯示方式。

例如，如何在網(wǎng)頁中定義一個標題、一段文本或者一個表格等，這些都是利用一個個HTML標記完成的。其最基本的語法就是：<標記>內(nèi)容</標記>。

標記通常都是成對使用的，有一個開頭標記就對應有一個結束標記。結束標記只是在開頭標記的前面加一個斜杠“/”。

當瀏覽器從服務器接收到HTML文件后，就會解釋里面的標記符，然后把標記符相對應的功能表達出來。1.5.1創(chuàng)建第一個HTML文件

1.5.2HTML文件結構1．<html>標記2．<head>標記3．<title>標記4．<body>標記1.6簡單的HTML案例

1.8利用Dreamweaver快速建立基本文檔

1.8.1Dreamweaver簡介

圖1.21Dreamweaver8的操作界面

1．“文檔”窗口2．“插入”面板

圖1.22“插入”面板3．“屬性”面板圖1.23“屬性”面板4．“文檔”工具欄圖1.24“文檔”工具欄5．其他面板1.8.2創(chuàng)建新的空白文檔圖1.25創(chuàng)建新文檔1.8.3案例—創(chuàng)建新文檔

網(wǎng)頁制作綜合技術教程第1部分HTML網(wǎng)頁設計

第2章用HTML設置文本和圖像

文本排版2.1文字列表2.2HTML標記與HTML屬性2.3特殊文字符號2.5HTML標記和屬性的局限性2.4

設置圖片的尺寸2.7設置圖像的替換文本2.8

利用Dreamweaver代碼視圖提高效率2.10利用Dreamweaver設置文本和圖像2.9使用圖像2.6

在各種各樣的網(wǎng)頁中，文字和圖像是最基本的兩種網(wǎng)頁元素。文字和圖像在網(wǎng)頁中可以起到傳遞信息、導航和交互等作用。

在網(wǎng)頁中添加文字和圖像并不困難，更重要問題是要如何編排這些內(nèi)容以及控制它們的顯示方式，讓文字和圖像看上去編排有序、整齊美觀，這就是本章要向讀者所介紹的內(nèi)容。

通過對本章的學習，讀者可以掌握如何在網(wǎng)頁中合理使用文字和圖像，如何根據(jù)需要選擇不同的顯示效果。2.1文本排版

2.1.1實現(xiàn)段落與段內(nèi)換行

2.1.2設置標題

圖2.4段落與標題的效果2.1.3使文字水平居中圖2.5居中顯示2.1.4設置文字段落的縮進圖2.6段落縮進2.2文字列表

2.2.1建立無序列表

圖2.7不帶有序號的列表2.2.2建立有序列表圖2.8帶有序號的列表2.3HTML標記與HTML屬性

在大多數(shù)HTML標記中都可以加入屬性控制，屬性的作用是幫助HTML標記進一步控制HTML文件的內(nèi)容，如內(nèi)容的對齊方式，文字的大小、字體、顏色，網(wǎng)頁的背景樣式，圖片的插入等。

其基本語法為：

<標記名稱屬性名1=“屬性值1”屬性名2=“屬性值2”……>2.3.1控制段落的水平位置

圖2.9段落對齊方式2.3.2設置背景顏色

圖2.10通過<body>標記的屬性

控制字體顏色和背景顏色2.4HTML標記和屬性的局限性

2.5特殊文字符號

圖2.13在網(wǎng)頁中使用特殊符號

圖2.14運算式2.6使用圖像

圖片是網(wǎng)頁中不可缺少的元素，巧妙地在網(wǎng)頁中使用圖片可以為網(wǎng)頁增色不少。

這里首先介紹在網(wǎng)頁中常用的兩種圖片格式，然后再介紹如何在網(wǎng)頁中插入圖片，以及設置圖片的樣式和插入的位置。

通過對本章的學習，讀者可以制作簡單的圖文網(wǎng)頁，并根據(jù)自己的喜好制作出不同的圖片效果。

2.6.1網(wǎng)頁中的圖像格式

2.6.2簡單案例

圖2.15在網(wǎng)頁中使用圖片2.6.3文件路徑

為了更好地說明“路徑”這個非常重要的概念，這里舉一個生活中的例子作為類比。

計算機中的文件都是按照層次結構保存在一級一級的文件夾中的，這就好像是學校分為若干個年級，每個年級又分為若干個班級。

比如說，在3年級2班中，有兩個學生分別叫“小龍”和“小麗”，可以畫一個示意圖，如圖2.17所示。

圖2.17班級結構示意圖

圖2.18文件系統(tǒng)結構示意圖2.7設置圖片的尺寸

圖2.19在Windows中查看圖像的尺寸

圖2.20設置圖像的顯示尺寸2.8設置圖像的替換文本

圖2.21alt屬性的作用2.9利用Dreamweaver設置文本和圖像

2.10利用Dreamweaver代碼視圖提高效率

上一節(jié)中介紹了如何使用Dreamweaver可視化的方法制作網(wǎng)頁，實際上Dreamweaver也提供了方便的代碼編寫功能。

前面曾經(jīng)談到，頁面在瀏覽器中的最終顯示效果完全是由HTML代碼決定的，Dreamweaver只是幫助用戶方便地插入或者生成必要的代碼。

在實際工作中，還是經(jīng)常會遇到通過可視化的方式生成的代碼并不能獲得最佳效果的情況，這時就需要設計師對代碼進行手工調(diào)整，這個工作可以在Dreamweaver文檔窗口的“代碼”視圖中完成。2.10.1代碼提示

圖2.32代碼提示功能2.10.2代碼折疊

圖2.35選中一些代碼

圖2.36將代碼折疊起來2.10.3拆分視圖與代碼快速定位

圖2.37使用拆分視圖對代碼進行快速定位網(wǎng)頁制作綜合技術教程第1部分HTML網(wǎng)頁設計

第3章超鏈接

設置文字超鏈接3.1設置頁面內(nèi)部鏈接3.2設置圖片超鏈接3.3設置電子郵件鏈接3.4

設置鏈接頁面的目標窗口3.5創(chuàng)建熱點區(qū)域3.6框架之間的鏈接3.7

HTML文件最重要是特性之一就是超鏈接，通過網(wǎng)頁上所提供的鏈接功能，用戶可以鏈接到網(wǎng)絡上的其他網(wǎng)頁。

如果網(wǎng)頁上沒有超鏈接，就不得不在瀏覽器地址欄中一遍遍地輸入各網(wǎng)頁的URL地址了，這樣也就無法體現(xiàn)互聯(lián)網(wǎng)的優(yōu)點了。3.1設置文字超鏈接

建立超鏈接所使用的HTML標記為<a></a>標記。超鏈接最重要的有兩個要素，設置為超鏈接的文本內(nèi)容和超鏈接指向的目標地址?；镜某溄拥慕Y構如圖3.1所示。

圖3.1基本的超鏈接的結構3.1.1URL的格式

圖3.2URL的結構3.1.2URL的類型

超鏈接的URL可以為兩種類型：“絕對URL”和“相對URL”。

（1）絕對URL是如圖3.2所示，包含文件的所有信息，就像我們在瀏覽器中訪問一個網(wǎng)站中的某個頁面那樣。

（2）而相對URL則指向相對于原文檔同一服務器或者同一文件夾中的文件。相對URL通常僅包含文件夾和文件名，甚至只有文件名。

相對URL又可以分為兩種：①相對文檔的URL，這種URL以鏈接的原文檔為起點；②相對服務器的URL，這種URL以服務器的根目錄為起點。

下面舉一個簡單的例子，源文件參見本書素材文件“第3章\03-01.htm”，代碼如下。3.2設置頁面內(nèi)部鏈接

圖3.4頁面內(nèi)部的鏈接3.3設置圖片超鏈接

圖3.5設置圖像超鏈接3.4設置電子郵件鏈接

圖3.6電子郵件鏈接3.5設置鏈接頁面的目標窗口

在默認情況下，當點擊鏈接的時候，目標頁面還是在同一個窗口中顯示。

如果要在點擊某個鏈接以后，打開一個新的瀏覽器窗口，在這個新窗口中顯示目標頁面，就需要在<a>標記中設置“target”屬性。3.6創(chuàng)建熱點區(qū)域

圖3.7圖像的熱點區(qū)域3.6.1用HTML建立熱點區(qū)域

<imgsrc="stars.jpg"border="0"usemap="#Map1"><mapname="Map1"><areashape="rect"coords="23,28,111,81"href="#"><areashape="circle"coords="187,57,33"href="#"><areashape="poly"coords="271,12,321,23,321,80,275,87,251,49"href="#"></map>3.7框架之間的鏈接

框架是一種常用的網(wǎng)頁布局工具。它的作用是把瀏覽器的顯示空間分割為幾個部分，每個部分都可以獨立顯示不同的網(wǎng)頁。

前面曾經(jīng)介紹過<a>標記的target屬性，但是沒有詳細介紹，這是因為target屬性必須和框架配合使用，因此這里先對框架進行一些介紹，然后再演示框架與鏈接的關系。3.7.1建立框架與框架集

圖3.16使用框架的網(wǎng)頁

3.7.2用cols屬性將窗口分為左右部分

3.7.3用rows屬性將窗口分為上下部分

3.7.4框架的嵌套

3.7.5在框架中插入網(wǎng)頁

3.7.6在框架之間進行鏈接

圖3.20框架之間的鏈接3.7.7嵌入式框架

網(wǎng)頁制作綜合技術教程第1部分HTML網(wǎng)頁設計

第4章使用表格與表單

使用表格4.1使用表單4.2

使用表格可以清晰地顯示列成表的數(shù)據(jù)，例如如圖4.1所示的是股票行情的數(shù)據(jù)列表。

在本章中，先介紹使用表格清晰地顯示數(shù)據(jù)的方法，各種與表格相關的HTML標記。同時在本章的最后，還會演示如何借助于表格來進行頁面布局，以便與本書后續(xù)章節(jié)中的其他方法進行對比。

圖4.1使用表格顯示數(shù)據(jù)4.1使用表格

4.1.1表格的基本結構

</tr></table></center></body></html>

圖4.2基本表格4.1.2合并單元格

1．左右合并單元格

2．上下合并單元格

圖4.3左右合并單元格

圖4.4上下合并單元格

圖4.5兩個方向合并單元格4.1.3設置對齊方式

圖4.6設置單元格大小

圖4.7設置單元格內(nèi)容的居中對齊4.1.4設置表格背景色和邊框顏色

圖4.10設置背景色4.1.5cellpadding屬性和cellspacing屬性

圖4.11設置單元格間距和單元格內(nèi)容邊距4.1.6完整的表格標記

圖4.12設置表格行組

圖4.14設置表格的標題4.1.7用表格進行頁面布局的局限性

圖4.15網(wǎng)頁頂部效果4.2使用表單

4.2.1表單的用途和原理

圖4.27使用表單元素的留言簿頁面圖4.28表單的基本工作原理4.2.2表單類型

1．文本輸入框

2．單選按鈕

3．復選按鈕

圖4.29文本輸入框

圖4.30單選按鈕4．密碼輸入框

圖4.31復選按鈕

圖4.32密碼輸入框5．按鈕

圖4.33按鈕

圖4.34圖像按鈕6．多行文本框

圖4.35多行文本框7．列表框

圖4.36下拉列表框

圖4.37列表框網(wǎng)頁制作綜合技術教程第2部分美工與動畫元素設計

第5章圖像處理與設計基礎

網(wǎng)頁美術設計的基礎知識5.1在Fireworks中編輯位圖5.2繪制矢量圖形5.3美術基礎理論5.4

通過學習本書前面章節(jié)的內(nèi)容，已經(jīng)了解到使用HTML建立網(wǎng)頁的基本方法，但是要設計出精致美觀的頁面，僅僅使用文本是不夠的，目前最通行的方法是使用圖像和動畫來增強頁面的表現(xiàn)力。5.1網(wǎng)頁美術設計的基礎知識

5.1.1基本概念

1．圖形與圖像

2．分辨率

3．位圖圖像

4．矢量圖形

圖5.1位圖圖像放大后變模糊

圖5.2矢量圖形放大后仍保持清晰5.1.2Fireworks的基本操作流程

1．Fireworks的操作環(huán)境

圖5.3Fireworks起始界面5.1.3畫布

1．畫布的顯示比例

2．修改圖像與畫布的大小

3．剪裁圖像5.2在Fireworks中編輯位圖

5.2.1創(chuàng)建和取消選區(qū)

1．“選取框”或“橢圓選取框”工具

2．取消選取框

3．“套索”和“多邊形套索”工具5.2.2編輯選區(qū)中的像素區(qū)域

1．刪除選區(qū)中的像素

2．復制和移動選區(qū)中的內(nèi)容5.2.3變形和扭曲

圖5.38變形操作的效果5.3繪制矢量圖形

5.3.1創(chuàng)建基本矢量圖形

1．矢量圖形的基本構成

2．“直線”、“矩形”和“橢圓”工具

3．“多邊形”工具

4．自由形狀5.3.2調(diào)整矢量線條

1．矢量線條的調(diào)整方法

圖5.54墨水滴

圖5.55繪制墨水滴的原型

圖5.56單擊控制點

圖5.57調(diào)節(jié)控制點的效果5.4美術基礎理論

5.4.1平面構圖

1．構圖要素（1）線條（2）形和體2．構圖的基本原則

（1）協(xié)調(diào)、統(tǒng)一（2）比例（3）均衡與穩(wěn)定（4）節(jié)奏與韻律

產(chǎn)生韻律感有3種方法?！?連續(xù)：連續(xù)線條具有流動的感覺，也可以通過色彩、形狀、圖案或空間的連續(xù)和重復來產(chǎn)生一種連續(xù)的韻律美。但要避免連續(xù)重復過多而引起的單調(diào)感。

● 漸變：漸變是線條、形狀、明暗和色彩按照一定的秩序逐漸變化。例如線條的漸變，加長或縮短、變窄或變寬、變疏或變密等。這種漸變的韻律美要比連續(xù)的韻律美更能生動更富有吸引力。

● 交錯：各種組成要素按一定規(guī)律交織穿插而成，一隱一顯，一黑一白，一冷一暖，一大一小，一長一短等交錯重復有規(guī)律的出現(xiàn)，因而產(chǎn)生自然生動的、交錯的韻律美。5.4.2色彩

1．色彩的基本知識

2．色彩的屬性（1）色相（2）亮度（3）飽和度3．色彩的物理作用

（1）溫度感（2）距離感（3）重量感（4）體積感4．色彩的使用原則

網(wǎng)頁制作綜合技術教程第2部分美工與動畫元素設計

第6章圖像的優(yōu)化與導出

了解圖像文件類型6.1使用“圖像預覽”命令優(yōu)化導出圖像6.2使用“切片”6.3

通過學習前面各章，我們已經(jīng)可以繪制出許多精美的圖形圖像了。這些繪制出來的圖形或圖像要保存為各種所需格式的文件，才能適應各種用途。6.1了解圖像文件類型

下面就對幾種常用的文件類型進行說明?！瘛癎IF”，即“圖形交換格式”，是一種很流行的網(wǎng)頁圖形格式。

●“JPEG”（JPG），是專門為照片開發(fā)的圖像格式。

●“PNG”，即“可移植網(wǎng)絡圖形”，是一種通用的網(wǎng)頁圖形格式。

●“TIFF”，即標簽圖像文件格式，是一種用于存儲位圖圖像的圖像格式。6.2使用“圖像預覽”命令優(yōu)化導出圖像

6.2.1使用“圖像預覽”命令

圖6.1“圖像預覽”窗口

圖6.2“文件”選項卡6.2.2優(yōu)化JPEG格式的圖像

圖6.4設置為不同品質(zhì)的文件效果和大小6.3使用“切片”

圖6.10切片將一個文檔分割成多個部分

圖6.11“切片”工具

6.3.1切片與導出

6.3.2用切片實現(xiàn)“分別優(yōu)化”網(wǎng)頁制作綜合技術教程第2部分美工與動畫元素設計

第7章在網(wǎng)頁中使用Flash

使用Dreamweaver添加內(nèi)置的Flash對象7.1Flash軟件簡介7.2在Flash中繪制圖形7.3Flash動畫基本原理7.4

創(chuàng)建形狀補間動畫7.5動畫補間7.6在網(wǎng)頁中發(fā)布Flash動畫7.7

Adobe公司的Flash技術是當前網(wǎng)絡上傳輸矢量和動畫的主要解決方案。

Flash播放器可以同時作為IE、Firefox等最流行的網(wǎng)頁瀏覽器的插件，從而使網(wǎng)頁上展現(xiàn)出豐富多彩的動畫效果。7.1使用Dreamweaver添加內(nèi)置的Flash對象

7.1.1使用Dreamweaver內(nèi)置的Flash按鈕對象

7.1.2使用Dreamweaver內(nèi)置的Flash文本對象7.2Flash軟件簡介

7.2.1Flash的基本功能

1．繪圖和填充

2．文字的輸入和修改

3．創(chuàng)建動畫元件和實例

4．使用動作控制內(nèi)容

5．添加聲音

6．集成電影7.2.2Flash的工作界面

圖7.4Flash的工作界面7.2.3Flash的工作流程

1．在Flash中作圖

2．制作Flash動畫

3．制作交互式Flash電影

4．導出Flash7.3在Flash中繪制圖形

圖7.7繪制橢圓

圖7.8移動填充部分

圖7.9矩形和多角星形工具

圖7.10線條和鉛筆工具7.4Flash動畫基本原理

圖7.13時間軸窗口

圖7.18第1幀時的舞臺

圖7.19第30幀時的內(nèi)容7.5創(chuàng)建形狀補間動畫

圖7.20形狀補間動畫示例7.6動畫補間

圖7.24補間動畫

圖7.25飛鏢飛行

圖7.33行駛的汽車7.7在網(wǎng)頁中發(fā)布Flash動畫

7.7.1插入動畫在Dreamweaver中，可以很方便地插入Flash動畫，具體操作方法如下。

（1）首先在Flash軟件中將制作好的動畫發(fā)布為swf格式的文件。

（2）將鼠標光標置于文檔中要插入Flash的地方，選擇菜單欄中的“插入→媒體→Flash”選項，然后在彈出的對話框中選擇一個Flash文件（swf文件）。插入的Flash動畫顯示為一個灰色的方框，里面有Flash標志，如圖7.45所示。

圖7.45插入的Flash動畫7.7.2設置Flash對象的屬性

圖7.48“屬性”面板網(wǎng)頁制作綜合技術教程第3部分CSS樣式設計

第8章(X)HTML與CSS概述

HTML與XHTML8.1(X)HTML與CSS8.2構造CSS規(guī)則8.3基本CSS選擇器8.4在HTML中使用CSS的方法8.5

通過前面的學習，我們已經(jīng)理解了HTML的核心原理。實際上使用HTML非常簡單，其核心思想就是需要設置什么樣式，就使用相應的HTML標記或者屬性。

在前文中，初步地分析了由于歷史原因和HTML自身的局限性，所帶來的一些問題。為了解決這些問題，HTML逐步地發(fā)展到了XHTML，而XHTML也更加便于和CSS相配合。

本章將著重介紹HTML、XHTML和CSS三者之間的關系，重點是理解使用CSS的核心目的。8.1HTML與XHTML

8.1.1追根溯源從HTML到XHTML，大致經(jīng)歷了以下版本。

● HTML2.0：1995年11月發(fā)布?！?HTML3.2：1996年1月14日發(fā)布。● HTML7.0：1997年12月18日發(fā)布。

● HTML7.01（微小改進）：1999年12月24日發(fā)布?！?XHTML1.0：2000年1月發(fā)布，后又經(jīng)過修訂于2002年8月1日重新發(fā)布?！?XHTML1.1：2001年5月31日發(fā)布?！?XHTML2.0：正在制訂中。8.1.2DOCTYPE的含義與選擇

8.1.3XHTML與HTML的重要區(qū)別1．在XHTML中標記名稱必須小寫

2．在XHTML中屬性名稱必須小寫

3．在XHTML中標記必須嚴格嵌套

4．在XHTML中標記必須封閉

5．在XHTML中即使是空元素的標記也必須封閉

6．在XHTML中屬性值用雙引號括起來

7．在XHTML中屬性值必須使用完整形式8.2(X)HTML與CSS

8.2.1CSS標準8.2.2傳統(tǒng)HTML的缺點

其實傳統(tǒng)HTML的缺陷遠不止上例中所反映的這一個方面，相比CSS為基礎的頁面設計方法，其所體現(xiàn)出的劣勢主要有以下幾點。

（1）維護困難。為了修改某個特殊標記（如上例中的<h2>標記）的格式，需要花費很多的時間，尤其對于整個網(wǎng)站而言，后期修改和維護的成本很高。

（2）標記不足。

HTML本身的標記很少，很多標記都是為網(wǎng)頁內(nèi)容服務的，而對于美工樣式的標記，如文字間距、段落縮進等標記在HTML中很難找到。

（3）網(wǎng)頁過“胖”。由于沒有統(tǒng)一對各種風格樣式進行控制，因此HTML的頁面往往體積過大，占用網(wǎng)絡帶寬。

（4）定位困難。在整體布局頁面時，HTML對于各個模塊的位置調(diào)整顯得捉襟見肘，過多的其他標記同樣也導致頁面的復雜和后期維護的困難。

8.2.3CSS的引入

8.2.4如何編輯CSS

圖8.4Dreamweaver的代碼模式

圖8.5Dreamweaver語法提示

圖8.6調(diào)色板8.2.5瀏覽器與CSS

圖8.7IE瀏覽器和Firefox瀏覽器的標志

圖8.8IE與Firefox的效果區(qū)別8.3構造CSS規(guī)則

在具體使用CSS之前，請看一個生活中的例子，通常我們描述一個人可以為這個人列一張表：

張飛{

身高：185cm；體重：105kg；性別：男；性格：暴躁；民族：漢族；

}

2級標題{

字體：宋體；大?。?5像素；顏色：紅色；裝飾：下劃線

}

h2{ font-family:宋體; font-size:15px; color:red; text-decoration:underline; }

CSS的思想就是首先指定對什么“對象”進行設置，然后指定對該對象的哪個方面的“屬性”進行設置，最后給出該設置的“值”。因此，概括來說，CSS就是由3個基本部分組成的——“對象”、“屬性”和“值”。8.4基本CSS選擇器

在CSS的3個組成部分中，“對象”是很重要的，它指定了對哪些網(wǎng)頁元素進行設置，因此，它有一個專門的名稱——選擇器（selector）。8.4.1標記選擇器

圖8.9CSS標記選擇器8.4.2類別選擇器

圖8.10類別選擇器8.4.3ID選擇器

圖8.14ID選擇器8.5在HTML中使用CSS的方法

8.5.1行內(nèi)式

8.5.2內(nèi)嵌式

8.5.3鏈接式

8.5.4導入式

8.5.5各種方式的優(yōu)先級問題網(wǎng)頁制作綜合技術教程第3部分CSS樣式設計

第9章CSS樣式設置實踐

手工編寫頁面9.1使用Dreamweaver進行CSS設置9.2復合選擇器9.3CSS的繼承特性9.4CSS的層疊特性9.59.1手工編寫頁面

圖9.1體驗CSS9.1.1構造頁面框架

圖9.3加入圖片9.1.2設置標題

圖9.4修改標題樣式9.1.3控制圖片

圖9.5圖文混排9.1.4設置正文

圖9.6修改正文樣式9.1.5設置整體頁面

圖9.7設置頁面的整體效果9.1.6對段落分別進行設置

圖9.8對段落進行不同的設置9.2使用Dreamweaver進行CSS設置

9.3復合選擇器

9.3.1“交集”選擇器

圖9.28標記類別選擇器

圖9.29交集選擇器示意圖

圖9.30標記.類別選擇器示例9.3.2“并集”選擇器

圖9.31并集選擇器示意圖9.3.3后代選擇器

在CSS選擇器中，還可以通過嵌套的方式對特殊位置的HTML標記進行聲明，例如，當<p>與</p>之間包含<span></span>標記時，就可以使用后代選擇器進行相應的控制。

后代選擇器的寫法就是把外層的標記寫在前面，內(nèi)層的標記寫在后面，之間用空格分隔。當標記發(fā)生嵌套時，內(nèi)層的標記就成為外層標記的后代。9.4CSS的繼承特性

9.4.1繼承關系

<li>HTML</li><li>CSS<ul><li>選擇器</li><li>盒子模型</li><li>浮動與定位</li>

</ul></li><li>Javascript</li></ul></li><li>此外，還需要掌握：：

<ol><li>Flash</li><li>Dreamweaver</li><li>Photoshop</li></ol></li></ul>

圖9.35包含多層列表的頁面

圖9.36繼承關系樹型圖9.4.2CSS繼承的運用

em{color:red; /*顏色*/}</style>

圖9.37父子關系示例

圖9.38各級列表均變成綠色9.5CSS的層疊特性

<html> <head> <title>層疊特性</title> <styletype="text/css"> p{ color:green;

} .red{ color:red; } .purple{ color:purple; } #line3{

color:blue; } </style> </head> <body>

<pstyle="color:orange;"id="line3">這是第4行文本</p> <pclass=“purplered”>這是第5行文本</p> </body> </html>

圖9.40層疊特性示意網(wǎng)頁制作綜合技術教程第3部分CSS樣式設計

第9章CSS樣式設置實踐

手工編寫頁面9.1使用Dreamweaver進行CSS設置9.2復合選擇器9.3CSS的繼承特性9.4CSS的層疊特性9.59.1手工編寫頁面

圖9.1體驗CSS9.1.1構造頁面框架

圖9.3加入圖片9.1.2設置標題

圖9.4修改標題樣式9.1.3控制圖片

圖9.5圖文混排9.1.4設置正文

圖9.6修改正文樣式9.1.5設置整體頁面

圖9.7設置頁面的整體效果9.1.6對段落分別進行設置

圖9.8對段落進行不同的設置9.2使用Dreamweaver進行CSS設置

9.3復合選擇器

9.3.1“交集”選擇器

圖9.28標記類別選擇器

圖9.29交集選擇器示意圖

圖9.30標記.類別選擇器示例9.3.2“并集”選擇器

圖9.31并集選擇器示意圖9.3.3后代選擇器

9.4.1繼承關系

<li>HTML</li><li>CSS<ul><li>選擇器</li><li>盒子模型</li><li>浮動與定位</li>

</ul></li><li>Javascript</li></ul></li><li>此外，還需要掌握：：

<ol><li>Flash</li><li>Dreamweaver</li><li>Photoshop</li></ol></li></ul>

圖9.35包含多層列表的頁面

圖9.36繼承關系樹型圖9.4.2CSS繼承的運用

em{color:red; /*顏色*/}</style>

圖9.37父子關系示例

圖9.38各級列表均變成綠色9.5CSS的層疊特性

<html> <head> <title>層疊特性</title> <styletype="text/css"> p{ color:green;

} .red{ color:red; } .purple{ color:purple; } #line3{

color:blue; } </style> </head> <body>

<pstyle="color:orange;"id="line3">這是第4行文本</p> <pclass=“purplered”>這是第5行文本</p> </body> </html>

圖9.40層疊特性示意網(wǎng)頁制作綜合技術教程第3部分CSS樣式設計

第10章用CSS設置文本和圖像

使用CSS設置文本樣式10.1用CSS設置圖像樣式10.2用CSS設置背景樣式10.310.1使用CSS設置文本樣式

10.1.1長度單位

1．相對類型（1）px（pixel）（2）em2．絕對類型

尺度單位名說明in（英寸）不是國際標準單位，平常極少使用cm（厘米）國際標準單位，較少用mm（毫米）國際標準單位，較少用pt（點數(shù)）最基本的顯示單位，較少用pc（印刷單位）應用在印刷行業(yè)中，1pc

12pt表10.1 絕對類型的尺度單位10.1.2準備頁面

圖10.1預備用于設置CSS樣式的網(wǎng)頁文件10.1.3設置文字的字體

圖10.2設置正文字體10.1.4設置文字的傾斜效果

aaa圖10.3正常字體與“意大利體”、

“傾斜體”的對比

圖10.4設置文本傾斜后的效果10.1.5設置文字的加粗效果

設置值說明normal正常粗細bold粗體bolder加粗體lighter比正常粗細要細100-900共有9個層次（100，200…900），數(shù)字越大字體越粗表10.2 font-weight屬性的設置值10.1.6英文字母大小寫轉(zhuǎn)換

p.one{text-transform:capitalize;} /*單詞首字大寫*/p.two{text-transform:uppercase;}/*全部大寫*/p.three{text-transform:lowercase;} /*全部小寫*/

圖10.5設置英文單詞的大小寫形式10.1.7控制文字的大小

圖10.6修改正文文字大小后的效果

圖10.7設置段首的字母放大并下沉顯示10.1.8文字的裝飾效果

設置值說明none正常顯示underline為文字加下畫線line-through為文字加刪除線overline為文字加頂線blink文字閃爍，僅部分瀏覽器支持表10.3 text-decoration屬性的設置值

圖10.8設置文本的裝飾效果10.1.9設置段落首行縮進

圖10.9設置段落中首行文本縮進

圖10.10設置段落中首行文本懸掛縮進10.1.10設置字詞間距

圖10.11設置字詞間距10.1.11設置段落內(nèi)部的文字行高

如果不使用CSS，在HTML中是無法控、制段落中行與行之間的距離的。在CSS中，line-height屬性用于控制行的高度，通過它可以調(diào)整行與行之間的距離。關于line-height屬性的設置值如表10.4所示。

設置值說明長度數(shù)值，可以使用前面所介紹的尺度單位倍數(shù)font-size屬性設置值的倍數(shù)百分比相對于font-size屬性設置值的百分比表10.4 line-height屬性的設置值

圖10.12設置段落中的行高10.1.12設置段落之間的距離

圖10.14調(diào)整段落間距后的效果10.1.13控制文本的水平位置

設置值說明left左對齊，瀏覽器默認right右對齊center居中對齊justify兩端對齊表10.5 text-align屬性的設置值

圖10.15標題居中對齊10.1.14設置文字與背景的顏色

圖10.16設置標題背景顏色和文字顏色10.2用CSS設置圖像樣式

10.2.1設置圖片邊框

1．基本屬性在CSS中，一個邊框由以下3個要素組成。

（1）border-width（粗細）：可以使用各種CSS中的長度單位，最常用的是像素。

（2）border-color（顏色）：可以使用各種合法的顏色來定義方式。

（3）border-style（線型）：可以在一些預先定義好的線型中選擇。

圖10.17設置各種圖片邊框2．為不同的邊框分別設置樣式

圖10.19邊框效果10.2.2圖片縮放

10.2.3圖文混排

1．文字環(huán)繞

圖10.20文字環(huán)繞10.2.4案例—八大行星科普網(wǎng)頁

本例以介紹太陽系的八大行星為題材，充分利用CSS圖文混排的方法，實現(xiàn)頁面的效果。實例的最終效果如圖10.23所示。

圖10.23八大行星頁面10.2.5設置圖片與文字的對齊方式

1．水平對齊方式

圖10.26水平對齊2．豎直對齊方式

圖10.27默認的縱向?qū)R方式

圖10.28圖像與文字基線對齊

圖10.29圖像與文字底端對齊

圖10.30圖像與文字頂端對齊

圖10.31圖像與文字中間對齊10.3用CSS設置背景樣式

10.3.1設置背景顏色

圖10.35設置標題“藍底白字”效果10.3.2設置背景圖像

圖10.37頁面的body元素設置了背景圖像后的效果10.3.3設置背景圖像平鋪

該屬性可以設置為以下4種值之一。 ● repeat：沿水平和豎直兩個方向平鋪，這也是默認值。 ● no-repeat：不平鋪，即只顯示一次。 ● repeat-x：只沿水平方向平鋪。 ● repeat-y：只沿豎直方向平鋪。

圖10.41設置背景顏色后的效果

圖10.42水平方向平鋪背景圖像的效果

圖10.43同時設置背景圖像和背景顏色

圖10.44網(wǎng)頁效果圖10.3.4設置背景圖像位置

圖10.46將背景圖像放在右下角

圖10.47用數(shù)值設置背景圖像的位置

圖10.48用百分比設置背景圖像的位置10.3.6設置標題的圖像替換

圖10.53文字標題效果

圖10.54制作一個標題背景圖像

圖10.55顯示標題圖像

圖10.56圖像替換的最終效果信息工程學院

《web編程基礎》

第11章用CSS設置鏈接與導航菜單

豐富的超鏈接特效11.1控制鼠標指針11.2設置項目列表樣式11.3創(chuàng)建簡單的導航菜單11.4應用滑動門技術的玻璃效果菜單11.5內(nèi)容俯瞰

在一個網(wǎng)站中，所有頁面都會通過超鏈接相互鏈接在一起，這樣才會形成一個有機的整體。在各種網(wǎng)站中，導航都是網(wǎng)頁中最重要的組成部分之一。

因此，也出現(xiàn)了各式各樣非常美觀、實用性很強的導航樣式，如圖11.1所示的是Microsoft公司關于Office的網(wǎng)站，上部的導航條和Office2007軟件風格非常一致。

圖11.1Office網(wǎng)站導航風格與軟件風格一致

圖11.2WindowsMobiles網(wǎng)站的菜單式導航11.1豐富的超鏈接特效

復習：在HTML中，超鏈接是通過<a>標記來實現(xiàn)的，鏈接的具體地址則是利用<a>標記的href屬性設置，例如：

<ahref="">前沿視頻教室</a>

在默認的瀏覽器瀏覽方式下，超鏈接統(tǒng)一為藍色并且有下畫線，被點擊過的超鏈接則為紫色并且也有下畫線，如圖11.3所示。

圖11.3普通的超鏈接

a{ /*超鏈接的樣式*/ text-decoration:none; /*去掉下畫線*/ }

圖11.4沒有下劃線的超鏈接

屬性說明a:link超鏈接的普通樣式，即正常瀏覽狀態(tài)的樣式a:visited被點擊過的超鏈接的樣式a:hover鼠標指針經(jīng)過超鏈接時的樣式a:active在超鏈接上點擊時，即“當前激活”時超鏈接的樣式表11.1 可制作動態(tài)效果的CSS偽類別屬性（P217)偽類案例11-1偽類案例11-02超鏈接特效-按鈕效果.html練習：發(fā)揮想象能力，自己設計超鏈接特效定義偽類樣式選擇器：幾點說明：a:link鏈接狀態(tài)是基本的，推薦至少要定義這種鏈接。推薦“a:hover”鏈接顏色使用紅色，能產(chǎn)生極好的視覺效果以上4中選擇器第4種較少使用，在定義選擇器時，必須嚴格按此順序定義，否則可能會無效。11.2控制鼠標指針

表11.2 cursor定制的鼠標指針效果（P219)11.3設置項目列表樣式

復習：在html中，列表有哪幾類？有什么區(qū)別？Ul無序列表Ol有序列表11.3設置項目列表樣式

<html> <head> <title>項目列表</title> <style> ul{ font-size:0.9em; color:#00458c; list-style-type:decimal; /*項目編號*/ }</style> </head>

<body> <ul> <li>Home</li> <li>Contactus</li> <li>WebDev</li> <li>WebDesign</li> <li>Map</li> </ul> </body> </html>

案例11-0311.3設置項目列表樣式

在css中，無序列表和有序列表已經(jīng)沒有區(qū)別。列表編號是靠list-style-type的屬性來定義：（P220)

圖11.6普通項目列表

圖11.7項目編號項目列表圖片符號案例11-03項目列表11.4創(chuàng)建簡單的導航菜單

11.4.1簡單的豎直排列菜單

圖11.11無需表格的菜單案例11-0411.4.2橫豎自由轉(zhuǎn)換菜單

圖11.16水平菜單練習：制作橫豎自由轉(zhuǎn)換的菜單

圖11.17水平菜單可以自由地轉(zhuǎn)換為豎直菜單和折行菜單案例11-0511.5應用滑動門技術的玻璃效果菜單

圖11.18玻璃效果的菜單案例11-06導航條欣賞1、雙豎線菜單導航菜單欣賞2、雙斜角橫線菜單導航菜單欣賞3、立體菜單導航菜單欣賞4、箭頭菜單導航菜單欣賞5、帶說明信息的菜單導航菜單欣賞6、自適應的水平菜單導航菜單欣賞7、自適應的斜角水平菜單導航菜單欣賞8、應用滑動門技術的玻璃效果菜單導航菜單欣賞9、三狀態(tài)玻璃效果菜單（雙層滑動門應用）導航菜單欣賞10、不使用圖像的圓角菜單導航菜單欣賞11、會跳起的多彩菜單導航菜單欣賞12、下拉菜單總結：偽類列表導航作業(yè)：模仿教材上的案例，練習相關內(nèi)容。Anyquestion?網(wǎng)頁制作綜合技術教程第3部分CSS樣式設計

第12章用CSS設置表格和表單樣式

控制表格12.1美化表格12.2案例——日歷12.3CSS與表單12.4案例——網(wǎng)上調(diào)查問卷12.5

表格是網(wǎng)頁上很常見的元素。在傳統(tǒng)的網(wǎng)頁設計中表格除了顯示數(shù)據(jù)外，還常常被用來作為整個頁面布局的手段。

在Web標準逐漸深入設計領域以后，表格逐漸不再承擔布局的任務，但是表格仍然在網(wǎng)頁設計中發(fā)揮著重要的作用。

本章將繼續(xù)挖掘CSS中表格、表單的強大功能，此外，本章還將介紹表單樣式的設置方法。12.1控制表格

12.1.1設置表格的邊框

圖12.1基本的表格樣式

圖12.2設置表格的框線

1．設置單元格的邊框

2．相鄰邊框的合并規(guī)則

3．邊框的分離

12.1.2確定表格的寬度

12.1.3其他與表格相關的標記

圖12.6表格的HTML結構示意12.2美化表格

圖12.7交替變色的表格樣式12.3案例——日歷

圖12.13視圖模式顯示的日歷12.4CSS與表單

表單是網(wǎng)頁與用戶交互所不可缺少的元素，在傳統(tǒng)的HTML中對表單元素的樣式進行控制的標記很少，僅僅局限于功能上的實現(xiàn)。

本節(jié)圍繞CSS控制表單進行詳細介紹，包括表單中各個元素的控制，與表格配合制作各種效果等。12.4.1表單中的元素

圖12.18普通表單

圖12.19簡單的CSS樣式風格12.4.2多彩的下拉菜單

圖12.21七彩的下拉菜單

圖12.22最終效果12.5案例——網(wǎng)上調(diào)查問卷

圖12.25外層表格

第13章CSS盒子模型

“盒子”與“模型”的概念探究13.1邊框13.2設置內(nèi)邊距13.3設置外邊距13.4

盒子之間的關系13.5盒子在標準流中的定位原則13.6盒子模型概念的案例13.7

盒子模型是CSS控制頁面時一個很重要的概念。只有很好地掌握了盒子模型以及其中每個元素的用法，才能真正地控制好頁面中的各個元素。

本章主要介紹盒子模型的基本概念，并講解CSS定位的基本方法。13.1“盒子”與“模型”的概念探究

圖13.1畫框示意圖

圖13.2盒子模型案例13-0，1,2,3,413.2邊框

圖13.3border示意圖13.2.1設置邊框樣式

13.2.2屬性值的簡寫形式

1．對不同的邊框設置不同的屬性值在13.2.1節(jié)的實例代碼中，分別設置了border-color、border-width和border-style這3個屬性，其效果是對上下左右4個邊框同時產(chǎn)生作用。

在實際使用CSS時，除了采用這種方式，還可以分別對4條邊框設置不同的屬性值。

方法是按照規(guī)定的順序，給出2個、3個或者4個屬性值，它們的含義將有所區(qū)別，具體如下。

（1）如果給出2個屬性值，那么前者表示上下邊框的屬性，后者表示左右邊框的屬性。Border-color:redblue;1122

（2）如果給出3個屬性值，那么前者表示上邊框的屬性，中間的數(shù)值表示左右邊框的屬性，后者表示下邊框的屬性。Border-color:redbluegreen;1223

（3）如果給出4個屬性值，那么依次表示上、右、下、左邊框的屬性，即順時針排序。Border-color:redbluegreenpurple;12342．在一行中同時設置邊框的寬度、顏色和樣式

要把border-width、border-border-color和border-style這3個屬性合在一起，還可以用border屬性來簡寫。

例如：

border:2pxgreendashed;

這行樣式表示將4條邊框都設置為2像素的綠色虛線，這樣就比分為3條樣式來寫方便多了。

3．對一條邊框設置與其他邊框不同的屬性

4．同時制訂一條邊框的一種屬性13.3設置內(nèi)邊距

13.4設置外邊距

圖13.12DOM樹與頁面布局的對應關系

1．塊級元素

2．行內(nèi)元素13.5.3<div>標記與<span>標記

<html> <head> <title>div與span的區(qū)別</title> </head> <body>案例13-0513.6盒子在標準流中的定位原則

13.6.1行內(nèi)元素之間的水平Margin案例13-06橫向margin相加，縱向margin坍塌

圖13.15行內(nèi)元素之間的margin13.6.2塊級元素之間的豎直margin

圖13.17塊元素之間的margin案例13-0713.6.3嵌套盒子之間的margin

圖13.19父子塊的margin案例13-08

圖13.21IE與Firefox瀏覽器對待父元素高度的不同處理案例19-0913.6.4margin可以設置為負值

圖13.23父子塊設置margin為負數(shù)案例13-1013.7盒子模型概念的案例

圖13.24計算圖中各個字母代表的寬度（高度）是多少像素案例13-11網(wǎng)頁制作綜合技術教程第4部分CSS頁面布局設計

第13章CSS盒子模型

“盒子”與“模型”的概念探究13.1邊框13.2設置內(nèi)邊距13.3設置外邊距13.4

盒子之間的關系13.5盒子在標準流中的定位原則13.6盒子模型概念的案例13.7

盒子模型是CSS控制頁面時一個很重要的概念。只有很好地掌握了盒子模型以及其中每個元素的用法，才能真正地控制好頁面中的各個元素。

本章主要介紹盒子模型的基本概念，并講解CSS定位的基本方法。13.1“盒子”與“模型”的概念探究

圖13.1畫框示意圖

圖13.2盒子模型13.2邊框

圖13.3border示意圖13.2.1設置邊框樣式

13.2.2屬性值的簡寫形式

在實際使用CSS時，除了采用這種方式，還可以分別對4條邊框設置不同的屬性值。

方法是按照規(guī)定的順序，給出2個、3個或者4個屬性值，它們的含義將有所區(qū)別，具體如下。

（1）如果給出2個屬性值，那么前者表示上下邊框的屬性，后者表示左右邊框的屬性。Border-color:redblue;1122

（2）如果給出3個屬性值，那么前者表示上邊框的屬性，中間的數(shù)值表示左右邊框的屬性，后者表示下邊框的屬性。Border-color:redbluegreen;1223

（3）如果給出4個屬性值，那么依次表示上、右、下、左邊框的屬性，即順時針排序。Border-color:redbluegreenpurple;12332．在一行中同時設置邊框的寬度、顏色和樣式

要把border-width、border-border-color和border-style這3個屬性合在一起，還可以用border屬性來簡寫。

例如：

border:2pxgreendashed;

這行樣式表示將4條邊框都設置為2像素的綠色虛線，這樣就比分為3條樣式來寫方便多了。

3．對一條邊框設置與其他邊框不同的屬性

4．同時制訂一條邊框的一種屬性13.3設置內(nèi)邊距

13.4設置外邊距

13.5盒子之間的關系

13.5.1HTML與DOM 1．樹

2．DOM樹

圖13.10家譜示意圖

圖13.12DOM樹與頁面布局的對應關系

1．塊級元素

2．行內(nèi)元素13.5.3<div>標記與<span>標記

<html> <head> <title>div與span的區(qū)別</title> </head> <body>案例13-05

<p>div標記不同行：</p> <div><imgsrc="cup.gif"border="0"></div> <div><imgsrc="cup.gif"border="0"></div> <div><imgsrc="cup.gif"border="0"></div>

<p>span標記同一行：</p> <span><imgsrc="cup.gif" border="0"></span> <span><imgsrc="cup.gif" border="0"></span> <span><imgsrc="cup.gif" bor

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

網(wǎng)頁制作綜合技術全冊配套完整課件

文檔簡介

溫馨提示

最新文檔

評論

網(wǎng)頁制作綜合技術全冊配套完整課件

文檔簡介

溫馨提示

最新文檔

評論

相關文檔