振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
網站設計教學 - 開始一個HTML網頁
作者 Sunming   
2011/03/10

由於HTML網頁設計的檔案是標準的ASCII文字檔,因此可以使用任意一個文字編輯器來打開並設計HTML檔。例如Windows系統中內建的記事本.如果使用Dreamweaver等設計軟體,則能以視覺化的方式進行網頁的設計製作。 

實例一:使用記事本編寫HTML頁面
 
操作步驟:
1.按一下"開始>所有程式>附屬應用程式>記事本"命令,打開"記事本"。

2.在記事本中直接輸入下面的HTML程式碼:
<html>
<!--聲明HTML頁面開始-->
<head><!--聲明HTML頭部開始--></head><!--聲明HTML頭部結束-->
<body><!--聲明HTML主體開始-->
第一個HTML文件
</body><!--聲明HTML主體結束-->
</html>
<!--聲明HTML頁面結束-->

3.按一下記事本功能表列中的"檔案 > 儲存檔案"命令,彈出"另存為"對話方塊.
4.在"保存類型"中選擇"所有檔","編碼"為ANSI,"檔案名"為1-end.htm,按一下"保存"按鈕.
5.關閉記事本,回到存檔的資料夾,按兩下1-end.htm檔,可以在流覽器中看見最終的頁面效果. 
 

實例二:使用Dreamweaver製作頁面
 
操作步驟:
1.按一下"開始>所有程式>Macromedia>Macromedia Dreamweaver"命令,啟動軟體的主程序.

2.按一下"建立新檔案"中的HTML,進入頁面編輯視窗.
在 Dreamweaver CS5 軟體的主編輯環境中,視窗分為「程式碼」、「分割」「設計」3種.
Dreamweaver默認進入的是程式碼和設計檢視,可以看到,軟體上半部分的程式碼視圖和下半部分的設計檢視是互相聯繫密不可分的,在程式碼視圖中所做的任何修改都會影響到設計檢視,反之亦然.
程式碼:在視覺化網頁的背後可以控制網頁的原始程式碼,如果想查看或編輯原始程式碼,可以進入該視圖.
設計:Dreamweaver是視覺化的網頁編輯軟體,所以設計檢視是最常用的.設計檢視中看到的網頁外觀和流覽器中看到的基本上是一致的.
分割:在這種視圖下,編輯視窗被分割成了上下兩部分,上面顯示的是原始程式碼視圖,下面是視覺化視圖,這樣就可以在選擇和編輯原始程式碼時即時地在視覺化視圖中看到結構.

3.在空白的位置輸入"Dreamweaver製作的最簡單的頁面"文字,以此作為頁面的正文.
4.按一下"檔案"功能表下的"儲存"命令,在對話方塊中選擇存檔的位置,按照前面介紹的方法將檔命名為 end.htm,然後按一下"保存"按鈕,這樣就又製作完成了一個頁面.
5.關閉 Dreamweaver,回到存檔的資料夾,按兩下 end.htm 檔,可以在流覽器中看到最終的頁面效果.

 

最後更新 ( 2011/05/16 )
相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