、菜鳥級網頁制作軟件

如果你是一個網頁制作初學者，那么讓下面幾種軟件帶你走進那絢麗多彩的網頁制作世界吧！

①Microsoft FrontPage

如果你曾對Word很熟悉，那么相信你用FrontPage進行網頁設計一定會非常順手。使用FrontPage制作網頁，你能真正體會到“功能強大，簡單易用”的含義。頁面制作由FrontPage中的Editor完成，其工作窗口由3個標簽頁組成，分別是“所見即所得”的編輯頁，HTML代碼編輯頁和預覽頁。FrontPage帶有圖形和GIF動畫編輯器，支持CGI和CSS。向導和模板都能使初學者在編輯網頁時感到更加方便。

FrontPage最強大之處是其站點管理功能。在更新服務器上的站點時，不需要創建更改文件的目錄。FrontPage會為你跟蹤文件并拷貝那些新版本文件。FrontPage是現有網頁制作軟件中惟一既能在本地計算機上工作，又能通過Internet直接對遠程服務器上的文件進行工作的軟件。

②Netscape編輯器

Netscape Communicator和Netscape Navigator Gold3.0版本都帶有網頁編輯器。如果你喜歡用Netscape瀏覽器上網，使用Netscape編輯器真是簡單方便！當你用Netscape瀏覽器顯示網頁時，單擊編輯按鈕，Netscape就會把網頁存儲在硬盤中，然后就可以開始編輯了。你也可以像使用Word那樣編輯文字、字體、顏色，改變主頁作者、標題、背景顏色或圖像，定義描點，插入鏈接，定義文檔編碼，插入圖像，創建表格等，是不是與FrontPage 2000還有些像?但是，Netscape編輯器對復雜的網頁設計就顯得功能有限了，它連表單創建、多框架創建都不支持。

Netscape編輯器是網頁制作初學者很好的入門工具。如果你的網頁主要是由文本和圖片組成的，Netscape編輯器將是一個輕松的選擇。如果你對HTML語言有所了解的話，能夠使用Notepad或Ultra Edit等文本編輯器來編寫少量的HTML語句，也可以彌補Netscape編輯器的一些不足。

③Adobe Pagemill

Pagemill功能不算強大，但使用起來很方便，適合初學者制作較為美觀、而不是非常復雜的主頁。如果你的主頁需要很多框架、表單和Image Map圖像，那么Adobe Pagemill的確是你的首選。

Pagemill另一大特色是有一個剪貼板，可以將任意多的文本、圖形、表格拖放到里面，需要時再打開，很方便。

④Claris Home Page

如果使用Claris Home Page軟件，你可以在幾分鐘之內創建一個動態網頁。這是因為它有一個很好的創建和編輯Frame(框架)的工具，你不必花費太多的力氣就可以增加新的Frame(框架)。而且Claris Home Page 3.0集成了FileMaker數據庫，增強的站點管理特性還允許你檢測頁面的合法連接。不過界面設計過于粗糙，對Image Map圖像的處理也不完全。

二、中級網頁制作軟件

如果你對網頁設計已經有了一定的基礎，對HTML語言又有一定的了解，那么你可以選擇下面的幾種軟件來設計你的網頁，他們一定會為你的網頁添色不少。

①DreamWeaver

自制動態HTML動畫的網頁

DreamWeaver是一個很酷的網頁設計軟件，它包括可視化編輯、HTML代碼編輯的軟件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它還能通過拖拽從頭到尾制作動態的HTML動畫，支持動態HTML(Dynamic HTML)的設計，使得頁面沒有plug-in也能夠在Netscape和IE 4.0瀏覽器中正確地顯示頁面的動畫。同時它還提供了自動更新頁面信息的功能。

DreamWeaver還采用了Roundtrip HTML技術。這項技術使得網頁在DreamWeaver和HTML代碼編輯器之間進行自由轉換，HTML句法及結構不變。這樣，專業設計者可以在不改變原有編輯習慣的同時，充分享受到可視化編輯帶來的益處。DreamWeaver最具挑戰性和生命力的是它的開放式設計，這項設計使任何人都可以輕易擴展它的功能。

②Fireworks

第一款徹底為Web制作者們設計的軟件

Fireworks的來頭實在不小，它的出現使Web作圖發生了革命性的變化。Fireworks是專為網絡圖像設計而開發，內建豐富的支持網絡出版功能，比如Fireworks能夠自動切圖、生成鼠標動態感應的javascript。而且Fireworks具有十分強大的動畫功能和一個幾乎完美的網絡圖像生成器(Export功能)。它增強了與dreamweaver的聯系，可以直接生成dreamweaver的Libaray甚至能夠導出為配合CSS式樣的網頁及圖片！

③Flash

讓你的網頁動起來

Flash是用在互聯網上動態的、可互動的shockwave。它的優點是體積小，可邊下載邊播放，這樣就避免了用戶長時間的等待。#{6FLASH6}#可以用其生成動畫，還可在網頁中加入聲音。這樣你就能生成多媒體的圖形和界面，而使文件的體積卻很小。FLASH雖然不可以像一門語言一樣進行編程，但用其內置的語句并結合JavaScripe，您也可做出互動性很強的主頁來。有人曾經說過：下個世紀的網絡設計人不會用FLASH，必將被淘汰出局！我相信這句話沒錯！

