ホームページビルダ

内容

素材を集める

ページの作成

ページ間のリンクをつける

ページをサーバーに送る

起動

文字入力

1. 段落単位の文字入力
   標準モードで新しいページを作成すると、白紙の画面が現れます。そのまま文字を入力すると、パラグラフ（段落）の入力が出来ます。「Enter」キーを押すと、次の段落に進みます。shiftキーを押しながらEnterキーを押すと改行できます。
   
   
2. 文字の属性の変更
   　文字を選択後、サイズはツールバーの「A」に記号、文字の揃え（左、中央、右）は「揃え」ボタン、で設定できます。「書式」メニューの「文字装飾」で詳細な設定ができます。
   
   
3. 文字、背景の色
   「書式」メニューの「背景、文字の色」から設定が可能です。全部の文字の色が変化します。特定の文字の色を変更するには、予め変更したい文字を選択しておきます。
   1. カラーギャラリー
      メニューの下部のカラーギャラリーを選択します。背景色、テキストの色、接続の色、等をセットで選択できます。
      
      
4. べた書き
   プログラムソースなど、貼り込む文書の空白や改行をそのまま反映するには、挿入メニューの「段落」から「べた書き」を選択し、そこに文字列を貼り付け、入力します。
   
   
5. 選択部分の文字の属性の変更
   文字を選択し、「書式メニュー」のフォントで行います。
   1. 注
      特定の行の背景色は変更するには、1行の表を作成しその表の背景色を変更します。
   2. カラーパレット
      表示メニューでカラーパレットを表示できます。このパレットには、上部に変更される「もの」が表示されます。色を指定し、「適用」ボタンを押します。
      
      
6. 水平線
   挿入メニューから「水平線」で区切りの線を挿入できます。
   
   
7. 移動
   先に作成した段落に戻るには、マウスでクリックするか、上下の矢印キーを押します。
   
   

箇条書き

1. 箇条書きモード
   ツールバーのメニュまたは「挿入」の「リスト」でリスト（箇条書き）モードに入ります。Enterキーで次の箇条、Shift+Enterで改行ができます。箇条書きを終了するには、次の行をマウスクリックするか、下向き矢印キーを押します。
   
   
2. 番号の変更
   項目を選択し、編集メニューの「属性」を選択します。項目のタイプで、「自動」を指定番号に変更します。
   
   
3. 段付け
   ツールバーまたは書式メニューのインデントで、項目を左右に移動できます。
   
   

ロゴ

1. 
   
   
2. 例　ロゴのhtml
   altはブラウザが画像を表示しないモードのときに、表示される文字です。
   < P>< IMG src="file:///F:/Documents and Settings/mito/Application Data/IBM/HomePage Builder Version 6/tmp/logo1.gif" width="72" height="53" border="0" alt="猿投">< IMG src="index17.JPG" width="120" height="90" border="0">< /P>
   
   
3. 注意
   htmlのタグと文字を区別するため、ここではタグとして利用しない場合、'<'　の次に空白を入れています。
   
   

表

1. 挿入
   「挿入」メニューの「表」で行数と列数を指定して、空の表を挿入できます。マウスでクリックして、文字や画像を挿入できます。
   1. 
      
      
      
2. 結合
   表の結合で行や列の結合できます。結合する方向を指定できます。
   1. 
      
      
      
3. 行、列の追加、削除
   行、列の削除も出来ます。失敗したら、「編集」から「戻す」を実行します。
   
   
4. その他の属性
   表を選択し、「編集」メニューの「属性変更」で設定します。枠線の太さ、表のサイズなどを指定できます。
   
   
5. 不具合
   表に大きな画像を挿入すると、表のサイズを設定してしまうため、画像を小さくしても表が小さくならない場合があります。このような場合、直接htmlで表の　width=""　を一度削除します。
   
   

画像

1. 挿入
   挿入したい位置を定めておき、挿入メニュの「画像」で画像ファイルを選択して挿入します。画像のサイズはあらかじめ調整しておく必要があります。特に表の内部に貼り込む場合、後から画像サイズを変更しても、表のサイズは変化しません。（何か方法があるかも知れません）。
   
   
   1. 編集
      編集メニュの「画像」で画像の回転や切り出しができます。
      
      
   2. 画像の組み込み（コピー＆ペースト）
      次の方法でも、画像の挿入ができます。
      画像ファイルのアイコン（名前）を選択し、コピーします。次に、ホームページの挿入位置をマウスでクリックして選択し、貼り付けをします。
      
      
   3. サンプル画像
      画面の左に、多くの画像やアイコンがあり自由に利用できます。
      
      
   4. 画像の貼り込み例
      < P>< IMG src="file:///F:/Documents and Settings/mito/Application Data/IBM/HomePage Builder Version 6/tmp/p001.gif" width="133" height="125" border="0">< /P>
      
      
