Overall Process

Size: px

Start display at page:

Download "Overall Process"

미선 금
6 years ago
Views:

1 CSS ( )

2 Overall Process

3 Overall Process (Contents : Story Board or Design Source) (Structure : extensible HyperText Markup Language) (Style : Cascade Style Sheet) (Script : Document Object Model)

4 (Contents : Story Board or Design Source)

5 ,

8 ( )

9 / -- --, Home Site Map Contact us Home ( )..,, / / ?.,. ( ) TV Dynamic Korea : 02) : 02) to : Webmaster ( ) -- --

10 (Structure : extensible HyperText Markup Language)

11 (Document Type Definition) (validation) HTML vs. XHTML Version Strict vs. Transitional(Frameset) IE6, IE7 Standards, Compatibility mode

13 <?php include($_server['document_root']."/share/config.php");?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="ko"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr" /> <title> </title> <?php include($_server['document_root']."/share/layout_head.php");?> <script type= text/javascript > // some code </script> <style type= text/css > /* some style rules */ </style> </head> <body class="intro"> <?php include($_server['document_root']."/share/layout_top.php");?> <div id="location"> <a href="main.asp">home</a> <a href="chp01.asp?ex=1"> </a> <span class="current"> </span> </div> <h1><img src="../img/01intro/intro_tit01.gif" alt=" " /></h1> <div id="content-area">  </div> <?php include($_server['document_root']."/share/layout_btm.php");?> </body> </html>

14 : <h1>~<h6> : <p> : <ul>, <ol>, <li>, <dl>, <dt>, <dd> : <table>, <thead>, <tbody>, <colgroup>, <col>, <tr>, <th>, <td> : <form>, <fieldset>, <legend>

15 : <h1>, : <ul>, <li> : <h1> : <h2>~<h6>, <p>, <ul>, <ol>, <dl>, <table>, <form> : <address>

17 h1 ul ul ul ul p + img address

18 <div>, <span> id, class

20 #head #body #sub #foot

21 #head <div id="head"> <h1 id="logo"><a href="main.asp"><img src="../img/06com/pcsi_logo01.gif" alt=", " /></a></h1> <div id="toplink"> <ul> <li style="display: none;" ><a href="#body"> </a></li> <li><a href="/"><img src="/img/nav/top01.png" alt="home" /></a></a></li>  </ul> </div> <div id="topnav"> <ul> <li class="menu-1"><a href="chp01.asp?ex=1"><img src="/img/06com/ menu-1.png" alt=" " /></a> <ul> <li><a href="chp01.asp?ex=1"><img src="/img/06com/menu-1-1.png" alt=" " /></a></li>  </ul> </li>  <ul> </div> <div id="visual"> <p><img src= /img/nav/visual.jpg alt=. /></p> </div> </div>

22 #sub <div id="sub"> <h1><img src="../img/01intro/left_tit.gif" alt=" " /></h1> <ul id="subnav"> <li><a href="?ex=1"><img src="../img/01intro/left_menu01_off.gif" name="menu011" alt=" " /></a></li> <li><a href="?ex=2"><img src="../img/01intro/left_menu02_off.gif" name="menu021" alt=" " /></a></li> <li><a href="?ex=3_1"><img src="../img/01intro/left_menu03_off.gif" name="menu031" alt=" " /></a> <ul> <li><a href="?ex=3_1"><img src="../img/01intro/left_menu03_1off.gif" name="menu03_11" alt=" " /></a></li> <li><a href="?ex=3_2"><img src="../img/01intro/left_menu03_2off.gif" name="menu03_21" alt=" " /></a></li> <li><a href="?ex=3_3"><img src="../img/01intro/left_menu03_3off.gif" name="menu03_31" alt=" " /></a></li> </ul> </li> <li><a href="?ex=4"><img src="../img/01intro/left_menu04_off.gif" name="menu041" alt=" " /></a></li> <li><a href="?ex=5"><img src="../img/01intro/left_menu05_off.gif" name="menu051" alt=" " /></a></li> <li><a href="?ex=6"><img src="../img/01intro/left_menu06_off.gif" name="menu061" alt=" " /></a></li>  </ul> </div>

