1、如何使用dreamweaver製作網頁
1、在Dreamveaver「文件-新建-常規-基本頁-HTML」,這樣就建好了一個頁面,英文版的默認的文件名為untitled.htm。中文版的的默認的文件名為「無標題文檔」。htm就表示這個網頁文件是一個靜態的HTML文件。給它改名為index.htm。
註:網站第一頁的名字通常是index.htm或index.html。其它頁面的名字可以自己取。這也就是主頁,上傳後打開網頁默認連接到此頁。
2、在標題空格里輸入網頁名稱,點擊修改-頁面屬性,打開「頁面屬性」窗口。在這里可以設置網站的標題、背景顏色或背景圖像,超級鏈接的顏色(一般默認即可),其他都保持默認即可。
3.此時游標位於左上角,可輸入一句話,如「歡迎來到我的主頁」。選取文字,用菜單「窗口/屬性」打開屬性面板,選取文字大小為6,再使文字居中,然後在文字前用幾個回車使其位於頁面中間等。
4.如要選取字體,則選擇字體中的最後一項:編輯字體列表。然後在對話框中選+號,接著在「可用字體」欄中選擇需要加入到字體列表中的一種字體,點擊中間的按鈕就可以加入了。
註:在網頁上最常用的是宋體字。不要將特殊的字體加到列表中使用,因為別人電腦上未裝就看不到。如果需要用的話,要做成圖片後再使用。
註:在網頁上打入空格的辦法是:把輸入法調為全形。
註:在網頁上換行的辦法是:shift+Enter。只按Enter則為換段。
下面拿一個現成的例子來給大家講解一下:
現在,以下邊的簡單網頁為例,敘述一下製作過程。
在開始製作之前,我們先對這個頁面進行一下分析。看看這個頁面用到了哪些東西。
□網頁頂端的標題「我的主頁」是一段文字。
□網頁中間是一幅圖片。
□最下端的歡迎詞是一段文字。
□網頁背景是一深紫紅顏色。
構思好這個網頁的結構,我們就可以開始製作了。
首先啟動Dreamweaver,確保你已經用站點管理器建立好了一個網站(根目錄)。
為了製作方便,請您事先打開資源管理器,把要使用的圖片收集到網站目錄images文件夾內。
【插入標題文字】
進入頁面編輯設計視圖狀態。在一般情況下,編輯器默認左對齊,游標在左上角閃爍,游標位置就是插入點的位置。如果要想讓文字居中插入,點屬性面板居中按鈕即可。啟動中文輸入法輸入「我的主頁」四個字。字小不要緊,我們可以對它進行設置。
【設置文字的格式】 選中文字,在上圖屬性面板中將字體格式設置成默認字體,大小可任意更改字型大小。並選中「B」將字體變粗。
【設置文字的顏色】首先選中文字,在屬性面板中,單擊顏色選擇圖標,在彈出的顏色選擇器中用滴管選取顏色即可。
【設置網頁的標題和背景顏色】
點擊「修改」菜單選「頁面屬性」。系統彈出頁面屬性對話框
請在標題輸入框填入標題「我的主頁」。
設置背景顏色: 網頁背景可以是圖片,也可以是顏色。此例是顏色。如上圖打開背景顏色選擇器進行選取。如果背景要設為圖片,點擊背景圖象「瀏覽」按鈕,系統彈出圖片選擇對話框,選中背景圖片文件,點擊確定按鈕。
設計視圖狀態,在標題「我的主頁」右邊空白處單擊滑鼠,回車換一行,按照以下的步驟插入一幅畫圖片,並使這張圖片居中。您也可以通過屬性面板中的左對齊按鈕讓其居左安放。
【插入圖像】選擇以下任意一種方法:
(1)使用插入菜單:在「插入」菜單選「圖像」,彈出「選擇圖像源文件」對話框,選中該圖像文件,單擊確定。如下圖:
(2)使用插入欄:單擊插入欄對象按鈕>選 按鈕,彈出「選擇圖像源文件」對話框,其餘操作同上。
(3)使用面板組「資源」面板(如下圖):點按鈕,展開根目錄的圖片文件夾,選定該文件,用滑鼠拖動至工作區合適位置。
註:為了管理方便,我們把圖片放在「images」文件夾內。如果圖片少,您也可以放在站點根目錄下。注意文件名要用英文或用拼音文字命名而且使用小寫,不能用中文,否則要出現一些麻煩。
一個圖片就插入完畢了。(插入*.swf動畫文件,選擇「插入」菜單>媒體>Flash)。
【輸入歡迎文字】
在圖片右邊空白處單擊,回車換行。仍然按照上述方法,輸入文字「歡迎您……」然後,利用屬性面板對文字進行設置。
保存頁面。
一個簡單的頁面就這樣編輯完畢了。
【預覽網頁】在頁面編輯器中按F12預覽網頁效果。
網站中的第一頁,也就是首頁,我們通常在存檔時取名為index.htm。
【小結】我們製作了一個簡單的網頁。
內容有四:
①圖片插入和對齊設置;
②文字的格式、顏色和加粗等設置;
③背景顏色的設置;
④預覽網頁,查看實際效果。
2、怎樣使用Adobe Dreamweaver製作網頁
如果你想做前端這行,建議你先學好html,css和javascript基礎,dreamweave只是加快html頁面的開發速度而已,如果你不懂html,css,很難做出效果好的頁面,也沒有公司會要你。
如果只是想做網站,用dw只能做靜態頁面沒有任何意義,現在網站都是動態有後台功能的,建議直接下載pageadmin這些網站管理系統來用。
3、專業的網頁設計師是用DW做網頁,還是自己用記事本寫html。
1,
word是文字處理軟體,能做網頁是為了方便,但決不是做專門做網頁的人用的.
你寫出什麼,出來的就是什麼.
dw是做網頁的專業軟體,目前設計師必須會用的,應該算首選.
寫代碼可以做出響應的效果,當然也可以像word一樣,看著編輯,他自動生成編碼.
2,無論什麼語言,在dw里都可以做,當然你要符合他的編碼規格,只要你寫的代碼是正確的,在記事本,word或其他什麼地方寫不是問題.
3,dw功能強大,word根本沒法比,當然前提是你兩個都會用.
4,沒人用word做網頁,你看看招聘網頁設計的沒有要求會用word吧.
5,很簡單!
DW是Macromedia公司的
微軟是Microsoft.
軟體升級那是肯定的,無論哪個軟體不升級就只能被淘汰.
6,微軟的Office里Frontpage應該算是做網頁的,從這點就能看出word絕對不是做網頁設計用的,
Frontpage雖然可以做網頁,但專業網頁設計師應該沒有用它的,至少我和我認識的人都沒有用,功能太少,不所以很簡單,如果是做個人網站,要求不太高的話,可以用用.
如果你想做的專業點就用dw,其他的不用學了一個就夠.
4、用DW製作網頁,好後怎麼讓大家都看到我的網頁?
最簡單的辦法,從網上搜索「免費個人網站」,然後找個提供免費網站空間的,將你的網頁傳到那個網站空間,再按照空間提供商提供的域名訪問即可。
5、請問做網頁用代碼好還是直接用dw設計好?
盡量不要用DW這些可視化的工具寫,不過用於查看還是不錯的,因為當你把代碼編輯窗口和預覽窗口分成兩格時,比較容易定位,這也是使用DW比較少的好處了。
寫網頁時,你會發現直接放置控制項的方法很難定位,或者初期定位了很難調整,因為html里的定位是用div,css以一些規則來進行的,因此應該學會這些規則,而不是用可視化工具來實現,這樣你才能真正掌握html編寫網頁。用一個簡單的文本編輯器即可,有html和css語法加亮最好,如notepad++。
6、平面設計師學網頁設計用Dreamweaver好還是用HTML代碼編輯器?
你好 ,不是這樣的 。我和你說說 雖然我不是平面設計師 ,但是我是 做php的 。所以對 平面設計有點點了解 。下面我和你說一下你的問題。
平面設計有 :網頁設計 ,廣告設計 。產品包裝設計 等等 。
平面設計,需要使用的 工具。就是圖形 圖形的 優化和製作的 工具 。分別是 矢量圖形,和像素圖形 ,像素也叫做點陣圖,點圖。軟體有:photoshop、Illustrator、coreldraw、還有一些 3D 的設計軟體 。
所為的平面設計 ,就是設計平面的 樣式風格 排版等等。什麼是平面 也是 一張圖片上面的 風格樣式。做網頁設計 ,就是把網頁想做成一張圖片 ,這就是 平面設計師的 工作 。有的平面設計師會平面圖切片,交給前端的 編程師,進行網頁的 製作與編輯。
你說的問題 ,不是平面設計師的工作范圍 。而是前端編程師的工作范圍 。Dreamweaver軟體,是網頁代碼編輯器,用它可以快速的編輯網頁 ,而根本不需要了解代碼的寫法,只需要會用軟體的使用就可以了。而一個成功網站編程師 ,必須學會 手打代碼。這樣才能更加的熟練 處理網頁製作中帶來的問題 。用Dreamweaver 編輯網頁 有一個誤區,就是很多人 使用表格來編輯網頁 。而不是使用 div css 布局 。第二個 ,問題,Dreamweaver編輯的網頁 ,不靈活 ,而且代碼多。
Dreamweaver 只成做為,一個鋪助工具的使用。
在說一下 網站製作 ,分為前端 和 後端 ,前端就是 製作網頁的展現區。後端 就是製作網站的 後台。而網頁平面設計 就製作 網頁 前端和後台的 風格樣式 ,比如 你看一個漂亮的網頁 的外觀 ,那就是 平面設計師做好的 。還有一點問題 ,網頁平面設計,要和前端編程師 ,有溝通,這樣製作的網頁設計才會更加完美。有些時候 網頁不是 一張靜態的 圖片 ,有的 會有 幻燈片,導航動畫 ,總之有的網頁會有很多 的特效。這些就需要 網頁平面設計 和前端編程人員的 配合完成的 。好了就說這些吧 ,
7、如何使用Dreamweaver製作一個網頁
Dreamweaver這一款專業的網頁製作軟體,相信相關專業的人員都不會陌生。可以說,它是第一套針對專業網頁設計師特別發展的視覺化網頁開發工具,利用它可以輕而易舉地製作出跨越平台限制和跨越瀏覽器限制的充滿動感的網頁。
這里西西給大家帶來一個dreamweaver製作網頁的教程,初學DW的朋友可以參考一下。
一、定義站點
1、 在任意一個根目錄下創建好一個文件夾(我們這里假設為E盤),如取名為MyWeb。
***備註:網站中所用的文件都要用英文名。
2、打開Dreamweaver,選擇「站點—新建站點」,打開對話框。在站點名稱中輸入網站的名稱(可用中文),在本地根文件夾中選擇剛才創建的文件夾(E:web)。然後確定即可。
***備註:再次打開Dreamweaver,會自動找到剛才設立的站點。如果有多個站點,可以在菜單「站點—打開站點」中去選擇。
二、創建頁面
1、在本地文件夾E:\MyWeb下面的空白處,按右鍵選「新建文件」,這樣就建好了一個頁面,默認的文件名為untitled.htm。htm就表示這個網頁文件是一個靜態的HTML文件。給它改名為index.htm。
***網站第一頁的名字通常是index.htm或index.html。其它頁面的名字可以自己取。
2、雙擊index.htm進入該頁面的編輯狀態。在標題空格里輸入網頁名稱,按右鍵選頁面屬性,打開「頁面屬性」窗口。在這里可以設置網站的標題、背景顏色或背影圖像,超級鏈接的顏色(一般默認即可),其他都保持默認即可。
3.此時游標位於左上角,可輸入一句話,如「歡迎來到我的主頁」。選取文字,用菜單「窗口/屬性」打開屬性面板,選取文字大小為6,再使文字居中,然後在文字前用幾個回車使其位於頁面中間。
4.如要選取字體,則選擇字體中的最後一項:編輯字體列表。然後在對話框中選+號,接著在「可用字體」欄中選擇需要加入到字體列表中的一種字體,點擊中間的按鈕就可以加入了。
***在網頁上最常用的是宋體字。不要將特殊的字體加到列表中使用,因為別人電腦上未裝就看不到。如果需要用的話,要做成圖片後再使用。
***在網頁上打入空格的辦法是:把輸入法調為全形。
***在網頁上換行的辦法是:shift+Enter。只按Enter則為換段。
三、為頁面添加圖片
1、在本地文件夾E:\MyWeb下面的空白處,按右鍵選「新建文件夾」,這樣建立了一個文件夾,用它來放圖片,可以改名為tu或pic或images都可以。
2、用菜單「窗口/對象」打開對象面板,點擊「插入圖像」,在對話框里選要插入的圖片。如果會出現對話框:「你願意將該文件復制到根文件夾中嗎?」,必須選「是」,然後將它保存到剛建好的文件夾里。
3、選中該圖片,打開屬性面板,可以在上面為圖片取名,重新設置圖片的高、寬,拖住圖片角上的點可以變大小。按住shift鍵,再拖動角上的點,可以使圖片保持寬高比例拉伸。如要恢復這原始大小,則單擊右下角的「重設大小」按鈕。
4、 「鏈接」可以直接在這里輸入地址。「替代」是圖片的說明,即滑鼠指向圖片所顯示的文字;「邊框」是圖片邊框寬度,「對齊」是對齊方式。
四、添加超級鏈接
1、為文字添加鏈接。
比如,在頁面上輸入「我的文章」,然後將其選中,打開屬性面板,在「鏈接」一格中,選擇它所要鏈接到的頁面即可。後面一格「目標」我們一般常用的是self即打開的新窗口代替了現開的窗口;或是選擇blank即打開新窗口。
2、為圖片添加鏈接
與上面文字的鏈接同理,插入圖片,然後在屬性面板中的鏈接一格中選擇即可。
****圖片可以創建不同的多個鏈接。方法如下:
在屬性面板中的「地圖」一項下面有一些圖形,比如點擊方形,游標變成十字,在圖片上畫一個藍色矩形的熱區,此時在屬性面板上可以為這個熱區設置鏈接地址,滑鼠指向會顯示。同樣,再用圓形設置一個熱區,就可以再為該圖片設置其他鏈接了。
3、添加E-mail鏈接
選中需要添加E-mail鏈接的文字或圖片,打開屬性面板,在「鏈接」一格中輸入填寫郵件地址。格式如下:mailto:郵件地址。注意中間不空格。
4、如果鏈接到瀏覽器無法打開的文件,例如exe、Zip等文件,那麼瀏覽者在點擊這個鏈接的時候,就會實現文件下載、或是在線播放的功能。
五、表格的使用
1、點擊插入/表格,打開表格面板進行設置。行數、列數、寬度、邊框等,「單元格填充」為單元格內側與內容的距離;「單元格間距」為單元格之間的距離,單位均為像素。
2、插入表格後,在表格的邊框上點擊一下,可以全選整個表格。然後在下面的屬性面板里可以進行各種設置。
3、把游標移到其中一個單元格,此時看到的屬性面板,就是單元格的屬性面板。也可以進行各種關於單元格的操作。如背景色、背景圖、邊框、合並、拆分等。
六、關於表格的其他操作
一製作細線表格 原理:
1、選中整個表格,設置其背景為黑色(該顏色即表格線的顏色)。
2、選中所有單元格,設置其背景為白色。
二自動格式化表格
1、先製作好一張表格,然後選中。
2、選菜單中的命令/格式化表格。即可以其中選擇預設好的一些表格樣式。
三一像素分割條
1、插入一個1行1列,寬為200像素,邊框邊距均為0的表格。
2、選中表格,設置表格高為1像素,並設置一個背景色(即所要的線條顏色)。
3、切換到代碼和設計窗口,將代碼<td> 刪除。
七、用表格構建完整的頁面
一網頁頂部(一般包括圖標、廣告、導航菜單)
1、創建一個1行2列,寬為760像素,邊框及邊距均為0的表格。
2、選中表格,設置排列方式為居中對齊,背景色為#3366CC。
3、將游標置於左邊單元格中,設置其水平排列為左對齊,垂直排列為頂端對齊,然後插入一張圖像,一般在此插入的是網站的圖標,即logo。
4、將游標置於右邊單元格中,設置其寬度為500,水平排列為居中對齊,垂直排列為中間,然後插入圖像,一般是網頁廣告,即banner。
5、將游標置於剛完成的表格之後,插入/表格,創建一個1行1列,寬為760像素,邊框及邊距均為0的表格。
6、選中剛創建的表格,設置排列方式為居中對齊,背景色為#005173。
7、在該表格中依次插入多個圖像,作為導航條菜單。
二網頁中部(左邊欄目列表、中間網站新聞、右邊欄目列表)
1、 在導航條表格後面,插入/表格,創建一個1行3列,寬為760像素,邊框及邊距均為0的表格。並設置排列方式為居中對齊,背景色為#FFFFFFF。
2、 將游標置於左邊單元格中,設置其寬度為18%,水平排列為居中對齊,垂直排列為頂端對齊,然後插入一張圖像,插入一個導航條。
3、 將游標置於剛插入的圖片後,插入/表格,插入一個12行1列,寬為90%的表格。設置其單元格間距為1,背景色為#CCCCCC。
4、 將游標放在表格第一個單元中,設置其高為20,背景色為#FFFFFF。插入/圖像,插入一個導航文字前面的小點。同樣設置其他11個單元格,這樣左邊的欄目分類列表就完成了。
5、 將游標置於主體表格的中間單元格中,設置其寬度為66%,水平排列為居中對齊,垂直排列為頂端對齊,然後插入/圖像,插入一個導航條。
6、 將游標置於圖像後,插入/表格,插入一個4行1列,寬為95%的表格。設置其單元格間距為1,背景色為#CCCCCC。
7、 將游標置於表格的第一個單元格中,拖動滑鼠,將4個單元格都選中,設置高為60,背景色為#FFFFFF。
8、 將游標置於主體表格右邊的單元格中,設置其寬度為16%,水平排列為居中對齊,垂直排列為頂端對齊,插入/圖像,插入一個導航條。
9、 將游標置於圖像後,插入/表格,插入一個7行一列,寬為90%的表格。設置其間距為1,背景色為#CCCCCC。
10、按住Ctrl鍵,用滑鼠點擊剛插入的表格的第1、3、5、7單元格,然後設置它們的高為55,背景色為#FFFFFF。
11、選中第2、4、6單元格,設置其高為6,背景色為#FFFFFF。
12、切換到源代碼窗口,將第2、4、6單元格中的空格符號「 」刪除。
三網頁底部(一般包括版權信息及其他相關內容)
1、 將游標置於主體表格後,插入/表格,創建一個2行2列,寬為760像素,邊框及邊距均為0的表格。
2、 選中表格,設置排列方式為居中對齊,背景色為#3366CC。
3、 將游標置於表格第1行的左邊單元格中,設置其寬度為50%,水平排列為默認,垂直排列為基線,背景色為#FFFFFF,然後輸入版權信息,內容顏色隨便。
4、 將游標置於表格第1行右邊單元格中,插入/圖像,插入一個圓角圖像,在它後面輸入Email字樣,設置其大小和顏色為1和#FFFFFF。
5、 插入/表單對象/文本域,插入一個文本域,寬度可以隨意。
6、 插入/圖像,插入一個GO的圖像。
7、 設置頁屬性。點擊菜單修改/頁面屬性,在標題一欄中輸入標題,並選擇背景圖像,將頂部邊界設為0。
***將整個網頁分部分放到不同的表格中組合而成,還可以加快瀏覽器讀取頁面的時間。;因為瀏覽器是讀完整個表格後才顯示內容的,所以最好不要框在整個一個表格中。
八、用布局表格構建完整的頁面
1、 單擊插入/布局,裡面的布局視圖按鈕,就切換到布局視圖狀態(默認為標准視圖)。也可以用菜單里的查看/表格視圖/布局視圖來進入。
2、 先單擊繪制布局表格按鈕,然後在頁面中像繪圖一樣創建出布局表格。
3、 就像上一個例子一樣,先繪制好網頁的頂部,再中部,再底部的大表格。
4、 再單擊繪制布局單元格按鈕,然後在已經繪制好的布局表格中,再繪制布局單元格。
5、 返回到標准視圖,在已經劃分好的表格里,再插入嵌套的小的表格,把頁面再細化,就可以完成整個頁面的設計了。
****注意把整個頁面都放在一個大的布局表格中,因為這樣的網頁瀏覽速度會很慢。應該按照頁面的版面和內容劃分出幾個布局表格,然後在其中分別插入布局單元格。
九、層的使用
1、點擊插入/層。也可以點擊圖標,然後拖動滑鼠創建出一個層。
3、選中創建的層,看屬性面板。「層編號」和「標簽」都使用默認即可。「層編號」是編程時需要用的,我們現在一般不用。「上」即距頁面上邊界的距離;「左」是距左邊界的距離。「z軸」是層的順序,數字大的疊加在數字小的上面。
****如不設置顏色時,層是透明的。
4、點中層左上角的小方框可以隨意拖動層,大小也可以調節。
5、「溢出」一欄中,當文字多於層的大小時,visible(超出的部分照樣顯示)、hidden(超出部分隱藏)、scroll(不管有否超出,都顯示滾動條)、auto(有超出時才出現滾動條)。
6、點擊菜單窗口/其他/層,此時將出現層管理窗口。可以在其中修改層的名稱和Z軸值,也可以點擊眼睛圖標使層可見或不可見。還有一個防止重疊的選項。
7、層的對齊。按住shift鍵,同時選中幾個層。然後用修改/對齊,用這里的選項。
8、嵌套層。⑴首先在文檔中插入一個層。⑵將游標置於該層內,然後繼續插入一個層,就得到了嵌套層。⑶裡面的叫子層,外面的父層。它們的Z軸順序是一樣的。拖動父層時,子層也會相對移動。移動子層時,父層不會隨之移動。
8、怎麼用dreamweaver製作簡單網頁
利用這個dreamweaver輔助軟體需要有以下幾個要求:
1、要熟練的掌握相應的代碼;
2、要靈活的運用div+css;
3、要有邏輯和變通能力。
只要能夠符合上述要求的,就可以自己嘗試去製作一個簡單的網頁,使用div+css時,將css弄成導入式的即可(這個軟體有這功能)!
9、dw怎麼做這個網頁(用設計)
一個表格一張圖片幾個文字 最簡單了
10、如何用dw軟體製作網頁的小網站
打開DW,DW界面如圖
2
分析所製作的網頁的需求,明確目標
3
明確需求。如果是建議一個網站,需要建立一個站點,方便管理並使製作步驟更為有條理。
4
新建站點彈出來的窗口。在這里我輸入的是「新聞網頁」,放在Dreamwaver CS6文件夾下的新聞網頁文件夾
5
在新聞網頁文件夾下新建「images」文件,導入製作網頁所需要的素材,這里所需要的素材都是圖片
6
新建HTML,選擇「創建」
在「標題」中輸入「新聞網頁首頁」,轉換到「設計」界面
根據製作網頁需求插入表格,只是在行列有所變化,下面的「表格寬度」以下選項根據圖設置
插入表格如圖,選擇表格,會看到表格邊框變紅,選擇之後變黑。在屬性中對齊選項選擇「居中對齊」
在表格第一行第一列輸入「用戶名」,在第一行第二個表格插入「文件域」。然後是密碼,同樣的插入「文件域」。切換到「拆分」界面,選中密碼對應的「文件域」,將「type」改為「password」
插入圖像,不知道怎麼填的話就一直選擇「確定」即可
插入按鈕,同上面插入圖像的處理方法那樣處理,如果不知道填什麼就一直「確定」,無妨。在屬性欄里的值改為「登錄」。然後插入圖像「谷歌logo」,附上效果圖
選中第二行,點擊滑鼠右鍵,選擇「表格」,「合並單元格」
在第二行插入圖片。完成頁面製作。保存HTML文件。然後在站點「新聞網頁」可以看到保存的HTML文件
點擊製作好的HTML文件,選擇用360瀏覽器打開,輸入用戶名和密碼,然後會看到如下情況:用戶名課件,密碼不可見,符合實際
步驟閱讀
當然也可以在Dreamwaver CS6 的實時視圖中完成第15步