網(wǎng)頁(yè)設(shè)計(jì)總結(jié)

網(wǎng)頁(yè)設(shè)計(jì)聽(tīng)課總結(jié)

網(wǎng)頁(yè)設(shè)計(jì)的階段性課程：1、規(guī)劃階段（網(wǎng)站策劃）2、設(shè)計(jì)階段（網(wǎng)頁(yè)美工）3、實(shí)施階段（網(wǎng)頁(yè)制作）

詳細(xì)流程：站點(diǎn)策劃、構(gòu)思草圖、美工設(shè)計(jì)、圖形制作、腳本編程、圖形頁(yè)面整合、測(cè)試發(fā)布

從創(chuàng)建站點(diǎn)開始（學(xué)會(huì)搭建并定義本地站點(diǎn)）

規(guī)劃站點(diǎn)結(jié)構(gòu)的原則（用文件夾來(lái)保存文檔、使用合理的文件名稱、首頁(yè)名稱、將本地和遠(yuǎn)端站點(diǎn)設(shè)為同樣的結(jié)構(gòu)）搭建自己的網(wǎng)頁(yè)文件夾比如（images、midea等等）創(chuàng)建站點(diǎn)文檔（添加文件和文件夾、文件的管理）HTML代碼的基本結(jié)構(gòu)（頭部、主體）：….

…

設(shè)定meta內(nèi)容（通用頭元素的設(shè)置、添加meta元素。設(shè)置關(guān)鍵字和描述文字、刷新網(wǎng)頁(yè)設(shè)置）

設(shè)定頁(yè)面屬性（標(biāo)題、背景圖像、背景色、文本顏色、邊距）添加文本（插入特殊字符、設(shè)定文本屬性、改變字體和尺寸）換行快捷鍵：enter和shift+enter（br式回車緊湊型）網(wǎng)頁(yè)支持的圖像格式：gif、JPEG、png等

圖像在網(wǎng)頁(yè)中自動(dòng)變形后，可以按“重新取樣”后改變圖片的大小

底部水平線修改顏色：點(diǎn)擊快速標(biāo)簽編輯器修改源代碼即可（如：color="green"）插入flash動(dòng)畫、flash按鈕與文字、flash圖片查看器、flashpaper文件插入javaapplet元素（源代碼：…..）插入交互圖像（翻轉(zhuǎn)圖片和導(dǎo)航條）

JavaScript腳本語(yǔ)句：….

設(shè)置滾動(dòng)文字屬性：在滾動(dòng)文字前加上代碼滾動(dòng)方向是：direction="right"滾動(dòng)速度是：scrollamount="3"延遲速度是：scrolldelay="100"鼠標(biāo)指向時(shí)停止?jié)L動(dòng)命令：onmouseover="this.stop()"鼠標(biāo)離開時(shí)開始滾動(dòng)命令：onmouseout="this.start()"

在滾動(dòng)文字結(jié)束代碼的最后寫上：

例如：網(wǎng)頁(yè)鏈接：絕對(duì)路徑（）

相對(duì)路徑(相對(duì)于同網(wǎng)站下的鏈接b.htm)

根路徑（\\a.htm）

內(nèi)部鏈接、外部鏈接、錨鏈接、Email鏈接、鏈接的目標(biāo)窗口、圖像的超級(jí)鏈接、熱點(diǎn)鏈接的源代碼：郵件鏈接：（mailto:郵件地址？subject=網(wǎng)站意見(jiàn)反饋&cc=郵件地址）例如：mailto:xxx@163.com?subject=網(wǎng)站意見(jiàn)反饋&cc=xxx@163.com

錨鏈接的使用方法：先在頭部拋錨，然后在頁(yè)尾鏈接到錨點(diǎn)（在目標(biāo)處寫：#top）源代碼如下：返回頭部

圖像的熱點(diǎn)：在一張圖片的不同地區(qū)選擇新的鏈接。

腳本鏈接：例子：關(guān)閉窗口的鏈接：JavaScript：window.close()

表格的應(yīng)用：新增表格、表格的屬性設(shè)定

