Kódování PSD do XHTML

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.

Postup při kódování

  1. Objednáte nakódování a zašlete nám zdrojový PSD soubor
  2. Provedeme nakódování designu v dohodnutém termínu
  3. Zašleme Vám nakódovaný design s fakturou na uvedený e-mail

Nakódovaný design má těchto 5 hlavních vlastností

  • čistý, přehledný, sémantický a validní XHTML kód a CSS
  • správné zobrazení v nejpoužívanějších prohlížečích
  • korektní struktura XHTML dokumentu z hlediska SEO
  • nízká datová velikost kódu díky nepoužívání nadbytečných konstrukcí a zbytečností
  • nízká datová velikost nařezaných obrázků díky optimalizaci pro webové použití

Ukázky kódu

XHTML

<?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">
                        &copy; 2009 Atlas Domén &bull; <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>        

CSS

/* 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;}