靜態網頁設計的主要思路概述

1、靜態網頁設計

我把網上最主流的網頁/網站製作工具都列出來了
其中第1、2是主要製作工具，後面的多是輔助工具
3、6是比較容易上手的

另外最簡單的靜態頁面其實可以用word製作，保存成html就可以
你可以試試

1、FrontPage
FrontPage是一款優秀的網頁製作與開發工具之一，它本身也是Office2000中的一個重要組件，採用了與Office2000其他組件一致的界面和操作方式，只要您使用過Office軟體，就可以輕松掌握FrontPage的用法。
2、網頁製作三劍客
Flash、Dreamweaver、Fireworks合在一起被稱為網頁製作三劍客。這三個軟體相輔相承，是製作網頁的首選工具，其中Dreamweaver主要用來製作網頁文件，製作出來的網頁兼容性好、製作效率也很高，Flash用來製作精美的網頁動畫，Fireworks用來處理網頁中的圖形。
3、Photoshop
Photoshop是Adobe公司的王牌產品，無論是在平面廣告設計、室內裝潢，還是處理個人數碼照片方面，Photoshop都已經成為不可或缺的工具。在網頁製作方面，它多姿多彩的濾鏡和功能強大的選擇工具可以做出各種各樣的文字效果來。
4、Swishmax
Swish是一款非常方便的Flash文字特效製作工具，你只要點幾下滑鼠，就可以創造出形狀、文字、按鈕動畫，你也可以選擇內建的超過230種諸如爆炸、漩渦、3D旋轉以及波浪等預設的動畫效果。
5、PhotoImpact
PhotoImpact提供了多媒體時代專業影像設計者最直覺的創意空間、最方便的製作工具、及最寬廣的表達形式，整合了新時代的3D物件及文字特效與粒子效果、壓力筆支援、不同的自然筆觸、各式直覺操作的特效圖庫、以及網頁影像與辦公室文件的相容性，將構思到表達的過程完整組合，是專業網頁影像設計者不可或缺的利器。
6、Sound Forge
Sound Forge軟體是一款非常棒的音效編輯軟體,它除了音效編輯軟體的功能外,還可以讓你處理大量的音效轉換的工作,使你能夠輕松的完成各種看似復雜的音效編輯工作。如果下載的是英文版，可以用金山快譯永久漢化，但效果不是很盡人意。
7、碩思閃客精靈
碩思閃客精靈是一款用於瀏覽和解析Flash動畫的工具。它可以將.swf文件導出成.fla文件，還能將flash動畫中的圖片、矢量圖、聲音、視頻（*.flv）、文字、按鈕、影片片段、幀等基本元素完全分解，以及對動作腳本(ActionScript)進行解析，清楚的顯示其動作代碼，讓你對Flash動畫的構造一目瞭然。建議你趕快去下載吧！｝
8、Clipyard
你只要導入不同的Flash動畫文件，將其放在不同的層上，經調試效果，導出後就成了一個單獨的flash了，操作簡單，特別適合於將自己喜歡的Flash動畫加入祝福、簽名後贈送友人。
9、FlashFXP
是一款優秀的FTP工具，特別適合Web站點管理員使用。支持文件夾(帶子文件夾)的文件傳送、刪除；支持上傳、下載及第三方文件續傳；可以跳過指定的文件類型，只傳送需要的文件；可以自定義不同文件類型的顯示顏色；可以緩存遠端文件夾列表，支持FTP代理；具有避免空閑功能，防止被站點踢出；可以顯示或隱藏「隱藏」屬性的文件、文件夾；支持每個站點使用被動模式等。
10、FlaX
FlaX是一款製作Flash文字特效的小巧軟體。在以前若要製作文字繞圓圈的動畫，在Flash里一個一個字的慢慢調整位置，頗費時間，如果使用FlaX很快就可以就搞定。 FlaX有四個窗口面板：預覽窗口、影片屬性面板、文字屬性面板、特效屬性面板。
11、Web Animator
Web Animator(網頁動畫設計)是HomePage Builder附帶的創建動畫GIF的程序。所謂動畫GIF是GIF格式圖像文件的一種，組合幾個圖像象漫畫一樣連續運動。動畫GIF與普通的GIF圖像一樣可以粘貼到頁面。使用Web Animator可以完成如下工作：組合現有的圖像，創建類似於漫畫的動畫；給一個圖像添加動畫效果，創建具有效果的動畫；給指定的字元串添加動畫效果，創建字元動畫。
12.golive
Adobe收購mm之後推出的網頁製作工具,將代替Dreamweaver成為主流.
滿意請採納。

