電子商務(wù)開發(fā)的前臺技術(shù).ppt

1、Electronic Commerce電子商務(wù),第四章 電子商務(wù)網(wǎng)站建設(shè)與電子商務(wù)開發(fā)的前臺技術(shù)2,Review,頁面的層次結(jié)構(gòu)：一級頁面、二級頁面、三級頁面 無論是復雜的商業(yè)網(wǎng)站，還是簡單的個人網(wǎng)站，在網(wǎng)頁的層次結(jié)構(gòu)上都存在一些共同點，即任何一個網(wǎng)站均可用三層結(jié)構(gòu)實現(xiàn)，也就是： 首頁欄目頁文章頁（內(nèi)容頁） 或一級頁面二級頁面三級頁面。,本節(jié)課的目標,簡單了解一下站點、網(wǎng)頁、主頁等概含 了解網(wǎng)頁的制作工具的特點 學習制作簡單網(wǎng)頁,站點與網(wǎng)頁,網(wǎng)站 ：1、是計算機網(wǎng)絡(luò)上的位置 2、有各種信息,網(wǎng)頁是網(wǎng)站的其本組成文件，可以包含文本、圖片、動畫、音樂、鏈接等元素,可以把一個網(wǎng)站想像成一個國家：它首

2、先有一位置；其二包含各種內(nèi)容,網(wǎng)頁 與主頁,主頁組成與一般網(wǎng)頁一樣，核心是html語言 使用瀏覽器訪問網(wǎng)站時，網(wǎng)站中第一個被執(zhí)行的文件稱為主頁，主頁的基本功能是幫助訪問者輕松瀏覽網(wǎng)站,如把網(wǎng)站比成一本書，則網(wǎng)頁為書中的每一張，而主頁為書的目錄頁,制作工具,可以用任何文字編輯工具制作網(wǎng)頁 前提是熟練掌握html語言 現(xiàn)在出現(xiàn)了不用面對語言的工具軟件如frontpage、還有flash、dreamweave,要想學做網(wǎng)頁，首先得了解制作網(wǎng)頁的工具。 制作網(wǎng)頁主要有以下一些工具 Frontpage，操作簡單，實用，學起來比較輕松。 Dreamweaver：這是網(wǎng)頁三劍客之一，專門制作網(wǎng)頁的工具，可以

3、自動將網(wǎng)頁生成代碼，是普通網(wǎng)頁制作者的首選工具，界面簡單，實用功能比較強大。建議初學者選用。 另外一個工具就是代碼編輯工具，例如寫字本、EditPlus等，這些工具主要編輯asp等動態(tài)網(wǎng)頁。 此外還有一些網(wǎng)絡(luò)編程工具，javascript、java編輯器等。 要真正做一個好的網(wǎng)站，還必須有良好的設(shè)計功底。所以還得學很多邊緣性的軟件，例如photoshop、flash等。 大型的網(wǎng)站往往還需要數(shù)據(jù)庫的支持，所以還得懂數(shù)據(jù)庫。,制作工具,不要忘記加入網(wǎng)頁的titletitle是顯示在瀏覽器標題欄的文字，在網(wǎng)頁下載時，它是最先出現(xiàn)的，所以你可以用它提示網(wǎng)頁的主要內(nèi)容，或者寫些歡迎的話 將首頁命名為i

4、ndex.htm這是規(guī)定，沒什么好多說的，哪頁一旦被取名叫index.htm以后，等整個網(wǎng)站上傳了以后，它就是別人用你的網(wǎng)址看到你網(wǎng)站的第一頁 。,網(wǎng)頁制作基礎(chǔ)知識,將所有文件的文件名統(tǒng)一格式用英文字母或數(shù)字。 圖片應(yīng)使用.gif 和.jpg (jpeg)格式這是兩種位圖文件格式，在同樣的視覺清晰度下，文件量往往比其他文件格式小，也就是說在網(wǎng)上下載的時候時間會更短。 用鏈接連接各個頁面建議這步最后做，先將各個頁面的其它部分做好,網(wǎng)頁制作基礎(chǔ)知識,用dreamweave制作網(wǎng)頁的過程,先建立站點 然后添加網(wǎng)頁 然后添加內(nèi)容,站點結(jié)構(gòu),各網(wǎng)頁之間通過“超鏈接”，構(gòu)成一個整體,超級鏈接有三種情況。

5、another location in the same document (from TOP of the page to BOTTOM of the page) another document on the same host machine (another webpage in a folder on my pc) another document on the Internet (from SCU to SINA),例：設(shè)計、制作以校園生活為內(nèi)容的網(wǎng)站,學習目的： 1.掌握有關(guān)網(wǎng)頁制作的基本知識。包括：站點、網(wǎng)頁、HTML語言、網(wǎng)頁的各種元素特性以及超鏈接等知識。 2.掌握制作簡單

