Creare pagine in stile Apple

settembre 18, 2009 | In: Web

Avete presente le pagine web come quella sopra? Nei siti web Apple sono molto comuni, vediamo come ricrearne una personale, partiremo col codice di questa pagina, quella di Genius.

Per semplificare il compito ho creato un file Zip con tutto ciò che ci serve:

DOWNLOAD

Tutto questo è possibile grazie ai CSS e a una tabella, vediamo il codice del file index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JoungerBloggers</title>
  <link rel="stylesheet" type="text/css" href="style.css"> 
  </head>
 
  <body leftmargin="0" topmargin="0" >
    <div class="box">
      <table border="0" bordercolor="#cccccc" cellspacing="0" cellpadding="0">
        <tr>
          <td width="8" height="8" valign="bottom" background="corner_top_left.gif"></td>
          <td width="684" height="8" valign="bottom" background="fill_top.gif"></td>
          <td width="8" height="8" valign="bottom" background="corner_top_right.gif"></td>
        </tr>
        <tr>
          <td width="8" height="500" align="left" background="fill_left.gif"></td>
          <td valign="top" id="content">
            <table border="0" cellpadding="0" cellspacing="0">
              <td width="193" height="136" align="left"><img width="170" height="136" alt="" border="0" src="jb logo.png"></img></td>
              <td width="444" valign="center"><h1>JoungerBloggers, il blog dei giovani bloggatori.</h1></td>
            </table>
            <h2>Che cos'&egrave  JoungerBloggers?</h2>
            Il nostro team &egrave composto da diverse persone dai 13 ai 15 anni. Chiunque volesse partecipare, pu&egrave scriverci nella pagine “richieste”, o contattarci via e-mail o Msn. Contatti: http://joungerbloggers.altervista.org/blog/contatti/            <h2>Lorem ipsum</h2>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque, massa a volutpat scelerisque, dui ipsum eleifend felis, eget viverra metus velit et ligula. Curabitur pellentesque adipiscing enim, non semper nisl aliquam vel. Aenean eu elit mauris, sit amet euismod purus. Morbi pharetra tempus erat, eu dictum lectus hendrerit id. Vivamus convallis luctus nunc at tristique. <p>Donec non leo felis, dictum vulputate ante. Vestibulum porta hendrerit mauris at iaculis. Pellentesque tortor nisi, tristique eu volutpat ut, lacinia et erat. Duis nisi neque, feugiat ut ullamcorper sit amet, condimentum eget urna. Aliquam libero augue, auctor at consequat id, sodales et lectus. Nam in urna id turpis porta luctus.</p> <p>Quisque at odio ipsum. Nam dolor risus, gravida et malesuada eu, suscipit et leo. Praesent ac ante dolor. Maecenas aliquam massa id nunc bibendum fringilla. </p><p class="last">Integer varius tellus a ante posuere porttitor. Curabitur in laoreet diam. Proin laoreet faucibus justo, id sodales odio suscipit vel. Sed vitae nibh libero, sed varius dui.  </p>
 
          </td>
          <td width="8" height="500" align="right" background="fill_right.gif"></td>
        </tr>
        <tr>
          <td width="8" height="8" background="corner_bot_left.gif"></td>
          <td width="684" height="8" background="fill_bot.gif"></td>
          <td width="8" height="8" background="corner_bot_right.gif"></td>
        </tr>
      </table>
 
    </div>
  </body>
</html>

Ovviamente possiamo personalizzarla come ci pare, sicuramente molto bella non solo per siti informatici, ma anche per i più comuni siti personali.

Potete vedere il risultato qui.

Condividi: