教師: 陳明瑤 電郵: u9315923@nkfust.edu.tw 網際網路應用-網頁設計3 教師: 陳明瑤 電郵: u9315923@nkfust.edu.tw.

Slides:



Advertisements
Similar presentations
Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.
Advertisements

HyperText Markup Language
第六章 网页设计与制作基础.
ASP.NET 網頁製作教本 -- 從基本語法學起
第八章:网络应用制作技术 本章介绍网络各种应用中所涉及的基本概念和制作技术,包括HTML、网页的制作、Java、Java Script语言的初步基础,VRML语言的基本功能,以及网络环境下分布式数据库系统和客户服务体系的构造方法及技术。
HTML第一课 李 伟 HTML开发语言基础.
專題製作 許惠淑.
第5章 HTML 標籤介紹.
佛山科学技术学院 第7章 HTML Internet及多媒体应用.
第8讲 HTML与PHP基础 静态网页 vs. 动态网页.
网页制作 第一讲
动态网页制作 第1章 HTML语言1.
HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。
第五章:JDBC与数据库 第一讲.
JavaScript中常用的互動方式 認識簡單的交談與基本的運算.
第7章 表 格 清华大学出版社.
第三讲 站点链接与表格布局.
教学内容 1、演示并讲解用表格布局制作的网页 2、用表格制作网页.
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
网页 设计与制作.
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
第3章 HTML语言 3.1 HTML文档的基本结构 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
第3章 JavaScript语言基础.
《网页设计与制作》 教学课件 主讲人:湖南铁道职业技术学院 陈承欢
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
第二部分 HTML语言控制 本次课的主要内容: 1、认识网页文件的结构 2、HEAD、TITLE、BODY等基本标记符的使用
HTML 語法教學 授課:彭穎聰 老師.
HTML簡介、文字的變化、超連結的使用 主講:朱漢琳.
CT212 (02/03)-Network Programming and design
網際網路的應用服務 – Web 概念與網頁語言
第二章 網際網路網頁的設計.
HTML.
ASP动态网页设计实用教程 主讲教师: 开课单位:.
第3章 超文本标记语言(HTML) 3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A>
CSS简介 WEB前端三剑客之二.
建國技術學院資訊管理學系 饒瑞佶 2004/7/5 彰化縣政府補助辦理網頁設計資料庫應用班 建國技術學院資訊管理學系 饒瑞佶 2004/7/5.
Ch1.認識全球資訊網 1.1 「網際網路」與「全球資訊網」 1.2 全球資訊網的基礎 – 網頁與超連結
湖北职院计科系.
网 页 制 作 DREAMWEAVERMX 2004.
Ch01 HTML 5 資料格式 網頁程式設計.
网站设计 前端 入门学习.
HTML網頁設計 Chapter 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法
網路概念 APACHE PHP MYSQL HTML BY 董仔 08/01/14.
HTML 钟晖云 QQ:
第2章 超文本标记语言HTML.
8 网页制作基础知识 赵国庆 博士 北京师范大学教育技术学院
無障礙網頁 公關室.
授课教师:姬广永 QQ: TEL: 学习交流网站:
HTML – 文字格式 資訊教育.
HTML & CSS.
主讲:陶建平 华中科技大学网络与计算中心
网 站 设 计 与 建 设 Website design and developments
W3C标准网页制作 主讲教师:张 涛.
W3C标准网页制作 主讲教师:张 涛.
The Department of Education Technology
W3C标准网页制作 主讲教师:张 涛.
现代教育技术部 张建威
Open方法和close方法 主讲人:傅伟玉.
程式語言與邏輯 高慧君 台北市立南港高中 2006年12月22日.
UI 软件 设计 页面布局(一).
網頁設計 清單設計 Instructor: Reporter:楊政勳 Date:
6-1 認識超連結 超連結是網頁中少不了的元件,透過他才能將不同的網頁、網站相連,讓使用者可以在不同網站中瀏覽。而圖片、動畫等檔案,也是透過超連結的方式來呈現網頁中,所以底下讓我們來好好的認識超連結。
Prepared by : Au Kit Ming
第8章 网页特效——JavaScript 主讲人:刘泰然 经济管理学院.
第2章 块级标签 经济管理学院.
第4章 JSP动态网页设计基础 教学目标 教学重点 教学过程 2019年10月21日.
HTML5.
教师:李金双 网页制作 教师:李金双
Presentation transcript:

