《網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式）》 課件 項(xiàng)目1 網(wǎng)頁(yè)設(shè)計(jì)與制作

網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目一

網(wǎng)頁(yè)基礎(chǔ)N

知識(shí)目標(biāo)了解網(wǎng)頁(yè)基礎(chǔ)知識(shí)熟悉網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言掌握網(wǎng)頁(yè)制作工具的使用方法1.1.1認(rèn)識(shí)網(wǎng)頁(yè)與網(wǎng)站任務(wù)1.1〓信息與信息技術(shù)網(wǎng)頁(yè)的概念：

網(wǎng)頁(yè)是Internet中基本的信息單位，是由超文本標(biāo)記語(yǔ)言（HyperTextMarkupLanguage，HTML）或者其他語(yǔ)言編寫的。中國(guó)知網(wǎng)：/1.1.1認(rèn)識(shí)網(wǎng)頁(yè)與網(wǎng)站任務(wù)1.1〓信息與信息技術(shù)網(wǎng)站概念：網(wǎng)站是一個(gè)或多個(gè)網(wǎng)頁(yè)的集合。網(wǎng)站是指通過(guò)瀏覽器在Internet上訪問(wèn)的頁(yè)面。網(wǎng)站可以用于發(fā)布自己想要公開的信息，也可以用于提供相關(guān)的網(wǎng)絡(luò)服務(wù)，同樣可以獲取自己需要的信息或者享受網(wǎng)絡(luò)服務(wù)。網(wǎng)站設(shè)計(jì)者先將整個(gè)網(wǎng)站結(jié)構(gòu)規(guī)劃好，然后分別制作各個(gè)網(wǎng)頁(yè)，大多數(shù)網(wǎng)站都會(huì)為瀏覽者提供一個(gè)主頁(yè)，最后將其他網(wǎng)頁(yè)與主頁(yè)鏈接起來(lái)。中國(guó)大學(xué)MOOC：/1.1.1認(rèn)識(shí)網(wǎng)頁(yè)與網(wǎng)站任務(wù)1.1〓信息與信息技術(shù)序號(hào)特點(diǎn)含義1圖形化的界面網(wǎng)頁(yè)能同時(shí)顯示色彩豐富的圖形和文本，可以提供將圖形、音頻和視頻等集于一體的信息資源。2兼容的系統(tǒng)平臺(tái)網(wǎng)頁(yè)可以兼容多個(gè)系統(tǒng)平臺(tái)，如Windows、UNIX、Macintosh、Android等，系統(tǒng)平臺(tái)不影響用戶通過(guò)Internet訪問(wèn)網(wǎng)頁(yè)。3交互式的操作在用戶向Web提出請(qǐng)求后，Web會(huì)提供用戶需要的信息。4分布式的存儲(chǔ)在網(wǎng)絡(luò)中有大量的圖形、音頻和視頻信息，這會(huì)占用相當(dāng)大的磁盤空間，不可能將所有的信息都存儲(chǔ)在一起，只能將其存放在不同的站點(diǎn)中。服務(wù)器會(huì)根據(jù)查詢的情況選擇需要讀取的信息。網(wǎng)頁(yè)的特點(diǎn)5信息的時(shí)效性Web站點(diǎn)上的信息是動(dòng)態(tài)的、經(jīng)常更新的，一般信息站點(diǎn)都會(huì)保證信息的時(shí)效性。1.1.1認(rèn)識(shí)網(wǎng)頁(yè)與網(wǎng)站任務(wù)1.1〓信息與信息技術(shù)網(wǎng)站分類：

網(wǎng)站有很多不同的分類方法，例如，按照其使用的技術(shù)可分為靜態(tài)網(wǎng)站和動(dòng)態(tài)網(wǎng)站；按照網(wǎng)站的性質(zhì)可以分為企業(yè)網(wǎng)站、政府網(wǎng)站、教育網(wǎng)站和個(gè)人網(wǎng)站；按照網(wǎng)站的作用可以分為搜索引擎網(wǎng)站、社區(qū)論壇網(wǎng)站、在線翻譯網(wǎng)站、軟件下載網(wǎng)站和音樂(lè)欣賞網(wǎng)站等。

