靜態網頁設計與製作

1、網頁設計與製作要學些什麼

如果說到網頁設計與製作的話，學的東西很多，一般學習都是先學習製作基本的page(網頁)，也就是學慣用html語言，製作簡單的網頁，在這個過程中，所需要的素材你可以選擇自己去設計，也可以在網上去找素材，當然，這個網頁是你自己設計還是模仿，你自己選擇，接著就進入動態交互的網站了，語言有什麼asp、php、jsp、.net……還有既然是動態還要學習資料庫access、MySQL……。沒有什麼最好的，asp+access是最簡單的，一般以前的一些網站公司都喜歡用asp或.net建站，不過我跟人認為php應該是最實用的，對瀏覽器的兼容性也較好，現在用的比較普遍的就是php吧！所要用的工具：DW、flash、ps、fw。
第一、學習的是簡單的html語言，找一本書去看去學習，學習製作靜態的網頁。
第二、資料庫的學習，這個是有一定講究的，學資料庫和對應的語言是有一定關系的，像如果學access,我估計學的應該只有asp了，除非你把資料庫都學了。
第二、學習動態交互網頁的製作，就是上面所提到的一些語言，自己選擇一個去好好學，還是書本去學習吧！
第三、應該是接觸到用層替代表格之類的，也就是div+css，很多公司都會要求這個，具體我就不詳說。
大致就這么多，設計跟製作是聯系在一起的，你要是覺得你更喜歡設計，那可以選擇做前台的，如果喜歡編程，那就後台程序了。電子商務交流群：122728032，技術交流群：207688693，如果還有什麼需要了解的，可以加群，我是群主。希望能幫到你，給我加分哦！

2、網頁設計與製作要學些什麼？

php 跟mysql 和apache 加linux 系統是大多數企業的最佳選擇，這門這些代碼 都是開源免費的，而且不會涉及到任何版權

2net 大家懂得，MSsql 是要花錢買的，還有就是微軟的系統，代碼不公開，缺少自由，你想想就知道，微軟漏洞那個是經常傷害我們腦經的事，伺服器經常被掛馬都不是新聞了。

3jsp安全性最好，性能也好，但是開發周期比較長些，因為網上公開的代碼程序也少，用的人少就不多說了

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

一、靜態布局（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 給單一網頁不同設備返回不同樣式的技術統稱。

4、網頁設計製作詳細流程

分析如下：

1、首先下載安裝Dreamweaver，打開後，新建一個網頁，一般選擇「HTML」建立網頁。選擇「經典」界面，有助於我們更便捷使用這個軟體。

2、下面選擇這三個界面，代碼、拆分、設計，一般默認設計界面，對於新手這個功能具有可視化，能更好的製作網頁。

3、下面我們來製作網站站點，在電腦上建一個文件作為根目錄。我們所建網站的所有文件和網頁都保存在這個文件中。站點的作用就是使你的網站網頁之間框架清晰。同時給站點起個名字。

4、然後再在站點根目錄下建立一個專門儲存網站圖片的文件，並設置默認。這樣你添加到這個網站的所有圖片都自動保存到這個文件，不會丟失。注意文件命名要用英文。下面我用我建立的（籃球資訊網）來介紹，點擊右下方籃球資訊網——下拉點擊管理站點——點擊高級設置——設置默認圖像文件夾為剛建立的images。保存。

5、下面我們來製作這個網站首頁，先學習添加圖片。插入——圖像——選擇素材添加。點擊圖片，下面屬性可以編輯修改圖片大小，添加超鏈接等等。下面我修改圖片大小做示範。

6、下面學習添加文本。編輯「籃球資訊網」，下面屬性可以設置文本字體、添加超鏈接等等，點擊頁面屬性，可以詳細編輯文本屬性。

7、網頁基本就是文字和圖片的組合，添加視頻還需要學習者好好搜索Dreamweaver 的使用視頻加以學習。最後製作完一個網頁要記得保存。左上角文件——保存。

8、最後我們學習添加超鏈接。我用建立的第二個網頁來做示範。選中籃球資訊網文本，點擊頁面下方屬性——鏈接——點文件小按鈕——選中第一個網頁，這樣籃球資訊網文本變成藍色。這是網站內部鏈接，相反就有外部鏈接。添加如圖，一定要寫http://......就可以了。

9、最後我們瀏覽網頁。左上角文件——在瀏覽器中瀏覽網頁，點擊網頁中兩個鏈接都能到達指定網頁。

(4)靜態網頁設計與製作擴展資料：

網頁設計

設計網站要注意兩個要點：整體風格和色彩搭配。

風格

網站的整體風格及其創意設計是最難以學習的。難就難在沒有一個固定的模式可以參照和模仿。給你一個主題，任何兩人都不可能設計出完全一樣的網站。

風格（Style）是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個「整體形象」包括站點的CI（標志、色彩、字體、標語）、版面布局、瀏覽方式、交互性、文字、語氣、內容價值、存在意義、站點榮譽等等諸多因素。

色彩搭配

無論是平面設計，還是網頁設計，色彩永遠是最重要的一環。當我們距離顯示屏較遠的時候，我們看到的不是優美的版式或者是美麗的圖片，而是網頁的色彩。

網頁配色小技巧：

1．用一種色彩：這里是指先選定一種色彩，然後調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感；

2．用兩種色彩：先選定一種色彩，然後選擇它的對比色；

3．用一個色系：簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。

在網頁配色中，還要切記一些誤區：

1．不要將所有顏色都用到，盡量控制在三至五種色彩以內；

2．背景和前文的對比盡量要大（絕對不要用花紋繁復的圖案作背景），以便突出主要文字內容。

5、怎樣製作簡單的靜態的網頁設計

你好。首先下載Dreamweaver.exe並打開，選擇你使用的編輯語言，本案例用html
打開頁面後，選著設計窗口，如圖所示。設計窗口可以快速布局網頁，不需要自己編輯代碼。

打開你要設計的網頁的設計圖，本經驗是百度經驗首頁為例，首先我們製作頂上的搜索條，點擊插入—表格（如圖所示）。打開表格屬性編輯表格屬性。插入1行和5列，表格寬度為1130,（即為網頁的寬度），邊距，間距分別為0，此表格只是為了定位，因此不設邊框。

設置好表格後，可在表格裡面插入你的內容，首先我們插入logo,點擊插入—圖像—選擇你要插入的圖片。點確定即可完成logo插入。表格的小大高度都可根據設計圖需要調整，滑鼠移到表格邊框虛線即可拖拉調整高度或寬度。如圖所示

接下來我們來做搜索框，點擊插入—表單—插入文本域—確定。插入文本框後可點擊文本框調整文本框的屬性。根據設計圖，文本框上班還要添加內容，因此，可選擇單元格右擊選擇表格—拆分單元格，此處是需要添加一行的內容，因此拆分為兩行，如圖所示。

用同樣的辦法拆分上面的行，因為要添加10個選擇項，因此拆分為10列（右擊選中的行—拆分單元格—10列—確定）。拆分好後在小格裡面添加文字內容即可。表格大小可根據步驟四調整。

接下來我們做搜索按鈕，同樣根據設計圖要把表格拆分為兩行。點擊插入插入按鈕的圖片。

接下來給按鈕添加鏈接，本次經驗分享的是靜態網頁，因此在此先跟大家分享怎麼直接添加按鈕鏈接。同樣是點擊插入—添加超級鏈接,填寫你事先做好的頁面鏈接，或者其他網站鏈接。

剩下的內容都可根據方法步奏逐漸添加，調節細節即可完成你想要設計的網頁。如圖所示是上面步奏所做的靜態頁面，把所有做好的網頁用超級鏈接鏈接起來即可做成一個簡單的網站

另外我們還可以採用front page。也可以很容易的實現。
望採納。

6、自學網頁設計與製作，動態和靜態都想學，需要看什麼書？？

先學靜態,學習簡單的HTML語言後,學習web標准,在學習簡單的CSS,最後自己動手做幾個簡單的頁面,熟練後基本大功告成,
然後動態,動態的話,看你個人想學ASP,還是.NET,還是PHP,還是JSP等等,最好有C語言基礎,這樣會比較輕松.
希望對你有幫助.
另外你可以去w3cSchool看看,

7、靜態網頁設計與製作熱點工具的用途

靜態網頁的布局模式主要有:
1、表格布局
2、層布局
3、div+css樣式表布局
4、布局表格等
備註：
1、表格布局容易把握，是最簡單的一種總局方式，適用於初學者。
設計網頁的第一步是設計版面布局。所謂布局，就是以最適合瀏覽的方式將圖片、文字以及表單等元素排放在頁面的不同位置。網頁設計常用布局方法是表格布局。另外一種方便的工具，就是使用框架。框架的作用就是把瀏覽器窗口劃分為若干個區域，每個區域可以分別顯示不同的網頁。
案例：①在網頁中插入表格，不顯示邊框只用來布局；②在單元格內插入文字、·圖片，設置豐富的效果；③通過拆分單元格或者插入嵌套表格來細化某些單元格內部的布局。
2、層布局較難把握，經常會受屏幕的解析度影響，網頁中很少用，主要用於浮動廣告。
3、div+css樣式表布局，難度較大，作者需了解一定數量的html代碼。是應用較廣泛的一種，也是最難的一種布局。

一、准備一張圖片。
准備一張需要給不同區域添加不同熱點的圖片。
二、插入圖片：
打開Dreamweaver，新建一個網頁，將圖片插入到頁面中。
三、找到地圖工具：
單擊滑鼠左鍵點擊圖片，這時候軟體下方的屬性面板就會變成和圖片相關的屬性，注意看左下角部分，如圖一中的紅色框內所示。
註：如果沒有上圖顯示的熱點地圖工具，是地圖工具屬性隱藏了，可以點擊屬性面板右側的三角符號打開，如下圖：
四、繪制熱點：
注意方塊、圓形、多邊形三個小圖標，它們就是我們要用的「圖片熱點」工具，不同的熱點工具可以繪制出不同形狀的熱點區域。
先點擊方塊按鈕，將滑鼠移動到圖片上，這時候滑鼠就變成了十字，在你想加鏈接的地方畫一個方塊。添加熱點後的圖片區域會出現一個淺藍色蒙版，意味著該區域已經添加了熱點。依次添加其他區域的熱點。
五、給熱點添加鏈接：
熱點區域畫好後，下面的屬性面板就會變成該熱點區域的屬性，如下圖：
「鏈接」就是點擊此處跳轉的鏈接地址；
「目標」就是點擊此處時窗口的打開方式；
「替換」就是滑鼠懸浮在該區域時提示的文字。一般使用"_blank"，指超鏈接將在新窗口打開。
註：可以採用畫一個區域，添加對應的連接，也可以依次把所有的區域熱點畫完，然後點擊熱點區域，依次添加對應的連接。初學者建議一個一個的添加。
六、修改熱點：對熱點區域進行拖動或者局部調整
如果需要修改熱點區域，或者需要進行微調，如中國地圖添加熱點，不可能把所有的熱點區域都做到剛好覆蓋對應的區域，那就需要對已經添加熱點的區域進行調整。
點擊熱點區域，熱點區域四周會出現淺藍色的點。游標放在淺藍色的點，點擊滑鼠左鍵，即可調整熱點區域的大小。
七、對個圖片添加熱點：
如果一個頁面中有多個圖片需要添加熱點，那麼久需要給每一張圖片對應的熱點設置不同的熱點名稱，如圖示，地圖（M）處的文本框中的字元就是當前熱點的名稱。
可以使用map1、map2、map3。。。也可以使用不同圖片的內容對熱點進行命名，如top_map,foot_map,act_map。。。總之，不同圖片的熱點名稱不同即可。

8、以"《網頁設計與製作》課程網站的製作"為主題,設計製作一個靜態網站.

簡單的理解，網頁設計就是做門臉的，網站建設就是蓋房子的！ 網頁設計主要是做形象上的設計，包括版式呀，色彩等等！ 而網站建設是指建設一個網站，不僅僅包括能看到的這些頁面，還包括程序代碼運算等等一系列的東西！！！