ile

Tasarımı HTML5 ve CSS3′e dökmek (4) – Bileşenleri yerleştirmek

İmajları aldık, fontları yerleştirdik, css dosyamızı düzenledik. Tasarımcıdan “lorem ipsum” metinleri, navigasyon isimlerini istedik, çoğunu verdi, bazıları için de “eeah, psd verdik ya bak ordan işte” dedi. Dikkat ederseniz hala tek satır CSS kodu yazmadık. Ona da sıra gelecek. Önce tek tek imajlarımızı, menülerimizi, bileşenlerimizi yerleştirmemiz gerekiyor. Bunu böyle yapmamızdaki amaç, CSS olmadan da bütün herşeyin düzgün göründüğünü sağlama almak.

Öncelikle imajları yerleştirelim. İmajları yerleştirirken dikkat etmemiz gereken şey her img tag’inin kendi kendini kapatıyor olması ve her birnin title yani başlık özelliğine sahip olması.

<img src="img/logo-kucuk.png" title="logo" alt="logo" />

Tüm imajları bu şekilde yerleştirmemiz gerekiyor.

Daha sonra sitede gezinmeyi sağlayan navigasyonları sırasız liste şeklinde eklemeliyiz. bunları “nav” taglerinin arasına yerleştiriyoruz ki, google robotçukları bunun sitemizde gezinmeye yarayan linkleri barındıran listeler olduğunu anlasın.

Örneğin “summary-nav” dediğimiz hızlı gezinmeyi sağlayan sırasız listeyi şöyle kodlamalıyız (sıralı listede kenarda otomatik numaralar çıkar, sırasız listede ise noktalar)

<nav id="summary-nav" class="large-12 columns">
  <ul>
      <li>APPLICATION 2014</li>
      <li>REQUEST INFO</li>
      <li>SUBSCRIBE TO NEWSLETTEr</li>
      <li>SITE</li>
  </ul>
</nav>

Navigasyonları da belirtildiği gibi istediğimiz yerlere yerleştiriyoruz. Şu ana kadar elimizdeki kod şu şekilde:


<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ARTINTERNATIONAL</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<header>
<div class="row">
<div id="main-slider" class="large-12 columns">
<img src="img/main-slider.png" title="artinternational" alt="artinternational" />
</div>
</div>
<div class="row">
<nav id="summary-nav" class="large-12 columns">
<ul>
<li>APPLICATION 2014</li>
<li>REQUEST INFO</li>
<li>SUBSCRIBE TO NEWSLETTEr</li>
<li>SITE</li>
</ul>
</nav>
</div>
<div class="row">
<div id="main-logo" class="large-2 columns">
<img src="img/logo-kucuk.png" title="logo" alt="logo" />
</div>
<nav id="detail-navigation" class="large-10 columns">
<ul>
<li>ABOUT
<ul>
<li>About Artinternational</li>
<li>Media</li>
<li>Board Of Patrons</li>
<li>Gallery Selectio Committee</li>
<li>Partners In 2013</li>
</ul>
</li>
<li>VISITORS
<ul>
<li>Directions &amp; Transportation</li>
<li>How To Reach The Venue</li>
<li>Map</li>
<li>Venue</li>
<li>Art In Istanbul</li>
</ul>
</li>
<li>EXHIBITORS
<ul>
<li>Apply For 2014</li>
<li>2013 Participants</li>
</ul>
</li>
<li>PROGRAMME
<ul>
<li>Programme</li>
<li>Vip Programme</li>
<li>By The Waterside</li>
</ul>
</li>
<li>PRESS
<ul>
<li>Press</li>
<li>Accreditation</li>
<li>Press Coverage</li>
<li>Contact</li>
</ul>
</li>
</ul>

</nav>
</div>
</header>

<div class="row">
<div id="main-content" class="large-12 columns">
<h2>ISTANBUL’S LEADING INTERNATIONAL ART FAIR</h2><br/>
<p>HALIÇ CONGRESS CENTER</p>
<p><img src="img/AI_WEB-3-07.jpg" title="artinternational" alt="artinternational" />ArtInternational launched in September 2013 at the Haliç Congress Centre in Istanbul to strong acclaim. Bringing together leading international and local galleries, this leading modern and contemporary art fair in Istanbul offers unrivalled access to exciting new art from Turkey, Europe, the US, the Middle East and beyond. Drawing on its unique geographic location as a gateway between ‘East’ and ‘West’, the fair is fast becoming a cultural bridge across the global art world. In addition to the participation of leading and emerging galleries, the fair provides a programme of exhibitions, events and forums, enabling visitors to experience the rich cultural history of Istanbul alongside the flourishing local contemporary art scene developing today.
</p>
</div>
</div>
<footer>
<div class="row">
<div id="summary-footer" class="large-12 columns">
<ul>
<li>APPLICATION 2014</li>
<li>REQUEST INFO</li>
<li>SUBSCRIBE TO NEWSLETTER</li>
</ul>
</div>
</div>
<div class="row">
<div id="footer-title" class="large-2 columns"><h2>ARTINTERNATIONAL</h2></div>
</div>
<div class="row">
<div id="detail-footer" class="large-9 columns">
<h3>INTERTEKS</h3>
<p>6, Mim Kemal Öke Cad.<br/>
34367 Nisantası, Istanbul</p>

<h3>FAIR DIRECTOR:</h3>
<p>Dyala Nusseibeh<br/>
dyala@artinternational14.com</p>

<h3>ARTISTIC DIRECTOR:</h3>
<p>Stephane Ackermann<br/>
Stephane.Ackermann@montex.co.uk</p>

<h3>HEAD OF VIP RELATIONS &amp; PROGRAMMING:</h3>
<p>Isabella Icoz<br/>
isabella@artinternational14.com</p>

<h3>GENERAL ENQUIRIES:</h3>
<p>info@artinternational14.com</p>

<h3>GALLERY APPLICATIONS:</h3>
<p>applications@artinternational14.com</p>
</div>
</div>
<div class="row">
<div id="copyright" class="large-4 large-centered columns">COPYRIGHT &copy; 2013 ARTINTERNATIONAL. ALL RIGHTS RESERVED</div>
</div>
</footer>

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>

Şu anda ekrana baktığımızda hala tasarımdan çok uzağız ama yaklaştık.

Screen Shot 2014-03-07 at 01.48.17

Tüm bileşenlerimizi siteye yerleştirdik. Şimdi sıra geldi CSS’imizi yazmaya. Burada garanti ettiğimiz olay, google robotçuklarının kodu düzgün bir şekilde okuyabilmesi. Ayrıca kod hatalarımızı W3C sitesinde de kontrol ettirebiliriz. W3C sitesinin validate syntax, yani kodu doğrula aracı bulunuyor.

http://validator.w3.org/

Bu adresten, URL yani site adresi girerek, dosya yükleyerek veya doğrudan giriş yaparak HTML5 kodumuzu kontrol ettirebiliriz. (Eski HTML versiyonlarını da otomatik olarak algılayacaktır.)

Sonuç eğer şu şekildeyse, bir sonraki aşamaya yani CSS yazma aşamasına geçebiliriz:

Screen Shot 2014-03-07 at 01.51.27

 

Peki CSS’i nasıl yazacağız? O da bir sonraki yazıda…

Yorumla

Yorum