Dreamweaver を使用して Web サイトをセットアップする詳細な手順

この記事の内容は、Dreamweaver を使用して Web サイトをセットアップするための詳細な手順に関するもので、困っている人は参考にしていただければ幸いです。

1. サイトを定義します。

1. 任意のルート ディレクトリ A に作成します。たとえば、MyWeb という名前のフォルダー (ここではドライブ E であると仮定します)。

***注: Web サイトで使用されるすべてのファイルには英語名が必要です。
2. Dreamweaver を開き、[サイト - 新しいサイト] を選択してダイアログ ボックスを開きます。 [サイト名] に Web サイトの名前を入力し (中国語も可能です)、ローカル ルート フォルダーに先ほど作成したフォルダー (E:web) を選択します。次に、確認します。
***注: Dreamweaver を再度開くと、作成したばかりのサイトが自動的に表示されます。複数のサイトがある場合は、メニュー「サイト - サイトを開く」で選択できます。

2. ページを作成します。

1. ローカル フォルダー E:\MyWeb の下の空白スペースで、[新しいファイル] を選択します。ページが作成されます。デフォルトのファイル名は untitled.htm です。 htm は、この Web ページ ファイルが静的 HTML ファイルであることを意味します。名前をindex.htmに変更します。

***Web サイトの最初のページの名前は、通常、index.htm または Index.html です。他のページの名前は自分で決めることができます。
2.index.htm をダブルクリックして、ページの編集状態に入ります。タイトル ボックスに Web ページの名前を入力し、右クリックして [ページ プロパティ] を選択し、[ページ プロパティ] ウィンドウを開きます。ここでは、Web サイトのタイトル、背景色または背面画像、ハイパーリンクの色 (通常はデフォルトで十分です) を設定し、その他はすべてデフォルトのままにすることができます。 ＃＃＃３。このときカーソルは左上隅にあり、「ホームページへようこそ」などの文章を入力できます。テキストを選択し、[ウィンドウ/プロパティ] メニューを使用してプロパティ パネルを開き、テキスト サイズを 6 に選択してテキストを中央に配置し、テキストの前にいくつかの改行を使用して中央に配置します。ページ。 ＃＃＃４。フォントを選択するには、「フォント: フォントリストの編集」の最後の項目を選択します。次に、ダイアログ ボックスで番号を選択し、[利用可能なフォント] 列のフォント リストに追加する必要があるフォントを選択し、中央のボタンをクリックして追加します。
***Web ページで最も一般的に使用されている漢字は Song フォントです。特別なフォントをリストに追加して使用しないでください。コンピュータに特殊なフォントがインストールされていない場合、他の人はそれらのフォントを見ることができません。必要な場合は画像化してからご使用ください。
***Webページ上でスペースを入力するには、入力方法を全角に調整する必要があります。
***Web ページ上で行を折り返す方法は、shift Enter です。 Enter キーを押すだけで段落を変更できます。


3. ページに画像を追加します。

1. ローカル フォルダー E:\MyWeb の下の空白スペースで、[新しいフォルダー] を選択します。 create フォルダーを作成し、それを使用して写真を保存します。名前を tu、pic、または image に変更できます。 2. メニュー「ウィンドウ/オブジェクト」を使用してオブジェクトパネルを開き、「画像の挿入」をクリックして、ダイアログボックスに挿入する画像を選択します。 「このファイルをルート フォルダーにコピーしますか?」というダイアログ ボックスが表示された場合は、「はい」を選択して、作成したフォルダーにファイルを保存する必要があります。

3. 画像を選択し、プロパティ パネルを開きます。ここで画像に名前を付け、画像の高さと幅をリセットし、画像の隅にある点をドラッグしてサイズを変更します。 Shift キーを押したまま隅の点をドラッグすると、アスペクト比を維持しながら画像を引き伸ばすことができます。元のサイズに戻すには、右下隅の「サイズ変更」ボタンをクリックします。 ＃＃＃４．「リンク」はここに直接アドレスを入力することもできます。 「置換」は画像の説明、つまりマウスが画像をポイントしたときに表示されるテキストです。「境界線」は画像の境界線の幅、「配置」は位置合わせ方法です。

4. ハイパーリンクを追加します

#1. テキストにリンクを追加します。

たとえば、ページに「My Article」と入力して選択し、プロパティ パネルを開き、[リンク] ボックスでリンク先のページを選択します。次の「ターゲット」ボックスでは、通常、現在開いているウィンドウの代わりに self を使用して新しいウィンドウを開くか、空白を選択して新しいウィンドウを開きます。 2. 画像へのリンクを追加します。 上記のテキストへのリンクと同じように、画像を挿入し、プロパティ パネルのリンク ボックスでそれを選択します。

****写真は複数の異なるリンクを作成できます。方法は次のとおりです。

プロパティ パネルの「マップ」項目の下にいくつかのグラフィックがあります。たとえば、四角形をクリックすると、カーソルが十字に変わり、その図上に青い長方形のホット ゾーンを描画します。このとき、このホットスポットはプロパティ パネルでリンク アドレスを設定し、マウスでポイントすると表示されます。同様に、円を使用してホットスポットを設定すると、画像に他のリンクを設定できます。
3. 電子メール リンクの追加
電子メール リンクを追加するテキストまたは画像を選択し、プロパティ パネルを開き、[リンク] ボックスに電子メール アドレスを入力します。形式は次のとおりです: mailto: 電子メール アドレス。間にスペースは入れないことに注意してください。 ＃＃＃４． exeやZipなどブラウザでは開けないファイルへのリンクの場合、閲覧者がリンクをクリックするとファイルのダウンロードやオンライン再生機能が実現します。


5. テーブルの使用

