web概念課件1.2 web前端設(shè)計(jì)基礎(chǔ)

第1章Web概述

1.2web前端設(shè)計(jì)基礎(chǔ)

1.2.1web前端設(shè)計(jì)工具1.純文本編輯軟件使用任何一款純文本編輯軟件均可進(jìn)行web靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)，因此本書(shū)不對(duì)設(shè)計(jì)工具做限定。Windows自帶的記事本軟件不需要安裝，可以查看和編輯網(wǎng)頁(yè)源代碼，用于創(chuàng)建簡(jiǎn)單的網(wǎng)頁(yè)。1.2.1web前端設(shè)計(jì)工具例1-1第一個(gè)靜態(tài)網(wǎng)頁(yè)。示例代碼（1-1.html）如下。1.2.1web前端設(shè)計(jì)工具例1-1的網(wǎng)頁(yè)采用Windows記事本設(shè)計(jì)的界面如圖1.2所示1.2.1web前端設(shè)計(jì)工具2.可視化網(wǎng)頁(yè)編輯軟件一些專門(mén)的網(wǎng)頁(yè)設(shè)計(jì)工具，提供友好的操作界面、高效的編輯提示等，可以提高設(shè)計(jì)效率。AdobeDreamweaver是一款所見(jiàn)即所得的網(wǎng)頁(yè)編輯器，可以實(shí)現(xiàn)網(wǎng)頁(yè)開(kāi)發(fā)與網(wǎng)站管理的功能，提供可視化設(shè)計(jì)和代碼編輯操作，使用廣泛。1.2.1web前端設(shè)計(jì)工具例1-1的網(wǎng)頁(yè)采用AdobeDreamweaver設(shè)計(jì)的界面如圖1.3所示。1.2.2web網(wǎng)頁(yè)運(yùn)行環(huán)境網(wǎng)頁(yè)設(shè)計(jì)完成后，需要運(yùn)行以查看效果。Web系統(tǒng)中網(wǎng)頁(yè)都放在服務(wù)器上。遠(yuǎn)程客戶端瀏覽器向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器將網(wǎng)頁(yè)結(jié)果傳送到客戶端瀏覽器上展示。靜態(tài)網(wǎng)頁(yè)是不需要服務(wù)器運(yùn)行而直接傳送到客戶端瀏覽器上展示的，所以web前端網(wǎng)頁(yè)設(shè)計(jì)時(shí)，可以不配置服務(wù)器環(huán)境，而是直接在本地計(jì)算機(jī)瀏覽器中運(yùn)行網(wǎng)頁(yè)文檔，即可看到網(wǎng)頁(yè)效果。1.2.2web網(wǎng)頁(yè)運(yùn)行環(huán)境例1-1的網(wǎng)頁(yè)運(yùn)行效果如圖1.4所示。1.2.2web網(wǎng)頁(yè)運(yùn)行環(huán)境當(dāng)然，如果網(wǎng)頁(yè)中使用了AJAX技術(shù)和服務(wù)器進(jìn)行數(shù)據(jù)交互，則還是需要配置服務(wù)器環(huán)境，才能實(shí)現(xiàn)客戶機(jī)與服務(wù)器的數(shù)據(jù)接收和發(fā)送。1.2.2web網(wǎng)頁(yè)運(yùn)行環(huán)境HTML5和CSS3中新增了一些標(biāo)記和樣式。在網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候，需要考慮瀏覽器內(nèi)核及瀏覽器版本差異的影響因素。有的樣式設(shè)置，在不同的瀏覽器和同一瀏覽器不同版本中顯示效果不一樣，甚至有的瀏覽器不支持該樣式設(shè)置。有的樣式，在不同內(nèi)核的瀏覽器中，樣式的名稱不同。例如，background-clip樣式，在部分內(nèi)核為webkit的瀏覽器中支持，樣式名稱為-webkit-background-clip。1.2.2web網(wǎng)頁(yè)運(yùn)行環(huán)境本書(shū)介紹的是主流瀏覽器支持的樣式及樣式值。若在