直觀的網(wǎng)站分類方法是按網(wǎng)站的主題進(jìn)行分類。主題是網(wǎng)站的題材，它決定網(wǎng)站的內(nèi)容，體現(xiàn)網(wǎng)站代表的形象。一般常見(jiàn)的題材有公司企業(yè)、休閑娛樂(lè)、教育培訓(xùn)、電腦網(wǎng)絡(luò)、文化藝術(shù)、交通旅游等，而每一個(gè)題材又可以繼續(xù)劃分。1.1.1認(rèn)識(shí)網(wǎng)頁(yè)與網(wǎng)站任務(wù)1.1〓信息與信息技術(shù)序號(hào)特征含義1網(wǎng)頁(yè)相互鏈接網(wǎng)站是由多個(gè)網(wǎng)頁(yè)相互鏈接組成的，建設(shè)網(wǎng)站就是制作網(wǎng)頁(yè)。在所有的網(wǎng)頁(yè)中，網(wǎng)站的主頁(yè)是整個(gè)網(wǎng)站中最重要的。2網(wǎng)站標(biāo)志任何網(wǎng)站都有自己的網(wǎng)站標(biāo)志，而且都力求自己的網(wǎng)站標(biāo)志與眾不同，一個(gè)好的網(wǎng)站標(biāo)志通常具有朗朗上口的名字和醒目的圖形特征。3風(fēng)格統(tǒng)一網(wǎng)站雖然有很多網(wǎng)頁(yè)，但是作為一個(gè)整體來(lái)講，它必須有一個(gè)統(tǒng)一的風(fēng)格。主頁(yè)是網(wǎng)站重要的網(wǎng)頁(yè)，它的風(fēng)格往往決定了整個(gè)網(wǎng)站的風(fēng)格。4網(wǎng)頁(yè)導(dǎo)航網(wǎng)頁(yè)導(dǎo)航是一個(gè)網(wǎng)站非常重要的組成部分，也是衡量一個(gè)網(wǎng)站是否優(yōu)秀的主要標(biāo)準(zhǔn)。便捷的網(wǎng)頁(yè)導(dǎo)航能夠幫助用戶以較快的速度找到自己需要的網(wǎng)頁(yè)。網(wǎng)頁(yè)導(dǎo)航常用的實(shí)現(xiàn)方法是導(dǎo)航條。網(wǎng)站的特征1.1.1認(rèn)識(shí)網(wǎng)頁(yè)與網(wǎng)站任務(wù)1.1〓信息與信息技術(shù)序號(hào)特征含義5分層的欄目組織網(wǎng)站的層次型組織方法是將網(wǎng)站的內(nèi)容分成若干個(gè)大欄目，再將大欄目分成若干個(gè)小欄目，小欄目還可以分成若干個(gè)更小的欄目。6切合主題的內(nèi)容任何網(wǎng)站都有自己的網(wǎng)站標(biāo)志，而且都力求自己的網(wǎng)站標(biāo)志與眾不同，一個(gè)好的網(wǎng)站標(biāo)志通常具有朗朗上口的名字和醒目的圖形特征。7網(wǎng)站交互欄目網(wǎng)站是一個(gè)開放的環(huán)境，除發(fā)布信息外，還有一個(gè)非常重要的功能就是收集用戶的信息，與用戶進(jìn)行交互，如賬號(hào)注冊(cè)、電子郵件、留言板、信息查詢等。8域名在Internet上發(fā)布的任何網(wǎng)站都有自己的域名，如中國(guó)知網(wǎng)的域名為“/”。網(wǎng)站的特征1.1.2網(wǎng)頁(yè)的組成元素任務(wù)1.1〓信息與信息技術(shù)網(wǎng)頁(yè)的組成元素含義文本文本是指網(wǎng)頁(yè)中敘述性的文字。圖像圖像是指網(wǎng)頁(yè)中插入的具有說(shuō)明性的圖片。GIF、JPEG、BMP、TIFF和PNG等格式的圖像文件動(dòng)畫在網(wǎng)頁(yè)中使用的動(dòng)畫主要有GIF和Flash兩種方式音頻網(wǎng)絡(luò)的音頻文件格式很多，常用的有MP3、MIDI、WAV等視頻常見(jiàn)的視頻文件格式有MP4和FLV新華網(wǎng)：/index.htm1.1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)任務(wù)1.1〓信息與信息技術(shù)靜態(tài)網(wǎng)頁(yè)：

靜態(tài)網(wǎng)頁(yè)使用HTML語(yǔ)言，每個(gè)網(wǎng)頁(yè)都有一個(gè)固定的URL（UniformResourceLocators，統(tǒng)一資源定位符），以.htm、.html、.shtml等常見(jiàn)形式為后綴。靜態(tài)網(wǎng)頁(yè)中包含文本、圖像、動(dòng)畫、音頻、視頻等網(wǎng)頁(yè)元素。靜態(tài)網(wǎng)頁(yè)的交互性較差，在功能方面有較大的限制。靜態(tài)網(wǎng)頁(yè)可以出現(xiàn)各種動(dòng)態(tài)的效果，如GIF格式的動(dòng)畫、Flash、滾動(dòng)字幕等，這些“動(dòng)態(tài)效果”只是視覺(jué)上的，與下面將要介紹的動(dòng)態(tài)網(wǎng)頁(yè)是不同的概念。1.1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)任務(wù)1.1〓信息與信息技術(shù)動(dòng)態(tài)網(wǎng)頁(yè)：

