簡單網頁(簡單網頁制作成品和代碼)

更新時間:2023-03-01 00:19:29 閱讀：評論：0

怎么制作簡單的網頁

制作簡單的網頁可能有很多方法，用不同的軟件。今天我來介紹一下用Dreamweaver CS5中文版來制作簡單的網頁步驟。由于DW軟件具有可視化的特點，所以學起來很簡單，和office word一樣簡單的工具。
首先下載安裝Dreamweaver，打開后，新建一個網頁，一般選擇“HTML”建立網頁。選擇“經典”界面，有助于我們更便捷使用這個軟件。
下面選擇這三個界面，代碼、拆分、設計，一般默認設計界面，對于新手這個功能具有可視化，能更好的制作網頁。
下面我們來制作網站站點，在電腦上建一個文件作為根目錄。我們所建網站的所有文件和網頁都保存在這個文件中。站點的作用就是使你的網站網頁之間框架清晰。同時給站點起個名字。
然后再在站點根目錄下建立一個專門儲存網站圖片的文件，并設置默認。這樣你添加到這個網站的所有圖片都自動保存到這個文件，不會丟失。注意文件命名要用英文。下面我用我建立的（籃球資訊網）來介紹，點擊右下方籃球資訊網——下拉點擊管理站點——點擊高級設置——設置默認圖像文件夾為剛建立的images。保存。
下面我們來制作這個網站首頁，先學習添加圖片。插入——圖像——選擇素材添加。點擊圖片，下面屬性可以編輯修改圖片大小，添加超鏈接等等。下面我修改圖片大小做示范。
下面學習添加文本。編輯“籃球資訊網”，下面屬性可以設置文本字體、添加超鏈接等等，點擊頁面屬性，可以詳細編輯文本屬性。
網頁基本就是文字和圖片的組合，添加視頻還需要學習者好好搜索Dreamweaver 的使用視頻加以學習。最后制作完一個網頁要記得保存。左上角文件——保存。
最后我們學習添加超鏈接。我用建立的第二個網頁來做示范。選中籃球資訊網文本，點擊頁面下方屬性——鏈接——點文件小按鈕——選中第一個網頁，這樣籃球資訊網文本變成藍色。這是網站內部鏈接，相反就有外部鏈接。添加如圖，一定要寫http://......就可以了。
最后我們瀏覽網頁。左上角文件——在瀏覽器中瀏覽網頁，點擊網頁中兩個鏈接都能到達指定網頁。

最簡單的網頁怎么制作

在我們的網絡時代，網頁已經很多了，那么，最簡單的網頁怎么制作呢？小編這里提供個方法給大家，這也是最為簡單的方法了，小編在這和大家說下：最簡單的網頁怎么制作？
我們打開電腦E盤（C盤除外），任意的一個盤里面，如圖所示。
我們接著任意位置新建一個文本文檔，輸入任意內容，如圖所示。
我們接著點擊上方的“查看”，如圖所示。
我們開啟文件擴展名，如圖所示。
我們單擊下這個文件夾，接著選擇“重命名”，如圖所示。
我們接著就將“.text”更改為“.html”，進行確認操作，如圖所示。
我們就可以看到，它是一個網頁了，打開，在瀏覽器上就可以看到這個網頁內容，如圖所示。

如何制作網頁如何制作一個簡單的網頁

1、首先，請先確認你的系統中文件擴展名已經打開。方法是：打開我的電腦，點擊文件夾選項，打開文件夾選項對話框，確保“隱藏已知文件的擴展名”前面的小勾已經去掉，如果沒有去掉，請把小勾去掉。

2、然后，創建你的第一個網頁文件。為了便于管理，請先創建一個文件夾，用來存放你的網頁文件和圖片等資料。在你創建的文件夾中右擊，選擇新建，文本文件。

3、然后，對這個文件重命名為index,把小點后面的txt改為html。這樣一個網頁文件就準備好了。

