006_STEP 5 ホームページデータの作成
トップページを作成(新規作成・保存)
DREAMWEAVERを開いて頂き、上にある「ファイル」タブを押して頂き、「新規作成」を押して頂きます。
ドリームウィーバー画面の説明
挿入バー ・・・ 写真や図、テーブルなどを挿入する時に使います。ツールバー ・・・画面の表示、ファイル管理やプレビューをする時に使います。
ページタイトル ・・・ページのタイトルを入力します。
コードビュー ・・・HTMLコードで編集する場合に使います。
ドキュメントウィンドー ・・・文章を入れたり、画像を入れたり、HTMLを書かずに簡単にHTMLデータを作れます。
プロパティーインスペクタ ・・・ドキュメントウィンドーで編集している時に、文字大きさ、色、行間、リンクなどの指定を行えます。
各種パネル ・・・主に使うのが、ファイルになりまして、ローカルサイトやリモートサイトの表示、またローカルからリモートへの転送や、リモートからローカルへのダウンロードができます。
トップページを作成(タイトル・テーブルの挿入・マージン)
①トップページ(index.html)を開きましたら、まずページのタイトルを書き込みます。
トップページを作成(テーブル、画像、文章の挿入)
①まず、挿入されたテーブルの背景色とセルの余白を変更します。
テーブルが選択されていることを確認し、画面下のプロパティの「背景色」を「黒」にします。次に「セル余白」を「5」にします。
※セルとは下図のピンクの部分を表します。
サブページの作成
①
サブページを作成する際は、トップページと同じように新規作成から作成しても問題ないのですが、トップページとレイアウトは同じですので、まずトップページ(index.html)を開きまして、メニューバーのファイルから「新規保存」を選んで頂き、別の名前で保存して頂きます。
今回は、「アラスカの自然」ページを作成しますので、(alaska_nature.html)の名前で「alaska」フォルダーに保存します。そうしますと全く同じ内容のindex.htmlとalaska_nature.htmlが「alaska」フォルダーに保存されている状態になります。
②新規保存で、alaska_nature.htmlが出来ましたら、ページのタイトルとページの文章を変更します。
③上記①②と同じ手順で、他のページ「アラスカの歴史、アラスカの自然(動物)、アラスカの自然(植物)、アラスカの暮らし、アラスカへのアクセス」も作成します。
ページにリンクを付ける
①全ページの作成が完了しましたら、次に他のページへのリンクを付けます。
トップページ(index.html)を開きまして、メニューの「トップページ(ごあいさつ)」を左クリックを押しながら選択し、プロパティにあるリンクから「ファイルを参照」を選び、リンクするページを選び「OK」を押します。
※「トップページ(ごあいさつ)」は、index.htmlになるので、今回は、「alaska」フォルダーの中の「index.html」を選びOKを押しましょう。
★プロパティーのリンク部分にURLを入れる事で別のホームページにリンクさせる事もできます。
②他のメニュー項目にも、各ページにリンクされるように同じようにリンクを付けて下さい。
※リンクを付けますと、テキストの場合文字色が変わります。リンクの色を変えたい場合は、メニューバーの「修正」から「ページプロパティ」を押して頂き、カテゴリの「リンク」を選び、色を指定します。
③次は、作成した「アラスカの動物」と「アラスカの植物」のバナーボタンにリンクを付けます。
画像をクリックして選択して頂き、下のプロパティーのリンクから同じように、ファイルで参照し、「alaska」フォルダーに入っている、リンクさせたいページを選んで頂きます。
※画像からリンクする場合は、プロパティのリンクの位置が少し違います。
④メニュー項目とバナーボタンにリンクを貼り終えましたら、リンク出来ているかの確認にしていきます。まずメニューバーのファイルから「保存」をして頂きます。※キーボードの「ctrl」を押しながら「s」を押して頂いても同じように保存されます。
次にキーボードの「F12」を押して頂きますと、ブラウザでファイルを開く事ができますので、開きましたら、左のメニュー項目を押してリンクされているか確認して下さい。