機(jī)械工業(yè)出版社CHINAMACHINEPRESS任務(wù)1認(rèn)識(shí)網(wǎng)頁(yè)的設(shè)計(jì)與策劃HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)教程ContentsPage目錄頁(yè)123網(wǎng)頁(yè)和網(wǎng)站網(wǎng)站開(kāi)發(fā)流程常用網(wǎng)頁(yè)制作軟件4項(xiàng)目實(shí)戰(zhàn)：歷代優(yōu)秀墨竹作品學(xué)習(xí)頁(yè)面設(shè)計(jì)策劃網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)教程5習(xí)題與項(xiàng)目實(shí)踐ContentsPage過(guò)渡頁(yè)網(wǎng)頁(yè)和網(wǎng)站11.1網(wǎng)頁(yè)和網(wǎng)站的概念

網(wǎng)頁(yè)（WebPage）是實(shí)際上是一個(gè)文件，網(wǎng)頁(yè)里可以有文字、圖像、聲音及視頻信息等。網(wǎng)頁(yè)可以看成是一個(gè)單一體，是網(wǎng)站的一個(gè)元素。網(wǎng)站(Web

Site)是一個(gè)存放網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體。網(wǎng)

頁(yè)網(wǎng)站1.1網(wǎng)頁(yè)和網(wǎng)站的概念主頁(yè)：用戶進(jìn)入網(wǎng)站時(shí)看到的第一個(gè)頁(yè)面就是主頁(yè)（homepage）。內(nèi)頁(yè)：通過(guò)主頁(yè)中的超級(jí)鏈接，打開(kāi)的網(wǎng)頁(yè)就是內(nèi)頁(yè)。依據(jù)網(wǎng)頁(yè)的位置，可以分為主頁(yè)和內(nèi)頁(yè)靜態(tài)網(wǎng)頁(yè)：是指使用HTML語(yǔ)言編寫(xiě)的網(wǎng)頁(yè)，其制作簡(jiǎn)單易學(xué)，但缺乏靈活性，在瀏覽網(wǎng)頁(yè)時(shí)瀏覽者和服務(wù)器不發(fā)生交互。動(dòng)態(tài)網(wǎng)頁(yè)：是指使用ASP、PHP、JSP、ASP.NET等程序生成的網(wǎng)頁(yè)，可以與瀏覽者進(jìn)行交互，也稱為交互式網(wǎng)頁(yè)。依據(jù)表現(xiàn)形式，可以分為靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)1.1網(wǎng)頁(yè)和網(wǎng)站的概念

網(wǎng)頁(yè)一般情況下一個(gè)網(wǎng)頁(yè)都有Logo徽標(biāo)、導(dǎo)航條、Banner、內(nèi)容板塊、版尾版權(quán)板塊等。Logo徽標(biāo)Logo徽標(biāo)導(dǎo)航Banner廣告條內(nèi)容板塊1.1網(wǎng)頁(yè)和網(wǎng)站的概念版尾版權(quán)信息網(wǎng)站內(nèi)容1.2網(wǎng)頁(yè)的常用技術(shù)HTML、CSS、JavaScript是網(wǎng)頁(yè)設(shè)計(jì)最核心也是最基礎(chǔ)的技術(shù)。2.靜態(tài)網(wǎng)頁(yè)技術(shù)結(jié)構(gòu)HTML的主要功能是定義網(wǎng)頁(yè)的基本結(jié)構(gòu)外觀CSS主要功能是定義網(wǎng)頁(yè)的外觀行為JavaScript腳本的主要功能是定義網(wǎng)頁(yè)的行為。2.網(wǎng)頁(yè)的常用技術(shù)HTMLHTML(HyperTextMarkupLanguage，超文本標(biāo)記語(yǔ)言）HTML是由W3C（WorldWideWebConsortium，萬(wàn)維網(wǎng)聯(lián)盟）所提出，主要的用途是制作網(wǎng)頁(yè)。HTML文件是由“標(biāo)簽”（tag）和“屬性”（attribute）所組成，統(tǒng)稱為“元素”（element），瀏覽器只要看到HTML源代碼，就能解析成網(wǎng)頁(yè)。目前，最新的HTML文件是HTML5。1.2網(wǎng)頁(yè)的常用技術(shù)CSSCSS（CascadingStyleSheets，層疊樣式表）CSS也是由W3C所提出，主要用途是控制網(wǎng)頁(yè)的外觀，也就是定義網(wǎng)頁(yè)的編排、顯示、格式化及特殊效果。W3C鼓勵(lì)網(wǎng)頁(yè)設(shè)計(jì)人員使用HTML來(lái)定義網(wǎng)頁(yè)的結(jié)構(gòu)，而使用CSS來(lái)控制網(wǎng)頁(yè)的外觀，將兩者的功能明確，語(yǔ)義更加清晰。目前，最新的CSS版本是CSS3。1.2網(wǎng)頁(yè)的常用技術(shù)瀏覽器端script瀏覽器端script的主要功能是定義網(wǎng)頁(yè)的行為。常用的有VBscript和JavaScript，其中JavaScript為主流腳本。經(jīng)常使用JavaScript腳本來(lái)嵌入動(dòng)態(tài)文本、對(duì)瀏覽器事件做出響應(yīng)、讀寫(xiě)HTML元素、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)，以及檢測(cè)訪客的瀏覽器信息等。1.2網(wǎng)頁(yè)的常用技術(shù)PHP、JSP、ASP、ASP.NET是目前主流動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)。2.動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)

