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

03-5229-8285

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

コースの概要

Adobe Dreamweaver

スマートフォンやタブレットにも対応したレスポンシブWebデザインでのページ制作を学ぶ講座です。ツールとしてAdobe Dreamweaver(アドビ ドリームウィーバー)を使いますが、すべてソースコードをご紹介しますので、このソフトをお持ちでない方でも大丈夫です。
基礎講座を受け終えた方のさらなるステップアップとしておススメな講座です。

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

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

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

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

レッスンの内容

ホームページ制作実践講座の4回のレッスンでは、スマートフォン、タブレット、PC、どれで見てもレイアウトが崩れない「レスポンシブWebデザイン」でのサイト制作のテクニックを学びます。このレッスンでは以下の2種類のページを作成します。

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

初回に受講していただく「入門」のレッスンでは、スマートフォンに対応することの重要性をお話します。その後授業で使っていくドリームウィーバーのセッティングをおこなったあと、HTMLページの作成に入ります。

このレッスンでは以下のことが学べます。

  • サイトをスマホ対応にするいくつかの方法
  • ドリームウィーバーの基本的な使い方
  • 文章へのマークアップ
  • 画像の挿入
  • リンクの張り方
  • CSSファイルの作成と読み込み

スマホ対応サイト制作の基礎知識

スマートフォン対応のサイトを作る方法には大きく分けて3つの方法があります。

この章ではその3つの方法をご紹介し、このレッスンを通して習得していただくレスポンシブWebデザインがどういったものなのかを説明していきます。

Dreamweaverの準備

レッスンではツールとしてAdobeのドリームウィーバーというアプリケーションを使います(内容的にはお持ちでない方でも問題ないようになっています)

ここではDreamweaverの画面構成と基本操作をお伝えします。

文章のマークアップ

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

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

画像の挿入

JPEG、PNG、GIF、SVGといった画像形式の説明をおこなった上で画像をページに挿入します。画像を表示するだけでなく、Webアクセシビリティの観点でも大切な代替テキストの入れ方などもしっかりおさえていきます。

リンクの設定

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

サイト内ページへのリンク、外部サイトへのリンクをそれぞれ設置し、リンク先を別ウインドウで開く方法、同一ページ内を移動するリンクなどの指定もおこないます。

CSS

ページの装飾をおこなうためのCSSファイルを作成します。また、ブラウザのデフォルトスタイルをリセットするためのリセットCSSもページに読み込みます。

ホームページ制作実践A

「A」のレッスンでは、CSSの設定を中心にスマートフォン、タブレット、PCなどの様々な画面幅のデバイスに対応するために「リキッドレイアウト」の手法について学習します。スマートフォン対応の第一歩はここからです。

このレッスンでは以下のことが学べます。

  • viewportの設定
  • リキッドレイアウト
  • アイコンフォントの利用
  • スライドショーの設置
  • アコーディオンの実装

スマートフォン対応の準備

ここからいよいよスマートフォン対応について学びます。

PCで制作している時にはどのように表示の確認をするのか?また、スマートフォンに対応したサイトを作るときに欠かせないタグの設定などをおこないます。

リキッドレイアウト

ウインドウサイズが広くても狭くても読みやすくサイズが変動するレイアウトがリキッドレイアウトです。
ウインドウ幅が狭い時にはコンテンツがはみ出さないように、ウインドウ幅が広い時にはコンテンツ幅が広がりすぎないようにしながらリキッドレイアウトでページを作成していきます。

アコーディオンの実装

マウスのクリックで開閉するアコーディオンボックスを作成します。

ページのボリュームが多く、ページが長くなりすぎてしまう、と感じた際に使うと効果的です。CSSを使ってボックスや文字に影をつける方法もここでご紹介します。

ホームページ制作実践B

「B」のレッスンでは、ウインドウサイズによって幅が変化する「レスポンシブWebデザイン」について学びます。

この手法を習得することで、PC、スマートフォン、タブレットといったデバイスに依存しないホームページを作れるようになります。

このレッスンでは以下のことが学べます。

  • レスポンシブWebデザイン
  • メディアクエリ
  • ウインドウ幅で変化するデザイン

レスポンシブWebデザイン

ウインドウの幅によってデザインが切り替わるレイアウトのことを「レスポンシブWebデザイン」と呼びます。

ここではレッスン「A」で作成したリキッドレイアウトのページをレスポンシブWebデザインに切り替えてく方法をご紹介します。

メディアクエリ

レスポンシブWebデザインは、ウインドウの幅が変わった時に適用されるCSSが切り替わることで実現します。

このCSSの切り替えには「メディアクエリ」という機能が必要不可欠です。

メディアクエリがどういった機能なのか?を理解していただくために最初は簡単な例で練習をしていきます。

ウインドウ幅で変化するデザイン

本格的にレスポンシブWebデザインを実装していきます。

ウインドウ幅によって横並び、縦並びが切り替わるナビゲーションやバナー、ウインドウ幅によって出現する文字や画像の設定など、細かい指定をいろいろとおこなっていきます。

ホームページ制作実践C

「C」のレッスンでは、サイトをコーディングするのに覚えておくと便利な機能をご紹介します。

このレッスンでは以下のことが学べます。

  • コードビューの便利機能
  • emmetによる高速コーディング
  • bootstrapによるページの作成

コードビューの機能

Dreamweaverのコードビューにはコーディングの手助けをしてくれる「入力補助」「記号の自動挿入」「フォーマットの適用」などたくさんの便利機能がついています。

emmet

私たちのコーディングのスピードを驚くほど高速にしてくれる技術がemmetです。ここではemmetの基本を習得して、コーディングのスピードアップトレーニングをおこないます。

bootstrap

あらかじめ用意されたclassを適用するだけで、レスポンシブWebデザインのページが作成できるフレームワーク「bootstrap」の使い方を学びます。

レッスン受講の流れ

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

受講の流れ

お申込み

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

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

全4回のレッスンを受講

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

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

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

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

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

WEBパック

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

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

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

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

このパックの詳細を見る

▲トップ

無料体験へのお申込み

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

ポストカード制作

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

パンフレット制作

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

ホームページ制作

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

資料のご請求

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

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

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

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

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

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

同意して次へ