導航:首頁 > 萬維百科 > dwcs6網頁h5設計教程

dwcs6網頁h5設計教程

發布時間:2021-02-09 01:03:58

1、怎麼用dreamweaver製作html網頁

創建網頁頁面

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、怎麼在DW中設計網頁啊。具體怎麼做

DW是網頁可視化工具,直接編輯就可以了html和css會自動生成,如果有特別的CSS得在代碼視圖裡面直接寫代碼

3、Dreamweaver CS6怎樣才能開發HTML5

呵呵,任何文本編輯器都可以開發HTML5,DW CS6怎麼會不行呢!新建的時候選擇最下面的更多,然後選擇HTML,然後右下角選擇文檔類型為HTML5。

4、用dw CS6製作網頁框架,怎麼製作?

在頁面中實現框架功能的標記有兩個:框架組標記<FRAMESET>… </FRAMESET>和框架標記<FRAME>。框架組標記的功能是劃分一個整體框架;<FRAME>的功能是設置整體框架中的某一個框架,並聲明其框架頁面的內容。
使用上述標記的語法格式如下:
<FRAMESET>
<FRAME src="URL">
<FRAME src="URL">

</FRAMESET>
(一)框架組標記
使用框架組標記的語法格式如下所示:
<FRAMESET 屬性=屬性值 >

</FRAMESET>
框架組常用屬性列表如下:

(二)框架標記
框架標記<FRAME>可以指定頁面的內容,所以可以將框架和包含其內容的文件聯系在一起。
使用框架標記的語法格式如下所示:
<FRAME src="文件名" name="框架名" 屬性=屬性值 noresize >

<FRAME src="文件名" name="框架名" 屬性=屬性值 noresize >
框架常用的屬性值如下:

其中scrolling取值說明如下:

END
創建框架
新建一個HTML空白頁
在菜單欄中選擇『插入』---『HTML'----'框架』---『左對齊』

在彈出的『框架標簽輔助功能屬性』對話框中選擇框架值和標題

在設計視圖中就會出現左右兩個框架

菜單欄中選擇『文件』---『保存全部』,在彈出的『另存為』對話框保存為1.html

點擊右框架,選擇『文件』--『框架另存為』,保存為2.html
點擊左框架,選擇『文件』--『框架另存為』,保存為3.html
在設計視圖中選中框架邊框,如下圖:這個邊框很隱蔽,不好找

選中邊框之後,屬性面板會變這樣:

選擇需要調整的參數,左右邊框可以選擇,然後點擊『文件』---『保存全部』

按F12預覽

5、DW (dreamweaver)網頁製作DIV CSS布局詳解視頻教程

DIV+CSS 網頁製作,建議還是先多了解一下他的基本實現原理,頁面實現基本機制,從基礎的學起,可以先看看 http://www.w3school.com.cn/ 上面關於 XHTML 以及 CSS 的內容,當然,有時間的話,也可以先看看 HTML 的內容。
里邊,講解的過程中會有示例在線練習,預覽效果,很是方便。
大概了解基本原理,會有一些簡單標簽屬性之後,可以多看看別人寫的。
至於視頻教程,又不是 photoshop , 講解太慢,而且沒必要哈。

6、用DreamweaverCS6製作網頁的操作步驟

用DreamweaverCS6製作網頁的操作步驟

打開DreamWeaver CS6。關於DreamWeaver CS6的下載、安裝及破解,在我早先的一個經驗中有寫道,需要的同學可以看下。

選擇「站點」>「新建站點」命令,打開「新建站點窗口」。

設置新站點的信息,「站點」項用來設置站點名稱和本地站點文件夾。

伺服器」項用於動態網站的構建。靜態網站並不需要。點擊「+」,來添加一個伺服器。

調試網站我們一般「連接方法」選擇「本地/網路」。「伺服器文件夾」選擇你安裝的伺服器位置,一般在C盤(我安裝的AppServ,則在C:AppServwww文件夾)。因為站點文件夾在伺服器主目錄下的「yige」,所以「Web URL」設置為「localhost/yige」。

勾選伺服器的「測試」。

「版本控制」和「高級設置」項需要修改的很少。因此不再多說。

7、如何用dreamweaver cs6製作網頁

工具/原料

Dreamwaver CS6
所製作的網頁的素材(圖片,音頻等)
方法/步驟

1
打開DW,DW界面如圖

2
分析所製作的網頁的需求,明確目標

3
明確需求。如果是建議一個網站,需要建立一個站點,方便管理並使製作步驟更為有條理。

4
新建站點彈出來的窗口。在這里我輸入的是「新聞網頁」,放在Dreamwaver CS6文件夾下的新聞網頁文件夾

5
在新聞網頁文件夾下新建「images」文件,導入製作網頁所需要的素材,這里所需要的素材都是圖片

6
新建HTML,選擇「創建」

在「標題」中輸入「新聞網頁首頁」,轉換到「設計」界面

根據製作網頁需求插入表格,只是在行列有所變化,下面的「表格寬度」以下選項根據圖設置

插入表格如圖,選擇表格,會看到表格邊框變紅,選擇之後變黑。在屬性中對齊選項選擇「居中對齊」

在表格第一行第一列輸入「用戶名」,在第一行第二個表格插入「文件域」。然後是密碼,同樣的插入「文件域」。切換到「拆分」界面,選中密碼對應的「文件域」,將「type」改為「password」

插入圖像,不知道怎麼填的話就一直選擇「確定」即可

插入按鈕,同上面插入圖像的處理方法那樣處理,如果不知道填什麼就一直「確定」,無妨。在屬性欄里的值改為「登錄」。然後插入圖像「谷歌logo」,附上效果圖

選中第二行,點擊滑鼠右鍵,選擇「表格」,「合並單元格」

在第二行插入圖片。完成頁面製作。保存HTML文件。然後在站點「新聞網頁」可以看到保存的HTML文件

點擊製作好的HTML文件,選擇用360瀏覽器打開,輸入用戶名和密碼,然後會看到如下情況:用戶名課件,密碼不可見,符合實際

當然也可以在Dreamwaver CS6 的實時視圖中完成第15步

8、dreamweaver怎麼製作網頁教程 dw建站設計網頁

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鍵,再拖動角上的點,可以使圖片保持寬高比例拉伸。如要恢復這原始大小,則單擊右下角的「重設大小」按鈕。

與dwcs6網頁h5設計教程相關的知識