2. サイズ、移動
   画像挿入後、画像を選択し、サイズの変更や位置の移動ができます。移動は画像をドラッグします。サイズの変更は、右クリックで現れる目入から、「ディジカメ写真の編集」を選択します。
   
   
3. 文字の回り込み
   画像の横に文字の回り込みを行うには、画像を選択し　編集＞属性の変更　で現れるダイアログでレイアウトを「左よせ」または「右寄せ」にします。回り込みを停止する行で、挿入＞改行　を選び、「左寄せ」または「右寄せ」が終了するまで、の改行を挿入します。
   　回り込みをする場合、先に画像を挿入し、その下に説明文を書き込んだあと、画像を右寄せにするとよいでしょう。必要なら、関連する文字の最後に、「回り込み終了」の改行を挿入します。
   
   

リンク

1. 文字や画像にリンクをはる
   リンク（接続）したいhtmファイルはあらかじめ作成しておきます。リンクしたい文字や画像を選択し、「挿入」メニューから「リンク」を指定します。自分で作成したファイルへのリンクする場合は「ファイル」タグを選択します。接続したいファイルを参照でさがします。通常のリンクの場合別名やターゲットは設定する必要はありません。「ok」すると、リンクした画像や文字にリンクの属性（色、下線）が表示されます。
   
   
   
2. 注
   接続するファイルのあるフォルダの名前や位置は、プロバイダに送るフォルダの名前や位置にしておく必要があります。
   
   
3. 挿入したリンク
   < P>< A href="file:///D:/www/PageBuilder/sample1/samplw1.htm ">samplw1.htm へのリンク< /A>< /P>
   
   
4. リンクする
   リンク先のページに移動するには、「プレビュー」モードに切り替えてクリックします。
   
   
5. リンク先を開く
   リンク先のページを開くには、リンクする文字や画像を選択し、ファイルメニューから「リンク先を開く」を選択します。
   
   
6. 一つの画像の指定部分にリンクを設定する
   1. リンクの設定
      画像に、円や矩形の範囲を指定し、この内部をクリックしたら、指定したページにリンクさせることができます。この機能をクリッカブルマップと呼ぶことがあります。
      　この機能を利用するには、画像を選択して、編集メニューから「イメージマップ」、「イメージマップの編集」を選択します。イメージマップエディタのダイアログが現れます。領域を指定すると、リンク先を指定するダイアログが現れます。
      
      
   2. 注意
      画像の一部にリンクを設定しても、見かけの画像は変化しません。マウスでクリックするよう案内する必要があります。
      
      
7. メールに接続
   リンク先として、「ファイルへ」でなく「メールへ」を選択すると、これをクリックすると、宛先と主題を設定したメールを立ち上げることが出来ます。メール設定ダイアログが開きますから、メールの宛先と主題を設定します。
   
   
   1. 注
      IEの場合、通常の設定では、OutLookなどMS系のメーラーしか利用ができません。メールアドレスをテキストで表示しておくと便利です。
      
      
8. 実行形式のダウンロード
   hrefのファイルとして、exeなどを指定すると、ブラウザではダウンロードメニューを出します。
   

アプレットの挿入

表示モード

1. 「ｈｔｍｌソース」の例
   < P align="center">< FONT size="+3">ホームページビルダーの使い方< /FONT>< BR>
   < FONT size="+1">ホームページ作成入門< /FONT>< /P>
   
   
2. html直接編集
   1. htmlソース
      編集モードを「htmlソース」に切り替えると、htmlを直接変更できます。細かい修正は、「属性変更」でも可能ですが、慣れていたら、このモードで変更することもできます。
   2. 作成済みhtmの編集
      ファイルメニューの「開く」で、作成済みのhtmファイルを編集することができます。記述にエラーがあると、修正もしてくれるようです。
      
      

保存

1. ページのタイトル
   ページのタイトルは、「書式」メニューの「ページのプロパティ」から設定できます。
   
   
2. 保存
   ファイルメニューから「保存」を実行します。画像が組み込まれていると、その画像も同時に保存しますから、専用のフォルダを作成し、そこの保存するようにして下さい。画像ファイルが他のファイルと区別出来なくなります。
   
   
3. ファイルの位置
   保存すると、画像ファイルは同じフォルダに書き出しますから、画像参照のhtmlも変化します。
   1. 例１　画像ファイル
      < P>< IMG src="index17.JPG" width="120" height="90" border="0">< /P>
   2. 例２　リンク
      < P>< A href="../sample1/samplw1.htm">次へ< /A>< /P>
      
      

フレームとは

制約、長所

作成

1. 新規作成
   ファイルメニュの「新規作成」で「どこでも配置」を選択します。
2. ツールメニューバー
   「表示」メニューの「ツールバー」で「どこでも配置」を選択状態にすると、ツールバーが表示されます。
   
   
   

挿入

1. 文字の挿入
   ツールバーの「A」か、「挿入」メニューのテキストボックスをクリックします。ページで文字を配置する位置をドラッグします。矩形が現れます。ここに文字を入力します。文字のフォント、サイズを変更することができます。
   
   
   1. 箇条書きなど
      標準モードと同様、箇条書きや文字の書式を設定することができます。
      
      
   2. スタイル
      スタイルを設定すると、文字間、行間の空白をを自由に設定できます。
      
      
   3. 編集
      入力終了後、文字の部分をクリックすると、周囲に文字枠を変更するマークが現れサイズや位置を自由に変更できます。
      この状態で、もう一度クリックすると、文字の編集が可能です。
      
      
2. 画像、表の挿入
   
   1. 挿入
      標準モードと同じです。
   2. 変更
      文字枠と同様、位置やサイズの変更が自由に出来ます。
      
      

レイアウト

1. 位置揃え
   レイアウトメニューで複数の部品（画像、文字など）をドラッグして選択し、右・中央、左端等で位置を揃えることも出来ます。また、画像と文字などをグループ化すると、同時に移動ができるようになります。
   
   
2. 重なり調整
   複数の部品を重ねて配置するとき、どちらを前にするかを選択することができます。
   
   
3. グリッド、スケール
   ツールバーまたは「表示」メニューで「グリッド」を選択すると、位置決めを容易にするため、ページにグリッド（格子）が現れます。「グリッドに吸着」を選択すると、配置位置が格子の位置に限定されますから、位置揃えが容易になります。
   
   
4. 配置モードの詳細
   文字、画像、表などを、< div>で分割し、各< div>にスタイルシートで位置を指定する方法で配置をします。
   
   

標準と「どこでも」モードの混在

注意事項

1. 枠からはみ出る
   わくの内部で表示できる文字数は、ＰＣによって微妙に異なります。少し余裕を持って、枠を作成しないと枠から文字がはみ出る場合があります。
   
   
2. 画像の名前
   ロゴなどで作成した画像ファイルに順に番号付けされますが、一度終了してからロゴを再度作成すると、同じ番号の画像が生成されることがあります。保存するときのファイル名に注意してください。
   

何ができる

内部のスタイルの設定

1. 設定
   書式メニューから「スタイル」を選択すると、スタイルシートマネジャーが現れます。追加ボタンで、スタイル設定ダイアログが現れます。「クラスのスタイルを設定」を選択し、.ClassのClass名を別の名前（半角英字）として、スタイルを設定します。
   
   
2. 
   
   
   
3. スタイルの例
   白抜きの文字を設定します。
   < STYLE type="text/css">
   < !--
   .siro{
   color : silver;
   background-color : blue;
   }
   -->
   
   
4. クラスの利用
   クラスを設定したいものを選択し、スタイルマネジャから、設定したクラスを選択します。
   1. 例
      < B>< FONT size="+3" class="siro">今日も元気だ< /FONT>< /B>< /P>
      
      
      

外部ファイルに設定する

1. 外部ファイル
   スタイルを外部ファイルとして設定しておくと、そのファイルをリンクすることで、スタイルが利用できます。外部ファイルを作成するには、スタイルシートマネジャで、リンクの横のファイル参照ボタンを押し、「外部スタイルの新規作成」を選択します。「新規作成」ダイアログでファイル名を指定し、内部スタイルと同様にスタイルを設定します。
2. 利用
   内部と同様、スタイルマネジャから、設定したクラスを選択できます。
3. 素材集
   素材集から、スタイルを選択することもできます。
   
   

1. サイト
   ページ全体に対し、サイトを設定できます。このサイトに対し、適用するスタイルを選択することができます。

サイト

サイト機能とFTPツール

サイトの情報

サイトの設定

アートデザイナ

1. 図面作成
   主にドロー型のツールで、画像を作成することができます。素材から、基本図形やイラストを利用できます。
   
   
2. 送る
   作成した図形は、ビルダーに送ることで、画像（gifファイル)として利用できます。
   
   

ウエブアニメータ

1. GIFアニメーション
   GIFアニメーションファイルを作成します。すこしづつ動いた絵を作成し、それを続けて表示することで、「パラパラ漫画」を作成することができます。動くロゴの多くはこのGIFアニメーションを利用しています。
   
   
2. 作成
   少しずつ変わる画像を作成し、並べることでGIFアニメーションファイルを作成することができます。
   
   
3. 効果
   文字のスクロールや画像の効果など、特定の機能や効果を持ったGIFアニメーションファイルを自動生成することが出来ます。
   
   
   1. 
      
      
4. 各画像のプロパティ
   「表示」メニューでフレームの表示を「リスト形式」とすると、各画像の待ち時間が表示されます。この時間を調整して、特定の画像の表示時間を変更することができます。
   
   

ビデオスタジオ

1. 動画、静止画ファイル、DV（ディジタルビデオ）から取り込んだファイルから、簡単な動画ファイルを編集できます。
   AVI、WMV、MOVファイルの作成や、アニメーションGIFファイルの作成ができます。キャプチャにはIEEE1394インタフェースのキャプチャカードが必要です。