一網(wǎng)頁設(shè)計基礎(chǔ)知識ppt課件

1、一一.網(wǎng)頁設(shè)計根底知識網(wǎng)頁設(shè)計根底知識一一. .網(wǎng)頁設(shè)計根底知識網(wǎng)頁設(shè)計根底知識 第一章 初識Dreamweaver CS3 1.網(wǎng)頁技術(shù)概述 2.網(wǎng)頁制造相關(guān)工具 3.DreamweaverDW一一. .網(wǎng)頁設(shè)計根底知識網(wǎng)頁設(shè)計根底知識 網(wǎng)址URL一致資源定位器 網(wǎng)頁：Web頁 網(wǎng)站 搜索引擎：百度、谷歌1.1.網(wǎng)頁設(shè)計概述網(wǎng)頁設(shè)計概述網(wǎng)站建站技術(shù)從技術(shù)上大體上分為兩類：靜態(tài)網(wǎng)頁技術(shù)和動態(tài)網(wǎng)頁技術(shù)1靜態(tài)網(wǎng)頁技術(shù)靜態(tài)網(wǎng)頁是指客戶端閱讀器發(fā)送懇求給web效力器，服務(wù)器查找需求的超文本文件不加處置直接前往給客戶端，運轉(zhuǎn)在客戶端的頁面是事先已制造完成存放在服務(wù)器上的網(wǎng)頁。靜態(tài)網(wǎng)頁往往只用來存放無需用

2、戶參與，只需求發(fā)布的靜態(tài)文本內(nèi)容。 直接可以翻開的頁面1.1.網(wǎng)頁設(shè)計概述網(wǎng)頁設(shè)計概述制造靜態(tài)網(wǎng)頁主要運用HTML言語，配合客戶端腳本言語Javascript也能產(chǎn)生豐富的動態(tài)效果。 HTML超文本標(biāo)識言語) 閱讀器所看到的網(wǎng)頁，主要是由HTML言語寫成 的，經(jīng)過各種標(biāo)志，將影像、聲音、圖片、文 字等銜接顯示出來。閱讀器“解釋運轉(zhuǎn)代碼 一個HTML文件現(xiàn)實上是一個具有一些特殊代碼 的文本文件，它通知閱讀器如何表示此文件。通 常，靜態(tài)網(wǎng)頁文件以*.html或*.htm為后綴名。如何經(jīng)過閱讀器查看HTML源代碼？1.1.網(wǎng)頁設(shè)計概述網(wǎng)頁設(shè)計概述2動態(tài)網(wǎng)頁技術(shù)根據(jù)程序站點運轉(zhuǎn)地點的不同，又分為客戶端

3、動態(tài)技術(shù)和效力器端動態(tài)技術(shù)?？蛻舳藙討B(tài)網(wǎng)頁技術(shù)不需求與效力器交互，實現(xiàn)動態(tài)功能的代碼往往采用腳本言語方式直接嵌在網(wǎng)頁中，效力器發(fā)送給客戶后，網(wǎng)頁在客戶端閱讀器直接響運用戶的動作，有些作用需求閱讀器安裝組件插件支持。 動態(tài)效果 常見的客戶端動態(tài)技術(shù)：Javascript、JavaApplet、DHTML、ActiveX、Flash、VRML多媒體網(wǎng)頁，但并不是真正的動態(tài)網(wǎng)頁1.1.網(wǎng)頁設(shè)計概述網(wǎng)頁設(shè)計概述效力器端動態(tài)技術(shù)需求效力器和客戶端的共同參與，客戶經(jīng)過閱讀器發(fā)出頁面懇求后，效力器根據(jù)懇求的參數(shù)運轉(zhuǎn)效力器端程序產(chǎn)生結(jié)果頁面再前往給客戶端。普通涉及到數(shù)據(jù)庫。 典型的效力器端動態(tài)技術(shù)：ASP、A

4、SP.NET、PHP、JSP、CGI 平常講的動態(tài)網(wǎng)頁普通指效力器端動態(tài)技術(shù)。動態(tài)網(wǎng)頁會在后續(xù)課程數(shù)據(jù)庫技術(shù)和動態(tài)網(wǎng)頁制造講述。書本P20-P211.1.網(wǎng)頁設(shè)計概述網(wǎng)頁設(shè)計概述學(xué)習(xí)制造網(wǎng)頁應(yīng)該學(xué)習(xí)的技術(shù)知識 -網(wǎng)頁的骨架是HTML、XML、XHTML -加強(qiáng)網(wǎng)頁修飾和添加網(wǎng)頁個性的CSS -網(wǎng)頁的客戶端編程以加強(qiáng)網(wǎng)頁的特殊顯示效果、 與效力器更好溝通的Javascript或VBScript -網(wǎng)頁的效力器端編程加強(qiáng)網(wǎng)頁的交互功能 -圖形圖像的制造(如Photoshop)、動畫制造如 Flash等其它相關(guān)知識1.1.網(wǎng)頁設(shè)計概述網(wǎng)頁設(shè)計概述新的運用及技術(shù)： AjaxJquery、Spry：Go

