„Méně je často více”
Díky několikaleté praxi na mnoha projektech je pro nás kódování grafických návrhů do XHTML šablon a CSS rutinou. Od grafika obdržíte výstupní PSD soubor s designem → my tento design nakódujeme do statické XHTML šablony.
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-language" content="cs" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="author" content="" /> <meta name="robots" content="index, follow" /> <title>Atlas Domén.cz - Domény z celého světa</title> <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen, projection" /> </head> <body> <div id="page"> <div id="header"> <h1><a href="" title="Úvodní strana">Atlas Domén.cz - Domény z celého světa<span></span></a></h1> <p id="cart">Celkem v košíku: <a href="" title="Nákupní košík">1750 Kč</a> s DPH</p> <form id="search" action="" method="post"> <p> <input type="text" value=".TLD nebo stát" /> <input class="submit" type="submit" value="Hledat" /> </p> </form> </div> <ul id="menu"> <li class="active"><a href="" title="">Evropa</a></li> <li><a href="" title="">Asie</a></li> <li><a href="" title="">Amerika</a></li> <li><a href="" title="">Austrálie</a></li> <li><a href="" title="">Afrika</a></li> <li><a href="" title="">Generické domény</a></li> </ul> <div id="main"> <h2><img src="images/ad.gif" width="44" height="31" alt="" /> Albánie - Albania | .AL</h2> <div id="box"> <div class="inner"> <table> <tr> <th>Zeme:</th> <td>Albania</td> </tr> <tr> <th>TLD:</th> <td>.AL</td> </tr> <tr> <th>Registrovatelne koncovky:</th> <td>COM.AL | NET.AL | ORG.AL</td> </tr> <tr> <th>Vyzadovan lokalni kontakt:</th> <td>Ano</td> </tr> <tr> <th>Nabidka lokalniho kontaktu:</th> <td>Ne</td> </tr> <tr> <th>Vice registraci:</th> <td>Ne</td> </tr> <tr> <th>Pozadavky:</th> <td>Registraci domény mohou provést pouze firmy, které mají sídlo v Albánii.</td> </tr> <tr> <th>Minimalne znaku:</th> <td>3</td> </tr> <tr> <th>Maximalne znaku:</th> <td>64</td> </tr> <tr> <th>Minimalne let registrace:</th> <td>2</td> </tr> <tr> <th>Maximalne let registrace:</th> <td>2</td> </tr> <tr> <th>Omezeni nazvu domeny:</th> <td>Doménové jméno smí být identifikátor (název) žadatele.</td> </tr> <tr> <th>Doba registrace:</th> <td>5 dnů</td> </tr> </table> </div> </div> <div id="sidebar"> <h3>Registrace</h3> <form action="" method="post"> <p> <input type="text" value="název domény" /> <strong>.</strong> <select> <option value="ad">ad</option> <option value="al">al</option> <option value="aq">aq</option> <option value="at">at</option> <option value="ax">ax</option> <option value="ba">ba</option> </select> <input class="register" type="submit" value="Registrovat" /> </p> </form> <h3>Ověření domén</h3> <form action="" method="post"> <p> <textarea name="" rows="4" cols="41"></textarea> <input class="verify" type="submit" value="Ověřit" /> </p> </form> </div> <p class="cleaner"></p> </div> <div id="footer"> <p id="copy"> © 2009 Atlas Domén • <a href="http://www.atlasdomen.cz" title="">www.atlasdomen.cz</a> </p> <p> Webdesign - <a href="http://www.broucek-a-beruska.cz" title="Brouček a Beruška Webdesign">Broucek-a-beruska.cz</a> </p> </div> </div> </body> </html>
/* general */ * {margin: 0; padding: 0;} BODY {color: #4b2315; background: url(../images/bg.jpg) 7% 0 repeat-x #dedec2; font-size: 85%; font-family: Arial, sans-serif; text-align: center; padding-top: 50px;} H2 {font-size: 170%; background: url(../images/h2.gif) 0 100% repeat-x; padding: 22px 0; margin: 0 40px 20px 0; text-align: center; text-transform: uppercase; position: relative;} H2 IMG {border: 1px #6b381e solid; margin-right: 15px;} H3 {font-size: 110%; margin: 20px 0;} UL {list-style-type: none;} TABLE {font-size: 100%; border-collapse: collapse;} TH, TD {vertical-align: middle; text-align: left;} INPUT, SELECT, TEXTAREA {color: #9e7158; font-family: Arial, sans-serif; font-size: 95%; background: url(../images/bginput.gif) no-repeat #fff; vertical-align: middle; border: 1px #b49f7d solid; padding: 5px 10px;} SELECT {padding: 4px;} IMG {border: 0; vertical-align: middle;} A, A:visited {color: #4b2315;} A:active, A:hover {color: #d1c6a6;} /* layout */ #page {width: 902px; margin: 0 auto; text-align: left; position: relative;} #main {background: url(../images/bgmain.jpg) 50% 0 no-repeat; clear: both; margin: 42px 0 42px 40px;} #header {height: 256px; background: url(../images/header.jpg) no-repeat #d9bc8e;} #header H1 {width: 450px; height: 105px; overflow: hidden; position: absolute; left: 62px; top: 95px; z-index: 1; margin: 0; text-align: center; font-size: 140%;} #header H1 SPAN {width: 450px; height: 105px; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 2; background: url(../images/logo.jpg) no-repeat; display: block; cursor: pointer;} #header H1 A {color: #fff; font-size: 210%; font-weight: bold; margin: 10px 0 0 0; display: block;} #cart {width: 210px; color: #eeeedf; background: url(../images/cart.gif) 100% 50% no-repeat; font-size: 95%; position: absolute; right: 45px; top: 150px; padding: 7px 0; text-align: center;} #cart A {color: #fff; font-weight: bold;} #cart A:hover {color: #eeeedf; text-decoration: none;} #search {position: absolute; right: 45px; top: 200px;} #search INPUT {width: 120px; background: url(../images/search_input.gif) 0 50% no-repeat; _width: 137px; _height: 28px; border: 0;} #search .submit {width: 69px; color: #5f3421; background: url(../images/search_submit.gif) 50% 50% no-repeat; border: 0; font-weight: bold; text-align: center; padding: 5px 0;} #menu {position: absolute; left: 45px; top: 264px;} #menu LI {margin: 0; padding: 5px 36px; float: left;} #menu A, #menu A:visited {color: #eeeedf; display: block; text-decoration: none; text-transform: uppercase;} #menu A:hover {color: #fff; text-decoration: underline;} #menu .active A {color: #fff; font-weight: bold;} #menu .active A:hover {text-decoration: none;} #box {width: 487px; background: url(../images/box.gif) no-repeat; float: left; margin-right: 20px;} #box .inner {height: 100%; background: url(../images/box_bottom.gif) 0 100% no-repeat;} #box TABLE {margin: 17px;} #box TH {width: 42%; font-size: 95%; vertical-align: top; padding: 2px 0;} #box TD {padding: 2px 0;} #sidebar {width: 315px; float: left;} #sidebar P {margin: 0 0 5px 0; font-size: 95%;} #sidebar INPUT {width: 112px; _width: 139px; _height: 28px; vertical-align: middle;} #sidebar SELECT {width: 55px; text-transform: uppercase;} #sidebar TEXTAREA {width: 290px;} #sidebar #rb {margin-left: 10px;} #sidebar #csob {margin: 0 10px 0 2px;} #sidebar .radio {width: auto; border: 0; background: transparent; margin: 0;} #sidebar .register {color: #fff !important; background: url(../images/btn_register.gif) 50% 50% no-repeat; font-weight: bold; padding: 6px 19px 12px 14px; width: auto; _width: 105px; _height: 34px; border: 0; margin-top: 5px;} #sidebar .verify {color: #5f3421 !important; background: url(../images/btn_verify.gif) 50% 50% no-repeat; font-weight: bold; padding: 6px 19px 11px 14px; width: auto; _width: 72px; _height: 34px; border: 0; margin-top: 10px; float: right;} #sidebar .order {color: #fff !important; background: url(../images/btn_order.gif) 50% 50% no-repeat; font-weight: bold; padding: 6px 19px 11px 14px; width: auto; _width: 194px; _height: 32px; border: 0; margin-top: 10px;} #order {margin: 17px 25px !important;} #order TH {width: 50%; vertical-align: middle;} #order INPUT {width: 230px; _height: 28px; background: url(../images/bginput2.gif) no-repeat #f5f5ed; border: 1px #efd0a5 solid;} #order SELECT {width: 55px; text-transform: uppercase; border: 1px #efd0a5 solid;} #order #domain {width: 163px;} #footer {width: 900px; height: 42px; font-size: 90%; color: #d0c09f; background: url(../images/footer.gif) no-repeat #834826; margin: 0 1px;} #footer P {float: right; padding: 13px 20px 0 0;} #footer #copy {float: left; padding: 13px 0 0 20px;} #footer A {color: #dedec2;} #footer A:hover {color: #fff;} .cleaner {clear: both;}