投影片 1

Size: px
Start display at page:

Download "投影片 1"

Transcription

1 CSS 的運用 Speaker:Kevin Yang Date:2007/3/10

2 何謂 CSS CSS 的全名是 Cascading Style Sheets( 串接樣式表 ) CSS 是用來延伸 html 而非取代 htnl, 是用來補 html 的不足

3 CSS 的特點 加快網頁傳輸的速度 : 減少圖檔的使用, 便可以達到文字變化的需求 集中管理樣式 : 當修改時只需針對樣式修改即可 共享樣式設定 : CSS 可另外存檔, 供每一個網頁取用共享

4 為何使用 CSS 提供 HTML 不支援的屬性 加快網頁設計速度 減少網頁體積 政府推動無障礙網站 大專院校 95 年底 :A 96 年底 :A+ 檢測是否符合無障礙網站 減少使用框架

5 CSS 的種類 - 同列 Inline ( 同列 ) 使用 HTML 標記的 STYLE 屬性, 只於定義的區段有效 Eq: <P STYLE=COLOR:RED>

6 CSS 的種類 - 內嵌 Embedding ( 內嵌 ) 使用 <STYLE>...</STYLE> 標記 ( 置於 BODY 本文區之前 ), 定義 HTML 標記供整個網頁使用 Eq: <HTML> 文件開始 <STYLE TYPE=text/css> 排版樣式區開始 <!-- 排版樣式區內容 --> </STYLE> 排版樣式區結束 <BODY> 本文區開始本文區內容 </BODY> 本文區結束 </HTML> 文件結束

7 CSS 的種類 - 連結 Linking ( 連結 ) 使用 <LINK> 標記 ( 用於 HEAD 區 ), 即將排版樣式分開處理, 再連結使用 Eq: <HTML> 文件開始 <HEAD> 標頭區開始 <LINK TYPE=text/css REL=stylesheet HREF=s1.css> 連結 CSS 檔 </HEAD> 標頭區結束 <BODY> 本文區開始本文區內容 </BODY> 本文區結束 </HTML> 文件結束

8 單位 絕對數值單位 in 英吋 (1in=2.54cm) cm 公分 mm 公厘 pt 點 (1pt=172in) pc Pica(1pica=12pt) 相對數值單位 em 在特定範圍下有效字型的高度為 1 的單位 ex 在特定範圍下有效字型的小寫之 x 的高度為 1 的單位 px 螢幕上最小一點的單位 % 相對於其他基準表示大小的比例

9 文字字型語法

10 文字的顏色 color 功能 指定文字顏色 語法 { COLOR : ( color ) } ( color ) 可為 1 顏色名稱 ( 16 種 ) 2 16 進制表示法 - #RRGGBB ( 00 暗 ~FF 亮 ) 3 #RGB ( 0 暗 ~F 亮 ) 表紅綠藍強度 範例 P {COLOR:RED} P {COLOR:#FF0000} P {COLOR:#F00}

11 字型 font 功能 設定字體樣式 大小寫變化 粗細 文字行列高度 字型 語法 { FONT : ( font-style ) ( font-variant ) ( font-weight ) ( fontsize ) ( font-family ) / ( line-height ) } 範例 H1 {FONT:ITALIC BOLD 細明體 12pt/18pt}

12 字型組 font-family 功能 設定字型組 ( 字型名稱若為兩個英文單字以上需加引號 " " ) - 常用字型組 ( Arial Arial Black Comic Sans MS Times New Roman ) 語法 { FONT-FAMILY : ( font-name ) ( generic-family ) 範例 {FONT-FAMILY:Arial,Bedrock} {FONT-FAMILY:"Arial Black"}

13 字型大小 font-size 功能 設定字體大小 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ) 語法 { FONT-SIZE : LARGE MEDIUM SMALLER ( length ) ( percentage ) } 範例 {FONT-SIZE:LARGE} {FONT-SIZE:10pt} {FONT-SIZE:50%}

14 字型樣式 font-style 功能 設定字體樣式 ( 分為 : 正常 斜體 ) 語法 { FONT-STYLE : NORMAL ITALIC } 範例 {FONT-STYLE:ITALIC}

15 字型粗細 font-weight 功能 設定字體粗細 ( 分為 : 正常 粗字體 ) 語法 { FONT-WEIGHT : NORMAL BOLD } 範例 {FONT-WEIGHT:BOLD}

16 字體變化 font-variant 功能 設定字體變化 ( 分為 : 正常 小字體 ) 語法 { FONT-VARIANT : NORMAL SMALL-CAPS } 範例 {FONT-VARIANT:SMALL-CAPS}

17 文字格式語法

18 文字間隙 letter-spacing 功能 設定文字間隙 ( 單位屬性 : 點 pt 英寸 in 公分 cm 像素 px ) 語法 { LETTER-SPACING : NORMAL ( length ) } 範例 letter-spacing:0.5em;

19 文字高度 line-height 功能 設定文字行列高度 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ) 語法 { LINE-HEIGHT : NORMAL ( number ) ( length ) ( percentage ) } 範例 line-height:normal; line-height:1.5; line-height:180%;

20 調整文字 text-align 功能 設定調整文字 ( 可設左邊 右邊 置中 整齊 ) 語法 { TEXT-ALIGN : LEFT RIGHT CENTER JUSTIFY } 範例 text-align:left; text-align:center; text-align:right;

21 文字裝飾 text-decoration 功能 設定文字裝飾 ( 分為 : 無 加底線 加橫線 加頂線 ) 語法 { TEXT-DECORATION : NONE UNDERLINE LINE- THROUGH OVERLINE } 範例 text-decoration:underline; text-decoration:line-through; text-decoration:overline; text-decoration:underline overline;

22 文字縮排 text-indent 功能 設定文字縮排 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ) 語法 { TEXT-INDENT : ( length ) ( percentage ) } 範例 text-indent:1em;

23 文字改變 text-transform 功能 設定文字改變 ( 可設無 第一個字母大寫 大寫 小寫 ) 語法 { TEXT-TRANSFORM : NONE CAPITALIZE UPPERCASE LOWERCASE } 範例 text-transform:lowercase; /* 全部小寫 */ text-transform:uppercase; /* 全部大寫 */ text-transform:capitalize; /* 各單字頭一個英文字母大寫 */

24 排版格式語法

25 框 邊界 :margin 邊框 :border 邊距 :padding 內容 :content

26 邊界 適合用在位置的調整 左邊界 : margin-left 上邊界 :margin-top 邊框 :border 邊距 :padding 內容 :content 下邊界 :margin-bottom 右邊界 : margin-right

27 邊界 margin 功能 設定上右下左邊界 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ) 語法 {MARGIN: (lenght)} 相關 margin-top/ margin-top-width: 寬度 ( 設定上邊界 ) margin-bottom/ margin-bottom-width: 寬度 ( 設定下邊界 ) margin-left/ margin-left-width: 寬度 ( 設定左邊界 ) margin-right/ margin-right-width: 寬度 ( 設定右邊界 )

28 邊框 適合用在背景的設定, 框線的特殊效果 邊界 :margin 左邊框 : border-left 上邊框 :border-top 邊距 :padding 內容 :content 下邊框 :border-bottom 右邊框 : border-right

29 邊框 border 功能 設定邊框 語法 { BORDER : ( border-width ) ( border-style ) ( color ) } 相關 border-top/ border-top-width: 寬度 ( 設定上邊框粗細 ) border-bottom/ border-bottom-width: 寬度 ( 設定下邊框粗細 ) border-left/ border-left-width: 寬度 ( 設定左邊框粗細 ) border-right/ border-right-width: 寬度 ( 設定右邊框粗細 ) border-top-color: 顏色 ( 設定上邊框顏色 ) border-bottom-color: 顏色 ( 設定下邊框顏色 ) border-left-color: 顏色 ( 設定左邊框顏色 ) border-right-color: 顏色 ( 設定右邊框顏色 ) border-top-style: 樣式 ( 設定上邊框樣式 ) border-bottom-style: 樣式 ( 設定下邊框樣式 ) border-left-style: 樣式 ( 設定左邊框樣式 ) border-right-style: 樣式 ( 設定右邊框樣式 )

