網(wǎng)頁(yè)設(shè)計(jì)的使用.ppt

網(wǎng)頁(yè)設(shè)計(jì)的使用,Dreamweaver8,目錄,1.網(wǎng)頁(yè)設(shè)計(jì)的界面簡(jiǎn)介2.網(wǎng)頁(yè)設(shè)計(jì)文件屬性3.網(wǎng)頁(yè)設(shè)計(jì)的站點(diǎn)設(shè)置4.網(wǎng)頁(yè)設(shè)計(jì)的靜態(tài)1與動(dòng)態(tài)5.網(wǎng)頁(yè)設(shè)計(jì)的背景音樂（即透明效果）6.網(wǎng)頁(yè)設(shè)計(jì)的框架7.CSS樣式的使用08.網(wǎng)頁(yè)設(shè)計(jì)的后期制作,1.網(wǎng)頁(yè)設(shè)計(jì)的界面簡(jiǎn)介,dreamweaver8的工作界面簡(jiǎn)潔、好用，具體由：標(biāo)題欄、菜單欄、常用工具欄、工作區(qū)、屬性欄和高級(jí)工具欄組成。各個(gè)工具都分工明確，使我們做網(wǎng)頁(yè)更加輕松,2.網(wǎng)頁(yè)設(shè)計(jì)文件屬性,1.html網(wǎng)頁(yè)中常用的超文本標(biāo)記文件、“超文本”就是指頁(yè)面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。超文本標(biāo)記語(yǔ)言的結(jié)構(gòu)包括頭部分（Head）、和主體部分（Body），其中頭部（head）提供關(guān)于網(wǎng)頁(yè)的信息，主體（body）部分提供網(wǎng)頁(yè)的具體內(nèi)容,1.HTML,2.網(wǎng)頁(yè)設(shè)計(jì)文件屬性,ASP是ActiveServerPage的縮寫，意為“動(dòng)態(tài)服務(wù)器頁(yè)面”ASP的網(wǎng)頁(yè)文件的格式是.asp，現(xiàn)在常用于各種動(dòng)態(tài)網(wǎng)站中。ASP網(wǎng)頁(yè)可以包含HTML標(biāo)記、普通文本、腳本命令以及COM組件等。利用ASP可以向網(wǎng)頁(yè)中添加交互式內(nèi)容（如在線表單），也可以創(chuàng)建使用HTML網(wǎng)頁(yè)作為用戶界面的web應(yīng)用程序,2.ASP,總結(jié),html可以用來制作靜態(tài)的網(wǎng)頁(yè)，可以包含圖片、文字、音樂、鏈接等元素ASP可以用來制作動(dòng)態(tài)網(wǎng)頁(yè)包含了html、腳本命令、COM組件ASP比html強(qiáng)大,3.網(wǎng)頁(yè)設(shè)計(jì)之站點(diǎn)設(shè)置,站點(diǎn)包含了我們所有文件也是上傳服務(wù)器的路徑站點(diǎn)-新建站點(diǎn)-高級(jí)-本地信息-接下來自己設(shè)置建議：站點(diǎn)名稱最好和網(wǎng)頁(yè)的文檔名一樣,4.網(wǎng)頁(yè)設(shè)計(jì)之動(dòng)態(tài)與靜態(tài),動(dòng)態(tài)網(wǎng)頁(yè)是指使用網(wǎng)頁(yè)腳本語(yǔ)言，比如php、asp、jsp等，通過腳本將網(wǎng)站內(nèi)容動(dòng)態(tài)存儲(chǔ)到數(shù)據(jù)庫(kù)，用戶訪問網(wǎng)站是通過讀取數(shù)據(jù)庫(kù)來動(dòng)態(tài)生成網(wǎng)頁(yè)的方法。網(wǎng)站上主要是一些框架基礎(chǔ)，網(wǎng)頁(yè)的內(nèi)容大都存儲(chǔ)在數(shù)據(jù)庫(kù)中。當(dāng)然可以利用一定的技術(shù)使動(dòng)態(tài)網(wǎng)頁(yè)內(nèi)容生成靜態(tài)網(wǎng)頁(yè)，這樣有利于網(wǎng)站的優(yōu)化，方便搜索引擎搜索。,動(dòng)態(tài),4.網(wǎng)頁(yè)設(shè)計(jì)之動(dòng)態(tài)與靜態(tài),靜態(tài)網(wǎng)頁(yè)是指不應(yīng)用程序而直接或間接制作成html的網(wǎng)頁(yè)，這種網(wǎng)頁(yè)的內(nèi)容是固定的，修改和更新都必須要通過專用的網(wǎng)頁(yè)制作工具，Dreamweaver、而且只要修改了網(wǎng)頁(yè)中的一個(gè)字符或一個(gè)圖片都要重新上傳一次覆蓋原來的頁(yè)面,靜態(tài),5.網(wǎng)頁(yè)設(shè)計(jì)的背景音樂（透明）,通常我們?cè)谝恍┚W(wǎng)站上，會(huì)有一些音樂出來，但是我們看不到他的播放控制是在哪里，或者說他根本就沒有播放控制，思考：他這個(gè)是怎么制作的看例題透明動(dòng)畫！桌面的透明效果,5.網(wǎng)頁(yè)設(shè)計(jì)的背景音樂（透明）,這個(gè)就是我們今天講的這個(gè)透明背景他的代碼是embedsrc=005.swfwidth=800height=184quality=high,5.網(wǎng)頁(yè)設(shè)計(jì)的背景音樂（透明）,這個(gè)的制作步驟是：插入一個(gè)表格-設(shè)置一個(gè)背景-把我們的flash插入到我們表格里-選中flash-切換到代碼視圖-找到他的代碼中的,5.網(wǎng)頁(yè)設(shè)計(jì)的背景音樂（透明）,找到在這個(gè)的后面回車下插入代碼然后再找到,5.網(wǎng)頁(yè)設(shè)計(jì)的背景音樂（透明）,在184后面空格一下輸入wmode=transparentwmode=transparent,5.網(wǎng)頁(yè)設(shè)計(jì)的背景音樂（透明）,然后保存-預(yù)覽一下就好了這種辦法是一種復(fù)雜的方法，教一種簡(jiǎn)單的方法插入一個(gè)表格-設(shè)置一個(gè)背景-把我們的flash插入到我們表格里-選中flash-切換到代碼視圖-找到他的代碼中的,5.網(wǎng)頁(yè)設(shè)計(jì)的背景音樂（透明）,在我們的184前面插入wmode=transparentwmode=transparent保存預(yù)覽就行了,6.網(wǎng)頁(yè)設(shè)計(jì)之框架,框架分為框架集和浮動(dòng)框架2種，框架集適合做一些頁(yè)面不是很大很長(zhǎng)的網(wǎng)頁(yè)，他的高度和寬度都固定了，不好更改浮動(dòng)框架自由性提高了很多，適合很大很長(zhǎng)的頁(yè)面，浮動(dòng)框架的長(zhǎng)寬、大小都可以隨意更改,6.網(wǎng)頁(yè)設(shè)計(jì)之框架,框架集的頁(yè)面情況以及新建的類型有很多種，這里就只介紹一個(gè)上方固定，下方固定的框架,6.網(wǎng)頁(yè)設(shè)計(jì)之框架,這個(gè)框架集新建好了之后就是一個(gè)完整的框架了，這個(gè)框架分為四個(gè)頁(yè)面第一個(gè)為top.第二個(gè)是main.第三個(gè)是bott.第四個(gè)是index使我們的首頁(yè)更改大小的方法：窗口-選中了框架-在高級(jí)工具欄里面會(huì)出現(xiàn)一個(gè)框架-打開-選中框架的全部-切換到代碼-里面會(huì)有一個(gè)代碼framesetrows=80,*,80,6.網(wǎng)頁(yè)設(shè)計(jì)之框架,這個(gè)代碼表示我們的框架集上中下的高度，在當(dāng)中設(shè)置你想要的高度即可那我們的浮動(dòng)框架呢？怎么去設(shè)置？思考,6.網(wǎng)頁(yè)設(shè)計(jì)之框架,在我們的設(shè)計(jì)軟件里有兩種方法，第一種：在插入-HTML-框架-浮動(dòng)框架,但是這個(gè)有一個(gè)缺點(diǎn)不能在我們的設(shè)計(jì)頁(yè)面插入，要切換到代碼當(dāng)中去設(shè)置第二種方法在代碼中輸入輸入即可,6.網(wǎng)頁(yè)設(shè)計(jì)之框架,如果我們的浮動(dòng)框架小了那怎么去調(diào)整？選中我們的浮動(dòng)框架-切換到代碼中在設(shè)置了這個(gè)即可，這個(gè)width是寬度的意思，這個(gè)height是高度的意思，設(shè)置你們想要的參數(shù)即可,7.網(wǎng)頁(yè)設(shè)計(jì)之CSS樣式,1.CSS是一個(gè)方便我們管理網(wǎng)站的一個(gè)工具敘述：類、可應(yīng)用于單元格一行、一列、一個(gè)表格等敘述：標(biāo)簽、死板的規(guī)則、只能使用在特定的標(biāo)簽上敘述：高級(jí)、設(shè)置鏈接的樣式、鼠標(biāo)效果,7.網(wǎng)頁(yè)設(shè)計(jì)之CSS樣式,類和標(biāo)簽的區(qū)別：類是自由身，標(biāo)簽是束縛了的東西這樣說，類的應(yīng)用更廣，而標(biāo)簽只是在比較大的范圍內(nèi)才可以發(fā)揮出他的效果類的名稱前面必須要有一個(gè)點(diǎn)（.）有了這個(gè)點(diǎn)，我們才能和他們不一樣，做不同的事,7.網(wǎng)頁(yè)設(shè)計(jì)之CSS樣式,標(biāo)簽的名字，前面不需要點(diǎn)，他是一個(gè)固定了的名稱，這就是比較死板的地方了，（比如一個(gè)表格里，有兩個(gè)嵌套的表格，我們需要的效果是上面的表格有個(gè)下邊框虛線，如果用標(biāo)簽來做，最后的結(jié)果是整個(gè)表格都應(yīng)用了這個(gè)樣式，但是我們用類來做的話，效果就不一樣了，就能夠達(dá)到我們需要的那種效果了）,7.網(wǎng)頁(yè)設(shè)計(jì)之CSS樣式,高級(jí)：專門用來對(duì)付鏈接的，有鏈接的地方就有他，是專門設(shè)置鼠標(biāo)放上去的效果以及鏈接靜態(tài)時(shí)的效果，分為兩種，一種是特定的鏈接，一種是不特定的鏈接，他們兩個(gè)各有優(yōu)點(diǎn)，比如（我們的嵌套表格里的鏈接想和表格外面的鏈接不一樣，我們就得用上特定的鏈接，但是有一點(diǎn)，特定的鏈接有一個(gè)名字，那個(gè)名字就是你的表格名字，設(shè)置了表格名字之后，就能使用了，名字的格式是：,7.網(wǎng)頁(yè)設(shè)計(jì)之CSS樣式,（“#表格名字然后是效果”）比如（#dha:link,#dha:visited）這就是那個(gè)特定的效果，如果你不想要特定的效果，全部都一樣的話，具體設(shè)置是（a:link,a:visited）這個(gè)樣式一設(shè)置，就全部的鏈接樣式就一樣了例題,7.網(wǎng)頁(yè)設(shè)計(jì)之CSS樣式,應(yīng)用了CSS類的樣式,應(yīng)用了