1. [挿入/テーブル] をクリックして、設定用のテーブル パネルを開きます。行、列、幅、境界線などの数、「セルの塗りつぶし」はセルの内側と内容の間の距離、「セルの間隔」はセル間の距離、単位はピクセルです。
2. テーブルを挿入した後、テーブルの境界線をクリックしてテーブル全体を選択します。次に、下のプロパティパネルでさまざまな設定を行うことができます。
3. カーソルをいずれかのセルに移動すると、現在表示されているプロパティ パネルがそのセルのプロパティ パネルです。セルに対してさまざまな操作を実行することもできます。背景色、背景画像、枠線、結合、分割など。

6. テーブルに対するその他の操作

1 細い線のテーブルを作成する原則:
1. テーブル全体を選択し、その背景を黒に設定します。色は表の線の色です）。
2. すべてのセルを選択し、背景を白に設定します。

2 テーブルを自動的にフォーマットする
1. まずテーブルを作成し、それを選択します。
2. メニューから「コマンド/フォーマットテーブル」を選択します。つまり、いくつかのプリセットされたテーブル スタイルを選択できます。

3 ピクセル分割バー
1. 1 行 1 列、幅 200 ピクセル、境界線とマージン 0 の表を挿入します。
2. テーブルを選択し、テーブルの高さを 1 ピクセルに設定し、背景色 (つまり、目的の線の色) を設定します。
3. コードとデザイン ウィンドウに切り替えて、コード を削除します。

7. テーブルを使用して完全なページを作成します

Web ページの上部 (通常はアイコン、広告、ナビゲーション メニューを含みます)
1. 1 行 2 列、幅 760 ピクセル、境界線とマージン 0 の表。
2. テーブルを選択し、配置を中央揃え、背景色を #3366CC に設定します。
3. 左のセルにカーソルを置き、横方向の配置を左揃え、縦方向の配置を上揃えにして、ここにWebサイトのアイコン、つまりロゴを挿入します。
4. 右側のセルにカーソルを置き、幅を 500 に設定し、水平方向に中央に配置し、垂直方向に中央に配置して、画像 (通常は Web ページの広告) を挿入します。バナー。
5. 先ほど完成した表の後にカーソルを置き、/table を挿入し、幅 760 ピクセル、境界線と余白が 0 の表を作成します。
6. 作成した表を選択し、配置を中央揃え、背景色を #005173 に設定します。
7. 複数の画像をナビゲーション バー メニューとしてテーブルに挿入します。

2 番目の Web ページの中央部分 (左側に列リスト、中央に Web サイト ニュース、右側に列リスト)
1. ナビゲーション バー テーブルの後に、/table を挿入して作成します。 1 行 3 列、幅 760 ピクセル、枠線と表のマージンは両方とも 0 です。そして、配置モードを中央揃え、背景色を#FFFFFFFFに設定します。
2. 左のセルにカーソルを置き、幅を 18% に設定し、水平方向に中央に配置し、垂直方向に上に配置して、画像とナビゲーション バーを挿入します。
3. 挿入した画像の後にカーソルを置き、[挿入/表] をクリックして、12 行 1 列、幅 90% の表を挿入します。セル間隔を 1 に設定し、背景色を #CCCCCC に設定します。
4. テーブルの最初のセルにカーソルを置き、高さを 20、背景色を #FFFFFF に設定します。挿入/画像。ナビゲーション テキストの前に小さなドットを挿入します。残りの11個のセルも同様に設定すると、左の列分類リストが完成します。
5. メインテーブルの中央のセルにカーソルを置き、幅を 66% に設定し、水平方向に中央に配置し、垂直方向に上部に配置して、/image を挿入し、ナビゲーション バーを挿入します。
6. 画像の後にカーソルを置き、挿入/表を実行し、4 行 1 列、幅 95% の表を挿入します。セル間隔を 1 に設定し、背景色を #CCCCCC に設定します。
7. テーブルの最初のセルにカーソルを置き、マウスをドラッグして 4 つのセルをすべて選択し、高さを 60 に、背景色を #FFFFFF に設定します。
8. メインテーブルの右側のセルにカーソルを置き、幅を 16% に設定し、水平方向に中央に配置し、垂直方向に上に配置し、挿入/画像を使用してナビゲーションを挿入します。バー。
9. 画像の後にカーソルを置き、[挿入/表] をクリックして、7 行 1 列、幅 90% の表を挿入します。間隔を 1 に設定し、背景色を #CCCCCC に設定します。
10. Ctrl キーを押したまま、挿入した表のセル 1、3、5、7 をクリックし、高さを 55、背景色を #FFFFFF に設定します。
11. セル 2、4、6 を選択し、高さを 6、背景色を #FFFFFF に設定します。
12. ソース コード ウィンドウに切り替えて、セル 2、4、および 6 のスペース記号「 」を削除します。

3 番目の Web ページの下部 (通常、著作権情報およびその他の関連コンテンツが含まれます)
1. メイン テーブルの後にカーソルを置き、/table を挿入し、幅 760 ピクセルの 2 行 2 列のテーブルを作成します。境界線とマージンの両方が 0 のテーブル。
2. テーブルを選択し、配置を中央揃え、背景色を #3366CC に設定します。
3. 表の行 1 の左側のセルにカーソルを置き、幅を 50%、水平配置をデフォルト、垂直配置をベースライン、背景色を #FFFFFF に設定し、コンテンツを入力します。色は何でも構いません。
4. 表の行 1 の右のセルにカーソルを置き、/image を挿入し、丸い画像を挿入し、その後ろに「Email」という単語を入力し、そのサイズと色を 1 および #FFFFFF に設定します。
5. 挿入/フォーム オブジェクト/テキスト フィールド、テキスト フィールドを挿入します。幅は任意です。
6. 挿入/画像、GO 画像を挿入します。
7. ページのプロパティを設定します。 [編集/ページ プロパティ] メニューをクリックし、[タイトル] 列にタイトルを入力し、背景画像を選択して、上枠を 0 に設定します。
*** Web ページ全体をさまざまな部分に分割し、それらを異なるテーブルに結合すると、ブラウザがページを読み取るのにかかる時間を短縮できます。 ; ブラウザは表全体を読み取った後にコンテンツを表示するため、表全体をフレーム化しないことをお勧めします。