30 邊距 padding 功能 設定上右下左邊距 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ) 語法 {PADDING: (lenght)} 相關 padding-top/ padding-top-width: 寬度 ( 設定上邊距 ) padding-bottom/ padding-bottom-width: 寬度 ( 設定下邊距 ) padding-left/ padding-left-width: 寬度 ( 設定左邊距 ) padding-right/ padding-right-width: 寬度 ( 設定右邊距 )

31 背景語法

32 背景 background 功能 設定背景圖片 顏色 混合 透空 捲動 位置 重複 語法 { BACKGROUND-ATTACHMENT : SCROLL FIXED } 範例 background: black url(shell-bg.jpg) -237px 30px norepeat fixed;

33 背景圖片捲動 background-attachment 功能 設定背景圖片是否捲動 ( 分為 : 捲動 固定 ) 語法 { BACKGROUND-ATTACHMENT : SCROLL FIXED } 範例 background-attachment:fixed;

34 背景顏色 background-color 功能 設定背景顏色 透空 語法 { BACKGROUND-COLOR : TRANSPARENT ( color ) } 範例 background-color:#ff3300; background-color:rgb(80%,80%,40%);

35 背景位置 background-position 功能 設定背景位置 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ) 語法 { BACKGROUND-POSITION : TOP MIDDLE BOTTOM LEFT CENTER RIGHT ( length ) ( position ) } 範例 background-position:center center

36 背景重複 background-repeat 功能 設定背景重複填滿方式 語法 { BACKGROUND-REPEAT : REPEAT REPEAT-X REPEAT-Y NO-REPEAT } 範例 background-repeat:no-repeat; background-repeat:repeat-x;

37 超連結相關語法

38 超連結屬性設定 A:link 連結點範例 :A:link {FONT:ITALIC 細明體 12pt RED} A:visited 瀏覽過連結點範例 :A:visited {FONT:ITALIC 細明體 12pt RED} A:hover 移至連結點範例 :A:hover {FONT:ITALIC 細明體 12pt RED} A:active 選取連結點範例 :A:active {FONT:ITALIC 細明體 12pt RED}

39 常用的版型

40 左右兩欄的版型

41 CSS Source Code #leftcont { width:76%; /* 寬度 76%*/ float:right; /* 位置由右開始 */ } #centercont{ width:20%; /* 寬度 20%*/ float:left; /* 位置由左開始 */ }

42 三欄的版型

43 CSS Source Code #centercont{ left:22%; /* 左邊空 22%*/ width:56%; /* 寬度 56%*/ position:absolute; /* 以絕對位置定位 */ } #leftcont { width:20%; /* 寬度 20%*/ left:10px; /* 左邊空 10px*/ position:absolute; /* 以絕對位置定位 */ } #rightcont { width:20%; /* 寬度 20%*/ right:10px; /* 右邊空 10px*/ position:absolute; /* 以絕對位置定位 */ }

44 具頁首和頁尾的版型

45 CSS Source Code #header { position: relative; margin: 0; padding: 0; } #topnav { position: relative; background: #eee; } #subnav { position: relative; width: 91%; margin: 0; padding: 0; } #centercont { margin-top: 0px; margin-right:150px; margin-bottom: 0px; margin-left: 150px; line-height: 140%; padding: 0px 20px 50px 20px; position: relative; height:auto!important; height:400px; min-height:400px; } #rightcont { position: absolute; right:0px; top:0px; width:150px; margin: 0; padding: px; color: #334; background: #eee; border-top: 1px solid #ccc; border-bottom: 1px solid #999; line-height: 140%; } #foot { position: relative; width:100% margin: 0; padding: 0; }

46 製作美觀的表單

47 傳統的表單

48 CSS Source Code

49 CSS 表單

50 精選範例

51 橫列選單

52 CSS Source Code #header { FONT-SIZE: 93%; BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom; FLOAT: left; WIDTH: 100%; LINE-HEIGHT: normal } #header UL { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none } #header LI { PADDING-RIGHT: 0px; PADDING-LEFT: 9px; BACKGROUND: url(left.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } #header A { PADDING-RIGHT: 15px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(right.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 4px; COLOR: #765; PADDING-TOP: 5px; TEXT-DECORATION: none } #header A { FLOAT: none } #header A:hover { COLOR: #333 } #header #current { BACKGROUND-IMAGE: url(left_on.gif) } #header #current A { BACKGROUND-IMAGE: url(right_on.gif); PADDING-BOTTOM: 5px; COLOR: #333 }

53 HTML Code <div id="header"> <ul> <li id="current"><a href="index.php">home</a></li> <li><a href="news.php">news</a></li> <li><a href="employee.php">employee</a></li> </ul> </div>

54 直列選單

55 CSS Source Code #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(menu3.gif); padding: 8px px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(menu3.gif) 0-32px; padding: 8px px; }

56 HTML Code <div id="menu3"> <ul> </ul> </div> <li><a href="index.php">home</a></li> <li><a href="news.php">news</a></li> <li><a href="employee.php">employee</a></li>

57 下拉式選單

58 CSS Source Code

59 CSS 下拉式選單

60 參考網站 國外 國內

5-1 nav css 5-2

5-1 nav css 5-2 5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05

More information

CSS

CSS CSS 吳錦昂老師整理 CSS 是什麼 CSS 的全名為 Cascading Style Sheets W3C 所制訂的標準 可以將資料層及顯示層分開 HTML 文件就只包括資料 ( 資料層 ) CSS 則是告訴瀏覽器這些資料應該要如何顯現出來 ( 顯示層 ) 目的是為了對標記語言例如 XHTML 及 HTML 之類的提供一個顯示層 學會 CSS 可以自由的變化自己部落格的樣式 CSS 語法 選擇器

More information

CSS教學

CSS教學 講師 : 張秀山 CSS 說明 CSS 是 Cascading Style Sheets 的縮寫,Cascading 是串接 連接之意 ;Style 則是風格 款式之意 ; Sheets 則是一頁紙 表的意思 所以呢, 要以中文來解釋 CSS 的話呢, 您可以稱之為 串接樣式表 CSS 放在那裡? 網頁內 CSS 語法放在 之間! CSS 放在那裡?css 檔案 寫在一個

More information

Chapter V.S. PC

