第 7 章 簡易網頁設計 本章學習目標 1. 網頁設計的原理與應用 2. 網頁設計的趨勢 3. 網頁的語法 4. 個人網誌簡介 申請 使用 管理與應用 命題分析 本章節是 99 課程新增的章節 雖然有四小節 但其中網頁相關的設計原則及設 計趨勢並無統一的方向 故本章的命題重點可能為 HTML 的語法 網誌簡介及相關技 術
226 7 7-1 網頁設計的原理與應用 一 認識網頁與網站 1 HTMLHyperText Markup Language ASPPHP 2 3 1 UNIXLinux Windows 2003 / 2008 Server 2 Windows IIS Linux Apache 二 網頁設計的流程 前置作業 中期作業 1 1 2 3 4 2 1 HTML 2 3 後期作業
7 227 1 1 2 3 4 2 1 Adobe DreamweaverMS FrontPageNamo WebEditor Adobe FlashNamo FreeMotionSWiSHMaxGIF Animator Adobe PhotoshopPhotoImpact Microsoft AccessMySQLMircrosoft SQL Server HTML aspphpcgi DHTMLVBScript JavaScript 2 3 1 2 1 D 1 酎 HTML 酏 HTML 釕 釢 A 2 酎 酏 釕 釢 C 3 Web Web 酎 酏 Windows Apache Web 釕 釢 D 4 酎 Adobe Dreamweaver 酏 GIF Animator 釕 Adobe Photoshop 釢 WinRAR
228 7 A 5 HTML Source Code 酎 Text File 酏 Binary File 釕 Hex File 釢 Encrypted File 96 A 6 HTML Hyper Text Markup Language HTML 酎 Browser 酏 Flash Flash Player 釕 Windows Media Player 釢 Web Server 102 1 1 酎 酏 Media Player 釕 ForntPage 釢 Namo 2 酎 酏 釕 釢 3 泝 沴 沊 沝 酎泝沴沊沝 酏沴泝沊沝 釕沊泝沴沝 釢泝沊沴沝 4 酎 酏 釕 HTML 釢 93 5 酎 DSS 酏 EIS 釕 IIS 釢 MIS 97 三 網頁設計應用技術 1 VRMLVirtual Reality Modeling Language 3D 2 Active X Java Applet
DHTML 7 229 3 Flash.swf Java Applet JavaScript VBScript DHTMLDynamic HTML Flash.swf 1 Applet Java Server Client 2 1 JavaScript VBScript Client 2 Server Client Browser 3 1 2 JavaScriptCSSDOM ASP Active Server Page.asp PHPHypertext Preprocessor.php 1 Microsoft Server-Side 2 ASP HTML ASP Server- SideIIS HTML 3 ASP Microsoft Windows IIS 1 HTML ASP 2 PHP CJavaPerl 3 PHP Web Apache 四 網頁設計的原則 1 2 3 4 5 6 7 8
230 7 9 CGI JAVA 0 五 網頁設計的趨勢 1 2 3 2 3 2 3 HTML5 ipad Flash HTML5 Flash Player HTML5 4 CSS3 Photoshop 5 Web 2.0 FacebookTwitter 6 1 A 2 A 3 AA 4 AAA 7 1 2 3 4 2 B 1 酎 酏 3 釕 釢 C 2 酎 ASP 酏 JAVA 釕 VRML 釢 DHTML
7 231 C 3 酎 ASP 酏 CGI 釕 JavaScript 釢 PHP D 4 酎 Gif Animator 酏 Flash 釕 Namo FreeMotion 釢 PhotoImpact D 5 酎 DHTML 酏 Java Applet 釕 Active X 釢 ASP D 6 酎 酏 釕 HTML 5.0 釢 Web 1.0 2 1 ASPActive Server Pages 酎 酏 釕 Linux 釢 2 ClientBrowser 酎 JavaScript 酏 ASP 釕 PHP 釢 CGI 97 3 酎 C 酏 VB 釕 JavaScript 釢 DHTML 4 酎 JavaScript 酏 CGI 釕 HTML 釢 5 酎 酏 釕 釢 6 酎 酏 VBScript 釕 DHTML 釢
232 7 填充題 1 2 3 UNIXLinux Windows 2003 / 2008 Server 4 Windows Linux 5 6 Adobe DreamweaverNamoMS FrontPageWebEditor Adobe FlashNamo FreeMotionSWiSHMaxGIF Animator Adobe PhotoshopPhotoImpact Microsoft AccessMySQLMircrosoft SQL Server 7 DHTML 8 9 0 q w e
7 233 7-2 網頁設計語法介紹 一 HTML.htm.html 二 HTML 1 2 Tags 三 HTML <X><Y><Z> </Z></Y></X> 四 HTML 文件的基本結構 1 <HTML>...</HTML> HTML <HTML> </HTML> 2 <HEAD>...</HEAD> HTML 3 <TITLE>...</TITLE> 4 <BODY>...</BODY> <HTML> <HEAD> <TITLE> </HEAD> <BODY> </BODY> </HTML> </TITLE> 五 常見的 HTML 語法 <HTML></HTML> <HEAD></HEAD> <TITLE></TITLE> <BODY></BODY> <BR> <P></P> <HR> <Hn></Hn> HTML HTML <TITLE></TITLE> <BODY></BODY> </P> n 6
234 7 <FONT SIZE"n" > </FONT> <B></B> <I></I> <U></U> <P ALING"LEFT"></P> <Center></Center> <IMG SRC" "> GIFJPGPNG GIF JPG PNG 256 <A HREF" "></A> <TABLE> </TABLE> COLOR"#FFFFFF" FACE" " LEFTCENTER RIGHT 1 256 2 GIF 3 4 GIF Ulead Gif Animator logo JPG 24 bits 1 24 bits PNG 2 target"_new / _top / _blank / _self / name" _new _top _blank _new _self name frame name <TR> <TD> <table border1> <tr> <td>1</td> <td>2</td></tr> 1 2 <tr><td>3 </td><td>4</td></tr> 3 4 <tr><td>5</td><td>6</td></tr> 5 6 </table>
7 235 <FRAMESET> <frame > </FRAMESET> VBScript JavaScript asp php <embed>... </embed> <frameset cols"30%,*"> <frameset rows"2*,*> top 245 pt top.htm <frameset rows"245,*> <frame name"top" scr"top.htm"> main <frame name"main" scr"main.htm"> main.htm </frameset> <script type"text/vbscript></script> <script type"text/ JavaScript></script> <%...%>... asp <?php...?>... php Active X Java Applet <Object ClassID"CLSID:GUID"> <Parama name" " Value" "> <Parama name" " Value" ">... </Object> FlashmidMP3 六 CSS 層疊樣式表 (Cascading Style Sheets) 1 CSS HTML 2 CSS Scroll bar 3 CSS {} { 1: 1; 2: 2; n: n} h1{font-size:24pt; color:blue} h1 24 pt h1 font-size color 24 pt blue ; ;
236 7 4 CSS 1 < style 1: 1; 2: 2> </ > 2 <head>...</head> CSS <head> <style type"text/css"> 1{style 1: 1; 2: 2} 2{style 1: 1; 2: 2} </style> </head> 3 <link> CSS CSS.css CSS CSS <head> <link rel"stylesheet" type"text/css" href"css " </head> 1 B 1 酎 HTML <X>< Y><Z> </X></ Y></Z> 酏 HTML <A></A> 釕 HTML <P> </P> 釢 <H1> <H6> C 2 html <p> abc </p > 酎 abc 酏 abc 釕 abc 釢 abc D 3 酎 asp 酏 htm 釕 html 釢 tmp C 4 World Wide Web 酎 Assembly Language 酏 Data Control Language 釕 Hyper Text Markup Language 釢 Structured Query Language B 5 HTML 酎 <START> HTML 酏 <A HREF" "> </A > 釕 <BMP SRC" "> 釢 <HR> 95
7 237 B 6 酎 BMF 酏 GIF 釕 JPG 釢 TIF B 7 HTML < >...</ > 酎 A 酏 BR 釕 FONT 釢 TITLE 96 C 8 酎 HTML 酏 CSS HTML 釕 XML 釢 Java Applet Java 97 D 9 HTML 酎 <a> Tag 酏 HREF <a> URL 釕 <form> 釢 program B 0 <frameset rows"2*,*"><frame src"a.htm"><frame src"b.htm"> </frameset> HTML 酎 frame 酏 釕 釢 93 D q HTML Tag 酎.gif 酏.jpg 釕.png 釢.ufo 102 B w <embed>... </embed> 酎 asp 酏 flash 釕 php 釢 active X A e 酎 XML 酏 HTML 釕 VRML 釢 DHTML 1 1 CSS HTML 酎 <body>...</body> 酏 <object>...</objetc> 釕 <embed>...</embed> 釢 <head>...</head> 2 HTML 酎 <head><title> </ head></title> 酏 <head><title> <\head><\title> 釕 <head><title> </title></head> 釢 <head><title> <\title><\head> 97 3 HTML Tag 酎 <BR> 酏 <H1> <H2> 釕 <HR> 釢 <P> 102 4 HTML Hyper Linker 酎 <A.../A> 酏 <Font.../Font> 釕 <H1.../H1> 釢 <P.../P>
238 7 5 HTML Tag 酎 <CENTER>...</CENTER> 酏 <BODY>...</BODY> 釕 <HEAD>...</HEAD> 釢 <H1>...</H1> 93 6 酎 BMP 酏 EPS 釕 GIF 釢 JPEG 94 7 HTML 酎 <img src"game.gif"> 酏 <img href"game.gif"> 釕 <img http"game.gif"> 釢 <img url"game.gif"> 94 8 abc@xyz.com HTML 酎 <a herf"email:abc@xyz.com"> 酏 <a href"http://abc@xyz.com"> 釕 <a href"mailto:abc@xyz.com"> 釢 <a href"telnet://abc@xyz.com" 93 9 酎 2 html 酏 3 html 釕 釢 102 0 酎 酏 釕 釢 q ActiveX Java Applet 酎 <IMG> 酏 <a> 釕 <Object> 釢 <embed> w Scroll bar 酎 CSS 酏 RSS 釕 DSS 釢 CAS e HTML 酎 <frame> </frame> 酏 <font> </font> 釕 <top> </top> 釢 <title> </title> 102
7 239 填充題 1 HTMLHyperText Markup Language 2 HTML HTML 5.0 3 HTML 4 HTML <X><Y><Z> 5 Scroll bar 6 CSS 7-3 個人網誌的簡介與應用 一 部落格的簡介 1 Blog WebLog 2 3 4 HTML 5 PIXNET PChome Xuite Yam http://www.pixnet.net/ http://mypaper.pchome.com.tw/ http://xuite.net/ http://blog.yam.com/
240 7 二 部落格的使用 1 1 2 CSS CSS 2 RSS 3 4 5 6 三 部落格的應用 1 2 3 4 5 6 7
7 241 1 A 1 HTML 酎 Blog 酏 E-mail 釕 WWW 釢 BBS D 2 酎 酏 釕 釢 D 3 酎 酏 釕 釢 A 4 酎 RSS 酏 釕 釢 1 1 酎 酏 釕 釢 2 酎 酏 釕 釢 3 酎 Internet Service Provider 酏 Personal Area Network 釕 Really Simple Syndication 釢 Unshielded Twisted Pair 101 4 酎 酏 釕 釢 填充題 1 2 Blog 3 4 5 6 7
242 7 8 9 0 q 1 2 3 4 5 6 7 1 酎 酏 釕 釢 2 酎 酏 釕 釢 3 酎 JavaScript 酏 VBScript 釕 Java Applet 釢 PHP 4 酎 VBScript 酏 PHP 釕 DHTML 釢 CGI 5 flash flash 酎 HTML5 酏 Java Applet 釕 DHTML 釢 Photoshop 6 Photoshop 酎 CSS 3 酏 Flash 釕 PhotoImpact X3 釢 DHTML 7 HTML 酎 酏 釕 釢
7 243 8 酎 gif 酏 JPG 釕 BMP 釢 TXT 9 酎 酏 釕 釢 0 Web Web 酎 Linux Apache 酏 Linux IIS 釕 Windows 2008 Apache 釢 Windows 2008 IIS q 酎 酏 釕 釢 w HTML 4.0 HTML 4.0 酎 W3C 酏 ISO 釕 IEEE 釢 Microsoft e 酎 酏 BBS 釕 E-mail 釢 MSN r 酎 Photoshop 酏 Namo FreeMotion 釕 SWiSHMax 釢 GIF Animator t Apache 酎 Web 酏 FTP 釕 Telnet 釢 E-mail y 酎.gif 酏.html 釕.png 釢.asp u 酎 酏 Weblog 釕 釢 BBS i Vlog 酎 酏 YouTube 釕 Xuite 釢 Yam o 酎 酏 釕 釢 p 酎 asp 酏 cgi 釕 php 釢 active X a HTML < >...</ > 酎 A 酏 BR 釕 TR 釢 HTML s HTML tag HTML 酎 <H1>HTML</H1> 酏 <H2>HTML</H2> 釕 <H5>HTML</H5> 釢 <H6>HTML</ H6> d CGI 酎 C CGI 酏 CGI Web 釕 CGI Linux 釢 CGI f 酎 dbase III 酏 JavaScript 釕 Pascal 釢
244 7 g ASPActive Server Pages 酎 酏 釕 Linux 釢 h 酎 ASP 酏 CGI 釕 JavaScript 釢 PHP j 酎 CIS 酏 CSS 釕 ABS 釢 CCS k 酎 html 酏 tif 釕 HTML 釢 l 酎 Home Page 酏 釕 IE IE 釢 index default.htm.html.asp.aspx.php ; HTML 酎 Basic 酏 C 釕 Java 釢 PHP z html source code 酎 text file 酏 binary file 釕 hex file 釢 encrypted file x HTML 酎 <img src"lungteng. gif"> 酏 <img href"lungteng.gif"> 釕 <img bmp"lungteng.gif"> 釢 <img url"lungteng. gif"> c 酎 GIF 酏 JPG 釕 WMF 釢 BMP v 酎 酏 釕 Media Player 釢 b 酎 酏 釕 釢 n 酎 CSS 酏 釕 HTML 5 釢 PHP m GIF 酎 酏 釕 釢, 酎 CSS 酏 ASP 釕 Java Applet 釢 VBScript. 酎 酏 釕 釢 / 酎 酏 釕 釢