網(wǎng)站建設(shè)與網(wǎng)頁制作課程PPT.ppt

1、a，1，web設(shè)計和制作，呂靜，2016.10，a，2，培訓(xùn)目標，通過本章中的學(xué)習(xí)，學(xué)生了解網(wǎng)站的設(shè)計和工作流程，了解HTML的基本概念和結(jié)構(gòu)，使用HTML創(chuàng)建網(wǎng)頁，了解與DHTML/XML的區(qū)別，以及DHTML有機地組合在一起，可以創(chuàng)建漂亮的網(wǎng)頁。第3、1章web設(shè)計概述第2章HTML語言基礎(chǔ)第3章Dream weaver基本第4章web頁的基本元素第5章web頁布局第6章web頁的層和時間軸第7章應(yīng)用表單第8章在web頁上使用行為第9章CSS樣式第10章web頁上的多媒體應(yīng)用程序第11章模板和庫第12章測試和發(fā)布站點第13章Flash 8簡介第14章Fireworks8簡介，以及第1章we

2、b設(shè)計概述，$ 知識目標了解web頁面、網(wǎng)站和主頁的概念了解web頁面的主要元素了解各種web制作工具8 能力目標各種web制作工具的工作原理web站點的總體規(guī)劃流程，a、5、1.1網(wǎng)頁和web站點1.2網(wǎng)頁的主要元素1.3 web制作工具1.4 web設(shè)計的基本流程本章摘要，第1章網(wǎng)頁(web):以html語言編寫、通過www網(wǎng)絡(luò)傳輸并轉(zhuǎn)換為可在web瀏覽器中顯示的信息元素(例如集合文本、圖片、聲音和動畫)的頁面文件(web頁面示例)。2.網(wǎng)頁的種類可以根據(jù)頁面內(nèi)容分為主頁、主頁、專欄主頁、內(nèi)容主頁、功能網(wǎng)頁等種類；根據(jù)創(chuàng)作技術(shù)，分為靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。1.1.1網(wǎng)頁、1.1網(wǎng)頁和網(wǎng)站、a、

3、8和網(wǎng)站是通過超鏈接鏈接信息文件(如某些網(wǎng)頁)而創(chuàng)建的信息文件的集合。信息可以是網(wǎng)頁形式，也可以是其他文檔形式。網(wǎng)頁和網(wǎng)站的區(qū)別和聯(lián)系方式：網(wǎng)站是一個文件夾，它不僅包含網(wǎng)頁，還包含網(wǎng)站所需的其他文件或文件夾。網(wǎng)頁是用于發(fā)布各種信息的頁面文件。網(wǎng)頁是網(wǎng)站的組成部分，是網(wǎng)站信息公開和表達的主要形式。網(wǎng)站是超鏈接組成的網(wǎng)頁的集合。1.1.2網(wǎng)站、1.1網(wǎng)頁和網(wǎng)站、a、9，1、媒體的作用。用戶和信息之間的媒介。另一方面，發(fā)布者，功能是信息發(fā)布。相反，瀏覽器具有通過web查找所需信息的瀏覽信息的功能。2、交互作用的作用。導(dǎo)航器和web制作單元之間交互的窗口，使您可以單向或雙向傳遞信息。3、轉(zhuǎn)移的作用。用

4、于傳輸各種電子文件或信息，如下載手冊、更新文件、驅(qū)動程序等。1.1.3網(wǎng)頁的基本功能，1.1網(wǎng)頁和網(wǎng)站，a，10，1.2網(wǎng)頁的主要元素，1.2.1文本1.2.2圖像1.2.3鏈接標志1.2.4其他基本元素，網(wǎng)頁的基本元素通常包括文本、圖像、動畫和鏈接標志等，其他網(wǎng)頁的元素包括聲音、多媒體和視頻等，a，11是網(wǎng)頁最基本的元素。網(wǎng)頁中文本的設(shè)計通?？紤]以下幾個方面：1.字體的選擇。2.大小，選擇行距。3.使用特殊字體。4.字體的顏色。1.2.1文本、1.2網(wǎng)頁的主要元素、a、12以及網(wǎng)絡(luò)中當前使用的大多數(shù)圖片和圖像都是gif、JPEG和png文件格式。在網(wǎng)頁中使用圖像時需要注意的問題：JPEG格式

