彰化县政府补助办理网页设计资料库应用班.ppt
《彰化县政府补助办理网页设计资料库应用班.ppt》由会员分享,可在线阅读,更多相关《彰化县政府补助办理网页设计资料库应用班.ppt(98页珍藏版)》请在装配图网上搜索。
彰化縣政府補助辦理網頁設計資料庫應用班,建國技術學院資訊管理學系饒瑞佶rcjaocc.ckit.edu.tw2004/7/5,環境介紹,上課環境介紹建國資管系一管、電腦教室一助教介紹每日記得簽到(9:0016:00)需要協助請洽資管辦公室其他,歡迎大家,上課方式,上機實做+投影片講解(廣播系統)兩本課本+筆記本+水杯檔案可存入D槽中期末專題製作歡迎隨時舉手發問其他,上課內容,網際網路資料庫程式設計,ASP(ActiveServerPages)by饒瑞佶,JSP(JavaServerPages)by賴慧敏,資料庫管理by饒瑞佶,.tw/rueychi/index.htm,HTML網頁設計by饒瑞佶,如何學習網頁程式設計,一定要有信心,“沒有錯誤是沒有原因的“,從錯誤中可以學得更多。它沒有明確的範圍,學習態度不好的人可以學得很少很少,學習態度好的同學可以學到很多很多(絕對不限於任何一本課本)。模仿是第一步,不要不好意思模仿而一味地自求創新,第二步是變通,一點一點地變,第三步才是創造。,學習網頁程式設計的態度,習題不要抄襲,抄襲是放棄學習的行為,如果你要放棄了,那又何必抄襲呢?一定要自己動手寫,而不是用眼看。多討論,多觀摩,不要單打獨鬥,也不要吝嗇與人分享。如果你已經有基礎,不要把這門課當新的東西來學。好像開車,操作方式大同小異。,學習網頁程式設計的態度,不要有預設立場,coding不是生下來就會,若你覺得基礎不好,這次更要好好的下定決心努力。想想畢業後要找的工作是什麼?若決定走coding的話現在好好規劃一下你的學習方向與模式。多參考官方網站最新資訊,網路資料豐富,補足課堂或書本不足之處。,學習網頁程式設計的態度,學習程式設計的態度,原理說明也許枯燥,但是確是必要的!了解以後,其他就教給課本就好了!,祝大家都能夠快樂的學習,HTML介紹,何謂HTML?,HyperTextMarkupLanguage(HTML)HTML本身並非程式設計,只不過是標示(Markup)、強調及組織一般性的文字。上製作的語言,是一種標記語言。需透過瀏覽器翻譯標記後方可呈現。HTML標準之原始資料(HTML4.0,1997/11,W3C),除標準HTML標記外,各瀏覽器廠商也自訂專屬的標記,HTML長的如何?,最新消息最新消息,何謂標記語言?,TagLanguage製作文件的過程中必須加入所謂的標記【】,好讓瀏覽器知道該如何處理及呈現原始文件的內容。在語法中,除了少數例外,大都是以:開始,以結束;其中XX就是的標記。,何謂標記語言?,IE瀏覽器,HTML標籤,這些標記是寫給瀏覽器看的,HTML標記,.要顯示之文件資料.DocumentOfDisplay.,有頭有尾(但有例外),中間夾住所要顯示的文字或圖形有屬性純文字檔(使用一般的文字編輯器就可以作業)無大小寫之分檔名需要是.HTM或是.HTML,HTML標記類別,文件結構標籤(DocumentStructureTags)區段格式標籤(BlockFormattingTags)字元格式標籤(CharacterFormattingTags)清單標籤(ListTags)連結標籤(AnchorTag)多媒體標籤(MultimediaTag)表格標籤(TableTags)表單標籤(FromTags),OFFICE記事本&FrontPage(我們選用這個)Dreamweaver(賴老師)CoreldrawMacromedia系列:Flash,Director,Authoware,常見HTML編寫工具,產生html碼容易,不過你要看的懂才有辦法修改,與加入新的東西,html的構成是有結構的html文件是由元件(element)所組成元件是由標籤(tag)所包覆而成例如:,即是一個網頁元件,HTML的構成,常見的HTML的標籤,註:還有很多html的元件不在表中,此表只列出常用的。,網頁各元件關係圖,練習,使用記事本但是要如何執行它呢?可以透過伺服器或是用IE直接打開htm01.htm,練習,htm01.htm初試HTML語法使用HTML的基本觀念標示的觀念區塊的觀念參數的觀念,有沒有發現省略了很多標籤?,練習,htm01.htm初試HTML語法使用HTML的基本觀念標示的觀念區塊的觀念參數的觀念,有沒有發現省略了很多標籤?,HTML與ASP的執行方式,HTML:不一定要透過伺服器,直接使用IE開啟檔案就可以ASP:一定要透過伺服器,不可以直接使用IE開啟檔案,基本標籤介紹,HEAD元件(標頭資訊)head元件是由標籤所包覆的區塊,用來表示這份網頁的資訊,例如標題、文件的編碼、文件的期限等等,裡面可包含下列的元件:Meta元件(這是一份中文BIG5編碼的文件)(五秒後,請幫我轉到.tw的網址)Title元件這是我的第一張網頁Base元件這張網頁的預設連結,預設都連結到left的框架頁中(後面再詳述)。,BODY元件(文件主體)body元件是由標籤所包覆的區塊,用來表示這份網頁的主體,裡面可包含很多的元件:Body的屬性:Bgcolor屬性背景顏色Background屬性背景圖片Link、vlink、alink屬性超連結的顏色Scroll背景圖片要不要跟著scrollbar移動。,基本標籤介紹,標題元件標題元件是由等標籤所包覆的區塊,用來表示一個標題,可用下列的元件來表示:這是標題一BLOCKQUO.HTM,常用標籤介紹,BLOCKQUO.HTM使用HTML的基本觀念標示的觀念區塊的觀念其他觀念多個放在一起空白字元,只會被瀏覽器視為一個空白字元跳行字元是沒有作用的字元標示是不區分大小寫的,常用標籤介紹,FONT元件(文字)Font元件是由等標籤所包覆的區塊,用來表示一段或是一個文字,可用下列的元件來表示:Font屬性color屬性size屬性face屬性這是Font元件,常用標籤介紹,文字標籤元件可以讓文字以不同的方式呈現:列舉常用的如下:粗體斜體底線刪除線這是粗體,常用標籤介紹,Text.htm&size.htm,這是粗體字這是斜體字這是加底線字這是正常字這是上標字這是正常字這是下標字這是Windows的等寬字字體放大一級,常用標籤介紹,Text.htm,列舉清單元件可以讓文字以不同的方式列舉:列舉清單常用的如下:無序列舉htm01.htm有序列舉預設用1,2,3,4有序列舉type可為1、A、a、I、i,常用標籤介紹,FrontPage介紹,三、熟悉操作介面請同學實際操作練習。,一、Frontpage操作介面介紹,二、MS系統的慣例【所見即所得】,就是這麼簡單!,FrontPage介紹,表格,table元件(表格)table元件是由標籤所包覆的區塊,用來表示一個表格,裡面可包含下列的元件:table的屬性及元件:Bgcolor屬性Background屬性border屬性設定表格的框的寬度Width、height屬性設定表格寬跟高Cellspacing(欄跟欄之間的距離)、cellpadding(欄裡面字跟欄框的距離)屬性Tr元件(列)Td元件(欄)(也具有像table一樣的屬性,包括bgcolor、width、height等等),表格標籤介紹,基本表格樣本,標題,:代表列:代表欄,這樣轉成HTML標籤長成什麼樣子?,表格標題第一列,內容一第一列,內容二第二列,內容一第二列,內容二,基本表格樣本,畸形表格的產生,ColSpan與RowSpan屬性,範例練習,用FrontPage來製作表格如何劃表格?如何調整大小如何設定顏色?如何設定邊框?如何利用表格來排版?,畸形表格的產生,圖片,網路上常見的圖片格式有下列兩種:,常見的圖片格式,如何插入圖片至HTML中?圖片的設定利用FrontPage圖片工具設定圖片,相對路徑與絕對路徑,相對路徑:相對於預設主目錄,如C:Inetpubwwwroot把主目錄表示成/,絕對路徑:使用網址方式指定如.tw/rueychi/index.htm,如何找到你設計的網頁?,別人如何在網際網路這個茫茫大海中找到你所設計的網頁?,當然你要告訴別人你的網頁在哪?WWWSEVER位置,但是如何做呢?當然你要有一台SERVER你要把檔案擺到正確的目錄下,Server&Client,Client用戶端瀏覽器,Server伺服端網頁伺服器,伺服器與用戶端是相對的,不是絕對的!,同一台機器既可以是伺服器,也可以是用戶端,HTML如何運作?,用戶端瀏覽器,伺服端網頁伺服器,HTML碼不受保護你可以試著複製一個網頁,ASP如何運作?,用戶端瀏覽器,伺服端Apache網頁伺服器,ASP程式受到保護,要瀏覽ASP網頁,而不是開啟ASP網頁,超連結,何謂超連結?,HypertextLink(超文字連結)包含文字的連結、圖片、電子郵件、書籤的連結舉例說明http:/www.ckit.edu.tw超連結元件以表示,1.文字連結,範例說明連結呈現的文字如建國技術學院首頁,超連結的方式,進階提示:如果要加上寄信的主題時,可以利用下列方式如饒瑞佶的信箱,4.書籤連結(同一頁內連結),可連結到某網頁的某一段落(有做書籤的地方)書籤文字製作一個書籤如連結時,連到我的書籤,相對路徑與絕對路徑,相對路徑:相對於預設主目錄,如C:Inetpubwwwroot把主目錄表示成/,絕對路徑:使用網址方式指定如.tw/rueychi/index.htm,置換本視窗target=“_top”開新視窗target=“_blank”置換掉自己的視窗target=“_self”置換掉父視窗target=“_parent”置換掉框架頁target=“框架頁名稱”,超連結的開啟種類,框架頁,簡單的來說,就是將整個視窗分隔成各自獨立的畫面。框架元件,其HTML碼如下:範例說明:將一張網頁切成下面圖示的框架起始,設定框架寬度設定第一個框架頁的資訊,跟預設超連結的目的框架設定第二個框架頁的資訊不支援框架時設定此網頁使用框架,但是您的瀏覽器並不支援.框架元件結束以上需要幾張網頁?,框架,框架,整個視窗,何謂框架?,Ans:三張,主網頁一張,第一張框架、第二張框架總共三張。,main,contents,1、維護容易2、瀏覽速度較快3、能將網頁作更多的運用及變化例子說明:.tw/rueychi/index.htm,框架的好處,為什麼要用框架?,1、框架的互相連結target=“框架頁名稱”2、重提標籤*溫故知新置換本視窗target=“_top”開新視窗target=“_blank”置換掉自己的視窗target=“_self”置換掉父視窗target=“_parent”置換掉框架頁target=“框架頁名稱”,main,contents,框架中的超連結,1、製作框架2、編輯框架的屬性3、控制框架的外觀4、做出無框的網頁,用FrontPage來製作框架,表單元件,表單標籤,提供使用者輸入傳送資訊表單需必須配合著CGI、JAVAScript程式或是ASP程式來運作,不然表單單獨存在的意義並不大。您的網頁將擺脫單向呈現,而開始邁入和使用者互動的階段!,表單基本格式,不同表單類型.送出/重寫按鈕,表單.htm或.ASP,處理程式Abc.asp,表單與處理程式可以是同一個檔案,文字輸入列,每個表單之所以會有不同的類型,原因就在於TYPE=“表單類型”設定的不同而已,我們就先來看看第一個類型:文字輸入列。文字輸入列的形態就是TYPE=TEXT,其使用方法如下:,單選核取表單,利用TYPE=“RADIO”就會產生單選核取表單,單選核取表單通常是好幾個選項一起擺出來供使用者點選,一次只能從中選一個,故為單選核取表單。,複選核取表單,利用TYPE=“CHECKBOX”就會產生複選核取表單,複選核取表單通常是好幾個選項一起擺出來供使用者點選,一次可以同時選好幾個,故為複選核取表單。,密碼表單,利用TYPE=“PASSWORD”就會產生一個密碼表單,密碼表單和文字輸入表單長得幾乎一樣,差別就在於密碼表單在輸入時全部會以星號來取代輸入的文字,以防他人偷窺。,送出/重寫按鈕,通常我們表單填完之後,都會有一個送出按鈕以及清除重寫的按鈕,分別是利用TYPE=“SUBMIT”及TYPE=RESET來產生,相當的簡單易用。,大量文字輸入元件,有時候我們會希望讓使用者輸入比較大量的文字,此時,文字輸入列就顯得不敷使用,因此我們就可以利用來產生一個可以輸入大量文字的元件,夾在兩個標籤中的文字會出現在框框中,可作為預設文字。,下拉式選單,下拉式選單令整個網頁看起來有很專業的感覺,我們只要利用便可以產生一個下拉式選單,另外,還需要配合標籤來產生選項,這樣才算完整喔!,隱藏欄位,表單中有時有些東西因為某些因素,不想讓使用者看到,但因程式需要卻又不得不存在,此時,我們就可以利用TYPE=HIDDEN來產生一個隱藏的欄位。,表單標籤,表單二件事:,設定標籤中的action屬性(設定要處理表單的程式),2.記得表單中各輸入類型的NAME屬性(靠此名稱與程式連結),後續REQUEST&RESPONSE物件會有更詳細介紹,HTML其它技巧,HTML只有這樣的能耐嗎?,跑馬燈、東森速報、背景音樂等,VBScript&JavaScript防止偷圖、設成首頁、動態圖形等,只要你知道哪裡找的到,怎麼放到網頁中就ok了,ASP介紹ActiveServerPages,傳統網頁:靜態的(Static),內容固定不變不容易更新與維護純HTML碼的網頁(之前做的都是)動態網頁:內容是動態的內容可以自動更新互動性高ASP,JSP,VBScript,JavaScript,PHP,DHTML等,讓網頁活起來,WhyASP?,優點:市場主流之一(支援與資源都多)語法簡單(Basic語系),不需要編譯(Compile)輸出結果不受用戶端瀏覽器的影響缺點:IIS與MS作業系統穩定性與安全性不佳跨平台轉移不易,什麼是ASP?,ActiveServerPages(動態伺服器網頁,簡稱ASP)可以算是一種程式語言在伺服器端(Server)執行,需要有IIS(InternetInformationServer)可結合HTML碼,Script指令與ActiveX元件產生動態的網頁,線上購物,留言版,聊天室等,使用VBScript或Jscript等簡易的Script,結合HTML碼,可快速建構動態網站不需編譯,完全整合於HTML碼中使用一般文書編輯器(如記事本)就可以完成執行結果與用戶端(Client)使用的瀏覽器無關程式碼不會由用戶端外流可以透過與ActiveX元件的結合來擴展其功能檔案需以.asp為副檔名,ASP的特點,HTML如何運作?,用戶端瀏覽器,伺服端網頁伺服器,HTML碼不受保護,ASP如何運作?,用戶端瀏覽器,伺服端IIS網頁伺服器,ASP程式受到保護,要瀏覽ASP網頁,而不是開啟ASP網頁,如何建立執行ASP所需平台?也就是Server,使用MS作業系統配合IIS伺服器使用它種作業系統(如Linux)配合可以執行ASP的模組,除98系統外,其它皆內含IIS,但是穩定性與安全性不佳,因為模組不內含,所以需額外花費購買,但是穩定性較佳,如何建立執行ASP所需平台?,indows9x:PWS(PersonalWebServer)4.0WindowsNTWorkstation:PWS4.0WindowsNTServer:IIS4.0Windows2000Server/Professional:IIS5.0WindowsXPProfessional:IIS5.1Windows2003Server:IIS6.0,以使用MS作業系統配合IIS伺服器為例,Linux上可不可以跑ASP?,軟體來源PWS,indows9x:PWS4.01.原版光碟中add-onspws目錄或NT4.0OptionPack中Win.95目錄。2.執行setup.exe進行安裝。WindowsNTWorkstation4.0:PWS4.01.NT4.0OptionPack中Winnt.wks目錄。2.執行setup.exe進行安裝。,軟體來源IIS,WindowsNTServer4.0:IIS4.01.OptionPack中Winnt.srv目錄。2.執行setup.exe進行安裝。Windows2000Server/Professional:IIS5.0內建即包含IIS5.0WindowsXPProfessional:IIS5.1內建即包含IIS5.1,安裝注意事項PWSonWin95,升級Winsock到2.0。安裝程式與PWS在同一目錄下,名為Ws2setup.exe。,安裝注意事項PWS/IISonNT4.0,1.升級NT到ServicePack3以上版本。ServicePack3,檔名為Nt4sp3_i.exe。ServicePack4,檔名為sp4i386.exe。ServicePack5,檔名為sp5i386.exe。ServicePack6,檔名為sp6i386.exe。2.升級IE到4.01以上版本。,各作業平台安裝步驟,Win95:IE5.0Winsock2.0PWS4.0。Win98:PWS4.0。WinNTW/S:SP3IE5.0PWS4.0。WinNTServer:SP3IE5.0IIS4.0。Windows2000:IIS5.0,安裝示範,還記得Server&Client嗎?,Client用戶端瀏覽器,Server伺服端網頁伺服器,伺服器與用戶端是相對的,不是絕對的!,同一台機器既可以是伺服器,也可以是用戶端,如何表示本機位置?,+Client用戶端瀏覽器,Server伺服端網頁伺服器,http:/127.0.0.1,http:/localhost,作業平台運作之檢查-IIS,啟動IE,輸入http:/127.0.0.1或是http:/localhost,作業平台運作之管理-IIS,3.桌面上我的電腦:我的電腦管理服務及應用程式InternetInformationServiceInternet服務管理員,我的檔案該放在哪裡?,預設路徑:C:Inetpubwwwroot,把要執行的html或asp檔案copy到目錄下,2.設定首頁,3.使用http:/127.0.0.1執行首頁或http:/127.0.0.1/檔案名稱執行特定網頁,撰寫一個簡單的HTML檔案試試看!,如何維護我的網頁?,本機:維護IIS中主目錄下的所有檔案方式:本機操作FTP上傳檔案,申請免費/付費空間:方式:FTP上傳檔案,相對路徑與絕對路徑,相對路徑:相對於預設主目錄,如C:Inetpubwwwroot把主目錄表示成/,絕對路徑:使用網址方式指定如.tw/rueychi/index.htm,如何改成相對路徑?,如何連結C:Inetpubwwwrootaabbtext.htm?,微軟InternetInformationServer(IIS)介紹,撰寫ASP之前,需要了解基本HTML。需要了解Script語法(本課程以VBScript為例)。,- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 彰化 县政府 补助 办理 网页 设计 资料库 应用
装配图网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
关于本文