23 #body <div id="body"> <div id="location"> <a href="main.asp">home</a> <a href="chp01.asp?ex=1"> </a> <span class="current"> </span> </div> <h1><img src="../img/01intro/intro_tit01.gif" alt=" " /></h1> <div id="content-area"> <p style="margin: px 0;"><img src="../img/01intro/sub01_img01.jpg" alt=" " /></p> <p style="margin: px;"><img src="../img/01intro/sub01_img02.gif" alt=" " /></p> <p style="margin: 20px px;"><img src="../img/01intro/sub01_img03.gif" alt=".,,." /></p> <p style="margin: 20px px;"><img src="../img/01intro/sub01_img04.gif" alt=". 21." /></p>  <p style="margin: 57px px;"><img src="../img/01intro/sub01_img07.gif" alt=" " /></p> </div> </div>

24 #foot <div id="foot"> <ul class="related"> <li><a href=" target="_blank"> </a></li> <li><a href=" target="_blank"> </ a></li> </ul> <address> <img src="/img/06com/bottom_banner1.gif" usemap="#map4" alt=" : 02) : 02) " / ><br /> <map id="map4" name="map4"> <area shape="rect" coords="299,3,427,27" href="mailto:jennifer71@cwd.go.kr" alt=" to : Webmaster" /> </map> </address> <div class="contact"> <a href=" target="_self"><img src="/img/06com/0711_2.gif" alt=" " /></a> </div> <div class="link"> <select> <option value="">-- --</option> <option value=" </option> </select> </div> </div>

25 <object> element <object> element type data

26 <object>  <object data="hello.swf" type="application/x-shockwave-flash">  <object data="hello.png" type="images/png">  <object data="hello.gif" type="images/gif">  <p>hello!</p> </object> </object> </object>

Macromedia <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http:// download.macromedia.com/pub/shockwave/cabs/flash/swflash.

27 Macromedia <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="flash_movie" align="middle"> <param name="allowscriptaccess" value="samedomain"> <param name="movie" value="flash_movie.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#ffffff"> <embed src="flash_movie.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="untitled-1" align="middle" allowscriptaccess="samedomain" type="application/x-shockwave-flash" pluginspage=" getflashplayer"> </object>

28 <object> <object type="application/x-shockwave-flash" data="images/banner.swf" width="140" height="40"> </object> <object type="application/x-shockwave-flash" data="images/banner.swf" width="140" height="40"> <param name="movie" value="images/banner.swf" /> </object>

29 Hixie <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="flash_movie" align="middle"> <param name="movie" value="flash_movie.swf">   <object type="application/x-shockwave-flash" data="flash_movie.swf" width="550" height="400"> <p><img src="flash_movie.png" alt="" /></p> </object>  </object>

30 (Style : Cascade Style Sheet)

31 CSS CSS CSS cascade inheritance priority descendant selector class

32 id, descendant selector #head { #head h1#logo { #head #toplink { #head #toplink img { #topnav { #topnav ul { #topnav ul li { #topnav ul li img { #head #visual { #sub { #sub h1 { #sub h1 img { ul#subnav, ul#subnav ul { ul#subnav li { ul#subnav li img { #sub #head #body #foot #body { #body h1 { #location { #location span { #content-area { #site-banner { #site-banner ul { #site-banner li { #foot { #foot ul.related { #foot ul.related li { #foot ul.related a { #foot address { #foot div.contact { #foot div.link { #foot div.link select {

33 @import CSS CSS CSS CSS /

34 import.css section1.css section2.css section3.css board.css form.css template.css layout.css popup.css base.css