學(xué)會(huì)用fireworks切片，并且在Dreamweaver中導(dǎo)入fireworksHTML并調(diào)整表格的操作Html源代碼表格:行：?jiǎn)卧�格：大表格制作用“像素”，小表格用“百分比”表格的繪制：（繪制表格、繪制單元格）擴(kuò)展、標(biāo)準(zhǔn)、布局快捷鍵：ctrl+：放大ctrl-：縮小做好切片及排版

制作表單：（什么是表單？客戶端填寫表單（提交反饋）服務(wù)器端處理表單、加入空白表單、設(shè)定表單屬性）

表單動(dòng)作：（表單內(nèi)容發(fā)到郵箱）mailto:xxx@163.com&cc=xxx@163.com文本域、單選按鈕、復(fù)選框

源代碼：（網(wǎng)頁(yè)中的表單元素代碼很重要�。┲谱鞅韱问褂帽韱尾迦肓斜�、下拉菜單、插入文件域、隱藏域、跳轉(zhuǎn)菜單列表html源代碼：北京上海南京濟(jì)南聊城深圳廣州廈門

菜單的html源代碼：

<1616-2122-2727-32>32

文件域的html源代碼：提交：重置：圖片域的html源代碼：

跳轉(zhuǎn)菜單的html源代碼：

新浪百度網(wǎng)易

跳轉(zhuǎn)菜單的源代碼調(diào)整：增加指向鍵后，要去掉當(dāng)初源代碼中的：onchange="MM_jumpMenu("parent",this,0)"自動(dòng)指向代碼

CSS(CascadingStyleSheets)層疊樣式表（控制頁(yè)面中的每一個(gè)元素（精確定位）、對(duì)html語(yǔ)言處理樣式的最好補(bǔ)充、把內(nèi)容和格式處理相分離，減少工作量）添加層疊樣式表的方法：

1、直接在標(biāo)簽內(nèi)定義CSS實(shí)例

2、添加在html的里：

3、鏈接樣式表（最適

合大型網(wǎng)站的css的樣式定義）樣式的類型：html標(biāo)簽樣式：

選擇符{屬性：值}h3{font-family：arial}h3:選擇符

（Font-family：arial）：定義的樣式font-family：屬性arial：屬性值

自定義樣式：

