20251121h

ＩＣＴメディア編集Ⅱ　2025年11月21日

Adobe DreamweaverによるWebページの作成の練習用：

・Ｗｅｂページ作成用ソフトには様々なものがあり，Ｗｅｂページの表現もより高度なものまで対応したものがあります．次に市販の「Adobe Dreamweaver」というソフトウエアを用いて，Ｗｅｂページを作成について、簡単に説明をします。

・「Adobe Dreamweaver」は様々な機能がありますが，基本的には，先ほど使用した，MS-Wordと同じように，ワープロ感覚（標準モード）で，出来上がりと同じ画面を見ながらの入力になります．また，プレゼンテーション用のパワーポイントなどと同じように，入力する文字などを自由に配置することが可能な，「どこでも配置モード」も用意されています．

・ ここでは，実際に簡単なページを作成することにします。

作成練習（演習）

ウインドウマークをクリックし、スタートのメニューにない場合には、すべてのアプリの中から、Adobe Dreamweaver（Dreamweaver　 2021）を選択して立ち上げましょう。

Adobe IDが必要になりますので、登録されている方は、入力して使用できるようにします。

立ち上がりましたら、初期画面で表示される「使用したことがある」方を選択して、画面を以下のようにします。

１． 起動後に以下のようなウインドウが表示されましたら，メニューバーのファイルから、新規作成を選択します。

２． 新規ドキュメントのウインドウ上で、以下のような選択のままで、タイトルに、「Webページ作成練習DW」と入力して、作成ボタンを押します。

３．中央のウインドウの上のタグを「分割」に変えます。以下のように、上下（もしくは、左右）にコードとデザインが分割して、表示されます。今、下の図では、デザインは何もないですが、コードとしては、先ほど、入力したタイトルなどが表示されています。

４．以下のようにデザインのウインドウに、「Webページの作成練習」と改行して、「Webページを、DWを用いて作成していきます。」と入力してください。以下のように、コード部分もその入力のコードが変化していくのが、わかると思います。

５．「Webページの作成練習」を選択した状態にして、メニューの挿入から、見出し、さらに見出し１（１）を選択して、見出し部分として大きくしましょう。

６．「Webページを、DWを用いて作成していきます。」を改行して、下に図をいれます。メニューバーの挿入から、imageを選択し、イメージソースの選択のウインドウから、ディスクトップ上の「1.jpg」を選択しましょう。大きい場合には、デザイン上で図を選択して、四隅の四角をドラッグして小さくしてみましょう。もしくは、コードの「width="400" height="150"」の数値を変えることで、大きさを調整できます。

７．「明治大学へのリンク」として、メニューバーの挿入から、Hyperlinkを選択し、Hyperlinkのウインドウで、リンク先のURL（https://www.meiji.ac.jp/）を入力し、ターゲットを、選択メニュー内からnewを選択して、OKを押します。

８． ここまでで、メニューバーのファイルから、名前を付けて保存で、ディスクトップ上に、「ｔｅｓｔ6.html」として保存します。

９．出来上がったファイルをWebブラウザで立ち上げてみましょう。また、メモ帳を使って中身を確認してください。Wordの時と比べて、作成用のソフトでも、最低限のコードでのみ作成することも可能です。

Dreamweaverには様々な機能がありますので、チュートリアルなどを参考に、いろいろと試してみてください。

これまでに説明してきたタグやWeb作成用ソフトの使い方以外にもたくさんの表示手法や機能があります．いろいろと実際にＷｅｂページを作成しながら，試してみて下さい．

　加藤のページへ　|　ＩＣＴメディア編集Ⅱ　|　Ｗｅｂページ開設練習とファイル転送について（動画貼付けを追加）　|　11月21日講義資料の先頭ページへ　　|　【参考】ホームページ・ビルダーによるフレーム作成（自習室での練習用）