2、簡單的靜態網頁設計

您好，說簡單也不簡單，如果你肯花時間的話，那總會學會，你可以去比較好的設計公司拿里看看他們的實例是怎麼做的，你就知道是什麼程度了，你可以去BBD公司看看，能幫到你的忙。
有種最簡單的方法，最多十分鍾就搞定一頁：一，用DW軟體，打開-插入-表格-（這里您已經有了要作一個什麼樣網頁的大致想法）幾行，幾列。寬度要在1000為好，這樣下面就會出現一個導航條，邊界設置為0。如：插入表格為1行3列-確定。在用滑鼠點擊第一空格，插入-圖片，尋找您要插入圖片的位置，確定（或保存），然後在用滑鼠點擊第二個空格，插入。。。。等。以此類推。然後再用滑鼠點擊您剛才插入表格的下沿。重復您剛才的動作——插入-表格。幾行幾列要根據您對頁面的構思而定。如果要在空格里插入文章，一定要把文章的格式轉換成純Word文檔，後綴為.doc。

3、設計好的網頁製作成靜態網頁需要學習什麼?

有設計基礎之後很簡單的，只需要學習HTML和CSS基本可以滿足了，但想要效果更華麗一些的話，可以學習基礎的JS。我空間收集有一些資料，可以進去看看，點我名字就可以了

4、靜態網頁設計製作中的布局模式

一、靜態布局（Static Layout）

即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。

1、布局特點：不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見與pc端。

2、設計方法：

PC：居中布局，所有樣式使用絕對寬度/高度(px)，設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；

移動設備：另外建立移動網站，單獨設計一個布局，使用不同的域名如wap.或m.。

在移動端開發中採用靜態布局的兩種方式：

（1）在viewport meta標簽上設置width=320，頁面的各個元素也採用px作為單位。通過用JS動態修改標簽的initial-scale使得頁面等比縮放，從而剛好占滿整個屏幕。（見前端開發-web app 變革之rem）

（2）設在viewport meta標簽上設置content"width=640,user-scalable=no，頁面的各個元素也採用px作為單位。由於640px超出了手機寬度，瀏覽器會自動縮小頁面至剛好全屏。

優點：這種布局方式對設計師和CSS編寫者來說都是最簡單的，亦沒有兼容性問題。

缺點：顯而易見，即不能根據用戶的屏幕尺寸做出不同的表現。

二、流式布局（Liquid Layout）

流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕解析度進行適配調整，但整體布局不變。代表作柵欄系統（網格系統）。

網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設置網頁主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。

1、布局特點：屏幕解析度變化時，頁面里元素的大小會變化而但布局不變。【這就導致如果屏幕太大或者太小都會導致元素無法正常顯示】

2、設計方法：使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種解析度。往往配合 max-width/min-width 等屬性控制尺寸流動范圍以免過大或者過小影響閱讀。

這種布局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC屏幕（那時屏幕尺寸的差異不會太大），在當今的移動端開發也是常用布局方式，但缺點明顯：主要的問題是如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得「流式」），顯示非常不協調。

三、自適應布局（Adaptive Layout）