.self{color:#66ff00}

#bright{font}鏈接文字樣式：

a：link{color:red}

a:active{color:blue;font-size:125%}

對(duì)于css的樣式起作用的對(duì)象：哪一個(gè)樣式離文字最近，就顯示哪一個(gè)css樣式。Css層疊樣式表的局部鏈接樣式：a.name:link

a.name:activea.name:hovera.name:visited

（新建css樣式規(guī)則）局部鏈接樣式的源代碼：a.blue:link{

color:#0000FF;

text-decoration:none;

}

a.blue:visited{

color:#CCCCCC;text-decoration:none;

}a.blue:hover{

color:#33FF00;

text-decoration:underline;}

a.blue:active{

color:#CCFF00;

text-decoration:none;

}

CSS樣式設(shè)定詳解：

1、文字設(shè)定（字體、字號(hào)、樣式、行高、文字修飾、粗細(xì)、變化、大小寫、顏色）

2、文字塊設(shè)定（單詞間距、字母間距、垂直對(duì)齊方式、文字對(duì)齊、文字縮進(jìn)、空白區(qū)域控制）

3、擴(kuò)展設(shè)定（光標(biāo)類型、濾鏡）

圖片濾鏡的html源代碼：img{filter:Alpha(Opacity=0,FinishOpacity=100,Style=3,StartX=0,StartY=317,FinishX=510,FinishY=317);}

濾鏡效果：1、模糊效果：Blur(Add=t,Direction=0,Strength=30)

2、透明效果：Alpha(Opacity=0,FinishOpacity=100,Style=3,StartX=0,StartY=317,FinishX=510,FinishY=317)

3、水平反轉(zhuǎn)：FlipH4、垂直反轉(zhuǎn)：FlipV

5、灰色效果：Gray

6、全部反轉(zhuǎn)效果：Invert（類似膠卷底片效果）

7、波紋效果：Wave(Add=?add,Freq=?頻率,LightStrength=?光影效果,Phase=?波紋的偏移量,Strength=?振幅大小)

8、X光片效果：XrayCSS樣式：內(nèi)部CSS與外部CSS應(yīng)用CSS外部樣式表

關(guān)于框架創(chuàng)建框架、框架的刪除、使用框架、制作框架鏈接、重命名框架設(shè)置框架屬性：html源代碼：

添加浮動(dòng)框架：使用浮動(dòng)框架（制作浮動(dòng)框架、設(shè)置浮動(dòng)框架屬性、制作浮動(dòng)框架鏈接）

屬性的設(shè)置源代碼：浮動(dòng)框架鏈接時(shí)要指定鏈接的目標(biāo)是：浮動(dòng)框架的name（自己去定義）。

制作復(fù)雜的嵌套結(jié)構(gòu)框架頁(yè)面、學(xué)會(huì)在頁(yè)面中使用嵌套框架，并制作框架頁(yè)面間的鏈接。模板的應(yīng)用：模板的功能什么是模板為什么用模板（方便制作及更新）創(chuàng)建模板（根據(jù)已有文件建立模板）文件菜單下：另存為模板定義可編輯的區(qū)域

庫(kù)的建立及應(yīng)用庫(kù)的建立（什么是庫(kù)？為什么使用庫(kù)？）便于局部文件的修改

1、建立庫(kù)2、應(yīng)用庫(kù)3、更新庫(kù)層的使用創(chuàng)建層設(shè)置層屬性（選擇層改變層的大小移動(dòng)層排列層）插入層的html語(yǔ)句：

層是屬于CSS樣式表的一種定位技術(shù)

作用：直接使用層排版、利用層來(lái)設(shè)計(jì)表格（層和表格可以互換）、使用層溢出屬性控制當(dāng)層的內(nèi)容超過(guò)層的大小的時(shí)候就要用到層的溢出屬性（類似滾動(dòng)條效果）溢出屬性的選擇有四種：1、visible（可見(jiàn)的）2、hidden（隱藏的）3、scroll（滾動(dòng)效果）4、auto（自動(dòng)）

行為（什么是行為/動(dòng)作/事件選擇對(duì)象添加動(dòng)作調(diào)整事件）

行為的應(yīng)用：制作彈出信息窗口、制作打開瀏覽器窗口、播放音樂(lè)（實(shí)現(xiàn)背景音樂(lè)）在html語(yǔ)言中添加背景音樂(lè)：其中的（loop="-1"：指的是無(wú)限循環(huán)）

設(shè)置狀態(tài)欄文本針對(duì)輸入文本框的行為事件“點(diǎn)擊”是：onfocus不在文本框的行為事件是：onblur

控制flash的播放先給flash命名然后在下方設(shè)置控制播放的命令給名字設(shè)置空連接（空

連接的目標(biāo)為：#）

檢查表單對(duì)按鈕實(shí)施行為事件轉(zhuǎn)到URL交換圖像

顯示彈出式菜單

檢查插件（新建文字指向空連接然后設(shè)置行為屬性即可。）檢查瀏覽器（在IE流行的現(xiàn)在時(shí)代，一般不使用）

改變屬性（例如改變圖片的邊框?qū)傩匀纾篵order）拖動(dòng)層的效果（拖動(dòng)層要對(duì)整個(gè)頁(yè)面進(jìn)行實(shí)施）

設(shè)置顯示隱藏層（例如：鼠標(biāo)劃過(guò)時(shí)出現(xiàn)圖片，離開時(shí)消失）設(shè)置層文本

制作時(shí)間軸動(dòng)畫（層的漂浮效果）Fps：幀速率在路線中添加關(guān)鍵幀

控制時(shí)間軸（鼠標(biāo)經(jīng)過(guò)停止、鼠標(biāo)離開浮動(dòng)）

常用事件：onmouseover、onmouseout、onfocus、onload等等

