新規ページの作成
写真を横に2枚ずつ横並べするページを作成する。
- 「images」フォルダーに幅390pxの写真を4枚用意する。
- 高さは同じサイズに揃える。
- ビルダー付属の「ウエブサイトデザイナー」で処理。
- サイトから新規ページを開く
- ページ全体をdivで括る
- タイトルを書きh1で括る。
- 直下に写真を挿入し改行して写真を説明文を記載しdivで括る
- スタイルシートマネージャーでスタイルの追加からHTMLタグ名欄に「#container」と入力する。
- 位置タブで幅を800pxに設定する。
- レイアウトタブでマージンを自動に設定する。
- 文字のレイアウトタブで行の高さを150％に設定しOKをクリックする。
- 再び追加からHTMLタグ名欄に「.shashin」と入力する。
- 位置タブで幅を50%に設定し、回り込み「左」を選択する。
- 文字のレイアウトタブで水平方向の配置で「中央」を選択する。
- レイアウトタブで上下のマージンを10pxに設定しOK、OKをクリックする。
- スタイルシートエクスプレスで上方のdivを右クリックし、ID設定から「container」を選択する。
- スタイルシートエクスプレスでdivを右クリックし、クラス設定から「shashin」を選択する。
- ソースで「<div class="shashin">・・・・・・・・</div>」をコピーして3行貼り付ける。
- コピーしたdivの写真のファイル名部分を挿入する写真のファイル名に書き換え、説明文も書き換える。
- 写真の下に回り込み解除を設定した「戻るボタン」を作成する。
- 「戻るボタン」の下にアドレスを記載したdiv フッターを作成する。
- ファイルフォルダーに名前を付けて保存する。
- index.htmlを開きリンクを設定する。