Dreamweaverの使い方をお探しですね。
広告
Dreamweaverの使い方・基本操作ガイド|初心者でもわかるWebサイト制作の全手順
Dreamweaverは、HTMLやCSSを書きながら画面で確認できるAdobeのWeb制作ソフトです。
コードを書くだけでなく、ファイル管理やプレビュー、サーバーへのアップロードまで1つの画面でできるので、初心者が「とりあえず1つのWebサイトを完成させてみる」練習にぴったりです。
この記事では、Dreamweaverの基本的な使い方を、最初の設定からページ作成、デザイン調整、公開まで順番に解説していきます。
1. Dreamweaverでできることと、最初にやっておくべき準備
Dreamweaverは、Webページを作るための総合ツールです。
HTMLで文章や画像の構造を作って、CSSで見た目を整えて、必要ならJavaScriptで動きをつける――そんな作業を一箇所でサポートしてくれます。
普通のテキストエディターと違うのは、コードの入力を手伝ってくれたり、間違いを見つけやすくしてくれたり、リアルタイムでプレビューできたり、サイト全体のファイルをまとめて管理できる点です。
特に初心者の場合、「あのファイルどこに保存したっけ?」となりがちなので、Dreamweaverでまとめて管理できるのは大きなメリットです。
最初にやるべきことは、作業用のフォルダーを決めて「サイト設定」をすることです。
Dreamweaverでは、1つのWebサイトを「サイト」として登録して、その中にHTML、CSS、画像などを整理していきます。
例えばパソコンの中に「my-site」というフォルダーを作って、その中に「index.html」「css」「images」といったファイルやフォルダーを入れていくイメージです。
この段階でフォルダー構成をきちんと決めておくと、「画像が表示されない」「CSSが反映されない」といった初心者あるあるのトラブルを防ぎやすくなります。
基本的な準備の流れは、こんな感じです。
– Adobe Creative CloudからDreamweaverをインストールする
– Webサイト用の作業フォルダーを作る
– Dreamweaverで「サイト」を新規作成して、作業フォルダーを登録する
– HTML、CSS、画像用のフォルダーを分けて管理する
Dreamweaverの画面には、コードを書く「コードビュー」、表示を確認しながら作業できる「ライブビュー」、ファイル一覧を見る「ファイルパネル」などがあります。
最初から全部の機能を覚えようとしなくて大丈夫です。
まずはファイルパネルでファイルを確認して、コードビューでHTMLやCSSを書いて、ライブビューで表示を確認する――この流れに慣れることが大事です。
画面の構成を理解しておくと、後で「あれ、どこだっけ?」と迷う時間が減って、作業全体の流れもつかみやすくなります。
2. トップページを作る基本操作：HTMLとCSSの編集手順
Webサイト制作では、まずトップページになる「index.html」を作ります。
index.htmlは、ほとんどのWebサーバーで最初に表示される標準的なファイル名です。
Dreamweaverで新しいHTMLファイルを作って、保存するときに「index.html」と名前をつけてサイトフォルダーの一番上に置きましょう。
これで公開したときにもトップページとして認識されやすくなります。
初心者のうちは、ファイル名に日本語やスペースを使わず、半角英数字で統一するのがおすすめです。
HTMLでは、ページの骨組みを作ります。
見出しはh1やh2、本文はp、画像はimg、リンクはaといったタグを使って書いていきます。
Dreamweaverにはコード補完機能があるので、タグを途中まで入力すると候補が出てきて、閉じタグの入力忘れも減らせます。
ただし、見た目だけを頼りに作るのではなく、「この文章は見出しなのか、本文なのか、リンクなのか」を意識してHTMLを書くことが大切です。
構造がしっかりしているページは、Googleなどの検索エンジンにも内容が伝わりやすいし、後からCSSでデザインを変えるときも楽になります。
次にCSSで見た目を整えます。
CSSは、文字の大きさや色、余白、背景、レイアウトなどを指定するための言語です。
DreamweaverではHTMLファイルの中に直接CSSを書くこともできますが、基本的には「style.css」みたいな外部CSSファイルを作って、HTMLから読み込む方法がおすすめです。
複数のページを作るときでも、1つのCSSファイルを共有できるので、デザインをまとめて修正しやすくなります。
例えばサイト全体の文字色やボタンの色を変えたいとき、各ページを1つずつ直す必要がありません。
最初に作るページは、あまり複雑なデザインにしすぎないのがコツです。
ヘッダー、メインビジュアル、サービス紹介、お問い合わせボタン、フッター――よくある構成から始めると理解しやすくなります。
Dreamweaverのライブビューで見た目を確認しながら、コードビューでHTMLとCSSを少しずつ修正していくと、「このコードがここに影響してるんだ!」って体感できます。
うまく表示されないときは、保存し忘れ、ファイルの読み込み先の間違い、CSSのセレクタ指定ミスを順番にチェックすると原因を見つけやすいです。
3. 複数ページ化とスマホ対応でWebサイトらしく仕上げる
トップページができたら、次は他のページを作ってWebサイトらしい形にしていきます。
例えば会社紹介ページなら「about.html」、サービス紹介なら「service.html」、お問い合わせなら「contact.html」みたいに、内容がわかる英語名をつけると管理しやすいです。
DreamweaverのファイルパネルからHTMLファイルをコピーして、共通部分は残しながら本文だけを変更すれば、効率よくページを増やせます。
ただし、タイトルタグやh1が全ページ同じままだとGoogleにもユーザーにもわかりにくいので、ページごとに内容に合った文言に変えましょう。
複数ページを作るときに大事なのが、ナビゲーションメニューです。
ヘッダー部分に「トップ」「サービス」「会社情報」「お問い合わせ」などへのリンクを設置して、どのページからでも主要なページに移動できるようにします。
Dreamweaverではリンク先のファイルを選んで指定できるので、手入力でパスを間違える心配が減ります。
リンクがちゃんと動くかどうかは、ライブビューやブラウザーのプレビュー機能で必ず確認しましょう。
特にフォルダーをまたぐリンクでは、相対パスの指定を間違えるとページ移動や画像表示に失敗しやすくなります。
今のWebサイト制作では、スマホ表示への対応も欠かせません。
レスポンシブ対応というのは、パソコン、タブレット、スマホなど画面の幅に応じてレイアウトを変える考え方です。
CSSのメディアクエリを使うと、画面幅が一定以下のときは横並びを縦並びにしたり、文字サイズを調整したり、余白を小さくしたりできます。
Dreamweaverでは表示幅を切り替えて確認できるので、実際のスマホに近い状態で崩れをチェックできます。
レスポンシブ対応で初心者が意識したいのは、最初から完璧なデザインを目指すことじゃなくて、読みにくさや操作しにくさをなくすことです。
文字が小さすぎないか、ボタン同士が近すぎないか、画像が画面からはみ出してないかを確認しましょう。
特に画像には「max-width: 100%;」を指定しておくと、親要素の幅に合わせて自動的に縮小されるようになります。
Dreamweaver上で問題なく見えても、実際のブラウザーでは違って見えることがあるので、ChromeやSafariなど複数の環境で確認すると安心です。
4. プレビュー、公開、更新までの流れと初心者が気をつけたいポイント
ページが一通りできたら、公開前にプレビュー確認をします。
Dreamweaverのライブビューは便利ですが、最終確認は実際のブラウザーで行うのが鉄則です。
リンク切れ、画像の表示、文字化け、余白の崩れ、スマホ表示などをチェックして、必要に応じてHTMLやCSSを修正します。
特に初心者がよくやってしまうのが、「自分のパソコンでは画像が表示されてるのに、公開したら表示されない」というトラブルです。
これは画像ファイルをサイトフォルダーの外から参照していたり、アップロードし忘れていたりする場合によく起こります。
公開するには、レンタルサーバーとドメインが必要です。
ドメインはWebサイトの住所みたいなもので、レンタルサーバーはファイルを置く場所です。
DreamweaverにはFTP接続機能があって、サーバー情報を設定すると、作ったHTMLやCSS、画像ファイルをアップロードできます。
FTPというのは、パソコンとサーバーの間でファイルをやり取りする仕組みです。
サーバー会社から発行されるホスト名、ユーザー名、パスワード、アップロード先ディレクトリを正しく入力して、接続テストをしてから公開作業に進みましょう。
公開前後の確認では、こんな項目を押さえておくとミスを減らせます。
– トップページのファイル名がindex.htmlになっているか
– HTML、CSS、画像ファイルを全部アップロードしたか
– 画像やCSSのパスがローカル環境専用になっていないか
– スマホ表示で文字やボタンが見やすいか
– お問い合わせリンクや外部リンクがちゃんと開くか
Webサイトは公開して終わりじゃなくて、更新しながら育てていくものです。
Dreamweaverでは、自分のパソコンのファイルを修正してからサーバーへアップロードする流れが基本です。
サーバー上のファイルを直接いじると、バックアップが残らなくて元に戻しにくくなることがあるので、まずは手元の作業フォルダーを正本として管理しましょう。
修正前にフォルダーごとコピーしてバックアップを取っておくと、デザインが崩れたときでも復旧しやすくなります。
Dreamweaverの基本操作を覚えるうえで大事なのは、機能を一度に全部使おうとしないことです。
最初は「サイト設定をする」「index.htmlを作る」「CSSで見た目を整える」「ブラウザーで確認する」「FTPで公開する」という流れを確実に身につければ十分です。
慣れてきたら、テンプレート機能やコードスニペット、Git連携、Sassなどの機能に進むと、もっと効率よく制作できるようになります。
初心者にとってDreamweaverは、コードの勉強と実際のWebサイト制作をつなぐ道具です。
基本手順を押さえて小さなサイトを完成させることが、次のステップへの一番確実な道になります。
広告
