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

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

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

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

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

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

…

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

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

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

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

JavaScript腳本語句：….

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

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

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

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

根路徑（\\a.htm）

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

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

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

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

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

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

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

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

源代碼：（網(wǎng)頁中的表單元素代碼很重要！）制作表單使用表單插入列表、下拉菜單、插入文件域、隱藏域、跳轉(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)"自動指向代碼

CSS(CascadingStyleSheets)層疊樣式表（控制頁面中的每一個元素（精確定位）、對html語言處理樣式的最好補(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%}

對于css的樣式起作用的對象：哪一個樣式離文字最近，就顯示哪一個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è)定（字體、字號、樣式、行高、文字修飾、粗細(xì)、變化、大小寫、顏色）

2、文字塊設(shè)定（單詞間距、字母間距、垂直對齊方式、文字對齊、文字縮進(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源代碼：

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

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

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

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

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

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

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

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

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

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

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

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

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

顯示彈出式菜單

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

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

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

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

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

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

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

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

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

marquee、bgsound）、頭信息的加載

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

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

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

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

BY01061班16號王建云

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

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

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

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

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

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

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

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

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

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