④HotDog Professional

制作要加入多種復雜技術的網頁

HotDog是較早基于代碼的網頁設計工具，其最具特色的是提供了許多向導工具，能幫助設計者制作頁面中的復雜部分。HotDog的高級HTML支持插入marquee，并能在預覽模式中以正常速度觀看。這點非常難得，因為即使首創這種標簽的Microsoft在FrontPage中也未提供這樣的功能。HotDog對plug-in的支持也遠遠超過其他產品，它提供的對話框允許你以手動方式為不同格式的文件選擇不同的選項。但對中文的處理不很方便。

HotDog是個功能強大的軟件，對于那些希望在網頁中加入CSS、Java、RealVideo等復雜技術的高級設計者，是個很好的選擇。

⑤HomeSite

制作可完全控制頁面進程的網頁

Allaire的HomeSite是一個小巧而全能的HTML代碼編輯器，有豐富的幫助功能，支持CGI和CSS等等，并且可以直接編輯perl程序。HomeSite工作界面繁簡由人，根據習慣，可以將其設置成像Notepad那樣簡單的編輯窗口，也可以在復雜的界面下工作。

HomeSite更適合那些比較復雜和精彩頁面的設計。如果你希望能完全控制你制作的頁面的進程，HomeSite是你最佳選擇。不過對于生手過于復雜。

⑥HotMetal Pro

制作具有強大數據嵌入能力的網頁

HotMetal既提供“所見即所得”圖形制作方式，又提供代碼編輯方式，是個令各層次設計者都不至于失望的軟件。但是初學者需要熟知HTML，才能得心應手地使用這個軟件。HotMetal具有強大的數據嵌入能力，利用它的數據插入向導，可以把外部的Access、Word、Excel以及其他ODBC數據提出來，放入頁面中。而且HotMetal能夠把它們自動轉換為HTML格式，是不是很棒?此外它還能轉換很多老格式的文檔(如WordStar等)，并能在轉換過程中把這些文檔里的圖片自動轉換為GIF格式。

HotMetal為用戶提供了“太多”的工具，而且它還可以用網狀圖或樹狀圖表現整個站點文檔的鏈接狀況。

三、高級網頁制作軟件

①Microsoft Visual Studio

該系列的版本有：2003、2005、2008和未來的版本；

適合開發動態的aspx網頁，同時，還能制作無刷新網站、webservice功能等，僅適合高級用戶。

②Jbuilder

不論是各種版本，均適合使用其開發出JSP網頁，僅適合高級用戶。

③記事本

別以為記事本功能非常少，軟件很簡單；但是，如何想使用它來制作網頁，也僅適合高級用戶；因為在其內容，沒有任何可視化的操作可直接制作網頁，而只能編寫各種HTML代碼、CSS代碼、JS代碼和各種動態腳本，方能制作出網頁來。

果你是JavaScript的新手，諸如模塊捆綁器與模塊加載器，Webpack與瀏覽器,AMD與CommonJS之類的術語,可能會變得不知所措,但了解它對Web開發人員至關重要,下面我們就一起來看看。

什么是模塊？

好的作者將他們的書分為章節，優秀的程序員將其程序分為模塊，好的模塊是高度獨立的，具有獨特的功能，可以根據需要對它們進行改組，刪除或添加，而不會破壞整個系統。

為什么要使用模塊？

1. 可維護性

模塊是獨立的。設計良好的模塊旨在盡可能減少對代碼庫各部分的依賴，從而使其能夠獨立增長和改進。當模塊與其他代碼解耦時，更新單個模塊要容易得多。

1. 命名空間

在JavaScript中，頂級函數范圍之外的變量是全局變量。因此，普遍存在命名空間污染，這是一大禁忌，模塊允許我們通過為變量創建私有空間來避免名稱空間污染。

1. 可重用性

可以將以前編寫的代碼復制到一個新的項目中使用。

模塊模式

Module模式用于模仿類的概念（因為JavaScript本身不支持類），因此我們可以將公共方法和私有方法以及變量存儲在單個對象中-類似于在Java等其他編程語言中使用類的方式或Python。這使我們可以為要公開的方法創建面向公眾的API，同時仍將私有變量和方法封裝在閉包范圍內。

下面介紹幾種方法可以完成模塊模式：

1. 匿名閉包

(function () {
    //在封閉范圍內，我們將這些變量設為私有
    var myGrades=[93, 95, 88, 0, 55, 91];
    var failing=function(){
        var failingGrades=myGrades.filter(function(item) {
        return item < 70;});
        return '你失敗了 ' + failingGrades.length + ' 次.';
    }
    console.log(failing());
}());
// 你失敗了2次.

1. 引入全局

jQuery類庫使用的另一種流行方法是全局導入。它類似于我們剛剛看到的匿名閉包，只不過現在我們將全局變量作為參數傳遞