動(dòng)態(tài)網(wǎng)頁(yè)是指與靜態(tài)網(wǎng)頁(yè)相對(duì)的一種網(wǎng)頁(yè)技術(shù)，以.aspx、.asp、.jsp、.php、.pert、.cgi等形式為后綴。動(dòng)態(tài)網(wǎng)頁(yè)的顯示內(nèi)容可以隨著時(shí)間、環(huán)境或者數(shù)據(jù)庫(kù)操作的結(jié)果而發(fā)生改變，也可以與后臺(tái)數(shù)據(jù)庫(kù)交互，實(shí)現(xiàn)用戶注冊(cè)、登錄、聊天、留言等功能。動(dòng)態(tài)網(wǎng)頁(yè)具有以下特征交互性自動(dòng)更新針對(duì)性任務(wù)1.2〓網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言HTML簡(jiǎn)介HTML編輯環(huán)境文檔結(jié)構(gòu)HTML稱為超文本標(biāo)記語(yǔ)言。超文本指頁(yè)面內(nèi)可以包含圖片、鏈接、音樂(lè)、視頻等非文字的元素。標(biāo)記語(yǔ)言主要由標(biāo)簽屬性、標(biāo)簽以及元素構(gòu)成，網(wǎng)頁(yè)中包含的對(duì)象是由相應(yīng)HTML標(biāo)簽指示出來(lái)的。HTML不像其他語(yǔ)言一樣被編譯為指令，它只提供一些語(yǔ)法標(biāo)簽，后由瀏覽器編譯生成相應(yīng)的頁(yè)面。HTML代碼既可以在記事本中編寫，也可以在其他任何文本編輯器中編寫，但在保存時(shí)要保存為.html或.htm格式。HTML寫成的網(wǎng)頁(yè)文件只有通過(guò)瀏覽器才能進(jìn)行解析。HTML文檔是由一系列的元素和標(biāo)簽組成的。元素名不區(qū)分大小寫。HTML用標(biāo)簽來(lái)規(guī)定元素的屬性和它在文件中的位置，標(biāo)簽用“<標(biāo)簽名字屬性>”來(lái)表示，標(biāo)簽以“<>”開始，以“</>”結(jié)束。HTML文檔分為<head>（文檔頭）和<body>（文檔體）兩部分，在文檔頭中對(duì)文檔進(jìn)行了一些必要的定義，文檔體中是要顯示的各種文檔信息。任務(wù)1.2〓網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言實(shí)例1HTML文檔代碼運(yùn)行結(jié)果：代碼：任務(wù)1.2〓網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言<html></html>在文檔的外層，文檔中的所有文本和標(biāo)簽都包含其中，它表示該文檔是以HTML編寫的。<head></head>是HTML文檔的頭部標(biāo)簽，在瀏覽器窗口中，頭部信息是不被顯示在正文中的。在此標(biāo)簽中可以插入其他標(biāo)簽，用以說(shuō)明文件的標(biāo)題和整個(gè)文件的一些公共屬性。<title>和</title>是嵌套在<head>標(biāo)簽中的，標(biāo)簽之間的文本是文檔標(biāo)題，這些文本作為瀏覽器窗口的標(biāo)題欄內(nèi)容被顯示。<body></body>標(biāo)簽之間的文本是正文，正文中的內(nèi)容作為網(wǎng)頁(yè)內(nèi)容顯示在瀏覽器中。以上標(biāo)簽在文檔中都是唯一的，<head>標(biāo)簽和<body>標(biāo)簽是嵌套在<html>標(biāo)簽中的。解釋任務(wù)1.3〓網(wǎng)頁(yè)制作工具1.3.1網(wǎng)頁(yè)設(shè)計(jì)工具任務(wù)1.3〓網(wǎng)頁(yè)制作工具DreamweaverSublimeTextEditPlus任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)1.3〓網(wǎng)頁(yè)制作工具PhotoshopMockplusIllustrator1.3.2網(wǎng)頁(yè)美化工具任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)1.3〓網(wǎng)頁(yè)制作工具工作界面1.3.3

Dreamweaver工作環(huán)境任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)1.3〓網(wǎng)頁(yè)制作工具代碼視圖1.3.3Dreamweaver工作環(huán)境設(shè)計(jì)視圖拆分視圖任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)1.3〓網(wǎng)頁(yè)制作工具步驟1：打開軟件1.3.4Dreamweaver基本操作實(shí)例2新建和保存空白頁(yè)任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)1.3〓網(wǎng)頁(yè)制作工具步驟2：新建文檔1.3.4Dreamweaver基本操作任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)1.3〓網(wǎng)頁(yè)制作工具步驟3：保存網(wǎng)頁(yè)1.3.4Dreamweaver基本操作任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)1.3〓網(wǎng)頁(yè)制作工具步驟1：設(shè)置默認(rèn)瀏覽器1.3.4Dreamweaver基本操作實(shí)例3設(shè)置默認(rèn)瀏覽器及瀏覽網(wǎng)頁(yè)任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)1.3〓網(wǎng)頁(yè)制作工具步驟2：打開網(wǎng)頁(yè)1.3.4Dreamweaver基本操作任務(wù)1.3〓網(wǎng)頁(yè)制作工具任務(wù)1.3〓網(wǎng)頁(yè)制作工具步驟3保存并預(yù)覽網(wǎng)頁(yè)1.3.4Dreamweaver基本操作項(xiàng)目小結(jié)本項(xiàng)目主要介紹了網(wǎng)頁(yè)的基礎(chǔ)知識(shí),具體內(nèi)容如下。網(wǎng)頁(yè)基礎(chǔ)知識(shí):介紹了網(wǎng)頁(yè)與網(wǎng)站的概念、