ページの更新を解説
TOP*サイト作成*ページ更新*サイトを開く*白紙から*転送
 サイトを作成しテンプレートから簡単にページを作成しました.ここではテンプレートページを編集して、自分のページにカスタマイズしていきます.
●ページのタイトル名の変更
●背景/文字色の変更
●テキストの編集
●ロゴの作成
ロゴの保存
●表の作成
●リンク文字の編集
●メールリンク
テンプレートからページ作成
テンプレートから作成ページ
テンプレートから作成ページ
テンプレートからページ作成 テンプレートからページ作成
テンプレート変更ページ
テンプレート変更ページ
●サブページの更新 応用
完成データダウンロードはこちらをクリック

TOPページ完成図
●黒い文字をクリックすると 解説ページに飛びます.

●ページ編集タブをクリックして編集モード(ページが編集できる状態)します。プレビュータブは編集したページがネット上で正しく表示できているか確かめるモードです。
ページ編集で書き換えたら すぐプレビュータブをクリックして確認する 癖をつけましょう。

ページの属性
●ページのタイトル名、文字色、背景色、変更します.リンク色も変更できます.
メニューの編集→ページの属性をクリックします.属性のダイアログが表示される.

ページのタイトル名の変更
●ページの属性でページのタイトル(ブラウザのタイトルバーに表示)の変更を行う。
ページ情報タブをクリックしページタイトル欄にページの内容を表すタイトルを入力する。
ヒント:ページタイトルはブラウザのタイトルバーに表示される文字日本語でも英字でも名前を付けることができます。.タイトルを付けないと無題となりかっこ悪い表示になります(^^ゞ
▲このページのTOPへ
●タイトルバーにページタイトルが表示される

背景/文字色の変更
●@背景/文字色のタブをクリック 
A文字色の▼クリックして色パレットより見えやすい色を、クリックして選択する。

●文字の色が黒色に変更された。

●カラーギャラリーをクリックし、背景の色または壁紙(柄がついたもの)に変更できる。
色のカテゴリから好みの色または壁紙をクリックすると、右に背景と文字色リンク色が
セットになっているサンプルが見えてくる、好みのサンプルをクリックすると変更できる。
ヒント;背景は後ほどからでも変更可能です。

●タイトルバーにタイトルが入り、背景、文字色も変更できました。

テキストを書き換える
●ページ編集タグをクリックしTOPページの説明文を書き換える。表の中に文字が入っているので表の中を,ダブルクリックすると、すべての文字が選択される、デリートキーを押し文字を消し内容を入力していく。

●入力できたらプレビュータブをクリックしtopページがネット上で正しく表示できるか確認する.

●かんたんなビバーの上書き保存ボタンをクリックしTOPのページである、index.htmlのファイルの変更分を上書き保存する。

▲このページのTOPへ
ロゴ作成
●TOPにページの看板となるものを入れる ロゴを入れる。
@ページ編集タブが選べれていることを確認して、ロゴを入れる場所にカーソルをクリックしてだしておく。
Aメニューの挿入クリック→ロゴをクリック

●ロゴにする文字を入力し、A文字の詳細設定をクリックする。

●フォント(文字のデザイン)の種類▼をクリックし、リストの中フォント名をクリックしてを選ぶと右窓にプレビューが現れるのでaボタンを押して拡大して ロゴのデザインの形などを見ることができる。

●ロゴの色をパレットからクリックして選択する。次へクリック。

●ロゴの縁飾りのデザインを一覧からクリックして選ぶと右にプレビューとして表示される。次へをクリック。

●文字の効果 ここでは影をクリックして選択した。 完了をクリック。

●ロゴの全体像がプレビューで表示されます。様子をみてOKであれば完了ボタンを押す。

●カーソルがあった場所にロゴ配置されました。

●ロゴをクリックしてツールバーの中央ぞろえボタンを押します。ロゴが中央に移動します。

ロゴの保存
●作成したロゴをサイト内のimageフォルダに保存します. 上書きボタンをクリックします.

ファイル保存ダイアログが表示されます.
特に注意することはファイル名は全て半角英数で名前をつけることと、ドットと拡張子は消さないこと.
また、ロゴなど自分で作成したものはlogo1....logo2と連番で名前がつけられてきます、連番のままで保存すると次に作成したロゴと同じ名前となる場合があり上書きすると初めに作ったロゴは失われてしまうので、連番のままでの保存は避けましょう.

@クリックして選択
Alogo1だけを消して半角英数で名前を入力する ここでは top-rogと入力
B保存ボタンを押します.


●画像をクリックしてデリートキーを押し画像を消し、新しく画像に入れ替えます。

表の作成
●表の中に画像を入れて表示させる。
表を入れる位置にカーソルが出ているか確認する。

▲このページのTOPへ
●メニューの表をクリック表の挿入をクリックする。

●表を作成するダイアログが表示される。ここでは行数1列数2の表を作る。数値を入れたらOKボタンを押す。
ヒント:下向き▼クリックするごとに数値が小さくなる、上向き▲クリックするごとに      数値が大きくなる。

●表が作成されました。表の枠を表示しない設定に変更します.


画像の挿入
●メニューの挿入をクリック 写真をクリックしする。
ヒント:表の中にTOPページを飾る写真を入れる、ウィザードから簡単に設定できます。

●写真の挿入ウィザードが開くので、保存している画像の場所を参照して画像を挿入する。
@ファイルをクリックしとファイルが保存されている場所(フォルダ)を開く。
A開くダイヤログの挿入したい画像をクリックする。
B開くをクリックする。

●挿入する画像がプレビューに表示されます.次へをクリックします.

●挿入する画像の画質を修正できます.次へをクリック.

●画像のサイズを指定する. 次へをクリック

●画像に縁飾りを付けることもできます.縁飾りの効果のリストをクリックすることで、プレビューに表示されるので様子をみなから 決め完了ボタンを押す.

▲このページのTOPへ
●TOPを飾る画像が加工され カーソルがあった位置に表示されました.

●上書き保存ボタンをクリックし保存する.

●セルを分割する
@カーソルの位置は表の分割したいセルの中に表示させる
Aツールの行の縦分割ボタンを1回クリック

●セルが2つに分割されました..
カーソルがセルの中にあることを確認しておく.

サムネイルの作成
●挿入をクリック画像の効果ポイントしサムネイルをクリックする.
サムネイルとはサンプル画像を小さく表示し、クリックすると画像が大きく見える効果です.
サンプル→

●Webフォトギャラリー表示される.画像が保存してある場所を探してフォルダ@クリックし、右側に画像が現れるので挿入したい画像をクリックする.

●お勧め設定選択 次へをクリック
●リンク先設定 画像  完了をクリック.

●カーソルがあった位置にサムネイル画像が表示されました.

サムネイルの保存
●サムネイル画像を保存します. 上書きボタンクリック.

●ファイルの名前を付け替える@のDSCF0116をクリックしてAのファイル名ボックスにファイ名だけ消して、半角英数で付け替える.
同じようにDSCF0116_thumbをクリックして、ファイル名ボックスにファイ名だけ消して、半角英数で付け替える.

●サムネイル画像の場合自動的に2枚写真がサイズの違う写真が作成される.2枚のファイルは違う名前に付けて保存する

●サムネイル画像が保存されました.

●プレビュータブをクリックしてページをを確認する.サムネイル画像の上にマウスポインタを持っていきクリックして画像が拡大して表示されるか確認する.

●下のセルにもサムネイル画像を入れる

リンク文字の編集
●リンク文字部分をダブルクリックする ぞのまま文字を入力する

●リンクの設定は生かされて文字が変更されます. バーゲン情報とお店リンク部分も同じ方法で文字を変更する.


メールリンク



●上書きボタンをクリックし保存します.

サブページの更新 応用サンプル
sb1.html インラインフレーム
sb3.html 外部リンク
ビルダービギナーズガイド TOPへ このページのTOPへ
inserted by FC2 system