8. レイアウト テーブルを使用して完全なページを構築します。

1. [挿入/レイアウト] をクリックすると、内部のレイアウト ビュー ボタンがレイアウト ビュー状態 (デフォルトは標準ビューです)。メニューのView/Table View/Layout Viewからも入力できます。
2. まず「レイアウトテーブルを描画」ボタンをクリックし、ページ上に図面のようにレイアウトテーブルを作成します。
3. 前の例と同様に、まず Web ページの上部、次に中央、そして下部に大きな表を描画します。
4. 再度「レイアウトセルの描画」ボタンをクリックし、既に描画されているレイアウトテーブルにレイアウトセルを描画します。
5. 標準ビューに戻り、分割されたテーブルに小さなネストされたテーブルを挿入し、ページを調整し、ページ全体のデザインを完成させます。
****このような Web ページの閲覧速度は非常に遅くなるため、ページ全体を大きなレイアウト テーブルに配置する場合は注意してください。ページのレイアウトとコンテンツに応じていくつかのレイアウト テーブルを分割し、そこにレイアウト セルを挿入する必要があります。

9. レイヤーの使用

1. [挿入/レイヤー] をクリックします。アイコンをクリックしてマウスをドラッグしてレイヤーを作成することもできます。
3. 作成したレイヤーを選択し、プロパティパネルを確認します。デフォルトの「レイヤー番号」と「ラベル」をそのまま使用します。プログラミングには「層番号」が必要ですが、現在は一般的には使用されていません。 「上」はページの上端からの距離、「左」は左端からの距離です。 「z 軸」はレイヤーの順序であり、大きな数字が小さな数字の上に積み重ねられます。
****色が設定されていない場合、レイヤーは透明になります。
4. 中間レイヤーの左上隅にある小さなボックスをクリックしてレイヤーを自由にドラッグし、サイズを調整することもできます。
5.「オーバーフロー」欄では、テキストがレイヤーのサイズを超えた場合、表示(超えた部分は表示されます)、非表示(余分な部分は非表示になります)、スクロール(関係なくスクロールバーが表示されます)超過したかどうか）、自動（超過した場合にのみスクロール バーが表示されます）。
6. メニュー「ウィンドウ/その他/レイヤー」をクリックすると、レイヤー管理ウィンドウが表示されます。そこでレイヤーの名前と Z 軸の値を変更したり、目のアイコンをクリックしてレイヤーを表示または非表示にしたりできます。重複を防ぐオプションもあります。 ##7. レイヤーの位置合わせ。 Shift キーを押したまま複数のレイヤーを同時に選択します。次に、ここのオプションを使用して、[修正/位置合わせ]を使用します。
8. 入れ子になったレイヤー。 ⑴まず文書内にレイヤーを挿入します。 ⑵ レイヤー内にカーソルを置き、引き続きレイヤーを挿入して、ネストされたレイヤーを取得します。 ⑶内側を子層、外側を親層と呼びます。 Z 軸の順序は同じです。親レイヤーをドラッグすると、子レイヤーも相互に相対的に移動します。子レイヤーを移動しても、親レイヤーは一緒に移動しません。

10. タイムラインを理解する

1. メニューの [挿入/レイヤー] をクリックしてレイヤーを挿入します。

2. 飛行機の写真などの写真をレイヤーに挿入します。 (ここでの画像は小さなアニメーション .gif 画像でも構いません)
3. メニューの [ウィンドウ]/[その他]/[タイムライン] をクリックして、[タイムライン] ウィンドウを開きます。
4. ページ上に作成したレイヤーを選択し、レイヤーの左上隅にある小さな四角形のアイコンをマウスで押したまま、レイヤーをタイムラインの最初のフレームにドラッグします。このとき、15フレームの長さのタイムラインが自動作成されます。
5. タイムライン上の最初のフレームを選択し、ページ内のレイヤーをページの左上隅 (アニメーションが開始される位置) にドラッグします。
6. タイムライン上のフレーム 15 を選択し、フレームを任意の長さ (たとえば 30 フレーム) までドラッグします。
7. 30 フレーム目を選択し、レイヤーをページ右下にドラッグすると、ウィンドウには 1 フレーム目から 30 フレーム目までのレイヤーの移動軌跡が表示されます。 (この時の動きは直線です)
8. 15番目のフレームをクリックし、右クリックして「キーフレームの追加」を選択します。 15番目のフレームを選択した状態で、レイヤーを中央と下部にドラッグします。ページ。
9.「自動再生」項目にチェックを入れます。

11. ローリング掲示板の作成

1. ページにレイヤーを挿入し、そのレイヤーの背景を掲示板の枠として設定します。
2. 次に、作成したレイヤーにネストされたレイヤーを挿入し、そのネストされたレイヤーを親レイヤーの下に移動します。
3. ネストされたレイヤーにテキストを入力し、中央に配置します。
4. [タイムライン] パネルを開き、サブレイヤーをオブジェクトとしてパネルに追加します。
5. 子レイヤーの上向きの移動パスを作成し、親レイヤーの上に移動します。
6. 最後のキーフレームをドラッグしてアニメーション時間を増やし、「自動再生」と「ループ」にチェックを入れます。
7. 親レイヤーを選択し、そのプロパティ パネルで「オーバーフロー」プロパティを「非表示」に設定します。

12. ページで Flash アニメーションを使用する

1. 挿入の [Flash] ボタンをクリックして、ページにアニメーションを挿入します。 [挿入/メディア/フラッシュ] メニューを選択して、この手順を完了することもできます。
2. 挿入したアニメーションを選択し、プロパティ パネルを確認します。ここで幅と高さを設定したり、ドラッグしてサイズを変更したりできます。
3. ここで「再生」をクリックするとアニメーションをプレビューできます。

13. 挿入した Flash アニメーションを透明にする