自適應布局的特點是分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。改變屏幕解析度可以切換不同的靜態局部（頁面元素位置發生改變），但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。可以把自適應布局看作是靜態布局的一個系列。

1、布局特點：屏幕解析度變化時，頁面裡面元素的位置會變化而大小不會變化。

2、設計方法：使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式。在優秀的響應范圍設計下可以給適配范圍內的設備最好的體驗，在同一個設備下實際還是固定的布局。

四、響應式布局（Responsive Layout）

隨著CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手錶、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果，對CSS編寫者而言，在實現上不拘泥於具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術使用。——分別為不同的屏幕解析度定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。即：創建多個流體式布局，分別對應一個屏幕解析度范圍。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。

響應式幾乎已經成為優秀頁面布局的標准。

1、布局特點：每個屏幕解析度下面會有一個布局樣式，即元素位置和大小都會變。

2、設計方法：媒體查詢+流式布局。通常使用 @media 媒體查詢 和網格系統 (Grid System) 配合相對布局單位進行布局，實際上就是綜合響應式、流動等上述技術通過 CSS 給單一網頁不同設備返回不同樣式的技術統稱。

5、靜態網頁是什麼

靜態網頁也稱平面頁，靜態網頁是標準的HTML文件，它的文件擴展名是.htm、.html，可以包含文本、圖像、聲音、FLASH動畫、客戶端腳本和ActiveX控制項及JAVA小程序等。

靜態網頁的特點

1、靜態網頁每個網頁都有一個固定的URL，且網頁URL以.htm、.html、.shtml等常見形式為後綴，而不含有「?」。

2、靜態網頁是實實在在保存在伺服器上的文件，每個網頁都是一個獨立的文件。

3、靜態網頁的內容相對穩定，因此容易被搜索引擎檢索；

4、靜態網頁沒有資料庫的支持，在網站製作和維護方面工作量較大，因此當網站信息量很大時完全依靠靜態網頁製作方式比較困難；

5、靜態網頁的交互性較差，在功能方面有較大的限制。

6、頁面瀏覽速度迅速，過程無需連接資料庫，開啟頁面速度快於動態頁面。

7、減輕了伺服器的負擔，工作量減少，也就降低了資料庫的成本。

(5)靜態網頁設計的主要思路概述擴展資料：

與動態的區別

1、網頁製作使用的製作語言：

靜態網頁使用語言：超文本標記語言（標准通用標記語言的一個應用）

動態網頁使用語言：超文本標記語言+ASP或超文本標記語言+PHP或超文本標記語言+JSP等。

2、程序是否在伺服器端運行，是重要標志。

在伺服器端運行的程序、網頁、組件，屬於動態網頁，它們會隨不同客戶、不同時間，返回不同的網頁， ASP、PHP、JSP、ASPnet、CGI等。運行於客戶端的程序、網頁、插件、組件，屬於靜態網頁，例如 html 頁、Flash、JavaScript、VBScript等等，它們是永遠不變的。

6、靜態網頁製作的具體過程

最簡單的。
新建一個文本文檔（也就是記事本）
在裡面打上幾個字，保存。然後把後綴.txt改為.html 再用瀏覽器打開 這就是一個靜態網頁了。

Dreamweaver 是很專業的網頁設計軟體。你可以搜索一下教程。很簡單的。
可以在裡面插入圖片 聲音 視頻 flash等。

再就是現在最流行的 div+css 這個就相對難點了。需要有手寫代碼的能力。
製作過程在這里和你也說不明白 你還是從網上搜索一下Dreamweaver 視頻教程吧。

做網頁記住：所有文件夾和文件名都要用英文或者拼音。首頁命名為index.html

7、製作靜態網頁的思路

1；網站的風格和創意
2；確定網站的CI形象
3；確定網站的功能和性能
4；確定網站結構
5；確定網站類型
6；確定網站主題和目標
7；網站功能模塊設計
8；網站建設合同