記事検索:
tips_024
このページでは、当サイト「iWebでお気軽ホームページ」の初代デザインのページの作り方を、チュートリアル式でご紹介します。初代デザインのサンプルはこちらをご覧ください。
このホームページがどのようにして作られているかをお見せする事で、少しでもiWebでホームページを作成されている方の参考になればと思います。
2008/12/30
最初にするのは、何はなくとも新規ページの作成です。新しくページを作らないと何も始まりませんから。
テーマは「白」で、テンプレートは「Blank」を利用します。
普段は既存のページを複製して再利用します。そうすれば、メニューのリンクなどの再設定もなく、テキストボックスなどの最低限の素材も使い回せるので、手間は最低限で済みます。
しかし、ここでは作成手順のご紹介なので、まっさらな新規ページから作っていきます。
それでは、テーマを白でBlankのテンプレートを使って新規ページを作成したら、ページインスペクタのレイアウトパネルを表示して、下のように設定をします。新規ページの作成は「ウェブページを作るには」を、ページインスペクタの使い方については「インスペクタ【ページ】」をそれぞれ参考にしてください。

コンテンツの幅:910px
コンテンツの高さ:480px
ヘッダの高さ:100px
フッタの高さ:100px
ページの背景:カラー塗りつぶし(白)
ブラウザの背景: カラー塗りつぶし(白)
このうち、ページの背景だけは後で、イメージ塗りつぶしに修正します。
また、iWebが自動で生成するナビゲーションメニューは使用しませんので、ページインスペクタのページパネルで、「ナビゲーションメニューを表示」のチェックを外します。

事前に、幅910px/高さ1pxで両端だけが「#555f6a」に1pxだけ塗りつぶされた画像を用意しておきます。こんな感じの画像です。(ブラウザで表示してもよく分からないかもしれません。何せ高さ1pxですから・・・)
この画像をページの背景として設定して、タイル状に配置をします。すると、今見ているこのページのように、両端に線が表示されます。
最後に、Webページキャンパス上で最初から表示されているテキストボックスや線などを削除します。「Ctrl+A」を押して、表示されているオブジェクトを選択したら、deleteキーを押して削除します。
これで、ページの基本設定は終わりです。
次回は、ヘッダとフッタ部分を作り込んでいく過程をご紹介します。
iWebでお気軽ホームページの作り方(1)ページの基本設定
まずはBlankページを作って基本設定をします
このサイトはApple iWeb を使用して作成しています。
ご意見などはお問い合わせフォームからお願いいたします。
当サイトは、Yahoo!カテゴリ(Macintosh > アプリケーションソフト)掲載サイトです。