PHP是當(dāng)今Internet上最為火熱的腳本語(yǔ)言，其語(yǔ)法借鑒了C、Java、PERL等語(yǔ)言，但只需要很少的編程知識(shí)你就能使用PHP建立一個(gè)真正交互的Web站點(diǎn)。

PHP

即HypertextPreprocessor（超文本預(yù)處理器）

JSP是即JavaServerPages（JAVA服務(wù)器頁(yè)面），它是由SunMicrosystem公司于1999年6月推出的新技術(shù)，是基于JavaServlet以及整個(gè)Java體系的Web開(kāi)發(fā)技術(shù)。

JSP即JavaServerPages（JAVA服務(wù)器頁(yè)面）1.2網(wǎng)頁(yè)的常用技術(shù)ASP是MicroSoft公司開(kāi)發(fā)的服務(wù)器端腳本環(huán)境，可用來(lái)創(chuàng)建動(dòng)態(tài)交互式網(wǎng)頁(yè)并建立強(qiáng)大的web應(yīng)用程序。當(dāng)服務(wù)器收到對(duì)ASP文件的請(qǐng)求時(shí)，它會(huì)處理包含在用于構(gòu)建發(fā)送給瀏覽器的HTML（HyperTextMarkupLanguage，超文本置標(biāo)語(yǔ)言）網(wǎng)頁(yè)文件中的服務(wù)器端腳本代碼。除服務(wù)器端腳本代碼外，ASP文件也可以包含文本、HTML（包括相關(guān)的客戶端腳本）和com組件調(diào)用。

ASP

即ActiveServerPages（動(dòng)態(tài)服務(wù)器網(wǎng)頁(yè)）

ASP.NET是微軟公司推出的新一代腳本語(yǔ)言。ASP.NET基于.NETFramework的Web開(kāi)發(fā)平臺(tái)，不但吸收了ASP以前版本的最大優(yōu)點(diǎn)并參照J(rèn)ava、VB語(yǔ)言的開(kāi)發(fā)優(yōu)勢(shì)加入了許多新的特色，同時(shí)也修正了以前的ASP版本的運(yùn)行錯(cuò)誤。。

ASP.NET又稱為ASP+ContentsPage過(guò)渡頁(yè)網(wǎng)站開(kāi)發(fā)流程2網(wǎng)站開(kāi)發(fā)流程1234前期策劃與組織網(wǎng)頁(yè)效果圖的設(shè)計(jì)制作網(wǎng)頁(yè)制作網(wǎng)站測(cè)試與發(fā)布策劃與組織具體內(nèi)容2.1前期策劃與組織了解客戶需求，客戶評(píng)估網(wǎng)站功能設(shè)計(jì)網(wǎng)站結(jié)構(gòu)規(guī)劃頁(yè)面設(shè)計(jì)內(nèi)容編輯撰寫(xiě)“網(wǎng)站功能需求分析報(bào)告”提供網(wǎng)站系統(tǒng)硬件、軟件配置方案整理相關(guān)技術(shù)資料和文字資料確定網(wǎng)頁(yè)的主題和風(fēng)格，規(guī)劃好網(wǎng)站欄目并確定網(wǎng)站的色彩、網(wǎng)頁(yè)版面布局等。

