ドメインの取得し、サーバーをレンタルしましょう。

ドメイン取得方法

ドメイン管理会社は、大きく実績があるところを必ず選んでください。
ドメイン管理会社のサーバーが止まると、サイトが表示されなくなります。

ドメインは、どの国の会社で取得してもほとんど変わりがないので、日本のドメイン会社をお勧めします。
ただし、.cnなどの　国名が入るドメインは、取得できません。
その国に、在住でない場合は、下記「海外のドメイン取得する方法」を参照ください。

日本でのドメイン管理会社

・お名前 com

・ムームードメイン

アメリカのドメイン管理会社

・Go Daddy 安い
・register.com

海外のドメイン取得する方法

海外ドメイン取得（Global Registering）
.cn .us　など外国のドメイン取得が可能です。

レンタルサーバー契約

レンタルサーバー会社と契約しましょう。

レンタルサーバー会社は、無数にありますが、
ドメイン管理会社同様に、規模が大きく、実績がある会社を必ず選ぶ必要があります。

日本の評判が良いホスティング会社

・さくらインターネット　スタンダードコース
実績もあり、サーバーの口コミでも評判がよく、中国からのアクセスも比較的速いサーバー（他の日本のサーバーと比べて）です。
お申込みの手順

・WordPress（ワードプレス）を今後検討されている場合

圧倒的シェアで、デザイン変更出来るテーマ、機能を追加出来るプラグインの数も豊富。
情報量の多さ、機能やテーマが豊富にあるため、CMSではWordPressが選択されるケースが多い。
PHPと呼ばれるプログラムで作られています。

WordPressを使用するためには下記条件のサーバーが必要になります。

WordPress 日本語版バージョン 3.2〜3.5 の動作環境
PHP バージョン 5.2.4 以上（Webプログラム言語）
MySQL バージョン 5.0 以上（データベース）

・WebArena NTT系列

中国での日系ホスティング会社

・Bohan IT
「自由DIY 600M PHP5+MySQL5 共用SSL無料」プラン以上をオススメします。

中国の事情

中国は、日本や他の国と違い自由にWebサイトを公開することが出来ません。

中国国内のサーバーを使用して、Webサイトを公開する際には、必ずICPと呼ばれる政府の許可が必要になります。
申請後、取得したICP番号をWebサイトのフッター（下部）に貼り付ける必要があります。

ICP番号の取得方法

レンタルサーバー会社でICP番号の申請を依頼します。
無料もしくは有料で手配してもらいます。
その際には、会社の営業許可書や写真撮影（サーバー会社で撮影）が必要になります。
最近では、中国人担当者を用意しないと、スムーズに進まない場合があります。
ICP取得には約1ヶ月見ておく必要があります。（混み具合で変わります。）

Web製作に必要な環境の再確認

ドメイン、サーバーの取得は、最初はマニュアルに沿ってゆっくり進めてください。
全ての基本になるため、作業に慣れるようにしましょう。

お名前.comでのドメイン取得手順です。

・お名前.comのサイトへ

赤い枠の中に、取得したいドメイン名を入れます。
例：egg-d　などなど

取得可能な場合は、チェックボックが出てきます。
.net　.com　.info　などにより価格が異なります。
初めては上部、既にIDを持っている場合は、下部を選択してください。

初めてを選択した場合は、基本情報を順番に入力し登録してください。

登録した内容でログインします。

記入した内容を確認して次へ進みます。

自動更新設定、Who is情報公開代行にチェックを入れ、料金支払い手続き完了になります。

いよいよアップロード

ローカル上で自分のサイトが完成したら、サーバーにアップして実際にアクセスしてみよう

リモート情報を設定

メニューバー
→ サイト
→ サイトの管理
→ 自分のサイトを選択し、編集
→ カテゴリからリモート情報を選択
→ アクセスをFTPにする
→ FTPホスト、ホストディレクトリ、ログイン、パスワードを入力
→ テストをクリック
→ 接続されましたと出たらokをクリック

リモートサイトを見てみよう

リモートサイトとはサーバー側のことです
リモートサイトを確認することにより視覚的に正しくアップロードされたか確認できます
ファイルパネルの右上、リモートサイトを表示をクリック
→ 「リモートホストに接続」をクリック
※左側がリモートサイト、右側がローカルファイルである

リモートサイトに「自分の名前」フォルダを作ろう

「自分の名前」フォルダを指定しよう

アップロードする

現在開いているページをアップロードする

