ホームページできるかな／超初心者さん向きＨＰ作成

トップページ

HPはどこにある？
HPのなかみ
HTMLって？
相対・絶対パス

用意するもの
作成手順
HP用素材
基本の小技集
HPを公開！

タグのプレビュー
いろいろな色
特殊文字
記号のよみかた
PCコラム

メールフォーム

掲示板

リンクについて
お役立ちリンク
自動相互リンク
レンタルサーバー
プロバイダー
広告でおこづかい
参考文献

Photo日記

page01 page02 page03 page04

Page01
１．初期画面です
２．タイトルを記入しましょう
３．本文を記入しましょう
４．テーブルを挿入しましょう
５．イメージ（画像）を挿入しましょう

１．初期画面です

DreamWeaver4.0操作説明

DreamWeaver4.0を起動すると上の画面が出てきます。画面の右のあるのは「オブジェクト」パネル、下にあるのは「プロパティ」パネルです。Windowsをお使いの方はキーボードの「F4」キーで簡単にパネルの表示・非表示の切り替えができます。
※できればこの時点でメニューバーの左端にある「ファイル」から「保存」を選び、あらかじめ作っておいたホームページ用のフォルダに保存してしまいましょう。

ソース

<body>

</body>
</html>

これはソースの外核の部分です。これだけは不変ですし、位置や並びの移動もありえませんのでなるべく早めに覚えてしまいましょう。
一番最初に記述されるのは<html>、一番最後に記述されるのは</html>です。これはHTML文書ですよ、という意味です。
<head>～</head>は、ヘッダーです。タイトル<title>～</title>など、HTML文書の情報が入ります。タイトルはブラウザのメニューバーに表示されます。
<body>～</body>は、HTML文書の内容です。ここに記述されたものが普段わたし達が見ているブラウザ画面に表示されます。ホームページを作るとほとんどこの<body>～</body>間の内容（ソース）が増えていきます。

このページのトップへ

２．タイトルを記入しましょう

DreamWeaver4.0操作説明

上図の赤枠部分に今から作ろうとしているページのタイトルを入れましょう。ここでは「Photo日記」と記入しています。
※この作業はいつでもかまいませんが、なるべく忘れず行いましょう。

ソース

<html>
<head>
<title>Photo日記</title>
</head>

<body>

</body>
</html>

タイトルは意外とと大事なものです。ブラウザのタイトルバー（一番上の部分）やお気に入りに登録したとき、検索サイトで表示されるのもここに記入したタイトルです。
タイトルが無記入の場合はそのページのアドレスが表示されるようです。また、ホームページ作成ソフトは初期状態の場合このタイトル欄に「新しいページ」「無題ドキュメント」等とあらかじめ入っています。直さないとちょっとかっこわるいですね。

このページのトップへ

３．本文を記入しましょう

DreamWeaver4.0操作説明

上図のようにまたタイトルを記入しましょう。ここからホームページ画面として表示されます。

ソース

<html>
<head>
<title>Photo日記</title>
</head>

<body>
Photo日記
</body>
</html>

<body>～</body>部分に記述されたものが、わたし達が普段ホームページとして見るブラウザ画面に表示される部分です。

このページのトップへ

４．テーブルを挿入しましょう

DreamWeaver4.0操作説明

オブジェクトパネルの上から2番目左側のアイコンをクリックしましょう。すると「テーブルの挿入」というパネルが出てきます。上図のように、行・1、列・2、セル内余白・0、セル内間隔・0、幅600ピクセル（パーセントになっている時は必ずプルダウンメニューでピクセルを選択しましょう）、ボーダー・0、と記入してください。あとは「OK」です。
ドット・・・・・・の枠ができましたね。テーブルの挿入の完了です。
※この枠はブラウザでは表示されません（ボーダー・0に設定しているので）。DreamWeaver4.0の操作画面として表示されているのみです。

ソース

<html>
<head>
<title>Photo日記</title>
</head>

<body>
Photo日記
<table width="600" border="0" cellspacing="0" cellpadding="5">
<tr>
<td>　</td>
<td>　</td>
</tr>
</table>
</body>
</html>

テーブルは表を作るためのものですが、レイアウトにもよく使われます。
<table><tr><td>の3つのタグで組まれます。この3つに行や列、幅や余白の設定をしていくんですね。
<table>～</table>は表を作りますよという意味です。ここで、「こんなかんじの表を作ります」と、次のように設定しています。横幅：width="600"、ボーダーの有無やサイズ：border="0"、セル内間隔：cellspacing="0"、セル内余白：cellpadding="5 。数字はすべて「ピクセル」単位です。
<tr>～</tr>は表に横列（行）を作ります。この場合は1行なので、1組あります。
<td>～</td>で横列の中にセル（列）を作ります。この場合は2列なので、<tr>～</tr>の中に2組あります。

このページのトップへ

５．イメージ（画像）を挿入しましょう

DreamWeaver4.0操作説明

まずテーブルの左側のセル（枠の中）をポチっとクリックしておきましょう。ここに画像を挿入します。
オブジェクトパネルの一番上の左側のアイコンをクリックしましょう。すると「イメージソースの選択」というパネルが出てきます。上図のように挿入したい画像を選び「選択」をクリックしましょう。テーブルの中に画像が挿入されます。
ここで注意したいのは、画像が保存されている場所です。画像は必ずホームページ（HTML文書）と同じ場所（同じフォルダ）に保存しておきましょう。フォルダの中のフォルダはOKですが、フォルダの外のフォルダはNGです。警告「サイトをパブリッシュした際、アクセス出来ない可能性があります」が出てしまいます。
また、この時まだ今作っているページを「ファイル」→「保存」していなかった場合も同じように警告「ドキュメント相対パスを使用するには、まずドキュメントを保存する必要があります」が出ます。
早めに、こまめに保存しておきましょう。

ソース

<html>
<head>
<title>Photo日記</title>
</head>

<body>
Photo日記
<table width="600" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><img src="rose-a.gif" width="230" height="250"></td>
<td>　</td>
</tr>
</table>
</body>
</html>

セル<td>～</td>の中に<img src="rose-a.gif" width="230" height="250">が入っていますね。
これはrose-a.gifという名前の、幅width="230"ピクセル、高さheight="250ピクセルの画像imgをこの場所に表示してねsrc=という意味です。
HTML文書はブラウザへの指令書です。文字しかありません。画像は「この場所に」「このサイズで」「読みこむ」ことを指定しないと表示されないんですね。ただ名前だけ<img src="rose-a.gif">でも表示されますが、「このサイズで」の指定をしておかないと、ブラウザの方でどのくらいのサイズか確認作業をしてから読みこむので、表示に時間がかかってしまいます。
多少面倒でも、サイズは記入しておいた方がいいですよ。

このページのトップへ