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

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

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

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

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

網(wǎng)站有很多不同的分類方法，例如，按照其使用的技術(shù)可分為靜態(tài)網(wǎ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)站和音樂欣賞網(wǎng)站等。

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

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

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

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