デザインの学校 ウェブデザイン応用編第2回

2007.4.14.sat.
第2回

まず、ここの受講生のみ閲覧可能!なサポートページの紹介からです。
受講生サポートページとは…
サイト制作に便利なサイト
分かりやすいリファレンスサイト
素材集・テンプレート集サイト
アクセシビリティ・ユーザビリティに関するサイト
などなど
サイト制作に有効なサイトのリンク一覧を主に、ほか、お役立ち情報などを本スクール受講生限定で発信していくページとなっています。
と、言うわけで、学生の皆さんはどんどんここを有効活用してくださいね。
では早速、前回同様に、基礎編で学んできたことの復習です。
今回は、Dream Weaverを使用してのサイト製作~サイト公開までの流れを一挙に復習
1.サイトの管理
Dream Weaver内でサイトファイルを管理する際には、
アップロードする先のFTPサーバー情報
・FTPアドレス
・FTPアカウント
・FTPパスワード
・ファイルを格納するディレクトリ名

以上の4項目が必要になってきます。
これを予め、Dream Weaverのサイトの管理機能に登録することにより、
Dream Weaver内でのサーバーへのアップロード/ダウンロードの一元操作が可能になります。
また、
PC内で編集中のサイトファイル一覧が見える状態:ローカルビュー
FTPサーバー内のサイトディレクトリ以下が見える状態:リモートビュー

という言葉の違いに要注意!!
Dream Weaverは、PC上のファイルを編集するのか・FTPサーバー上のファイルを編集するのか、
それをワンクリックで切り替えることが、可能なのです
気づかずに、サーバーのデーターをさわっていた!!なんてことも!!?
便利なことには必ずリスクはついて来るもの。
きちんと覚えて使いこなしましょう!!
2.サーバーについて
先ほどの、1でアップロード先のサーバー情報さえ間違えなく入力してあれば、クリックひとつでアップロード・ダウンロード操作が可能です。
各自先週制作したバナーをアップロードしてみました。
ネット上でしっかり見れたでしょうか?
サーバーの使い方等を学んだところで、実際にサイトをデザインしていきます。
サイト制作1.
●写真の加工
今回のテーマは「山」です。
WDSで予め準備されている自然などの写真素材を使用していきます。
写真は必ず調整・編集・レタッチを施します。
まず Fire works で写真の色調整をします。
トーンカーブ・レベル補正・・・を使い、好みの状態に仕上げましょう。
●ボタンの制作
メインの写真イメージの上にボタンを作ります。
ボタンは前回同様、ロールオーバーにする予定なので、マウスオーバーした状態のボタンも制作しておきます。
グラデーションを使ったボタンにする時は、同系色でまとめるとキレイに見えます。
完成したら、スライスを切って書きだします。
●HTMLの作成
素材がそろったところで、コーディングします。
●ファイルのアップロード
完成したら、使用している画像ファイル・HTMLファイルをアップロードします
アップロードしたいファイルを選択し、Dream Weaver機能の[ PUT ]ボタンをクリック!
以上でアップロード完了です!!
あとは、実際のURLを叩いて、ブラウザできちんと表示確認を行いましょう。
きちんと表示されていたら、完了!
次は、CSSについて
CSSとは、文字色・サイズだけにとどまらず、全体のレイアウトや文字の行間、またはその他のデザインに係わる詳細な設定が可能なプログラミングです
名称は、Cascading Style Sheetsの頭文字を取っています。
CSSファイル内に詳細な設定を記述し、HTML上の各所でそれらの設定を呼び出します
CSSのメリットは、フォントスタイルなどの一括管理が可能なこと。
また、タグのように場所もとらず、HTMLソースコードがより簡潔になることもメリットのひとつです。
ご存じない方は、まずおためし下さい。
HTMLリファレンス
http://dezin.jp/contents/reference.html
のCSSのサンプルに沿って、勉強していきました。
さて、このHTMLリファレンス。
この中で、実はきちんと知っておきたいのはBOXの概念。
パディング、マージン・・・等の違いをしっかり把握しましょう。
リファレンスのページに載っているBOXの画像が分かり易いですので参考に!
今後のサイト制作がすこーしスムーズになりますよ。

今日の授業はここまでです。
来週から、もっと具体的にCSSも勉強していくことになりますので乞ご期待!?
皆さんお疲れさまでした~!

 

WEB(ホームページ)デザイン中級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

*

PAGE TOP