作成を始める前に、まずこのページを分析しましょう。このページで使用されているものを見てください。
□ Web ページの上部にある「My Home Page」というタイトルは、テキストの段落です。
□ウェブページの真ん中に写真があります。
□下部のウェルカムメッセージはテキストの段落です。
□Webページの背景は濃い紫色です。
この Web ページの構造を考えたら、作成を開始できます。
まず Dreamweaver を起動し、サイト マネージャーを使用して Web サイト (ルート ディレクトリ) が作成されていることを確認します。
制作の都合上、事前にリソースマネージャーを開き、Webサイトディレクトリのimagesフォルダーに使用する画像を集めておいてください。
[タイトルテキストを挿入]
ページ編集デザインビュー状態に入ります。通常の状況では、エディターのデフォルトは左揃えで、カーソルは左上隅で点滅し、カーソル位置は挿入ポイントの位置になります。テキストを中央に挿入する場合は、プロパティ パネルの [中央] ボタンをクリックします。中国語入力メソッドを起動し、「My Home Page」という 4 つの単語を入力します。フォントが小さくても問題なく設定できます。
[テキスト形式を設定する] テキストを選択し、上部のプロパティ パネルでフォント形式をデフォルトのフォントに設定します。フォント サイズは任意に変更できます。そして「B」を選択するとフォントが太字になります。
[テキストの色の設定] まずテキストを選択し、プロパティ パネルの色選択アイコンをクリックし、ポップアップ カラー セレクターでスポイトを使用して色を選択します。
【Webページのタイトルと背景色を設定する】
「変更」メニューをクリックし、「ページのプロパティ」を選択します。ページのプロパティ ダイアログ ボックスがポップアップ表示されます (以下を参照)。
タイトル入力欄に「マイホームページ」と入力してください。
背景色の設定: Web ページの背景には画像または色を使用できます。この場合は色です。上図のように背景色セレクターを開いて選択します。背景を画像に設定したい場合は、背景画像の「参照」ボタンをクリックすると、画像選択ダイアログボックスが表示されますので、背景画像ファイルを選択して「OK」ボタンをクリックしてください。
デザイン ビューの状態で、タイトル「My Home Page」の右側の空白スペースでマウスをクリックし、Enter キーを押して行を変更し、次の手順に従って画像を挿入し、画像を中央に配置します。 [プロパティ] パネルの [左揃え] ボタンを使用して、左揃えにすることもできます。
【画像挿入】以下のいずれかの方法をお選びください。
(1) [挿入] メニューを使用します。 [挿入] メニューで [画像] を選択すると、[画像ソース ファイルの選択] ダイアログ ボックスが表示されます。画像ファイルを選択し、[OK] をクリックします。以下に示すように:
(2) 挿入列を使用する: 挿入列オブジェクト ボタン > 選択ボタンをクリックすると、「画像ソース ファイルの選択」ダイアログ ボックスが表示されます。残りの操作は上記と同じです。
(3) パネル グループの [リソース] パネルを使用します (下図を参照)。ボタンをクリックし、ルート ディレクトリのピクチャ フォルダを展開し、ファイルを選択して、マウスでワークスペース内の適切な位置にドラッグします。
※管理の都合上、写真は「images」フォルダに入れさせていただいております。画像が少ない場合は、サイトのルート ディレクトリに画像を配置することもできます。ファイル名は英語またはピンインの小文字で指定する必要があり、中国語は使用できません。そうしないと問題が発生します。
画像が挿入されます。 (*.swf アニメーション ファイルを挿入し、[挿入] メニュー > メディア > Flash を選択します)。
[ウェルカムテキストを入力してください]
画像の右側の空白スペースをクリックし、Enter キーを押して行を折り返します。上記の方法に従い、「ようこそ...」というテキストを入力し、プロパティ パネルを使用してテキストを設定します。
ページを保存します。
簡単なページはこのように編集されました。
[Web ページのプレビュー] ページ エディターで F12 を押して、Web ページの効果をプレビューします。
Web サイトの最初のページ (ホームページ) は、保存するときに通常、index.htm という名前が付けられます。
【概要】 簡単なWebページを作成しました。
内容は以下の4つです。
①画像の挿入と配置の設定。
② テキストの形式、色、太字の設定。
③背景色の設定;
④Webページをプレビューして実際の効果を確認します。
それをマスターするだけでなく、繰り返し練習する必要があります。