3−2.2ページ目(プロフィールページ)の制作
いよいよ2ページ目以降の制作に入ります。
まずはじめに最初にイメージしたレイアウト図を見てみましょう。
上のイメージのレイアウトではページ上部左に写真、そして右側に文章
さらに下にも文章があります。ここではこのレイアウトをテーブルを使って制作して行きます。
1.下のようにメニューバーの左端にあるHTMLの新規作成を選びクリックします。
更にどこでも配置モードと標準モードの選択画面が現れますので標準モードを選択しOKを押します。
2.白紙のページが出来たら次に背景を指定します。まずページ上で右クリックし下のようなメニューを出し
「ページのプロパティ(I)」を選択します。
3.属性のダイアログがでたら「背景/テキスト色」のプロパティをクリックします。
下の画面が出たら「参照(B)」をクリックしてトップページで選択した背景画像ファイルを
選択しOKを押します。
※備考:左メニューからも背景の設定が出来ます。
1.左メニューの素材タブをクリック
2.素材タブの下のフォルダを選択します。
3.背景画像の入ったフォルダを選択すると下のウインドウにファイル内の縮小画像が表示されるので
背景画像の縮小画面の上で「背景画像として挿入(B)」を選択します。
4.次にトップページで設置した方法で表をページ内に設置します。
3.表のメニューバーよりボタンを押し表の一列を削除します。表は下のような状態となります。
4.次に今作った表の中に文章を書き込んで行きます。
5.更にトップページで写真を挿入したのと同じ方法で、上側の表内にデジカメの写真を
挿入してみましょう。この際に挿入ポイントとなる点滅のカーソルは表の上側のセルの
一番最初に持ってきておいて下さい。
(点滅しているカーソルの位置が画像の挿入位置となります。)
このサンプルページのようになっていたら成功です。
(サンプルページにはホームページビルダーの素材の写真を使用しています。)
6.今度は写真を左に、文章を右に配置する手順をご説明します。
まず今挿入した画像上にマウスのポイントを持って行きワンクリックで画像を選択した状態にします。
次にメニューバーにある「属性の変更」ボタンをクリックします。
(画像上で右クリックし、右クリックメニューからでも選択できます。
属性のダイアログが現れたら中央部部の<回り込み「左寄せ(L)」にチェックを入れます。
最後に表内で右クリックして右クリックメニューを選択し「表の枠を非表示(B)」を選択して
表の罫線を消します。
このページのようになっていたら成功です。
次に今作った表をページ内の中央にセンタリングして、更にページ上部にトップページで
作ったタイトル画像を挿入してみましょう。
8.表のセンタリングの方法
- 表内を一度左クリックし、表内のひとつのセルを選択した状態にします。
- 表以外の場所を左クリックすると表全体が選択された状態となります。
- メニューバーのセンタリングボタンをクリックします。
9.2ページ目へのタイトル画像の挿入
- ページ上部のタイトル画像を入れたい場所に点滅しているカーソルを移動します。
- メニューバーの「画像の挿入」ボタンをクリックして親フォルダに保存されているタイトル画像をクリックしてOKを選びます。
- 上の表のセンタリングを同じようにタイトル画像の上で一度左クリックし、さらに「センタリングボタン」をクリックしてタイトルもセンタリングします。
- このページのようになっていたら成功です。
10.最後にトップメニューの「ファイル(F)」→「上書き保存(S)」を選択します。
11.「名前をつけて保存」の画面が現れたら右上の「新しいフォルダの作成」を選択し
「profile」というなのフォルダを制作します。profileフォルダが出来たらそれをダブルクリックしてフォルダを開き
編集中のファイル名をprofileとして「保存(S)」を押して保存します。
|