はじめてDreamWeaverでWEBサイトを作るためのホームページ制作講座
4.5 (14 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
164 students enrolled
Wishlisted Wishlist

Please confirm that you want to add はじめてDreamWeaverでWEBサイトを作るためのホームページ制作講座 to your Wishlist.

Add to Wishlist

はじめてDreamWeaverでWEBサイトを作るためのホームページ制作講座

最新のDreamweaver CCを使ってサイトを白紙からつくり、ホームページをオープンさせましょう。CSSやhtmlの基本的なことも解説しているので、基礎からしっかり学ぶことができます。
4.5 (14 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
164 students enrolled
Created by 村守 康
Last updated 1/2017
Japanese
Current price: $10 Original price: $30 Discount: 67% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
DreamWeaverを使ってWEBサイト(ホームページ)を白紙からつくり、公開させる講座です。ホームページサイトをつくる手順がはっきりと理解できます。
View Curriculum
Requirements
  • コースを始める前にリソースから「Training_Site.zip」ファイルをダウンロードし、解凍して準備してください。
Description

 このコースはAdobe DreamWeaverを使ってホームページサイトをゼロからつくる方法を解説しています。動画で示される手順通りに進めればご自分のサイトをオープンできます。この講座ではDreamWeaverを通して制作しますが、DreamWeaverの使い方と同時にhtmlのしくみやコードを使ったページの制作方法も解説しています。DreamWeaverだけを使ってページをつくるよりも遙かに効率的にページ制作ができるスキルが身につくよう解説しています。

このチュートリアルでサイトを白紙からつくろう

・この講座だけで白紙からホームページサイトを完成し、公開する手順をすべて解説しています。

・ゼロからページをつくるための材料がすべてダウンロードできます。

・自由自在にレアウトできるCSSの定義の方法をわかりやすく解説。

・コードを直接書き替えることで簡単に効率的に進められるところはDreamWeaverに頼らずソースコードを編集。

・DreamWeaverの最新の機能を使って、トレンディなデザインができるよう解説。

WEBデザイナーへの道をひらこう

 ページサイトのデザインはWEBの基礎的なしくみが分かっていないと進みません。これはDreamWeaverでページを作るだけでは身につかないことです。この講座ではDreamWeaverでページを作りながら、それを入口としてWEBやhtmlの基礎的なことを同時に解説しています。

学習内容

48本のレクチャーを合計5時間23分のビデオで解説しています

最初にこれから制作するページの完成したものを検討し、制作の順序や注意しなければいけない点などを説明します。

CSSの基本やWEBのしくみなど基本的な部分は説明だけでなく実際に実験しながら説明します。これにより基礎的なことがわかるので今後の工程が大幅に楽になります。

サイトページのパーツをひとつひとつ順番に制作し、積み重ねていくことでページが目に見える形で完成していきます。成果がわかるので飽きることがありません。

初心者が間違いそうな部分は特に詳しく説明。また実際に間違いの事例を制作中のページで作って、後で修正することで何が悪かったのかが分かるように説明しています。

WEBの世界で最新のテクニックを使い、同じ結果でも新しい手法で行っています。

最後にサーバーに転送し、検証するまでの全部の工程を解説しているので初めての方がページを公開できるまでのスキルを持つことができます。

Who is the target audience?
  • DreamWeaverを使ってはじめてサイトをつくる方向けに解説しています。ある程度のスキルのある方が新しいバージョンのDreamWeaverの機能を学ぶこともできますが、基本的に初心者の方のための講座です。
  • 自分で会社やお店のWEBサイトを作りたい方、WEBのスキルを身につけて転職やWEBデザイナーとして独立したい方に最適の講座です。
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 48 Lectures Collapse All 48 Lectures 05:19:07
+
はじめに
5 Lectures 26:03

この講座でどのようにしてホームページサイトを制作するか、その手順を理解し作業の見通しと制作の意欲を高めます。
講座に進む前に練習素材(Training_Site.zip)をダウンロードしておいてください。

Preview 08:09

DreamWeaverの必要性を理解するために、簡単な実験を行います。この実験でhtml言語とDreamWeaverの関係について理解します。

Preview 04:25

DreamWeaverの操作の基本的なことだけを理解します。今後の作業で必要になる基本的なことだけなので飽きることはありません。

基本の操作
05:16

新規ページの作り方を説明します。

新しいページを作る
04:16

新しく作ったページの保存の方法を理解します。

ページの保存の方法を理解します。
03:57
+
CSSのしくみ
6 Lectures 34:50

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

新規サイトの定義
05:37

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

ファイルパネルの使い方
03:29

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

サンプルページの検討
09:36

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

CSSの正体
05:27

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

Preview 03:29

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

サイトの整理
07:12
+
サイト制作の開始
9 Lectures 56:50

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

ページ制作の開始
07:41

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

Preview 04:35

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

bodyの設定
05:15

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

bodyの詳細設定
06:54

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

containerの挿入
04:19

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

containerのCSS定義
08:03

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

ページの中央配置の方法
05:42

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

CSS設定の順序
05:42

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

header, content, footerの配置
08:39
+
headerの制作
8 Lectures 01:00:19

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

Preview 07:49

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

headerの仕上げ(1)
09:11

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

headerの仕上げ(2)  Logo_Areaのルール定義
06:10

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

headerの仕上げ(3) Navi_Areaのルール定義
05:11

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

headerの仕上げ(4) Global_Naviの設定
07:14

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

headerの仕上げ(5) Global_Naviの設定
08:42

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

headerお仕上げ(6) リンクの設定
09:11

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

ブラウザで確認
06:51
+
Side_Naviの制作
5 Lectures 36:33

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

Side_Navi, Main_Box, Banner_Boxの配置
07:07

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

Side_Navi, Main_Box, Banner_BoxのCSSルール定義
06:10

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

Side_Naviの制作(1) ulとliの入力
06:42

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

Side_Naviの制作(2) ulとh2の設定
08:18

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

Side_Naviの制作(3) ロールオーバーイメージ
08:16
+
Main_Boxの制作
8 Lectures 58:35

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

Main_Boxの構造
04:08

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

MainBox_Itemのマークアップ
08:06

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

Main _Titleの設定
10:22

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

Preview 07:35

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

段落要素の再定義
05:47

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

MainBox_Newsのマークアップ
07:42

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

リンクの設定
07:51

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

Tips:classとidの違い
07:04
+
ページを完成させる
4 Lectures 27:43

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

Banner_Boxの制作
11:48

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

footerの制作
06:11

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

IEの表示の修正
04:54

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

ページ全体の確認と修正
04:50
+
サイトの公開
3 Lectures 18:14

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

サーバーの設定
06:27

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

Preview 06:05

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

サイトの同期
05:42
About the Instructor
村守 康
4.2 Average rating
178 Reviews
1,750 Students
13 Courses
デザイナー

大手半導体メーカー販促部門でデザイナーとして勤務後、デザイン会社を設立。現在は現場でのデザインとともに新人教育を多く行う。Adobe Photoshop, Illustratorなどデザイン系のアプリケーションと、HTML, CSS, Java, phpなどコーディングとプログラミングの解説がメインで、即戦力のスキルを伝えることに力を入れています。これまでに特に動画を使った指導カリキュラムを多く開発しており、わかりやすいと好評を得ています。