1. Web ページに既に背景がある場合、または画像上に Flash アニメーションを挿入したい場合, また、Flashアニメーション自体にも背景色があるので、このとき見た目に影響を与えるため、透明アニメーションにする必要があります。
2. たとえば、ページに画像を挿入します。
3. 画像上にレイヤーを挿入し、そのレイヤーに必要な Flash アニメーションを挿入します。
4. Flash アニメーションを選択し、プロパティ パネルの「パラメータ」ボタンをクリックします。
5.「パラメータ」の左側のボックスに「wmode」と入力します。右側の「値」ボックスに「transparent」と入力します。

14. ページ上でサウンドを再生します。

1. ページ全体を完了した後、ページに BGM を追加する場合は、BGM に注意してください。通常は *.midi ファイルですが、このようなサウンド ファイルは非常に小さいため、すぐにダウンロードするのは簡単です。他の形式は BGM には適していません。
2. ページ上のすべてのテーブルに加えて、(この時点では、編集ウィンドウの左下のラベル選択バーには項目

のみが表示されていることに注意してください。または、 をクリックします)左下隅にあるため、この動作がページ全体に追加されていることを確認してください)。動作ウィンドウの「 」ボタンをクリックします (または、メニュー「ウィンドウ/動作」を使用して動作ウィンドウを開きます)。
3. ポップアップ メニューから「サウンドの再生」を選択します。ダイアログボックスを開きます。
4. このダイアログボックスの「参照」で再生したいサウンドを選択し、確認します。
5. このとき、動作パネルにはイベントが onload として、アクションがサウンドの再生として自動的に表示されます。この行をクリックすると、中央にボタンが表示されます。ボタンをクリックして、このサウンドが再生されるイベントを設定します。 「表示イベント」/「IE5.0」を選択できます。
6. 通常、Onload (ページが読み込まれるとき)、OnClick (マウスをクリックする)、OnMouseOver (マウスがオブジェクト上を移動するとき)、OnUnload (ページが読み込まれるとき) を使用します。
7. この動作は、画像やテキスト リンクにも設定できます。テキスト リンクでサウンドを再生する前に、まずテキストに空のリンクを追加します。テキストを入力し、「#」記号を入力します。

15. まず、小さなウィンドウで表示されるページを作成します。ウィンドウ (a.htm など)。このため、ポップアップ ウィンドウは大きくなりすぎてはいけません。そのため、コンテンツは小さくする必要があります。作成したページを開き、ページ上のすべてのテーブルの外側にカーソルを移動します。動作ウィンドウの「 」ボタンをクリックし、ポップアップメニューから「ブラウザウィンドウを開く」項目を選択します。 3. ダイアログボックスに対応する設定を入力します。表示される URL は次のとおりです。 htm. ウィンドウの幅と高さをピクセル単位で設定します。設定後、「OK」をクリックします。必要がない場合は、この動作を画像やテキスト リンクに設定することもできます。訪問者への開始時の挨拶、Web サイトからのお知らせ、終了時の別れのメッセージ

16. ステータス バーの情報を制御します ## 1. ページを開き、画像を選択します。 #2. 動作ウィンドウの「 」ボタンをクリックし、ダイアログボックスの「メッセージ」列に表示するテキストを入力します。この画像の紹介
4. 動作のトリガー条件を OnMouseOver (マウスを移動する) に設定すると、マウスがこの画像の上を通過すると、関連する情報がステータス バーに表示されます。 5. マウスを移動した後にこの情報を消去する必要がある場合は、「メッセージ」セクションでこの動作を再度使用し、列に何も書き込まず、トリガー条件を OnMouseOut (マウスが削除された) に変更します。この動作をテキストの一部またはページ全体に設定することもできます。

17. ポップアップ情報

1. 作成したページを開き、左下隅の

項目をクリックします。動作ウィンドウの「 」ボタンをクリックし、ポップアップメニューから「ポップアップ情報」項目を選択します。
2. 設定画面の「メッセージ」欄に表示したいメッセージを入力します。
3. トリガー条件が Onload (ページのロード時) に設定されている場合、ページを開くためのウェルカム メッセージとして使用できます。 OnUnload (ページが閉じられたとき) に設定されている場合、ユーザーがページを閉じたときのお別れメッセージとして使用できます。
4. テキストの特定の段落にポップアップ情報を設定することもできます。たとえば、他の人にテキストの一部をコピーさせたくない場合は、テキスト全体を選択します。

が段落である左下隅に表示されます。 ##5. 次に、同様の操作を行って、メッセージに著作権などの記述を入力します。トリガー条件を OnBeforeCopy (右ボタンを押したときにトリガー) または OnCopy (右ボタンを押してコピーしたときにトリガー) に設定するだけです。

18. ダイナミック画像ボタン
1. 同じサイズの画像を 2 枚用意し、1 枚をグレースケール写真として、もう 1 枚をカラー写真として使用します。 。 写真。または、凹型のボタンが付いているものと、盛り上がったボタンが付いているものがあります。
2. 例: 3 行 1 列の表を挿入し、幅を 180 ピクセルに設定します。
3. カーソルを最初の行に置き、グレースケールの画像を挿入します。
4. プロパティ パネルの [リンク] 列にリンクするアドレスを入力し、画像に名前を追加します (例: tu1.
5) 動作ウィンドウの [ ] ボタンをクリックして選択します。ポップアップメニュー「画像の入れ替え」から。 ＃＃＃＃６． このとき、「画像」欄に交換する画像が表示されますので、「Temple 元ファイルは」欄で交換する画像を選択してください。
7. 以下に「画像のプリロード」と「マウスがスライドしたときに画像を復元」の 2 つのパラメータがあり、両方とも選択する必要があります。
8. 同様に他の 2 つの動的ボタンを作成します。

19. フレームを使用してページをレイアウトする

