ＷＥＢデザイン講座【詳細】
アプリケーションやCSSなどの必要な部分だけ学べます。
WEB基礎講座１
HTML５の基本を学び、通常のテキストに対してHTMLによるマークアップを行います。
文字と画像をページに表示させて簡単なWebページを作ります。
| 使用アプリケーション | Dreamweaver（Photoshop） |
|---|---|
| 回数／学習時間(目安) | １回分／３時間 |
| 対 象 | 初めてＷＥＢ制作をやってみようと思われている方 |
講座のポイントとキーワード
- インターネットの基礎知識
- HTMLとCSSの役割
- 画像の挿入
- Webページを作成するための準備
- ページのマークアップ
- リンクの設定
WEB基礎講座２
サーバーやURL の仕組み、ディレクトリ構造 画像の配置 リンク絶対パス、相対パスなど、WEBサイト構成の概要を学習し、簡単なシングルカラムレイアウトを実際に作成します。文字装飾を中心にCSSの基本を学習します。
| 使用アプリケーション | Dreamweaver（Photoshop） |
|---|---|
| 回数／学習時間(目安) | １回分／３時間 |
| 対 象 | 初めてＷＥＢ制作をやってみようと思われている方。 |
講座のポイントとキーワード
- テーブルの作成
- ボックスモデル
- ページのアップロード
- シングルカラムレイアウト
- サーバーの概念
- CSSの記述方法
Dreamweaver基礎講座１
Dreamweaverのアプリケーションの概要、起動方法や、ブラウザでの確認方法から講義を始め、Dreamweaverの基本機能や設定を学びます。テキストに対するマークアップの方法、レイアウトを作るためのプロパティウインドの使い方や機能を学習します。また、CSSデザイナー機能を利用したCSSの書式の考え方、id/class のセレクタの種類、記述（設定）の違いなどを理解します。
| 使用アプリケーション | Dreamweaver |
|---|---|
| 回数／学習時間(目安) | １回分／３時間 |
| 対 象 | Dreamweaverの基本から学びたい方へ機能や使い方を学びます。 |
講座のポイントとキーワード
- Dreamweaverの概要
- 挿入メニューからのHTMLマークアップ
- プロパティウインドの機能
- テキストリンク画像リンク
- サイトの定義
- CSSデザイナーを使った装飾
- id/class タグの再定義 セレクタの種類
- HTMLの構造と書式のルール
Dreamweaver基礎講座 ２
WEBサイトを作るためのHTML５×CSS３のレイアウトの基本形を学習します。また、レスポンシブデザイン（スマートフォンやモバイル対応）を意識した、CSSでのBOXモデルレイアウトの考え方や回り込み解除、ブロックレベル要素＆インライン要素などのレイアウトの基本構成をしっかり学習します。
| 使用アプリケーション | Dreamweaver |
|---|---|
| 回数／学習時間(目安) | １回分／３時間 |
| 対 象 | Dreamweaverの基本機能が少し使えるようになった方。 |
講座のポイントとキーワード
- HTML5タグの挿入
- テキストリンク画像リンク
- HTMLの構造と書式のルール
- BOXモデルのレイアウト
- ブロックレベル要素＆インライン要素
- テーブルレイアウト
Dreamweaver基礎講座 ３
DreamweaverでのCSS３における active等 擬似クラスなどの記述や設定、より実践的なレイアウトを通してメインメニューやサイドメニュー、応用しやすいWEBサイトの基本的なレイアウトのコーディング、ライブラリー、テンプレート、FTP機能などのDreamweaverの便利機能の使用方法なども学びます。
| 使用アプリケーション | Dreamweaver（Photoshop） |
|---|---|
| 回数／学習時間(目安) | １回分／３時間 |
| 対 象 | Dreamweaverのいろいろな便利機能やリスクについてを学習します。 |
講座のポイントとキーワード
- 擬似クラスの設定
- ライブラリー
- FTP機能 サーバー定義
- テンプレート
Dreamweaver基礎講座 ４
Dreamweaverでのレスポンシブ・デザインの制作環境の設定＆レイアウト方法、ビューポート(viewport) の設定、プレビュー方法、CSSデザイナーの記述方法など、モバイル対応のための実践的なノウハウとDreamweaverの利用方法を学習します。
| 使用アプリケーション | Dreamweaver（Photoshop） |
|---|---|
| 回数／学習時間(目安) | １回分／３時間 |
| 対 象 | レスポンシブデザインのための基礎コーディングがしっかりできる方。 |
講座のポイントとキーワード
- CSSデザイナー
- デザインビュー／ライブビュー
- メディアクエリー
- ビューポート(viewport)
- デバイスサイズ
- Chromeデベロッパーツール機能
Dreamweaver実践コーディング １
Dreamweaverを使って、サイト制作の基本となるCSSコーディングでのサイト全体のレイアウト方法を学習します。jQueryやJavaScriptを使ったメインメニューのレスポンシブ化やメイン画像のスライドショー、トップへ戻るボタンなど基本的なjQueryの実装。
| 使用アプリケーション | Dreamweaver（Photoshop） |
|---|---|
| 回数／学習時間(目安) | １回分／３時間 |
| 対 象 | Dreamweaver基礎4までを習得した方レベルの方が対象です。 |
講座のポイントとキーワード
- CSSでのレイアウト
- CSS命名規則
- meanmenu
- BXslider
- jQuery
- レスポンシブデザイン
Dreamweaver実践コーディング ２
Dreamweaverを使って、サイト制作の実践。サイトのページ構成や複数ページの管理、レスポンシブデザインであることも踏まえて、サイト全体を作りサーバーにアップロードします。
PHPの簡易なメールフォームなど、サーバーサイドでしか実行のできないスクリプトなどについても実装して確認しましょう。
| 使用アプリケーション | Dreamweaver（Photoshop） |
|---|---|
| 回数／学習時間(目安) | １回分／３時間 |
| 対 象 | CSSを使ってのサイト全体のレイアウト。複数ページを作る人対象。 |
講座のポイントとキーワード
- CSSでのレイアウト
- サーバー設定（FTP）
- Sitemap.xml
- 基本（BASIC）認証
- メールフォーム
- PHP
SEO対策基礎
Google ウェブマスターツールの利用法やログ解析の必要性、サイト構造やコーディングのポイントなどとともに、サイトの更新と管理についてや設計上の考え方や仕様を学び、現在の検索エンジンについての基本的な知識についても学習します。
| 使用アプリケーション | Dreamweaver,各種ブラウザ |
|---|---|
| 回数／学習時間(目安) | ２回分／６時間 |
| 対 象 | WEBサイトの更新管理、集客や運営上必要な知識が必要な方対象。 |
講座のポイントとキーワード
- Search Console
- Googleアナリティクス
- Google ウェブマスターツール
- HTML におけるSEO のポイント
- ページタイトル
- 検索エンジンの重要性
Wordpress基礎
Wordpressを利用するための基本的な設定方法から、記事の投稿やメニュー、ウイジェットの設定から基本的なプラグインの設定方法などを学ぶほか、デザインテーマの違いやオリジナルのデザインにカスタマイズする簡単な方法などを学びます。
| 使用アプリケーション | GoogleChrome（各種ブラウザ）,Dreamweaver |
|---|---|
| 回数／学習時間(目安) | ２回分／６時間 |
| 対 象 | Wordpress初心者から、テーマを自分でいじりたい方対象。 |
講座のポイントとキーワード
- 投稿と固定ページ
- ウィジェットエリア
- 親テーマ、子テーマ
- プラグイン
- テーマの設定
- テーマのカスタマイズ