Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj27.01.2009, 12:25 (UTC)    
Mesaj konusu: tasarımın altı-üstü ayrımı

Arkadaşlar, free template sitelerinin birinden indirdiğim kodu tasarımın altı ve üstü diye ayırabilir misiniz? Şimdiden teşekkürler.




Kod:

<!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="en" lang="en-AU">
<head>
  <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
  <meta name="author" content="pat" />
  <meta name="keywords" content="drifting, pat, OWD" />
  <meta name="description" content="OWD winter template" />
  <title>drifting v1.0</title>

  <link rel="stylesheet" type="text/css" href="css/drifting_screen.css" media="screen, tv, projection" />
  <link rel="stylesheet" type="text/css" href="css/drifting_print.css" media="print" />
</head>

<body>

<!-- Layout container starts -->
<div id="layoutBox">

  <!-- HEADER: controls the header layout, images, title and subTitle. -->
  <div id="headerBox">
    <div id="headerLeftBox">
      <span class="title">
        drifting v1.0
      </span>
      <br />
      <span class="subTitle">
        because shovelling hurts
      </span>
    </div>
    <div id="headerRightBox">
      &nbsp;
    </div>
  </div>

  <!-- MENU: include as many submenus as you want.  Menu groups should begin with a
       <h1> and then all menu links need to be defined in a <div class="menuGroup">.
       The <span class="noDisplay"> | </span> after each link only needs to be included
       if this site will be loaded in a text only browser -->
  <div id="menuBox">
    <h1>
      info
    </h1>
    <div class="menuGroup">
      <a href="#origins" title="how it started"><img src="images/menu_icon.gif" alt="menu item 1" /> origins</a><span class="noDisplay"> | </span>
      <a href="#template" title="about the template"><img src="images/menu_icon.gif" alt="menu item 2" /> template</a><span class="noDisplay"> | </span>
      <a href="#next" title="what's next?"><img src="images/menu_icon.gif" alt="menu item 3" /> next</a><span class="noDisplay"> | </span>
      <a href="http://openwebdesign.org/userinfo.phtml?user=snop" title="OWD profile / contact"><img src="images/menu_icon.gif" alt="menu item 4" /> contact</a><span class="noDisplay"> | </span>
    </div>

    <h1>
      sources
    </h1>
    <div class="menuGroup">
      <a href="http://www.deviantart.com" title="mmmm art"><img src="images/menu_icon.gif" alt="menu item 1" /> deviantART</a><span class="noDisplay"> | </span>
      <a href="http://www.iso50.com" title="vector and design work"><img src="images/menu_icon.gif" alt="menu item 2" /> ISO50</a><span class="noDisplay"> | </span>
      <a href="http://www.number27.org/" title="information design"><img src="images/menu_icon.gif" alt="menu item 3" /> NUMBER27</a><span class="noDisplay"> | </span>
      <a href="http://www.2advanced.com" title="flash web desgn"><img src="images/menu_icon.gif" alt="menu item 4" /> 2advanced</a><span class="noDisplay"> | </span>
      <a href="http://www.trevorvanmeter.com/flash.html" title="pixel art and flash"><img src="images/menu_icon.gif" alt="menu item 5" /> TVM</a><span class="noDisplay"> | </span>
    </div>

    <!-- NEWS: define news chunks in <p> and use <h2> for the date/title -->
    <h1>
      news
    </h1>
    <div class="newsGroup">
      <h2>2005.02.13</h2>
      <p>
        Done and done.
      </p>
      <h2>2005.02.10</h2>
      <p>
        Internet Explorer is going to give me an <a href="http://www.petitiononline.com/msiepng/petition.html" title="PNG transparency">ulcer</a>.
      </p>
      <h2>2005.02.07</h2>
      <p>
        The look is coming together.  Now onto the header images.
      </p>
    </div>

    <!-- MENU FOOTER: could include a site search field here -->
    <div class="menuFooter">
     &nbsp;
    </div>

  </div>

  <!-- MAIN CONTENT : to add new headings, include a <h1> and then as many <p> blocks
       as you'd like.  <h2> will create subheadings. To finish a section, include a
       <br/> to clearly define it. -->
  <div id="mainContent">
    <a name="origins"></a>
    <h1>origins</h1>
    <p>
      My first shot at a pure <acronym title="Cascading Style Sheet">CSS</acronym> design layout.  It made me really appreciate Flash and only doing things once.  The layout is pretty traditional; news and menu to the left, content to the right.  All classes have meaningful names and should be pretty easy to change.  If you want a clean version, go <a href="clean.html" title="clean drifting v1.0">here</a>.  This template also includes a layout for print media that looks like <a href="print.html" title="print view of drifting v1.0">so</a>.
    </p>
    <br />

    <a name="template"></a>
    <h1>template</h1>
    <h2>compatibility</h2>
    <img src="images/stadium.jpg" alt="image example" width="201" height="121" title="image example" class="imgRight"/>
    <p>
      This template is a pure <acronym title="Cascading Style Sheet">CSS</acronym> layout. It validates successfully with <a href="http://www.w3.org" title="World Wide Web Consortium">www.w3.org</a> as
      <acronym title="eXtensible Hypertext Markup Language">XHTML</acronym> 1.0 Strict.  Since it's tableless, and the element/font sizes are defined
      relatively, it gracefully increases/decreases in size for different resolutions and text sizes (I designed it at <acronym title="measure of screen resoluation in pixels: width by height)">1280x1024</acronym> so I still think it looks best there at <acronym title="firefox: ctrl+0">normal</acronym> font size).  It renders consistently in:
    </p>
    <ul>
      <li><a href="http://www.mozilla.org/products/firefox/" title="download Firefox">Firefox 1.0</a></li>
      <li><a href="http://www.netscape.com" title="download Netscape">Netscape 7.02</a></li>
      <li><a href="http://www.opera.com" title="download Opera">Opera 7.54</a></li>
      <li><a href="http://www.microsoft.com/windows/ie/default.mspx" title="download Internet Explorer">Internet Explorer 6.0</a></li>
    </ul>
    <h2>thanks</h2>
    <p>
      There's no way I would've finished this without all the code examples on <acronym title="Open Web Design">OWD</acronym>.  Much appreciated for helping me figure out how to get this template to work in <acronym title="Damn you...">IE</acronym>.  Also thanks to <acronym title="ericlussier (at) gmail (dot) com">Eric</acronym> for the example pic I mangled to the right.
    </p>
    <br />

    <a name="next"></a>
    <h1>next</h1>
    <p>
      Once I finish my own site, I think my next template will be for spring.  It's been a looooong winter and I need to see other colours outside besides white and grey. That, and I'm tired of the cold and it's <a href="http://www.pdga.com" title="Professional Discgolf Association: Best. Game. Ever.">discgolf</a> time. If you have any comments or questions, feel free to <a href="http://openwebdesign.org/userinfo.phtml?user=snop" title="OWD profile / contact">send</a> them my way.
    </p>
    <br />

    <!-- FOOTER: whatever you want in here - maybe a last updated or breadcrumb? -->
    <div class="footer">
      valid <a href="http://validator.w3.org/check/referer" title="validate markup">XHTML</a> / <a href="http://jigsaw.w3.org/css-validator/check/referer" title="validate CSS">CSS</a> <br />
      last updated / copyright here | design by <a href="http://openwebdesign.org/userinfo.phtml?user=snop" title="OWD profile / contact">snop</a>
    </div>
  </div>

  <!-- BUG FIX: This corrects another IE rendering bug....  You notice it only when the menu container length is
       greater than the main content container.  Without this, when an a:hover is triggered in the main container,
       IE reflows the page and cuts off the menu at the bottom of the main container. -->
  <div class="spacer">
  </div>