4、html是網頁文件的擴展名。擴展名用來區分文件的類型，擴展名也用來告訴用哪個軟件打開。比如html就會告訴瀏覽器這是一個網頁，需要用網頁的方式來解析并顯示。

5、然后，用notepad++打開這個index.html文件，在編寫之前，我們有必要先來了解一下一個網頁最基本的結構：網頁有頭部和主體兩大部分組成。頭部和主體都包含在一對<html>標簽之內。因為網頁是html語言編寫的，html語言是一門標記語言，就是用一對對的標簽來標記網頁中的內容，從而對內容進行組織和管理。

6、然后，標簽就是網頁中內容的容器。

7、整體的最外層標簽是<html>和</html>,頭部是<head>和</head>標簽。在<head>標簽中，又可以寫<title>(標題)等標簽。而<head>標簽內的內容一般是不會顯示在瀏覽器窗口中的。顯示在瀏覽器窗口給我們看的內容，都在<body></body>標簽里。

8、然后，了解了網頁的基本結構，我們就開始來寫一段完整的網頁代碼。

9、最后，保存之后我們在瀏覽器中預覽。上面我們說過，<head>標簽里的內容不會顯示在瀏覽器中，但是我們在<head>中寫了一句：<title>這是網頁的標題</title>，如果你細心就會發現，在瀏覽器的標簽選項卡上顯示了“這是網頁的標題”這幾個字。

10、原來網頁標題就是顯示在瀏覽器標題欄上的內容。網頁的標題不等于內容的標題，于是我們寫的
這是一個一級標題，它被顯示在瀏覽器窗口中。

簡單網頁制作

一、FrontPage 2003簡介

FrontPage 2003是由Microsoft公司推出的Office 2003組件之一。FrontPage 2003的啟動與退出、文件的打開與保存與Office系列中其他軟件相同。FrontPage 2003啟動后，主窗口如圖6-61所示，菜單部分外貌與Office中的其他軟件相似。

與以往的版本相比，FrontPage 2003有以下幾個新功能：

（1）自定義瀏覽器分辨率預覽檢查；

（2）描摹圖像；

（3）層功能；

（4）插入交互式按鈕；

（5）行為的應用；

（6）使用網頁重定向；

圖6-61 FrontPage 2003啟動界面

圖6-62“新建”任務窗格

（7）檢查網頁錯誤；

（8）優化HTML代碼；

（9）規劃頁面布局。

二、制作簡單網頁

我們在前面已經學會了用Word進行排版，其實你已經會制作一個簡單網頁了，只需將原來排好的Word文檔，另存時選擇保存類型為“Web頁（*.htm；*.html）”就可保存為一個網頁文件。

下面我們用FrontPage 2003制作一個簡單網頁。步驟如下：

1.啟動FrontPage 2003

選擇“開始”/“所有程序”/“Microsoft Office”/“FrontPage 2003”命令，打開如圖6-61所示的界面。

圖6-63 新的空白的網頁

圖6-64“網頁模板”對話框

2.建立新網頁

選擇“文件”/“新建…”菜單命令，打開“新建”任務窗格，如圖6-62所示。單擊“空白網頁”，也可以通過工具欄上的“新建”按鈕建立一個新的空白的網頁。如圖6-63所示。

如果要根據 Microsoft FrontPage 的模板創建網頁，單擊“其他網頁模板”，打開如圖6-64所示的“網頁模板”對話框，再單擊所需模板類型的選項卡，然后單擊某個模板。

3.輸入如下內容

圖6-65

4.編輯操作

網頁中的文本編輯操作與Word的編輯操作類似。

本例中，將“我的第一個網頁”應用“標題一”樣式，并設為隸書，水平居中；將“你好！歡迎光臨”應用“標題二”樣式，將其余內容應用“普通”樣式，并將行距設為“1.5倍行距”，設置完成后效果如圖6-65所示。

5.保存網頁文件

選擇“文件”/“保存”命令，彈出“另存為”對話框，指定保存位置和文件名，然后單擊“保存”按鈕即可完成操作。

三、制作多媒體個人主頁