dreamweaverでは、現在開いているファイルをすぐにアップロードすることができます。編集終了後、すぐにアップロードしたいときに便利な機能です
アップしたいページ（top.html）を開く
→ ドキュメントツールのバーにある｢ファイル管理」ボタンをクリックし、「PUT」を選択します
→ ｢依存ファイルをPUTしますか？」と出るので、「はい」を選択します
※依存ファイルとは、そのhtmlファイルに関連したcssファイルや画像のことです。htmlファイルのみを修正した時は「いいえ」を選びます
これでブラウザでインターネットのアドレスを指定すると、実際にアップしたファイルを見ることができます

www.(ドメイン) / (自分のフォルダー) / (自分のファイル)

リモート側も見ながらからアップロードする

リモートサイト側(サーバー)を見ながらアップすることで確実でありアップロードした結果も確認することができます。
リモートサイトを開く
→ローカルファイル側のアップしたいファイルを選択
→ 「ファイルをPUTするボタン」をクリック
→ ｢依存ファイルをPUTしますか？」と出るので、「はい」を選択します
※展開した｢ファイル｣パネルを元に戻すには「たたんでローカルサイトのみを表示」ボタンをクリック

ファイルパネルからアップロードする

ファイルパネルからアップロードすることができます。これは複数のファイルをアップロードしたい場合に便利です
ファイルパネルからアップしたいファイルを選択
→ファイルパネルのバーにある「PUT」を選択します
→ ｢依存ファイルをPUTしますか？」と出るので、「はい」を選択します
※依存ファイルとは、そのhtmlファイルに関連したcssファイルや画像

自分の作ったページの他のページをアップしよう

テーブルレイアウト

簡単にリストなどが作れる
主に表組みを作るときに使用する

テーブルのデザイン要素

テーブルの挿入

新規ファイルを開く
→ テーブルを挿入したい箇所にカーソルを合わせる
→ メニューバーの挿入、 テーブル
→ 行と列を確認してok

 行、列の追加

挿入したい箇所後ろのセルにカーソルを置き、右クリック
→ テーブル
→ 列の追加もしくは行の追加をクリック
→ 挿入されました

文字の入力

文字を入力したいセルを選び入力

イメージの挿入

挿入したいセルにカーソルを置く
→ イメージフォルダから画像をドラッグする

テーブルをcssでデザインする

タグ同様、テーブルもスタイルシートを使ってデザインしていきます。

cssでテーブルをデザイン

新規ファイルに以下のソースを張り付ける

<table>
<tbody>
<tr>
<th>本体名称</th>
<th>スタンド名</th>
<th>スピード</th>
<th>持続力</th>
<th>精密動作性</th>
<th>成長性</th>
</tr>
<tr>
<td>空条 承太郎</td>
<td>スター・プラチナ</td>
<td>A</td>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>ジョセフ・ジョースター</td>
<td>ハーミット・パープル</td>
<td>C</td>
<td>A</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>東方 仗助</td>
<td>クレイジー・ダイヤモンド</td>
<td>A</td>
<td>B</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>

前回までと同様、タグを選択して新規CSSルール、ルールを定義していく

 cssでテーブルをおしゃれにデザイン

ボーダーを片側にだけ入れたりなどしてデザイン性を高めることが出来ます

新規ファイルソースコードに以下を張り付ける

<table>
<tbody>
<tr>
<th>クラシックフロア</th>
<td>リラックスしていただけるように数々の趣向を凝らしたインテリアが魅力</td>
</tr>
<tr>
<th>デラックスフロア</th>
<td>「快適」をテーマにデザインされたデラックスフロアの客室</td>
</tr>
</tbody>
</table>

テーブルを使ってeggのグラフィックコース料金表ryoukin.htmlをつくろう！

テンプレートとは

WEB サイトを作るにあたって、1ページのみということはありません。 ヘッダー、ナビゲーション、フッターなどの各ページ共通の項目があることがほとんどです。 1ページ仕上げてからコピーするという方法もありますが、それでは修正があったときに1ページずつ 対応しなければなりません。そこでテンプレートという機能を使用します。

レイアウト済みのHTMLファイルをテンプレート化する

テンプレート化したいファイルを開く
→ メニューバー → テンプレートとして保存
→ 任意のファイ ル名をつける → 「リンクを更新しますか?」とでるので「はい」を選択
→ 任意のファイル名.dwtと して保存されます
→ タブが任意のファイル名.dwtとなっていることを確認する
※templatesフォルダーが自動的に作成されます。

テンプレートから新規作成

アセットパネルのテンプレートが選ばれている状態で作成したテンプレートファイルの上で右クリック
→ テンプレートから新規作成
→ 作成されました
→ 保存を選択し、EGGのフォルダーの中を選択しtop.htmlとする

