网页进阶制作与范例实作.ppt

网页进阶制作与范例实作 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望大綱大綱前言前言淺談淺談HTMLHTML上網找資料吧！上網找資料吧！範例實作範例實作問題討論問題討論前前 言言你會作網頁嗎？你會作網頁嗎？這句話常常在很多場合會被問到！小至朋友同學間閒聊大到工作面試、主管詢問都會有，網頁製作能力，已經是基本要求的工作技能，但是如何讓你的網頁能處處得人疼，靠運氣也得靠實力，這又是另一種境界了，今天希望就藉由這堂課，跟大家聊聊一些網頁的實作技巧。淺談淺談 H T M L H T M L什麼是HTML?HTML是Hyper Text Markup Language 的縮寫中文翻譯-超文件標記語言HTML不是程式，他只是一種標記語言什麼是超連結?Hypertext Link包含文字的連結、圖片、電子郵件、書籤的連結什麼是DHTML?Dynamic HTML 簡稱 DHTML利用Script或是CSS來控制各項網頁元件，並達到動態的效果，稱之為DHTMLCSS、Script、HTML的綜合運用淺談淺談 H T M L H T M L什麼是表單？傳遞資料出去便需要表單，表單通常包含文字方塊、下拉式選單、選項按鈕、核取方塊等等什麼是CSS樣式表？cascading Style Sheet 簡稱 CSS是一種公開的規格可以讓你更進階的控制字型、字體大小、背景顏色、邊框、邊界、排列方式等等進階的版面控制，讓改版更容易淺談淺談 H T M L H T M L HTML的構成 html的構成是有結構的 html文件是由元件(element)所組成 元件是由標籤(tag)所包覆而成 例如：，即是一個網頁元件一份基本的網頁應包含下列組成：一份基本的網頁應包含下列組成：一份基本的網頁應包含下列組成：一份基本的網頁應包含下列組成：宣告這份為 html 文件 宣告html文件結束淺談淺談 H T M L H T M L 常見的HTML的元件Tag起始Tag結束元件說明宣告這是一份html文件標頭資訊文件抬頭文件主體表格區塊文字圖片超連結標題水平分割線段落換行註：還有很多註：還有很多htmlhtml的元件不在表中，此表只列出常用的。的元件不在表中，此表只列出常用的。淺談淺談 H T M L H T M L 網頁各元件關係圖 網頁製作要點網頁製作要點顏色搭配如果不知道搭什麼顏色好，可以儘量選擇粉色系、同色系為主圖片檔案大小根據研究，一張網頁的忍耐程度是七秒鐘左右，7x7k=50k左右，所以儘量維持你的網頁在此大小左右，但是目前網路速度越來越快，你可以適當調整。表格排版好的排版，會讓閱讀性良好，適當的文字間距大小，更是讓瀏覽者賞心悅目。scrollbars顏色既然網頁都變顏色了，配上灰色的scrollbar不是很不搭調嗎:P利用Cool Web Scrollbars來作吧！利用框架格出美感可以利用iFrame，製造空間美感例子 http:/ Web Scrollbars 工具作出有顏色的捲軸CCS操控術捲軸特效CCS操控術可變更滑鼠游標CCS操控術發光字體CCS操控術波動濾鏡Javascript 每時問候Javascript 地震網頁Javascript 郵寄網址等等問題討論問題討論歡迎提問Seeing much,suffering much,and studying much,are three pillars of learning.(Benjamin Disraeli,English novelist)多見識，多體驗，多研究，乃學問之三大法則。多見識，多體驗，多研究，乃學問之三大法則。(狄斯雷利，英國小說家狄斯雷利，英國小說家)簡 報 結 束謝謝大家