(function ($, HELLO) {
    // 當前域有權限訪問全局jQuery($)HELLO
}(jQuery, HELLO));

1. 模塊出口

有時你不只想用全局變量，但你需要先聲明他們（模塊的全局調用）。我們用匿名函數的返回值，很容易輸出他們，這樣做就完成了基本的模塊模式。

var Module=(function () {
    var my={},
        privateVariable=1;
    
    function privateMethod() {
        // ...
    }
    
    my.moduleProperty=1;
    my.moduleMethod=function () {
        // ...
    };
    
    return my;
}());

CommonJS、AMD、UMD

CommonJS

CommonJS是一個志愿者工作組，負責設計和實現用于聲明模塊的JavaScript API。 CommonJS模塊本質上是一段可重用的JavaScript，它可以導出特定的對象，使它們可用于其他模塊在其程序中需要。如果你使用Node.js編程，你將非常熟悉這種格式。

function myModule() {
    this.hello=function() {
        return 'hello!';
    }

    this.goodbye=function() {
        return 'goodbye!';
    }
}

module.exports=myModule;

想要使用myModule時，他們可以在文件中要求它，如下所示：

var myModule=require('myModule');
var myModuleInstance=new myModule();
myModuleInstance.hello(); // 'hello!'
myModuleInstance.goodbye(); // 'goodbye!'

AMD

CommonJS很好，但是如果我們要異步加載模塊怎么辦？答案稱為異步模塊定義，簡稱AMD。

使用AMD加載模塊如下所示

define(['myModule', 'myOtherModule'], function(myModule, myOtherModule) {
  console.log(myModule.hello());
});

與CommonJS不同，AMD采用了瀏覽器優先的方法以及異步行為來完成工作,，AMD的另一個好處是你的模塊可以是對象，函數，構造函數，字符串，JSON和許多其他類型，而CommonJS僅支持將對象作為模塊

UMD

對于要求同時支持AMD和CommonJS功能的項目，還有另一種格式：通用模塊定義（UMD）。 UMD本質上創建了一種使用這兩種方法之一的方式，同時還支持全局變量定義。所以，UMD模塊能夠在客戶端和服務器上工作。

(function (root, factory) {
    if (typeof define==='function' && define.amd) {
        // AMD
        define(['myModule', 'myOtherModule'], factory);
    } else if (typeof exports==='object') {
        // CommonJS
        module.exports=factory(require('myModule'), require('myOtherModule'));
    } else {
        // 瀏覽器全局變量（注意：root是window）
        root.returnExports=factory(root.myModule, root.myOtherModule);
    }
}(this, function (myModule, myOtherModule) {
    // 方法
    function notHelloOrGoodbye(){}; // 私有方法
    function hello(){}; // 一個公共方法，因為它已返回
    function goodbye(){}; //一個公共方法，因為它已返回
    // 公開的公共方法
    return {
        hello: hello,
        goodbye: goodbye
    }
}));

ES6

以上所有模塊都不是JavaScript固有的。相反，我們通過使用模塊模式CommonJS或AMD創建了模擬模塊系統的方法，幸運的是，TC39（定義ECMAScript語法和語義的標準機構）引入了ECMAScript 6（ES6）內置模塊。

ES6為導入和導出模塊提供了各種各樣的可能性，相對于 CommonJS 或 AMD，ES6模塊的優勢在于它提供了兩全其美的功能: 緊湊聲明語法和異步加載，以及更好的循環依賴支持。

下面是一個例子

CommonJS方式：

// lib/counter.js
var counter=1;
function increment() {
  counter++;
}
function decrement() {
  counter--;
}
module.exports={
  counter: counter,
  increment: increment,
  decrement: decrement
};

// src/main.js
var counter=require('../../lib/counter');
counter.increment();
console.log(counter.counter); // 1

在這個示例中，我們基本上復制了兩個模塊: 一個在導出時復制，另一個在需要時復制。

main.js 中的副本與原始模塊斷開了連接。這就是為什么即使我們增加我們的計數器，它仍然返回1ーー因為我們導入的計數器變量是從模塊中斷開的計數器變量的副本。

因此，遞增計數器將在模塊中遞增它，但不會遞增所復制的版本。修改計數器變量復制版本的唯一方法是手動修改:

counter.counter++;
console.log(counter.counter); // 2

我們使用ES6模塊來重寫：

// lib/counter.js
export let counter=1;
export function increment() {
  counter++;
}
export function decrement() {
  counter--;
}
// src/main.js
import * as counter from '../../counter';
console.log(counter.counter); // 1
counter.increment();
console.log(counter.counter); // 2

這就是CommonJS與ES6 modules的區別之一。

總結

我想看了這么多內容你心里一定對JavaScript modules有了大致了解。在大多數情況下（不管是web還是node）我都更愿意使用ES6 Modules來寫我的JavaScript代碼。我也希望這篇文章能讓你更好的理解JavaScript的模塊。

body {
 background: resolve('foobar.jpg');
}