テンプレートファイルの編集可能領域を選択する

今のままでは作成したテンプレートから新しいページを作成しても編集することはできません
※誤って不動のコンテンツを触ってしまうのを避けるためです
そこで編集可能領域の指定をします

テンプレートファイルの編集したい領域のタグを選択
→ メニューバー、挿入、テンプレートオブジェクト、編集可能領域をクリック
→ 編集可能領域を選択
→ 任意の名前をつけok
→ 保存
→ 「テンプレトファイルの更新しますか？」と出るので｢更新」をクリック
→ テンプレートから作成したファイルが編集できるようになりました

ボタンの数だけテンプレートを作成しましょう

ファイル名は下記とする

• top.html
• setsubi.html
• profile.html
• academy.html
• ryoukin.html

作成したページの内容を埋めていきましょう

[download id=”2″]

top.html

グラフィックデザインっていったい何？？？

グラフィックデザインのことを、工業デザイン（インダストリァル）に対し、商業デザインということもしばしばあります。
わたしがデザイン専門学校の講師をしていたとき、2年制の2年生を受け持っていました。春のその最初の授業で、「みなさんは、この1年間グラフィックデザインの基礎を学んできたけど、グラフィックデザインって一言でいって、いったい、何？」といつも聞いていました。
学生たちは下を向いてなにやら考えています。「むずかしく考えることないから、、、」と、久々の同窓会で飲みながら、友だちから「おまえ、デザイン学校へ行ってるんだろう？」「デザイン学校ってどんなことするのヨ」って聞かれたとき答える程度でいいから。というと、やっとボソボソ手があがり、「広告を作ったり、チラシを作ったりすることです」程度しか自信なさそうにしか答えられないものでした。学んでいた当人たちがそういう状況でした。ですからフツーの人にこの質問を投げかけても、なかなか端的に答えられないのも、仕方がありません。
家やビルをデザインする人のことを「建築デザイナー」、洋服をデザインする人のことを「ファッションデザイナー」、包装紙や容器をデザインする人のことを「パッケージデザイナー」。まあ、こうやって聞くだけで、これらのデザインは何をデザインするのか分かりますよね。でも、意外に「グラフィックデザイン」というのは何をデザインするのか説明できる人が少ないのです。
簡単に「グラフィックデザイン」は何かというと、「主に印刷という媒体（メディア）に対して、デザインをすること」です。グラフィックデザインの本質、目的は「文字情報の伝達」です。読み手がその文字情報の理解を促進するために写真やイラストが頻繁に、効果的に、使われているということです。この「文字情報の整理をする術」が、いわゆるグラフィックデザインと呼ばれるモノなのです。読者のみなさんも、仕事や生活のなかで、ありとあらゆるグラフィックデザインに触れているはずです。発注する立場の人も多くいらっしゃると思います。これからしばらくみなさんを「グラフィックデザインというものへいざない」ます。楽しく異業種を理解していただき、お役に立てば、うれしく感じます。
中国語では、平面設計。もっと分かりやすくいうためには、印刷平面設計といいます。

setsubi.html

設備について
当アカデミーは、2007年3月に上海市虹口区の上海外国語大学の構内でスタート。2008年3月に上海市長寧区に移転いたしました。
現在のところ、講師は日本で25年の経験を積んだ現役デザイナーひとりのみですが、 講師の経験をそのまま伝授することを目的にし、少人数クラスをコンセプトとし、ほぼ講師とマン・ツー・マンのような細かな講義 をいたします。
受講生の席数は5席で、マッキントッシュ・コンピュータのセットも5セットです。その他に 講師のマッキントッシュ・コンピュータセットがあります。
小規模でのスタートですが、毎日の受講で、2年間での終了を基本とした日本のデ ザイン専門学校に比べ、週3回の受講として約30週間（希望受講日がすべて受講可能の場合） で終了が可能です。
また、物価の安い中国での開校ということで、日本のデザイン学校では、終了まで2年間、200 ～300万円かかる費用が、当アカデミーでは、7分の1以下の費用で終了できます。

profile.html

校長（講師）プロフィール
校長（講師）長井辰夫
長井　辰夫
1952年3月生まれ（56歳）、広島県出身。
東京・築地のグラフィックデザイン制作プロダクション、株式会社フレイムワン代表取締役。
東海大学工学部卒業後、一度印刷会社に就職するが、一念発起、グラフィックデザインの道を目指す。その後、「デザイン専門学校・日本デザイナースクール」、「宣伝会議・コピーライター養成講座」を終了、31歳で現在の株式会社フレイムワンを設立。25年以上、主に電通関係のデザインを行う。
1985年より1994年まで10年間、東京渋谷・学校法人・日本デザイナ－学院のグラフィックデザイン科の講師を勤める。
2004年3月より中国にデザイン学校を開校させる目的のため上海に居住。
3年の準備期間を経て、2007年春、グラフィックデザイン専門学校「上海エッグ・グラフィックデザイン・アカデミー」を開校。
夢は、中国全土に、中国人のためのグラフィツクデザインアカデミーを作ること。

