記事検索：
このページでは、当サイト「iWebでお気軽ホームページ」の初代デザインのページの作り方を、チュートリアル式でご紹介します。初代デザインのサンプルはこちらをご覧ください。
このホームページがどのようにして作られているかをお見せする事で、少しでもiWebでホームページを作成されている方の参考になればと思います。
今回は、ヘッダとフッタの作り込みをご紹介します。
tips_025
2009/01/03
ホームページのタイトルロゴの画像の部分を「ヘッダ」として作り込んでいきます。
このタイトルロゴの画像は、実は下のように2枚のjpeg画像から成り立っています。
なぜ1枚の画像ではなく2枚の画像なのかというと、左側の画像にホームページのトップページへのリンクを設定する為です。
1枚の画像にしてしまった場合、ヘッダの画像全体にリンクが設定されてしまいます。それでも良い事は良いのですが、ページの真ん中あたりをクリックしても、トップページへリンクしてしまい、操作に違和感が出てしまうと考えて2枚にしてあります。
この画像をぴったり並べて、ヘッダ部分に配置します。この画像はメニューバーの「配置」メニューから「最背面へ」を選び、一番背面になるようにしておきます。
あとは、「お問い合わせについて」や「サイトマップ」へのリンクを設定したテキストボックスを配置し、HTMLスニペットを使ったGoogle検索を配置すれば、ヘッダの画像部分は完成です。
▼左側の画像
▼右側の画像（若干縮小して表示しています）
フッタ部分は、非常にシンプルです。まず、図形メニューから直線を選んで、長さを910pxにします。この線をグラフィックインスペクタを使って、点線にします。
この点線の下には、各コンテンツのトップページへのリンクを設定したテキストボックスを配置します。このテキストボックスも、点線と同じく横幅は910pxで、テキストインスペクタを使って、テキストを中央揃えに設定しておきます。
最後にコピーライトが書かれた部分ですが、まず幅910px、高さ30pxのテキストボックスを用意します。
次に下のような幅3px、高さ30pxの画像を用意して、テキストボックスの背景として、タイル上に配置します。背景に設定するには、グラフィックインスペクタで、塗りつぶしを「イメージ塗りつぶし」に設定します。
← 背景用に作成する画像
↓ 背景をイメージ塗りつぶしで塗りつぶしたテキストボックス
最後に、このテキストボックスに、 テキストの配置を中央揃えにして、白い文字でコピーライトを記入すれば完了です。
ここまで設定すれば、ヘッダとフッタの作り込みは完了です。 次回は、ヘッダの下にあるパン屑リストの作成と、サイドメニューを作成する過程をご紹介します。
-
iWebでお気軽ホームページの作り方（２）ヘッダとフッタの作り込み
ヘッダの作り込み
フッタの作り込み
このサイトはApple iWeb を使用して作成しています。
ご意見などはお問い合わせフォームからお願いいたします。
当サイトは、Yahoo！カテゴリ（Macintosh > アプリケーションソフト）掲載サイトです。
