BOOTSTRAP②

今回は、「AdobeCafe」という架空のサイトを制作していきます。

上から、ロゴやメニューが含まれる<header>、コンテンツを含む<main>、SNSリンクやCopyrightを含む<footer>の3つのブロックに分けて制作していきます。

それでは、DREAMWAVERとBOOTSTRAPを使って、簡単に上記サイトを制作していきます。
写真等のデータを予め準備していますので、以下からダウンロードして任意の場所に解凍し、保存してください。

Dreamweaverを起動します。

「新規作成」をクリックすると下の画面が表示されます。

「新規ドキュメント」→「</>HTML」→「BOOTSTRAP」→「新規作成」をクリックします。
デザイン：部分の「□プリセットのレイアウトを含める」は必ずチェックを外しておいてください。
続いて、「作成」ボタンをクリックします。

上記作業を行うと、白紙のページが出来上がります。
ここで、一度保存をしておきます。

「ファイル」→「別名で保存」を選択します。

先ほどダウンロードしたフォルダ「adobecafe」に「index.html」というファイル名で保存します。

次にサイト登録します。
サイト登録をしておくことで、以降の処理がとても簡単になります。

「サイト」→「新規サイト」をクリックします。

サイト設定の画面が開きますので、サイト名に「AdobeCafe」と入力し、ローカルサイトフォルダーを参照します。

ルートフォルダ選択画面で、「adobecafe」フォルダを選択し、「フォルダーの選択」ボタンをクリックします。

サイト設定画面に戻りますので、「保存」ボタンをクリックします。

サイトが登録できると、画面右の「ファイルビュー」でサイト内の構造が確認できます。
新しく「css」と「js」フォルダが作成されていることが確認できます。
これは、BOOTSTRAPに必要なファイルで、Dreamwaverが自動的に必要なファイルをサイト内にコピーしてくれます。

また、index.htmlのコード内に、必要なCSSファイルやJSファイルを自動で読み込んでくれます。

現在は<title>が「Untitled Document」になっていますので、「AdobeCafe」に変更しておきましょう。

これで準備作業は完了です。

BOOTSTRAP③では、ヘッダ部分を制作していきます。

BOOTSTRAP①