バンフートレーニングスクール Illustrator/Photoshop/InDesign/Web作成が学べるスクール

03-5229-8285

ホームページ制作実践講座

コースの概要

Adobe Dreamweaver

Adobe Dreamweaver(アドビ ドリームウィーバー)を使ったホームページの制作方法を3時間×4回のレッスンで学ぶ講座です。
印刷会社の研修部署が実際の社員研修のカリキュラムをベースに作り上げた講座で、未経験の方でもしっかり基礎が身に付きます。

ドリームウィーバーとは?

Adobe Dreamweaverは、Adobe社が提供しているホームページソフトで、以下のようなことが行えます。

  • HTMLやCSSのソースを手で入力せずにサイトが作れる
  • ページ数の多いサイトをテンプレートで効率よく管理
  • スマートフォンに対応したレスポンシブサイトの作成

趣味のサイト作成ではなくプロ向けのツールで、Webサイト制作現場で圧倒的なシェアを誇っています。

レッスンの内容

ホームページ制作実践講座の4回のレッスンでは、それぞれ以下のような内容が学べます。

ホームページ制作実践入門

初回に受講していただく「入門」のレッスンでは、ドリームウィーバーを初めて使う方向けに、このソフトの画面概要、基本操作の練習から行います。
サイト制作のワークフローもここで詳しく説明します。

▼内容を詳しく見る

Dreamweaverの概要と画面構成

ドリームウィーバーの画面を実際に操作しながら、各部の役割を説明します。

文章のマークアップ

文章構造をブラウザソフトに伝えるためのマークアップ作業を行います。
メニューからマークアップするもの、ショートカットキーで簡単にマークアップできるもの、いろいろ講師のおすすめ方法をご紹介していきます。

驚くほどのスピードでマークアップできるようになります。

画像の挿入

画像をページ内に挿入します。

画像を表示するだけでなく、Webアクセシビリティの観点でも大切な代替テキストの入れ方などもしっかりおさえていきます。

DIVボックスの作成

レイアウトの骨組みを作るためのDIVボックスを作成します。

レイアウトの完成図を見て、どのようなボックス構成がいいのか考えながら作成していきましょう。

リンクの設定

ページ内の文字列や画像にリンクを設置していきます。

ドリームウィーバーにはリンクの設置方法がいくつかあるので、すべてご紹介していきます。

自分に合ったリンク設定を見つけてください

▽このレッスンで学べること

  • サイト制作のワークフロー
  • 新規ファイルの作り方
  • 文章へのマークアップ
  • 画像の挿入
  • DIVボックスの作成
  • リンクの張り方

ホームページ制作実践A

「A」のレッスンでは、CSSによる装飾を中心で行います。

▼内容を詳しく見る

CSSの細分化

リセット用、サイト全体用、カテゴリ用などCSSを細分化して組み合わせて利用する方法をご紹介します。

ドリームウィーバーでは複数のCSSファイルを読み込んだ場合でも効率よく装飾を行うことができるので、その方法を学びます。

フロート

フロート機能を使った文字の回り込みやナビゲーションを作成します。

フロートはレイアウトの幅をグッと広げてくれますのでここでしっかり覚えてしまいましょう。

絶対配置

CSSのpositionプロパティを利用した絶対配置のレイアウトを練習します。

絶対配置を覚えるとかなり自由度の高いレイアウトが作れるようになります。

CSSによるロールオーバー

CSSを使ったロールオーバーの実装方法をご紹介します。

リンクにロールオーバーの設定を行うと、ナビゲーションの見やすさが大幅にアップします。

▽このレッスンで学べること

  • CSSの作成と読み込み
  • フロートによる回り込み
  • 絶対配置
  • CSSスプライト
  • 画像置換

ホームページ制作実践B

「B」のレッスンでは3カラムの作成、およびテンプレートの作成をおこないます。

▼内容を詳しく見る

3カラムの作成

1回目のレッスン(入門)で作成したDIVボックスを使って3段組みのレイアウトを作成します。

複数のDIVボックスをコントロールするにはIDとクラスを上手に使うのがポイントです。

テンプレートの作成

同じデザインのページを複数作るときに力を発揮するのがドリームウィーバーのテンプレート機能です。

テンプレートを元に作成を行うと、後の更新管理が劇的に効率よくなります。

