HP制作①
今月から、HP制作に取り掛かります。先日記事にて作ったワイヤーフレームを元に、架空のカフェのホームページを作っていきます。今月は、HTMLを用いて制作を行います。
まずはこちらがTOPページのコード。キービジュアルの下に「NEWS」を表示します。
こちらがキービジュアル。この下に・・・
いくつかのニュースを表示します。
続いて、「ABOUT」ページのコード。店舗紹介を載せると共に、テーブルを用いて店舗情報を掲載します。
こちらが実際のページ。店舗紹介の文章レイアウトは、のちにCSSを用いて整えていきます。
こちらは「MENU」ページのコード。基礎となるのはこのファイル(menu.html)ですが、選んだメニューを大きく表示できるようにするため各メニューを表示するためのファイルを複製(menu1.html、menu2.html、menu3.html)していきます。
こちらが実際の表示になります。各メニューの写真をクリックすると上部に大きく表示されるようになっていますが、こちらものちにCSSを用いてレイアウトを整えていきます。
今回は主にHTMLを用いてサイトを作りましたが、これだけではまだまだ見苦しい点も足りない点も多すぎるため来月はCSSを用いてよりレイアウトやデザインを整えていきたいと思います。
参考
