當前位置:首頁 » 網站資訊 » 靜態網站怎麼做
擴展閱讀
手機號碼保存軟體 2024-10-19 16:32:14

靜態網站怎麼做

發布時間: 2024-10-19 13:49:39

1. 做一個靜態主頁面,三個分頁面,各頁面間要求能相互鏈接。 這個要怎麼

網頁中包含外部頁面的四種方法

一.應用框架技術
要在宿主頁面中嵌入外部頁面的方法是,在宿主頁面中包含外部頁面的位置插入「<IFRAME name="XXX" width=X height=X frameborder=0 src="XXX.htm"></IFRAME>」語句即可(注意: <IFRAME>標簽中的各種屬性含義請查閱相關技術手冊)。

如果想在嵌入的外部頁面過長時不出現滾動條,在外部文件<body>標簽中加入「scroll=no」或者在宿主頁面<IFRAME>標簽中加入「scrolling=no」即可。

但這樣做會出現一個問題,就是宿主頁面和外部頁面背景色不同,這樣會給人造成頁面不是一個整體的感覺。這時,只要在引入的外部文件中使用和宿主頁面相同的背景色就可以解決這一問題。注意,如果您使用的是IE 5.5或以上版本的話,直接在標簽<IFRAME>內設置屬性allowTransparency="true"(即框架背景透明)即可。

在應用框架技術時,為什麼不使用框架頁面(即<FRAMESET>)呢?現在有很多網站是通過使用框架頁面來分割版面的,並達到了統一網站整體風格的目的,但筆者的體會是框架頁面的操作靈活性較差,不像內建框架(即<IFRAME>)這樣可以在宿主頁面中的任何位置插入。

二.使用Scriptlets組件技術

應用這種技術的方法是在宿主頁面中包含外部頁面的位置插入「<OBJECT style="border: 0px" type="text/x-scriptlet" data="XXX.htm" width=X Height=X></OBJECT>」語句即可(注意: <OBJECT>標簽中的各種屬性含義請查閱相關技術手冊)。

在IE 5.0及以後版本中,scriptlets和Html組件(HTCs)被重新命名為Windows腳本編程組件(WSC),其特點類似於上文所講的框架技術。它有自己的不透明方形區域,並覆蓋在宿主頁面上,因此不能很平滑地用於具有紋理背景的宿主頁面中,其工作方式類似於ActiveX控制項,具有自己獨立的事件、方法和屬性。

三.使用腳本文件技術

我們知道document.write方法可以在宿主頁面中輸出內容,這樣就可以通過在宿主頁面中引入外部腳本文件來達到嵌入外部頁面的目的。方法是在宿主頁面中包含外部頁面的位置插入「<SCRIPT language="javascript" src="import.js"></SCRIPT>」,然後對外部頁面進行改造,將每一行內容寫入document.write中,並另外保存在擴展名為js的新文件中。

這種方法的特點是外部頁面不具有自己的方形區域,和宿主頁面渾然一體,但由於外部頁面內容全部寫在腳本中,無法做到所見即所得,必須等到腳本運行時才能看到實際效果,這樣就為修改調試增加了困難。

四.使用內置行為技術

在IE 5.0及以後版本,引入了一項被稱為「DHTML行為」的新功能,並在其中內置了許多默認行為。當將一種行為應用於宿主頁面上的標准HTML元素時,它可以增強該元素的默認功能,並提供該行為中定義的任何新方法、屬性或事件。其實大家對行為技術並不陌生,微電腦世界2001年18期的《主頁加入收藏設置面面觀》一文就提到了利用IE中內置的homepage行為技術進行主頁設置的方法。我們同樣可以利用IE 5.0內置的download行為,來達到在宿主頁面中嵌入外部頁面的目的,其代碼如下。

<span id="outHTML"></span>
<IE:Download ID="ieDownload" STYLE="behavior:url(#default#download)"/>
<script>
function onDownloadDone(downDate){
outHTML.innerHTML=downDate
}
ieDownload.startDownload('../static/article.htm',onDownloadDone)
</script>

其原理就是使用download行為提供的startDownload方法下載一個外部文本文件,並將文件中的文本內容作為參數傳遞給onDownloadDone函數,然後再由該函數對文本內容進行處理,在本例中是作為showImport對象的內容顯示出來。如果在函數中對文本內容做相應的處理,並與相關技術結合,如XML,就可以實現更為復雜的功能。

這種方法使得外部頁面不再具有自己的方形區域,和宿主頁面渾然一體; 提供了更大的靈活性,通過使用對象的innerHtml屬性可以真正做到在宿主頁面的任何位置插入外部文件內容; 修改簡單,只須用可視網頁編輯軟體(如FrontPage 2000)將外部頁面修改即可輕松改變網站整體風格。可以說這是在宿主頁面中嵌入外部頁面的最好方法 (注: 以上代碼在Windows 98 SE/IE 5.0中測試通過)。

