新しいページに貼り付けて編集する
コピーができましたので、貼りつけるために、また上部メニューにある「開く」ボタンををクリックして「osusume」フォルダンの中の「osusume1.html」を開いてください。
「osusume1.html」を開いたら、編集方法を「HTMLソース」か「ページ/ソース」に切り替えてHTMLソースが表示されている状態にします。
すると、ページは真っ白ですが、HTMLソースには記述があると思います。
それらを全て消してしまって、さきほどコピーしたものを貼り付けます。
貼りつけは「右クリック」→「貼りつけ」でもいいのですが、「Ctrl+V」のショートカットキーで貼り付けることができます。
↓ここまでの解説を動画で見る。
これで、貼りつけができました。
ただ、画像の部分が全てチューリップになっていて画像が表示されていないと思います。
これは、少し難しいのですが、フォルダの階層構造から生じるものです。
今、私たちが編集しているのは、「osusume」フォルダの中の「osusume1.html」で、画像が入っている「images」フォルダは一つ上の階層にあることになります。
そこで、自分が今編集しているページの階層から１段階上に上がる必要があるのです。
１階層上に上がるためには、「../」というHTMLソースを記述する必要があります。
〜階層構造のイメージ図〜
どの画像でもいいので、表示されていない画像をクリックすると、下のHTML編集領域が黄色くなる部分があります。
それが、指定した画像を表示させるためのHTMLソースです。
例えば、一番上のヘッダーの画像をクリックすると、以下の部分が黄色くなると思います。それに「../」を加えて修正してください。
修正前：<img src="images/sample-header.jpg" width="760" height="99" border="0">
修正後：<img src="../images/sample-header.jpg" width="760" height="99" border="0">
修正した後、上の編集領域でクリックすると、画像が表示されるはずです。
おなじ方法で全ての画像を修正してください。
修正する方法は、全て「../」を付け加えるだけですので、「../」の部分をコピーして貼り付けていくと早く修正できます。
階層構造は、少し難しいので、少しずつ理解していただければ十分です。
↓ここまでの解説を動画で見る。
Search
サイト内を検索することができます。
Ｗｅｂ製作おすすめ本
↓ホームページビルダーの使い方の基本をおさえたい方におすすめの本です。
↓できるシリーズのスタイルシート版です。スタイルシートの基本を押さえておきたいおすすめの本。
↓ホームページビルダーで満足できなくなったら、プロが使うソフトであるドリームウィーバーに乗り換えましょう。
↓おすすめのエックスサーバー！月額１，０５０円で１GB+マルチドメイン
↓とりあえずという方のためにおすすめのレンタルサーバーが月額２６３円からのロリポップ！
