入門:用Dreamweaver簡單描述制作網(wǎng)頁的基本步驟_Dreamweaver教程
本教程主要是針對(duì)初學(xué)者,如何使用Dreamweaver制作一個(gè)網(wǎng)頁?這個(gè)教程具體具體講解了制作網(wǎng)頁的步驟,及注重的問題,并且拿一個(gè)實(shí)例來給大家做了一下具體講解!
創(chuàng)建網(wǎng)頁頁面
1、在Dreamveaver“文件-新建-常規(guī)-基本頁-HTML”,這樣就建好了一個(gè)頁面,英文版的默認(rèn)的文件名為untitled.htm。中文版的的默認(rèn)的文件名為“無標(biāo)題文檔”。htm就表示這個(gè)網(wǎng)頁文件是一個(gè)靜態(tài)的HTML文件。給它改名為index.htm。
注:網(wǎng)站第一頁的名字通常是index.htm或index.html。其它頁面的名字可以自己取。這也就是主頁,上傳后打開網(wǎng)頁默認(rèn)連接到此頁。
2、在標(biāo)題空格里輸入網(wǎng)頁名稱,點(diǎn)擊修改-頁面屬性,打開“頁面屬性”窗口。在這里可以設(shè)置網(wǎng)站的標(biāo)題、背景顏色或背景圖像,超級(jí)鏈接的顏色(一般默認(rèn)即可),其他都保持默認(rèn)即可。
3.此時(shí)光標(biāo)位于左上角,可輸入一句話,如“歡迎來到我的主頁”。選取文字,用菜單“窗口/屬性”打開屬性面板,選取文字大小為6,再使文字居中,然后在文字前用幾個(gè)回車使其位于頁面中間等。
4.如要選取字體,則選擇字體中的最后一項(xiàng):編輯字體列表。然后在對(duì)話框中選 號(hào),接著在“可用字體”欄中選擇需要加入到字體列表中的一種字體,點(diǎn)擊中間的按鈕就可以加入了。
注:在網(wǎng)頁上最常用的是宋體字。不要將非凡的字體加到列表中使用,因?yàn)閯e人電腦上未裝就看不到。假如需要用的話,要做成圖片后再使用。
注:在網(wǎng)頁上打入空格的辦法是:把輸入法調(diào)為全角。
注:在網(wǎng)頁上換行的辦法是:shift Enter。只按Enter則為換段。
下面拿一個(gè)現(xiàn)成的例子來給大家講解一下:
現(xiàn)在,以下邊的簡單網(wǎng)頁為例,敘述一下制作過程。簡單網(wǎng)頁如下圖:

在開始制作之前,我們先對(duì)這個(gè)頁面進(jìn)行一下分析�?纯催@個(gè)頁面用到了哪些東西。
□網(wǎng)頁頂端的標(biāo)題“我的主頁”是一段文字。
□網(wǎng)頁中間是一幅圖片。
□最下端的歡迎詞是一段文字。
□網(wǎng)頁背景是一深紫紅顏色。
構(gòu)思好這個(gè)網(wǎng)頁的結(jié)構(gòu),我們就可以開始制作了。
首先啟動(dòng)Dreamweaver,確保你已經(jīng)用站點(diǎn)治理器建立好了一個(gè)網(wǎng)站(根目錄)。
為了制作方便,請(qǐng)您事先打開資源治理器,把要使用的圖片收集到網(wǎng)站目錄images文件夾內(nèi)。
【插入標(biāo)題文字】
進(jìn)入頁面編輯設(shè)計(jì)視圖狀態(tài)。在一般情況下,編輯器默認(rèn)左對(duì)齊,光標(biāo)在左上角閃爍,光標(biāo)位置就是插入點(diǎn)的位置。假如要想讓文字居中插入,點(diǎn)屬性面板居中按鈕即可。啟動(dòng)中文輸入法輸入“我的主頁”四個(gè)字。字小不要緊,我們可以對(duì)它進(jìn)行設(shè)置。
【設(shè)置文字的格式】 選中文字,在上圖屬性面板中將字體格式設(shè)置成默認(rèn)字體,大小可任意更改字號(hào)。并選中“B”將字體變粗。
【設(shè)置文字的顏色】首先選中文字,在屬性面板中,單擊顏色選擇圖標(biāo),在彈出的顏色選擇器中用滴管選取顏色即可。
【設(shè)置網(wǎng)頁的標(biāo)題和背景顏色】
點(diǎn)擊“修改”菜單選“頁面屬性”。系統(tǒng)彈出頁面屬性對(duì)話框(如下圖)

請(qǐng)?jiān)跇?biāo)題輸入框填入標(biāo)題“我的主頁”。
設(shè)置背景顏色: 網(wǎng)頁背景可以是圖片,也可以是顏色。此例是顏色。如上圖打開背景顏色選擇器進(jìn)行選取。假如背景要設(shè)為圖片,點(diǎn)擊背景圖象“瀏覽”按鈕,系統(tǒng)彈出圖片選擇對(duì)話框,選中背景圖片文件,點(diǎn)擊確定按鈕。
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動(dòng)換行
- 探討Dreamweaver制作網(wǎng)頁時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- 站內(nèi)搜索的實(shí)現(xiàn)-Dreamweaver構(gòu)建BlogBLOG
- 用Dreamweaver為網(wǎng)頁圖像添特效
- 十二個(gè)Dreamweaver鮮為人知的小秘訣
- Dreamweaver網(wǎng)頁制作教程:框架技術(shù)
- Dreamweaver MX進(jìn)階教程(七)創(chuàng)建基于框架的網(wǎng)頁
- Dreamweaver中加入豎直線的問題
- DW2004 中文亂碼解決方案 [3]
- DW MX 2004代碼編輯新功能
- 站點(diǎn)統(tǒng)計(jì)-Dreamweaver構(gòu)建Blog
- Dreamweaver層使用八定律
猜你也喜歡看這些
- 動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)視頻全教程
- DreamweaverMX網(wǎng)頁制作視頻教程
- Dreamweaver MX教程
- DreamweaverMX2004互動(dòng)網(wǎng)站百寶箱for PHP
- 視友工作室網(wǎng)站頁設(shè)計(jì)制作全面通
- 呂聰賢dreamweaver教程
- 開天辟地-網(wǎng)頁設(shè)計(jì)與網(wǎng)站架設(shè)
- 通過Dreamweaver CS3學(xué)習(xí)HTML+DIV+CSS 光盤/教程
- 網(wǎng)頁制作基礎(chǔ)教程
- 巧學(xué)巧用Dreamweaver制作網(wǎng)頁習(xí)題精解
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-入門:用Dreamweaver簡單描述制作網(wǎng)頁的基本步驟
。