本講座では、WebサイトをコーディングしながらHTMLの基礎を習得します。 まずは、これから作るサイトを確認して、必要なファイルをまとめるフォルダを作りましょう。
1.制作するサイトの確認
Illustrator基礎講座で使用したデザインをコーディングしていきます。
HTMLだけでコーディングすると左のようになり、 CSSも書くと、右のようにデザインがWebページとして再現されますよ。
本講座ではHTMLの完成、上図の左側を作ります。 CSSの作成は【CSSの書き方入門 - はじめてのWEBデザイン】で解説しています。本講座を終えた後にご受講ください。
2.Webサイト制作用のフォルダを準備
WEBサイトを作るとき、適当な場所にHTMLファイルや画像を保存するとわかりにくくなります。 コーディングしていくサイトは1つのフォルダにまとめましょう。
使用素材ダウンロード
Illustrator講座ではトップページのデザインを作りました。 HTML講座ではトップページに加えて、会社概要とお問い合わせページも作成します。
コーディングに必要な画像やテキストをご用意しております。 下記よりダウンロードして、解凍して下さい。
フォルダを作る
作成するサイトの社名から、「edbase」というフォルダを作ります。 解凍した素材フォルダの中にある「images」フォルダを、丸ごと「edbase」フォルダの中に移動させてください。
赤線で囲ったような構成になっていればOKです。
