„Méně je často více”
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í
- Objednáte nakódování a zašlete nám zdrojový PSD soubor
- Provedeme nakódování designu v dohodnutém termínu
- 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">
© 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>
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;}