- 電子商務網頁設計與制作（微課版）
- 封緒榮主編
- 2753字
- 2024-06-21 21:25:11
1.2 電子商務網頁制作相關軟件和技術
制作網頁首先需要選擇網頁制作相關軟件和技術。由于目前所見即所得類型的工具越來越多，使用也越來越方便，所以制作網頁已經變成了一項輕松的工作。Dreamweaver、Photoshop這兩款軟件相輔相成，是制作網頁的常用軟件。另外，制作網頁還需要掌握HTML5、JavaScript、CSS3、ASP等技術。
1.2 電子商務網頁制作相關軟件和技術
1.2.1 Dreamweaver
Dreamweaver是業界領先的Web開發工具，該工具可以幫助設計人員和開
發人員高效設計、開發和維護網站。Dreamweaver是網頁設計與制作領域中用戶多、應用廣、功能強的軟件。Dreamweaver用于網頁的整體布局和設計，以及對網站進行創建和管理，利用它可以輕而易舉地制作出充滿動感的網頁。Dreamweaver提供眾多的可視化設計工具、應用開發環境以及代碼編輯支持，使開發人員和設計人員能夠快捷地創建功能強大的網絡應用程序。
利用Dreamweaver可以進行網頁排版布局、添加各種網頁特效，還可以輕松開發出動態網頁。圖1-12所示為利用Dreamweaver制作網頁的界面。
圖1-12 利用Dreamweaver制作網頁的界面
1.2.2 Photoshop
網頁中如果只有文字，則缺少生動性和活潑性，會影響視覺效果和整個頁面的美觀性，因此圖片是網頁的重要組成元素之一。使用Photoshop可以設計出精美的網頁圖片。Photoshop是業界公認的圖形圖像處理“專家”，也是全球性的專業圖像編輯行業標準。圖1-13所示為利用Photoshop處理網頁圖片的界面。
圖1-13 利用Photoshop處理網頁圖片的界面
Photoshop提供了高效的圖像編輯和處理功能、人性化的操作界面，深受網頁設計人員的青睞。Photoshop集圖像設計、合成和高品質輸出等功能于一身，廣泛應用于平面設計、網頁美工、數碼照片后期處理、建筑效果后期處理等諸多領域。該軟件在網頁前期設計中，無論是色彩的應用、版面的設計、文字特效和按鈕的制作，還是網頁動畫的制作，均具有重要作用。
1.2.3 HTML5
HTML5是一種用于組織Web內容的語言，其目的是通過創建一種標準和直觀的標記語言，使Web設計和開發變得更容易。HTML5提供了各種切割和劃分頁面的手段，并且允許創建的切割組件不僅能有邏輯地組織站點，而且能賦予網站聚合的能力。這是HTML5富有表現力的語義和實用性美學的基礎，HTML5賦予設計人員和開發人員各種層面的能力來向外發布各式各樣的內容，從簡單的文本內容到豐富的、交互式的多媒體無不包括在內。
HTML5的基本結構如圖1-14所示。
圖1-14 HTML5的基本結構
下面介紹HTML5的基本結構。
（1）HTML標簽：<html>標簽位于HTML（Hypertext Markup Language，超文本標記語言）文檔的最前邊，用于標識HTML文檔的開始，而</html>標簽恰恰相反，它位于HTML文檔的最后邊，用于標識HTML文檔的結束，兩個標簽必須一起使用。
（2）head標簽：<head>和</head>構成HTML文檔的開頭部分，在此標簽對之間可以使用<title></title>、<script></script>等標簽對，這些標簽對都是用于描述HTML文檔相關信息的，<head></head>標簽對之間的內容不會在瀏覽器內顯示出來，這兩個標簽必須一起使用。
（3）body標簽：<body></body>是HTML文檔的主體部分，在此標簽對之間可包含<p></p>、<h1></h1>、<br></br>等眾多的標簽對，它們定義的文本、圖片等內容將會在瀏覽器內顯示出來，這兩個標簽必須一起使用。
（4）title標簽：使用過瀏覽器的人可能會注意到瀏覽器窗口頂部顯示的文本信息，那些信息一般是網頁的“標題”，要將網頁的標題顯示到瀏覽器的頂部其實很簡單，只需要在<title></title>標簽對之間加入要顯示的文本即可。
1.2.4 JavaScript
使用JavaScript等簡單易懂的腳本語言，結合HTML代碼，可快速地完成網站的制作。
腳本語言介于HTML和C、C++、Java、C#等編程語言之間。腳本語言又被稱為擴建的語言，或者動態語言，是一種編程語言，用來控制軟件應用程序。目前各類腳本語言被廣泛應用于網頁設計中，因為腳本語言不僅可以減小網頁的規模和提高網頁瀏覽速度，還可以豐富網頁的表現，如動畫、聲音等。
腳本語言主要特點如下。
?腳本語言的語法比較簡單，比較容易掌握。
?腳本語言與應用程序密切相關，通常用于編寫和執行與應用程序相關的功能。
?腳本語言的代碼能夠被實時生成和執行。
?腳本語言不需要編譯，一般都由相應的腳本引擎來解釋執行。
下面通過一個簡單的實例熟悉JavaScript的基本使用方法。
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<script language="javascript">
document.write("<font size=10 color=#fchfdm>JavaScript 的基本使用方法!</font>");
</script>
</body>
</html>
代碼中加粗的部分就是JavaScript腳本的具體應用，瀏覽效果如圖1-15所示。
圖1-15 JavaScript腳本的具體應用
以上代碼應用了簡單的JavaScript腳本，它分為3部分，第一部分是<script language="javascript">，它告訴瀏覽器下面是JavaScript腳本，開頭使用<script>標簽，表示這是一個腳本的開始，在<script>標簽中使用language指明使用哪一種腳本（因為并不只存在JavaScript一種腳本，還有VBScript等腳本，所以這里要用language屬性指明使用的是JavaScript腳本）；第二部分是JavaScript腳本，用于創建對象、定義函數或直接執行某一功能；第三部分是</script>，用于告訴瀏覽器JavaScript腳本到此結束。
1.2.5 CSS3
網頁最初是用HTML標簽，如標題標簽<h1>、段落標簽<p>、表格標簽<table>等，來定義頁面文檔及格式的。但這些標簽不能滿足更多的文檔樣式需求，為了解決這個問題，1997年萬維網聯盟（World Wide Web Consortium，W3C）在頒布HTML4標準的同時，也公布了有關樣式表的第一個標準CSS1，自CSS1發布之后，又在1998年5月發布了CSS2，樣式表得到了充實。
樣式表使用CSS的首要目的是將網頁上的元素精確定位。其次，它把網頁上的內容結構和格式控制相分離。瀏覽者想要看到的是網頁上的內容結構，而為了讓瀏覽者更好地看到這些信息，就要使用CSS來控制格式。內容結構和格式控制相分離，使得網頁可以僅由內容構成，而網頁的格式通過CSS文件來控制。
目前，CSS3是移動Web開發的主要技術之一，它在界面修飾方面占有重要的地位。由于移動設備的Web瀏覽器都支持CSS3，因此對于不同瀏覽器之間的兼容性問題，它們之間的差異非常小。不過對于移動Web瀏覽器的某些CSS特性，仍然需要在兼容性方面做一些工作。
CSS3作為在HTML頁面負責頁面布局和頁面裝飾的技術，可以更加有效地對頁面布局、字體、顏色、背景及動畫效果實現精確控制。圖1-16所示為使用CSS3布局的網頁。
圖1-16 使用CSS3布局的網頁
1.2.6 ASP
ASP是Active Server Pages的縮寫，意為“活動服務器頁面”。ASP是微軟公司開發的代替公共網關接口（Common Gateway Interface，CGI）腳本的一種應用，它可以與數據庫和其他程序進行交互，是一種簡單、方便的編程工具。ASP的網頁文件的格式是.asp，現在常應用于各種動態網站中。ASP提供了服務器端腳本編寫環境，可以用來創建和運行動態網頁或Web應用程序。ASP可以包含HTML標簽、普通文本、腳本命令以及COM組件等。利用ASP可以向網頁中添加交互式內容，也可以創建并使用HTML網頁作為用戶界面的Web應用程序。
與HTML相比，ASP具有以下特點。
（1）利用ASP可以突破靜態網頁的一些功能限制，實現動態網頁技術。
（2）ASP文件是包含在HTML代碼所組成的文件中的，易于修改和測試。
（3）服務器上的ASP解釋程序會在服務器端制定ASP程序，并將結果以HTML格式傳遞到瀏覽器上，因此各種瀏覽器都可以正常瀏覽ASP創建的網頁。
（4）ASP提供了一些內置對象，使用這些對象可以使服務器端腳本功能更強。例如，可以從Web瀏覽器中獲取用戶通過HTML表單提交的信息，并在腳本中對這些信息進行處理，然后向Web瀏覽器發送信息。
（5）ASP可以使用服務器端的ActiveX組件來執行各種各樣的任務，如存取數據、收發E-mail和訪問文件系統等。
（6）由于服務器將ASP程序執行的結果以HTML格式傳回瀏覽器，因此使用者不會看到ASP編寫的原始程序代碼，可防止ASP程序代碼被竊取。