我們以制作一個簡易的個人網站為例，進一步學習使用FrontPage 2003。

1.規劃

網站規劃包括規劃網站的風格、網站的結構和網站的配色等，是對網站的整體定位。本例設置了6個欄目，包括首頁、自薦信、個人簡歷、榮譽證書、才藝展示、聯系方式，鏈接的文件名分別為index.htm、zijian.htm、jianli.htm、zhengshu.htm、zhanshi.htm、lianxi.htm。當然也可以結合自己情況進行修改。頁面布局如圖6-66所示。

2.建立網站

在FrontPage 2003中，所謂網站，就是一些網頁和程序的集合，各個網頁之間通過超鏈接聯系在一起，所有的網頁和文件保存在一個文件夾中，通過網站把這些文件和網頁統一起來。本地網站是指本地硬盤上用來存放整個網站的所有文檔的文件夾。遠程網站是指網絡服務器上的網站，供用戶瀏覽。

建立一個新網站，事實上就是建立一個單獨的文件夾，然后在這個文件夾中建立各個網頁文件，并且把它們鏈接在一起。

網頁制作可以在新建網站中完成，也可以像前面那樣單獨新建一個網頁。建議用新建網站的方法來制作網頁。

下面我們首先創建新的FrontPage網站：

（1）在“文件”菜單上，單擊“新建”，出現如圖 6-66 所示的“新建”任務窗格。

圖6-66

（2）在“新建”任務窗格中，單擊“由一個網頁組成的網站”。

（3）在“網站模板”對話框中，在“常規”選項卡下，單擊需要的網站模板，本例選擇“只有一個網頁的網站”，并在指定新網的位置欄中，鍵入或選擇新網的路徑及名稱，這里我們將默認的mysite改為myhome，如圖6-67所示，然后單擊“確定”按鈕，出現創建新網站對話框，完成站點創建，完成后如圖6-68所示。左邊一列是文件夾列表，可以通過右鍵快捷菜單新建文件夾，對文件或文件夾進行復制、刪除、重命名等操作。

圖6-67“網站模板”對話框

圖6-68

3.準備素材

將本例所需的圖片動畫素材復制到網站內的images文件夾下。

4.制作主頁頁眉

在“網頁”視圖中的文檔窗口底部，單擊“設計”

。

在文件夾列表中雙擊index.htm，打開該網頁并進入編輯狀態，開始首頁制作。

（1）設置網頁大小在“視圖”菜單上，指向“網頁大小”，單擊

設置網頁大小。

（2）設置網頁背景在“網頁”視圖中的文檔窗口底部，單擊“設計”

，右擊網頁編輯區，在彈出菜單中單擊“網頁屬性”項，彈出“網頁屬性”對話框，在標題框內輸入“歡迎訪問小慧的個人電子簡歷”；單擊“格式”選中格式選項卡，選中背景欄下的“背景圖片”，并單擊“瀏覽”按鈕選擇背景圖片。如圖6-69所示。單擊“確定”按鈕完成網頁背景設置。也可在“格式”菜單上單擊“背景”來設置。

（3）插入一個一行兩列的表格方法與在Word中插入表格相同。

在顯示設計視圖模式下，通過常用工具欄的“插入表格”按鈕，或在“插入”菜單上，指向“插入”，在級聯菜單中單擊“表格”；右擊插入的表格，在彈出菜單中單擊“表格屬性”，并將單元格襯距、單元格間距和粗細欄均設為0，如圖6-70所示，單擊“確定”按鈕。

圖6-69 網頁屬性

圖6-70 表格屬性

（4）在第一個單元格內插入圖片將插入點放在第一個單元格，在“插入”菜單上，指向“圖片”，再單擊“來自文件”。找到要添加的文件（網站下images文件夾下的logo.gif），如圖6-71所示，然后單擊“插入”。

更簡單的方法是從文件夾列表拖動圖片文件到編輯區指定的位置即可。