academy.html

上海エッグ・グラフィックデザイン・アカデミーの特長
日本語での授業です。

グラフィックデザインコース
マッキントッシュコンピュータでの実習。
日本の99パーセントのグラフィックデザイナーが、マッキントッシュ・コンピュータを使ってデザインをしています。
当アカデミーでも、すべて日本から輸入したマッキントッシュ・コンピュータを使用していますので、フォントやキーボードの問題はなく、また、アプリケーションもすべて日本語版です。

受講生のペースや、能力に合ったカリキュラム
受講生のペースに応じたグラフィックデザイン技術の習得を基本としていますので、1クラスを最大6名（ WEB 制作コースは3名）。と少数制の教室にしています。
受講生の個性や能力の違いによるデザインレベルに合わせて、講義内容をフレキシブルにアレンジすることをコンセプトにしています。

短期で自在な短期集中講義カリキュラム
日本でのデザイン学校は、基本的には2年間が履修のサイクルとなっていますが、当アカデミーでは、働きながら、あるいは他の勉強をしながらグラフィックデザインを学びたいという方を主な対象にしていますので、それぞれの方の時間が取りやすいよう、短期で自在な時間割を組みます。

日本では例を見ない実戦の中での技術習得
「デザインワークの現場を学ぶ」ことを基本としている当アカデミーは、アカデミーであり、グラフィックデザイン制作プロダクションの機能も備えています。
制作プロダクションも兼ねたデザイン学校は、日本では例を見ない形態です。
これにより、実際のデザインワークに触れながらグラフィックデザインを学ぶことができ、また、時にはアシスタント・デザイナーとして働くこともできます。

就職に対してのアドバイスやサポート
日本でも上海でも、実践を積んだ「使えるグラフィックデザイナー」は人気があります。日本の東京、または上海での就職を希望の受講終了生に対しては、そのための就職のアドバイスやサポートをいたします。
また、研究生として、当アカデミーに勤務する道も開かれています。

ryoukin.html

受講料について
当アカデミーのカリキュラムは計89コマ（178時間）で構成されていますが、下記6コースはDTPフィニッシュコースから順に1コースずつ申し込みいただき、日本の 多くの専門学校のように、1年分や2年分をまとめてお申し込みいただかなくても、 ライフスタイルに合わせて無理なく、受講いただけます。

入学金 500 元
受講料1コマ250元 1コマ2時間（休憩5分程度）

下記の6コースは、各コースずつお申し込みいただき、受講できます。

DTPフィニッシュコース
18コマ×250元 = 4,500 元

基礎コース
18コマ×250元 = 4,500 元

レイアウトコース
15コマ×250元 = 3,750 元

ロゴタイプコース
8コマ×250元 = 2,000 元

エディトリアルコース
15コマ×250元 = 3,750 元

アートディレクションコース
15コマ×250元 = 3,750 元

プライベートコース

プライベートコースとは、お時間の都合のつかない受講生や、海外からの当校への留学の方のために、当アカデミーの空いているコマと受講生の受講できる時間を合わせて特別に組む、不定期な自由な時間に受講できるコースです。 受講料 ─── 1コマ ─── 1名　　　350元
(例) 基礎コース=入学金500元+18コマ×350元（1名）=6,300元

テンプレートファイルの修正をしよう

WEBサイトを運営していると追加したい項目が出てくると思います
大元のテンプレートファイルを修正して全ページに適用させましょう
今回は編集可能領域ではないところであるナビゲーションの名前の変更、リンクを張っていきましょう

アセットパネルからテンプレートファイルを開きます
→ 各仮リンク#のナビゲーションバーに先ほど作成したページを設定していきます
→ 保存
→ 「テンプレートファイルの更新しますか？」と出るので｢更新」をクリック
→ 更新されているか確認してみましょう

テンプレートの適用

テンプレートの元としたhtmlファイルはまだどこのテンプレートにも管理されていません
ここではテンプレートに管理されていないファイルを関連付ける方法をします