6、網(wǎng)頁的方法和技巧。,返回,根據(jù)需要，確定網(wǎng)站首頁包括“校園新聞”、“網(wǎng)上學園”、“課余生活”、“資源下載”、“友情鏈接”、“留言板”共六大板塊，接下來進行站點各頁面的規(guī)劃。,站點的規(guī)劃,校園新聞,網(wǎng)上學園,課余生活,資源下載,留言板,校園趣話,校園文學,音樂無限,娛樂新聞,體育新聞,首頁,站點的規(guī)劃,進行了網(wǎng)站的規(guī)劃、相關(guān)信息資料的收集后，接下來的任務(wù)就是建立站點。要建立一個找點，就要選定創(chuàng)建站點、制作網(wǎng)頁的工具，即網(wǎng)頁制作軟件。網(wǎng)頁制作軟件非常多，現(xiàn)在比較流行的有Dreamweaver, FrontPage等工具軟件。,返回,選擇網(wǎng)頁制作軟件,某教育網(wǎng)主頁,網(wǎng)站名和網(wǎng)站LOGO,導航區(qū),網(wǎng)頁

7、內(nèi)容,HTML語言 標記性語言。用來編制網(wǎng)頁文檔(也稱HTML文檔) 。并不需要經(jīng)過編譯，只需要通過瀏覽器來打開就可以看到結(jié)果 采用了標記方式，描述了每個在網(wǎng)頁上的組件，例如文本段落、文本格式、圖像、超鏈接等 通過超文本鏈接能方便地進行各種信息之間切換,網(wǎng)頁制作的基礎(chǔ)是HTML語言 HTML是一種超文本置標語言，是一種標記語言，而不是編程語言 為了提高網(wǎng)頁制作(特別是動態(tài)網(wǎng)頁制作)的技術(shù)水平，就有必要了解、熟悉甚至精通HTML語言及腳本語言,HTML文檔的編輯,編輯操作 Word： “視圖”“HTML源文件” IE5： “查看” “源文件” FrontPage或者dreamwaver：單擊“H

8、TML”按鈕 進入FrontPage 的HTML編輯狀態(tài) 其他編輯器(如記事本, 寫字板等) 不區(qū)分大小寫,HTML文檔的基本結(jié)構(gòu),(1) 每個HTML文檔(網(wǎng)頁)以標記開始，以結(jié)束 四種基本標記如下： 標明文檔的開始和結(jié)束，定義文檔 標明文檔的頭部 標明標題，顯示在瀏覽器的標題欄中 標明文檔的主體 (2) HTML文檔一般由兩部分組成：頭部和主體,(3) 標記以“”及標記名組成 雙邊標記： 示例： . ,常用的一些標記,（1）標題標記： 標題文字 示例： 網(wǎng)頁制作 H1到H3字體逐漸變小。 （2）文字標記： 文字 設(shè)置文字的大小、字體及顏色 示例： 網(wǎng)頁制作 （3）BODY標記的TEXT屬性

9、及BGCOLOR屬性： 文字 設(shè)定整個網(wǎng)頁的文字顏色和背景顏色 示例： 網(wǎng)頁制作 ,常用的一些標記,（4）段落標記： 文字塊 示例： 網(wǎng)頁制作 網(wǎng)頁制作 （5）單相標簽-換行標記： 示例： 網(wǎng)頁制作 網(wǎng)站管理 （6）居中對齊標記： 文字 示例： 網(wǎng)頁制作 （7）注釋標記： 或 示例：,HTML文檔的基本結(jié)構(gòu),例1 顯示“歡迎您來到HTML世界” 例1 歡迎您來到HTML世界 假設(shè)該文檔的文件名為“Welcome.htm” ，存放在當前站點中,1,例2 建立含有兩個網(wǎng)頁鏈接的HTML文檔 例2 歡迎您 瀏覽北大 其中: 表示分段 表示插入超級鏈接 思考：本例中兩個鏈接分別是鏈接三種情況中的哪種？

10、,例3 顯示唐詩游子吟, 一首唐詩 游子吟 慈母手中線，游子身上衣。 臨行密密縫，意恐遲遲歸。 誰言寸草心，報得三春暉。 ,例4 顯示唐詩靜夜思, 靜夜思 靜夜思 (唐詩) 床前明月光，疑是地上霜。   舉頭望明月，低頭思故鄉(xiāng)。 注：   的作用！,網(wǎng)頁腳本語言初步認識,腳本(Script）實際上就是一段程序，用來完成某些特殊的功能(主要是讓它完成HTML不能做的事) 兩種腳本：服務(wù)器端腳本和客戶端腳本 客戶端腳本程序可以直接嵌入到HTML文檔中，并由客戶瀏覽器解釋執(zhí)行(可減輕服務(wù)器的負荷) 腳本語言有VBScript、JavaScript。 VBScript由Mcrosoft公司開發(fā)，基于Visual BASIC, H=HOUR(TIME() 求出系統(tǒng)時間的小時數(shù) IF H 也可以增加時間段，如文件夾中的例5-2。,例5 根據(jù)不同的時間段在網(wǎng)頁上發(fā)出問候語，如“早上好”等,Exercise,tell the difference between and in HTML