教師: 陳明瑤 電郵: u9315923@nkfust.edu.tw 網際網路應用-網頁設計3 教師: 陳明瑤 電郵: u9315923@nkfust.edu.tw

<meta>(文件描述標籤) <meta>標籤是一個獨立標籤(空標籤),主要的功用是用來描述該HTML文件。<meta>的功能項目繁多,例如定義關鍵字(以便使得搜尋引擎可以尋找到該網頁)、宣告網頁製作工具版本、網頁的編碼方式等等關於該份HTML文件的資訊都屬於<meta>標籤的功能。 位置:應包含在<head>與</head>之內

<meta>(文件描述標籤)(Cont.) 記錄檔頭資料(時間、關鍵字、回覆者資訊) 早期搜尋引擎的製作方式,是由HTML網頁中定義某些關鍵字,當搜尋引擎搜尋到該網頁時,就可以從HTTP的回傳檔頭中取出所需要的時間、關鍵字、回覆者資訊等網頁資訊,並做進一步的應用,例如取出關鍵字與查詢字串比對,藉此尋得所需要的網頁,而這些資訊(例如關鍵字)就是定義在<meta>標籤中,但由於近來搜尋引擎大多要求網站擁有者必須先到搜尋引擎註冊網頁及關鍵字之後,才能夠搜尋到該網頁,並且大多數的搜尋引擎也都支援了全文檢索的查詢功能,因此,目前大多數的網頁都已經放棄了使用<meta>標籤來記錄關鍵字的方法,以下是相關語法。

標籤:<meta>獨立標籤。 功能二:記錄檔頭資料。 語法: Expires (期限) 可以用於設定網頁的到期時間。一旦網頁過期,必須到服務器上重新傳輸。 <meta http-equiv="expires" content="Wed, 20 Jun 2011 22:33:00 GMT"> <meta http-equiv="expires" content="時間"/> <meta http-equiv="keywords" content="關鍵字"/> <meta http-equiv="reply-to" content="電子郵件信箱"/>

bgcolor屬性(背景顏色) 在HTML中,顏色的表示方法可以分為兩大類 (1)英文表示法(或稱為關鍵字表示法),也就是直接以顏色的英文名稱加以設定,例如:green(綠色)、pink(粉紅色)。 (2)16進制表示法,以6位數16進制的數值來表示顏色,例如:0000FF(藍色)、FFFF00(黃色)等等。

bgcolor屬性(背景顏色)(Cont.) 問題是我們怎麼知道每一種顏色的16進制表示法呢?其實很簡單,6位數16進制顏色表示法是基於『紅、綠、藍』3原色的調色方式所構成 前兩位數代表的是紅色的成分 中間兩位數代表的是綠色的成分 最後兩位數代表的是藍色的成分 數值由000~255,也就是16進制的00~FF,其中成分越高者數值越大 就像調水彩一樣,當我們改變了3原色的比例之後,就會形成許多種顏色,總共的變化應該有16777216種顏色。

bgcolor屬性(背景顏色)(Cont.) 常見的顏色及顏色表示法

bgcolor屬性(背景顏色)(Cont.) 標籤屬性:<body>-bgcolor屬性。 功能:設定背景顏色。 格式: 或 <body bgcolor="#16進制顏色表示法">………………………</body> <body bgcolor="關鍵字顏色表示法">………………………</body>