フレームワークは、フレームセットと単一フレームという 2 つの主要な部分で構成されます。
1. 挿入されたフレームをクリックすると、定義された 13 個のフレーム スタイルが表示されます。上中下構造を例に考えてみましょう。 ＃＃＃２．「上・中・下」のフレーム構成のアイコンをクリックすると、ページ上に上下２つのフレームが挿入され、ページ全体が３分割されます。上に「上」、真ん中に「中」、下に「下」と入力します。 ＃＃＃３．まず保存してください。メニューの「ファイル」/「すべて保存」をクリックします。このとき、まずフレームセット ファイルを保存し、kuangjia.htm などの名前を自分で変更できます。フレームセット内の他のページは個別に保存されます。該当ページを保存するとこの部分が点線枠で囲まれるので、上記部分をshang.htmとして保存できます。下の部分は xia.htm として保存されます。中間部分は zhong.htm として保存されます。
4. これまでに、フレームセットと、フレームセットを構成する上部、中間、下部の 4 ページを保存しました。したがって、実際にはこのフレームは 4 ページで構成されているため、フレームを使用するとユーザーの閲覧速度が遅くなります。
5. 「ウィンドウ/その他/フレーム」をクリックしてフレームパネルを開きます。ここでフレームをクリックして選択します。フレームを選択すると、編集ウィンドウ内の対応するフレームに点線が表示されます。
6. 例: 上のトップフレームを選択すると、上のフレームのプロパティがプロパティ パネルに表示されます。また、中枠と下枠を選択し、それぞれのプロパティを個別に設定することもできます。
7. 編集ウィンドウで、2 つのフレーム間の境界線にマウスを置きます。この時点で境界線をクリックすると、フレーム セット全体が選択されます。
8. このとき、プロパティパネルにはフレームグループ全体のプロパティが表示されます。ここでは、フレームセットの枠線の有無、幅、色などを設定できます。しかし、最も重要なことは、ここで設定されたフレームの各フレームのサイズを設定できることです。
9. プロパティ パネルの右側のアイコンで上のフレームを選択し、その動作を 80 ピクセルに設定し、その境界線を 0 に設定します。
10. 以下のフレームを選択し、行の高さを 30 ピクセル、境界線を 0 に設定します。
11. 中央のフレームを選択し、行の高さを 1 に、単位を相対に設定します。 (相対とは、他の行に対する現在の行の割合を意味します。これを 1 に設定すると、ブラウジング ウィンドウの上部と下部を除く残りのスペースをすべて占有することになります。
12. 例: カーソルを上部フレームに置きます。を右クリックして [ページのプロパティ] を選択し、背景色を #FF6600 に設定して、[挿入/表] を選択し、1 行 2 列の表を挿入し、最初のセルの幅を 116 ピクセルに設定して、表を挿入します。 2 番目のセルの横方向の配置を中央に、縦方向の配置を下に設定し、「Leo」、「Capricorn」、「Gemini」という単語を順に入力し、中央にカーソルを置きます。フレーム mainFrame で右クリックして [ページ プロパティ] を選択し、背景色を #FFFFCC に設定します。次に、下の BottomFrame にカーソルを置き、右クリックして [ページ プロパティ] を選択します。背景画像を設定します。「獅子座」「山羊座」「双子座」のリンク先ページを３つ追加します。 ＃＃１６「獅子座」を選択し、プロパティでリンク先のページを設定します。 「ターゲット」で「メインフレーム」を選択します。つまり、「Capricorn」と「Gemini」のリンクも設定します。 ##20、ジャンプ メニュー


1. メイン メニューで [挿入]/[フォーム オブジェクト]/[ジャンプ メニュー] をクリックするか、[挿入]/[フォーム] の [ジャンプ メニュー] アイコンを使用してジャンプ メニュー設定を表示します。 .
2. まず「テキスト」列に「関連する Web サイトを選択してください」という文字を入力し、ウィンドウ上の「」ボタンをクリックします。このオプションにはリンクがありません。ジャンプメニューの説明文としてのみ使用します。
3. テキスト欄に「Sina」などのWebサイトを入力し、「選択時のURL」にWebサイトのリンクアドレスを入力します。列
http://www.sina.com.cn
、この時点では、メニュー項目列に別のオプションがあります。このオプションはネットワーク リンク アドレス

4 に対応します。同じ方法を使用します。メニューおよび対応するリンクに他のオプションを追加するには、「上へ」ボタンと「下へ」ボタンを使用して、設定ウィンドウの「メニューの後に移動ボタンを挿入」を選択しないでください。最初の項目」項目。ジャンプ メニューを使用して特定のページに移動した後、ジャンプ メニュー ページに戻った場合でも、ページ内のジャンプ メニューにはデフォルトで最初の項目が表示されます。

6 をクリックします。 ****ジャンプメニューはフォームなので、実際にはフォーム(赤点部分)が先に挿入され、次にドロップダウンメニューがフォーム#に挿入されます。オプションを変更したい場合は、ページ上のドロップダウン メニューを選択して、プロパティ パネルの [値のリスト] をクリックして、さまざまな内容を変更できます。

8. ジャンプ メニューを選択すると、動作ウィンドウにも動作が表示されます。動作をダブルクリックして設定ウィンドウに入り、リセットします。
9. 上記のように「メニュー項目」の最初の項目がプロンプトではなくリンクである場合は、「オプション」で「メニューの後に移動ボタンを挿入」を選択する必要があります。 「進む」ボタンを追加します。

21. プラグインの使用 (Dreamweaver 機能拡張)

1. まず、必要なプラグインをダウンロードします。ここでは、Animate Browser ウィンドウを例に説明します。ウィンドウのサイズを動的に変更するプラグインです。 Dreamweaver Extension Manager を開き、ダウンロードしたプラグインをインストールします。
2. Dreamweaver を起動し、作成したページの左下隅の

を右クリックし、ビヘイビアー ウィンドウの [アニメーション] ボタンをクリックして、[アニメーション ブラウザ ウィンドウ] を選択します。ここでは、ウィンドウを開く前は高さと幅が 0 に設定され、開いた後は画面いっぱいに設定されます。トリガー条件は onLoad です。

22. ローリング字幕

1. ローリング字幕を挿入する場所にカーソルを置きます。
2. 挿入パネルの「タグセレクター」をクリックします。
3. マーキータグを選択し、「挿入」ボタンをクリックします。次に、タグ セレクターを閉じます。
4. コードビューに切り替えます。 2 つのマーキー タグの間にカーソルの挿入ポイントを置きます。
5.「ウィンドウ」/「タグインスペクター」を選択します。タグインスペクターでは、タグのさまざまな使用方法を設定できます。
6. 動作設定項目の右側にあるドロップダウン矢印をクリックし、字幕コンテンツをスクロールする移動方法を選択します。 3 つのオプションの意味は次のとおりです。 代替: コンテンツは反対方向にロールされます。スクロール: コンテンツが同じ方向にスクロールします。スライド: コンテンツが字幕の境界線に触れるとスクロールが停止します。
7. 方向属性は、字幕コンテンツのスクロール方向を設定します。 4 つのオプションは次のことを意味します: down: 下向きの動き。左: 左に移動します。右：右に移動します。上：上向きの動き。
8.scrollamount 属性は、字幕のスクロール速度を設定します。通常は 1 に設定されます。 ＃＃＃＃９．scrolllay 属性は、字幕コンテンツがスクロールするときの一時停止時間をミリ秒単位で設定します。スクロールをスムーズに見せたい場合は、値をできるだけ小さくする必要があります。この例では、1 ミリ秒に設定されています。
10. width 属性は、ローリング字幕の幅を設定します。これは任意であり、たとえば 300 に設定されます。
11. onMouseOver イベントは、スクロールする字幕にマウスが移動したときのアクションを設定します。多くの場合、スクロールを停止するように設定されます。 onMouseOut イベントは、マウスがスクロール字幕から離れたときのアクションを設定し、多くの場合、スクロールを開始するように設定されます。これら 2 つの項目は選択できず、手動でのみ入力できます。 onMouseOver の後に「this.stop();」を入力します。
12. style 属性は、字幕コンテンツのスタイルを設定します。この例では、字幕のテキスト サイズを設定するには、「font:12px;」を手動で入力する必要もあります。
13. ループ属性は、字幕コンテンツのスクロール回数を設定します。デフォルト値は無制限です。 「-1」も無限大です。
14. すべてのコード: スクロール サブタイトル コンテンツ

23. CSS スタイル シートを作成します。 1. Web ページにテキストを入力します。 2. 「CSS スタイル」パネルを開くか、「ウィンドウ/CSS スタイル」を使用して開きます。

3. パネルの下部には、「スタイルの追加」、「新規スタイル」、「スタイルの編集」、および「スタイルの削除」という 4 つのボタンがあります。

4.「新しいスタイル」をクリックしてダイアログボックスを開きます。名前を入力します。名前の前にピリオドがあることに注意してください。たとえば、.zi という名前を付けます (中国語の名前は使用できません)。タイプ: カスタム スタイルを作成します。定義: このドキュメントのみ。 ＃＃＃＃５． このとき、ダイアログボックスを開き、左側のカテゴリで「種類」を選択し、右側のフォントをSong Diagnostic、サイズを14ピクセル、色を任意の色に設定します。それでOK。
6. ページ上のテキストを選択し、ウィンドウ内の Style.zi をクリックします。この時点で、CSS スタイルがこのテキストに適用されます。
7. 定義したばかりの CSS スタイルを変更する場合は、そのスタイルをクリックして、下の [スタイルの編集] ボタンをクリックします。


24. ダイナミック リンク スタイル シートを作成します。

1. [新しい CSS スタイル] ダイアログ ボックスをクリックし、[定義先] 列で [このドキュメントのみ] を選択し、[タイプ] 列で [CSS セレクターを使用する] を選択します。
2. スタイルシートの種類で「CSS セレクターを使用する」を選択すると、ドロップダウン メニューの名前が「セレクター」に変わり、入力内容が CSS セレクターであることを示します。ダイナミック リンク 4 の状態を参照してください。
a:link—ハイパーリンクの通常の状態。a:visited—訪問済みのハイパーリンクのステータス。
a:hover—カーソルがハイパーリンクに移動したときの状態、a:active——ハイパーリンクが選択されたときの状態。
3. 次に、これらの状態を個別に設定します。まず、ドロップダウン メニューから a:link を選択し、スタイル シートの設定ウィンドウを表示します。下線と色を設定します。 #FF6600 (オレンジ色) まで。
4. 同じ方法で a:visited を設定し、下線なしに設定し、色を #FFFF00 (黄色) に設定します。
5. 次に、a:hoverを設定し、下線を引くように設定し、色を#FF6600(オレンジ)に設定します。
6. a:active を設定する必要はありません。a:hover に自動的に依存します。
7. Web ページに文章を入力し、プロパティ パネルでそのリンクを「#」に設定します。それでおしまい。
****注: a:link、a:visited、a:hover、a:active の順序で設定する必要があります。そうしないと、期待した効果が得られません。

ページに 2 つ以上のリンク効果が必要な場合は、次の方法を使用できます。
1. [新しいスタイル] ボタンをクリックし、スタイル タイプとして [CSS セレクターを使用] を選択し、[] をクリックします。 「デバイス」列に「a.link2:link」を直接入力し、a.link2:linkを下線なしの赤色に設定します。
2. 引き続き次の 2 つのスタイルを定義します。名前を直接入力し、紫色の下線を付けずに「a.link2:visited」に設定します。 a.link2: ホバー、青色、下線付き。
3. 現時点では、「CSS スタイル」オプションの下に link2 という名前のカスタム スタイルがあります。
4. ページに段落を入力し、# リンクを追加してリンクを選択し、スタイル シート ウィンドウでスタイル リンク 2 をクリックしてこのスタイルをリンクに適用します。
5. 同じ方法を使用して、同じページに異なるリンク形式を作成できます。
****特定のスタイルを維持するために、同じページにあまりにも多くのリンク スタイルを作成することはお勧めできません。

25. 外部スタイル シート

***同じスタイル シートを別のページに適用します。
1. 新しいスタイル シートを作成し、名前を付けて、種類として「カスタム スタイルの作成」を選択し、定義として「新しいスタイル シート ファイル」を選択します。
2. 確認後、外部スタイルシートを保存する画面を開きます。あとはローカルサイトに保存するだけです。
3. この時点で、スタイル シート ウィンドウに新しいスタイル シート ファイルが追加されていることがわかります。ファイルのサフィックスは、現在のページの内部スタイル シートの場合です。他のページで使用できるように、外部スタイル シート ファイルとしてエクスポートするには、スタイル シート ウィンドウの右上隅にある灰色のアイコンをクリックし、「スタイル シートのエクスポート」を選択します。このとき、名前を付けることができます。スタイルを選択して外部ファイルとして保存します。
5. 他のページで外部スタイルシートを使用する必要がある場合は、スタイルシートウィンドウの最初のボタン「スタイルシートを添付」をクリックしてウィンドウを開き、外部スタイルシートファイルを選択し、「リンク」を選択します。 [名前を付けて追加] をクリックします。

26. その他のCSS

****CSSの背景とは、文字の背景や表の背景画像などを設定するものです。

****CSS のブロックとは、テキストの間隔、配置、下付き文字、上付き文字、配置などを設定することを指します。
****CSSにおけるボックスとは、画像と文字内容の間の空白の距離の設定や、画像と文字を混ぜる方法のことを指します。
****CSSにおけるボーダーとは、表やボタンなどのテキスト領域を美しくすることを指します。 CSS の
****リストとは、リスト項目のスタイルを設定することを指します。つまり、アウトラインのような段落です。
****CSS における位置決めとは、ページ上の画像の相対的および絶対的位置を設定することを指します。
****CSSの拡張機能で、カーソルをカーソルスタイルに設定できます。ハンド（ハンドタイプ）、クロスヘア（クロスタイプ）、テキスト（「I」タイプ）、ウェイト（待機タイプ）に設定できます。 )、default (デフォルト タイプ)、help (ヘルプ タイプ)、およびさまざまな方向の矢印タイプ。
****CSS の拡張機能とそれに含まれるフィルターを使用して、CSS フィルター効果を作成できます。つまり、画像の透明度や輝きなどを処理できます。ただし、効果はそれほど明らかではありません。画像処理に特化したソフトウェアを使用することをお勧めします。