このレッスンでは、2カラムのページを作成し、それを元にテンプレートを登録するまでの流れを学習します。

▽このレッスンで学べること

  • 3カラムの作成
  • CSSのグラデーション指定
  • 崩れない余白の指定方法
  • 2カラムレイアウトの作成
  • テンプレートの登録

ホームページ制作実践C

「C」のレッスンは、トップページ以外の下層ページをいっきに作り上げていきます。

▼内容を詳しく見る

テンプレートを元にしたページ作成

前回のレッスンで登録したテンプレートを元に下層のページを作成していきます。

テーブルの作成

下層ページの価格表や製品仕様表を通してテーブルの作成方法を学びます。

ドリームウィーバーでのテーブル作成にはちょっとした注意点があるので、そのあたりにも触れていきます。

ギャラリー調ページの作成

ギャラリーをイメージしたページレイアウトの作成を行います。

ボックスをCSSでしっかりコントロールしながら美しいレイアウトを作成しましょう。

レスポンシブWebデザイン

スマートフォンに対応したレイアウト技術である「レスポンシブWebデザイン」を学びます。

ここまでの学習で作成してきたページを実際にレスポンシブ化しながらポイントを押さえていきましょう。

▽このレッスンで学べること

  • テンプレートからのページ作成
  • テンプレートの修正
  • テーブル作成
  • CSVファイルの取り込み
  • ギャラリー調ページの作成
  • レスポンシブWebデザイン

レッスン受講の流れ

この講座は、実際のサイト制作の流れで授業が進行していきます。そのため、以下の通り、「入門」→「A」→「B」→「C」の順での受講をおすすめいたします。

受講の流れ

お申込み

ホームページ制作実践講座は、以下からお申込みいただけます。

ホームページ実践講座を受講

全4回のレッスンを受講

ドリームウィーバーを使ったホームページの作り方が学べる講座で、「入門」「A」「B」「C」4つのレッスンを受講していただけます。
4回のレッスン中、2レッスンは再受講で受けなおしていただくことが可能です。
→再受講について

講座名 ホームページ実践講座
レッスン回数 4回
学習時間 12時間(3時間×4回)
対応OS Windows / Macintosh
価格(税別) 42,000円(税込:45,360円)

ホームページ実践講座(全4回)に申し込む

その他ホームページ実践講座が学べるコース

ホームページ制作実践と他の講座を組み合わせた料金お得なパックやコースをご用意いたしました。

WEBパック

ホームページ制作の基礎と実践をセットにしたパックです。

HTML、CSSのコーディングから、ドリームウィーバーを使ってのサイト制作までを一通り学べるパックです。

→このパックに含まれる講座

  • - ホームページ制作(基礎)講座
  • - ホームページ制作(実践)講座

このパックの詳細を見る

DTP&WEBマスターコース

バンフートレーニングスクールの常設講座がすべて学べるコースです。

印刷物からホームページの制作まで行えるオールラウンドクリエイターを目指す方向けのコースです。

→このコースに含まれる講座

  • - イラストレーター講座
  • - フォトショップ講座
  • - イラストレーター&フォトショップ実践講座
  • - インデザイン講座
  • - ホームページ制作基礎講座
  • - ホームページ制作実践講座

このコースの詳細を見る

▲トップ

無料体験へのお申込み

バンフートレーニングスクールでは3種類の無料体験をご用意しております。
ご希望の体験を選択していただくと詳細とお申込みのページへ移動します。

ポストカード制作

イラストレーターとフォトショップを使ってのポストカード制作体験です。作成したポストカードはお持ち帰りいただけます。

パンフレット制作

インデザインを使ってのパンフレット制作体験です。文字と画像の流し込みからページ番号設定、文字への装飾まで行います。

ホームページ制作

WindowsやMacintoshでHTMLを記述してホームページを作成します。ページの基本である文字、画像、リンクの設定を行います。

資料のご請求

スクールのパンフレットを画面上でご覧いただけます。

パンフレット(PDF)を今すぐ見る

パンフレットの郵送をご希望の方は以下のフォームよりご請求ください。

お名前必須
フリガナ必須
ご住所必須
-
メールアドレス必須
備考

下記、プライバシーポリシーをお読みいただき、ご同意いただいた上で次の画面にお進みください

プライバシーポリシーを開く

同意して次へ