pcsi.css @import url(layout.css); @import url(board.

35 url(section.css); layout.css board.css section.css

36 position vs. float position, normal flow block float,

37 #head { width: 960px; height: 188px; #sub { position: absolute; top: 188px; left: 0; width: 237px; #body { width: 723px; /* min-height: 627px; */ padding-left: 237px; padding-bottom: 30px; background: url(/img/06com/sub_bodytable_img.gif) no-repeat 955px 0 #fff; #foot { background:url(/img/06com/bottom.gif) no-repeat #00395B; width: 960px; height: 129px;

38 !

39 <script type="text/javascript"> //<![CDATA[ bodyel = document.getelementbyid("body"); subel = document.getelementbyid("sub"); if (bodyel.offsetheight < subel.offsetheight) { bodyel.style.height = subel.offsetheight + "px"; //]]> </script>

40 CSS : <h1>~<h6>, <p>, <form>, <ol>, <ul>, <dl>, <dd>, <blockquote>

41 #sub h1 { margin: 0; #sub h1 img { vertical-align: top; ul#subnav, ul#subnav ul { margin: 0; padding: 0; list-style: none; ul#subnav li img { vertical-align: top;

42 h1 ul#subnav ul #sub h1 { margin: 0; #sub h1 img { vertical-align: top; ul#subnav, ul#subnav ul { margin: 0; padding: 0; list-style: none; ul#subnav li img { vertical-align: top;

43 position, float negative margin

44 p p p p p

45 p margin-left: 154px; p p p p

46 p p p p p margin-bottom: -180px;

47 <div id="content-area"> <p style="margin: px 0;"><img src="../img/01intro/sub01_img01.jpg" alt=" " /></p> <p style="margin: px;"><img src="../img/01intro/sub01_img02.gif" alt=" " /></p> <p style="margin: 20px px;"><img src="../img/01intro/sub01_img03.gif" alt=".,,." /></p> <p style="margin: 20px px;"><img src="../img/01intro/sub01_img04.gif" alt=". 21." /></p> <p style="margin: 20px px;"><img src="../img/01intro/sub01_img05.gif" alt=".?.,." /></p> <p style="margin: 57px px;"><img src="../img/01intro/sub01_img07.gif" alt=" " /></p> </div>

48 CSS2 background-image div

49 <div id="foot-wrapper"> <div id="foot">  </div> </div> #foot-wrapper { background: #00395B; #foot { background:url(/img/06com/bottom.gif) no-repeat #00395B; width: 960px; height: 129px;

50 CSS Hack CSS Hack CSS ex) IE conditional comment

51 CSS Hack Conditional Comment html * { html>#head {  div.ie { padding: 0 25px; width: 100px; voice-family: \ \ ; voice-family: inherit; width: 150px;

52 (Script : Document Object Model)

53 Unobtrusive Javascript, XHTML DOM

54 <div id="topnav"> <ul> <li class="menu-1"><a href="chp01.asp?ex=1"><img src="/img/06com/menu-1.png" alt=" " /></a> <ul> <li><a href="chp01.asp?ex=1"><img src="/img/06com/menu-1-1.png" alt=" " /></a></li>  </ul> </li>  <ul> </div> <script type= text/javascript > initnav(document.getelementbyid("topnav").getelementsbytagname("ul").item(0)); </script> function initnav(menu) { // menu.childnodes.item(i).getelementsbytagname("img").item(0).onmouseover = function() { if (menu.current!= this) { this.submenu.style.zindex = 5; settop(this.submenu, 0.4, -20, 33); setopacity(this.submenu, 0.3, 0, 1); menu.current = this; // //

55 IE6 CSS Javascript Mozilla Firefox, Apple Safari, Opera

56 (Test : Validation Check)

57 W3C Markup Validation

58 W3C CSS Validation

59 Semantic Markup

60 Accessibility KWCAG (Korea Web Contents Accessibility Guideline) 1.0,

Week8-Extra

Week8-Extra Week 08 Extra HTML & CSS Joonhwan Lee human-computer interaction + design lab. HTML CSS HTML, HTML 5 1. HTML HTML HTML HTML (elements) (attributes), (arguments). HTML (tag), DTD (Document Type Definition).!4