今回より「製品紹介」ページ(product.html)を作成していきます。 「会社概要」ページ(profile.html)や「お問合せ」ページ(contact.html)を作成したときと同様に、HTMLファイルの複製から始めましょう。
「会社概要」ページ(profile.html)をコピーして、新しいHTMLファイルを作ろうと思います。 複製してできたHTMLファイルの名前はproduct.htmlとしてください。このproduct.htmlを「製品紹介」ページとして作っていきます。
もちろん、ファイルの複製ではなく、テキストエディタでHTMLファイルをゼロから新規作成しても構いません。 この場合には、文字コードをUTF-8にして、ファイル名をproduct.htmlにして新規保存します。
product.htmlでは、画像ファイルとしてimg_product.png、product0001.png、product0002.pngを使用します。 ダウンロードしたサンプルファイルからこれらの画像ファイルをコピーして、あらかじめimagesフォルダに追加しておきます。
product.htmlのHTMLソースを以下の内容にしてください。 以下のHTMLソースは、このチュートリアルで今までに学んだテクニックのみを使用しており、特に新しいHTMLタグなどは登場しません。 コピーしたファイルの内容を部分的に書き換えても良いですし、復習のつもりで、すべて手打ち入力しても良いでしょう。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="base.css"> <title>製品紹介|ウェブサンプル株式会社</title> </head> <body> <div id="pagebody"> <!-- ヘッダ --> <div id="header"> <h1><a href="index.html"><img src="images/logo.png" alt="ウェブサンプル株式会社"></a></h1> </div> <!-- メインメニュー --> <ul id="menu"> <li><a href="index.html">ホーム</a></li> <li><a href="product.html">製品紹介</a></li> <li><a href="profile.html">会社概要</a></li> <li><a href="contact.html">お問合せ</a></li> </ul> <!-- ヘッダ画像 --> <div id="img_subpage"> <img src="./images/img_product.png" alt="製品紹介"> </div> <!-- サブメニュー(左カラム) --> <div id="submenu"> <h2>製品紹介</h2> <ul> <li><a href="#info0001">個人向け製品</a></li> <li><a href="#info0002">法人向け製品</a></li> <li><a href="#info0003">紹介ビデオ</a></li> </ul> </div> <!-- インフォメーション(右カラム) --> <div id="info"> <h3 id="info0001">個人向け製品</h3> <p> <img src="images/product0001.png" alt="個人向け製品のイメージ画像" class="infoimg_subpage"> あいうえおかきくけこさしすせそ、(中略) </p> <hr> <h3 id="info0002">法人向け製品</h3> <p> <img src="images/product0002.png" alt="法人向け製品のイメージ画像" class="infoimg_subpage"> あいうえおかきくけこさしすせそ、(中略) </p> <hr> <h3 id="info0003">紹介ビデオ</h3> <hr> </div> <!-- フッタ --> <div id="footer"><small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small></div> </div> </body> </html>
保存したらブラウザで表示してみましょう。以下のような画面になれば成功です。
「紹介ビデオ」のところはまだ何も記述していないので、動画は掲載されていない状態です。 次回、動画の掲載に挑戦してみましょう。
<前へ | 目次へ | 次へ> |