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

《網(wǎng)站建設(shè)與網(wǎng)頁(yè)制作課程PPT》由會(huì)員上傳分享，免費(fèi)在線(xiàn)閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、網(wǎng)頁(yè)設(shè)計(jì)與制作呂戈靜2016.10教學(xué)目標(biāo)通過(guò)本章的學(xué)習(xí)，能夠讓學(xué)生了解網(wǎng)站的設(shè)計(jì)與工作流程，掌握HTML的基本概念和結(jié)構(gòu)，能利用HTML制作網(wǎng)頁(yè),了解和DHTML/XML的區(qū)別，能熟練掌握利用Dreamweaver制作網(wǎng)頁(yè)，利用Fireworks制作圖片、利用Flash制作動(dòng)畫(huà)；并能有機(jī)地結(jié)合，制作出精美的網(wǎng)頁(yè)。第1章網(wǎng)頁(yè)設(shè)計(jì)概述第2章HTML語(yǔ)言基礎(chǔ)第3章Dreamweaver基礎(chǔ)第4章網(wǎng)頁(yè)中的基礎(chǔ)元素第5章網(wǎng)頁(yè)頁(yè)面布局第6章網(wǎng)頁(yè)中的層和時(shí)間軸第7章表單的應(yīng)用第8章在網(wǎng)頁(yè)中使用行為第9章CSS樣式使用

2、第10章網(wǎng)頁(yè)中的多媒體應(yīng)用第11章模板和庫(kù)第12章站點(diǎn)測(cè)試和發(fā)布第13章Flash8簡(jiǎn)介第14章Fireworks8簡(jiǎn)介目錄第1章網(wǎng)頁(yè)設(shè)計(jì)概述$[知識(shí)目標(biāo)]掌握網(wǎng)頁(yè)、網(wǎng)站及主頁(yè)的概念了解網(wǎng)頁(yè)中的主要元素了解各種網(wǎng)頁(yè)制作工具8[能力目標(biāo)]各種網(wǎng)頁(yè)制作工具的配合使用網(wǎng)站的整體規(guī)劃網(wǎng)站的設(shè)計(jì)流程1.1網(wǎng)頁(yè)和網(wǎng)站1.2網(wǎng)頁(yè)中的主要元素1.3網(wǎng)頁(yè)制作工具1.4網(wǎng)頁(yè)設(shè)計(jì)的基本流程本章小結(jié)第1章網(wǎng)頁(yè)設(shè)計(jì)概述1.1網(wǎng)頁(yè)和網(wǎng)站1.1.1網(wǎng)頁(yè)1.1.2網(wǎng)站1.1.3網(wǎng)頁(yè)的基本功能1．網(wǎng)頁(yè)　　網(wǎng)頁(yè)（WEB）：是用html語(yǔ)言

3、編寫(xiě)的，通過(guò)www網(wǎng)傳輸，并被web瀏覽器翻譯成可以顯示出來(lái)的集合文本、圖片、聲音和動(dòng)畫(huà)等信息元素的頁(yè)面文件（網(wǎng)頁(yè)示例）。2．網(wǎng)頁(yè)的類(lèi)型根據(jù)頁(yè)面內(nèi)容可以分首頁(yè)、主頁(yè)、專(zhuān)欄網(wǎng)頁(yè)、內(nèi)容網(wǎng)頁(yè)和功能網(wǎng)頁(yè)等類(lèi)型；按制作技術(shù)分為靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)。1.1.1網(wǎng)頁(yè)1.1網(wǎng)頁(yè)和網(wǎng)站網(wǎng)站就是把一些網(wǎng)頁(yè)等信息文件通過(guò)超鏈接的形式關(guān)聯(lián)起來(lái)形成的信息文件的集合。信息可以是網(wǎng)頁(yè)形式也可以是其他的文檔形式。網(wǎng)頁(yè)與網(wǎng)站的區(qū)別與聯(lián)系：網(wǎng)站是一個(gè)文件夾，其中的文件不僅是網(wǎng)頁(yè)還有網(wǎng)站所需的其他文件或文件夾。網(wǎng)頁(yè)是一個(gè)頁(yè)面文件，用來(lái)發(fā)布各種信

4、息。網(wǎng)頁(yè)是網(wǎng)站的構(gòu)成要素，是網(wǎng)站信息發(fā)布與表現(xiàn)的一種主要形式；網(wǎng)站是網(wǎng)頁(yè)通過(guò)超鏈接形成的集合。1.1.2網(wǎng)站1.1網(wǎng)頁(yè)和網(wǎng)站1、媒介的作用。使用者與信息之間的媒介。一方面是發(fā)布者，功能是發(fā)布信息；另一方面是瀏覽者，功能是提供瀏覽的信息，通過(guò)瀏覽網(wǎng)頁(yè)找尋需要的信息。2、互動(dòng)的作用。瀏覽者與網(wǎng)頁(yè)制作單位之間互動(dòng)的窗口，可以單向或雙向傳遞信息。3、傳輸?shù)淖饔?。作為傳輸各種電子文件或信息之用，如下載說(shuō)明書(shū)、更新文件、驅(qū)動(dòng)程序等。1.1.3網(wǎng)頁(yè)的基本功能1.1網(wǎng)頁(yè)和網(wǎng)站1.2網(wǎng)頁(yè)中的主要元素1.2.1文本1.2.2