5、適用于照片圖像，GIF格式適用于包含純色的圖像(如圖片或線條圖)。使用圖像編輯軟件放大或縮小圖像屏幕顯示圖像的分辨率通常為72dpi。建立影像時，不需要使用比這個更高的解析度。1.2.2圖像、1.2 web頁面的主要元素，如果創(chuàng)建只有a、13、黑色和白色的圖像，則可以在處理時將其保存為黑白圖像格式，從而減小圖像文件的大小。如果GIF格式圖像包含漸變和描邊，則GIF單元格將相對于每條水平線進行壓縮，因此應(yīng)盡可能保持水平。請嘗試適合各種JPEG壓縮率的顏色模式。慎重寫動畫。1.2.2圖像、1.2網(wǎng)頁的主要元素、a、14、超鏈接(也稱為Hyperlink)是從一個網(wǎng)頁到另一個目標的鏈接，以及頁面之間

6、的鏈接關(guān)系。鏈接標志(載體)表示網(wǎng)頁上的特殊文本或圖像，通常用不同的顏色和下劃線標識。在瀏覽器中，訪問者可以單擊鼠標，導(dǎo)航到當前網(wǎng)頁中鏈接的目標位置。超鏈接的標志通常有三種：文本、圖像和熱點。請注意，所有超鏈接徽標必須明確、完整地向訪問者標識。1.2.3鏈接標志、1.2網(wǎng)頁的主要元素、a、15、除上述幾個元素外，還有網(wǎng)頁上常用的各種信息形式，如動畫、視頻和聲音。1.動畫。當前網(wǎng)絡(luò)中常用的動畫類型有兩種：gif和Flash動畫。2.視頻。是多媒體網(wǎng)頁的重要組成部分，是常用的視頻格式(如avi、mpeg、mov等)，請小心使用，因為視頻會顯著增加網(wǎng)頁上的文件量，影響使用訪問速度。3.音頻。在網(wǎng)頁中

7、插入音頻會提高網(wǎng)頁的生動性。典型的音頻格式包括rm(ram)、midi、wav和MP3。音頻文件與視頻文件一樣，會增加網(wǎng)頁上的文件量，因此請謹慎使用。1.2.4其他基本元素，1.2網(wǎng)頁的主要元素，a，16，1 . 3 web創(chuàng)作工具，1 . 3 . 1 web編輯工具1。超文本標識語言(html)2。front page簡介3。Dreamweaver 1 . 3 . 2 web圖像編輯工具1.3.3動態(tài)網(wǎng)頁技術(shù)、a、17、1.photoshop. Adobe開發(fā)的，是當今最常用的圖形圖像處理軟件之一，可以創(chuàng)建、處理和合成多種專業(yè)圖像。2.fireworks。是Macromedia開發(fā)的圖形處理

8、工具，是第一款專門為創(chuàng)建web圖形而設(shè)計的軟件，同時還提供了專業(yè)的web圖形設(shè)計和創(chuàng)作解決方案。3.Flash. Macromedia制作的Flash是目前使用非常廣泛的交互式web矢量動畫軟件。Dreamweaver、Flash和Fireworks中的三個軟件被稱為“web三劍客”，是目前公認的比較標準的web創(chuàng)作工具。1 . 3 . 2 web圖像編輯工具，1.3 web創(chuàng)作工具，a，18，動態(tài)web頁啟用了web瀏覽器和web設(shè)計者的交互，有兩種交互技術(shù)。一種是常用的JavaScript和VBScript客戶端技術(shù)，如。另一種是服務(wù)器端技術(shù)，如當前常用的ASP和PHP。1.active

9、server pages(ASP)2。超文字處理(PHP)3。Java server pages(JSP)、1.3.3動態(tài)web技術(shù)、1.3 web創(chuàng)作工具、a、19，1 . 4 web設(shè)計的基本過程、1.4.1網(wǎng)站的設(shè)計過程1.4.2網(wǎng)頁的設(shè)計和創(chuàng)作1.4.3網(wǎng)頁的測試1.4.4網(wǎng)頁的上載和發(fā)布、a、決定網(wǎng)站的主題2。網(wǎng)站的整體結(jié)構(gòu)計劃3。統(tǒng)一web資料的收集4。確定網(wǎng)頁布局。5.制作網(wǎng)頁。6.添加web效果。7.測試和發(fā)布網(wǎng)站。1.4.1網(wǎng)站的設(shè)計過程，1.4 web設(shè)計的基本過程，a，21，1。網(wǎng)頁的布局(1)確定平衡。(2)對稱。(3)對比性。(4)密度稀。(5)比例。(6)韻律。網(wǎng)頁

10、的排版布局是決定網(wǎng)站美觀的重要方面，只有通過合理、創(chuàng)造性的布局，才能在瀏覽器前完美地顯示文字和圖像等。2.網(wǎng)頁設(shè)計和制作網(wǎng)頁設(shè)計和制作一般分為靜態(tài)網(wǎng)頁制作和動態(tài)網(wǎng)頁制作兩類。1.4.2網(wǎng)頁的設(shè)計和制作，1.4網(wǎng)頁設(shè)計的基本過程，a，22，1。瀏覽器兼容性測試。當前瀏覽器有兩種主要瀏覽器：Internet Explorer和Netscape，兩種瀏覽器都支持不同的語法，如HTML和CSS。Dreamweaver可以讓設(shè)計人員檢查網(wǎng)頁是否包含瀏覽器無法識別的語法功能。2.平臺兼容性測試。為了考慮用戶，必須在至少一臺PC和一臺Mac上測試網(wǎng)站頁面，以確定兼容性。3.超連結(jié)完整性測試。超鏈接是網(wǎng)頁之間

11、、網(wǎng)站之間連接的橋梁，瀏覽者不愿意訪問經(jīng)常出現(xiàn)“找不到網(wǎng)頁”問題的網(wǎng)站，作為設(shè)計者，必須檢測超鏈接的完整并保證鏈接的有效性，不要留下太多不好的鏈接。1.4.3網(wǎng)頁測試，1.4網(wǎng)頁設(shè)計的基本流程，a，23，網(wǎng)頁設(shè)計必須在網(wǎng)上發(fā)布。否則，網(wǎng)站圖像仍然不顯示。發(fā)布的服務(wù)器可以是遠程的，也可以是本地的。如果要發(fā)布到internet，請先申請域名和家庭空間，然后使用專用軟件(如CuteFTP)上載。FTP廣泛稱為CuteFTP和LeapFTP，您也可以上傳到Dreamweaver內(nèi)置的FTP中。1 . 4 . 4 web上載和發(fā)布，1.4 web設(shè)計的基本過程，a，24，本章概述，第1章web設(shè)計概述，