5、ogle地圖 網(wǎng)格、云計算 富媒體Rich Media Adobe FlexFlash：做什么用的？ Microsoft Silverlight：qq空間 Google API他知道Flash Catalyst是什么嗎？ 1.1.網(wǎng)頁設(shè)計概述網(wǎng)頁設(shè)計概述做網(wǎng)頁需求用到多種軟件、不同類型的電腦知識，一定程度上需求學(xué)習(xí)多方面的電腦知識。留意以下方面的內(nèi)容：靈敏運用各種已有資源。網(wǎng)頁知識繁雜，并不是一切知識都能學(xué)會，也并不是一切知識都一定能要去學(xué)，適當(dāng)學(xué)會“反復(fù)運用資源，靈敏運用Baidu和Google。但運用已有資源，自創(chuàng)其它網(wǎng)頁并不是要去抄襲。 1.1.網(wǎng)頁設(shè)計概述網(wǎng)頁設(shè)計概述本課程內(nèi)容多而且比

6、較雜，在做網(wǎng)頁時并不是一切內(nèi)容都要用上。有些內(nèi)容是“獨立的，能夠并不“適用，但是當(dāng)需求某一功能時他才會發(fā)現(xiàn)其有用。課時有限，有些例子需求大家課后花時間練習(xí)。有用的代碼及例子本人要留意保管，方便以后運用。 2.2.網(wǎng)頁制造相關(guān)工具網(wǎng)頁制造相關(guān)工具經(jīng)常運用的網(wǎng)頁制造工具： 1.Adobe(Macromedia)“網(wǎng)頁制造三劍客 Dreamweaver MX/MX 2019/8/CS3/CS4 Flash MX/MX 2019/8/CS3/CS4 Fireworks MX/MX 2019/8/CS3/CS4 2.Microsoft Frontpage/Expression 2.0 3.Adobe P

7、hotoshop 7/CS/CS2/CS3/CS4 Adobe收買Macromedia，2019.3推出了多媒體整合套件Adobe CS3。DW和Frontpage為“所見即所得工具，不懂HTML言語也可以制造專業(yè)的網(wǎng)頁,圖形化界面操作，自動生成相應(yīng)代碼。2.2.網(wǎng)頁制造相關(guān)工具網(wǎng)頁制造相關(guān)工具本課程主要講解運用Adobe Dreamweaver CS3制造靜態(tài)網(wǎng)站。DW最新版本為Dreamweaver CS4，其根本功能跟Dreamweaver 8/CS3類似，CS3/CS4跟8的最大區(qū)別主要為：界面“顏色不一樣、多了Ajax框架、CS3/4和Photoshop的整合、CSS款式表的加強(qiáng)。2

8、.2.網(wǎng)頁制造相關(guān)工具網(wǎng)頁制造相關(guān)工具需求留意的問題： Fireworks的強(qiáng)項是Web處置，引薦在圖像處置的時候運用Photoshop，在進(jìn)展網(wǎng)頁處置運用Fireworks，但是并不是一切版本的CS4都有FW安裝組件，需求另外進(jìn)展安裝。3.Dreamweaver CS33.Dreamweaver CS3 Adobe的軟件普通都要進(jìn)展激活處置，所以進(jìn)展Adobe軟件安裝的時候要詳細(xì)知道激活及注冊過程，以防出現(xiàn)問題。 1./軟件/設(shè)計工具/ 也可以下載8/CS3/CS4的綠色版本 2.運用教師提供的Adobe_CS3_LJF_3in1.iso 虛擬光驅(qū)加載ISO文

9、件進(jìn)展安裝，序列號恣意填寫 3.確?！癋LEXnet Licensing Service效力開啟 即確?！癋NPLicensingService這一效力在后臺運轉(zhuǎn)3.Dreamweaver CS33.Dreamweaver CS3Dreamweaver操作界面 1.菜單欄 2.文檔窗口 3.屬性面板:PS、office屬性在上方，DW在下方 4.插入欄：對象面板，快速插入各種網(wǎng)頁元素 可以設(shè)定該工具條界面為制表符方式或者菜單方式 5.文檔工具欄 6.面板組：浮動面板，實現(xiàn)特定的功能 設(shè)計面板、代碼面板、運用程序面板、文件面板等留意：設(shè)計視圖和代碼視圖3.Dreamweaver CS33.Dream