上課過程中有的同學反應沒有聽懂,特寫此博客,將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保存查看頁面情況。
如圖,頁內超鏈接完成,第一節課結束!!!