12、a，25，$ 知識目標了解HTML文件的基本結(jié)構(gòu)編輯HTML中的文本并了解圖像語法了解HTML中各種超鏈接設(shè)置的語法了解HTML中表和框架的基本語法a，26，2.1 HTML概述2.2文本的編輯2.3圖像編輯2.4創(chuàng)建超鏈接2.5表和框架章節(jié)摘要，第2章基于HTML語言，a，27，2.1 HTML概述，2.1.1 HTML簡介2.1.2 HTML語法結(jié)構(gòu)，a，28，HTML(HTML 文件的擴展名為：html 或 htm 。示例2.1簡單的HTML文檔。長春歡迎你！這里是長春有游。我會游長春的！由“”組成的是標記。HTML語言中標分數(shù)“單個標記”和“阻止標記”。2.1.1 HTML簡介，2.1

13、 HTML概述，a，29，1。阻塞標記格式：2.單一標記格式：只有開始標記，沒有結(jié)束標記。最常用的單個標記表示段中的換行。3.標記屬性格式：每個屬性沒有前后順序，您也可以省略屬性，在省略屬性時默認標記。2.1.1 HTML簡介，2.1 HTML概述，a，30，HTML文檔的基本結(jié)構(gòu)：啟動文件啟動標題區(qū)域.表頭區(qū)域結(jié)束檔案本文內(nèi)容開始檔案本文內(nèi)容.文件正文內(nèi)容結(jié)束文件結(jié)束，其中之間是web文件，表示是必需的標記。2.1.2 HTML語法結(jié)構(gòu)，2.1 HTML概述，a，31，2.2文本編輯，2.2.1段落標記2.2.2文本標記2.2.3標題顯示級別2.2.4列表，a，32，1。段落()預(yù)設(shè)語法格式

14、如下：其中參數(shù)align設(shè)置段落的位置是左、右還是中心。默認值為左側(cè)。除Align外，還有其他參數(shù)，例如class。如果未按默認值顯示，則Class參數(shù)是可選的。2.換行通過將單個標記放在一行的末尾，可以在一個段落中實現(xiàn)文本的強制換行，還可以將標記后面的文本單詞、圖像、表格等設(shè)置為顯示在下一行。2.2.1段落標記，2.2文本的編輯，a，33，1。字體標簽的預(yù)設(shè)語法格式如下：size:設(shè)定字型的顯示大小。范圍為“1-7”。其中“3”是缺省值。Color:設(shè)置文本的顏色，該文本可以是顏色名稱(英語表示紅色)或顏色的十六進制代碼(#000000為黑色，# FFFFFF為白色)。Face:設(shè)定顯示文字

15、的字體。值是字體的名稱。文本中的標記還包含許多常用標記，如(粗體)、(斜體)和(下劃線)，它們表示字體效果。，2.2.2文本標記，2.2文本編輯，a，34，2。特殊字符HTML除了包含上面學(xué)習(xí)的某些標簽外，還包含常用的特殊字符，如“”。這些特殊字符在HTML語言中具有正確的轉(zhuǎn)義字符，常見的轉(zhuǎn)義字符和特殊字符如下表：2.2.2文本標簽，2.2文本編輯，a、35、3 .水平線標記水平線是在網(wǎng)頁上顯示水平線的水平分割線。語法格式如下：Size:設(shè)定水平線的高度(以像素為單位)。Color:設(shè)定水平線的顏色。Width:設(shè)定水平線的寬度(以像素或百分比為單位)。像素是絕對大小，不取決于程序窗口的大小。

16、百分比是相對于程序窗口水平線的比例，取決于程序窗口的大小。Align:設(shè)定水平線的對齊方式。對齊包括左、中、右對齊。2.2.2文本標記，2.2文本編輯，a，36，語法格式：n:表示其他級別的標題，n值可以是1-6的任意數(shù)字。其中1表示最大的標題字體。您也可以使用Align屬性設(shè)定對齊方式。通常使用三種對齊方式：左、中、右。2.2.3標題顯示評級，2.2文本編輯，a，37，HTML中的列表通常為“有序列表”和“無序列表”。1.順序列表基本語法結(jié)構(gòu)如下：項目1項目2.項目n、2.2.4列表、2.2文本編輯、a、38、1。順序列表類型：設(shè)置列表的順序類型。通用序號如下：n=1:使用數(shù)字作為序號。n=a；使用大寫字母作為序列號。N=a:使用小寫字母作為序列號。N=I:使用大寫羅馬數(shù)字作為序列號。N=i:使用小寫羅馬數(shù)字作為序列號。Start:可選參數(shù)，用于設(shè)置序號的起始數(shù)值。如果不添加“start”，則從每個序列號的第一個序列號開始。2.2.4列表，2.2文本編輯，a，39，2。未排序列表基本語法結(jié)構(gòu)如