• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 網頁設計教程 ] Dreamweaver製作基於WordPress的留言本—- 其他教程




    教學主題: Dreamweaver製作基於WordPress的留言本

    大家好!! 小編今天來和大家分享關於 其他教程中的網頁設計教程教學

    今天的這個教學主題是: Dreamweaver製作基於WordPress的留言本

    這教學的重點為這幾點 [ 基於,製作,選擇,設定,資料,留言,新增,名稱,一個,顯示, ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    Dreamweaver製作基於WordPress的留言本

    建立資料表:

    Step1

    首先開啟phpmyadmin,進入wordpress資料庫中,並新增一個wp_gbook的資料表與欄位數目8。

    Dreamweaver製作基於WordPress的留言本

    Step2

    接着依照下方設定欄位的名稱與型態,並且把gid設為UNSIGNED與auto_increment,表示該欄不可重覆,同時自動產生。

    Dreamweaver製作基於WordPress的留言本

    Step3

    按下執行成功結果如下所示。

    Dreamweaver製作基於WordPress的留言本

    建立PHP站台:

    Step4

    進入blog目錄,新增一個資料夾為gbook。

    Dreamweaver製作基於WordPress的留言本

    Step5

    開啟Dreamweaver點選右側欄位中的,檔案 / 管理網站,並按新增。

    Dreamweaver製作基於WordPress的留言本

    Step6

    網站命名可自行設定,這邊梅干是取名為gbook。

    Dreamweaver製作基於WordPress的留言本

    Step7

    伺服器技行設為PHP+MySQL,選擇在本機編輯和測試,以及選擇網站的目錄位置。

    Dreamweaver製作基於WordPress的留言本

    Step8

    接着按下測試URL,若已與伺服器連結,則會出現測試成功。

    Dreamweaver製作基於WordPress的留言本

    Step9

    按下一步就完成站台的設定了。

    Dreamweaver製作基於WordPress的留言本

    設定MySQL資料庫連線

    Step10

    完成站台後,接下來新增一個PHP網頁。

    Dreamweaver製作基於WordPress的留言本

    Step11

    點選右側欄位中的 應用程式 / MySQL連線,並輸入連線名稱、伺服器位置、使用者名稱、密碼,完成後點一下選取,再選擇資料庫名稱,好了之後點下右邊的測試,成功連線則會出現連線已設定完成的對話框。

    Dreamweaver製作基於WordPress的留言本

    M結資料集:

    Step12

    將應用程式頁`切換至M結,點下+選擇資料集(查詢),先選擇剛所設定的連線名稱以及表格,表格就是先前所新增的資料表名稱,完成後在下方的排序,選擇gid與遞減。

    Dreamweaver製作基於WordPress的留言本
    貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
    使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit/Undo )命令使
    用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

    設定顯示留言區塊:

    Step13

    都完成連結后,將剛所新增的網頁儲存一下。

    Dreamweaver製作基於WordPress的留言本
    貼心提醒: 使用選框工具( Marquee Tools )的時候,按住Shift鍵可以劃出 正方形和正圓
    的選區;按住Alt鍵將從起始點為中心勾劃選區。

    Step14

    建立一個table,再把 應用程式 /M結,將下方顯示的資料欄位拖曳到表格中。

    Dreamweaver製作基於WordPress的留言本

    Step15

    新增一個影像,並將選取影像塬始檔切換成資料來源,URL輸入影像位置,再點gpic這是用來設定留言圖示。

    Dreamweaver製作基於WordPress的留言本

    Step16

    接着再新增二個圖示,分別為web與eamil,並點一下小圖,在連結的地方一樣切到資料來源,分別設定為gweb與gmail。

    Dreamweaver製作基於WordPress的留言本

    Step17

    都完成後,把表格選起來,選擇 伺服器行為 / 重覆區域,這邊可自行設定每頁所要顯示留言的筆數,預設是10筆。

    Dreamweaver製作基於WordPress的留言本

    Step18

    再選擇 伺服器行為 / 如果資料集不是空的即顯示。

    Dreamweaver製作基於WordPress的留言本

    Step19

    在空白處輸入無任何留言等文字,再選擇 伺服器行為 / 如果資料集是空的即顯示,這e是用來設定,當資料庫是空時,就顯示此文字,當然要活潑點也可u作圖片或swf動畫。

    Dreamweaver製作基於WordPress的留言本

    Step20

    點上方的工具選單,資料 / 資料集分頁,接着將顯示方式設為文字。

    Dreamweaver製作基於WordPress的留言本

    Step21

    完成後分頁則是英文,這時把它選取起來,直接修改成中文即可。

    Dreamweaver製作基於WordPress的留言本

    Step22

    再選擇工具選單,資料 / 顯示記錄計數,用來顯示目前的筆數與分頁數。

    Dreamweaver製作基於WordPress的留言本

    新增留言區塊:

    Step23

    在顯示留言區塊上方,選擇工具選單,表單 /表單,新增一個表格,分一一的插入,文字欄位並將名稱設定如下。

    Dreamweaver製作基於WordPress的留言本

    Step24

    回應表情部分,選擇工具選單,表單 /選項按鈕,並將標`輸入p0.gif。

    Dreamweaver製作基於WordPress的留言本

    Step25

    接着點一下選項按鈕,點一下動態鈕,點一下閃電選擇gpic。

    Dreamweaver製作基於WordPress的留言本

    Step26

    選擇工具選單,表單 /隱藏欄位,id:Date、值:<?php echo $gdate = date("Y-m-d H:i"); ?>。

    Dreamweaver製作基於WordPress的留言本

    Step26

    選擇右側的 應用程式 / 插入記錄,在欄的地方,得稍為注意下,剛剛所新增的文字欄位與按鈕選項,得一一的對到欄位名稱才行,否則等下在留完言后,則會出現資料沒有寫入的問題,最後在下方,當資料寫入完畢后,將網頁導回那一頁,這邊直接設定index.php即可。

    Dreamweaver製作基於WordPress的留言本

    Step27

    完成後在插入留言表格的地方,就會出現一個淡色的區塊。

    Dreamweaver製作基於WordPress的留言本

    Step28

    點選上方的地球,發閻苯永床饈砸幌攏哈~酷!搞定~。

    Dreamweaver製作基於WordPress的留言本

    唿!總算把前端給介紹完了,看起來好像很多,但實際操作起來大約只要5~10分,其實用Dreamweaver開發真的很快,當用Dreamweaver把整個骨架弄出來后,不足的部分再coding一下就好,到目前為止只剩下後台管理的部分,讓梅干稍稍的休息,再把後台管理的部分發出來。

    先上面的教程中,已經成功的把前端留言機制與界面搞定了,雖然有了留言的機制,總也要有管理功能才能回覆留言,以及刪除不必要的廣告留言, 現在就馬上來為各位分享, 留言板後台管理的u作。

    Dreamweaver製作基於WordPress的留言本

    後台登入(gbk_admin.php):

    Step1

    新增一個PHP頁面並儲存為gbk_admin.php后,再新增一個表單,並插入二個文字框,完成後選擇 伺服器行為 / 使用者驗證 / 登入使用者。

    Dreamweaver製作基於WordPress的留言本

    Step2

    選擇連線驗證,再把表格選wp_users,並且把使用者名稱、密碼的欄位,與使用者名稱、密碼欄要對應到,在下方設定登入成功后前往到index.php,錯誤頁面可自行設定。

    Dreamweaver製作基於WordPress的留言本

    Step3

    切到 代碼 模式,找到$password后,把逗號後方改成MD5。

    Dreamweaver製作基於WordPress的留言本

    Step4

    有登入總也要有登出,選擇 服務器行為 / 使用者驗證 / 登出使用者。

    Dreamweaver製作基於WordPress的留言本

    設定回應留言 | 刪除 | 編輯顯示區塊(index.php):

    Step5

    開啟index.php切到程式碼模式,在留言內容下方,輸入下方語法,這一段是用來設定當回應不是空時就顯示回應內容。

    Dreamweaver製作基於WordPress的留言本

    Step6

    切到程式碼模式,在回應 | 刪除中,輸入下方語法,這段是用來設定當管理者登入成功時才顯示。

    Dreamweaver製作基於WordPress的留言本

    刪除 | 編輯留言設定:

    Step7

    接下來把回應選取起來,把檔案名稱設為re.php,再點參數鈕將名稱設為id,值的部分選擇gid。

    Dreamweaver製作基於WordPress的留言本

    Step8

    接下來把刪除選取起來,把檔案名稱設為del.php,再點參數鈕將名稱設為id,值的部分選擇gid。

    Dreamweaver製作基於WordPress的留言本

    Step9

    唿~總算都弄好~~那就發布來測試一下吧!這邊的帳號、密碼就與Wordpress中的登入帳號密碼相同,登入完成後,就會看到 登出 及 回應 刪除 等文字。

    Dreamweaver製作基於WordPress的留言本

    刪除留言(del.php):

    Step10

    新增一個PHP頁面並儲存為del.php后,再選擇 伺服器行為 / 刪除記錄,將URL參數後方輸入id,並把表格設為wp_gook,主索引鍵欄位設為gid,這邊要特別注意到,id的部分要設對,否則等一下將會無法刪除 。

    Dreamweaver製作基於WordPress的留言本

    Step11

    預覽一下,登入后就會看到回應刪除,直接點下刪除,就可把回應留言刪除。

    Dreamweaver製作基於WordPress的留言本

    回應留言(re.php):

    Step12

    新增一個PHP頁面並儲存為re.php后,並在該頁面中,建立一個表單與段落文字框后,再選擇 M結 / 資料集。

    Dreamweaver製作基於WordPress的留言本

    Step13

    這邊表格選擇wp_gbook后,在欄位部分,只選取gid與gre好了之後,再把右方的gre拖到段落文字框中。

    Dreamweaver製作基於WordPress的留言本

    Step14

    建立一個隱藏欄位,接着再把右方的gid拖拉到隱藏欄位中。

    Dreamweaver製作基於WordPress的留言本

    Step15

    選擇 伺服器行為 / 更新資料。

    Dreamweaver製作基於WordPress的留言本

    Step16

    在更新資料視窗中,分別將gid對應到剛隱藏欄位的id,gre對應到段落文字的id。

    Dreamweaver製作基於WordPress的留言本

    Step17

    預覽一下,登入管理者再按回應,輸入回應內容后,按下送出,哈~也可正常運作。

    Dreamweaver製作基於WordPress的留言本

    其實這是一個很簡易的留言板,為了讓它能與wordpress整合起來,所以在管理者登入的地方,梅干則是直接去抓wordpress的欄位,將子管理帳號就直接從wordpress來管理即可。

    進入論壇參與討論:http://www.missyuan.com/viewthread.php?tid=434851

    看完小編分享的教學之後 是不是對網頁設計教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 Dreamweaver製作基於WordPress的留言本 這教學會喜歡

    文章標題: 骨子愛創意- Dreamweaver製作基於WordPress的留言本–轉載請註明來源處

    本教學分類為網頁設計教程中的 其他教程相關教學

    文章相關關鍵字為: 基於,製作,選擇,設定,資料,留言,新增,名稱,一個,顯示,

    本文永久連結 :Dreamweaver製作基於WordPress的留言本

    本文轉載自 :VIA