bgcolor屬性(背景顏色)(Cont.) 範例 <html> <head> <title><body>之bgcolor屬性(背景顏色設定)</title> </head> <body bgcolor="#FFFF00"> <center> 相思<br/> 紅豆生南國,<br/> 春來發幾枝,<br/> 願君多采擷,<br/> 此物最相思。 </center> </body> </html>

background屬性(背景圖片) 標籤屬性:<body>-background屬性。 功能:設定背景圖片。 格式: 【註】:圖片如果與網頁放在相同的資料夾,則不需要設定圖片路徑。如果圖片和網頁位於不同的資料夾,就必須設定路徑,路徑分為絕對路徑與相對路徑兩種。為了避免因為網站的搬移造成檔案位置的更動,我們應該盡量使用相對路徑來表示圖片路徑。 <body background="圖片路徑/圖片檔名">………………………</body>

background屬性(背景圖片)(Cont.) 絕對路徑就是完整的路徑名稱,例如:C:\HTML\PIC\bg1.jpg或http://127.0.0.1/Myhome/PIC/bg1.jpg就是絕對路徑。 相對路徑指的是從網頁所在位置開始計算,往上一層目錄(上一層資料夾)就使用『../』,往下一層就使用『資料夾名稱/』來表示,假設我們有兩個目錄ch04、PIC,其中網頁放在ch04目錄中,圖片放在PIC目錄中,兩個目錄為同一層級的目錄(父目錄相同),我們就可以使用『../PIC/』來代表圖片的相對路徑。另外,『./』則是代表原來的目錄位置。

background屬性(背景圖片)(Cont.) 相對路徑示意圖

text屬性(文字顏色) HTML網頁的文字顏色預設為黑色,我們可以透過<body>的text屬性改變所有的文字顏色,顏色的設定方法同樣有16進制表示法與關鍵字表示法兩種。 標籤屬性:<body>-text屬性。 功能:改變預設的文字顏色。 格式: 或 <body text="#16進制顏色表示法">…………………………</body> <body text="關鍵字顏色表示法">…………………………</body>

符號清單 符號清單指的是『每筆資料的左方都有一個不具累加特性的特殊符號』

<menu>(說明書清單) <menu>標籤與<li>標籤搭配可以形成第一種符號清單格式。清單作用範圍從<menu>開始直到</menu>結束,其中每一次的<li>標籤代表一個新項目的開始,直到遇見</li>或下一個<li>為止。並且我們還可以在<menu>中設定type屬性,選擇想要的清單符號樣式。 值得注意的是,在進入清單作用範圍前,<menu>會產生一個空白列,以做為清單與其他內容的區隔,並且所有的清單項目都會呈現向右縮排的現象。 標籤:<menu>、</menu>成對標籤。<li>獨立標籤或<li>、</li>成對標籤。 格式: <memu type="disc、circle、square"> <li>…………………….. </li> : <li>……………………...</li> </menu>

<menu>(說明書清單)(Cont.) 功能:產生符號式清單。 <li>功能:表示單一清單項目。 <menu>-type屬性:設定清單符號樣式。 屬性值disc:實心圓點符號。(預設值) 屬性值circle:空心圓點符號。 屬性值square:實心方塊符號。 位置:在<body>標籤內的任何位置

<menu>(說明書清單)(Cont.) 範例 <html> <head> <title>說明式符號清單</title> </head> <body> 程式設計類暢銷書 <menu> <li>C語言初學指引</li> <li>VB6初學指引</li> <li>ASP初學指引</li> <li>C++函式庫精華錄</li> </menu> </body> </html>

序號清單 除了符號清單之外,另一類常見的清單就是序號清單 序號清單的每一個清單項目前面都會有一個數字,用以代表該清單項目的編號 並且該序號會累計

序號清單(Cont.) 序號清單主要是由<ol>標籤配合<li>標籤來完成,並且還可以設定多種數字格式,以及起始數字 標籤:<ol>、</ol>成對標籤。<li>獨立標籤或<li>、</li>成對標籤。 格式 <ol> <li>……………………..</li> : </ol>

