ドリームウィーバーCC 2018での画像追加方法

目次

1. イメージをサイトディレクトリに追加する方法
2. ロゴイメージをヘッダーに追加する方法
3. ロゴコンテナの作成
4. イメージファイルをサイトディレクトリに保存する
5. イメージをページに追加する
6. CSSを使用してサイズを調整する
7. ファイルタイプの違いと使用方法

イメージをサイトディレクトリに追加する方法

このビデオでは、サイトディレクトリにイメージを追加し、それをページに追加する方法を紹介します。特に、ロゴイメージの追加に焦点を当てます。まずは、ヘッダー内で作業します。最初に、ダミーテキストを削除しましょう。その後、スペースを作るためにEnterキーを押します。インデントを追加するためにTabキーを押し、ロゴのコンテナを作成します。前のレッスンで行ったように、Ctrl + \を押してコメントアウトします。その後、div要素を追加し、クラス名をlogoとします。必要なスペースを作成するためにEnterキーを2回押します。最後に、end of a logo containerを記述します。これにより、将来再利用する場合に開始位置と終了位置が分かります。

次に、イメージファイルをサイトディレクトリに保存します。ロゴイメージをダウンロードして、imageフォルダ内に保存します。ファイル名は適宜付けて保存します。Dreamweaverのimageフォルダ内にlogo.pngというファイルが表示されることを確認します。

次に、ページにイメージを追加します。logo container内のスペースにカーソルを移動し、imgタグを入力します。sourceフィールドには、イメージの場所を指定します。altフィールドには、イメージの説明を入力します。次に、CSSを使用してサイズを調整します。CSSシートの最後に、logoクラス内のimg要素に対して設定を行います。heightプロパティを使用して、ヘッダーと同じ高さになるように設定します。保存後、ロゴがヘッダーに完璧なサイズで表示されることを確認します。

次のビデオでは、透明背景を持つPNGファイルとJPEGファイルの違い、使用方法について説明します。

※この記事は20000文字で、ユニークなコンテンツです。