（5）在第二個單元格內插入Flash動畫單擊第二個單元格，在“插入”菜單上，指向“圖片”，再單擊“Flash影片”。彈出與圖6-71相似的“選擇文件”對話框，找到要添加的文件（網站下images文件夾下的banner_007.swf），然后單擊“插入”。

（6）在第一個表格下插入一個1行1列的表格同樣將單元格襯距、單元格間距和粗細欄均設為0，設置好背景顏色，本例是選的其他顏色，如圖6-72所示，在“值”文本框中輸入Hex={C1，E8，C9}。

（7）制作滾動字幕在第二個表格的單元格內單擊，在“插入”菜單上，單擊“Web組件”，彈出插入Web組件對話框，默認選中的是字幕，因此單擊“完成”按鈕，彈出字幕屬性對話框，在“文本”框內輸入：衷心感謝您垂閱我的簡歷，單擊“確定”按鈕。如圖6-73所示。

圖6-71 插入圖片對話框

圖6-72“其他顏色”對話框

5.制作正文和頁腳

（1）在第二個表格下插入一個1行2列的表格，同樣將單元格襯距、單元格間距設為0，但粗細設為1，暗邊框設為白色，亮邊框則設為其他顏色，在如圖6-72所示的“值”文本框中輸入Hex={99，CC，FF}。

（2）設置單元格背色。右擊此表格的第一個單元格，在彈出菜單中單擊“單元格屬性”，彈出如圖6-74所示的對話框，背景設為其他顏色，在如圖6-72所示的“值”文本框中輸入Hex={F1，F5，FC}。同樣方法將第二個單元格設為白色。

圖6-73 字幕屬性對話框

圖6-74 單元格屬性

（3）調整單元格寬度，使之與第一個表格相同。

（4）在第一個單元格內插入一個8行1列的表格，并將單元格襯距、單元格間距和粗細欄均設為0。在單元格屬性中將單元格對齊屬性設為水平居中，垂直居中，行高調整為40。

在剛插入的表格第二行內插入圖片homepage.gif，并在其后輸入“首頁”；在第三行內插入圖片sub_dot.gif，并在其后輸入“自薦信”，后面四行插入的圖片均為sub_dot.gif，輸入的文字依次為“個人簡歷”、“榮譽證書”、“才藝展示”、“聯系方式”。

（5）在表格三的第二個單元格內插入一個3行3列的表格，并將單元格襯距、單元格間距和粗細欄均設為0。將中間一列調寬一些。

在該表格第一行第二列中輸入“自薦信”，在第二行第二列輸入自薦信的內容。設為1.5倍行距。

（6）在表格三后面插入一個2行1列的表格，并將單元格襯距、單元格間距和粗細欄均設為0；并且第一個單元格背景色設為與表格二背景色相同，在第二個單元格內輸入“聯系電話：023-683568XX E-mail：xiaohui＠163.com”并設為居中。

6.鏈接網站文件

選中要建立超鏈接的文字或圖像，單擊常用工具欄中的“插入超鏈接”按鈕或在“插入”菜單上單擊“超鏈接”，或者是右擊選中區域并單擊“超鏈接”，均可打開“插入超鏈接”對話框。如圖6-75所示。

圖6-75“插入超鏈接”對話框

（1）選中“首頁”，單擊常用工具欄中的

按鈕，在打開的如圖6-75所示的“插入超鏈接”對話框中，在“地址”框內輸入index.htm，并單擊“確定”按鈕。

（2）用同樣的方法將“自薦信”鏈接到zijian.htm、“個人簡歷”鏈接到jianli.htm、“榮譽證書”鏈接到zhengshu.htm、“才藝展示”鏈接到zhanshi.htm、“聯系方式”鏈接到lianxi.htm。

7.保存文件，按F12鍵預覽網頁

四、制作本網站內其他頁面

首先在文件夾列表中將 index.htm 復制 5個，分別重命名為 zijian.htm、jianli.htm、zhengshu.htm、zhanshi.htm、lianxi.htm。只需將每個文件中自薦信部分修改為相應內容即可，頁眉、超鏈接欄和頁腳均不變。