27. オンライン フォト アルバムを作成します。

1. まず、FireworksMX ソフトウェアをインストールします。
2. インターネットに公開する必要のある写真を同じサイズに加工してフォルダーに入れます。
3. メニューの「コマンド/Web サイトアルバムの作成」をクリックして設定ウィンドウを開きます。 ##4. アルバムのタイトル、サブタイトルなどの情報を入力します（後で変更することもできます）。 「元画像フォルダ」は先ほど写真を保存したフォルダを選択します。
5. 「宛先フォルダー」で、「参照」ボタンをクリックして現在のサイトのディレクトリを選択します。 (つまり、すべての写真をサイトに保存します)
6. 必要に応じて「サムネイル サイズ」を選択し、「ファイル名を表示」を選択すると、生成されたアルバム内の各写真のファイル名が表示されます。
7. 「列」グリッドは各行に表示される画像の数で、デフォルトは 5 ですが、自分で変更できます。
8. 以下の 2 つの「形式」では、通常は「高品質」を選択します。
9.「各画像のナビゲーション ページを作成する」オプションを選択します。わかりました。

28. カスタマイズされた Web ページ遷移機能

*****Web ページ遷移とは、閲覧者が Web ページに出入りするときのページのさまざまな更新を指します。スクロール、ブラインドなどのエフェクト。 Web ページはよりダイナミックに見えますが、派手すぎる変更は閲覧者の嫌悪感を引き起こしやすいため、適度に注意する必要があります。手順:

