ホームページビルダー事典です。◎は重要事項です。
ホームページ作成の心構え
- ホームページはhtmlという言語で記述されています。この言語を知らなくてもホームページは作れます。しかし、html言語を徐々にに学んで行けば、ホームページについて一層広くくわしくわかるようになります。無駄なものを削除できます。また、コンピュータ全般についての知識を深めることができます。
- ホームページ作成には、パソコンの知識と操作の習得が不可欠で、一朝一夕に身に付くものではありません。下のことを指で記憶しておく必要があります。
- マウスの操作
- タイピング
- ワープロでの文字の入力と編集
- ソフトの起動
- ファイル管理の仕方
- とくにファイル管理は慣れないはじめての決まり事が多いので、うまくアップロードできないことが多い世界です。 Slow,
slow and no give-up. でコツコツはげんでください。習熟度は更新の回数に比例します。
索引
記数英● (クリックで説明コーナーへ)
- Excelファイルをリンクづけする ◎
- HotMediaクリエータ
- HTML構文チェック
- iモード用ページの作成
- Javaアプレット
- URLエディタ
- Wordをアップロードする ◎
あ● (クリックで説明コーナーへ)
か● (クリックで説明コーナーへ)
- 箇条書き→リストマーク
- カスタマイズ
- 画像に動きをつける
- 画像の透明化
- 画像の配置
- ◎画像の挿入(ブラウザから)
- ◎画像の挿入(ファイルから)
- 画像の配置
- 画像ファイルを自動的にimageフォルダに保存する
- カラーコード
- クリッカブルマップ→イメージマップ
- 罫線に色をつける
- 壁紙
- 行間の変更
- 行の追加、削除
- ◎区切り線
- 掲示板の設置
- 検索エンジンの設置
- 検索サイトへの登録
- ◎更新情報のスタンプを入れる
- 更新の仕方→ 【PPT】ホームページの更新の仕方
さ● (クリックで説明コーナーへ)
- サイト情報を更新しない
- サウンドの挿入
- ◎ジャバアプレット
- ◎ジャバスクリプトファイル
- ジャンプ→ページ ジャンプ
- 初期設定にもどす
- 書式の確認
- ◎水平線の挿入
- ◎ステータスバーに動くメッセージを表示
- スペルチェック
- スライドショー
- ◎セルの分割、結合
たな● (クリックで説明コーナーへ)
- ◎代替テキスト
- ◎タイトルの挿入
- デジすたマーカー
- 段落替え
- 地図からジャンプ
- チャットを挿入
- デジすたマーカー2
- 「どこでも配置モード」を「標準モード」にきりかえる
は● (クリックで説明コーナーへ)
- バックアップファイルをつくらない
- ◎背景の挿入
- ビジュアルサイトを開く
- 表示フォントを大きくする
- ◎表についての注意=空白セルにはスペースを
- 表にタイトルをつける
- ◎表の行のコピー
- 表の削除
- 表の挿入
- ◎表の中に壁紙を挿入
- 表の枠を絵柄に
- 表の枠を二重に
- 吹き出し
- ファイルの移動
- フォントを大きく
- ◎フォント属性の解除
- ◎フォントに背景色をつける
- ◎フォントを変更する
- ◎フォントをロゴに加工する
- ◎プリントスクリーン
- フレームで画像をかこむ
- ◎ページタイトルの挿入
- ◎ページ内ジャンプ
- ページの移動
- ホームページの更新の仕方
- ◎ホーバーをかける
- ーバーをかける→【PPT】ホームページの立ち上げ方
- 保存する
- ボタンの挿入
- ポップアップ
- 翻訳
ま● (クリックで説明コーナーへ)
- ◎マーキーの挿入
- まるごとチェック
- 見出しエディタ
- 文字→フォント
やらわ● (クリックで説明コーナーへ)
- ◎ラベル
- ◎リストマーク
- リンク先を開く
- ◎リンク付け → 【PPT】新しいページを作成しリンクづけをする
- リンク文字の色の変更
- リンク文字の下線をなくす
- ◎レイアウト枠の挿入・削除
- ◎レイアウト枠に動きをつける
- 列の追加、削除
- ◎ロールオーバー効果を設定する
- ◎ロゴの挿入
- ロボット検索を回避する
ホームページビルダー事典のコンテンツ
- Excelファイルをリンクづけする ◎
- [挿入メニュー]―[ファイル]―[Excelファイル]―[ファイル名]―[参照:abc.xls]―[追加:( 選択)]―[ワークシート:(
すべてにチェック)]―[すべての属性を挿入する]―[完了]。 ファイル名はローマ字半角で
- HotMediaクリエータ
- スライドショー、パノラマ写真を編集します。 [ツールメニュー]―[HotMediaクリエータ]―[ヘルプMenu]―[HotMediaサンプル]
- HTML構文チェック
- htmlの記述の間違いをチェックする機能です。
まず、エラー行のライン数を表示する機能を追加します。
[ツールメニュー]―[オプション]―[ソース編集]―[その他]―[ライン数表示:チェック]
エラー構文のチェックは下でおこないます。
[ツールメニュー]―[HTML構文チェック]―[エラー行を表示]
項目のチェックは「アクセスビリティ チェック」でおこないます。
- iモード用ページの作成
- [表示メニュー]―[かんたんナビ]―[スタートボタン]―[サイトを作成する]―[サイト名:スルメの館]―[次へ]―[新規にトップページを作成する]―[トップページのファイル名:indexi.html(注意:アイとエルを追加してください。]―[完了]
[表示環境]―[iモード]―[次へ]―[次へ]―[テーマ:グルメ]―[ページ一覧]―[満載!グルメ情報:スルメの館]―[和食:スルメの歴史]―[洋食:スルメ料理]―[中華:スルメのリンク集]―[ページタイトル:スルメの館]―[色のカテゴリ:黄の壁紙]―[背景と文字色の組み合わせ:右列一番上]―[完了]
[転送設定をおこないますか?:いいえ]
[ファイルメニュー]―[すべて保存]―[My Documents:iフォルダをクリック]―[保存]
[ツールメニュー]―[iフォルダを転送]
写真の編集は、
[ツールメニュー]―[iフォトビルダー]でおこないます。
- Javaアプレット
- プレビューを見ます。
[素材タブ]―[Javaアプレット]―[右クリック]―[アプレットのプレビュー]
文字の変更ができるアプレット(ファイル):
AirShow Building(3文字以内)
ImgScrol
MsgBoard:[右クリック]―[アプレットの説明]
SgnBoard
ShoeFont
Stadium(4文字以内)
Stretch WaveText
文字の変更
[ファイルを作業画面にドラッグ]―[右クリック]―[属性の変更]―[パラメータタブ]―[アプレットパラメータ]―[text
xxx:クリック]―[値:文字の入れ替え]
- URLエディタ
- リンク切れや画像に「代替テキスト」があるかないかのチェックをします。
- Wordをアップロードする ◎
- [Word]―[ファイルメニュー]―[名前を付けて保存] 保存場所をFTPで確認してください。
Word文書を編集する場合は、[Word]―[ファイルメニュー]―[開く]―[…]から
ファイル名はローマ字半角で
- ●あ
-
- アイコンの挿入 ◎
- アイコンを挿入する
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[アイコン]
- あいさつ文字の挿入
- 「Welcome to XXX's Page 」を動きをつけて表示します。プレビューは画像を右クリック。
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[Javaアプレット]―[Stretch:ドラッグ]
Stretchを右クリックし、「アプレットの説明を見る」をクリックすると、フォント、文字の色、背景色の編集の仕方の説明があります。
幅と高さをかえる
<applet codebase="Stretch" code="Stretch.class" width=407
height=60>
メッセージをかえる
<param name=text value="Welcome to Homepage Builder !!">
フォントの色をかえる
<param name=fg_color value="#ffff00">
→ カラーコード
背景色をかえる
<param name=bg_color value="#ffff00">
コマ間隔をかえる
<param name=pause value="300">
<param name=href value="">
- アクセスビリティ
チェック
- ページの利用しやすさをチェックする機能です。ページタイトルがぬけていたり、画像に代替テキストがなかったりした場合、指摘してくれます。
[ツールメニュー]―[アクセスビリティ チェック]―[チェック]
- 新しいページを作成して、トップページとリンク付けをする ◎
- スタンダードスタイルの標準モードで新規作成します。
[ファイルメニュー]―[標準モードで新規作成]
[ページ頭に「トップページへ」とタイプ]―[「トップページへ」を選択]―[ツールバーの「リンクの挿入ボタン」をクリック]―[ファイル名:参照ボタン]―[index]―[OK]
[ファイルメニュー]―[名前を付けて保存]―[newpage2.html(例)]
[「トップページへ」を右クリック]―[リンク先ページを開く]―[「ページ2へ」と入力し、選択]―[リンクの挿入ボタン]―[ファイル名:参照ボタン]―[newpage2.html(例)]―[OK]
- アニメーションの作成 ◎
- [ツールメニュー]―[ウェブアニメータの起動]アニメーションの挿入
アニメーションを挿入する
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[アニメーション]
- アンダーラインを表示しない
- →リンク文字の下線をなくす
- イメージマップ
- 地図や画像内のある部分をクリックすると、リンク先へジャンプするようにします。
[ホームページビルダー]―[画像:右クリック]―[編集メニュー]―[かんたん編集]―[イメージマップの編集]
- [地図や画像:右クリック]―[画像を編集]―[イメージマップの編集]―[左上の〇などのマークをクリック]―[範囲を描く]
*リンク箇所を複数つくる場合は、毎回〇などをクリックし、範囲を描きます。
- イラストの作成
- →ウェブアートデザイナー
- イラストの挿入 ◎
- イラストを挿入する
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[イラスト]
- 色を登録する
- [表示メニュー]―[カラーパレット]―[スポイド]―[色をクリック]―[登録]
- インラインフレーム
- [挿入メニュー]―[その他]―[HTMLタグ]―[タグ]―[IFRAME]―[挿入ボタン]―[…]
- ウェブアートデザイナーを使う ◎
- IBMのホームページビルダー付属の画像をいじくるソフトです。文字のタイトルロゴ、ボタン、バナ―もつくることができます。
-
- 例:最初にホームページビルダー内のウェブアートデザイナーを立ち上げておきます。
ウェブアートデザイナー
[メニューバー]―[ツール]―[ウェブアートデザイナーの起動]
画像をコピーします。デジカメの画像をオススメします。下は暫定的な措置です。
[Google画像検索]―[検索:雲]―[画像をクリック]―[上段:イメージを最大化]―[画像:右クリック]―[コピー]
ウェブアートデザイナーに貼り付けます。画像を編集します。
[貼り付け]―[オブジェクトの編集ボタン(「ツール」の下)]―[幅:300ピクセル]―[右上×ボタン]
「効果パレット」ボタンなどを活用して画像を編集します。編集を元に戻すには、「元に戻す」ボタンをクリックします。
画像を保存します。
[ファイルメニュー]―[ウェブ用保存ウィザード]―[選択されたオブジェクトを保存する。(選択されていない場合は、画面右下のサムネイル画像をクリック)]―[次へ]―[jpeg]―[次へ]―[ファイルに保存]―[完了]―[ファイル名:xxxx]
注)「オブジェクトスタックの表示」ボタンをクリックすると、右下に小さい画像があらわれます。
画像をホームページビルダーのページに挿入ます。
[ホームページビルダー]―[挿入部分にカーソル]―[メニューバー]―[挿入]―[画像ファイル]―[ファイルから]―[…]
注)「レイアウト枠の挿入」ボタンを使えば、画像を好きなところへ配置できます。→「レイアウト枠の挿入・削除」
保存して、サーバーにアップロードし、確認します。
[メニューバー]―[ファイル]―[すべて保存]
ファイル転送:[…]
その他
説明文(テキスト)の挿入
左列操作ツールバーの文字(A)ボタン。下段で色とサイズを選びます。
左最上段のオブジェクト選択ボタンで文字列を選択し、矢印キーで移動します。
-
- ウェブアートデザイナーの使い方??
ウェブアートデザイナーのFAQ
-
- ウェブアニメータを使う ◎
- ・ アニメーションの作成ツールです。
・ プロパティボタンで、サイズ、背景色、くり返しの修正はできますが、その他は作り直しです。
・ [アニメーションウィザード]―[文字アニメーションを使用してアニメーションを作成]―[次へ]―[背景を指定しない]―[次へ]―[文字文字:悠々自適]―[効果の種類:(
選択)]―[OK]。
「完了」の前に、「戻る」ボタン、「次へ」で効果の種類をえらび直してください。
・ 画像のアニメーション
・[ファイルメニュー]―[アニメーションウィザード]―[1枚の画像ファイルから…]―[画像ファイル名]―
[C:\Program Files\IBM Homepage BuilderV7\sample\image\photo\xxx.jpg]―[次へ]―[プレビューボタン]―[開始イメージと終了イメージの入れ替え]
- ウェブビデオスタジオ
- ビデオの編集をします。
[ツールメニュー]―[ウェブビデオスタジオの起動]
- ●か
-
- 箇条書き
- →リスト
- カスタマイズ
- カスタマイズとは使い勝手がよくなるように、自宅のコンピュータの設定を変更することです。
[ツールメニュー]―[オプション]
一般タブ:[標準モード]
編集タブ:[挿入:スペースキーで…] ?[削除:表の削除に…:チェックをはずす]
表示タブ:[モード:標準]
フォントタブ:[フォントサイズ:12]
ファイルタブ:[バックアップファイルを作成する:チェックをはずす]
ソース編集タブ:[ソースの自動改行] ?[ライン数表示]
- 画像に動きをつける
- →レイアウト枠に動きをつける
- 画像の透明化 1
- 絵の画像を透明化します。
[画像を選択:右クリック]―[画像を編集]―[画像の編集]―[GIF形式で保存]―[スポイドボタン]―[…]
- 画像の透明化 2
- 下の「〜」にファイル名を入れてみてください。
<img src="〜" width=98 height=98 style="filter:
Alpha(opacity=30);">
opacity=30の値をかえてください。10だとほとんど見えません。 opacity:不透明性
くわしくは 「とほほ 」をごらんください。
- 画像の配置
- 1 [画像:右クリック]―[画像タブ]―[回り込み]―[右寄せ]
2 レイアウト枠を作成しておこなう方法もあります。
「レイアウト枠の挿入」ボタン(or [挿入メニュー]―[レイアウト枠])をクリックし、画像をレイアウト枠内に移動し、十字矢印をドラッグします。
3 1×3の表をつくり、中央や右の欄に画像を入れ込むやり方もあります。
空白欄にはスペースを打ち込むことを忘れないようにしてください。
- 画像の挿入(ブラウザから) ◎
- ブラウザの画像をコピペする?
[ブラウザーの画像を右クリック:コピー]―[ホームページ・ビルダーへ貼り付け]
別法:[ブラウザーの画像を右クリック:]―[名前を付けて画像を保存]―[マイドキュメント]―[aaa]
[ホームページ・ビルダー]―[挿入メニュー]―[画像ファイル]―[ファイルから]―[My Documents]―[aaa]
画像を編集することもできます。
[画像:右クリック]―[画像を編集]―[ウェブアートデザイナーで編集]
- 画像の挿入(ファイルから) ◎
- [サイト・素材ビュー]―[素材タブ]―[フォルダ]―[下画面のウインドウの画像をドラッグ]
- 画像の配置
- 画像を配置する
画像を好きな場所に配置します。
- 画像ファイルを自動的にimageフォルダに保存する
- 画像ファイルを自動的にimageフォルダに保存するには、「サイト一覧」を設定しておく必要があります。
[サイトメニュー]―[サイト一覧/設定]―[追加ボタン]―[…]
次に、コンピュータの動作が遅くならないようにするため次を設定します。
[ツールメニュー]―[オプション]―[ビジュアルサイトビュー]―[エラーのあるページまで展開:チェックをはずす]
このあと、次の作業をおこないます。
[サイトメニュー]―[サイト一覧/設定]―[www.index.html:選択]―[編集ボタン]―[フォルダ詳細設定タブ]―[画像ファイル]―[参照ボタン]―[新規フォルダの作成:image]―[…]
- カラーコード
- 色を#ffff00のように16進法であらわしたもの。→ 色彩のページ
[表示メニュー]―[カラーパレット]
カラーコードのかわりに、下の名称を使うこともできます。その際は#(次に続く文字列が数字であることを示す符号)はいりません。
black blue cyan darkGray gray green lightGray magenta orange
pink red white yellow
- 罫線に色をつける
- まず表全体に色をつけます。
[表の挿入(2×2)]―[左上セルを選択]―[右クリック]―[属性の変更]―[表タブ]―[背景:青]―[OK]。これが枠の色になります。
そのあと、セルに別の色をあてがいます。
[表を選択:右クリック]―[属性の変更]―[セルタブ]―[背景:白]―[OK]
- 壁紙
- → 背景
- 行間の変更
- スタイルシートを使います。
[文字列を選択:右クリック]―[スタイルの設定]―[編集ボタン(1)]―[文字のレイアウトタブ]―[行間:ポイント]―[15]
*上はページ全体です。特定範囲の行間の変更の場合には、[スタイルの設定]―[現在のタグのみにスタイルを設定]―[編集ボタン]を実行してください。
再編集は[表示メニュー]―[スタイルシートマネージャー]―[スタイルの一覧:選択]―[編集ボタン]
- 行の追加、削除
- 「行の追加」ボタンや「行の削除」ボタンをつかいます。
表メニューからも可能です。
- 区切り線 ◎
- 区切り線を挿入する
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[区切り線]
- 掲示板の設置
- [挿入メニュー]―[コミュニケーション]―[掲示板]―[掲示板のタイトル:ひとことボード]―[タイトルの下に入れるメッセージ:ご意見、ご感想をどうぞ。不適当と思われる発言は管理人の一存で削除します。]―[掲示板のなかの「ホームページへ」の戻り先URL]―[ユーザーID:イチャリバ(
ハンドル名)]―[本名:( ニックネームでも可)]―[メアド:roppongi@tiu.ac.jp]―[完了]
[掲示板の挿入]―[掲示板タイトル」ひとことボード]―[挿入]
完了したら掲示板を見ます。
- 検索エンジンの設置
- →「 ホームページを多彩にするのページ 」の「検索エンジンのヤフーとグーグルを設置する」
- 検索サイトへの登録?
- [ツールメニュー]―[検索サイトへの登録]
- 更新情報のスタンプを入れる
- 更新時刻を自動表示させる
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[スクリプト]―[lastupdt.jsをドラッグ]これでファイルを保存するたびに自動的に下のような最終更新情報が表示されます。lastupdt.jsを右クリックして、「テキストエディタで開く」をクリックすると、日本語で「更新:」と入れることもできます。
- ●さ
サイト情報を更新しない
- (ほぼ不要です。)
起動時に「サイト情報更新中」の表示が出ると、起動に時間がかかります。
そのようなときは、次のようにします。
[ツールメニュー]―[オプション]―[一般タブ]―[起動時に前回使用したサイトを開く:チェックをはずす]
- サウンドの挿入
- [表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[サウンド]
- ジャバアプレット ◎
- MsgBoard:
Thank you for purchasing IBM Homepage Builder
Stadium:
WIN!
上のメッセージを「ページ/ソース」タブから変更できます。
- ジャバスクリプトファイル ◎
- [表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[スクリプト]
bgchange.js
ページにアクセスするたびに背景の色が変化します。
lastupdt.js
更新情報が自動的に更新されます。
scroll.ja
ステータスバーに動く文字を表示します。
上のメッセージを「ページ/ソース」タブから変更できます。
- 初期設定にもどす
- 自宅のコンピュータのホームページ・ビルダーを初期設定にもどします。
[ホームページ・ビルダー:右クリック]―[ショートカットタブ]―[リンク先を探す]―[hpbclean.exe]―[アプリケーション設定]―[…]
- 書式の確認
- 文字列を選択し、スタイルシートマネージャーをクリックして確認します。
- 水平線の挿入 ◎
- 水平線を挿入する
[挿入メニュー]―[水平線]
水平線の高さや幅を変えたり色をつけたりするには、右クリックして属性の変更を選びます。
色は、[スタイル]―[現在のタグのみにスタイルを設定:編集]―[カラーと背景]―[前景色:(色を選択)]
- 透かし
- →デジすたマーカー
- ステータスバーに動くメッセージを表示(非推薦)
- [表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[スクリプト]―[scroll.js]
Scroll.jsを右クリックし、「テキストエディタで開く」をクリックすると、文字の編集ができます。
- スペルチェック?
- [表示メニュー]―[スペルチェック]
- スライドショー
- →HotMediaクリエータ
- セルの分割、結合 ◎
- [セルを右クリック]―[セル]
新しいセルを上方にもってくるには、Ctrl+Alt+"↑"
- ●た な
代替テキスト ◎
- (忘れないように!)
画像をなぞると、文字があらわれるようにします。
[画像:右クリック]―[属性の変更]―[画像タブ]―[代替テキスト]
- タイトルの挿入 ◎
- → ページタイトルの挿入
- デジすたマーカー
- 画像に透かしで、「Mas Kuwabara 2003-07-14」などといれるためのツール
[ツールメニュー]―[デジすたマーカー2の起動]―[ファイルメニュー]―[画像ファイルをサムネイルウインドウ上に開く]―[xxxx.jpg]
[透かしスタンプメニュー]―[テキストスタンプ]―[…]
- 段落替え
- Enterを押すだけだと改行になり、前の行の属性を引っ張ったままとなります。新しく段落をはじめるには次のショートカットキーを使います。
[Shift+Enter]
ただし、表の中ではきかないので、その場合には表の中に表をつくります。
- 地図からジャンプ
- →イメージマップ
- チャットを挿入
- → 掲示板
- デジすたマーカー2
- 画像ファイルをサムネイルウインドウに開くためのソフトです。
- 「どこでも配置モード」 を「標準モード」にきりかえる
- ファイルを保存して閉じます。
[ファイルメニュー]―[モードを指定してページを開く]―[標準モードで開く]
「どこでも配置モード」で作ったレイアウト枠を削除するには、[レイアウト枠を選択]―[編集メニュー]―[タグを削除]
- ●は
バックアップファイルをつくらない
- 自宅のコンピュータ用の設定です。
[メニュー]―[ツール]―[オプション]―[ファイルタブ]―[バックアップオプション]―[バックアップを作成する:チェックをはずす]
- 背景の挿入 ◎
- 背景を挿入する
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[壁紙]
[挿入メニュー]―[画像ファイル]―[ファイルから壁紙として]
[挿入メニュー]―[画像ファイル]―[素材集から壁紙として]
起動のたびにページの背景色を替える
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[スクリプト]―[bgchange.js]
- ビジュアルサイトを開く
- (ほぼ不要です。)
ここでファイル名を変更するとリンクも自動的に変更されます。また、リンク切れのページを発見することもできます。
まず、サイトの設定をします。
[サイトメニュー]―[サイトを開く]。サイトが設定されると自然に閉じます。このあと、ビジュアルサイトを開きます。
[サイトメニュー]―[ビジュアルサイトを開く]
- 表示フォントを大きくする
- [メニューバー]―[ツール]―[オプション]―[フォントTab]―[フォントサイズ:12]
これは、自分だけのためで、ウェブページには反映されません。虫眼鏡のようなものです。
- 表についての注意 ◎
- 空白セルにはスペースを
たとえば、5x5の表を作って、プレビュー表示してください。一コマしか表示されません。各セルにスペースを打ち込んでください。5x5の表となります。
- 表にタイトルをつける
- [表内を右クリック]―[属性の変更]―[表タブ]―[表題:表の上]
- 表の行のコピー ◎
- 表の行をコピーする
[行:右クリック]―[行]―[行のコピー]
表に貼り付ける場合は、行のセル全体をえらび、貼り付けます。
- 表の削除
- 表だけを削除し、セルの内容は削除しない。
[ツールメニュー]―[オプション]―[編集タブ]―[削除]―[表の削除時にセルの内容も削除する:チェックをはずす]
[表を選択]―[右クリック]―[タグを削除]
- 表の挿入
- 表を挿入する
[表の挿入ボタンを右下にドラッグ]または、[表示メニュー]―[表の挿入]または、[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[レイアウト用素材]
表の幅は、720ピクセル、800ピクセルに。
- 表の中に壁紙を ◎
- 表の中に壁紙を挿入するには、次のようにします。
[表の中を右クリック]―[属性の変更]―[セルタブ]―[画像:参照ボタン]――[参照ボタン]
「参照ボタン」から下をたどっていきます。
C:\Program Files\IBM Homepage BuilderV8\sample\image\wallppr
最後に「a006bgg.gif」などを選択します。
- 表の枠を絵柄に
- 表の枠に飾りをつけます。
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[レイアウト用素材]
- 表の枠を二重に
- 二重罫線にする
[表を右クリック]―[スタイルの設定]―[現在のタグにのみスタイルを設定]―[編集]―[レイアウトタブ]―[スタイル:二重線]―[幅:厚い]
予約語をピクセルにかえれば、ピクセル指定もできます。
- 吹き出し
- →ポップアップ
- ファイルの移動
- (ほぼ不要)
ドラッグで移動します。
[表示メニュー]―[サイト/素材ビュー]―[フォルダタブ]
切り取り、貼り付けは使えません。HPBの欠点
サイトの一覧を設定してある場合
[サイトメニュー]―[ビジュアルサイトビューを開く]―[ファイルタブ]―[ファイルを選び移動]―[OK]。
このあとFTPツールでファイルの転送をおこないます。
サーバー側のもとのファイルを削除します。
- フォントを大きく
- ホームページ・ビルダー内での表示フォントを大きくするには、
[ツールメニュー]―[オプション]―[フォントタブ]―[フォントサイズ:…]―
これは虫眼鏡のようなもので、インターネットでのフォントサイズはかわりません。
- フォント属性の解除 ◎
- 色つきの文字や大きすぎる文字を標準にもどします。
[書式メニュー]―[フォント属性の解除]
- フォントに背景色をつける
- [フォントを範囲選択]―[右クリック]―[スタイルの設定]―[現在のタグのみにスタイルを設定:編集]―[カラーと背景タブ]―[背景色ボタン]―[水色]
- フォントを変更する ◎
- 文字列を選択して下をクリックしてみてください。
「指定して挿入」ボタン:リストマーク
「B」ボタン:Bold 太字
「I」ボタン:Italic 斜体
「S」ボタン:打ち消し線
「A ▲」ボタン:文字サイズ拡大
「A ▼」ボタン:文字サイズ縮小
「指マーク」ボタン:フォントの色などの変更
- フォントをロゴに加工する ◎
- [文字列を選択]―[挿入メニュー]―[ロゴ]―[ファイルを選択]―[完了]
「文字の詳細設定」ボタンや「背景の設定」ボタンもクリックしてください。
[文字画像:右クリック]―[画像を編集]―[画像の編集]
- プリントスクリーン ◎
- たとえば、「桑原政則オンライン」トップページをプリントスクリーンし、ウェブアートデザイナーで加工します。
[「桑原政則オンライン」トップページ]―[キーボードのPrtScキー]
[ホームページ・ビルダー]―[ツールメニュー]―[ウェブアートデザイナー]―[貼り付け]
[切り抜き]―[…]。[「オブジェクトの編集」ボタン]―[幅:640ピクセル(A4印刷用)]。
[ファイルメニュー]―[Web用保存ウィザード]―[…]―[gif]―[…]
*キーボードのページ
- ページタイトルの挿入 ◎
- ページにタイトルをつける
[編集メニュー]―[ページの属性]―[ページタイトル]
[ページ内を右クリック]―[タグ:]―[ページのプロパティ]―[ページタイトル]
*これを忘れている人が多いです。
- ページ内ジャンプ=アンカー ◎
- 同一ページのaaaからbbbへのジャンプの設定は次のようにします。
[bbbを選択反転]―[右クリック]―[リンクの挿入]―[ラベルを付けるタブ]―[ラベル:1とでも入力]―[OK]
[aaaを選択反転]―[右クリック]―[リンクの挿入]―[ラベルへタブ]―[ラベル]―[下三角]―[1を選択]―[OK]
他のページのcccから上のnewpage3.htmのbbbへとぶには、次のようにします。
[他のページのcccを選択反転]―[右クリック]―[リンクの挿入]―[ラベルへタブ]―[他のファイル]―[参照]―[newpage3.htmを選択]―[ラベル]―[下三角]―[1を選択]―[OK]
- ページの移動
- (ほぼ不要です)
[サイトメニュー]―[ビジュアルサイトを開く]―[フォルダビュー]―[ページをドラッグ]
これで、リンク先も自動的に改変されます。
- ホーバーをかける ◎
<head>区間に下を記述してください。コピペしないでください。
<style type="text/css">
<!--
A:HOVER{
color : red;
}
-->
</style>
作成後、プレビュータブで確認してください。
- ホームページの更新の仕方
- 1 ホームページビルダーの起動:[スタートボタン]―[ホームページビルダー]
2 FTPでファイルのダウンロード (FTP=File Transfer Protocol)
[ツールメニュー]―[FTPツールの起動]―[設定ボタン](プロバイダ名:その他。ftp.tiu.ac.jp。FTPアカウント名=ユーザID。)―[OK]
[接続ボタン]―[右窓のwwwフォルダ:ダブルクリック]―[htmlフォルダ:ダブルクリック]―[右窓からファイルを選択]―[青い下矢印をクリック
]―[最小化ボタン]
3 ホームページビルダーでの更新作業
[ホームページビルダー]―[ファイルメニュー]―[開く]―[index]―[開く]―[作業]
作業は、ITスキルを高めるために、「ページ/ソース タブ」でおこなってください。
ファイルの保存
[ファイルメニュー]―[名前を付けて保存]―[ファイル名:index]―[保存ボタン]―[ C:\… 上書きしますか?]―[はい]
4 FTPでファイルのアップロード
[下段のタスクバー]―[ファイル転送(FTP):クリック]―[左窓の空白部を右クリック]―[最新の情報に更新]
[ファイル群を選択(Shiftキー、Ctrlキーを活用)]―[青い上向き矢印]―[タイムアウトにより…:はい]―[青い上向き矢印]
5 インターネットエクスプローラで確認
[インターネットエクスプローラ]―[アドレス欄]―[ http://www.tiu.ac.jp/~ab1234yz(例)]。
http=HyperText Transfer Protocol www=world wide web ac=academy
就活用の名刺への記載。URL:http://www.tiu.ac.jp/~ab1234yz(例)ホームページアドレスは暗記しておいてください。
E-mail:ab1234yz@tiu.ac.jp(例)
名刺の例:http://www.aoikuma.com/doc/meishi.doc
- 保存する
- 開いているすべてのページを保存するには、次のようにします。
[メニューバー]―[ファイル]―[すべて保存]
- ボタンの挿入
- [挿入メニュー]―[ボタンをドラッグ]
- ポップアップの挿入(非推薦)
- [表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[Javaアプレット]―[PopupImg.js]
- 翻訳する
- [ツールメニュー]―[翻訳]。日英、英日
- ●ま
マーキーの挿入 ◎
- マーキーを挿入する
マーキーとは、左から右へ動いていく文字列のことです。
[挿入メニュー]―[その他]―[マーキー]
マーキーのフォントの拡縮:
[マーキー画像を右クリック]―[属性の変更]―[スタイルボタン]―[タグ:編集(1)ボタン]―[予約語→ ピクセル]―[サイズ:25]
メッセージボードの挿入
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[Javaアプレット]―[MsgBoard.js] このあと、「ページ/ソース」タブでテキストを変更します。
- まるごとチェック
- 全ページのアクセシビリティ、スペルミス、半角カナ、構文エラーを検索します。
日本語をローマ字であらわすと、スペルミスになるので、チェック項目からはずしておいた方がいいです。
まず、サイトの設定をします。
[サイトメニュー]―[サイトを開く]。サイトが設定されると自然に閉じます。
[サイトメニュー]―[まるごとチェック] 。*が表示された箇所にエラーがあります。
ページごとのチェックは、ツールメニューの
スペルチェック、半角カナ変換、HTML構文チェック、アクセスビリティチェックでおこないます。
- 見出しエディタ
- (ほぼ不要です。)
見出し1を見出し2に変えたりする機能。[ツールメニュー]―[見出しエディタ]
見出しレベルを変えるには、見出し文字を選択し、[挿入メニュー]―[段落]―で選び直せばよい。
- ●やらわ
ラベル
- →ページ内ジャンプ
- リストマーク ◎
- リストマークとは箇条書きのマークのことです。「指定して挿入」ボタンをクリックすると表示されます。または[挿入メニュー]―[リスト]でもOKです。
リストマークの変更は、[書式メニュー]―[リスト]からおこないます。
リストマークの解除は、BackSpaceキーでおこないます。
複数行にわたるリストマークを削除するには、最初のリストを選択し、Ctrl+Dを押し続けます。元に戻すにはCtrl+Zです。
- リンク先を開く
- [リンクテキストを選択]―[右クリック]―[リンクを開く]
- リンク付け→新しいページを作成して、トップページとリンク付けをする
-
- リンク文字の色の変更(ページ全体)
- ページ内のリンク文字の色を変更します。
[文字を選択]―[編集メニュー]―[ページの属性]―[背景/文字色タブ]―[既読リンク:]―[前景色:白]
- リンク文字の下線をなくす(非推薦)
- [文字を選択]―[表示メニュー]―[スタイルシートマネージャー]―[追加]
[スタイルの設定ダイアログボックス]―[HTMLタグの候補:リンク A]―[文字飾り:なし]―[OK]
- レイアウト枠の挿入・削除 ◎
- レイアウト枠の中に画像を入れると、自由に画像を移動することができます。
[レイアウト枠]ボタンが画面上右にあります。
[挿入メニュー]―[レイアウト枠]
レイアウト枠を移動するには、枠の罫線をなぞって、プラス矢印が表示されたら、ドラッグします。
レイアウト枠を削除するには、枠の罫線をなぞって、プラス矢印が表示されたら、[右クリック]―[タグを削除]を実行します。
- レイアウト枠に動きをつける ◎
- レイアウト枠の中の画像に動きをつけます。
[レイアウト枠:右クリック]―[レイアウト枠の属性]―[エフェクトタブ]―[パターン:右回り上開始(大きく)]
- 列の追加、削除
- 「列の追加」ボタンや「列の削除」ボタンをつかいます。
表メニューからも可能です。
- ロールオーバー効果を設定する ◎
- ロールオーバーとは、画像の上にマウスを置くと別の画像に切り替わることです。リンク文字の上にマウスを置くと色が変わるのは、ホーバーといいます。
ロゴで、画像を作成してから、次の手順でおこないます。2枚の写真で作成することもできます。
[挿入メニュー]―[画像の効果]―[ロールオーバー効果]―[次へ]―[効果の選択]
「効果の選択」の画面で画像を選択すると、ロールオーバーすると、画像に切り替わります。
ロールオーバー効果の例→ ◆童謡「とおりゃんせ」は、なぜコワーイ?:三芳野神社 (#17,2004年11月14日)
写真をなぞって、手のひらマークがあらわれたら、クリックしてください。
- ロゴの挿入 ◎
- [挿入メニュー]―[ロゴ]
ロゴとは、企業名、ブランド、商品名の文字を図案化したものです。 <ロゴタイプ logotype
- ロボット検索を回避する
- [編集メニュー]―[ページの属性]―[メタ情報タブ]―[属性:NAME]―[項目:robots]―[値:noindex]