Download presentation
Presentation is loading. Please wait.
1
HTML & CSS
2
Other Tags <!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “ <!-- comment --> comment out <title>page title</title> : html page title
3
Example HTML
4
Practice Table Click
5
Table nested in td
6
Insert Image Click
7
Copy and Paste Table 선택후에 Ctrl-C 빈 td를 클릭하고 Ctrl-V
8
In Dreamweaver Table Toolbar click
11
Let’s change <img … style=“border:1px solid #cccccc;”/>
Product name color and font-style Lunch box <span style=“color:#00cc00; font-weight:bold;”>Lunch box</span> Price color $5.75 <span style=“color:#ff0000;”>$5.75</span> Product name and price align <td style=“text-align:center;”>…</td> Add link to image <img …/> <a href= …/></a> Add border to image Images within <a> tag will have ugly blue border at default <img … style=“border:1px solid #cccccc;”/>
12
CSS (Cascading Style Sheet)
Ok, you must have hard time to repeat the same thing for 8 products. What about more than 100 products? Here comes our rescue hero CSS Remember the 4 most important attributes of html tags id, class, style and type (mainly used in <input> tag) <table id=“tableProduct1”><tr><td><span class=“productname”>lunchbox</span> <span class=“price”>$5.75</span></td></tr></table>
13
CSS selectors <table id=“tableProduct1”> <tr><td>
<img src=“sample.jpg”/> </td></tr> <tr><td class=“productdesc”> <span class=“productname”> lunchbox </span> <span class=“price”> $5.75 </span> </td> </tr> </table> td.productdesc { text-align:center; } .productname { color: #00cc00; font-weight: bold; img { border:1px solid #cccccc; .price { color:#ff0000;
14
Internal CSS <html> <head> <title>test</title>
td.productdesc { text-align:center; } .productname { color: #00cc00; font-weight: bold; img { border:1px solid #cccccc; .price { color:#ff0000; <html> <head> <title>test</title> <style type=“text/css”> … </style> </head> <body> </body> </html>
15
External CSS Advantage? <html> <head>
<title>test</title> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> <body> … </body> </html> td.productdesc { text-align:center; } .productname { color: #00cc00; font-weight: bold; img { border:1px solid #cccccc; .price { color:#ff0000; Advantage?
16
DOM (Document Object Model)
HTML Document Object Model <html> <head> </head> <body> <table> <tr><td>lunch</td> <td>$5.75</td> </tr> </body> </html> Tag HTML Text HEAD BODY TABLE TR TD TD Lunch $5.75
17
CSS + DOM + Javascript Fancy effects that was not possible before are now enabled Fade in/out Slide up/down Zoom up/down Other unobtrusive animation
18
URL Path Relative path Absolute (Full) path
<img src=“sample.jpg”/> <a href=“product.html”>product</a> 현재의 웹 페이지가 있는 폴더부터 시작 <img src=“images/sample.jpg”/> Absolute (Full) path <img src=“ <a href=“ product </a> Required in (marketing)
19
Static to Dynamic HTML Let’s assume you have 100 products. Then you will have to make 100 product pages, say, product_1.html, product_2.html, …, product_100.html. Now what happen if you decide to change layout of your product page? Yes! You have to change 100 pages. Are you ok with that? Here comes our another heroes to rescue you. Those are web page scripts and database.
20
Web site structure (generated) HTML page Script page Web Server
Web Server IIS, Apache ProductID ProductName Price 1 Lunch 5.75 2 Breakfast 6.99 … <html> <body> <table> <tr> <td>Lunch</td> <td>$5.75</td> </tr> </table> </body> </html> <html> <body> <table> <tr> <td>%ProductName%</td> <td>%Price%</td> </tr> </table> </body> </html> (generated) HTML page Script page
21
Prepare second part Facebook account and make friends
Mail chimp account HTML practice Zencart practice Visit class website
22
Next class E-commerce Payment Shipping Shopping cart (Zen cart)
Connecting with Amazon and Ebay
Similar presentations