使用插件1、手動(dòng)安裝插件：擴(kuò)展對(duì)象、擴(kuò)展命令（對(duì)于鼠標(biāo)跟隨的效果，字體的設(shè)置直接在CSS樣式表中）、擴(kuò)展行為2、自動(dòng)安裝插件（使用插件管理器）：Dreamweaver中的標(biāo)準(zhǔn)插件后綴名為：*.mxp去adobe網(wǎng)站找插件。主要包括：擴(kuò)展對(duì)象、命令、行為預(yù)覽和出版：檢查網(wǎng)站中的錯(cuò)誤鏈接、檢查某個(gè)html頁(yè)面的鏈接錯(cuò)誤Dreamweaver課程總結(jié)：

1、建立站點(diǎn)、維護(hù)站點(diǎn)

2、頁(yè)面構(gòu)成元素：文字（特殊字符）、圖片、表單、多媒體（embed、

marquee、bgsound）、頭信息的加載

在網(wǎng)頁(yè)中使用Favicon最簡(jiǎn)單的辦法便是將制作好的圖標(biāo)文件命名為Favicon.ico，然后將其上傳到網(wǎng)站的根目錄即可。如果需要將Favicon.ico放到其他目錄下，或者希望讓不同

的網(wǎng)頁(yè)顯示不同的Favicon，就需要在網(wǎng)頁(yè)Html文件中做設(shè)定了，在Html中的＜head＞部分加入如下的代碼：

擴(kuò)展閱讀：網(wǎng)頁(yè)設(shè)計(jì)心得體會(huì)

教改學(xué)習(xí)心得體會(huì)

BY01061班16號(hào)王建云

本學(xué)期的網(wǎng)業(yè)設(shè)計(jì)課程，開展了動(dòng)態(tài)思維訓(xùn)練教學(xué)活動(dòng)，對(duì)于我們學(xué)生來(lái)說(shuō)，

可以激發(fā)學(xué)習(xí)興趣，調(diào)動(dòng)學(xué)習(xí)的自覺(jué)性，自己動(dòng)腦、動(dòng)手，動(dòng)口，運(yùn)用網(wǎng)絡(luò)資源，結(jié)合教材及老師的指導(dǎo)，通過(guò)自身的實(shí)踐，創(chuàng)作出積聚個(gè)人風(fēng)格、個(gè)性的個(gè)人網(wǎng)頁(yè)�？傮w來(lái)說(shuō)，整個(gè)學(xué)期的學(xué)習(xí)過(guò)程，我學(xué)會(huì)了很多知識(shí)，雖然過(guò)程比較艱辛，但在INTENET領(lǐng)域中，有了一個(gè)展示自我的空間，我覺(jué)得很開心、很有成就感。一.充分發(fā)揮動(dòng)手能力

作為網(wǎng)頁(yè)設(shè)計(jì)的初學(xué)者，我對(duì)網(wǎng)頁(yè)設(shè)計(jì)非常感興趣，一心想設(shè)計(jì)出一個(gè)美觀、實(shí)用、內(nèi)容豐富的個(gè)人網(wǎng)頁(yè)。本學(xué)期的教改方案由以前學(xué)生單純接受知識(shí)變?yōu)橹鲃?dòng)參與教學(xué)活動(dòng)。在這樣的壓力和動(dòng)力下，通過(guò)自己動(dòng)手、動(dòng)腦，通過(guò)網(wǎng)絡(luò)資源，老師的指導(dǎo)，在不斷發(fā)現(xiàn)問(wèn)題和解決問(wèn)題的過(guò)程中學(xué)到了很多知識(shí)，也增強(qiáng)了我的創(chuàng)作能力和動(dòng)手能力，在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，從構(gòu)思到設(shè)計(jì)、完善、維護(hù)，整個(gè)過(guò)程我都全身心投入，使我真正學(xué)到了網(wǎng)頁(yè)設(shè)計(jì)的知識(shí)。二.在設(shè)計(jì)過(guò)程中不斷提高網(wǎng)頁(yè)設(shè)計(jì)水平