1. ページを開き、メニューの [挿入/ファイル ヘッダー タグ/メタ] をクリックすると、[メタ] ダイアログ ボックスが表示されます。
2. ダイアログ ボックスのプロパティ オプションのドロップダウン リストで HTTP と同等のオプションを選択し、値ボックスに「Page-Enter」と入力して、Web に入るときに Web ページの遷移効果があることを示します。ページ。
3. コンテンツ ボックスに「Revealtrans(Duration=4,Transition=2)」と入力します。Duration=4 は、Web ページのトランジション効果の期間が 4 秒であることを意味します。値が 2 の場合、Transition はトランジション効果モードを意味します。それは円形収縮を意味します。
4. 入力後、「OK」をクリックして保存します。このようにして、ハイパーリンクをクリックしてこのページにアクセスすると、その効果がわかります。
5. 20 種類以上のエフェクトから選択できます。Transition の値を対応するエフェクトのコード名に変更するだけです。具体的なエフェクトと設定は次の表のとおりです。 EffectTransition EffectTransition
Box Shrink 0 Dissolve 12

Box Expand 1 左右中央まで縮小 13

Circular Shrink 2 中央を左右に拡大 14
Circular Expand 3 向かって上下に縮小中央 15
上にこする 分割 4 中央を上下に拡大 16
下に消去 5 左下に階段状に拡大 17
左に消去 6 左上に階段状に拡大 18
右に消去 7 階段状に右下に拡大 19
縦型ブラインド 8 右上に階段状に拡大 20
横型ブラインド 9 ランダムな横線 21
横型市松模様 10ランダムな縦線 22
縦型チェッカーボード スタイル 11 ランダム 23


29. ライブラリ アプリケーション

****Web サイト内の一部のコンテンツは繰り返し使用する必要があります。自分で作成したWebサイトのアイコンなど。このとき、このコンポーネントはライブラリに保存され、いつでも転送して使用できます。 1. ページを開き、アイコンなど、保存する必要があるコンポーネントを選択します。

2. メニュー ウィンドウ/リソースをクリックしてリソース ウィンドウを開きます。次に、一番下の本のサンプルのボタンを選択して、ライブラリ パネルを開きます。

