区切り線

ホームへ | このサイトについて | サイトマップ | 問い合わせ | 管理人プロフィール

区切り線

ホームページビルダー使い方トップへ>新しいページに貼り付けて編集する

新しいページに貼り付けて編集する

コピーができましたので、貼りつけるために、また上部メニューにある「開く」ボタンををクリックして「osusume」フォルダンの中の「osusume1.html」を開いてください。

「osusume1.html」を開いたら、編集方法を「HTMLソース」か「ページ/ソース」に切り替えてHTMLソースが表示されている状態にします。

すると、ページは真っ白ですが、HTMLソースには記述があると思います。

それらを全て消してしまって、さきほどコピーしたものを貼り付けます。

貼りつけは「右クリック」→「貼りつけ」でもいいのですが、「Ctrl+V」のショートカットキーで貼り付けることができます。

動画マーク ↓ここまでの解説を動画で見る。

これで、貼りつけができました。

ただ、画像の部分が全てチューリップになっていて画像が表示されていないと思います。

これは、少し難しいのですが、フォルダの階層構造から生じるものです。

今、私たちが編集しているのは、「osusume」フォルダの中の「osusume1.html」で、画像が入っている「images」フォルダは一つ上の階層にあることになります。

そこで、自分が今編集しているページの階層から1段階上に上がる必要があるのです。

1階層上に上がるためには、「../」という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

サイト内を検索することができます。

Web製作おすすめ本

↓ホームページビルダーの使い方の基本をおさえたい方におすすめの本です。

できるホームページ・ビルダー12 Windows Vista/XP対応

↓できるシリーズのスタイルシート版です。スタイルシートの基本を押さえておきたいおすすめの本。

できるホームページスタイルシート入門―Windows対応 (できるシリーズ)

↓ホームページビルダーで満足できなくなったら、プロが使うソフトであるドリームウィーバーに乗り換えましょう。

Dreamweaver CS3 Windows版

↓おすすめのエックスサーバー!月額1,050円で1GB+マルチドメイン

↓とりあえずという方のためにおすすめのレンタルサーバーが月額263円からのロリポップ!

ホームページビルダー使い方トップへ>新しいページに貼り付けて編集する