5、圖像1.2.3鏈接標(biāo)志1.2.4其他的基本要素網(wǎng)頁(yè)的基本要素一般包括：文字、圖像、動(dòng)畫(huà)和鏈接標(biāo)志等，除此之外，網(wǎng)頁(yè)的元素還包聲音、多媒體和視頻等。是網(wǎng)頁(yè)中最基本的元素。網(wǎng)頁(yè)中文字的設(shè)計(jì)一般從以下幾個(gè)方面來(lái)考慮：1．字體的選擇。2．字號(hào)、行距的選擇。3．特殊字體的使用。4．字體的顏色。1.2.1文本1.2網(wǎng)頁(yè)中的主要元素現(xiàn)在網(wǎng)絡(luò)上使用的絕大多數(shù)圖片和圖像是gif、jpeg和png文件格式。網(wǎng)頁(yè)上使用圖像要注意的問(wèn)題：?JPEG格式適合于照片圖像，GIF格式適合于包含純色的圖像，例如插圖和線(xiàn)條圖。?利用圖像編

6、輯軟件來(lái)放大或縮小圖像?屏幕顯示圖像的分辨率一般為72dpi。制作圖像時(shí)，不必使用比此再高的分辨率。1.2.2圖像1.2網(wǎng)頁(yè)中的主要元素?如果建立的圖像中只有黑色和白色，處理時(shí)可將它保存為黑白圖像格式，這樣可以減少圖像文件的大小。?如果設(shè)計(jì)的GIF格式圖像包含了漸變和直線(xiàn)，應(yīng)盡量使得它們水平，因?yàn)镚IF格以每條水平線(xiàn)為基礎(chǔ)來(lái)壓縮。?嘗試各種不同的JPEG壓縮率?使用合適的色彩模式。?慎用動(dòng)畫(huà)。1.2.2圖像1.2網(wǎng)頁(yè)中的主要元素鏈接也叫超鏈接（Hyperlink），是從一個(gè)網(wǎng)頁(yè)指向另一個(gè)目的端的鏈接，是頁(yè)

7、面間的鏈接關(guān)系。鏈接標(biāo)志（載體）指的是網(wǎng)頁(yè)中特殊的文本或圖像，它們常常用不同的顏色和下劃線(xiàn)來(lái)標(biāo)識(shí)，在瀏覽器中，訪(fǎng)問(wèn)者可以用鼠標(biāo)單擊它們，能夠從當(dāng)前的網(wǎng)頁(yè)轉(zhuǎn)到鏈接的目的端位置。超鏈接的標(biāo)志一般有：文本、圖像、熱區(qū)三種。要注意的是，所有超鏈接標(biāo)志均應(yīng)清晰無(wú)誤地向?yàn)g覽者標(biāo)識(shí)出來(lái)，讓人一看就知道。1.2.3鏈接標(biāo)志1.2網(wǎng)頁(yè)中的主要元素除上述幾種要素之外，在網(wǎng)頁(yè)上經(jīng)常使用的還有動(dòng)畫(huà)、視頻、聲音等各種信息的形式。1．動(dòng)畫(huà)。目前網(wǎng)絡(luò)上常用的動(dòng)畫(huà)類(lèi)型有g(shù)if和Flash動(dòng)畫(huà)兩種。2．視頻。是多媒體網(wǎng)頁(yè)的一個(gè)重要組成部分

8、，常用的視頻格式有avi、mpeg和mov等，視頻會(huì)大大增加網(wǎng)頁(yè)的文件量，從而使用訪(fǎng)問(wèn)速度受到影響，因此要慎用。3．音頻。在網(wǎng)頁(yè)中插入音頻會(huì)增加網(wǎng)頁(yè)的生動(dòng)性。常用的音頻格式有rm(ram)、midi、wav和mp3等格式。音頻文件和視頻文件一樣都會(huì)增加網(wǎng)頁(yè)的文件量，因此要慎用。1.2.4其他的基本要素1.2網(wǎng)頁(yè)中的主要元素1.3網(wǎng)頁(yè)制作工具1.3.1網(wǎng)頁(yè)編輯工具1．超文本標(biāo)識(shí)語(yǔ)言（HTML）2．FrontPage簡(jiǎn)介3．Dre