HOME | フォントフリー | ホームページ無料素材 | 無料壁紙 | ホームページ無料テンプレート | 無料ホームページ作成 | Javascriptサンプル | 検索エンジン上位表示 | 
無料Wordpressテーマ     無料レンタルサーバー
広告掲載のお問い合わせ

ホームページ作成の手順

ホームページ作成前の下準備
1、作成に必要なソフトについて
2、ホームページを作成する目的
3、データを用意しましょう
4、本サイトで使用する素材の紹介
ホームページのタイトルを決める
1、適切なタイトルの決め方
2、ドメインについて
レイアウトを決めよう
1、イメージを形にしてみましょう
2、サイトマップの作成方法
3、一般的なレイアウトパターン
4、モニターの表示サイズに注意しよう
5、ブラウザの表示に注意しよう
6、作成するページのレイアウトの解説
スタイルシート(CSS)の作成方法
1、全体の枠組みの作成
2、メインメニュー、サイドメニューの設定
3、見出しとリンクの設定
XHTMLの作成方法
1、初期設定を行う
2、ヘッダー、メインメニューの作成
3、メイン、サイドメニュー、フッターの作成
4、メニューページの作成
自分のデザインに変えてみよう
1、画像素材の変更方法
2、無料でロゴやヘッダーを作成する方法
Javascriptを設置してみよう
1、画像を半透明にする方法
2、イメージ写真をフェードで切り替える方法
最後にチェックすべきこと
1、動作確認をしましょう
2、表示の確認を行いましょう
ホームページを公開しよう
1、ホームページを公開する方法
2、検索エンジン対策を行いましょう
ホームページをパワーアップしよう
1、ダウンロードサイトの作成方法
2、便利なタグの紹介
HOME > XHTMLの作成方法 > メニューページの作成

XHTMLの作成方法

メニューページの作成

このエントリーをはてなブックマークに追加
今回作成するホームページはトップページとメニューページのレイアウトが違います。
ですからメニューページも別途作成する必要があります。
スタイルシート(CSS)の作成方法はこちらです。
XHTMLスタイルシート(CSS)ともに、トップページをから修正を行い作成を行っていきます。
ここで行う修正のようにページをコピーして修正すれば、ページを増やすことは簡単に行うことができます。

メニューページの作成方法

まずは先ほど作成したindex.htmlファイルをコピーして名前をpage2.htmlとします。
次に 同じように kihon.cssもコピーして名前をmenu.cssとします。
 page2.htmlをメモ帳で開きます。
 <link>タグを下記のように書き換えて下さい。
スタイルシートをメニューページ用のものに変更する
<link href="kihon.css" rel="stylesheet" type="text/css" />
          
<link href="menu.css" rel="stylesheet" type="text/css" />
イメージ画像を小さいサイズに変更する
<img src="img/1.jpg" alt=画像の説明" width="852" height="290" border="0">
          
<img src="img/head2.jpg" alt=画像の説明" width="852" height="154" border="0">
パンくずリストを付ける
<div id="main">の下に次のタグを下記加えて下さい。
いわゆるパンくずリストと言われるもので、サイト閲覧者が今どのページにいるのかを分かりやすく
し、上位の階層に戻りやすくするためのものです。
<a target="_top" href="index.html">HOME</a> > MENU1<br />
少し、間隔を空けるため、<br />改行を入れてあります。
見出しメニューをH2タグに変える

<td valign="top" width="610"><img src="new2.gif" alt="What's New" width="600" height="30" border="0"></td>

          

<td valign="top" width="610"><h2>ここにメニューのタイトルを記入</h2></td>

 同じように info2.gifも H2に変更して下さい。
メニュー紹介の作成
 トップページで使っている画像を削除します。

<td width="610" height="150" valign="top">
<p><a href="#"><img src="img/13.jpg" alt=画像の説明" width="130" height="85" border="0" ></a></p>
<p><a href="#"><img src="img/15.jpg" alt=画像の説明" width="130" height="85" border="0" ></a></p>
<p><a href="#"><img src="img/16.jpg" alt=画像の説明" width="130" height="85" border="0" ></a></p>
<p><a href="#"><img src="img/12.jpg" alt=画像の説明" width="130" height="85" border="0" ></a></p>

</td>
赤字の部分をすべて削除して下さい。
削除したところを下記のように書き換えてメニューの紹介を作成します。
           

<td width="610" height="150" valign="top">
<p><img src="img/5.jpg" alt=画像の説明" width="180" height="117" border="0"><strong><a href="URL">商品名(サービス名)</a></strong></p>
ここに商品やサービスの説明を書いてください。<br>ここに商品やサービスの説明を書いてください。<br />
ここに商品やサービスの説明を書いてください。

</td>
そしてその下にあるここに文章を書き込みますという部分も
上記と同じように書き換えて下さい。
  そして img/5.jpg をそれぞれの「画像のファイル名」に変更して下さい。
メニューページのスタイルシートの作成
イメージ画像のサイズを小さくした分、サイドの位置を上に変更します。
スタイルシート page.css をメモ帳で開いてください。

#side{
width:205px;/*サイドの幅(変更するときはコンテンツ背景も変更すること)*/
position:absolute;
top:440px;/*上からの位置*/

           
top:320px;/*上からの位置*/
     メニューのページの作成サンプルを見る>>sample

Next Page
 自分のデザインに変えてみよう
1、画像素材の変更方法 >>
              さくらのレンタルサーバ

 【PR】
月額1,050円で本格的なお店のホームページ!
簡単!無料!自分のサイトでダウンロード販売!
無料検索エンジン上位表示補助ツール!LINKopty
ページランク3~5SEOに大変役立つオールドドメイン
無料SEOツール ZERO TOOLSでアクセスアップ!
月額無料のネットショップ機能付きレンタルサーバー
営業・委託販売・SOHO専門!お仕事探し完全無料!

Web作成に便利なサイト

SEO無料ツールの紹介
CGI無料配布サイトの紹介
無料でショッピングサイトを開設
素材が無料で作成できるソフト
無料で使える写真を配布しているサイト
テンプレート無料配布
Flash素材を無料配布しているサイト

PRサイト

SEO対策 アクセスアップ100の技
実践で覚えるスタイルシート作成方法
格安レンタルサーバー比較ランキング
Wordpressテーマ無料ダウンロード
ホームページ作成無料ツールのまとめ
ホームページ作成費用無料!
美少女発見!毎日写真更新dear Girls
美少女写真のdear Girls
Copy Right(C)2011 プロ並みのホームページを作る方法 All rights reserved.