《網(wǎng)頁設(shè)計與制作（活頁式）》 課件 項目1 網(wǎng)頁設(shè)計與制作_第1頁
《網(wǎng)頁設(shè)計與制作（活頁式）》 課件 項目1 網(wǎng)頁設(shè)計與制作_第2頁
《網(wǎng)頁設(shè)計與制作（活頁式）》 課件 項目1 網(wǎng)頁設(shè)計與制作_第3頁
《網(wǎng)頁設(shè)計與制作（活頁式）》 課件 項目1 網(wǎng)頁設(shè)計與制作_第4頁
《網(wǎng)頁設(shè)計與制作（活頁式）》 課件 項目1 網(wǎng)頁設(shè)計與制作_第5頁
已閱讀5頁，還剩21頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

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

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

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

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

直觀的網(wǎng)站分類方法是按網(wǎng)站的主題進行分類。主題是網(wǎng)站的題材，它決定網(wǎng)站的內(nèi)容，體現(xiàn)網(wǎng)站代表的形象。一般常見的題材有公司企業(yè)、休閑娛樂、教育培訓(xùn)、電腦網(wǎng)絡(luò)、文化藝術(shù)、交通旅游等，而每一個題材又可以繼續(xù)劃分。1.1.1認識網(wǎng)頁與網(wǎng)站任務(wù)1.1〓信息與信息技術(shù)序號特征含義1網(wǎng)頁相互鏈接網(wǎng)站是由多個網(wǎng)頁相互鏈接組成的，建設(shè)網(wǎng)站就是制作網(wǎng)頁。在所有的網(wǎng)頁中，網(wǎng)站的主頁是整個網(wǎng)站中最重要的。2網(wǎng)站標(biāo)志任何網(wǎng)站都有自己的網(wǎng)站標(biāo)志，而且都力求自己的網(wǎng)站標(biāo)志與眾不同，一個好的網(wǎng)站標(biāo)志通常具有朗朗上口的名字和醒目的圖形特征。3風(fēng)格統(tǒng)一網(wǎng)站雖然有很多網(wǎng)頁，但是作為一個整體來講，它必須有一個統(tǒng)一的風(fēng)格。主頁是網(wǎng)站重要的網(wǎng)頁，它的風(fēng)格往往決定了整個網(wǎng)站的風(fēng)格。4網(wǎng)頁導(dǎo)航網(wǎng)頁導(dǎo)航是一個網(wǎng)站非常重要的組成部分，也是衡量一個網(wǎng)站是否優(yōu)秀的主要標(biāo)準(zhǔn)。便捷的網(wǎng)頁導(dǎo)航能夠幫助用戶以較快的速度找到自己需要的網(wǎng)頁。網(wǎng)頁導(dǎo)航常用的實現(xiàn)方法是導(dǎo)航條。網(wǎng)站的特征1.1.1認識網(wǎng)頁與網(wǎng)站任務(wù)1.1〓信息與信息技術(shù)序號特征含義5分層的欄目組織網(wǎng)站的層次型組織方法是將網(wǎng)站的內(nèi)容分成若干個大欄目，再將大欄目分成若干個小欄目，小欄目還可以分成若干個更小的欄目。6切合主題的內(nèi)容任何網(wǎng)站都有自己的網(wǎng)站標(biāo)志，而且都力求自己的網(wǎng)站標(biāo)志與眾不同，一個好的網(wǎng)站標(biāo)志通常具有朗朗上口的名字和醒目的圖形特征。7網(wǎng)站交互欄目網(wǎng)站是一個開放的環(huán)境，除發(fā)布信息外，還有一個非常重要的功能就是收集用戶的信息，與用戶進行交互，如賬號注冊、電子郵件、留言板、信息查詢等。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語言，每個網(wǎng)頁都有一個固定的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)容可以隨著時間、環(huán)境或者數(shù)據(jù)庫操作的結(jié)果而發(fā)生改變，也可以與后臺數(shù)據(jù)庫交互，實現(xiàn)用戶注冊、登錄、聊天、留言等功能。動態(tài)網(wǎng)頁具有以下特征交互性自動更新針對性任務(wù)1.2〓網(wǎng)頁設(shè)計語言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代碼既可以在記事本中編寫，也可以在其他任何文本編輯器中編寫，但在保存時要保存為.html或.htm格式。HTML寫成的網(wǎng)頁文件只有通過瀏覽器才能進行解析。HTML文檔是由一系列的元素和標(biāo)簽組成的。元素名不區(qū)分大小寫。HTML用標(biāo)簽來規(guī)定元素的屬性和它在文件中的位置，標(biāo)簽用“<標(biāo)簽名字屬性>”來表示，標(biāo)簽以“<>”開始，以“</>”結(jié)束。HTML文檔分為<head>（文檔頭）和<body>（文檔體）兩部分，在文檔頭中對文檔進行了一些必要的定義，文檔體中是要顯示的各種文檔信息。任務(wù)1.2〓網(wǎng)頁設(shè)計語言實例1HTML文檔代碼運行結(jié)果：代碼：任務(wù)1.2〓網(wǎng)頁設(shè)計語言<html></html>在文檔的外層，文檔中的所有文本和標(biāo)簽都包含其中，它表示該文檔是以HTML編寫的。<head></head>是HTML文檔的頭部標(biāo)簽，在瀏覽器窗口中，頭部信息是不被顯示在正文中的。在此標(biāo)簽中可以插入其他標(biāo)簽，用以說明文件的標(biāo)題和整個文件的一些公共屬性。<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è)計工具任務(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è)計視圖拆分視圖任務(wù)1.3〓網(wǎng)頁制作工具任務(wù)1.3〓網(wǎng)頁制作工具步驟1：打開軟件1.3.4Dreamweaver基本操作實例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è)置默認瀏覽器1.3.4Dreamweaver基本操作實例3設(shè)置默認瀏覽器及瀏覽網(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基本操作項目小結(jié)本項目主要介紹了網(wǎng)頁的基礎(chǔ)知識,具體內(nèi)容如下。網(wǎng)頁基礎(chǔ)知識:介紹了網(wǎng)頁與網(wǎng)站的概念、

溫馨提示

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

評論

0/150

提交評論