 |
|
|
|
|
|
「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カラー
ファイル形式（圧縮と保存）
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ページのレイアウトの方法は
さまざまですが、
この章では
GoLive4.0のレイアウトグリッド機能、
テーブルを使ったレイアウト、
フレームを使ったレイアウトの方法を
説明します。 |
3.Webデザインの方法と手順
3-1 表紙（Home）を作る
ラフスケッチを作る
全体のサイズ
Photoshopで素材を作る
COLUMN 画像の縮小-1
COLUMN 画像の切り抜き
COLUMN 画像の縮小-2
COLUMN ImageReadyで作るシャドウ効果
3-2 レイアウトグリッドを使ったレイアウト
とりあえずレイアウトしてみる（準備）
サイトの作成
COLUMN GoLiveでサイトを作る
ロールオーバーボタン
リンク
COLUMN Altテキスト
COLUMN クリッカブルマップ
マージン
3-3 テーブルを使ったレイアウト
テーブルを使ったレイアウトの手順
COLUMN テーブルサイズ（ピクセルとパーセント）
COLUMN 文字のサイズ指定
COLUMN スペーサーGIF
COLUMN スペーサーGIFでインデントと行間を広げる
テーブルのセンタリングとマージン
COLUMN NOWRAP
COLUMN テーブルの仕組み
3-4 フレームを使ったレイアウト
フレームの仕組み
フレームページを作る
COLUMN ターゲットと行き先
2つのフレームを同時に切り替える
COLUMN PDFやWordなどのファイルを表示する
3-5 メール、アンケートページ
3-6 アクセスカウンター
|
|
|
|
|
|
CSSはブラウザによって
見え方が大きく異なります。
この章では
CSSの使える部分だけを説明します。 |
4.CSSの現実的な使い方
4-1 フォントサイズと行間の違いを調整する
4-2 内部スタイルシート
タグ
クラス
4-3 外部スタイルシート
|
|
|
|
|
|
この章では
簡単なJavaScriptを使った
テクニックや、
ImageReady2.0を使った
テクニックを紹介します。 |
5.Webデザインテクニック
Tech-1透過GIF
COLUMN 画像の縮小−
Tech-2JPEG画像の切り抜き
Tech-3背景画像のデザイン1−イラストを使う
Tech-4背景画像のデザイン2−パターンを使う
Tech-5背景画像のデザイン3−グラデーションを使う
Tech-6大きな画像を少しでも軽くする
Tech-7GIFアニメーション1−イラストを動かす
COLUMN バナー広告
Tech-8GIFアニメーション2−バナー風ナビゲーション
Tech-9画像の一部分を動かす（スライス＋GIFアニメ）
Tech-10ロールオーバー＋GIFアニメ
Tech-11既存のページにロールオーバーボタンを取り込む
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 登録代行サービスを利用する
ロボット検索によって登録するサイト
制作者からの申請を受けて登録するサイト
|
|
|
|
|
|
|
◆索引
|
|
|
|
|
|