就是再開一個新的頁面,只是做了一個超級連接到你相關的二級頁面,其實都是一樣的

主頁只是一個大概,主頁上相關點擊進入下一級的一般都是用超級鏈接做的連接到相關頁面去的。

2. PHP網站如何純靜態化

純靜態網站在網站中是怎麼實現的?
純靜態的製作技術是需要先把網站的頁面總結出來,分為多少個樣式,然後把這些頁面做成模板,生成的時候需要先讀取源文件然後生成獨立的以.html結尾的頁面文件,所以說純靜態網站需要更大的空間,不過其實需要的空間也不會大多少的,尤其是對於中小型企業網站來說,從技術上來講,大型網站想要全站實現純靜態化是比較困難的,生成的時間也太過於長了。不過中小型網站還是做成純靜態的比較,這樣做的優點是很多的。

而動態網站又是怎麼進行靜態處理的?
頁面靜態化是指將動態頁面變成html/htm靜態頁面。動態頁面一般由asp,php,jsp,.net等程序語言編寫而成,非常便於管理。但是訪問網頁時還需要程序先處理一遍,所以導致訪問速度相對較慢。而靜態頁面訪問速度快,卻又不便於管理。那麼動態頁面靜態化即可以將兩種頁面的好處集中到一起。

3. 簡要敘述靜態網站製作的主要步驟

一、整理規劃。
網站建設的開始就應該有一個整體的戰略目標,即確定站點的目標。
首先要有一個總的目標,這個網站到底是要做什麼。有的要顯示自己的設計水平,這就要求頁面美觀;有的是為了求職而設計的求職網站,這就要求提供足夠的信息讓別人了解你的工作能力;有的是要為用戶服務,這就要求網站有較強的互動性,而本站建設之初的主要目的就是為了本人更好的學習網路知識,只是興趣而已,
確定好目標之後,還要決定網站的目標觀眾。
二、新建站點
規劃好站點之後,就可以用專門的網頁開發軟體創建站點了。
三、收集資源
確定好站點目標和結構之後,接下來要做的就是收集有關網站的資源。
四、布局頁面
設計站點結構和收集了足夠的資源之後,就可以開始布局頁面了。在Dreamweaver中,可以通過以下手段進行排版
五、編輯文檔與超級連接
經過上面的幾個步驟之後,一切准備工作都已經就緒,現在可以像裝箱一樣把收集到的資料及製作的組件放到頁面布局中為它們指定的位置上了。
六、發布站點
站點的發布
網站發布就是把網站上傳到網際網路上,以提供瀏覽者瀏覽。
站點的維護
站點發布之後還要經常對站點進行維護。站點維護是指不斷優化網站功能和更新網頁內容。維護網站的目的是使網站的結構規劃合理、內容與形式統一、主題鮮明,經常更新網頁內容,讓網站與時俱進。

4. 靜態網頁製作

方法/步驟

1、新建一個txt文本文檔,先不要急著修改文件後綴名,有基礎的朋友手動輸入HTML代碼,不會也沒有關系,網路搜索「網頁HTML代碼」。
代碼:
<!Doctype html>
<html>
<head>
<title>靜態網頁製作教程</title>
<meta charset="gbk" />
<link href="css.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
</body>
</html>

2、基礎的靜態網頁代碼寫出來了,下面在<body></body>中間添加網頁需要的數據內容(文字、圖片、表格、視頻等),然後將txt文本文檔的後綴名.txt修改為.html。現在點擊打開看看效果!小編在body中間加入的文字:靜態網頁製作教程。

3、這樣的文字太單調了,需要用CSS樣式定義,小編在桌面上新建一個文件夾「web」,把index.html文件放進去,然後在web文件件裡面新建一個txt文本文檔,修改為「css.css」。

4、使用滑鼠右鍵「打開方式」,選擇txt文本文檔編輯css.css文件。用CSS定義網頁字體大小12像素,網頁背景色為紅色,字體顏色為白色。
代碼:
body{font-size:12px;background:red;color:white}
保存,然後打開web文件夾中的index.html文件,查看效果。

5、下面在web文件下面新建一個images文件夾,然後打開軟體Fireworks,設計自己需要的圖片(沒有就去網路搜索自己需要的圖片,使用QQ截圖功能,截取自己需要的圖片),把設計好的圖片存入web文件夾下面的images文件夾裡面。現在我們在body中放入圖片,讓圖片在網頁裡面居中。
代碼:
<div align="center">
<img src="images/pic.png" alt="logo" title="靜態網頁製作教程" />
</div>
把上面的代碼放入index.html的body中,保存後打開看看效果!
小編在這里省略了表格和視頻的製作,小夥伴不知道的話,可以網路搜索一下。
整個簡單的靜態網頁製作完畢。