網頁設計總結

網頁設計聽課總結

網頁設計的階段性課程：1、規(guī)劃階段（網站策劃）2、設計階段（網頁美工）3、實施階段（網頁制作）

詳細流程：站點策劃、構思草圖、美工設計、圖形制作、腳本編程、圖形頁面整合、測試發(fā)布

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

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

…

設定meta內容（通用頭元素的設置、添加meta元素。設置關鍵字和描述文字、刷新網頁設置）

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

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

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

JavaScript腳本語句：….

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

在滾動文字結束代碼的最后寫上：

例如：網頁鏈接：絕對路徑（）

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

根路徑（\\a.htm）

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

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

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

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

表格的應用：新增表格、表格的屬性設定

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

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

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

源代碼：（網頁中的表單元素代碼很重要�。┲谱鞅韱问褂帽韱尾迦肓斜怼⑾吕�菜單、插入文件域、隱藏域、跳轉菜單列表html源代碼：北京上海南京濟南聊城深圳廣州廈門

菜單的html源代碼：

<1616-2122-2727-32>32

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

跳轉菜單的html源代碼：

新浪百度網易

跳轉菜單的源代碼調整：增加指向鍵后，要去掉當初源代碼中的：onchange="MM_jumpMenu("parent",this,0)"自動指向代碼

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

1、直接在標簽內定義CSS實例

2、添加在html的里：

3、鏈接樣式表（最適

合大型網站的css的樣式定義）樣式的類型：html標簽樣式：

選擇符{屬性：值}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樣式設定詳解：

1、文字設定（字體、字號、樣式、行高、文字修飾、粗細、變化、大小寫、顏色）

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

3、擴展設定（光標類型、濾鏡）

圖片濾鏡的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、水平反轉：FlipH4、垂直反轉：FlipV

5、灰色效果：Gray

6、全部反轉效果：Invert（類似膠卷底片效果）

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

8、X光片效果：XrayCSS樣式：內部CSS與外部CSS應用CSS外部樣式表

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

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

屬性的設置源代碼：浮動框架鏈接時要指定鏈接的目標是：浮動框架的name（自己去定義）。

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

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

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

層是屬于CSS樣式表的一種定位技術

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

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

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

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

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

連接的目標為：#）

檢查表單對按鈕實施行為事件轉到URL交換圖像

顯示彈出式菜單

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

改變屬性（例如改變圖片的邊框屬性如：border）拖動層的效果（拖動層要對整個頁面進行實施）

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

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

控制時間軸（鼠標經過停止、鼠標離開浮動）

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

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

1、建立站點、維護站點

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

marquee、bgsound）、頭信息的加載

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

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

擴展閱讀：網頁設計心得體會

教改學習心得體會

BY01061班16號王建云

本學期的網業(yè)設計課程，開展了動態(tài)思維訓練教學活動，對于我們學生來說，

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

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

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

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

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

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

來源：網絡整理 免責聲明：本文僅限學習分享，如產生版權問題，請聯(lián)系我們及時刪除。

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

• 上一篇：美工總結
• 下一篇：淘寶實訓總結