×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

ホームページの作り方 >> ホームページ作成編 >> 新しいページを作ろう

ホームページ作成編 13.新しいページを作ろう!

「index.html」が完成しました。
やりましたね!おめでとうございます。
この勢いで、ホームページを完成させてしまいましょう!

名前をつけて保存」で、新しいページを作ろう!

ホームページ作りもあと少しで完成ですね!全体的なレイアウトは終わっているので、CSSに書き足すこともあと少しです。
HTMLも「index.html」を参考にしていけば、意外と楽に出来上がります。
あと少しがんばりましょう!

1.新しいページを作ろう!

「index.html」が完成したので、まずは喜びましょう!やったぁ〜!
もう少しで、ホームページも完成ですね!

さてそれでは、2ページ目の サンプル をのぞいてみましょう。
よく見ると、よく見なくてもページ全体のレイアウトは「index.html」と同じですね!

ホームページを作る時は、各ページごとに全く異なったレイアウトにするのではなく、各ページ同じか、似ているレイアウトにした方が、ホームページを見る人もみやすいし、ホームページを作るあなたにとっても作りやすいと思います。
その分、最初のページを作る時には他のページのこともあるので、じっくり考えてレイアウトを組んでいくようにしましょうね!

さて、まずは、2ページめ用のHTMLファイルを作らなくてはなりませんね!
1ページめ(index.html)の時と同じ方法で作ってもいいのですが、せっかく今完成したHTMLファイルがあるので、それを利用して楽に2ページめのHTMLファイルを作っちゃいましょう!

1-1.名前をつけて保存

まず、あなたのホームページの「index.html」のHTMLファイル(メモ帳)を表示してください。
その左上「ファイル(F)」→「名前をつけて保存(A)」→出てきた小窓の「ファイル名(N)」の欄が反転文字になっていると思います。そのままクリックをせず「page2.html」と打ち込んで「保存」をクリック。

名前をつけて保存(A)

すると、「homepage」フォルダの中に新たに「page2.html」というHTMLファイルが出来ました。
更に今開いているメモ帳も「page2.html」になっていますね。(メモ帳の左上に「page2.html-メモ帳」と表示されていますね。)

このメモ帳の必要な部分だけを書き換えていけば、2ページめ以降は比較的楽に作っていけます。

1-2.内容を書き換えよう!

例えば、大見出しを「Wellcome to my Homepage!!」から「2ページ目の大見出し」へ変更する時は、<h1>〜</h1>の中だけをかえればいいですね。
「main_spc」の中身をかえる時は、下のような範囲を一度に消してしまって新たな内容を書き、又同じように次の部分を書き換えていく、という風にしていけばいいですね!

page2のメモ帳

つまり、CSSファイルに対応し、ページのレイアウトを決めているHTMLタグを残して、他の部分を書き換えれば新しいページは、作りやすいということです。
「head」部分も赤い字のところだけ、そのページに合わせて変えてやればOKです!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="初めてホームページを作ってみました。見てね。">
<meta name="keywords" content="ホームページ,初心者,作成,簡単,入門">
<title>初めてのホームページ</title>
<link rel=stylesheet href="style.css" type="text/css">
</head>

CSSファイルは2ページめ以降にも対応してくれるので、新たに作る必要はありません。
<link rel=stylesheet href="style.css" type="text/css">
の表記があるからですね!
2ページめ以降で新たに設定する時は、今まで使っていたCSSファイル(ここでは「style.css」ですね。)に書き加えていけばいいのです。

本文でも書いていますが、ホームページのレイアウトは、各ページごとにあまり変えない方が賢明かと思われます。ページごとにレイアウトが全然違うとホームページを見にきてくれた訪問者の方が戸惑ってしまいます。最悪、違うホームページに移ってしまったと思って去っていってしまうかもしれません。各ページへのリンクの場所も一定にしておいた方が、親切ですね。いつでも分かりやすくトップページに戻れる工夫もしておきたいものです。はじめて、訪問してくれた方にもここは何のホームページなのか、目的のページにはどうやっていくのか等を分かりやすくしておいた方がより多くの方にホームページを見てもらえると思います。色々なホームページを見て、見やすいホームページを研究してみてくださいね。

キャンバストートバック ■HAPPY COIN■ ナチュラル/イエロー

サイズ:約
370mm×360mm×110mm
(縦×横×底マチ)
25mm×470mm(持ち手)
内容量:約10L
材 質:綿100%


<送料>
ゆうパック 一律500円
沖縄県1000円
メール便 一律160円

 
別窓で開く便利な検索窓です。どうぞご利用下さい!
カスタム検索