関連付けしたいファイルを開きます
→ アセットパネルのテンプレートが選ばれている状態で作成 したテンプレートファイルを選択
→ パネル下部の「適用」ボタンをクリック
→ 「領域名の不一 致」ダイアログが表示
→ 「編集可能領域」から項目を選びすべて「なし」と選択しok
→ 更新され ているか確認してみましょう

テンプレート切り離し

間違えてテンプレートを適用してしまったり既にテンプレートで管理されているファイルを個別に変更したい場合は、いったん切り離す作業が必要です。

テンプレートが適用されているファイルを開きます
→ メニューバー、修正、テンプレートから｢テンプレートから切り離す」を選択
→ テンプレートから切り離されました

イラストレーター

WEBサイトを構築できるようになってきたと思います
ここでは素材を一つ一つ作っていき、よりデザイン性のあるサイトに仕上げていきます

WEB用素材作りのためのイラストレーター

イラストレーターを立ち上げます※AIデータ等は容量が重いのでアップロードしてしまわないよう保存場所に注意する
WEBサイトはモニターで見るためカラーモードはRGBモードにしておくこと
また、単位をピクセルに直しておくと作業がしやすい(通常は印刷用のCMYKモード、ミリメートルになっている)
・ファイル → ドキュメントカラーモード → RGBモード
・編集 → 環境設定 → 単位 → ピクセル

素材作りの基本

新規作成
→ 作りたい素材のサイズのアートボードを用意
→ その中にデザインしていく
→ ファイル → WEBおよびデバイス用に保存。jpgかgifを選択し、任意の名前をつけ、ローカルフォルダーの中のimgフォルダーに保存
→dreamweaverに戻りイメージをいれたいところに挿入

フォトショップ

WEBサイト作成ではそこまで画素数の高い画像を使用する必要はありません

WEBサイトはモニターで見るためカラーモードはRGBモードにしておくこと
また、単位をピクセルに直しておくと作業がしやすい(通常は単位ミリメートルになっている)
・ファイル → イメージ → モード →RGBカラー
・編集 → 環境設定 → 単位 → ピクセル

素材作りの基本

・そのまま使う → 画像解像度をPXでサイトの大きさに合わせる
・一部だけ使う → 必要な部分をトリミングし、画像解像度をPXでサイトの大きさに合わせる
・イラストレーターで編集する → 必要な部分をトリミングし、画像解像度をPXでサイトの大きさに合わせる※クリッピングパスに備え、大きめにしておく

練習問題　3-1.htmlの画像だけ変えてeggのWEBサイトをつくろう

div

いままではhtmlタグにしかルールを定義できませんでしたが、それでは十分ではありません
そこでdivを使用します。
divとは簡単に言うとボックス(囲んだ範囲をひとかたまり)の意味です
下図のようにボックス分けをして位置を指定してあげないと、ただ上から順番に並べただけのサイトになってしまいます
divを挿入してcssルールを適用させていきます

divの挿入時の名称

任意の名前をつけてかまいませんがこのコースでは下記のように統一します
DreamWeaverでdivの挿入をするときは # を記入する必要はありません

divの挿入

DreamWeaverで3-1.htmlを開く。このファイルは段落分け等は終わっています
#allitemの挿入
Ctrl＋Aですべてを選択し
挿入 → レイアウトオブジェクト → Divタグ → IDにallitemと記入 → okをクリック

新規cssルールを定義してallitemをデザイン

allitemタグを選択し(#allitemとなっています)新規cssルール → セレクタタイプ → 詳細設定を選択→ セレクタが #allitem になっているのを確認してok
(スタイルシート名はstyle.cssとする)
1.ボックス、幅…700px
2.ボーダー、右、下、…各実線、1px、＃666666
3.背景色、#006600

divの挿入の練習

headerにしたい部分を選択 → Divタグを挿入 → IDにheader記入 → okをクリック
naviにしたい部分を選択 → Divタグを挿入 → IDにnavi記入 → okをクリック
contentsにしたい部分を選択 → Divタグを挿入 → IDにcontents記入 → okをクリック
leftにしたい部分を選択 → Divタグを挿入 → IDにleft記入 → okをクリック
footerにしたい部分を選択 → Divタグを挿入 → IDにfooter記入 → okをクリック

divにcssルールを定義する

まずはdodyにHTMLファイル全体のルールを定義します。
ここで定義したルールはそのページ全体に反映されます。
bodyタグを選択し新規cssルールをクリック → セレクタを確認しokをクリック

イメージの挿入

WEBサイト用画像の種類

このコースでは基本的にjpgとgifを使用します

1.jpg・・・主に写真やグラデーション
2.gif・・・主にナビゲーションバーなどのアイコン、イラスト

(はっきりとした線になる。任意の色を透明化することが出来たり、動く画像が作れます)

イメージの挿入

イメージを挿入したい場所にカーソルを置く
方法1.画面右下のファイルパネルの中からの中から挿入したい画像をドラッグする
方法2.挿入 → イメージ → ファイルを選択
代替テキストは記入しておく
音声再生ファイルに適用されるし、画像が現れるまでの説明文になる
副次的ではあるがSEO対策にもなる

イメージサイズを変更

画像を選択し右下に出る四角を選択 → サイズの変更が出来る
Shiftを押しながらだと左右のバランスは変わらない
サイズの横の更新マークをクリックすると元のサイズに戻る
※画像が荒くなったり、歪む原因にもなるので仕上がりサイズで作成しておく

リンクを張る

仮リンクは # と記入する
別のウィンドウで開きたい時は「_blank」設定する

文字リンクにcssルールを定義

通常リンクされている文字を選択するとブラウザーで文字色の変化があります。
それもcssで定義します。

やってみよう

後から指定したルールのほうが、先に指定した規則に勝つ。
「hover 状態でもあり active 状態でもある」という場合<a:hover>の後に<a:active>を記述しなければならない。

イメージリンク

イメージにリンクを張る

イメージの一部分にリンクを張る

imgフォルダーからmapを挿入 → 画像を選択した状態で画面左下マップの中の四角を選ぶ →任意の場所に図形を描く → リンクを張る

メールリンク

メールリンクを張りたい文章、もしくは画像を選択 → リンク先に「mailto:任意のメールアドレス」を記入 → ブラウザで確認 → ユーザーが設定しているメールソフトが起動される

アンカーポイント

一つのページが長くなってしまうとそのページのトップに戻るのにユーザーがストレスを感じてしまいます。適度な位置にアンカーポイントを作成しましょう。
ページの一番上にカーソルを置きます → 挿入 → アンカーポイント → 任意の名前をつける(今回はTOP) → ページの下部に文章を打ち、そこに｢#TOP｣と記入 → ブラウザーで確認
アンカーポイントはユーザーには見えません

練習問題　今までのことを応用してWEBサイトを作ろう

2.htmlを完成させよう
1.画像も含めた1行目を見出し1、コース名,料金を見出し2にする
2.タイトルを「コース案内|eggグラフィックアカデミー」、全ての画像に代替テキストを入れる
3.仮リンクを張る(コース名とコマ数の画像に仮リンクを張る)cssでimg周りの青枠を消す
4.cssルールを定義していく

DreamWeaverとは

Dreamweaverは html、css(後で説明)を記述などだけでなく、WEBサイトの制作・管理に特化したソフトです。さてDreamweaverなのですが、ホームページ作成用のアプリケーションは多数ある中で何故Dreamweaverを使うのか？現在のWEB業界では基本的にはDreamweaverを使用できることが常識になっています。大多数のシェアを占めているということはそれだけ使い勝手のよいソフトということです。 これからWEB業界を目指す人は、まずはDreamweaverから学んでいくのが近道かと思います。

心構え

dreamweaverは確かに便利ですが、それよりもhtmlやcssについて理解を深める方が、webサイトを制作する上で有効である。あくまで補助ソフトとして考えること。

DreamWeaverを起動

スタート → すべてのプログラム → DreamWeaver をクリック

サイトの定義

先程作成したフォルダーをを新規サイトとして設定します メニューバー → サイト → 新規サイト サイト名を「自分の名前」 ローカルルートフォルダをフォルダーについて練習1で作成したフォルダーに指定する 初期設定イメージフォルダを「自分の名前」の中の「img」に設定する ※リモート情報はサイトをサーバーにアップする時に再度設定するので今は設定しない。 OKをクリック

HTMLファイルを開く

画面の右下に先程作成したファイルがあります。 index.htmlをダブルクリックして開きます

コード、分割、デザインそれぞれの画面を見る

DreamWeaverではWEBサイトの普段ブラウザーで見る画面(デザインビュー) ページのソース(コードビュー)、 さらにそれを同画面で見る事ができます(分割ビュー)

HTMLファイルをブラウザーで見る

F12を押す(macはコマンド＋F12) → 設定しているブラウザーが立ち上がります ※ctrl + F12(macはoption＋F12)でセカンドブラウザーが立ち上-がります。ブラウザーによって見え方が違う場合があるので2つのブラウザーをチェックする癖をつける

作業中は、頻繁に確認すること

選択する

選択する時は必ず、タグ全体が選択されていることを確認する

タグを選択する

文字にカーソルを置き、タグセレクタ(画面下部)から<p>を選択する ※選択する時はタグセレクタで選択するか、コードビューでドラッグして選択する癖をつける

新規作成

新規フォルダ

画面右下のサイト名にカーソルを置き右クリック → 新規フォルダー →「 lesson1」と名前をつける

新規ファイル

画面右下のサイト名にカーソルを置き右クリック → 新規ファイルー → 「test.html」と名前をつける 新しいWEBページが出来ました

 DreamWeaverの機能を使う

HTMLタグの記入をDreamWeaverにやらせる 下記を先程作成した新規ファイルに貼り付ける

家やビルをデザインする人のことを「建築デザイナー」、洋服をデザインする人のことを「ファッションデザイナー」、包装紙や容器をデザインする人のことを「パッケージデザイナー」。まあ、こうやって聞くだけで、これらのデザインは何をデザインするのか分かりますよね。でも、意外に「グラフィックデザイン」というのは何をデザインするのか説明できる人が少ないのです。簡単に「グラフィックデザイン」は何かというと、「主に印刷という媒体（メディア）に対して、デザインをすること」です。グラフィックデザインの本質、目的は「文字情報の伝達」です。読み手がその文字情報の理解を促進するために写真やイラストが頻繁に、効果的に、使われているということです。この「文字情報の整理をする術」が、いわゆるグラフィックデザインと呼ばれるモノなのです。読者のみなさんも、仕事や生活のなかで、ありとあらゆるグラフィックデザインに触れているはずです。発注する立場の人も多くいらっしゃると思います。これからしばらくみなさんを「グラフィックデザインというものへいざない」ます。楽しく異業種を理解していただき、お役に立てば、うれしく感じます。中国語では、平面設計。もっと分かりやすくいうためには、印刷平面設計といいます。

タイトルを入れてみよう。

画面上側のタイトル欄に任意のタイトルを入れる 保存してブラウザーで確認する

段落をわける

わけたいところでEnterを押す コードビューに<p>が入っているのを確認し、上書き保存にしてブラウザーを更新する

改行する

Shiftを押しながらEnterを押す コードビューに<br>が入っているのを確認し、上書き保存にしてブラウザーを更新する

見出しを入れてみよう。

任意の文字またはタグを選択し、フォーマット見出し1を選択 コードビューに<h1>が入っているのを確認し、上書き保存にしてブラウザーを更新する

 文字を太くしてみよう

任意の文字またはタグを選択し、挿入 → html → テキストオブジェクトからボールドを選択 コードビューを確認し、上書き保存にしてブラウザーを更新する

フォントサイズの変更をしよう

任意の文字またはタグを選択し、挿入 → html → テキストオブジェクト → フォント → 6を選択 コードビューを確認し、上書き保存にしてブラウザーを更新する

色の変更をしよう

任意の文字またはタグを選択し、挿入 → html → テキストオブジェクト → フォント → 任意の色を選択 コードビューを確認し、上書き保存にしてブラウザーを更新する

リストタグをつけよう

任意のタグを選択し、画面上のメニューバー → 挿入 → HTML → テキストオブジェクト → リスト コードビューを確認し、上書き保存にしてブラウザーを更新する

フォントをかえよう

任意の文字またはタグを選択し、画面上のメニューバー → テキスト → フォント → 任意のフォントを選ぶ コードビューを確認し、上書き保存にしてブラウザーを更新する

 下記の文章を見本(1-0fin.html)通りにデザインしてみよう

INFORMATION

マッキントッシュコンピュータでの実習。

日本での90パーセント以上のグラフィックデザイナーが、マッキントッシュ・コンピュータを使ってデザインをしています。当アカデミーでも、すべて日本から輸入したマッキントッシュ・コンピュータを使用していますので、フォントやキーボードの問題はなく、また、アプリケーションもすべて日本語版です。受講生のペースや、能力に合ったカリキュラム受講生のペースに応じたグラフィックデザイン技術の習得を基本としていますので、「1クラスを最大6名」と少数制の教室にしています。受講生の個性や能力の違いによるデザインレベルに合わせて、講義内容をフレキシブルにアレンジすることをコンセプトにしています。短期で自在な、集中講義型日本でのデザイン学校は、基本的には2年間が履修のサイクルとなっていますが、当アカデミーでは、働きながら、あるいは他の勉強をしながらグラフィックデザインを学びたいという方を主な対象にしていますので、それぞれの方の時間の負担が少ないように、短期で自在な時間割を組みます。

「中国の物価の安さ」をそのまま反映した受講料

日本でのデザイン学校では時には、終了までの費用が200～300万円もかかることもあります。しかし、当アカデミーは、中国・上海の現地法人のアカデミーですので、中国の物価の安さがそのままです。日本の専門学校に比べ、5分の1から、8分の1の費用で、グラフィックデザインの技術を習得できます。日本から留学する価値も充分あります。

日本ではあまり例を見ない実践の中での技術習

当アカデミーは、アカデミーであり、グラフィックデザイン制作プロダクションの機能も備えています。制作プロダクションも兼ねたデザイン学校は、日本ではあまり例を見ない形態です。小規模だからできることでしょう。これにより、実際のデザインワークに触れながらグラフィックデザインを学ぶことができ、また、時にはアシスタント・デザイナーとして働くこともできます。

・・・などと色々なことができるhtmlタグですが、新しいサイトにはhtmlタグはほとんど使われていません。 コードビューで確認すると、とても文章が長くなっていることに気づきます。 数ページのサイトであればhtmlタグを使用して問題ありませんが、ページ数が多くなるほど、すべてのページに記入しなければならないhtmlは不便です。

そこでサイト内のすべてのページに適用されるスタイルシート(CSS)というものをを使用します。 検索ロボットはhtmlコードの中を検索するので、HTMLにデザイン要素を入れないことによりすっきりし、製作者、閲覧者ともに利用しやすいサイトになります。

WEBサイト作成はなんとなく作り始めるのではなく、明確な目的を持ってはじめなければなりません。
なぜなら、ページ数によりレイアウトが変わったり、素材を自分で作成する場合は素材一つ一つのサイズを
細かく決めていかなければならないからです。

1.目的の設定

目的は何か、ターゲットは誰か?( 宣伝、広告、販売、集客・・・)
目的を明確にすることでサイトのイメージが決まる。

例：）相川貿易 例：）ベスト不動産 例：）アールマナー	例：）Amazon 例：）愛可愛咨詢（上海）有限公司
例：）yahoo 例：）亚洲化学产业信息	例：）urbanroots 例：）nanfan shanghai

2.サイトの構成

サイトマップの作成、ページ数の決定

3.デザイン

デザイン、各サイズの決定

4.素材作成

サイズに合わせて素材集め、
デザインができる人は作成

5.構築

素材を組み立てる
スタイルシート(後で説明)を利用する

6.サーバーにアップ

完成!!
このコースではここまでの基礎を学びます。

作成したWEBサイトはどのように閲覧者が見ることができるのか

WEBサイト作成は皆さんのパソコンで行いますが、そのままでは誰も見ることはできません。そこで誰もがアクセス可能な「サーバー」にアップロードすることで自分のパソコンで制作したホームページを世界中の人に見てもらうことが出来ます。

フォルダーについて

フォルダーとは、コンピュータの中の引き出しのようなもの
フォルダーの中にフォルダーもできる
一つのWEBサイトの材料はすべて一つのフォルダーに入れる
そのフォルダーをローカルフォルダーと呼ぶ

新規サイトフォルダーを作る

1.デスクトップで右クリック
2.新規作成 → フォルダー
3.任意の名前をつける

「自分の名前」フォルダーを作成

これでサイト「自分の名前」用のフォルダーが出来ました
使用するファイルはすべてこのフォルダーに保存する

「自分の名前」フォルダーの中に「img」フォルダーを作成

サイト「自分の名前」で使用するものはすべてのイメージはこのフォルダーに保存する

このコースの目標

ｈｔｍｌ、ｃｓｓ、ドリームウィーバーの基本が分かり、自由に扱え、レイアウトができること
個人の目標、興味度に応じてコースの段階をステップアップ、選択できる
（プログラムの設置、フラッシュ作成、アイコンなどのweb素材作成･･･など）

ショートカットについて

ショートカットとは、マウスを使用しての動作を、キーのみですることである
早く覚えたほうが、それだけ早く作業ができる

専門用語

専門用語はしっかり覚える。早く覚えたほうが、それだけ早く作業ができる。

WEBデザインとは

主にWEBサイトを最終の形に「デザイン」すること。情報を整理すると考えてよい
最終目的は文字情報を伝達すること
そのために、文字を工夫し、構図を考え、色を決める。つまりレイアウトをする

ホームページ作成の上での注意点

使用するファイル名はすべて半角英数字を使用すること
※もともとプログラムは英語なので他の言語は読めない
サイズはピクセル(px)を使用すること

サイトの幅について

現在、一般的なモニターは1024px×654pxですが、幅いっぱいを使って見る閲覧者は少ない(お気に入り
などのサイドバーを出している)ので、幅は750px～900pxに設定するとよい

800px　例

幅いっぱいサイト　例