序號清單(Cont.) 功能:產生序號式清單。 效果: <li>功能:表示單一清單項目。 (1) 清單前後換列。 (2) 清單項目向右縮排。 (3) 清單項目的前面會出現一個累計的序號。 <li>功能:表示單一清單項目。 位置:在<body>標籤內的任何位置

序號清單(Cont.) 範例 <html> <head> <title>序號式清單</title> </head> <body> 程式設計類暢銷書 <ol> <li>C語言初學指引</li> <li>VB6初學指引</li> <li>ASP初學指引</li> <li>C++函式庫精華錄</li> </ol> </body> </html>

<ol>-type屬性 (序號樣式) 格式: <ol type="1、a、A、i、I"> <li>……………………..</li> : <li>……………………...</li> </ol>

<ol>-type屬性 (序號樣式) 屬性值: 1:以阿拉伯數字做為序號,例如:『1、2、3』(預設值) a:以小寫英文字母做為序號,例如:『a、b、c』 A:以大寫英文字母做為序號,例如:『A、B、C』 i:以小寫羅馬字母做為序號,例如:『i、ii、iii、iv、v』 I:以大寫羅馬字母做為序號,例如:『I、II、III、IV、V』

<ol>-type屬性 (序號樣式) 範例 <html> <head> <title>序號樣式設定</title> </head> <body > 程式設計類暢銷書 <ol type="A"> <li>C語言初學指引</li> <li>VB6初學指引</li> <li>ASP初學指引</li> <li>C++函式庫精華錄</li> </ol> </body> </html>

超鏈結的顏色設定 在網頁中超鏈結的文字會以藍色或紫色的顏色出現,其中藍色代表未曾讀取過的超鏈結目標網頁,而紫色則是代表已經讀取過的超鏈結目標網頁。 除了預設的超鏈結顏色之外,我們也可以自由指定超鏈結的顏色,方法有兩種: 第一種是由瀏覽者自行更改瀏覽器中的設定來改變超鏈結的顏色。 第二種則是由網頁設計者在HTML網頁中,設定<body>的link、vlink、alink屬性。 標籤屬性: <body>-link、vlink、alink屬性

超鏈結的顏色設定(Cont.) 格式: 屬性link功能: 屬性vlink功能: 屬性alink功能: 範例 設定超鏈結目標未曾被瀏覽時的超鏈結文字顏色。(預設為藍色) 屬性vlink功能: 設定超鏈結目標已被瀏覽時的超鏈結文字顏色。(預設為紫色) 屬性alink功能: 設定超鏈結文字已被按下,但尚未放開滑鼠左鍵時的超鏈結文字顏色 範例 <body link="red" vlink="green" alink="pink"> <a href=“http://www.kaohsiung.gov.tw/”>高雄市政府</a><br/> <body link="顏色表示法" vlink="顏色表示法" alink="顏色表示法"> ……………………………… </body>

撥放背景音樂 bgsound>是IE專用的撥放背景音樂標籤,其語法如下。 標籤:<bgsound>獨立標籤。(非HTML/XHTML的標準) 功能:撥放背景音樂。 支援:IE瀏覽器支援。(Netscape瀏覽器不支援。) 格式: src屬性:設定音樂檔(*.mid、*.wav、*.au等等)所在位置,可以使用絕對路徑表示法或相對路徑表示法。 loop屬性:設定背景音樂重複撥放次數。若希望不斷地重複撥放背景音樂,可以將loop屬性值設為『infinite』。 <bgsound src="音樂檔URL" loop="N"/>

撥放背景音樂 <embed>不是專門用來撥放背景音樂的標籤,它也可以用來撥放其他多媒體檔案,使用<embed>撥放背景音樂必須將<embed>標籤的各屬性設定為特殊值才能夠造成背景音樂的效果,因此,如果想要在IE撥放背景音樂,建議還是使用<bgsound>標籤比較簡單。 格式:(非HTML/XHTML的標準) autostart:多媒體檔案是否自動開始撥放,屬性值如下。 true:多媒體檔案自動開始撥放。 no:多媒體檔案不自動撥放。(預設值) loop屬性:若設為true,則無限次撥放音樂。若設為no,則撥放一次後停止撥放音樂。 <embed src="音樂檔URL" autostart="true" width="0" height="0" loop="true或no"/>