在本次網(wǎng)頁(yè)設(shè)計(jì)中，我不僅學(xué)到了很多關(guān)于網(wǎng)頁(yè)設(shè)計(jì)方面的知識(shí)，也從中學(xué)會(huì)了關(guān)于網(wǎng)絡(luò)、編程等方面的知識(shí)。我從最初開始運(yùn)用FrontPage設(shè)計(jì)網(wǎng)頁(yè)，到后來(lái)運(yùn)用Dreamweaver、Flash、Fireworks等網(wǎng)軟件設(shè)計(jì)網(wǎng)頁(yè)，完善網(wǎng)頁(yè)。在這個(gè)過(guò)程中，我通過(guò)自學(xué)教材、上網(wǎng)查詢，學(xué)習(xí)了Dreamweaver、Flash、Fireworks等網(wǎng)頁(yè)軟件的應(yīng)用，學(xué)會(huì)了管理、維護(hù)自己的站點(diǎn)，以及一些簡(jiǎn)單動(dòng)畫、控件的制作等等。在設(shè)計(jì)過(guò)程中也出現(xiàn)了很多的問(wèn)題，但通過(guò)看書，上網(wǎng)查詢，請(qǐng)教老師等方式，不斷的學(xué)習(xí)、解決、提高，設(shè)計(jì)出的網(wǎng)頁(yè)不論是外觀還是內(nèi)容，都在不斷的進(jìn)步、改善。可以說(shuō)在自己動(dòng)手，不斷實(shí)踐的過(guò)程中，網(wǎng)頁(yè)設(shè)計(jì)水平得到了很大的提高。三.不足之處

由于平時(shí)工作比較繁忙，學(xué)習(xí)時(shí)間比較少，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)軟件的強(qiáng)大功能運(yùn)用得還不夠。在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，由于沒(méi)有網(wǎng)頁(yè)制作代碼的知識(shí)，所以在設(shè)計(jì)時(shí)也遇到了很多麻煩，有時(shí)插入一個(gè)特效腳本也是很麻煩。在網(wǎng)頁(yè)制作過(guò)程中，想提高設(shè)計(jì)水平，想有個(gè)理想的網(wǎng)頁(yè)，必須學(xué)會(huì)代碼的運(yùn)用，我將在以后的學(xué)習(xí)過(guò)程中不斷加強(qiáng)這方面的學(xué)習(xí)，希望老師能簡(jiǎn)單介紹一下代碼，讓我也對(duì)它有個(gè)初步的認(rèn)識(shí)，以后再加強(qiáng)學(xué)習(xí)也才會(huì)有所提高。

總體來(lái)說(shuō)，通過(guò)今次的對(duì)網(wǎng)頁(yè)設(shè)計(jì)的學(xué)習(xí)，有收獲也有遺憾、不足的地方，但我想，我已經(jīng)邁入了網(wǎng)頁(yè)設(shè)計(jì)的大門，只要我再認(rèn)真努力的去學(xué)習(xí)，去提高，憑借我對(duì)網(wǎng)頁(yè)設(shè)計(jì)的熱情和執(zhí)著，我將來(lái)設(shè)計(jì)出的網(wǎng)頁(yè)會(huì)更加專業(yè)，更完善。也希望老師在今后的日子里多指導(dǎo)。

友情提示：本文中關(guān)于《網(wǎng)頁(yè)設(shè)計(jì)總結(jié)》給出的范例僅供您參考拓展思維使用，網(wǎng)頁(yè)設(shè)計(jì)總結(jié)：該篇文章建議您自主創(chuàng)作。

來(lái)源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問(wèn)題，請(qǐng)聯(lián)系我們及時(shí)刪除。

《網(wǎng)頁(yè)設(shè)計(jì)總結(jié)》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請(qǐng)保留原作者信息,謝謝!
鏈接地址：http://m.hmlawpc.com/gongwen/639179.html

• 上一篇：美工總結(jié)
• 下一篇：淘寶實(shí)訓(xùn)總結(jié)