サイトの定義の方法を理解し、新しくこれから作るサイトの定義を行います。ここではローカルサイトの定義方法を理解します。

DreamWeaverのファイルパネルからページを開き、ファイルパネルの役割と使い方を理解します。

これから作るページの完成したものを開いて、その構成を説明します。実際に何をつくるのかを理解し、今後の作業の見通しを持つことができます。

CSSスタイルシートがサイトの中でどんな役割をしているのか、サンプルのページを使って簡単な実験を行い、スタイルシートの役割を理解します。

CSSスタイルシートとhtmlページの関係を理解します。

これから作るページの画像やページをサイトフォルダの中に準備します。

サイトの設定をこれからの作業に合わせて変更し、新しいページの文字コードを変更して保存します。これで新規にページを作る準備が整います。

新規スタイルシートをつくり、ページにリンクさせます。スタイルシートをどのようにページにリンクさせるかを理解します。

body要素を変更して、bodyがどんな働きをしているのかを理解します。併せてスタイルシートのプロパティを書き替えることでページがどう変わるかを具体的に把握します。

body要素を今回制作するページに合わせて細かく設定します。ここでページ全体の複雑な背景の作り方を理解します。

ページの内容を定義するcontainer要素を挿入します。ページにdivタグを使ってboxを挿入する方法を理解します。

挿入したcontainer要素のCSSルールを定義します。はじめて作ったboxのルール定義をDreamWeaverのCSSデザイナーで行うことでCSSのルール定義の方法を理解します。

CSSのプロパティを変更することでページをディスプレイ中央に表示させる技術を学びます。

containerの挿入と設定を順序を変えて行い、CSSでは同じ結果になることを理解します。これによって今後のページ制作を効率的に行うことができる技術を身につけます。

header, content, footerの３つのboxをページ内に配置します。ソースコードを使って効率的に作業を進めます。

headerを設定して、背景のbodyと一体感のあるデザインになるように細かくCSSルールを定義します。CSSのプロパティを細かく調整することで完全に一体化されたデザインができることを学びます。

headerの中のLogo_AreaとNavi_Areaを配置し、おおまかに設定します。ここでは２つのboxが同じ高さで左右に並ぶレイアウトの方法を学びます。

配置したLogo_Areaに画像を挿入し、位置を整えます。画像の挿入方法と高さを細かく設定するためにCSSのプロパティを調整する方法を理解します。

Navi_Areaを定義します。画像をクリックしてメールを受け取るリンクを設定し、画像の水平位置をマージンで調節する方法を学びます。

Navi_Area内にグローバルナビを作ります。ulとli要素の設定方法を学び、リンクの設定された文字の大きさや装飾を変える方法を学びます。

ナビ項目を一行で表示し、バランスよく配置するCSSルール定義の方法を理解します。

リンク項目にリンクを設定し、マウスのオン・オフで文字の色が切り替わるhoverで少し凝ったリンクを設定します。

様々なブラウザでページを表示させブラウザで確認できるように設定します。

headerの下にSide_Navi, Main_Box, Banner_Boxを配置します。ソースコードの編集で早く効率的に作業することを学習します。

先に配置したSide_Navi, Main_Box, Banner_BoxのCSSルール定義を行います。

サイドナビのナビ項目を文字入力します。

入力した文字を見だし２に設定し、ulとh2のCSSルール定義をします。

サイドナビのナビ項目にロールオーバーイメージを設定します。

サンプルのページを参照しながら、Main_Boxがどんな要素でできているか、どう制作すればいいかを確認します。

MainBox_Itemの部分をマークアップします。このステップではマークアップという制作方法を理解します。

タイトルの部分をCSSルール定義します。背景に画像を使ったデザインの方法も学びます。

画像とその説明のキャプチャーを分離して並列に並べてレイアウトする方法を学びます。

ページ全体の本文を設定するpタグを再定義して、デザインの崩れを修正します。

MainBox_Newsをマークアップします。この作業ではページ内で同じタグを何度も使ってレイアウトを整える方法を練習します。

記事の文章内のテキストにリンクを設定します。リンク部分は初期設定とは違った表示になるようaタグを再設定します。

classとidの違いについて学びます。

写真ばかりで構成されたBanner_Boxの制作をします。画像へのリンクの設定方法、画像を複数配置するときのレイアウト方法を練習します。

ページの最下部のfooterを定義します。

完成したページをブラウザで表示して確認します。インターネットエクスプローラで見られるレイアウトの崩れを修正し、対処方法を理解します。

ページ全体を確認し、見落としていた不具合を修正します。このステップでページは完成します。

サーバー側のリモートサイトを設定し、内容を転送する準備をします。

制作したページと画像などサイトの構成要素すべてをサーバーに転送しページを公開します。公開したページがきちんと表示されるかサーバーに接続して確認します。

サーバー側のリモートサイトとパソコン側のローカルサイトを同期させる方法を学びます。これでホームページサイトの開設が完了します。