3. 下の [新規] ボタンをクリックして、選択したアイコンをライブラリに保存します。この時点で名前を付けることもできます。
4. ライブラリの内容を新しいページに適用したい場合は、ライブラリパネルを開き、使用するアイコンを選択して、下の「挿入」をクリックします。


30. テンプレートを使用してサイト (ホームページまたは内部ページ) をすぐに完成させます

1. まず、作成したい Web サイトを計画し、作成します。各リンクのコンテンツはうまく設計されています。たとえば、私の Web サイト: ホームページ上のリンクは次のとおりです: Web バージョン、アニメーション バージョン、メッセージを残してください、私について、連絡先、ウィッシング ボトル

Web バージョンのリンクは次のとおりです: ウェブマスター プロフィール教育と研究の論文||教室での真実の探求||オリジナルのコースウェア||心の中の絵||人生の写真を残す||手紙を送って||声を残す雁|

アニメーションのリンクバージョンはWeb版と同じです。
次のリンクは、さまざまな記事またはコースウェアのページです。たとえば、「教室の真実を探して」は、指導案のタイトルが並ぶページにリンクし、各指導案のタイトルから、その指導案が掲載されているページにリンクします。他の人にも同じことが当てはまります。
2. 自分の計画に適したお気に入りの Web ページ テンプレートをダウンロードします (適切なテンプレート Web サイトは
http://www.mbsky.com
)。通常、これには 2 つのファイルが含まれています。 . : 1 つは、index.htm で、もう 1 つは、通常、画像が配置される場所と呼ばれる、images という名前のフォルダーです。
3. サイトを定義し、これら 2 つのファイル (フォルダー) をサイト フォルダーにコピーします。 4.index.htm ファイルをダブルクリックして、ホームページの編集状態に入ります。その後、ニーズに合わせてページを変更できます。これでホームページが完成します。

31. 既存の Web ページをテンプレートとして保存します。

**** は、Web サイト内に繰り返し表示されるページが多数ある場合に使用されます。 (テンプレートを作成して使用する前に、必ずサイトを定義してください)
1. ページを選択し、[ファイル/テンプレートとして保存] をクリックして、現在のページをテンプレートとして保存します。 「テンプレートの保存」ウィンドウが開くので、テンプレートに名前を付けて保存します。
2. この時点で、Templates という名前のフォルダーがサイトに自動的に作成され、保存したテンプレートがこのディレクトリに保存されていることがわかります。拡張子は .dwt
3 です。このテンプレートは現在使用されているため変更できません。そのため、テンプレートの編集可能領域を設定する必要があります。
4. たとえば、現在のテンプレート ページでは、テンプレートの使用時にコンテンツを追加できるように、ページの中央部分を編集可能にする必要があります。ページの中央にある表のセルを選択し (Ctrl キーを押しながらセルをクリックし)、メイン メニューで [挿入/テンプレート オブジェクト/編集可能領域] をクリックします。ダイアログ ボックスが開き、テンプレートに名前を付けて [OK] をクリックします。 ##5. 今回定義した編集可能領域は水色の線で囲まれており、左上に領域名が表示されます。テンプレート ファイルを保存して閉じます。
6. メイン メニューで [ファイル]/[新規] をクリックし、新しいページ ウィンドウで上の [テンプレート] オプションをクリックします。
7. この時点で、現在定義されているサイトが「テンプレート」列にリストされ、サイトが所有するテンプレート ファイルがウィンドウの中央の列に表示されます。テンプレートを選択すると、「プレビュー」列でプレビューできます。次に、「作成」ボタンをクリックして新しいページを作成します。
8. 表示される新しいページでは、編集可能な領域を除き、他の部分を変更することはできません。

32. 独自の Web サイトをアップロードする

1. Web サイト スペースを申請し、インターネットにアップロードします。現在、無料スペースは基本的にありません。無料スペースには広告を掲載するか、Web サイトのテストとして使用できる約 10 日間の試用期間が提供されます。

2. 「適用」をクリックすると、登録を要求するフォームが表示されます。通常、ユーザー名、パスワード、電子メール、連絡先番号、都道府県、ホームページの名前、ホームページのカテゴリ、ホームページの紹介などが含まれます。
3. すべて入力すると、次の項目が表示されます。 ① ユーザー名 (入力しただけ) ② パスワード (入力しただけ) ③ FTP アップロード アドレス ④ ホームページ アドレス (入力したアドレスに上記の項目が送信される場合があります)
4. FTP アップロード ソフトウェアをダウンロードしてインストールします。CuteFtp を使用できます (昆山 Windows/ソフトウェアは無料でダウンロードできます)
5. CuteFtp ソフトウェアを開き、メイン メニューで [ファイル/サイト マネージャー] をクリックします。 。
6. 開いたダイアログ ボックスに FTP アップロード アドレス、FTP サイト ユーザー名、および FTP サイト パスワードを入力し、[接続] をクリックしてサイト サーバーに接続します。 (2 回目に開くと自動的に接続されます。再度入力する必要はありません)
7. 接続が完了すると、ページの左側にローカル コンピューター上のファイルが表示されます。右側はリモートコンピュータです。左側のファイル（つまり、Do Good Web サイトのファイル）を 1 つずつ右側にドラッグするだけで、アップロードが完了します。

33. 自分のウェブサイトを宣伝する

ウェブサイトのアドレスを他の人に知らせるには、次の 2 つの方法があります。主要な検索エンジンにログインします。 ##2. 手動ログイン。たとえば、Baidu (

www.baidu.com
) を開くと、下に「ウェブサイト ログイン」というリンクがあり、クリックするとウェブサイトのアドレスを入力するように求められます。 、名前、コンテンツなどを入力すると、ログインされます。Baidu の検索エンジンに含めると、他の人があなたの Web サイトを検索できるようになります。他のWebサイトへのログインも同様です。

以上がDreamweaver を使用して Web サイトをセットアップする詳細な手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。