網(wǎng)頁(yè)效果圖的設(shè)計(jì)通常會(huì)使用圖像設(shè)計(jì)軟件和一些其他的軟件，應(yīng)用較為廣泛的主要是Adode公司出品的Photoshop。2.2網(wǎng)頁(yè)效果圖的設(shè)計(jì)制作網(wǎng)頁(yè)效果圖2.3網(wǎng)頁(yè)制作HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開(kāi)發(fā)IDE2.3網(wǎng)頁(yè)制作VisualStudioCode工具2.4網(wǎng)站測(cè)試與發(fā)布

據(jù)瀏覽器的種類、客戶端的要求以及網(wǎng)站的大小進(jìn)行站點(diǎn)測(cè)試，通常是將站點(diǎn)移到一個(gè)模擬調(diào)試服務(wù)器上進(jìn)行測(cè)試或編輯。檢查鏈接功能是否可用。為了使頁(yè)面對(duì)不支持的標(biāo)簽、樣式、插件等在瀏覽器中能兼容且顯示正常，需要進(jìn)行瀏覽器兼容性的檢查。ContentsPage過(guò)渡頁(yè)常用網(wǎng)頁(yè)制作軟件31.網(wǎng)頁(yè)圖形圖像處理工具網(wǎng)頁(yè)圖形圖像處理photoshop2.3網(wǎng)頁(yè)制作HBuilder是DCloud（數(shù)字天堂）推出的一款支持HTML5的Web開(kāi)發(fā)IDE2.3網(wǎng)頁(yè)制作VisualStudioCode工具ContentsPage過(guò)渡頁(yè)初次體驗(yàn)網(wǎng)頁(yè)編程41.網(wǎng)頁(yè)圖形圖像處理工具編寫(xiě)第一個(gè)HTML5頁(yè)面<!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <title>第一個(gè)HTML5頁(yè)面</title> </head> <body> <h3>開(kāi)啟網(wǎng)頁(yè)設(shè)計(jì)與制作之旅!</h3> </body></html>1.網(wǎng)頁(yè)圖形圖像處理工具編寫(xiě)第一個(gè)HTML+CSS頁(yè)面舉例演示ContentsPage過(guò)渡頁(yè)項(xiàng)目實(shí)戰(zhàn)5歷代優(yōu)秀墨竹作品學(xué)習(xí)頁(yè)面設(shè)計(jì)策劃1.網(wǎng)站開(kāi)發(fā)需求

歷代優(yōu)秀墨竹作品學(xué)習(xí)頁(yè)面主要包含賞析視頻、技法分享、名家介紹、傳統(tǒng)墨竹畫(huà)源流析、作品賞析、名家作品展示等。其中，主頁(yè)要在banner區(qū)域設(shè)置名家作品的展播；設(shè)置傳統(tǒng)墨竹畫(huà)源流析的內(nèi)容展示；設(shè)置作品賞析的欄目以及優(yōu)秀作品展示。2.

繪制草圖網(wǎng)站logo網(wǎng)站導(dǎo)航（關(guān)于我們、賞析視頻、技法分享、名家介紹）網(wǎng)站banner區(qū)域（名家作品的展示）傳統(tǒng)墨竹畫(huà)源流析標(biāo)題書(shū)籍展示畫(huà)源流析列表作品賞析標(biāo)題墨竹圖片展示展示作品標(biāo)題墨竹圖片展示展示作品標(biāo)題作品賞析內(nèi)容文字作品賞析內(nèi)容文字墨竹圖片展示展示作品標(biāo)題墨竹圖片展示展示作品標(biāo)題作品賞析內(nèi)容文字作品賞析內(nèi)容文字作品展示圖片圖片圖片圖片圖片圖片版權(quán)信息ContentsPage過(guò)渡頁(yè)習(xí)題與項(xiàng)目實(shí)踐5理論測(cè)試（1）HTML是一種頁(yè)面（

）型的語(yǔ)言。A．程序設(shè)計(jì)B．執(zhí)行C．編譯D．描述（2）下面（

）不是動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)。A．PHPB．JSPC．ASP.NETD．CSS2實(shí)踐項(xiàng)目：網(wǎng)站策劃與草圖設(shè)計(jì)

藍(lán)天校園工程是檢察機(jī)關(guān)推廣的關(guān)愛(ài)青少年系列項(xiàng)目之一，旨在用法律護(hù)航，打造校園一片蔚藍(lán)的天空，引導(dǎo)廣大青少年樹(shù)立正確的社會(huì)主義核心價(jià)值觀，為在校青少