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にデザイン要素を入れないことによりすっきりし、製作者、閲覧者ともに利用しやすいサイトになります。
| 専門用語 | SEO対策・・・簡単に言うと、検索が上位に来るように工夫すること |
|---|
