ホームページ・ビルダー辞事典 簡略版のページ

桑原政則       
  • ホームページ・ビルダーは、「スタンダード」で開いてください。
  • 右欄、左欄のウインドウは、目障りでしたら、閉じてください。
  • テキストを参照してください。『できるホームページ・ビルダー インプレス、約1500円、売店にて。
ダウンロード→ ファイルを開いて編集→ アップロードの手順 FTP(ファイル転送)ツールの起動

[スタートボタン]―[プログラム]―[IBMホームページ・ビルダー]―[ホームページ・ビルダー]――[ホームページ・ビルダーへようこそ]―[スタンダード]―[OK]。

[ツールメニュー]―[FTPツールの起動]―[設定ボタン]――[必要事項をタイプ(この下の注))]―[OK]―[接続ボタン:クリック]

注)必要事項:プロバイダ:その他、 FTPサーバー名: ftp.tiu.ac.jp、 FTPアカウント名(ユーザ名):ef1234fh(例)

ダウンロード

[右欄のファイルを選択]―[下向き矢印をクリック]

ファイルの連続選択→ 最初のファイルを選択、Shiftキーを押しながら最後のファイルを選択

注) サーバー側(右側)の上段は下のようになっているか確認してください。
home/student/200x/ff1234km/www/html  (ff1234kmはユーザ名です。)

ホームページ・ビルダーでファイルを開き、編集

[タスクバー(画面下)]]―[ホームページ・ビルダーのアイコン:クリック]―[ファイルメニュー(画面左上)]―[開く]―[index.html]―[開く]―[「あああ」と入力]

このあと、
[ファイルメニュー]―[名前を付けて保存]―[保存]

アップロード

[タスクバー(画面下)]―[ファイル転送アイコン:クリック]―[左欄の空白部を右クリック]―[最新の情報に更新]―[Securityフォルダの下を全ファイルを選択]―[上向きk矢印]

ブラウザ(インターネットエクスプローラ)で確認  

インターネットエクスプローラ(スタートボタン右の「e」アイコン)を開く

アドレス欄に http://www.tiu.ac.jp/~ff1234km/ (ユーザ名)

「~(ニョロ、チルダ)」を忘れないでください。「~(ニョロ、チルダ)」は、ローマ字入力にしてから、Shiftキーとカナの「へ」を押します。

◆不慣れな人は、ホームページ・ビルダー、FTPソフトを閉じて、上の動作を何回も繰り返してください。

→【画像入り説明】  ホームページ・ビルダーのFTPのページ
「リンク集」という新しいページを作成する ◆新しいページを作成します

[ファイルメニュー]―[標準モードで新規作成]

[表メニュー]―[表の挿入]―[行数:1、列数:1]

[表の中をポイント]―[属性の変更]―[表タブ]―[表の幅:640]―[セルタブ]―[背景:色:白]  

このあと、表内をポイントしてEnterを何回か押すと表が長くなります。

◆「リンク集」という文字を編集します

[「リンク集」と表内にタイプ]―[「リンク集」を選択反転]―[書式メニュー]―[フォント]―[色指定:(色を選択)]―[サイズ:4]

◆壁紙を挿入します

[挿入メニュー]―[画像ファイル]―[素材集から壁紙として]―[画像を選択]―[開く]

◆ファイルを保存します

[ファイルメニュー]―[名前を付けて保存]―[はい]―[はい]
「リンク集」ページをトップページと相互リンクする ◆ トップページへリンクを貼ります

「リンク集」ページに「トップページへ」とタイプします。

「トップページへ」を選択反転し、右クリックで「リンクの挿入ボタンをクリックします。
[ファイル名]―[参照ボタン]―[index]―[OK]

◆トップページ(index)へジャンプします。

「リンク集」ページの「トップページへ」という文字のどこかを右クリックし、「リンク先ページを開く」をくりっくします。

◆トップページからのリンクを貼ります。

トップページの上段に「リンク集」とタイプします。

「リンク集」という文字列を選択反転、右クリックで「リンクの挿入ボタン」をクリックします。

[ファイル名]―[参照ボタン]―[newpage1]―[開く]―[OK]

◎アニメーション
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[アニメーション]
◎アイコン
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[アイコン]
◎イラスト
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[イラスト]
◎画像の配置
1 [画像:右クリック]―[画像タブ]―[回り込み]―[右寄せ]

2 レイアウト枠を作成しておこなう方法もあります。
[挿入メニュー]―[レイアウト枠]をクリックし、画像をレイアウト枠内に移動し、十字マークをドラッグします。
(画像に動きをつける→レイアウト枠)

3 1×3の表をつくり、中央や右の欄に画像を入れ込むやり方もあります。
空白欄にはスペースを打ち込むことを忘れないようにしてください。

◎画像ファイルの挿入(ブラウザから)
[ブラウザーの画像を右クリック:コピー]―[ホームページ・ビルダーへ貼り付け]

[ブラウザーの画像を右クリック:]―[名前を付けて画像を保存]―[マイドキュメント]―[aaa]

[ホームページ・ビルダー]―[挿入メニュー]―[画像ファイル]―[ファイルから]―[My Documents]―[aaa]
◎区切り線
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[区切り線]

〇コピー  行のコピー
行のコピー
[行を右クリック]―[右クリック]―[行]―[行のコピー]

 
◎水平線
[挿入メニュー]―[水平線]
水平線の高さや幅を変えたり色をつけたりするには、右クリックして属性の変更を選びます。
色は、[スタイル]―[現在のタグのみにスタイルを設定:編集]―[カラーと背景]―[前景色:(色を選択)]

〇タイトルを付ける
ファイルにタイトルをつけます。

[編集メニュー]―[ページの属性]―[ページタイトル:xxx]

◎背景
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[壁紙]
[挿入メニュー]―[画像ファイル]―[ファイルから壁紙として]
[挿入メニュー]―[画像ファイル]―[素材集から壁紙として]

〇表の挿入
[表メニュー]―[表の挿入]
表についての注意=空白セルにはスペースを

または
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[レイアウト用素材]

◎ホーバーをかける
リンクテキストにマウスをポイントすると赤に変わるようにします。

[表示メニュー]―[スタイルシートマネージャー]―[追加]―[HTMLタグの候補]―[マウスが上にあるリンク]―[カラーと背景タブ]―[前景色]―[赤]

ボタン
[挿入メニュー]―[ボタンをドラッグ]  

◎マーキー
マーキーとは、左から右へ動いていく文字列のことです。
[挿入メニュー]―[その他]―[マーキー]

マーキーのフォントの拡縮:
[マーキー画像を右クリック]―[属性の変更]―[スタイルボタン]―[タグ:編集(1)ボタン]―[予約語→ ピクセル]―[サイズ:25]

メッセージボード
[表示メニュー]―[サイト/素材ビュー]―[素材タブ]―[Javaアプレット]―[MsgBoard.js]
◎リストマーク
リストマークとは箇条書きの「・」を画像にしたものです。「指定して挿入」ボタンをクリックすると表示されます。

複数行にわたるリストを削除するには、最初のリストを選択し、Ctrl+Dを押し続けます。元に戻すにはCtrl+Zです。

◎リンク付け
・ ヤフーなどよりリンク文字をページにコピペをします。

・ブラウザからアドレス( http://www.tiu.ac.jp/~kuwabara/ )をコピーします。そのあと、HPBにもどり、「桑原政則オンライン」と打ち、「桑原政則オンライン」を選択右クリックし、[リンクの挿入]―[ファイル名:http://www.tiu.ac.jp/~kuwabara/ を貼り付け]

・ 同一ページの別の箇所へジャンプするには、ラベルを利用します。→ラベル


トップページとの相互リンク

開いているページ頭に「トップページへ」とタイプします。
「トップページへ」を選択し、右クリックで「リンクの挿入ボタンをクリックします。
[ファイル名]―[参照ボタン]―[index]―[OK]



トップページからのリンクを貼ります。
トップページ( index.html)を開き、リンクしたいページのタイトル名「あああああ」をタイプします。
「あああああ」を選択し、右クリックで「リンクの挿入ボタン( =Ctrl+J ジャンプ)」をクリックします。
[ファイル名]―[参照ボタン]―[newpage1]―[OK]

◎レイアウト枠
レイアウト枠の中に画像を入れると、自由に画像を移動することができます。
[挿入メニュー]―[レイアウト枠]

レイアウト枠を移動するには、枠の罫線をクリックして、プラス矢印が表示されたら、ドラッグします。

◎レイアウトのエフェクト レイアウト枠の中の画像に動きをつけます。

[レイアウト枠:右クリック]―[レイアウト枠の属性]―[エフェクトタブ]―[パターン:右回り上開始(大きく)]

ロールオーバー効果
ロールオーバーとは、画像の上にマウスを置くと別の画像に切り替わること。リンク文字の上にマウスを置くと色が変わるのは、ホーバーといいます。

画像を挿入してから、次の手順でおこないます。

[画像を右クリック]―[画像のロールオーバー効果の設定]―[次へ]―[通常時の画像…]―[効果の選択]―[次へ]―[…]

◎ロゴ    
[挿入メニュー]―[ロゴ]