導航:首頁 > 網路信息 > 如何將網站主頁保存在html
如何將網站主頁保存在html
發布時間：2023-02-19 23:39:33『壹』 如何將網頁另存為1233.並保存到當前文件夾中。保存類型為「網頁，僅HTML」
1、首先打開電腦之後，在電腦桌面中，點擊打開電腦上的任意瀏覽器，如QQ瀏覽器。
『貳』 怎樣把一個網頁保存到電腦上並且保存為HTML文件
第一步：編寫HTML
對於這個教程，我建議你只使用最簡單的工具。例如：Notepad（在windows里），TextEdit （在Mac上）或是KEdit （在KDE里）就可以了。一旦你了解這個原理，你就會想要切換到更高級的工具，甚至是商業程序，如Style Master，Dreamweaver或GoLive。但對於你的第一個CSS樣式表，最好不要因為使用太多的高級功能而分心。
不要使用文字處理器，如Microsoft Word或OpenOffice。它們通常製作出網路瀏覽器不能讀取文件。對於HTML和CSS，我們需要簡單的純文本文件。
第一步打開你的文本編輯器（Notepad，TextEdit，KEdit，或是任何你喜歡的文本編輯器），在一個空的窗口開始，輸入以下的內容：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一個樣式頁面</title>
</head>
<body>
<!-- 目錄 -->
<ul class="navbar">
<li><a href="index.html">首頁</a>
<li><a href="musings.html">連接1</a>
<li><a href="town.html">連接2</a>
<li><a href="links.html">連接3</a>
</ul>
<!-- 主要內容 -->
<h1>我的第一個樣式頁面</h1>
<p>歡迎來到我的樣式頁面!
<p>這里沒有圖片, 但至少有CSS樣式. 有連接, 但只是為了舉例和演示, 並不能帶你到任何地方…
<p>這只是個例子, 好象沒什麼好寫.
<!-- 簽名和日期 -->
<address>2004年4月5日製作</address>
</body>
</html>
事實上，你不需要輸入它：你可以從這個網頁復制並粘貼進編輯器。
（如果你在Mac 上使用TextEdit，不要忘記告訴TextEdit文本確實是純文本，通過轉到格式菜單並選擇 「Make plain text」。)
上面HTML文件的第一行告訴瀏覽器HTML的類型（DOCTYPE 意思是文檔類型）。在這個案例中，它是HTML 4.01 版本。
在 < 和 > 里的單詞叫標簽，像你看能到的，這文檔包含 <html> 和 </html> 標簽。在 <head> 和 </head> 間有一個位置是給沒有顯示在屏幕上各個種類的信息的。目前為止，它包含文檔的標題，但之後我們也會在這里加上CSS樣式表。
<body>是實際文檔文本所在之處。原則上，除了在 <!-- 和 -->里作為對它們本身註解的內容不會顯示，這里的所有內容都會被顯示。瀏覽器會忽略它。
在該示例中的標簽， <ul> 介紹了一個「無次序列表」，例如：條目沒有編號的列表。 <li> 是「列表條目」的開始。 <p> 是「段」。還有<a> 是創建超鏈接的「錨點」。
編輯器展示了HTML源。
如果你想知道在<…>里的名字是什麼意思,一個好的開始地方是著手從HTML開始。但是只有一些關於我們示例HTML頁面的單詞。
「ul」是一個每個條目都有一個超鏈接的列表。這會作為我們的「網站導航菜單」鏈接到我們（超鏈接）網站的其它頁面。想必，我們網站的所有頁面都有一個類似的菜單。
「h1」和「p」元素形成這個頁面獨特的內容，而底部的簽名（「address」）也是和網站上所有的頁面是類似的。
注意，我沒有關閉「li」和「p」 元素。在HTML里（但不是在XHTML 里），允許忽略</li>和</p>標簽，這就是我在這里做的，為了使得文本稍微容易讀一點。但是你可以加上它們，如果你喜歡的話。
讓我們假設這是要成為一個有許多類似頁面的網站上的一個頁面。對當前網頁來說很普通，此頁面有一個菜單，在超鏈接站點，一些獨特的內容和簽名上鏈接到其它頁面上去。
現在從文件菜單里選定「另存為……」，導入你想把它放入的一個目錄/文件夾里（桌面也可以），再把文件存為「mypage.html」。先不要關掉編輯器，我們還會需要它。
（如果你在Mac OS X 10.4 前的版本上使用TextEdit，你會看到一個選項「不要附加保存.txt 擴展名」的存檔對話框。選定那個選項，因為名字「mypage.html」已經包含了一個擴展名。更新的版本的TextEdit會讓.html自動擴展。）
接下來，在瀏覽器里打開文件。你可以按照下面的做：用你的文件管理器（Windows Explorer，Finder或Konqueror ）找到文件，再點擊或雙擊「mypage.html」文件。它就會在你默認的網路瀏覽器里打開。（如果不可以，就打開你的瀏覽器，把文件拖進來。）
像你看到的那樣，頁面看起來非常沉悶……
第二步，添加一些顏色
你可能看到一些白色背景里的黑色文本，但它是取決於瀏覽器如何配置的。所以，我們能做的讓頁面更加時新的一件簡單的事情就是添加一些顏色。（讓瀏覽器開著，我們之後會再用到它。）
我們從嵌在HTML 文件里的樣式表開始。然後，我們會把HTML和 CSS 放進單獨的文件里。單獨的文件很好，因為相對於復合的HTML文件，它讓相同的樣式表使用起來更簡單：你只需要編寫樣式表一遍。但是對於該步驟，我們僅僅保持所有的內容在一個文件里。
我們需要添加一個<style>元素到HTML文件中。樣式表會在此元素里。所以回到編輯器窗口，再在HTML文件的抬頭部分添加下面的五行。要添加的行用紅色的顯示出來了。 (lines 5 to 9)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一個樣式頁面</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
<body>
[etc.]
第一行說的是，這是一個樣式表，並且它是用CSS (「text/css」)編寫的。第二行說的是，我們為「body」 元素添加了樣式。第三行設定了文本的顏色是紫色，還有接下來一行設定了背景是一種泛綠的黃色。
CSS里的樣式表是由規則組成。每條規則有三個部分：
選擇器 （在示例里：「body」），告訴瀏覽器文檔的哪個部分受規則影響了；
屬性（在示例里：『color'』和『background-color』都是屬性），規定了布局的什麼方面被設置了；
還有值（『purple『和『#d8da3d』 ）給出了樣式屬性的值。
我們要設置兩個屬性，因此我們要做兩個單獨的規則：
body { color: purple }
body { background-color: #d8da3d }
但是因為兩個規則都都會影響主體，我們只要輸入一次「body 」，再把屬性和值放在一起。更多的選項，請看第2章Lie & Bos。
主體元素的背景也就是整個文檔的背景。我們沒有把任何明確的背景給任何其它的元素（p，li，address…… ），所以默認它們會沒有（或，會是透明的）。『color 』屬性設置body 元素文本的顏色，但是主體內的其它元素都要沿襲那種顏色，除非明確的覆蓋。（我們之後會添加其它顏色。）
現在保存文件（從菜單里選用「保存」）再回到瀏覽窗口。如果你按「刷新」鍵，顯示就會從「沉悶」的頁面變成有色彩（雖然還是相當沉悶）的頁面。除了頂端的鏈接列表，文本應該是帶有泛綠的黃色背景的紫色文本。
一個瀏覽器在添加了一些顏色後是如何顯示頁面的。
在CSS里顏色有多種方法來規定。此示例展示了它們的兩種方法：通過名稱（「purple」 ）和通過十六進制代碼（「#d8da3d」 ）。顏色的名稱大約有140種，而十六進制代碼有超過16，000，000種顏色。 添加一種樣式表解釋了更多關於代碼的詳情。
第三步：添加字體
另外一件容易做的事情是，為頁面多種元素的字體製造一些區別。因此讓我們設置文本為「Georgia」 字體，但除了h1 標題，我們會用「Helvetica」。
在網上，你不能確定你的讀者電腦上用的是什麼字體，所以，我們也添加一些替代方案：如果沒有Georgia，Times New Roman 或 Times 也可以，如果所有的都不行，瀏覽器會使用任何襯線字體。如果Helvetica 缺失，Geneva，Arial 和sunSans-Regular在形狀上是很相似的，又如果沒有這些運作，瀏覽器會選擇任何其它無襯線的字體。
瀏覽器在文本里添加了以下的行： (lines 7-8 and 11-13)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一個樣式頁面</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
[etc.]
如果你再次保存文件和在瀏覽器里按「刷新」，現在標題和其它文本就會有不同的字體。
現在主要的文本有一個和標題不同的字體。
第四步：添加一個導航欄
在HTML 頁面頂部的列表是為了形成一個導航欄菜單。許多網站有些目錄分類在頂部或是在頁面的邊上，這個頁面也有一個目錄。我們會把它放在左邊，因為比在頂部更有意思點……
該菜單已經在HTML 頁面里了。就是頂部的<ul>列表。在裡面的鏈接不工作，因為我們的「網站」到現在為止，只有一個頁面，但現在那是沒有關系的。在一個正真的網站上，理所當然不會有任何壞的鏈接。
所以我們需要把列表移到左邊去，然後把其它的文本稍微右移，以彌補空間。我們要使用的CSS屬性是『padding-left』（為了移動文本主體）和『position』、『left 』和『top』（為了移動菜單）。
還有其它的方法來做到這一點。如果你在學習 CSS頁面尋找「column」或「layout」 ，你會發現幾個現成運行的模板。但是這個是我們的目的。
在這個編輯器窗口，在HTML文件里添加以下的行： (lines 7 and 12-16)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一個樣式頁面</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
[etc.]
如果你再次保存文件，在瀏覽器里刷新它，你現在就可以得到主要文本左邊的鏈接列表了。已經看起來更加有意思了，是不是？
主要文本被移到了右邊，現在鏈接列表在它的左邊，而不是在頂部了。
『position: absolute』說明ul 元素的定位獨立於或早或晚在文檔中出現的任何文本，而『'left』和『top』標明了在什麼位置。在這個情況中，從窗口頂部起2em，左邊起1em。
『2em』表示2倍當前字體的大小。例如，如果菜單用一個12點的字體顯示，那麼2em就是24點。em在CSS里是非常有用的一個單位，因為它能自動適應讀者可能使用的字體。許多瀏覽器有一個加大或是減少字體大小的菜單：你可以試一試，看看當字體加大了菜單如何在大小方面加大，如果我們換做使用一個像素大小，情況就不會是這樣了。
第五步：設計鏈接
導航菜單依然看起來像個列表，而不像菜單。讓我們給它添加一些樣式。我們會移除列表項目符號，再把條目移到左邊，項目符號的位置。我們還會給每個條目它們自己的白色背景和黑色框框。（為什麼？沒有特殊的原因，只是因為我們能夠這樣做。）
我們也沒有說明鏈接的顏色應該是什麼，所以，讓我們也添加上：藍色顯示用戶沒有看過的鏈接，紫色顯示已經訪問過的鏈接： (lines 13-15 and 23-33):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一個樣式頁面</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>
<body>
[etc.]
按慣例來說，瀏覽器用下標線和顏色來顯示超鏈接。通常，使用類似我們在這里規定的顏色：藍色顯示你還沒有訪問過的鏈接頁面（或是很久之前訪問過的），紫色顯示你已經看過的。
在HTML 里，超鏈接是用<a>元素創建的，所以要規定顏色，我們需要添加「a」的樣式規則。為了區分已經訪問過的和沒有訪問過的鏈接，CSS提供了兩個「偽類」(:link 和 :visited) 。它們稱為「偽類」從類型屬性來區別它們，那會直接出現在HTML里，例如，在我們的示例里，class= 「navbar」。
第六步：添加水平線
接下來添加的樣式表是用來把文本跟底端簽名分開的一個水平線規則。我們會使用『border-top』在<address>元素上面來添加點線 (lines 34-37)：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一個樣式頁面</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>
<body>
[etc.]
現在我們的樣式完成了。接下來，讓我們看看如何把樣式表放進單獨的文件里，如此以來其它的頁面能分享同樣的樣式。
第七步：把樣式表放進單獨的文件里
我們現在有一個嵌入了樣式表的HTML 文件。但是如果我們的網站發展了，我們肯定會要許多頁面分享相同的樣式。有一個比復制樣式表到每個頁面更好的辦法：如果我們把樣式表放進單獨的文件，所有的頁面都可以指向它。
要製作樣式表文件，我們需要創建另一個空文本文件。你可以從編輯器里的文件菜單里選擇「New」 來創建一個空的窗口。（如果你使用TextEdit ，不要忘記還是要使用格式菜單讓它成為純文本。）
接下來，從HTML 文件中剪切在<style>元素里的任何內容，再粘貼進新窗口。不要復制<style>和</style> 本身。它們屬於HTML ，不屬於CSS。在新的編輯器窗口，現在你應該有完整的樣式表：
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
從文件目錄里選擇「另存為……」，確保與mypage.html 文件在同一個目錄/文件夾里，再把樣式表存為「mystyle.css」。
現在回到HTML 代碼的窗口。移除從<style>標簽開始到包括</style>標簽的所有內容，再用<link>元素替換它，如下 (line 5)：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>我的第一個樣式頁面</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
[etc.]
這會告訴瀏覽器在文件中找到叫「mystyle.css」的樣式表，又因為沒有目錄提到，瀏覽器就會在找到HTML 文件的同一個的目錄里尋找。
如果你保存HTML 文件，然後在瀏覽器里刷新它，你應該看不到變化：頁面是相同的樣式，但是現在樣式來自於一個外部文件。
最後的結果。
接下來的步驟是把它們兩個mypage.html 和mystyle.css 放到你的網站上。（你可能要先稍微改變他們……）但是如何做到這一點就取決於你的網路服務供應商。
與如何將網站主頁保存在html相關的資料
- 無線網路如何防盜
- 最新網路衛星導航如何使用
- 什麼是轉基因網站
- 怎麼他么怎麼又網路了
- 網站登錄變成其他網站怎麼處理
- 網路連接一般什麼密碼
- qq網站安全性未知訪問不了怎麼辦
- 不用網路載入的單機游戲有哪些
- 如何設置路由器網路不斷網
- 廣州入戶怎麼申請網站
- 網站圖標顯示x是什麼意思
- 網路哪些不能玩
- 網路營銷具有什麼優勢
- 華為榮耀6x怎麼切換網路
- 哪個網站電影
- 新點是什麼小說網站
- 自己的網站怎麼做兼職
- 網路貸款怎麼辦
- 買進口化妝品去哪個網站
- 網路電視怎麼看衛視直播
- 網路如何贊美女人漂亮
- 網站未知回應怎麼回事
- 大名網站推廣多少錢
- 喜歡網路詞都有什麼
- 怎麼設置iphone網路
- 什麼網站有首映動漫
- 淘寶網路電話叫什麼
- 什麼是3G網路3G的發展史
- 手錶怎麼設置蜂窩網路
- 什麼網站可以發現新產品
- 如何做好網站管理
- 湯姆貓是什麼網站
- 旅遊網站開發怎麼選
- 安卓網路顯示h2是什麼意思
- 如何更新網站內容
- 什麼網站下載廣場舞是免費的
- 監控下面有網路如何隔離
- 買火車票什麼網站
- 如何辨別購物的網站
- 信息網路通訊研究所是研究什麼的
- 為什麼流量連接網路上不了網
- 網路轉播需要什麼資質