撥放背景音樂 Width 設定面板寬度 Height 設定面板高度 Align 設定面板對齊方式

連結You Tube You Tube影音手動播放語法 <embed src="http://www.youtube.com/v/52i8H5wBgNc" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>

連結You Tube You Tube影音自動播放語法 <embed src="http://www.youtube.com/v/52i8H5wBgNc&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="145" height="110"></embed> 

Java/VB Script程式碼宣告標籤) <<script>、</script>是成對標籤,其中所包含的內容是能夠由客戶端瀏覽器執行的Script程式碼 Script程式碼可以分為Java Script與VB Script兩種

<script>與</script> 語法: 語法說明:語法宣告為JavaScript或VBScript。 位置:最好包含在<head>與</head>之內,但也可以放置於HTML文件的任何位置。當放置於<head>與</head>之內時,可以當作文件檔頭定義,因此在該份HTML任何地方都可以呼叫此處宣告的副程式 <script language="語法宣告"> : </script>

<script>與</script>(Cont.) 範例 <html> <head> <title>Script練習</title> <script language="JavaScript"> function Welcome() { alert("歡迎光臨\n\n歡迎參觀指教") } </script> </head> <body onload="Welcome()"> </body> </html>

<script>與</script>(Cont.) 範例 <html> <head> <title>顯示目前日期時間</title> <script language="JavaScript"> function print_today_date() { var d=new Date( ); document.write(d.toLocaleString( )); } </script> </head> <body> print_today_date(); </body> </html>

<script>與</script>(Cont.) 範例 <html> <head> <title>Script練習</title> <meta http-equiv="refresh" content="1"> <script language="JavaScript"> function print_today_date() { var d=new Date( ); document.write(d.toLocaleString( )); } </script> </head> <body> 現在時間<br> print_today_date(); </body> </html>

表格宣告 HTML的表格宣告,最主要是靠<table>、<tr>、<td>(或<th>)等3種標籤組合而成。並且每個標籤包含各種屬性,藉由這些屬性便可以完成表格的種種變化。各標籤用途如下: <table>、</table>:成對標籤,用來宣告一個表格的開頭與結束。 <tr>、</tr>成對標籤 用來宣告表格中某一列的開頭與結束。 <td>、</td>(或<th>、</th>)成對標籤 一列中某一個儲存格的開頭與結束 其中<td>稱為一般儲存格(或簡稱儲存格),<th>則稱為標題儲存格。

表格宣告 <table>、<tr>、<td>(或<th>)的基本格式與示意圖如下: 格式: <td>...</td>.........<td>...</td> </tr> :……………………………………….. </table>

表格宣告(Cont.) 示意圖:

表格宣告(Cont.) 範例 <html> <head> <title>基本表格製作</title> </head> <body background="../PIC/bg2.jpg"> <h3>學歷</h3> <hr/> <table> <tr> <th>國小</th><th>國中</th><th>專科</th><th>大學</th><th>研究所</th> </tr> <td>前金國小</td><td>大義國中</td><td>正修工專</td> <td>逢甲大學</td><td>交通大學</td> </table> </body> </html>

結果

表格宣告(Cont.) 範例 <html> <head> <title>設定表格邊框厚度</title> </head> <body > <h3>表格邊框寬度為10(內框線預設值為1)</h3> <table border="10"> <tr><th>專科</th><th>大學</th><th>研究所</th></tr> <tr><td>正修工專</td><td>逢甲大學</td><td>交通大學</td></tr> </table> <hr/> <h3>表格邊框寬度為5(內框線預設值為1)</h3> <table border="5"> </body> </html>

結果