
この講座でどのようにしてホームページサイトを制作するか、その手順を理解し作業の見通しと制作の意欲を高めます。
講座に進む前に練習素材(Training_Site.zip)をダウンロードしておいてください。
DreamWeaverの必要性を理解するために、簡単な実験を行います。この実験でhtml言語とDreamWeaverの関係について理解します。
DreamWeaverの操作の基本的なことだけを理解します。今後の作業で必要になる基本的なことだけなので飽きることはありません。
新規ページの作り方を説明します。
新しく作ったページの保存の方法を理解します。
サイトの定義の方法を理解し、新しくこれから作るサイトの定義を行います。ここではローカルサイトの定義方法を理解します。
DreamWeaverのファイルパネルからページを開き、ファイルパネルの役割と使い方を理解します。
これから作るページの完成したものを開いて、その構成を説明します。実際に何をつくるのかを理解し、今後の作業の見通しを持つことができます。
CSSスタイルシートがサイトの中でどんな役割をしているのか、サンプルのページを使って簡単な実験を行い、スタイルシートの役割を理解します。
CSSスタイルシートとhtmlページの関係を理解します。
これから作るページの画像やページをサイトフォルダの中に準備します。
サイトの設定をこれからの作業に合わせて変更し、新しいページの文字コードを変更して保存します。これで新規にページを作る準備が整います。
新規スタイルシートをつくり、ページにリンクさせます。スタイルシートをどのようにページにリンクさせるかを理解します。
body要素を変更して、bodyがどんな働きをしているのかを理解します。併せてスタイルシートのプロパティを書き替えることでページがどう変わるかを具体的に把握します。
body要素を今回制作するページに合わせて細かく設定します。ここでページ全体の複雑な背景の作り方を理解します。
ページの内容を定義するcontainer要素を挿入します。ページにdivタグを使ってboxを挿入する方法を理解します。
挿入したcontainer要素のCSSルールを定義します。はじめて作ったboxのルール定義をDreamWeaverのCSSデザイナーで行うことでCSSのルール定義の方法を理解します。
CSSのプロパティを変更することでページをディスプレイ中央に表示させる技術を学びます。
containerの挿入と設定を順序を変えて行い、CSSでは同じ結果になることを理解します。これによって今後のページ制作を効率的に行うことができる技術を身につけます。
header, content, footerの3つのboxをページ内に配置します。ソースコードを使って効率的に作業を進めます。
headerを設定して、背景のbodyと一体感のあるデザインになるように細かくCSSルールを定義します。CSSのプロパティを細かく調整することで完全に一体化されたデザインができることを学びます。
headerの中のLogo_AreaとNavi_Areaを配置し、おおまかに設定します。ここでは2つの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ルール定義を行います。
サイドナビのナビ項目を文字入力します。
入力した文字を見だし2に設定し、ulとh2のCSSルール定義をします。
サイドナビのナビ項目にロールオーバーイメージを設定します。
サンプルのページを参照しながら、Main_Boxがどんな要素でできているか、どう制作すればいいかを確認します。
MainBox_Itemの部分をマークアップします。このステップではマークアップという制作方法を理解します。
タイトルの部分をCSSルール定義します。背景に画像を使ったデザインの方法も学びます。
画像とその説明のキャプチャーを分離して並列に並べてレイアウトする方法を学びます。
ページ全体の本文を設定するpタグを再定義して、デザインの崩れを修正します。
MainBox_Newsをマークアップします。この作業ではページ内で同じタグを何度も使ってレイアウトを整える方法を練習します。
記事の文章内のテキストにリンクを設定します。リンク部分は初期設定とは違った表示になるようaタグを再設定します。
classとidの違いについて学びます。
写真ばかりで構成されたBanner_Boxの制作をします。画像へのリンクの設定方法、画像を複数配置するときのレイアウト方法を練習します。
ページの最下部のfooterを定義します。
完成したページをブラウザで表示して確認します。インターネットエクスプローラで見られるレイアウトの崩れを修正し、対処方法を理解します。
ページ全体を確認し、見落としていた不具合を修正します。このステップでページは完成します。
サーバー側のリモートサイトを設定し、内容を転送する準備をします。
制作したページと画像などサイトの構成要素すべてをサーバーに転送しページを公開します。公開したページがきちんと表示されるかサーバーに接続して確認します。
サーバー側のリモートサイトとパソコン側のローカルサイトを同期させる方法を学びます。これでホームページサイトの開設が完了します。
このコースはAdobe DreamWeaverを使ってホームページサイトをゼロからつくる方法を解説しています。動画で示される手順通りに進めればご自分のサイトをオープンできます。この講座ではDreamWeaverを通して制作しますが、DreamWeaverの使い方と同時にhtmlのしくみやコードを使ったページの制作方法も解説しています。DreamWeaverだけを使ってページをつくるよりも遙かに効率的にページ制作ができるスキルが身につくよう解説しています。
このチュートリアルでサイトを白紙からつくろう
・この講座だけで白紙からホームページサイトを完成し、公開する手順をすべて解説しています。
・ゼロからページをつくるための材料がすべてダウンロードできます。
・自由自在にレアウトできるCSSの定義の方法をわかりやすく解説。
・コードを直接書き替えることで簡単に効率的に進められるところはDreamWeaverに頼らずソースコードを編集。
・DreamWeaverの最新の機能を使って、トレンディなデザインができるよう解説。
WEBデザイナーへの道をひらこう
ページサイトのデザインはWEBの基礎的なしくみが分かっていないと進みません。これはDreamWeaverでページを作るだけでは身につかないことです。この講座ではDreamWeaverでページを作りながら、それを入口としてWEBやhtmlの基礎的なことを同時に解説しています。
学習内容
48本のレクチャーを合計5時間23分のビデオで解説しています
最初にこれから制作するページの完成したものを検討し、制作の順序や注意しなければいけない点などを説明します。
CSSの基本やWEBのしくみなど基本的な部分は説明だけでなく実際に実験しながら説明します。これにより基礎的なことがわかるので今後の工程が大幅に楽になります。
サイトページのパーツをひとつひとつ順番に制作し、積み重ねていくことでページが目に見える形で完成していきます。成果がわかるので飽きることがありません。
初心者が間違いそうな部分は特に詳しく説明。また実際に間違いの事例を制作中のページで作って、後で修正することで何が悪かったのかが分かるように説明しています。
WEBの世界で最新のテクニックを使い、同じ結果でも新しい手法で行っています。
最後にサーバーに転送し、検証するまでの全部の工程を解説しているので初めての方がページを公開できるまでのスキルを持つことができます。