スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

サイト模写(Paul) 3 配置 テーブルを使用

3.配置 テーブルを使用 
 通常DIV等で配置する全体の配置をテーブルで配置する。

1.ヘッダ、メイン、フッタ画像作作成・配置で少しお話しましたが、
今回、背景をヘッダ、メイン、フッタとすべてバックグラウンドで繋げて表示しています。
その上にDIVを使用していろいろな要素を配置していくと、画像がずれたり背景の画像が消える等にトラブルが起きやすくなる為(解決方法があれば教えてもらいたいです。)

今回は構成にDIVを使用せずにTABLEの構成によりPaulのトップページを作成していこうと思います。


ヘッダ、フッタはあとで考えるとしてメインの部分。

このトップページの場合は、左側にお店の写真があり、右側にお店の名前とお店の紹介文があり、
右下にはメニューボタンが二つ並んでいます。
Paulソースを見ると、大きく分けてこの3つに大別されています。
しかも"Pau"lの文字と紹介文とその部分の背景はすべて一枚の画像で作られています。
Illustrator等から作成し切り抜いた、といった感じでしょうか。

tableのコードにすると以下のようになります。 
    <table width="740" border="0" cellspacing="0" cellpadding="0">
      <tr>
         <td width="350" rowspan="2">
          <img src="お店の写真.jpg" />  
         </td>
         <td width="390" >
          <img src="文字'Paul'とお店紹介文.jpg" /> 
         </td>
      </tr>
      <tr>
         <td>
            <a href="article.html"><img src="バナー1.png" /></a><br>
            <a href="list.html"><img src="バナー2.png"  /></a>
         </td>
      </tr>
    </table>

トラックバック

コメント

コメントを残す

Secret


スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。