今回はフッターとメニューに行きたいと思います。
・フッターの設定
スタイルエクスプレスビューを利用するまでは今までと同様です。
ＩＤを選択して名前にfooterを入力
属性も設定するのチェックボックスにチェック
ＯＫボタンを押下するとスタイルの構成の画面が表示されます。
レイアウトタブを選択して
上方向 ボーダー １ピクセル
スタイル 点線
色 オレンジ
を設定
位置タブ
高さ ２０ピクセル
属性 回り込み解除 両方
を設定
・メニュー
タブ形式のメニューを作成したいと思います。
１）事前準備
１回目で作ったメニューの領域の中に
メニューの項目を作成します。
メニュー１ 改行
メニュー２ 改行
メニュー３ 改行
といった形で入力します。
入力後ダブルクリックをして入力した文字を選択します。
ツールバーの挿入→リストにある番号なしを選択
次にリンクの設定をします。
先程入力したメニュー１～３の各行を選択して
右クリックリンクの挿入→URLを選択して
該当ＵＲＬを入力
設定が終わると下図のようになります。
ｈｔｍｌ上は以下のような記載となります。
- タブメニュー
- タブメニュー
- タブメニュー
- タブメニュー
２）ナビゲーションを作成する
スタイルエクスプレスビューのカーソル位置を選択
下位のＤＩＶを右クリックしてルールの新規作成を選択
ＩＤを選択して、名前にmenuを入力し属性も設定するのチェックボックスにチェックして
ＯＫを押下。
色と背景タブで背景色に青を選択
レイアウトタブで
上方向パディング １０ピクセル、右方向パディング ５０ピクセルを指定
位置タブで幅８００ピクセルを指定
スタイル構成のタブを選択してから中央の領域で右クリックして追加を選択。
スタイルの設定ダイアログでHTMLタグのスタイルを設定を選択し
HTMLタグ名に#menu ul と入力しリストタブで
なしを選択
次にメニューの個別の設定となります。
中央の領域で右クリックして追加を選択します。
HTMLタグ名に#menu ul liと入力し色と背景タブで白を選択します。
文字のレイアウトタブで垂直方向の配置に予約語・中央を選択
水平方向の配置に中央を指定
レイアウトタブで４方向ともにパディング０ピクセル
右方向のみマージン５ピクセルを設定
位置タブで幅１００ピクセル、高さ予約語・自動を設定
属性で回り込みの左を設定
以上でホームページの配置の設定は終了です。
あとは画像や配色などを考えて見栄えの良いをホームページにするだけです。
※本当はこちらの方が難しい気がします。
・今回の感想
配置を記載するだけで結構な量になってしまいました。
色などは割と右クリックするだけで変更できるので試しながら進めてみたいと思います。
以上
コメント