 |
|
|
|
|
|
「Webデザイン」の内容 |
●「Webデザイン」について●●作例●●HOMEへ |
|
|
|
|
|
MacとWindowsの違いって？
画像はなぜ軽くするのか？
HTMLってどうなっているの？
CSSって便利そうだけど？
など、
この章ではWebデザインの際に
知っておくとためになることが
書いてあります。 |
1.知っておくとためになること
1-1 どういった依頼かを確認する
全く最初から起ち上げる
サーバーをどうにかする
すでにWebサイトがあり、コンテンツの一部を作る
フォーマットデザインをする
1-2 できることとできないこと
MacとWindowsの違い
ブラウザのバージョン
表示色（8ビットと24ビット）
フォントについて
COLUMN Windowsの文字はMacより大きく見える
ファイルネームの付け方
画像を動かす
COLUMN FLASHの別の使い方
プラグイン
メール
1-3 画像について
サイズと容量
Webカラー
ファイル形式（圧縮と保存）
Jpeg
GIF
1-4 HTMLについて
HTMLの変遷
HTMLの基本構造
BODYパートの内容
TABLEパートの指定順序
1-5 CSSについて
CSS（カスケーディング・スタイルシート）について
CSSを使用したページのブラウザごとの見え方の差−1
CSSを使用したページのブラウザごとの見え方の差−2
|
|
|
|
|
|
Webサイトの作り方は
広告や雑誌の作り方と同じです。
この章では
構成とサイトの設計について
書いてあります。 |
2.サイトの構成を考える
2-1 目的と要素
2-2 構成（ディレクトリ）を図にする
COLUMN ナビゲーションとは
COLUMN Home（表紙）ページのファイル名
2-3 オードリー・ザ・デザインのサイトの場合
|
|
|
|
|
|
Webページのレイアウトの方法は
さまざまですが、
この章では
Photoshop6.0のスライス機能から
HTML書き出し、
GoLive5.0のレイアウトグリッド機能、
テーブルを使ったレイアウト、
フレームを使ったレイアウトの方法などを
説明します。 |
3.Webデザインの方法と手順
3-1 表紙を作る前にやること
ラフスケッチを作る
全体のサイズ
3-2 Photoshopで作る
Photoshopでラフを具体化する
COLUMN 画像の切り抜きの簡単な方法
COLUMN 画像の縮小-1
COLUMN 画像の縮小-2
Web用の素材に仕上げる
COLUMN ［Web用に保存］の落とし穴？
画像を個別に書き出す
PhotoshopでHTMLに書き出す
バナー（簡単なGIFアニメ）を作る
バナー広告の例
3-3 レイアウトグリッドで作る
レイアウトグリッドを設定する
テーブルを使う（裏ワザ？）
ロールオーバーボタンにする
3-4 Webページに仕上げる
サイトを作成する
COLUMN GoLiveでサイトを作る
3-5 リンクを張る
COLUMN クリッカブルマップ
COLUMN Altテキスト
3-6 フレームで作る
フレームの仕組み
title.htmを作る
contents.htmを作る
COLUMN スペーサーGIF
home.htmを作る
フレームセットを作る
COLUMNターゲットと行き先
COLUMN2つのフレームを同時に切り替える
COLUMN PDFやWordなどのファイルを表示する
3-7 テーブルで作る
テーブルの設計
Photoshopで画像を作る
テーブルを作る
COLUMN テーブルサイズ（ピクセル指定とパーセント指定）
COLUMN テーブルの選択
COLUMN 文字のサイズ指定
ページのバックに色を付ける
COLUMN テーブルの仕組み
COLUMN スペーサーGIFでインデントと行間を広げる
COLUMN スペーサーGIFとスペーサータグの違い
3-8 メール、アンケートページ
3-9 アクセスカウンター
|
|
|
|
|
|
CSSはブラウザによって
見え方が大きく異なります。
この章では
CSSの使える部分だけを説明します。 |
4.CSSの現実的な使い方
4-1 フォントサイズと行間の違いを調整する
4-2 内部スタイルシート
タグ
クラス
4-3 外部スタイルシート
|
|
|
|
|
|
この章では
簡単なJavaScriptを使った
テクニックや、
ImageReady3.0を使ったテクニックの他、
誰も教えてくれない、ちょっとしただけど
とても気になること、などを紹介します。 |
5.Webデザインテクニック
Tech-1透過GIF
COLUMN 画像の縮小−3
Tech-2JPEG画像の切り抜き
Tech-3背景画像のデザイン1−イラストを使う
Tech-4背景画像のデザイン2−パターンを使う
Tech-5背景画像のデザイン3−グラデーションを使う
Tech-6大きな画像を少しでも軽くする
Tech-7GIFアニメ1−イラストを動かす
Tech-8GIFアニメ2−画像の一部分を動かす
Tech-9ロールオーバー＋GIFアニメ
Tech-10既存のページにロールオーバーボタンを取り込む
Tech-12ポップアップメニューからリンクする
Tech-13ウインドウサイズの固定
Tech-14角丸を作る
テーブルと角丸の画像を使った応用例
Tech-15縦組みの表を作る
COLUMN Windowsで見ると1文字はみ出す
テーブルのケイに色を付ける
|
|
|
|
|
|
レイアウトが終わったら
いよいよクライアントへ見せます。
この章では
クライアントチェックの際の注意点、
アップロードの方法、
検索サイトへの登録の方法などを
説明します。 |
6.クライアントチェックとアップロード
6-1 クライアントチェック
Check 1 Mac上でチェック
Check 2 Windows上でチェック
Check 3 クライアントの環境をチェック
Check 4 どのマシンでチェックするか
Check 5 できることとできないことをはっきりしておく
Check 6 プリントしたものでチェック
6-2 GoLiveでサイトチェックする
サイトフォルダを作る
サイトをチェックする
6-3 サイトの管理
クライアントがサイトを管理する
デザイナーがサイトを管理する
6-4 アップロードする
アップロードに必要なもの
GoLiveからアップロードする
サーバーへの接続のための下準備
初めてサーバーにアップロードする
変更部分のみをアップロードする方法
ローカルマシン上のデータをアップデートする方法
6-5 検索サイトへの登録
COLUMN 登録代行サービスを利用する
ロボット検索によって登録するサイト
<META>タグ―キーワードを書き込む
制作者からの申請を受けて登録するサイト
|
|
|
|
|
|
|
◆index
|
|
|
|
|
|