※教科書の手順どおりではないので下記の「手順」から作業を進めて下さい。
問題
[sample2]のフォルダの中身を使って、サンプルサイトを完成させ
自分のサイトスペース内に公開しなさい。
[未完成の部分]
※１.各ページの[PAGE-3]のリンク部分が未完成です、完成させて下さい。
※２.各ページのトップページへ戻るリンクの文字を全て top.gif の画像に置き換えて、top.gifの画像からindex.htmlへリンクをはり直してください。
※3.page3.htmlは、page1.2と同様に、中央にpage3.gifの画像を貼り、
その下にtop.gif の画像[PAGE-1][PAGE-2][PAGE-3]の文字を入力し、各ページへのリンクをはりなさい。
([PAGE-3]は同ページなのでpage3.htmlへのリンクははらないこと。)
手順
(1)元データを↓からDLする
http://yoko14145.com/cid/sample2.zip
(2)[sample2]のフォルダを、
[HD]の中の[ユーザー=iMac○○]の中の[サイト]フォルダの中の[自分のサイトのフォルダ]の中に入れる。
(3)Dreamweaverを起動し、[sample2]フォルダの中の各htmlファイルをダブルクリックし開いて、編集する。
●page1.htmlの編集
●page2.htmlの編集
1・文字の[トップページ]の部分をマウスで選択して削除(＝deleteキー)し、
2・画像top.gifを挿入。
3・top.gifからindex.htmlにリンクを貼る。
●page3.htmlの編集
1・page3.gifの画像を挿入し、中央に配置
2・その下に[PAGE-1][PAGE-2][PAGE-3]の文字を入力し、[PAGE-1][PAGE-2]の部分からそれぞれpage1.html・page2.htmlへリンクを貼る。
3・上の文字の[トップページ]の部分をマウスで選択して削除(＝delete)し、
4・文字を消した箇所に画像top.gifを挿入。
5・top.gifからindex.htmlにリンクを貼る。
6.リンクを貼ったtop.gifをマウスで選択してコピー（＝コマンド+c）し、
7・[PAGE-1]の文字の左側をクリック
8・ペースト(=コマンド＋v)してtop.gifをリンクごと貼付ける。
(4)ファイルのパネルを表示、[sample2]のフォルダを選択し、アップロードのアイコン(上矢印のアイコン)をクリック。
これでフォルダの中身が全てアップロードされます。
(5)ブラウザ(SafariまたはFirefox)のURL欄に
http://ユーザー名.web.fc2.com/sample2/
http://○○.geocities.jp/ユーザー名/sample2/
と打込み、正常に表示されるか、リンクの貼り忘れなどは無いか、リンク先は正しいか等、確認する。( ユーザー名 = アカウント名 = ユーザーID = ID )
http://ユーザー名.web.fc2.com/sample2/index.html
http://○○.geocities.jp/ユーザー名/sample2/index.html
と打ち込んでも全く同じ表示結果が得られます。
これは、index.htmlというファイル名のみ省略が可能なためです。
※indexは目次を意味し、そのフォルダ内のhtmlファイルへの入口や索引の役割を持ちます。index.htmlを中心にフォルダ内のhtmlファイルにリンクをはる必要があります。
http://ユーザー名.web.fc2.com/sample2/index.html
http://○○.geocities.jp/ユーザー名/sample2/index.html
http://ユーザー名.web.fc2.com/sample2/index.html
http://○○.geocities.jp/ユーザー名/sample2/index.html
この課題が終わった人はサイトのフローチャートを作成してください。