</div>
<!-- Layout container ends -->

</body>
</html>

______________


En son bizimogretmen tarafından 27.01.2009 18:07:42 tarihinde değiştirildi, toplam 1 kere değiştirildi
Mesaj27.01.2009, 18:08 (UTC)    
Mesaj konusu:

Merhaba,

Şu Başlığı İnceleyerek Tasarımı Sitenize Uygulayabilirsiniz ;
Arrow http://www.bedava-sitem.com/forum/viewtopic.php?t=25694

İyi Eğlenceler.
Mesaj27.01.2009, 18:26 (UTC)    
Mesaj konusu:

ironarchives yazmış:
Merhaba,

Şu Başlığı İnceleyerek Tasarımı Sitenize Uygulayabilirsiniz ;
Arrow http://www.bedava-sitem.com/forum/viewtopic.php?t=25694

İyi Eğlenceler.



Sevgili ironarchives, yukarıda vermiş olduğunuz linki daha önce inceledim. Koduda orada anlatılanlar doğrultusunda aldım. Ancak tasarımın üzerindeki yazı - tasarımın altındaki yazı ve CSS Kod bölümlerine ayırmasını bilmiyorum. Onun duşundakileri yapabilirim. Saygılarımla...
______________
Mesaj27.01.2009, 18:29 (UTC)    
Mesaj konusu:

Şu Başlığı İnceleyin ;
Arrow http://www.bedava-sitem.com/forum/viewtopic.php?t=81330

Kolay Gelsin.
Mesaj27.01.2009, 18:31 (UTC)    
Mesaj konusu:

Çok teşekkür ederim.
______________
Mesaj27.01.2009, 18:32 (UTC)    
Mesaj konusu:

bizimogretmen yazmış:
Çok teşekkür ederim.


Rica Ederim.
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu