- HTML+CSS網站開發兵書
- 高洪濤編著
- 564字
- 2019-01-01 07:01:15
1.4 在Dreamweaver中直接編寫HTML
在Dreamweaver中可以直接書寫HTML的代碼,下面通過一個HTML實例進行說明。
1.4.1 編寫HTML代碼
(1)啟動Dreamweaver 8程序,會出現如圖1-17所示的界面,有三項可供選擇:打開最近項目、創建新項目、從范例創建。一般我們第一次打開Dreamweaver 8時,可以在“創建新項目”下選擇“HTML”命令,這時,就創建了一個HTML文件。

圖1-17 “工作區設置”對話框
(2)創建一個新的HTML文件后,打開一個操作界面,單擊“文檔工具欄”中的“代碼”選項卡,如圖1-18所示,這時就可以在“文檔窗口”中編寫代碼了。

圖1-18 Dreamweaver的代碼視圖
(3)在代碼中<title>與</title>標簽之間的內容就是新建HTML文件的標題,也就是將要在瀏覽器的標題欄中顯示的頁面標題,這里將其更改為“網頁文件的標題”。
(4)在<body>與</body>標簽之間添加主體內容的具體代碼如下。
<p>歡迎學習HTML語言!</p> <p>我們愿做您最忠實的良師益友!</p> <p>讓我們伴您一起走入HTML的世界吧!!</p>
這樣一個最基本的HTML文件就編寫完成了,具體效果如圖1-19所示。

圖1-19 完整的HTML文件
1.4.2 保存并查看HTML文件
(1)單擊“文件”→“保存”菜單命令,彈出“另存為”對話框,如圖1-20所示。

圖1-20 “另存為”對話框
(2)在“保存在”后面的下拉列表中選擇存盤的位置,在“文件名”后面的文本框中輸入文件的名稱“1-1”,設置文件的保存類型為“HTML文檔”,單擊“保存”按鈕完成文件的保存。
(3)雙擊保存的文件,可以在瀏覽器中看到文件的效果,如圖1-21所示。

圖1-21 1-1.html文件的頁面效果
推薦閱讀
- 網站建設與網頁設計從入門到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript
- Pro/ENGINEER三維造型設計實例精解
- 網頁配色從入門到精通
- 眾妙之門:自由網站設計師成功之道
- 園區網互聯及網站建設
- Div+CSS網頁制作實戰教程
- UI動效大爆炸:After Effects移動UI動效制作學習手冊
- Photoshop網頁設計從入門到精通
- 社交網站界面設計(原書第2版)
- 形·色:網頁設計法則及實例指導
- 淘寶店鋪頁面設計與裝修實戰教程
- 中文版Dreamweaver CC+Flash CC+Photoshop CC網頁設計基礎培訓教程
- 網頁美工設計基礎教程
- HTML+CSS+DIV網頁設計與布局
- JavaScript+jQuery Web開發案例教程(在線實訓版)