- ::無料でホームページ作り＞もっとホームページ作り
もっとホームページ作り
フォルダを使ってホームページのファイルを整理
- それじゃあ、もっとホームページを作ろう。
- ふつうホームページってたくさんのページからできているよね。このページもそうだよ。だから、今後たくさんのページを作るためにフォルダっていういれものを作っておこう。フォルダにきちんと整理しておくと、あのページどこやっただろ？って困ることはなくなるよ。
-
じゃあ、前に作ったindex.htmlっていうファイルがあるところを開いてね。そこで、ウィンドウのメニューから「ファイル」→「新規作成」→「フォルダ」をクリックしよう。フォルダはこんなアイコン
- フォルダ名には好きな名前をつけよう。作ったらindex.htmlとprofile.htmlのファイルをドラッグして今作ったフォルダのうえでドロップしよう。ファイルのアイコンの上でクリックしたままフォルダのアイコンの上でクリックを離せばフォルダの中に入るよ。
- フォルダをダブルクリックして。そうすると、index.htmlとprofile.htmlが入っているよね。フォルダにいれることでホームページのファイルをきれいに整理することができるんだ。この作業は今後よく使うから覚えておいてね。ちなみに、フォルダはホームページとして公開するとディレクトリという呼び方に変わるから気をつけてね。
画像を貼ろう
- フォルダができたから今度はいろんなページを作ってみよう。
- まず、ホームページには入り口になるページがあるよね。これはすでに作ったindex.htmlを使おう。このファイル名はどのプロバイダでも必要で、入り口のページとして使われることが多いよ。index.htmlの上で右クリック→「アプリケーションから開く」→「NotePad（メモ帳）」をクリック。
- まず、タイトルは目立つほうがいいよね。タイトルに画像を置くとワンポイントになります。まずはためしに下の雪だるまの画像を自分のホームページに貼ってみよう。
- 画像の上にマウスポインタをもっていき、右クリックでメニューから「名前をつけて画像を保存」をクリック。そして、ファイル名もファイルの種類（Gif）も変えないで保存する場所はindex.htmlのある場所を選び、「保存」をクリック。
- そして、下のソースをindex.htmlのBODY内に貼り付ける。
- すると、あなたのページに雪だるまが表示されます。これが画像の貼り付け方ですが、このページの雪だるま以外の画像を勝手に使ってはいけません。それは画像には著作権があり、コピーをすると罰金という法律があるからです。
- じゃあ、どうするかといえば、無料で画像を提供しているページからもらってきます。フリー素材と書いてあるホームページでは画像を使わせてもらうことができます。検索エンジンで「フリー素材」で検索すればたくさんでてきます。
- デジカメかスキャナを持っていて写真を貼る場合は、写真ファイルをindex.htmlと同じ場所にいれて、さきほどのimg src="1.gif"の1.gifの部分を「写真のファイル名.jpg」に変えます。表示されない場合は、「写真のファイル名.JPG」に変えてみてください。
- また、Windows付属のペイントで自作の画像作ることもできます。「スタート」→「プログラム」→「アクセサリ」→「ペイント」でペイントを起動。ファイルを保存するときは、必ずファイルの種類をJPEG形式またはGIF形式にしてください。保存場所はindex.htmlと同じ場所です。さきほどのimg src="1.gif"の1.gifの部分をJPEG形式なら「ファイル名.jpg」、GIF形式なら「ファイル名.gif」に変えます。
- 気をつけたいのは画像のサイズです。写真は小さい容量のものを使うか編集ソフトで小さくしましょう。ペイントでは小さいキャンパスで作成しましょう。特に、携帯のホームページで使う画像の容量は非常に小さいものにしましょう。携帯ではパケットを使うのであまり使わないほうが好まれます。
テンプレートを作ろう
- どんどん新しいページを作ってみよう。その前に、メモ帳は「スタート」→「プログラム」→「アクセサリ」→「メモ帳」でメモ帳の上で右クリック、「送る」→「デスクトップ（ショートカットを作成）」でデスクトップに置いておくと楽だよ。新しいページを作るのにいちいち最初から同じことを書いていくのは面倒だよね。だから、ベースになるページを作っておくと楽なんだ。新しくメモ帳を開こう。そして、下のソースをメモ帳に貼ろう。
- ファイル名はbase.htmlとでもしておこう。これをテンプレートにするよ。だから、このファイルでしっかりページをデザインしておくんだ。
- そして、base.htmlのファイルの上で「右クリック」、「コピー」を選ぶ。そして、その近くの空白にマウスポインタをもっていき、右クリック、「貼り付け」を選ぶ。すると、「コピー〜base.html」というファイルができたよね。そこで、今度は「コピー〜base.html」というファイルのうえで右クリック、「名前の変更」を選ぶ。好きな名前をつければ完了だよ。
- これを繰り返すと、同じデザインのホームページを作ることができるし、いちいち同じことを書く手間が省ける。また、自分でメモ帳に書いたこともコピーをすると楽だよ。文章をクリックしたまま移動し、範囲選択したあとに、右クリックで「コピー」で文章やタグをコピーができるよ。それを貼り付けたいメモ帳で右クリック、「貼り付け」を選ぶだけなんだ。
リンクでページをつなげよう
- ホームページをリンクで結ぶ方法覚えているかな？新しく作ったページをリンクで結んでいこう。index.htmlのページにすべてのページのリンクを貼っておくと便利だ。
- ここまでは携帯でも見ることができるホームページの作成方法を紹介したよ。パソコンではきっと物足りないはずだよ。続きはおすすめホームページ作りを見よう。
