素材サイトの活用
月曜日, 2 月 28th, 2011サイト作りを勉強していくと、ボタンや、壁紙のデザインをしないといけないような事を言われます。
しかし、そこまでやらなくてもホームページ素材を公開している人はたくさんいますからそこからもらってくる方法でいいと思います。
完全オリジナルを狙うと、初心者であれば1年経っても作れない場合の方が多いのです。
1からすべてを作るのではなく、不得意なところはこうした素材サイトを活用したほうが良いと思います。
サイト作りを勉強していくと、ボタンや、壁紙のデザインをしないといけないような事を言われます。
しかし、そこまでやらなくてもホームページ素材を公開している人はたくさんいますからそこからもらってくる方法でいいと思います。
完全オリジナルを狙うと、初心者であれば1年経っても作れない場合の方が多いのです。
1からすべてを作るのではなく、不得意なところはこうした素材サイトを活用したほうが良いと思います。
前回トップページをつくりました。
その要領で、サブページをつくります。
サブページとは、
トップページからリンクされるページのことです。
原稿は既に用意していますので
それを利用します。
手順ですが
トップページを複製して、ファイル名を変えて保存します。
そうすることで、リンクボタンなどを再度配置する必要がありません。
次にページタイトルを変えます。
会社概要のページでしたら
タイトルをトップページのタイトルの後ろに追加します。
こんな感じ
トップページタイトル「世界で一番すてきな商品販売」の場合
会社概要のページのタイトルは
「世界で一番すてきな商品販売 / 会社概要」
同様に
「世界で一番すてきな商品販売 / 特定商取引法に関する表記」
のようになります。
そして、メインの記事を
上図、3のエリアに記載します。
これでサブページがひとつ完成しました。
同様、必要なサブページを全て作成します。
はじめは、記事は少なくても構いません。
この段階では、まず、形があることが重要です。
記事の肉付けは完成後でもできます。
注意点は、すべてのページを作ってしまうこと。
「ページが見つかりません。」
というエラーが起きないように全てのページを
作ってしまいます。
ホームページビルダーで構いませんが
私は Adobe Dreamweaver がオススメです。
前回書いたデザインの下書きを元に
ホームページを作って行きます。
ソフトウェアの使い方については
ソフトウェアのマニュアルをご覧ください。
ホームページ作成ソフトを使って
上記のようにテーブルを配置しましょう。
そしてテーブルタグの各セルの背景色を
先日決めた色で配色します。
イメージ画像があるところは
その画像を挿入します。
2の位置にメニューリンクを配置します。
3の位置に3日目に書いたメインの記事を記載します。
デザイン下書きどおりにできらた
それをトップページとします。
まず、一枚できましたね。
次回は、サブページをつくります。
そろそろホームページを形にする作業です。
1枚の紙を机に広げてください。
その紙に、作りたいホームページの下書きをします。
まずは、縦長の四角を書いてみて
それはホームページの外枠です。
書けた?
そしたら次は上のほうに横線を引きます。
外枠の1/10位の位置に
それがヘッダーのタイトルバーになります。
次に左から1/4位の位置に縦線を引きます。
これが左側のナビゲーションを配置するエリアになります。
こんな感じに仕切ります。
┏━━━━━━━┓
┃ 1 ┃
┣━┳━━━━━┫
┃2 ┃ ┃
┃ ┃ ┃
┃ ┃ 3 ┃
┃ ┃ ┃
┃ ┃ ┃
┃ ┃ ┃
┣━┻━━━━━┫
┗4 ━━━━━━┛
1の位置に2日目に用意した素敵な素材を配置します。
色を2と3のエリアと変えます。
2の位置にメニューボタンまたはメニューリンクを配置します。
ここは3のエリアと色を変えるといいです。
3の位置に3日目に書いたメインの原稿を配置します。
4の位置には各ページへのリンクや著作権表記を配置します。
色を1のエリアと同じにします。
色は、お好みの色で構いません。
ただし、たくさんの色を使わずに
2、3色にしましょう。
1色ベースになる色を決めて
トーンを変えて何色かバリエーションを持たせます。
例えば、紺系なら、濃い紺、やや濃い紺、薄い紺、明るい紺
これだけで同系色の4色という変化をつけることができます。
ボタンが作れなければテキストリンクでよいのです。
各ページ名を縦に並べてみてください。
それが、メニューになります。
どうですか?
悩まずにサクサクやると簡単でしょう。
This is a free Wordpress template provided by Mathew Browne | Web Design | SEO