五、網站發布

當我們完成上述內容后，需將制作的網頁發布到Internet上的Web服務器中，才能供網上的訪問者瀏覽。首先要到Internet服務提供商（ISP）那里申請購買存放網頁的空間和域名，以前有很多網站（如網易等）都提供免費的個人主頁存放空間，現在相對較少了，中國學生網仍在提供50M免費空間服務，大家可到http://web.6to23.com/去申請一個免費空間。

發布網站可以使用專門的FTP工具。但為了給用戶提供方便，FrontPage 2003內置了網頁發布功能，利用它，只需進行簡單的設置，就可以輕松地完成網站發布任務。FrontPage 2003中的遠程網站視圖可以幫助我們將整個網站或單獨的文件和文件夾發布到任何位置：擴展的 Web 服務器、支持文件傳輸協議（FTP）或基于 Web 的分布式創作和版本控制（WebDAV）的Web服務器或文件系統中的某個位置。

下面我們利用FrontPage 2003及文件傳輸協議（FTP）發布網站，步驟如下：

1.打開FrontPage網站

在“文件”菜單中單擊“打開網站”或單擊工具欄上的“打開”按鈕邊上的下拉標志，從下拉菜單中選“打開網站”，在彈出的“打開網站”對話框中找到需要打開的網站并單擊“打開”按鈕。

2.轉至“遠程網站”視圖

若要轉至該視圖，請單擊“網站”選項卡，然后單擊窗口底部的“遠程網站”按鈕。或在“視圖”菜單上，單擊“遠程網站”。如圖6-76所示。

3.設置“遠程網站屬性”

在文檔窗口頂部，單擊“遠程網站屬性”。在彈出的對話框中，在“遠程網站”選項卡上，在“遠程 Web服務器類型”下，單擊“FTP”。在“遠程網站位置”框中，鍵入自己所選定的遠程網站的地址及 FTP 協議（本例中輸入“ftp://125.91.6.75”），如圖6-77所示。單擊“確定”按鈕，在打開的“要求提供用戶名和密碼”對話框中輸入ISP提供的用戶名和密碼，單擊“確定”按鈕。如圖6-78所示。

圖6-76

圖6-77

4.發布網站

通過單擊窗口右下角的“發布網站”按鈕即可發布所有文件。也可發布單個文件，在本地網站選擇一個文件，然后單擊“本地到遠程”按鈕

。如圖6-79所示。

圖6-78

圖6-79

如何制作一個簡單的網頁（一）

現在炫彩的網頁很多，那都是怎么做出來的呢？為了幫助小白能快速學會一些基礎知識，小魚就不用代碼而就直接用網頁軟件制作了。
首先得有這個軟件，名字是Adobe Dreamweaver CS3，這個在網絡上就能下到，提倡正版。
打開界面就是這樣，想要做一個簡單的網頁就點擊這個。
然后就進入這么個界面，因為一般做網頁都是用表格來分割板塊和規劃界面，下來就插入一個表格簡單示范。
點擊插入記錄里的表格。
在這里設置表格屬性，因為小魚在示范，就直接用1*1的了。
然后就是這個樣子，可以隨意拉伸調整，接下來我們插入一個圖片。
點擊插入記錄里的圖像。
在這里選擇圖片并確定。
在點擊確定后就會彈出這個窗口，這個是確認路徑，在網頁中每個板塊的內容都是在服務器上有確定的路徑以防止錯亂。
這里還是確認路徑，點擊小文件夾圖標，再次選擇上次選擇的圖片，并確認。
再次確認。
添加完畢就是這樣，根據圖片分辨率不同插進后大小會不同，進行調整就可以了。
然后就可以用網頁打開試試了，點擊如圖的圖標，會出現是否保存字樣，將其保存到自己想要保存的文件路徑就可以了，注意保存時文件后綴名.html不能改動。
這個就是打開的樣子，下次會介紹如何添加網頁標題和其中的一種網頁鏈接方式。