@rt web ビギナーズガイド
サイトマップ サポートサイト DDNトップページ
TOP WEBサイトのしくみ WEBサイトを作る前に @rt webについて WEBサイトの作成手順 リンク
WEBサイトの作成手順
テキストエディタ
初級編
準備
サイトをコピーする
コンテンツ名を変更する
画像を作成する
  サイトタイトル
  メニューボタン
htmlファイルの編集
htmlファイルを開く
ページタイトルを変更する
ファイル名を変更する
サイズのリセットをする
画像を削除・挿入する
テキストを入力する
リンクを設定する
ファイルを転送する
応用編
メニューボタンを増やす
JavaScriptを設定する
Flashを挿入する

Other html editor
Dreamweaver
ホームページ・ビルダー
GoLive
Frontpage
ここでご紹介するのはAdobe Photoshopを使用した制作手順の一例です。さらに詳しい手順や、その他アプリケーションの操作方法は各画像処理ソフトの説明書等をご覧ください。

画像を作成する
使いたいボタンが収録されていない場合は、文字の載っていない空の画像を使用して新しく作成します。
●ボタンの画像を作成する

1. コピーしたファイル内の第一階層目にあるindex.htmlをwebブラウザで開きます。

2. トップページに記載されているnavi.htmlを選択します。
>各パーツ一覧が表示されます。

3. buttonのページを開き、テキストの乗っていないボタン画像の上で右クリックし、「名前を付けて保存」を選択します。

4. 保存先をマイドキュメントやデスクトップなど、自分が分かりやすい場所に設定し、保存を選択します。

5. Photoshopを開き、メニューバーから[ファイル]-[開く]を選択します。

6. 新しく保存されたボタン画像を選択し、開くを選択します。

7. メニューバーから[イメージ]-[モード]-[RGBカラー]を選択します。
*画像がJPEG形式で保存してある場合は必要ありません。

8. 文字ツールでタイトルを入力します。

9. メニューバーから[ファイル]-[Web用に保存]を選択します。

10. 画像を最適化し、OKを選択します。
元画像と同じファイル形式(GIFなど)で最適化してください。

最適化するには2アップ画面にし、画像の形式(GIFなど)・カラー数などを調節し、画像のサイズを最適な容量に減らします。
画像の最適化の方法は画像ファイルについてをご覧下さい。

11. 保存場所を第一階層目にあるimageフォルダに設定し、ファイル名を入れ替えたい元のボタン画像と同じファイル名にして保存を選択します。
imageフォルダ内にあるメニューボタンの画像は、現在使用しているメニューボタンをページ上の左から、もしくは上から順番に「bt_01.gif」「bt_02.gif」「bt_03.gif」・・・という連番のファイル名に変更しています。マウスオーバー用に「bt_01_on.gif」「bt_01_off.gif」と2つある場合は、2つセットで同様に入れ替えを行います。
入れ替えたい元のボタン画像のファイル名の確認はindex.htmlにあるボタン画像の上で右クリックし、[プロパティー]を選択してファイル名を確認して下さい。

12. 上書きしますか?というウィンドウが開いたら上書きを選択します。

13. このサイトのボタン画像にはマウスオーバーが設定されていますので、1.から12.の作業をマウスオンの画像でも同様に行います。
(マウスオーバーが設定されていない場合は12.で完了です。)

実際にWeb上画像が切り替わった時に画像がずれてしまうことがあるので、マウスオフとマウスオン用の画像の大きさ、文字の位置などは全く同じにしてください。


BACK NEXT

TOP / WEBサイトのしくみ / WEBサイトを作る前に / @rt webについて / WEBサイトの作成手順 / リンク
サイトマップ / サポートサイト / DDNトップページ
Copyright (C) AIDIA Inc. All Rights Reserved.