フォトギャラリーページの作成

準備

1. Jimdoフォトギャラリーページから、ヘッダー画像及び写真3枚を取得し「img」フォルダーに保存します。
2. エクスプローラーを開きtextフォルダーの「arinomamani.html」をコピーして、ファイル名を「photogallery.html」に変更します。

Bracketsの起動とファイルの起動

1. Bracketsの起動し、ファイルから「フォルダーを開く」をクリックし、準備で作成した「講習会」選択します。
2. 「photogallery.html」を選択します。

テキストの書き換え

1. 「main」要素のh1要素を「フォトギャラリー！オープン中です」に書き換えます。
2. 次のp要素を「これまでに撮りためた写真を紹介します。」に書き換えます。
3. 3箇所のh3要素「HP作成勉強会」、「パソコンの世界」、「趣味特技の世界」をそれぞれ「わが街」、「旅の写真」、「花の写真」に書き換えます。
4. 3箇所のfigcaption要素「HP作りを楽しんでいます。」、「パソコンを楽しんでいます。」、「趣味豊かに楽しんでいます。」をそれぞれ「わが住む街の日常の風景です」、「これまでに訪れた場所の想い出の写真です」、「これまでに出会った花々の写真です」に書き換えます。

画像の挿入とリンクの設定

1. ヘッダー画像の呼び込み先を上記「準備の1」で取り込んだヘッダー画像のファイル名に書き換えます。
2. 3箇所のimg要素の写真を準備1.で取得した写真に入れ替えます。
3. 各写真に仮のリンクを設定します。
   （「わが街」、「旅の写真」、「花の写真」のページを作成した時点でそれぞれのページにジャンプするリンクを挿入します。）

ナビメニューの修正

1. 「ありのままに」のクラスを削除し、リンク先を入力します。
2. 「フォトギャラリー」にクラス「current」を追記します。
3. 3箇所のli要素「HP作成勉強会」、「パソコンの世界」、「趣味特技の世界」を削除します。
4. li要素「フォトギャラリー」の直下に3つのli要素「わが街」、「旅の写真」、「花の写真」を書き加えます。
5. 書き加えた文字列の仮のリンクを設定しクラス「level2」を指定します。

他ページからのリンクの設定

1. これまでに作成した「ホーム」、「教養と教育」、「ありのままに」の各ページから「フォトギャラリー」ページへのリンクを設定します。