使用Dreamweaver制作簡單網站


上課過程中有的同學反應沒有聽懂,特寫此博客,將dreamweaver使用過程,細化到每一步,跟着做就行。

一、安裝dreamweaver。

1.dreamweaver免安裝版下載地址
鏈接:https://pan.baidu.com/s/1xfYq7cRQGHL-hl-OGjM7WQ
提取碼:iaud
2.將下載好的壓縮包解壓到任意位置。

3.打開里面的exe運行文件。、

二、創建站點

1.打開dreamweaver,點擊上面的站點。

2.選擇新建站點

3.輸入站點名
4.選擇站點目錄,在文件夾下創建站點目錄並選擇

5.點擊高級選擇

6.設置默認圖片文件夾,在站點目錄下創建image存放網站所需的圖片。

7.確定保存。
8.將圖片放入image

三、創建style目錄

style用於存放網站所需的css文件。

完成剛才步驟,可以看到右下角,有如圖的站點
1.創建style目錄,右鍵站點選擇創建文件夾。

2.然后創建css,存放到style目錄中

3.創建成功后,按ctrl+s,選擇style目錄,將文件命名為style.css保存。

四、創建html頁面

1.點擊左上角文件,選擇新建。

2.將剛才保存的css導入。

3.保存html,按ctrl+s,存放到站點根目錄下,命名index.html

五、創建網站布局


1.創建兩行兩列的表格

2.選擇左上角表格,設置寬高,垂直對其為頂端。

3.依次插入圖片。


4.選擇右側插入表格

選擇頂端對其

5.在上面的一個表格插入圖片

六、通過css調整背景色。

1.右鍵右側的style,選擇新建

2.選擇標簽,輸入body確定

3.設置字體大小為12px.

4.設置背景顏色為 #360,確定

頁面背景顏色綠了!

七、合並單元格子

1.選擇下方表格

2.同時選中兩個表格,右鍵-表格-合並單元格

3.設置單元格背景顏色為白色,垂直為頂端對其,輸入文字。版權所有,違法必究

八、創建iframe標簽

1.選中右側下方表格,在代碼區插入 <iframe src="main.html" width="100%" height="100%" frameborder="0" scrolling="no" name="in"> 代碼

2.頁面ctrl + s 保存查看效果
3.創建新的html,輸入hello world 保存 命名為 main.html

成功后站點如圖

回到 index

4.ctrl+s保存查看頁面情況。

如圖,頁內超鏈接完成,第一節課結束!!!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM