製作網頁設計

1、如何製作網站？網頁設計？

需要學習的知識很多

網頁的設計需要學習的軟體：

Photoshop、Fireworks、Flash

網頁製作需要學習的軟體：

Dreamweaver

網頁製作需要學習的語言：

HTML、CSS、JavaScript

後台編程需要學習的語言：

ASP 或 ASP.net 或 PHP 或 JSP、SQL查詢語句

資料庫操作需要學習的軟體：

Access 或 SQLServer 或 MYSQL

2、我想製作一個網頁，請問需要哪幾個步驟？

製作一個網頁需要九個步驟。

1、准備內容

在域名注冊查詢網址之前就應該先搜集至少「一百頁」的內容，這些內容必須是有價值的、不違反著作權的內容。

2、網址

想個比較有意義，好記的網址。

3、網頁設計製作

在網站設計上，只要盡量簡潔有力，讓內容可以好好的呈現，就是一個成功的seo網站頁面。頁要盡量符合w3c的標准。

4、每頁檔案大小

每個網頁盡量在15k以下，但是不能在5k以下，以免影響內容的完整。其搜索引擎最佳化的目的，實際上是為了使用者，而不是為了搜索引擎本身。

5、關鍵字密度

拿出關鍵字，在下列六個地方各使用一次。

6、內部鏈接

內部鏈接就是在同一網站域名下的內容頁面之間的互相鏈接（自己網站的內容鏈接到自己網站的內部頁面，也稱之為站內鏈接）。

7、網站上線

最好不要用虛擬主機，若是能有自己的代管主機或者是固定ip位置就最好了。

8、紀錄與追蹤

申請一個不錯的網頁計數器。

9、程序設計

網站設計包括前台用戶視覺體驗的設計和後台程序功能設計，兩個方面都是非常重要的；視覺設計對於客戶的閱讀帶來愉悅和信任，後台注重操作的方便行。

(2)製作網頁設計擴展資料：

注意事項

1、導航菜單使用圖片、flash

導航菜單使用圖片、flash當然比純文本來得好看一些，但是搜索引擎並不認識你的圖片和flash。如果你非要使用漂亮的圖片來做導航的話，可以使用背景替換的方法。建議做一個導航菜單鏈接的xml文提交到搜索引擎。

2、不恰當地使用圖片

為了網頁美觀，經常會到處貼滿圖片，這樣做是不正確的，與內容無關的圖片能少就少吧。我們可以把這些圖片做成容器的背景。

3、內容里特殊字體的運用

楷體很漂亮，草書也不遜色於宋體。但是不是所有人的電腦都安裝有這些字體。如果使用這些特殊字體的話，在別人的電腦里看到的網頁將會是不堪入目。

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

分析如下：

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

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

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

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

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

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

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

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

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

(3)製作網頁設計擴展資料：

網頁設計

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

風格

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

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

色彩搭配

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

網頁配色小技巧：

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

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

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

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

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

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

4、製作一個簡單的index.html網頁

實現的方法和詳細的操作步驟如下：

1、第一步，右鍵單擊計算機桌面上的空白區域以創建一個新的「文本文檔」，如下圖所示，然後進入下一步。

2、其次，完成上述步驟後，輸入要在新創建的文本文檔中顯示的內容，如下圖所示，然後進入下一步。

3、接著，完成上述步驟後，返回桌面，將文本文檔的名稱和後綴更改為「
 index.html」，如下圖所示，然後進入下一步。

4、然後，完成上述步驟後，該文件的默認「打開方式」將成為瀏覽器，雙擊「index.html」文件，如下圖所示，然後進入下一步。

5、最後，完成上述步驟後，就打開了剛創建的「index.html」文件了，如下圖所示。這樣，問題就解決了。

5、製作網頁一般用什麼軟體啊?

1、DreamWeaver

Dreamweaver可以用最快速的方式將Fireworks，FreeHand，或Photoshop等檔案移至網頁上。使用檢色吸管工具選擇熒幕上的顏色可設定最接近的網頁安全色。對於選單，快捷鍵與格式控制，都只要一個簡單步驟便可完成。

2、Flash

Flash，是一種動畫創作與應用程序開發於一身的創作軟體，目前最新的零售版本為Adobe Flash Professional CS6(2012年發布)。

Adobe Flash Professional CS6為創建數字動畫、互動式Web站點、桌面應用程序以及手機應用程序開發提供了功能全面的創作和編輯環境。

3、Fireworks

Fireworks是Macromedia公司發布的一款專為網路圖形設計的圖形編輯軟體，它大大簡化了網路圖形設計的工作難度，無論是專業設計家還是業余愛好者，使用Fireworks都不僅可以輕松地製作出十分動感的GIF動畫。

4、HomeSite

HomeSite是一種功能完備的html編輯器。它與文本編輯器相似，但含有自動添加HTML標簽以及輕松創建HTML復雜元素的功能。HomtSite還有大量的javascript特性，比如自動創建標簽以及為腳本命令首色等，後者可幫助開發人員更輕松的查看和跟蹤腳本命令。

5、HotDog Professional

HotDog是較早基於代碼的網頁設計工具，其最具特色的是提供了許多向導工具，能幫助設計者製作頁面中的復雜部分。HotDog的高級HTML支持插入marquee，並能在預覽模式中以正常速度觀看。

6、網頁設計怎麼製作，需要什麼軟體？

