以實(shí)例說明Dreamwaver CS 6版本的應(yīng)用。即使現(xiàn)在用很多有關(guān)DreamwaverCS6版本的書籍資料,但是資料太過復(fù)雜,反而不知道從而下手。這篇經(jīng)驗(yàn)將以本人經(jīng)驗(yàn)說說Dreamwaver CS6 的使用。這里舉的例子是“新聞網(wǎng)頁首頁”的制作。
1、打開DW,DW界面如圖
2、分析所制作的網(wǎng)頁的需求,明確目標(biāo)
3、明確需求。如果是建議一個(gè)網(wǎng)站,需要建立一個(gè)站點(diǎn),方便管理并使制作步驟更為有條理。
4、新建站點(diǎn)彈出來的窗口。在這里我輸入的是“新聞網(wǎng)頁”,放在Dreamwaver CS6文件夾下的新聞網(wǎng)頁文件夾
5、在新聞網(wǎng)頁文件夾下新建“images”文件,導(dǎo)入制作網(wǎng)頁所需要的素材,這里所需要的素材都是圖片
6、新建HTML,選擇“創(chuàng)建”
7、在“標(biāo)題”中輸入“新聞網(wǎng)頁首頁”,轉(zhuǎn)換到“設(shè)計(jì)”界面
8、根據(jù)制作網(wǎng)頁需求插入表格,只是在行列有所變化,下面的“表格寬度”以下選項(xiàng)根據(jù)圖設(shè)置
9、插入表格如圖,選擇表格,會(huì)看到表格邊框變紅,選擇之后變黑。在屬性中對(duì)齊選項(xiàng)選擇“居中對(duì)齊”
10、在表格第一行第一列輸入“用戶名”,在第一行第二個(gè)表格插入“文件域”。然后是密碼,同樣的插入“文件域”。切換到“拆分”界面,選中密碼對(duì)應(yīng)的“文件域”,將“type”改為“password”
11、插入圖像,不知道怎么填的話就一直選擇“確定”即可
12、插入按鈕,同上面插入圖像的處理方法那樣處理,如果不知道填什么就一直“確定”,無妨。在屬性欄里的值改為“登錄”。然后插入圖像“谷歌logo”,附上效果圖
13、選中第二行,點(diǎn)擊鼠標(biāo)右鍵,選擇“表格”,“合并單元格”
14、在第二行插入圖片。完成頁面制作。保存HTML文件。然后在站點(diǎn)“新聞網(wǎng)頁”可以看到保存的HTML文件
15、點(diǎn)擊制作好的HTML文件,選擇用360瀏覽器打開,輸入用戶名和密碼,然后會(huì)看到如下情況:用戶名課件,密碼不可見,符合實(shí)際
16、當(dāng)然也可以在Dreamwaver CS6 的實(shí)時(shí)視圖中完成第15步