下面是范文網(wǎng)小編分享的Dreamweaver網(wǎng)頁制作技巧心得體會3篇 dreamweaver網(wǎng)頁設計從入門到精通,以供借鑒。
Dreamweaver網(wǎng)頁制作技巧心得體會1
網(wǎng)頁制作
一、準備工作
1、站點的管理(創(chuàng)建、修改和刪除站點)
2、網(wǎng)站與網(wǎng)頁的關系:首頁+子頁=網(wǎng)站
3、網(wǎng)頁的頁面屬性:“修改”——“頁面屬性”
二、網(wǎng)頁制作過程
1、頁面布局:采用幾個小表格疊加的方式
(1)表格大?。鹤钔鈱颖砀褚韵袼兀╬x)為單位
內(nèi)層嵌套表格以百分比(%)為單位
(2)表格的修改與編輯:合并單元格,拆分單元格,插入行列,刪除行列 2、模板的制作:至少包含一個可編輯區(qū)域(按住ctrl鍵單擊單元格)
完成各頁共有內(nèi)容(站標,導航,設置導航超鏈接,版權)
“文件”——“另存為模板”
3、模板的應用:在建好的空白頁面中,“修改”—“模板”—“套用模板到頁”
4、網(wǎng)頁元素的添加
(1)插入網(wǎng)頁標題(標題欄中顯示的內(nèi)容)“頁面屬性”——“標題/編碼”(2)文字的添加
(3)圖像的效果:圖像的替換文字(圖片屬性替代框)
交換圖像效果
圖像的滾動效果
5、完善網(wǎng)頁
(1)超鏈接
(2)滾動效果
**(3)制作行為:
彈出信息設置狀態(tài)欄文本
**(4)利用層制作漂浮效果:自動播放重復direction=”left/right/up/down” onmouseover=”()” onmouseout=”()”behavior=”alternate/slide”width/height=”數(shù)值”>??
Dreamweaver網(wǎng)頁制作技巧心得體會2
dreamweaver網(wǎng)頁制作教案
(Dreamweaver MX)
一、Dreamweaver MX中文版建站初步
建立一個網(wǎng)站,首先要在本地機器上做好網(wǎng)站,再傳到網(wǎng)上的虛擬空間上?,F(xiàn)在免費的網(wǎng)頁空間很少了,在 在新的未命名的瀏覽器窗口中加載鏈接文檔。
_parent 在父框架頁或包含該鏈接的框架窗口中加載鏈接文檔。如果包含鏈接的框架不是嵌套的,則鏈接文檔將加載到整個瀏覽器窗口中。_self 將鏈接文檔加載到與鏈接相同的框架或窗口中,該目標是默認值,所以通常您不需要指定它。
_top 將在整個瀏覽器窗口中加載鏈接文件,同時移除所有框架。
一個網(wǎng)站中,第一級鏈接或者導航鏈接選擇_self,第二級鏈接和友情鏈接選擇_blank。
第二部分:使用錨
簡明步驟:選中文本→在目標文檔中插入錨標記→命名→拖動“指向文件”圖標到文本?!箧溄拥轿臋n中的指定位置:在需要插入錨的地方,點一下光標,然后單擊常用面板上的命名錨記工具。
鍵入錨記名稱,一個站點中的錨記名稱只可以是唯一的,否則會出現(xiàn)錯誤。
在文檔中選取要創(chuàng)建鏈接的文本,打開您需要鏈接的命名錨記所在文檔,不一定要是當前文檔,可以是站點中的其它文檔,點擊屬性面板中的“指向文件”圖標,并將它拖動到您需要鏈接的錨記處。
第三部分:使用空鏈接
使用空鏈接可以為頁面上的對象或文本附加行為。創(chuàng)建步驟: 1.在文檔窗口中,選中要設置鏈接的文本、圖像或其他對象。2.在屬性面板的鏈接框中,只輸入一個“#”號。3.如果單擊這種地址為一個“#”的鏈接,無論當前你處于文檔的什么地方,都會自動跳轉到文檔的開頭位置。很多人非常討厭這種情況,因此出現(xiàn)很多插件??梢杂谩?##”來代替“#”,單擊這樣的鏈接的時候,會保持當前頁面的瀏覽位置。4.還可以在屬性面板的鏈接框中輸入javascript:;創(chuàng)建空鏈接。第四部分:創(chuàng)建javascript腳本鏈接 1.在文檔窗口中選取文本,圖象或對象
2.在“屬性”檢查器的“鏈接”欄中鍵入javascript:,其后緊接JavaScript代碼或函數(shù)調用。
例如在鏈接欄中鍵入javascript:alert('哈哈你上當了')創(chuàng)建一個鏈接,點擊鏈接后就會出現(xiàn)一個警告框
第五部分:創(chuàng)建電子郵件鏈接
方法一:選取需要創(chuàng)建鏈接的文本或者圖像,點擊常用面板中的“電子郵件鏈接”工具,輸入郵件地址。方法二:選取需要創(chuàng)建鏈接的文本或者圖像,在屬性面板中的鏈接欄輸入mailto:郵件地址。
第六部分:創(chuàng)建跳轉菜單,例如制作一個友情鏈接。
首先將插入點放在要插入鏈接的位置。點擊表單面板中的跳轉工具
在插入跳轉菜單對話框中,點添加項添加新鏈接。
在屬性面板中選擇類型為“菜單”。
在瀏覽器中發(fā)布如圖:
在屬性面板中選擇類型為“列表”高度為3。
在瀏覽器中發(fā)布如圖:
點擊屬性面板中的列表值,可以修改列表值。
第七部分:給鏈接增加提示,給鏈接增加快捷鍵。首先將插入點放在要插入鏈接的位置。點擊常用面板上的超級鏈接工具。
設置鏈接參數(shù)。
標題是指當指向鏈接會出現(xiàn)提示。
訪問鍵是指按鍵盤上的快捷鍵會選中鏈接。例如在實例中按Alt+D鍵會選中5D多媒體。
Dreamweaver網(wǎng)頁制作技巧心得體會3
網(wǎng)頁zhi優(yōu)化
考慮到網(wǎng)站的優(yōu)化,很多新手站長在初期就沒有做好必要的準備工作,通過總結星箭先生的演講稿,特將一下信息總結出來,希望各位新手站長能夠在策劃自己的網(wǎng)站之前能夠好好看看。
一、關鍵詞的選擇
把握用戶搜索行為:熱門依然明顯、長尾查詢是趨勢、經(jīng)常使用錯別字
合理選擇關鍵詞:精準匹配:關鍵詞競爭度、關鍵詞熱度
挑選關鍵詞的步驟:
1、確定核心關鍵詞
2、核心關鍵詞的擴展
3、模擬用戶思維
4、競爭對手關鍵詞分析
5、利用關鍵詞工具
關鍵詞分析:
Google關鍵詞工具: 在DW中,如何輸入一個空格呢?
輸入空格的問題,在DW似乎已成了一個老生常談的問題,我們可能在許多介紹DW使用方面的書籍或文章中看到過N次。
dW中對空格輸入的限制是針對“半角”文字狀態(tài)而言的,因此通過將輸入法調整到全角模式就可以避免了,方法是:打開中文輸入法(以人工智能ABC為例),按Shift+Space切換到全角狀態(tài),現(xiàn)在應該沒問題了。此外,你還可以通過許多“變通”的方法達到錄入空格的目的,比如常用的是:
直接在源代碼中加入代表空格的HTML代碼“ ”;輸入一定長度的文字對象后,然后調整文字的顏色與當前的背景顏色相同等等,不過注意的是后者在一些瀏覽器中可能顯示上有點問題。
2> 如何在瀏覽器地址欄前添加自定義的小圖標?
你是不是記得有時在瀏覽網(wǎng)易網(wǎng)站的首頁時,在地址www..com前會顯示一個“易”字樣的小圖標。而默認情況下,這個圖標是一個IE瀏覽器的指定圖片。
其實這也不是什么高深技術,只不過在網(wǎng)站目錄下添加了一個特定文件而已。
這時,我們需要預先制作一個圖標文件,大小為16*16像素。文件擴展名為ico,然后上傳到相應目錄中。在HTML源文件“
”之間添加如下代碼:其中的“SHORTCUT ICON”即為該圖標的名稱。當然如果用戶使用IE5或以上版本瀏覽時,就更簡單了,只需將圖片上傳到網(wǎng)站根目錄下,即可自動識別!
3> 為什么,我本來設計很好的網(wǎng)頁,在瀏覽器窗口最小化時會變的丑陋難堪?
這應該是個很值得大家注意的問題,也就是說,在全屏狀態(tài)下瀏覽網(wǎng)頁內(nèi)容時,一點問題也沒有。當我們使用窗口的最小化命令或手動的調整窗口的大小時,問題就慢慢出現(xiàn)了。網(wǎng)頁內(nèi)容會把當前窗口作為顯示范圍,依次下挫。舉個例子,和在記事本中有“自動換行”和“沒換行”的差別是完全一樣的。解決這個問題,我們必須從網(wǎng)頁的布局說起,一般情況下,網(wǎng)頁內(nèi)容的定位大多是通過表格來實現(xiàn)的。因此問題的“毛病”也就出在表格上。你可能已經(jīng)注意到了,在表格的高寬設定選擇上提供了兩種不同的類型,百分比和像素。其中百分比的使用將會產(chǎn)生前面說到的那個毛病,將其全部更正為Pixels單位的實際大小就可以了。
4> 如何改變網(wǎng)頁顯示時,最頂部的提示信息?
瀏覽網(wǎng)頁時,頂部的提示信息往往代表了網(wǎng)頁內(nèi)容的關鍵所在,有助于訪問者提前了解網(wǎng)頁內(nèi)容。在DW4前,沒有在功能上直接提供該操作,我們往往通過在源代碼中應用“title”屬性來完成。進入DW4就簡單多了。
直接在編輯窗口最上方的“title”輸入框內(nèi)鍵入所需要的文字信息即可。
·Dreamweaver制作網(wǎng)頁經(jīng)典問題大整理(2)5> 怎么樣,才能為圖片添加指定顏色的邊框?
對于沒有邊框的圖片而言,直接插入到網(wǎng)頁中,在顯示效果上是相當差的。記得在微軟的FP中要給圖片添加滿意的邊框還是相當麻煩的。不過在DW中就顯得容易多了,因為這里有一個“Border”屬性,可以讓你直接設置邊框的寬度。
寬度設好了,你一定會問,顏色呢?面板上并沒有提供顏色的選擇呀!呵呵,其實這里有一個技巧問題,用鼠標選擇圖片對象,注意不是點擊選中,而是拖動選擇。象設定文字顏色一樣進行就可以了。
6> 如何添加圖片及鏈接文字的提示信息?
在我們?yōu)g覽網(wǎng)頁時,當鼠標停留在圖片對象或鏈接上時,在鼠標的右下有時會出現(xiàn)一個提示信息框。對目標進行一定的注釋說明。在一些場合,它的作用是很重要的。
下面先看看圖片提示信息的添加,選中圖片對象,在屬性面板里你會發(fā)現(xiàn)有個“Alt”輸入框。默認情況下,該輸入框是空白的。在這里錄入需要的提示內(nèi)容就可以了。
那么鏈接提示的制作就沒這么簡單了。因為DW中沒有直接提供該功能,因此我們需要通過添加HTML代碼來實現(xiàn)。
在中添加“title”屬性。title=提示內(nèi)容即可。
7> 如何把自己的ZIP或其他類型的文件供別人下載?
在不少初級網(wǎng)頁制作者看來,好象通過鼠標單擊完成下載是件很“神秘”的事,實際上遠非如此.在DW中凡是不被瀏覽器識別的格式文件(HTM,HTML,ASP,,SHTML等以外的)作為鏈接目標時,默認的操作都是下載.這時你只需要,把要瀏覽者下載的文件名寫好,然后制作一個到目標文件的鏈接.注意目錄一定不要搞錯.8> 怎樣才能夠保證網(wǎng)頁中文字不跟隨瀏覽器字體大小設置而變動?
大家都知道,在IE瀏覽器的功能設置中,有一個可以自由設置窗口內(nèi)容字體大小的功能,這樣由于不同訪問者的習慣問題,呈現(xiàn)在他們面前的網(wǎng)頁有時也會不同。
比如你可能本來設計時用的是2號字體,結果由于用戶對瀏覽器的額外設定,變的更大了,這時顯示效果上就出問題了。
那么解決的辦法就是將網(wǎng)頁內(nèi)容定性的強制在某個合適的大小上。即不容許他變化。通過CSS樣式表對字體進行強制性控制就可以實現(xiàn)這個要求了。
·Dreamweaver制作網(wǎng)頁經(jīng)典問題大整理(3)
9> 以新窗口的形式打開目標鏈接?
以新窗口打開,顧名思義,也就是在不覆蓋當前窗口的前提下,另外打開一個瀏覽器窗口。你可以直接在連接代碼中加入“Target=_blank”。
如果你的HTML比較差的話,在DW屬性面板上同樣提供了這個設置,當你在Link輸入框中鍵入www..common的“內(nèi)容”。
單擊上面的“Refresh”按鈕,其中“Delay”輸入框中鍵入刷新延遲的時間(單位:秒),“Action”為刷新指定的目標URL。因為現(xiàn)在是刷新當前頁面,直接選單選項“Refresh This Document”即可。
·Dreamweaver制作網(wǎng)頁經(jīng)典問題大整理(4)
13> 如何定義網(wǎng)頁的關鍵字(Keyname)?
當用戶使用搜索引擎search合適內(nèi)容的網(wǎng)頁時,關鍵字起著一個不容忽視的作用。大多的搜索服務器會每隔一段時間自動探測網(wǎng)絡中是否有新網(wǎng)頁產(chǎn)生,并把他們按關鍵字進行記錄,以方便用戶查詢。
你當然想讓你的網(wǎng)頁出現(xiàn)在搜索引擎的查詢返回列表中了,這時關鍵字的定義就尤為重要了。
同樣在“Head”面板部分,單擊“Keywords”按鈕,錄入需要逐個定義的關鍵字即可,注意每個關鍵字以“;”號隔開,數(shù)目沒有限制。
14> 如何在編輯窗口中,隱藏一些不必要的標簽?
當用戶在網(wǎng)頁中插入了太多的不可見元素時,在編輯窗口的最上面就會顯示一排相應的標示標簽,用來方便用戶隨時能找到它們。雖然這些標簽本身并不影響瀏覽器里的顯示效果,但多了以后,往往使網(wǎng)頁內(nèi)容不得不錯位,從而一定程度上妨礙網(wǎng)頁視覺上的調整,那么怎么樣才能把這些東東去掉呢?
進入“Preperence”面板,列表中選擇“Invisibel Elements”,勾掉你不想顯示的項目前的“對號”即可,比如Scripts等
15>安排不支持“框架”的瀏覽器的顯示內(nèi)容?
我們知道,目前的瀏覽器類型很多,因此我們設計網(wǎng)頁時最先考慮到的往往是“這個東西是不是在不同的瀏覽器中都能顯示好呢?”。框架就是一個例子!
不過避免開這點,很簡單,你只需要在源代碼中加入下面的內(nèi)容就可以了。
< BODY>
16> 如何避免別人把你的網(wǎng)頁放在框架中?
一些居心不良的人,經(jīng)常偷著竊取別人的勞動成果,比如把別人精心制作的網(wǎng)頁以子頁的形式放到自己的框架中。
那么怎樣避免自己的網(wǎng)頁內(nèi)容被“盜用”呢?
你只需要在網(wǎng)頁源代碼的
之間加入以下代碼內(nèi)容: <script language=“javascript”>< /script>17> 怎樣加入注釋內(nèi)容?
注釋內(nèi)容,顧名思義只是作為說明內(nèi)容出現(xiàn)的,因此在瀏覽時不會出現(xiàn)在網(wǎng)頁中。它的作用是對某些重要或復雜代碼進行必要的標示,以更方便快捷的找到。
進入“Object”面板的“Invisibel”部分(即不可見元素),選擇插入“Comment”按鈕,在“Comment”中鍵入必要的信息。這時如果你返回到源代碼中,會看到這些操作添加的不過是下面格式的一段代碼:
<!--這是需要填寫的注釋內(nèi)容--> ·Dreamweaver制作網(wǎng)頁經(jīng)典問題大整理(5)
18> 水平線,為什么不能設置顏色?
在DW中,當通過菜單“Insert”-“Horizonal Rule”插入水平線時,在屬性面板中你會發(fā)現(xiàn)并沒有提供關于水平線顏色的設置,因為最早NC中不支持標簽(水平線的HTML代碼)的COLOR屬性,所以DW也沒有關于它的設置。
看來需要的話,我們只能直接進入源文件更改了。
19> 如何設置可以關閉當前窗口的功能?
這里我們可以先輸入用來標示的文字“關閉窗口”,用鼠標拖動選中它,在“Link”輸入框中鍵入“/”,同時切入源代碼窗口,在鏈接代碼中鍵入該事件-onclick=“javascript:();return false;”。
完整的代碼為:關閉窗口< /a>
當然你也可以將文字“關閉窗口”換成其他的對象,比如圖片,按鈕等等!
20> 定時自動關閉的窗口又是怎樣的呢?
上面提到了個關閉窗口的功能,那么現(xiàn)在的自動關閉又是怎么實現(xiàn)的呢?
在源代碼
后加入下面的代碼: < script LANGUAGE=“javascript”> < /script>其中的set Timeout是一個用來設定延遲時間的函數(shù),這里表示10秒鐘
21> 如何更改瀏覽器中鼠標的”形狀"?
一般情況下,鼠標在瀏覽器中以“箭頭”的樣式出現(xiàn),那么我們能不能把它更改為自己喜歡的其他樣式類型呢?
改變鼠標形狀在DW中是通過“CSS樣式表”來實現(xiàn)的。
菜單“文字(Text)”-“CSS樣式表(CSS style)”-“Edit style sheet”,彈出樣式表的編輯窗口,也可以單擊快速啟動板中的CSS style按鈕找到,單擊“New”按鈕,選擇默認的“Make custom style”,同時在下面的Define中使該樣式只應用到當前網(wǎng)頁文檔,“This document only”。
在“樣式定義”窗口的左邊列表項中選擇“Extensing”(擴展項),相應右邊設置
在“Cursor”(鼠標)中,下拉選擇合適的形狀即可,確定后返回,按F12在瀏覽器中觀察效果,不滿意的話,還可以對樣式進行修改。
22>如何去除掉鏈接文字下面的下劃線?
在我們完成鏈接制作后,鏈接文字內(nèi)容往往被自動在下面添加一條下劃線,用來標示該內(nèi)容包含超級鏈接。當一個網(wǎng)頁中鏈接比較多時,就顯得有些雜亂的感覺了,其實我們可以很方便的把它去掉。
同樣進入“Edit style sheet”窗口,單擊“New”確立新樣式,這里的Type(類型)中,需要選擇的是“Redefine HTML Tag”,同時在具體的標記Tag中選中代表超級鏈接的“a”,單擊OK。
編輯該樣式,左邊列表中選“Type”,勾取“Decoration”(修飾)中的“None”復選框,這時所有網(wǎng)頁中的鏈接文字下劃線都被清除掉了。
·Dreamweaver制作網(wǎng)頁經(jīng)典問題大整理(6)
23> 怎樣讓鼠標在鏈接文字上方“懸停”時,產(chǎn)生變色,變形等效果?
訪問網(wǎng)站時,我們遇到的最平常不過的一種效果就是“鼠標懸停響應”了,所謂的“鼠標懸停響應”表現(xiàn)在鏈接文字上,就包括改變顏色,修飾效果(下劃線,中劃線)等多種選擇。
由于這種效果很好的起到了對目標內(nèi)容的強調作用,因此無論是個人網(wǎng)站還是一些大的商業(yè)網(wǎng)站(如新浪,搜狐,網(wǎng)易等)都有應用。
在上個問題中,你已經(jīng)知道了去除掉鏈接下劃線的方法,這里不再贅述。下面的問題將是如何添加鼠標響應事件的過程。
同樣進入“Edit style sheet”窗口,單擊“New”確立新樣式,不同的是現(xiàn)在的Type類型中選擇最后的一項-“Use CSS selector”,“Selector”選單中選擇“a:hover” OK,進入編輯樣式窗口,設定“Type”項中的文字顏色為“紅色”,當然你還可以添加鼠標懸停時出現(xiàn)下劃線的效果。
24>如何讓網(wǎng)頁的背景圖片不跟隨內(nèi)容滾動?
背景圖片是很多網(wǎng)頁設計者經(jīng)常添加的東西,當網(wǎng)頁內(nèi)容超出一屏時,拉動滾動條背景圖片會與內(nèi)容相對靜止的一起滾動,那么能否鎖定背景不跟隨滾動呢?當然可以進入“Edit style sheet”窗口,單擊“New”確立新樣式,在TYpe中選擇“Redefine HTML Tag”,同時Tag選單選中“Body”,在左邊列表中選擇“Background”。設定“Attachment”(附件)為“fixed”。其中scroll代表默認使用的滾動顯示。
25> 背景音樂你一定知道吧,怎么添加呢?
在微軟的網(wǎng)頁工具-Frontpage中,有關于背景音樂的設置功能,那么DW顯然沒有作到這點,因此要使用的話,只能在源代碼中手動添加了。
在使用前,提醒大家一點,使用背景音樂一定要注意網(wǎng)頁文件的大小,不能顧此失彼。
代碼如下:
< EMBED src=“”autostart=“true”loop=“2”width=“80”height=“30”>
其中src指定音樂文件的位置,autostart為音樂文件上傳后的動作,true表示自動開始播放,false不播放(默認值)。
27> 如何自動加入網(wǎng)頁更改后的日期?
只需要在源文件
Dreamweaver網(wǎng)頁制作技巧心得體會3篇 dreamweaver網(wǎng)頁設計從入門到精通相關文章:
★ 推銷理論與技巧公選心得體會3篇(現(xiàn)代推銷理論與技巧心得體會)
★ 有效溝通技巧心得體會范本參考6篇(溝通方法與技巧心得體會)
★ 幼兒教師與家長溝通技巧心得體會3篇 家校溝通培訓家長心得體會與收獲
★ 2020銷售技巧培訓心得體會3篇(銷售實戰(zhàn)技巧提升培訓的感悟)