网页进阶制作与範例实作.pptVIP

網頁進階製作與範例實作 講師：王仁宏 大綱 前言 淺談HTML 上網找資料吧！ 範例實作 問題討論 前 言 你會作網頁嗎？這句話常常在很多場合會被問到！ 小至朋友同學間閒聊~大到工作面試、主管詢問都會有， 網頁製作能力，已經是基本要求的工作技能，但是如何 讓你的網頁能處處得人疼，靠運氣也得靠實力， 這又是另一種境界了，今天希望就藉由這堂課， 跟大家聊聊一些網頁的實作技巧。 淺談 H T M L 什麼是HTML? HTML是Hyper Text Markup Language 的縮寫 中文翻譯-超文件標記語言 HTML不是程式，他只是一種標記語言 什麼是超連結? Hypertext Link包含文字的連結、圖片、電子郵件、書籤的連結 什麼是DHTML? Dynamic HTML 簡稱 DHTML 利用Script或是CSS來控制各項網頁元件，並達到動態的效果，稱之為DHTML CSS、Script、HTML的綜合運用 淺談 H T M L 什麼是表單？ 傳遞資料出去便需要表單，表單通常包含文字方塊、 下拉式選單、選項按鈕、核取方塊等等 什麼是CSS樣式表？ cascading Style Sheet 簡稱 CSS 是一種公開的規格 可以讓你更進階的控制字型、字體大小、背景顏色、邊框、 邊界、排列方式等等 進階的版面控制，讓改版更容易 淺談 H T M L 網頁製作要點 顏色搭配 如果不知道搭什麼顏色好，可以儘量選擇粉色系、同色系為主 圖片檔案大小 根據研究，一張網頁的忍耐程度是七秒鐘左右，7x7k=50k左右，所以儘量維持你的網頁在此大小左右，但是目前網路速度越來越快，你可以適當調整。 表格排版 好的排版，會讓閱讀性良好，適當的文字間距大小，更是讓 瀏覽者賞心悅目。 scrollbars顏色 既然網頁都變顏色了，配上灰色的scrollbar不是很不搭調嗎:P 利用Cool Web Scrollbars來作吧！ 利用框架 格出美感 可以利用iFrame，製造空間美感 例子 / 上網找資料吧！ 看書?上網找比較快拉 網頁製作百寶箱 .tw/index.php 範例實作 利用Cool 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) 多見識，多體驗，多研究，乃學問之三大法則。 (狄斯雷利，英國小說家) 簡 報 結 束 謝謝大家 * HTML的構成 html的構成是有結構的 html文件是由元件(element) 所組成 元件是由標籤 (tag)所包覆而成 例如：body /body ，即是一個網頁元件 一份基本的網頁應包含下列組成： html 宣告這份為 html 文件 head /head body /body /html 宣告html文件結束 淺談 H T M L 常見的HTML的元件 標題 /h1 h1 超連結 /a a 圖片 /img img 文字 /font font 元件說明 Tag結束 Tag起始 區塊 /div div 水平分割線 hr 段落 p 文件抬頭 /title title 表格 /table table 標頭資訊 /head head /body /html 換行 br 文件主體 body 宣告這是一份html文件 html 註：還有很多html的元件不在表中，此表只列出常用的。 淺談 H T M L 網頁各元件關係圖 html /html head /head meta title /title base body /body table /table div /div hr font /font img /img a /a p br 網頁製作要點 *