Chapter V.S. PC Chapter 14 14-1 V.S. PC 14-2 14-3 14-4 14-1 V.S. PC PC PC Yahoo! PC (https://tw.yahoo.com/) Yahoo! (https:// tw.mobi.yahoo.com/) Yahoo! a b a PC b PC PC Flash HTML5 CSS3 PC 14-2 14-3 PC PC Yahoo! PC https://tw.yahoo.com/

More information

week06.key

week06.key 基礎網 頁設計 第六週 老師 : 蔡孟珂 大綱 HTML 標籤屬性 DOM(Document Object Model) 文件物件模型 樹的概念 CSS 撰寫與常 用語法 HTML 標籤屬性 id 唯 一值 同 一份 html 中, 標籤裡不能有重複的 id 名稱 頁底資訊 1 連結

More information

05 01 accordion UI containers 03 Accordion accordion UI accordion 54

05 01 accordion UI containers 03 Accordion accordion UI accordion 54 jquery UI plugin Accordion 05 01 accordion UI containers 03 Accordion accordion UI accordion 54 05 jquery UI plugin 3-1

More information

HTML5 & CSS3 色彩 背景與漸層屬性 12-1 (color property) CSS 3 color HTML opacity HTML CSS Color Module Level 3 W3C CSS

HTML5 & CSS3 色彩 背景與漸層屬性 12-1 (color property) CSS 3 color HTML opacity HTML CSS Color Module Level 3 W3C CSS 12 Chapter 12-1 12-2 12-3 HTML5 & CSS3 色彩 背景與漸層屬性 12-1 (color property) CSS 3 color HTML opacity HTML CSS Color Module Level 3 W3C CSS 3 http://www.w3.org/tr/css3-color/ 12-1-1 color ( ) (foreground color)

More information

Chapter 位元素04 定放棄在網頁版面中使用表格, 是 Web 標準的關鍵之一 其實表格使用的目的不在此, 它應該是用來顯示格狀資料, 就如同 Excel 的工作表一樣 不過, 在 CSS 發展以前, 我們習慣用表格來建立一個有格狀的網頁, 讓元素有組織的排列在上, 而且使用一些像間隔圖片 (

Chapter 位元素04 定放棄在網頁版面中使用表格, 是 Web 標準的關鍵之一 其實表格使用的目的不在此, 它應該是用來顯示格狀資料, 就如同 Excel 的工作表一樣 不過, 在 CSS 發展以前, 我們習慣用表格來建立一個有格狀的網頁, 讓元素有組織的排列在上, 而且使用一些像間隔圖片 ( Stylin with CSS a Designer s Guide 2/e Chapter 位元素04 定放棄在網頁版面中使用表格, 是 Web 標準的關鍵之一 其實表格使用的目的不在此, 它應該是用來顯示格狀資料, 就如同 Excel 的工作表一樣 不過, 在 CSS 發展以前, 我們習慣用表格來建立一個有格狀的網頁, 讓元素有組織的排列在上, 而且使用一些像間隔圖片 (spacer GIF)

More information

F477

F477 FrontPage & Flash 連 CSIE, NTU September 15, 2007 Outline September 15, 2007 Page 2 連 FrontPage September 15, 2007 Page 3 連 FTP Email FrontPage HTML tag September 15, 2007 Page 4 連 September

More information

互動網頁技術系列課程 HTML與CSS網站基礎設計 [12pt]

互動網頁技術系列課程 HTML與CSS網站基礎設計 [12pt] HTML CSS / 2011 HTML CSS 1/ 47 1 2 HTML 3 4 HTML 5 5 : CSS 6 CSS 7 HTML CSS 2/ 47 HTML CSS 3/ 47 ( BOM) UTF-8 Notepad++ (Winodws), Fraise/Smultron (Mac), VIM ( ) HTML CSS 4/ 47 UTF-8? UTF-8 (unicode),

More information

A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ / ] NotePad A-2

A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ / ] NotePad A-2 HTML A-1 HTML A-2 A-2 HTML A-8 A-3 A-14 A-4 A-26 A-5 A-30 A-6 A-42 A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ /

More information

投影片 1

投影片 1 Introduction to CSS Cascading Style Sheets 網頁設計 / 林金祥 Webpage Design/ by Chin-Hsiang Lin 網頁設計概念 java, asp: CSS: 特殊功能 式樣設計 HTML: 文字 圖像內容 Webpage Design/ by Chin-Hsiang Lin 2 CSS:Fly! My Webpage! CSS: Cascading

More information

F477

F477 FrontPage & Flash 連 CSIE, NTU September 15, 2007 Outline September 15, 2007 Page 2 F477 September 15, 2007 Page 3 September 15, 2007 Page 4 September 15, 2007 Page 5 連 September 15, 2007 Page 6 連 September

More information

css-03.pdf

css-03.pdf 3 71 7 2 r e d p u r p l e H1 {color: maroon;} H1 {color: gray;} H2 {color: silver;} H3 {color: black;} 7 3 H1 {color: orange;} H 1 o r a n g e 7 4 o r a n g e RGB rgb(100%,100%,100%) 7 5 0 % H1 {color:

More information

XHTML width/height bdo a code href object charset codebase hreflang archive lang type alt dir name name xml:lang rel/rev align shape/coords hspace/vsp

XHTML width/height bdo a code href object charset codebase hreflang archive lang type alt dir name name xml:lang rel/rev align shape/coords hspace/vsp XHTML CSS CSS CSS DOCTYPE Switch XHTML width/height bdo a code href object charset codebase hreflang archive lang type alt dir name name xml:lang rel/rev align shape/coords hspace/vspace big tabindex accesskey

More information

bootstrap - 2

bootstrap - 2 RITA TEACHING Bootstra p ENTER bootstrap - 2 bootstrap - 3 bootstrap 101 Template

More information

ebook37-4

ebook37-4 4 4.1 H T M L F r o n t P a g e i m a g e m a p H T M L We b We b 4.1.1 We b We b We b We b 4.1.2 We b 4 35 4.1.3 4-1 G I F 4-2 36 4-1 ( 4-2 ) 4.1.4 We b We b 4-3 4-3 4 37 Ly n x 4-4 4-4 4.1.5 We b We

More information

關於本書 Part 3 CSS XHTML Ajax Part 4 HTML 5 API JavaScript HTML 5 API Canvas API ( ) Video/Audio API ( ) Drag and Drop API ( ) Geolocation API ( ) Part 5

關於本書 Part 3 CSS XHTML Ajax Part 4 HTML 5 API JavaScript HTML 5 API Canvas API ( ) Video/Audio API ( ) Drag and Drop API ( ) Geolocation API ( ) Part 5 網頁程式設計 HTML JavaScript CSS HTML JavaScript CSS HTML 5 JavaScript JavaScript HTML 5 API CSS CSS Part 1 HTML HTML 5 API HTML 5 Apple QuickTime Adobe Flash RealPlayer Ajax XMLHttpRequest HTML 4.01 HTML 5

More information

CSS样式表

CSS样式表 CSS 样 式 表 教 学 重 点 : CSS 样 式 表 基 础 知 识 CSS 样 式 的 分 类 CSS 样 式 的 链 接 添 加 CSS 样 式 的 其 它 相 关 知 识 教 学 难 点 : 如 上 一.CSS 样 式 表 基 础 Css 和 HTML 都 是 一 种 标 示 语 言 Html 用 来 表 现 网 页 文 件 的 内 容 和 结 构, 而 CSS 来 决 定 用 什 么

More information

Microsoft Word - Part_II_CSS.doc

Microsoft Word - Part_II_CSS.doc Web Development Part II 網頁樣式製作 -CSS 技巧 i Table of Contents CSS 概念...1 CSS 的優勢...1 程式碼比較...1 集體宣告...2 集體宣告的方法...2 分項宣告...3 分項宣告...3 外部呼叫...3 製做 CSS 檔...3 從網頁呼叫 CSS 檔...3 單獨使用...4 加入 STYLE 屬性...4 STYLE 屬性...4

More information

大漠 伪前端, 就职于淘宝

大漠 伪前端, 就职于淘宝 CSS Grid Layout 2016-12-17 @ 大漠. #CSSConf https://www.flickr.com/photos/19139526@n00/8331063530/ 大漠 伪前端, 就职于淘宝 古老的 table 布局 现代 Web 布局 Float inline-block display: table position (absolute 或 relative)

More information

《linux从入门到精通》实验指导第三讲:文件及目录操作

《linux从入门到精通》实验指导第三讲:文件及目录操作 Web 前端开发 实验教学指导 实验五 : 文字排版 一 实验目的 1 掌握 CSS 进行页面表现控制的基本方法和 CSS 的基本原理 ; 2 掌握 CSS 进行文字排版的基本内容和使用方法 二 实验环境 1 Windows XP/Windows 7 操作系统 ; 2 安装有 Adobe Dreamweaver CS6 软件的计算机一台 ; 3 局域网网络环境, 并且使用固定 IP 地址 三 实验要求

More information

<4D6963726F736F667420576F7264202D20D6D0CEC4B7A88C57B454CABF8C57CEBBD593CEC4D28EB9A0>

<4D6963726F736F667420576F7264202D20D6D0CEC4B7A88C57B454CABF8C57CEBBD593CEC4D28EB9A0> 澳 門 大 學 法 學 院 中 文 法 學 碩 士 學 位 論 文 規 範 一 適 用 範 圍 ( 一 ) 中 文 法 學 碩 士 學 位 論 文 是 中 文 法 學 碩 士 學 位 研 究 生 在 指 導 教 師 的 指 導 下 獨 立 完 成 的, 合 乎 嚴 格 的 寫 作 規 範 並 標 誌 著 獲 得 法 學 碩 士 學 位 的 一 篇 書 面 作 品 中 文 法 學 碩 士 研 究 生

More information

Microsoft PowerPoint - ch16_1.ppt

Microsoft PowerPoint - ch16_1.ppt CSS 16-1 認識 CSS CSS (Cascading Style Sheets, 串接樣式表 ) 是由 W3C 所提出, 主要的用途是控制網頁的外觀 最早的版本是 W3C 於 1996 年公布的 CSS 1, 接著 W3C 於 1998 年公布 CSS 2, 之後 W3C 於 2002 年公布 CSS 2.1 如果您想進一步瞭解 CSS, 可以參考 W3C 的 CSS 首頁 http://www.w3.org/style/css/

More information

吉安人事招聘网2012年江西省面向村干部招考300名公务员(2013年1月13日

吉安人事招聘网2012年江西省面向村干部招考300名公务员(2013年1月13日 吉 安 人 事 招 聘 网 2012 年 江 西 省 面 向 村 干 部 招 考 300 名 公 务 员 (20 1 月 13 日 www.hmkpk.com http://www.hmkpk.com 吉 安 人 事 招 聘 网 2012 年 江 西 省 面 向 村 干 部 招 考 300 名 公 务 员 (2013 年 1 月 13 日 为 从 基 层 和 临 盆 一 线 选 拔 出 色 群 众

More information

<img>

<img> 04 圖片 4-1 4-2 4-3 4-4 網頁程式設計 4-1 網頁多媒體 Flash Java Applets HTML 8 4-1-1 圖片 JPEG Joint Photographic Experts Group 非失真模式 (lossless) 基本模式 (baseline standard) 1 2 12 JPEG 6 JPEG.jpg.jpe.jpeg GIF (graphic

More information

week04.key

week04.key 基礎網 頁設計 第四週 老師 : 蔡承洋 大綱 HTML 的圖片使 用 HTML5 播放 音樂 影片 網站加上 favicon DOM(Document Object Model) 文件物件模型 樹的概念念 開始來來寫 CSS CSS 常 用屬性 HTML 的圖片使 用 html 使 用 img 標籤顯 示圖片 圖片格式有 jpg : 不需 用到透明底, 檔案容量量 小 png: 可有透明底, 但檔案較

More information

第一章

第一章 第 二 章 建 築 研 究 與 分 析 第 二 章 建 築 研 究 與 分 析 第 一 節 清 代 科 舉 與 考 棚 建 築 一 科 舉 與 貢 院 建 築 清 代 政 府 拔 取 人 才, 大 體 延 續 明 代, 但 也 有 改 進 之 處, 例 如 詔 舉, 由 皇 帝 下 詔 徵 取 人 才 為 國 家 所 用, 有 博 學 鴻 詞 孝 廉 方 正 直 言 山 林 隱 逸 孝 子 等 科

More information

CU0594.pdf

CU0594.pdf 8 SOHO 1 3 003 SOHO SOHO Coder Programmer HTML CSS PHP JavaScrip 009 LECTURE 1-1 1 048 PART 2 LECTURE 1-1 1 049 SOHO Landing Page Landing 050 PART 2 LECTURE 1-1 1 SEO SEO P.093 SEO SEO SEO SEO SEO 051

More information

Microsoft PowerPoint - chap10.ppt

Microsoft PowerPoint - chap10.ppt 第 10 章其他標籤 資科系林偉川 走馬燈 2 1 走馬燈 n3 表示走馬燈重複次數 -1 INFINITE 表示無限次重複

More information

使用 CSS+Div 布局网页 实训目的 常见网页布局方式有表格布局 框架布局和使用 CSS+DIV 布局等方式 使用 CSS+DIV 布局网页, 真正实现内容与形式的分离, 具有页面代码整洁清晰, 多线程加载等特点, 网页浏览速度更快, 因此成为目前网页布局的主流技术 熟练掌握 CSS+DIV 布

使用 CSS+Div 布局网页 实训目的 常见网页布局方式有表格布局 框架布局和使用 CSS+DIV 布局等方式 使用 CSS+DIV 布局网页, 真正实现内容与形式的分离, 具有页面代码整洁清晰, 多线程加载等特点, 网页浏览速度更快, 因此成为目前网页布局的主流技术 熟练掌握 CSS+DIV 布 使用 CSS+Div 布局网页 实训目的 常见网页布局方式有表格布局 框架布局和使用 CSS+DIV 布局等方式 使用 CSS+DIV 布局网页, 真正实现内容与形式的分离, 具有页面代码整洁清晰, 多线程加载等特点, 网页浏览速度更快, 因此成为目前网页布局的主流技术 熟练掌握 CSS+DIV 布局方式, 是网页设计者必备的技能 实训目的 : 掌握网页界面设计流程 ; 掌握与网页元素定位相关的 CSS

More information

嘉義市政府暨附(所)屬機關電話禮貌測試實施要點

嘉義市政府暨附(所)屬機關電話禮貌測試實施要點 嘉 義 市 政 府 暨 所 屬 機 關 電 話 禮 貌 測 試 實 施 要 點 83 年 8 月 17 日 83 府 計 研 字 第 50337 號 函 頒 90 年 10 月 12 日 90 府 企 研 字 第 87210 號 修 訂 95 年 12 月 20 日 95 府 企 研 字 第 0950141214 號 函 修 訂 97 年 3 月 21 日 97 府 企 研 字 第 0970110046

More information

《linux从入门到精通》实验指导第三讲:文件及目录操作

《linux从入门到精通》实验指导第三讲:文件及目录操作 Web 前端开发 实验指导 : 实验八 : 下拉菜单 一 实验目的 1 掌握 CSS 动画 JS 动画和 jquery 动画的基本原理和基本方法 ; 2 掌握下拉菜单制作的基本原理; 3 理解技术多样性的概念 二 实验环境 1 Windows XP/Windows 7 操作系统的计算机 ; 2 局域网网络环境, 并且使用固定 IP 地址 ; 3 支持互联网访问; 4 Adobe CS 6 组件支持

More information

p.2 1 <HTML> 2 3 <HEAD> 4 <TITLE> </TITLE> 5 </HEAD> 6 7 <BODY> 8 <H3><B> </B></H3> 9 <H4><I> </I></H4> 10 </BODY> </HTML> 1. HTML 1. 2.

p.2 1 <HTML> 2 3 <HEAD> 4 <TITLE> </TITLE> 5 </HEAD> 6 7 <BODY> 8 <H3><B> </B></H3> 9 <H4><I> </I></H4> 10 </BODY> </HTML> 1. HTML 1. 2. 2005-06 p.1 HTML HyperText Mark-up Language 1. HTML Logo, Pascal, C++, Java HTML 2. HTML (tag) 3. HTML 4. HTML 1. HTML 2. 3. FTP HTML HTML html 1. html html html cutehtmleasyhtml 2. wyswyg (What you see

More information

WordPress OSSF OSSF is Seeking Software Freedom 1 blog WordPress WordPress WordPress WordPress 2 WordPress WordPress is a state-of-the-art semantic pe

WordPress OSSF OSSF is Seeking Software Freedom 1 blog WordPress WordPress WordPress WordPress 2 WordPress WordPress is a state-of-the-art semantic pe WordPress OSSF OSSF is Seeking Software Freedom 1 blog WordPress WordPress WordPress WordPress 2 WordPress WordPress is a state-of-the-art semantic personal publishing platform aesthetics web standards

More information

XP11067_內文.pdf

XP11067_內文.pdf Adobe Flash Steve Jobs 2010 ios Flash http://www.apple.com/ hotnews/thoughts-on-flash/ ios Flash ios HTML5 NimbleKit ipad HTML5 HTML5 NimbleKit Objective-C iphone ipod touch HTML5 ipad iphone ipod touch

More information

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK 2 l 跨裝置網頁設計 Android ios Windows 8 BlackBerry OS Android HTML 5 HTML 5 HTML 4.01 HTML 5 CSS 3 CSS 3 CSS 2.01 CSS 3 2D/3D PC JavaScript

More information

margin border padding content 圖 1 CSS 盒子的概念 下列為 margin 常用的屬性 :( 7-1.html).margin-top ( 上邊界 ).margin-bottom ( 下邊界 ).margin-left ( 左邊界 ).margin-right (

margin border padding content 圖 1 CSS 盒子的概念 下列為 margin 常用的屬性 :( 7-1.html).margin-top ( 上邊界 ).margin-bottom ( 下邊界 ).margin-left ( 左邊界 ).margin-right ( 第七單元常用 CSS 設定 7.0 單元教學目標利用 CSS 美化 HTML 文件. 版面配置. 字體設定. 文字設定. 背景設定. 項目清單設定. 超連結設定. 表格設定 7.1 基本概論本章節主要介紹如何利用 CSS 美化 HTML 文件, 內容介紹是依一般從無到有建立網頁時我們所常碰到的需求, 從最基本的 版面配置 一直到 表格設定 為止, 為讓學習上更有效率縮短語法摸索時間, 本章以範例方式逐一說明常用

More information

网 页 设 计 实 训 教 程 1.4 实 现 过 程 任 务 1: 制 作 诗 词 欣 赏 页 面 步 骤 1: 打 开 编 辑 环 境, 创 建 HTML 文 档 1 1.html, 保 存 到 指 定 位 置, 在 文 档 中 输 入 HTML 文 档 的 基 本 结 构, 代 码 如 下 :

网 页 设 计 实 训 教 程 1.4 实 现 过 程 任 务 1: 制 作 诗 词 欣 赏 页 面 步 骤 1: 打 开 编 辑 环 境, 创 建 HTML 文 档 1 1.html, 保 存 到 指 定 位 置, 在 文 档 中 输 入 HTML 文 档 的 基 本 结 构, 代 码 如 下 : 实 训 一 实 训 一 制 作 诗 词 欣 赏 页 面 1.1 实 训 目 标 了 解 HTML 网 页 基 本 语 法 和 结 构 了 解 HTML 基 本 元 素 掌 握 对 网 页 中 文 字 格 式 化 的 方 法 掌 握 对 网 页 中 段 落 格 式 化 的 方 法 1.2 实 训 内 容 文 字 是 网 页 的 基 础 部 分, 具 体 内 容 包 括 浏 览 器 中 要 显 示 的

More information

Microsoft Word - Ch06.docx

Microsoft Word - Ch06.docx Chapter 6-1 6-2 6-2 l ASP.NET 6-1 (theme) ASP.NET (skin).skin ButtonLabelHyperLink (cascading style sheet).css TreeView 1. 2. (page theme) (global theme) IIS l 6-3 6-1-1 (page theme) (global theme) App_Themes

More information

泰州招聘365bet博彩网站三亚海棠湾东方的迪拜回归年少的童真快乐

泰州招聘365bet博彩网站三亚海棠湾东方的迪拜回归年少的童真快乐 泰 州 招 聘 365bet 博 彩 网 站 三 亚 海 棠 湾 东 方 的 迪 拜 回 归 年 少 的 童 真 快 乐 www.hmcdp.com http://www.hmcdp.com 泰 州 招 聘 365bet 博 彩 网 站 三 亚 海 棠 湾 东 方 的 迪 拜 回 归 年 少 的 童 真 快 乐 大 兴 安 岭 鄂 尔 多 斯 博 尔 塔 拉 泰 州 招 聘 网 泰 州 雇 用 365bet

More information

ebook111-4

ebook111-4 Flash 4 Flash 4 F l a s h 5 Flash 4 Flash Flash 4 Flash 4 Flash 4 4.1 Flash 4 Flash 4 Flash 4 Flash Flash 4 Flash 4 4.2 Flash 4 Flash 4 A Flash 4 S h i f t F i l e P r e f e r e n c e s > > Flash 4 Flash

More information

《linux从入门到精通》实验指导第三讲:文件及目录操作

《linux从入门到精通》实验指导第三讲:文件及目录操作 Web 前端开发 实验教学指导 实验七 :JQuery 实现网页动画 一 实验目的 1 理解 Web 交互的基本模式和概念 ; 2 掌握 Web 中 JavaScript 使用的基本方法 ; 3 了解 jquery 的特性及用法 ; 4 熟悉的 jquery 基本语法 ; 5 编写代码实现 jquery 的基本动画效果 二 实验环境 1 Windows XP/Windows Server 2003

More information

Microsoft Word - 《师范教育信息参考》 2011年第2期

Microsoft Word - 《师范教育信息参考》 2011年第2期 师 范 教 育 信 息 参 考 北 华 大 学 图 书 馆 参 考 咨 询 服 务 部 主 办 师 范 教 育 信 息 参 考 本 期 导 读 热 点 聚 焦 教 育 部 2011 年 工 作 要 点 ( 下 ) 温 总 理 在 东 北 师 大 免 费 师 范 生 来 信 上 作 出 重 要 批 示 首 届 免 费 师 范 生 全 部 到 中 小 学 任 教 教 育 基 础 道 德 : 通 往 幸

More information

兽医临床诊断学实验指导

兽医临床诊断学实验指导 兽 医 临 床 诊 断 学 实 验 指 导 河 北 科 技 师 范 学 院 动 物 科 学 系 临 床 兽 医 学 实 验 室 2009 年 2 月 目 录 学 生 实 验 守 则... 3 实 习 一 动 物 的 接 近 保 定 和 基 本 检 查 法...4 实 习 二 临 床 基 本 检 查 法 及 一 般 检 查...10 实 习 三 循 环 系 统 的 临 床 检 查...15 实 习 四

More information

1. 2. Flex Adobe 3.

1. 2. Flex Adobe 3. 1. 2. Flex Adobe 3. Flex Adobe Flex Flex Web Flex Flex Flex Adobe Flash Player 9 /rich Internet applications/ria Flex 1. 2. 3. 4. 5. 6. SWF Flash Player Flex 1. Flex framework Adobe Flex 2 framework RIA

More information

第 1 列 的 按 鈕 從 Albatross ~ Duck 1, 第 2 列 按 鈕 從 Eagle ~ Hawk 2, 第 3 行 按 鈕 從 Ibis ~ Lark 3, 而 只 有 第 3 列 按 鈕 多 設 定 span 元 素 ( 理 由 後 面 會 詳 細 說 明 ) html 具 h

第 1 列 的 按 鈕 從 Albatross ~ Duck 1, 第 2 列 按 鈕 從 Eagle ~ Hawk 2, 第 3 行 按 鈕 從 Ibis ~ Lark 3, 而 只 有 第 3 列 按 鈕 多 設 定 span 元 素 ( 理 由 後 面 會 詳 細 說 明 ) html 具 h Chapter 04 01 在 按 鈕 上 附 加 hover 效 果 本 節 的 HTML 範 例 套 用 了 3 種 當 滑 鼠 移 入 移 出 按 鈕 時 的 hover 效 果 下 圖 共 有 12 個 按 鈕, 我 們 會 在 同 一 列 按 鈕 套 用 同 一 效 果, 總 共 3 種 效 果 本 節 使 用 的 HTML 範 例 檔 SampleFile /Chapter04/01/index.html

More information

(08) (08)

(08) (08) 100 3 7 () 1000503791 100 100 3 8 (08) 7792045 (08) 7781824 Http://www.mhsh.ptc.edu.tw ... 1... 2...... 5... 5... 6... 7... 7... 8... 12... 13... 13... 14... 16... 18... 24... 28... 35... 35... 36... 37...

More information

Microsoft PowerPoint - 03CSS

Microsoft PowerPoint - 03CSS Web 应用基础 CSS Software School p {color: maroon; font: italic 2.6em Times, Serif; text-decoration: underline;} software School

More information

Microsoft Word - 改版式网页全文.doc

Microsoft Word - 改版式网页全文.doc 第 4 章 Dreamweaver CS3 高 级 篇 4.1 表 单 概 述 表 单 是 用 来 收 集 浏 览 者 的 用 户 名 密 码 E-mail 地 址 个 人 爱 好 和 联 系 地 址 等 用 户 信 息 的 输 入 区 域 集 合 浏 览 者 填 写 表 单 的 方 式 一 般 是 输 入 文 本 选 择 单 选 按 钮 或 复 选 框 以 及 从 下 拉 列 表 框 中 选 择

More information

FZ1.s92

FZ1.s92 第 一 章 服 装 制 作 工 艺 基 础 知 识 第 一 节 服 装 术 语 服 装 术 语 是 服 装 技 术 专 用 语, 如 服 装 的 每 一 个 品 种 服 装 上 的 每 一 块 裁 片 服 装 制 作 过 程 中 每 一 种 操 作, 以 及 所 使 用 的 工 具 服 装 制 作 过 程 中 出 现 的 各 种 弊 病 和 要 达 到 的 某 些 质 量 要 求 等, 都 有 其

More information

06 01 action JavaScript action jquery jquery AJAX CSS jquery CSS jquery HTML CSS jquery.css() getter setter.css('backgroundcolor') jquery CSS b

06 01 action JavaScript action jquery jquery AJAX CSS jquery CSS jquery HTML CSS jquery.css() getter setter.css('backgroundcolor') jquery CSS b 06 01 action JavaScript action jquery jquery AJAX 04 4-1 CSS jquery CSS jquery HTML CSS jquery.css() getter setter.css('backgroundcolor') jquery CSS background-color camel-cased DOM backgroundcolor.css()

More information

A-2 l 跨裝置網頁設計 A-1 <frameset> <frame> <noframes> (frame) HTML (navigation bar)

A-2 l 跨裝置網頁設計 A-1 <frameset> <frame> <noframes> (frame) HTML (navigation bar) AppendixA HTML A-1 A-2 A-3 A-2 l 跨裝置網頁設計 A-1 (frame) HTML (navigation bar) HTML 框架元素 l A-3 1. 2. 3. 4.

More information

輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4

輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4 JAVA Extension 0..\Example\Ch0\ \ T.html..\Example\Ch0\ \ T.txt T.txt..\Example\Ch0\ \ T_Ok.html 提示 :. Marquee Marquee Font Color #FFFFFF BG Color #867bf Width 90 Height 50. T.txt Ctrl+C your scrolling

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション Perl CGI 1 Perl CGI 2 Perl CGI 3 Perl CGI 4 1. 2. 1. #!/usr/local/bin/perl 2. print "Content-type: text/html n n"; 3. print " n"; 4. print " n"; 3. 4.

More information

Bus Hound 5

Bus Hound 5 Bus Hound 5.0 ( 1.0) 21IC 2007 7 BusHound perisoft PC hound Bus Hound 6.0 5.0 5.0 Bus Hound, IDE SCSI USB 1394 DVD Windows9X,WindowsMe,NT4.0,2000,2003,XP XP IRP Html ZIP SCSI sense USB Bus Hound 1 Bus

More information

研討會大綱/成果

研討會大綱/成果 2005 1 102 2005...5...6...9 ( )...10 ( )...13 (363 )...16 ( 114 )...27...48...50...54...65...72...76...77...79...80...82...95...100...102 2 102 2005 3 102 2005 4 102 2005 5 102 2005 6 102 2005 珉 7 102

More information

Chapter 1 什麼是響應式 網頁設計?

Chapter 1 什麼是響應式 網頁設計? Chapter 1 什麼是響應式 網頁設計? 2 RWD 002 Android 6000 2009 WordPress breakpoints RWD HTML CSS Ethan Marcotte A List Apart http://rwdwp.com/1 Responsive Web Design Chapter 1 003 什麼是響應式網頁設計 3 其餘正如它們所說的是歷史 行動電話已是現在的社會不可或缺的

More information

超連結 03 URI (Universal Resource Identifier) URI Web URL (Universal Resource Locator) URI URI :// [: ]/ [/ 2...]/

超連結 03 URI (Universal Resource Identifier) URI Web URL (Universal Resource Locator) URI URI :// [: ]/ [/ 2...]/ 網頁程式設計 3-1 URI 的類型... 超連結 (hyperlink) Web 1 1 2 按一下圖片超連結開啟所連結的網頁 2 3-2 超連結 03 URI (Universal Resource Identifier) URI Web URL (Universal Resource Locator) URI URI :// [: ]/ [/ 2...]/ http://www.lucky.com.tw:100/books/index.htm

More information

儿童少年卫生学实习指导.doc

儿童少年卫生学实习指导.doc 2007.3 1 2 physical anthropometrics 1. 2. 1-1 11 (11) 1. stature, height (1) 2m cm mm 1 40cm mm 3 2~3mm ±0.2% (2) 45º ±0.5cm 2. sitting height (1) (2) ±0.5cm 3. body weight (1) 50kg ±0.1kg 20g 2mm (2)

More information

HTML與CSS簡介

HTML與CSS簡介 HTML & CSS 簡介 By WM 張鎮衡 wandererm@gmail.com 本講義採用 WMGFL 授權 其實是 CC 創用 XD 說在前頭 首先, 今天這份講義的重點是簡介不是教學 希望大家聽完之後有個概念, 網頁寫作其實不容易 但很有趣 最後. 請愛用 Firefox, 這是今天的教學工具 工欲善其事 必先利其器 ~ 客官 ~ 挑件稱手的兵器吧! Notepad++ http://notepadplus.sourceforge.net/tw/site.htm

More information

國立暨南國際大學圖書館

國立暨南國際大學圖書館 國 立 暨 南 國 際 大 學 圖 書 館 學 位 論 文 繳 交 注 意 事 項 本 校 畢 業 生 辦 理 畢 業 離 校 手 續 須 完 成 圖 書 館 相 關 作 業 程 序, 請 參 見 以 下 說 明 壹 離 校 程 序 說 明 01 貳 繳 交 論 文 說 明 03 參 轉 檔 注 意 事 項 及 操 作 09 肆 上 傳 檔 案 注 意 事 項 及 操 作 16 伍 紙 本 論 文

More information

皮肤制作教程

皮肤制作教程 天 天 动 听 ios 版 主 题 制 作 教 程 By: 小 黑 (Just Ed) 教 程 提 纲 1. 简 介 2. 主 题 结 构 3. List( 歌 曲 列 表 页 面 ) 详 解 4. Play( 播 放 页 面 ) 详 解 5. 主 题 制 作 小 技 巧 示 例 主 题 下 载 地 址 : http://d1.ttpod.com/download/skin/ios4/sample.zip

More information

付宝容器 jsapi 档 册 PDF 版本 本版本为实验版本, 为线下独 查看使, 受制于 成 PDF 程序的限制, 样式问题还没有很好的解决, 例如分 切图 代码 亮 推荐使 在线版本, 便实时查看 jsapi 运 效果 如需搜索, 使 阅读 PDF 软件 带功能即可 更多细节样式调整和 录索引探

付宝容器 jsapi 档 册 PDF 版本 本版本为实验版本, 为线下独 查看使, 受制于 成 PDF 程序的限制, 样式问题还没有很好的解决, 例如分 切图 代码 亮 推荐使 在线版本, 便实时查看 jsapi 运 效果 如需搜索, 使 阅读 PDF 软件 带功能即可 更多细节样式调整和 录索引探 付宝容器 jsapi 档 册 PDF 版本 本版本为实验版本, 为线下独 查看使, 受制于 成 PDF 程序的限制, 样式问题还没有很好的解决, 例如分 切图 代码 亮 推荐使 在线版本, 便实时查看 jsapi 运 效果 如需搜索, 使 阅读 PDF 软件 带功能即可 更多细节样式调整和 录索引探索建设中 成时间 : 2017-07-20 12:13:21 Since 8.6 定义键盘 定义键盘使

More information

課程簡介

課程簡介 CSS 長 這 樣 結 合 CSS 技 術 到 HTML 中 CSS (Cascading Style Sheet) 樣 式 表, 主 要 用 來 裝 飾 編 排 網 頁 內 容, 與 HTML 相 輔 相 成 HTML 用 來 表 示 結 構 性 的 資 料,CSS 決 定 網 頁 的 樣 式 ( 顏 色 文 字 大 小 位 置 等 等 ) 為 什 麼 要 CSS HTML 的 標

More information

PowerPoint 演示文稿

PowerPoint 演示文稿 Lecture 03 DIV + CSS United, Clear, and Simple Web Arts #3 - CSS By Yanju Chen Document Type 文档类型 When creating an HTLM Document in Dreamweaver, we will find the following statement added automatically:

More information

Microsoft Word - Chap04.doc

Microsoft Word - Chap04.doc CSS 樣式與 HTML5 我們將融合前面兩章的內容, 為 HTML5 網頁搭配 CSS 設計樣式 本章的結果可能因為您的瀏覽器 ( 廠商 ) 或是版本新舊而有差異, 建議您使用新版瀏覽器來觀賞, 本文撰寫時的瀏覽器為 IE 11 與 Chrome 32.0.x 版 ( 註解 : 本書後續還有一章專門介紹新版的 CSS3) 圖 4-1 CSS 與 HTML5 標籤 ( 元素 ) 的對應 4-1 字體,fonts

More information

Dreamweaver CC 网页设计实战从入门到精通 视频教学版 15.1 整体布局 电子商务类网页主要实现网络购物 交易 所要体现的组件相对较多 主要包括产 品搜索 账户登录 广告推广 产品推荐 产品分类等内容 本实例最终的网页效果如 图 15-1 所示 图 设计分析 电

Dreamweaver CC 网页设计实战从入门到精通 视频教学版 15.1 整体布局 电子商务类网页主要实现网络购物 交易 所要体现的组件相对较多 主要包括产 品搜索 账户登录 广告推广 产品推荐 产品分类等内容 本实例最终的网页效果如 图 15-1 所示 图 设计分析 电 15 第章 行业综合案例 1 制作电子商务类网页 本章学习目标 Dreamweaver CC 网页设计实战从入门到精通 视频教学版 15.1 整体布局 电子商务类网页主要实现网络购物 交易 所要体现的组件相对较多 主要包括产 品搜索 账户登录 广告推广 产品推荐 产品分类等内容 本实例最终的网页效果如 图 15-1 所示 图 15-1 15.1.1 设计分析 电子商务类网站主要是用来提供购物交易 的

More information

7. 小 星 星 一 閃 一 閃 亮 晶 晶, 滿 天 都 是 小 星 星 ; 掛 在 天 空 放 光 明, 好 像 許 多 小 眼 睛 ; 一 閃 一 閃 亮 晶 晶, 滿 天 都 是 小 星 星

7. 小 星 星 一 閃 一 閃 亮 晶 晶, 滿 天 都 是 小 星 星 ; 掛 在 天 空 放 光 明, 好 像 許 多 小 眼 睛 ; 一 閃 一 閃 亮 晶 晶, 滿 天 都 是 小 星 星 幼 兒 組 指 定 曲 歌 詞 1. 兩 隻 老 虎 兩 隻 老 虎 兩 隻 老 虎 跑 得 快 跑 得 快 一 隻 沒 有 耳 朵 一 隻 沒 有 尾 巴 真 奇 怪 真 奇 怪 兩 隻 老 虎 兩 隻 老 虎 跑 得 快 跑 得 快 一 隻 沒 有 鼻 子 一 隻 沒 有 頭 髮 真 奇 怪 真 奇 怪 2. 小 毛 驢 我 有 一 頭 ( 隻 ) 小 毛 驢 我 從 來 也 不 騎 有 一 天

More information

第二章 补充案例

第二章 补充案例 第 2 章补充案例 案例 2-1 创建三级列表 一 案例描述 1 考核知识点 ul 元素 ol 元素 2 练习目标 掌握列表嵌套的方法 熟练地使用列表的嵌套制作多级列表 3 需求分析在使用列表时, 列表项中有可能包含若干子列表项, 要想在列表项中定义子列表项就需要将 列表进行嵌套 为了让初学者熟悉列表嵌套的方法, 本案例通过无序列表和有序列表进行嵌套, 实现一个三级列表效果 4 案例分析 1) 效果如图

More information

Microsoft Word - 11.doc

Microsoft Word - 11.doc Chapter 11 Blog 一词是英文 Weblog 的简写, 其中文名称为网络日志, 又称为网络记事本 Weblog 是在网络上发布和阅读的流水记录, 这是一项非常热门的网络交流方式 撰写博客的人, 称之为 Blogger, 也可以翻译为博客, 而撰写博客的行为有时也称为博客 因此, 在中文里博客一词既是动词, 又是名词 11.1 博客 一词的来源 博客 一词, 最早起源于中国 有人这样认为,

More information

《linux从入门到精通》实验指导第三讲:文件及目录操作

《linux从入门到精通》实验指导第三讲:文件及目录操作 Web 前端开发 实验教学指导 实验九 : 使用 CSS 进行网页布局 一 实验目的 1 掌握网页布局的基本原理; 2 掌握网页布局的常用方法; 3 体会 HTML CSS JS jquery 等多种技术结合进行 Web 设计开发过程 二 实验环境 1 Windows XP/Windows 7 操作系统的计算机 ; 2 局域网网络环境, 并且使用固定 IP 地址 ; 3 支持互联网访问; 4 Adobe

More information

接线端子--Connectors规格书.doc

接线端子--Connectors规格书.doc Connectors with/without wire protector high-temperature resistant* High grade flexible strips Resistant to temperature up to 100 C (to 140 C) Multiple approvals Raised base Available with or without wire

More information

CX_300 Manual.book

CX_300 Manual.book PC PC 45~80 80~320 260 LCD 1 ...1...3 /...3...3...4 /...4...5...5...6...6...7 SD...8...9 SD...9...10...12...16...18...19 DSC...20...23...23 Mini USB...23...24...25...25...26...27...28 2 / 1. 2. / LCD 3.

More information

Microsoft Word - 最新正文.doc

Microsoft Word - 最新正文.doc 2 2 Web 2.0 Ajax StarTrackr! GPS RFID jquery JavaScript StarTrackr! JavaScript jquery 1 jquery jquery jquery JavaScript HTML jquery JavaScript jquery jquery jquery $(document).ready()! jquery jquery (document)

More information

CH15.indd

CH15.indd Chapter 15 Bootstrap 15-1 (RWD) 15-2 Bootstrap 15-3 15-4 15-5 CSS 15-6 15-1 (RWD) (RWD Responsive Web Design) ( ) PC W3C ( ) ( ) ( ) ( ) ( ) ( ) 15-2 15 15-2 Bootstrap Bootstrap Twitter Blueprint Twitter

More information

第 9 讲层叠样式表 CSS3 张高川 遗传学与生物信息学系基础医学与生物科学学院苏州大学医学部 WX: zhanggaochuan QQ: 苏州大学医学部基础医学与生物科学学院生物信息教研室张高川

第 9 讲层叠样式表 CSS3 张高川 遗传学与生物信息学系基础医学与生物科学学院苏州大学医学部   WX: zhanggaochuan QQ: 苏州大学医学部基础医学与生物科学学院生物信息教研室张高川 第 9 讲层叠样式表 CSS3 张高川 遗传学与生物信息学系基础医学与生物科学学院苏州大学医学部 Email: zhanggaochuan@suda.edu.cn WX: zhanggaochuan770609 QQ: 2257916241 CSS 基础 CSS 选择器 CSS 样式 CSS 定位 CSS 框模型 元素本身属性样式 id 或类选择器 元素内部嵌套的其他元素样式 id 或类选择器 +

More information

第三章 补充案例

第三章 补充案例 项目 4 补充案例 西式甜品网 首页面制作 一 案例描述 1 考核知识点 盒子模型 元素的浮动与定位 2 练习目标 掌握盒子的相关属性 掌握元素的浮动与定位 3 需求分析 盒子模型这样的布局方式代替了传统的表格布局, 同时结合元素的浮动与定位, 可使网页的结构更加 多样化, 通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点 4 案例展示 效果如图 4-1 所示 1 图 4-1

More information

Fuzzy Highlight.ppt

Fuzzy Highlight.ppt Fuzzy Highlight high light Openfind O(kn) n k O(nm) m Knuth O(n) m Knuth Unix grep regular expression exact match Yahoo agrep fuzzy match Gais agrep Openfind gais exact match fuzzy match fuzzy match O(kn)

More information

第1章 在线考试系统

第1章  在线考试系统 ASP+SQL Server http://www.dearbook.com.cn/book/101885 http://www.china-pub.com/computers/common/info.asp?id=28801 http://www.douban.com/group/19963/ ASP ASP Web 1 1.1 1.2 1.2.1 1.2.2 1.2.3 1.2.4 1.3 1.4

More information

檢 視 原 始 碼 JavaScript 9 0 $(function(){ // 幫 div.qa_title 加 上 hover 及 click 事 件 // 同 時 把 兄 弟 元 素 div.qa_content 隱 藏 起 來 $('#qacontent ul.accordionpart

檢 視 原 始 碼 JavaScript 9 0 $(function(){ // 幫 div.qa_title 加 上 hover 及 click 事 件 // 同 時 把 兄 弟 元 素 div.qa_content 隱 藏 起 來 $('#qacontent ul.accordionpart 一 般 商 務 型 或 是 需 要 有 客 服 的 網 站 都 會 提 供 簡 易 的 問 與 答 頁 面, 會 把 一 些 常 見 的 問 題 整 理 成 一 個 清 單 後, 接 著 再 針 對 問 題 來 一 一 回 答 當 顧 客 有 使 用 上 或 是 其 它 疑 問 時, 可 以 先 自 行 透 過 問 與 答 來 找 找 看 是 否 有 符 合 自 己 問 題 的 項 目 但 請 試

More information

Ch6. Page Navigation Steps 例題 Ch7. Managed-Bean What are bean? Steps in Using JSF A Simple Exa

Ch6. Page Navigation Steps 例題 Ch7. Managed-Bean What are bean? Steps in Using JSF A Simple Exa 目錄 Phase 1. 基本安裝... 3 Ch1. 安裝 Jboss Studio Developer... 3 Ch2. 安裝 Application Server... 3 2.1 Request Files:... 3 2.2 Install Jboss Epp Server... 3 2.3 Add server to Jboss Developer Studio... 4 Ch3. Create

More information

RUN_PC連載_10_.doc

RUN_PC連載_10_.doc PowerBuilder 8 (10) Jaguar CTS ASP Jaguar CTS PowerDynamo Jaguar CTS Microsoft ASP (Active Server Pages) ASP Jaguar CTS ASP Jaguar CTS ASP Jaguar CTS ASP Jaguar CTS ASP Jaguar CTS ASP Jaguar Server ASP

More information

<4D6963726F736F667420576F7264202D20C9E7C7F8D6AEB4B0B5DAB0CBC6DA2E646F63>

<4D6963726F736F667420576F7264202D20C9E7C7F8D6AEB4B0B5DAB0CBC6DA2E646F63> WINDOW OF COMMUNITY 八 目 录 早 餐 吃 冷 食 会 致 身 体 衰 弱...2 吃 海 鲜 时 喝 啤 酒 易 得 结 石...2 多 吃 味 精 易 生 病...2 喜 吃 烫 硬 食 物 易 患 食 管 癌...3 爱 吃 爆 米 花 容 易 铅 中 毒...3 过 量 食 用 豆 腐 危 害 健 康...3 多 吃 臭 豆 腐 易 致 病...4 喝 醋 不 当 亦 伤

More information

Microsoft Word - PHP&DW_CS5.5_講義大綱.doc

Microsoft Word - PHP&DW_CS5.5_講義大綱.doc 臺中市 101 年度暑期教師資 訊課程研習 打造客制化網站 DreamweaverPHP 網頁 程式設計 承辦單位 : 臺中市神岡區岸裡國民小學 講師 : 吳兆全老師 日期 : 民國 101 年 7 月 5 6 7 日 臺中市 101 年暑期教師資訊課程研習 第 1 頁, 共 48 頁時間 : 中華民國 100 年 7 月 5 日至 100 年 7 月 7 日 地點 : 岸裡 4F 電腦教室 壹 環境的準備

More information

公開徵求廠商提供「採購專業人員訓練計畫企劃書」公告

公開徵求廠商提供「採購專業人員訓練計畫企劃書」公告 1 2 95 4 13 09500131390 96 4 11 09600141370 ( )92 1 29 09200043870 93 11 17 09300431800 11 3 ( ) ( ) ( ) ( 1 ) 2 ( ) ( ) ( 1 ) ( ) 15 15 16 ( ) ( ) ( ) ( ) 80 50 ( ) ( ) ( ) ( ) ( ) 1 [ ] 1/10 ( ) ( )

More information

山东轻工业学院

山东轻工业学院 3888.00 ( 16.00 ) ...1...4...16...19...22...25...28 ( )...32...34...39...42...47...48...50...51 I ( )...54...66...69...73...76... 101... 103... 105... 106... 107... 109...111... 112... 116... 118... 120...

More information

「全國紡織技術論文競賽」投稿須知

「全國紡織技術論文競賽」投稿須知 第 七 屆 全 國 紡 織 技 術 論 文 競 賽 投 稿 須 知 為 提 振 國 內 紡 織 相 關 產 學 研 單 位 技 術 研 究 之 合 作 與 業 界 經 驗 交 流 的 機 會, 共 同 營 造 一 個 紡 織 研 究 發 展 應 用 之 產 學 研 互 動 機 制, 達 到 培 育 優 質 人 才 落 實 於 產 業 之 效 益, 經 濟 部 工 業 局 特 委 託 財 團 法 人

More information

pc6_內文-4.tpf

pc6_內文-4.tpf 三 種 苗 繁 殖 及 栽 培 技 術 研 究 郭 宏 遠 薛 佑 光 張 勝 智 袁 雅 芬 96-157XL2 96-111XR3 4 13 3-1 - 95-153XL2 3 3-1 7-8 3-2 8 2-3 3-2 3-110 4 /ml 1 1 2 3 18 67% 0% 16 53% 20% 12 70% 10% 17 40% 0% 11 68% 0% 9 67% 0% 20 53%

More information

天仁期末個人報告1.PDF

天仁期末個人報告1.PDF ...3...3...3...4...4...6...6...8...10...11...12...12...12... 13...13...14...14...14...15...15... 17... 18...18...19...19...20...20...21...22...22...22...23...23...24 ... 24... 26... 27 2 3 4 5 6 7 8 9

More information

Chapter 01 Chapter 02 Chapter 03 Chapter 04 LOGO Chapter 05 Chapter 06 LOGO 005

Chapter 01 Chapter 02 Chapter 03 Chapter 04 LOGO Chapter 05 Chapter 06 LOGO 005 Photoshop / Illustrator Q&A STEP STEP CHECK Point Column 004 Chapter 01 Chapter 02 Chapter 03 Chapter 04 LOGO Chapter 05 Chapter 06 LOGO 005 Chapter 01 CS5 CS6 CC 01 CMYK97 130px STEP_01 Adobe Illustrator

More information

校园之星

校园之星 x x x x x x C H N O V x B x x x x S S x mm cm cm cm cm x x x x x x x x A A B X B B ml x x B

More information

596.doc

596.doc 2005596 4 3 2794 2796 51 2800 51 238 238 1. 238 238 1 2. 3 2 2 6 3. 238 238 4. 238 2 238 1. 4 3 2. 3. 1. 2005107 2. 238 1. 238 2. 3. 1 238 2 238 238 238 1. 0.8mm 1.6mm 10 55 Hz 1Hz /min 95±5 min 24 ±4

More information

动态网站设计题目:

动态网站设计题目: 一 判 断 题 : 第 1 章 (20%): 网 站 是 用 于 展 示 特 定 内 容 的 相 关 网 页 的 集 合 超 链 接 指 向 的 目 标 可 以 是 另 一 个 网 页, 相 同 网 页 上 的 不 同 位 置, 一 个 图 片 一 个 电 子 邮 件 地 址 一 个 文 件, 但 不 能 是 一 个 应 用 程 序 网 页 是 计 算 机 网 络 最 基 本 的 信 息 单 位,

More information

Microsoft Word - HTML5+CSS3+JavaScript网页设计案例开发 第3章.doc

Microsoft Word - HTML5+CSS3+JavaScript网页设计案例开发 第3章.doc 第 3 章 3.1 CSS 背景及特点 CSS 指层叠样式表 (Cascading Style Sheets), 它是继 HTML 语言之后诞生的前端样式语言 起初,HTML 因为控制的样式字体等前端文字样式过于繁琐复杂, 从而造成它的可维护性极低 为了解决这个问题,CSS 诞生了 3.1.1 CSS 背景 HTML 标签原本是用于定义文档内容 起初, 通过使用 这样的标签,HTML

More information

1 ( ) 1 38 38 39 40 40 41 ( ) 42 43 ( ) 44 45 48 49 51 51 51 52 53 1 53 54 55 55 56 56 58 60 60 61 62 63 64 67 67 69 70 72 2 72 74 75 76 76 77 78 78 79 79 81 81 83 86 87 88 88 89 90 90 91 92 93 93 95 97

More information

Epson

Epson WH / MS CMP0087-00 TC WH/MS EPSON EPSON EXCEED YOUR VISION EXCEED YOUR VISION Seiko Corporation Microsoft and Windows are registered trademarks of Microsoft Corporation. Mac and Mac OS are registered trademarks

More information

2014 CHC IBDC 18 83 if DESIGN TALENTS GmbH if DESIGN ASIA Ltd. 22 2014 01. 35 if DESIGN TALENTS GmbH Ralph Wiegmann 1

2014 CHC IBDC 18 83 if DESIGN TALENTS GmbH if DESIGN ASIA Ltd. 22 2014 01. 35 if DESIGN TALENTS GmbH Ralph Wiegmann 1 2014 2014 CHC IBDC 18 83 if DESIGN TALENTS GmbH if DESIGN ASIA Ltd. 22 2014 01. 35 if DESIGN TALENTS GmbH Ralph Wiegmann 1 A PROJECT OF if DESIGN TALENTS if DESIGN TALENTS if if DESIGN TALENTS if 2 & 4

More information