所謂工欲善其事，必先利其器！~樓主若要學網頁設計和製作，著名的網頁製作「三劍客」應該是你的最佳選擇。~O(∩_∩)O~
三劍客之1、Adobe Dreamweaver
它是出色的網頁代碼編輯和網頁架構設計工具。也是現今網友用得最多的網站設計工具。
主要功能：Dreamweaver在多媒體方面頗有建樹的Macromedia公司推出的可視化網頁製作工具，它與Flash、Fireworks合在一起被稱為網頁製作三劍客，這三個軟體相輔相承，是製作網頁的最佳選擇。其中，Dreamweaver主要用來製作網頁文件，製作出來的網頁兼容性比較好，製作效率也很高，Flash用來製作精美的網頁動畫，而Fireworks用來處理網頁中的圖形。
三劍客之2、Adobe Flash
swf奠定了網路流媒體的一個標准，也是網路上最活躍的影音傳播手段，同時它也盡最大可能地使一批網蟲過了一回導演癮。
主要功能：flash是Macromedia公司推出輔助網頁的動畫製做工具。
三劍客之3、Adobe Fireworks
強大的像素圖處理軟體，因為Photoshop的光輝使它不再那麼閃耀，不過熟悉網頁製作的人還是蠻了解它的。
主要功能：Fireworks是Macromedia公司發布的一款專為網路圖形設計的圖形編輯軟體，它大大簡化了網路圖形設計的工作難度，無論是專業設計家還是業余愛好者，使用Fireworks都不僅可以輕松地製作出十分動感的GIF動畫，還可以輕易地完成大圖切割、動態按鈕、動態翻轉圖等，因此，對於輔助網頁編輯來說，Fireworks將是最大的功臣。
另外，如果樓主嫌學這個太麻煩，也可以暫時使用像FrontPage之類的傻瓜式網頁製作軟體。這玩意簡單易學，使用也比較方便。

7、怎麼製作自己的網頁？

★建設自己的網站較好的步驟☆

必須注意的是：建立自己的網站是一件浩大的工程，一般比較麻煩。所以應當按照一定的步驟一步步來。

我覺得建站可以按照以下步驟進行：
1、先在本地設一個文件夾，作為網站存儲的地方。名字最好取「My Sites」。
2、在網站文件夾裡面建立一些文件夾，包括「images」等（存儲圖片、文件等），並且按照網頁內容，再建立幾個文件夾。（也可以把存儲圖片、文件的文件夾在每個內容文件夾裡面各搞一些）
3、打開你的網頁編輯程序（例如FP、Dreamwear等），新建網頁，保存為「index」（主頁），重復以上步驟，在網站文件夾裡面建立「search」（查找）、「map」（站點地圖）、「index02」（網站簡介等）。
4、按照上面步驟，再在網站分類文件夾裡面建立許多網頁（接著還要把內容輸入網頁）
5、已經做到了這么多，我們該准備內容了吧。在硬碟上面再建立一個文件夾「File」，把准備好的文檔、圖片、程式、文件和網頁特效等放進去。（可以加入一些動態網頁）
6、慢慢把這些文件一個不漏的放進網頁裡面（要掌握技巧）
7、把網站充實了，就差不多了。這時應該申請一個域名（免費空間、附費都可以）。並且把自己的網站放入搜索引擎，而且在各種留言版上面宣傳。
8、把網站上傳至空間裡面，刪了准備文件，就OK了！

不過也可以這樣使用FP建站：

1、在FP裡面選擇新建站點。
2、然後在【導航】裡面設置網頁名稱以及標題。
3、准備好文檔、圖片、程式、文件和網頁特效等，把它們都充實進網站裡面。
4、申請一個域名（免費空間、附費都可以）。並且把自己的網站放入搜索引擎，而且在各種留言版上面宣傳。
5、把網站上傳至空間裡面，刪了准備文件。完畢。

如果使用Dreamwear來建站，那就更加高級啦！Dreamwear的功能很強大，安裝了它的朋友們可以研究研究。

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

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

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

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

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

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

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

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

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

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

9、製作一個HTML5網頁

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
 content="width=device-width;user-scalable=no;initial-scale=1.0;maximum-scale=1.0;minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/data.php">
</head>
<body>
<script>let student = new Object;
student.no = 1;
student.name = "大企鵝";
student.sex = "男";
student.born = "1995-09-25";
student.score = 0;
student.learn = function () {
    student.score += 10
};
student.age = function () {
    let returnAge;
    // 根據生日計算年齡（"1995-09-25"）
    //以下五行是為了獲取出生年月日，如果是從身份證上獲取需要稍微改變一下
 let strBirthdayArr = student.born.split("-");
    let birthYear = strBirthdayArr[0];
    let birthMonth = strBirthdayArr[1];
    let birthDay = strBirthdayArr[2];
    d = new Date();
    let nowYear = d.getFullYear();
    let nowMonth = d.getMonth() + 1;
    let nowDay = d.getDate();
    if (nowYear == birthYear) {
        returnAge = 0;//同年 則為0歲
 } else {
        let ageDiff = nowYear - birthYear; //年之差
 if (ageDiff > 0) {
            if (nowMonth == birthMonth) {
                let dayDiff = nowDay - birthDay;//日之差
 if (dayDiff < 0) {
                    returnAge = ageDiff - 1;
                } else {
                    returnAge = ageDiff;
                }
            } else {
                let monthDiff = nowMonth - birthMonth;//月之差
 if (monthDiff < 0) {
                    returnAge = ageDiff - 1;
                } else {
                    returnAge = ageDiff;
                }
            }
        } else {
            returnAge = -1;//返回-1 表示出生日期輸入錯誤 晚於今天
 }
    }

    return returnAge;//返回周歲年齡
};
document.body.innerHTML += student.score + "<br>";
document.body.innerHTML += student.age();
</script>
</body>
</html>

需要自定義年齡，初分數。

Usage： 學習: student.learn() 計算年齡： student.age()