Lesson５ Dreamweaver特有の操作

インターフェイス

複数のファイル表示と切り替え

画面上段の「ファイル名バー」に現在作業中の複数のファイル名が表示されます。
その内現在アクティブなファイル名がハイライトされる。ファイル名をクリックすることによってアクティブなファイルを切り替えることが出来るので、複数のページを並行して作業するには大変便利です。ファイル名に＊が付いているものは変更されていて保存が必要なことを示しています。Xマークをクリックすればそのファイルを閉じることが出来ます。

サイトの切り替え

画面の右側に表示される「ファイル」パネルのサイト名の右側にある▼印をクリックすることによって、登録されているサイトの一覧が表示されるので、その中のサイト名を選択することによって新しい別のサイトに切り替えることが出来ます。

パネルの表示と初期設定へ戻す方法

画面の右側にどのパネルを表示するかは、「ウィンドウ」メニューを開いてその中から該当するパネルを選べばよい。
パネル群を色々変更した後、初期設定に戻すには、「ウィンドウ」メニューを開いてその中の「ワークスペースのレイアウト」　→
「’従来のワークスペースの’リセット」に進めばよい。頻繁に使うので常時表示しておくと便利なパネルは「挿入」、「CSSスタイル」、
「ファイル」パネルなどです。

コンテンツの編集

改段落と改行

改段落は単なる「Enter」キーを押すことで行われ、改行はShift＋「Enter」キーで実行されます。
この操作はホームページ・ビルダーのそれとは全く逆なので大変紛らわしいので注意を要します。
Box ModelのCSSではHTMLページ内の各要素は必ずBox形式でなければならないので、各要素は改段落して少なくとも
<p>～</p>の形式にしておかなければいけません。

ファイルの更新

画面の右側に表示される「ファイル」パネルのサイト名の下にある更新アイコンをクリックすることによって、Dreamweaverの外側で変更されたファイルの更新がなされます。
この操作を行わないと、そのファイルの変更はDreamweaverによって認識されません。

リンクの張り方

リンクの張り方には次の２通りがあります：
（１）画面下段にある<ｐ><・ｐ>「リンク」欄の右側にある２つのアイコンのうちの右側の「ファイル参照」アイコンをクリックしてリンク先の
　　ファイルを指定する方法。
（２）画面下段にある<ｐ><・ｐ>「リンク」欄の右側にある２つのアイコンのうちの左側の「ファイル指定」アイコンを、画面右側に表示され
　　ている「ファイル」パネルの中のファイルにドラッグ＆ドロップする方法。

画像の編集

通常は、一旦ウェブ・ページに挿入した画像Ｉｍａｇｅを事情があって編集し直す場合は、ウェブ作成ソフトの外で画像処理ソフトのＰｈｏｔｏｓｈｏｐＥｌｅｍｅｎｔsなどのを呼び出して行いますが、ＤｒｅａｍｗｅａｖｅｒＣＳ５ではプロパティー・インスペクターで簡単なトリミングや明るさの調整などは行うことが出来ます。「切り抜き」アイコンや「明るさ調整・コントラスト」ボタンをクリックするとその為のダイアログ・ボックスが表示されます。

疑似クラス

CSSクラスの中でリンク・タグ<a>に設定するスタイルとして「a:link」、「a:active」、「a:visited」、「a:hover」があります。これらを疑似スタイルと呼びます。
リンクが張られている箇所をクリックしてから、通常の「ＣＳＳ新規ルール」ボタンをクリックすると、複合セレクターとして
「#container #contents #main ol .chapter a」のようなセレクターが表示されるので、すぐ下の「省略化」ボタンをクリックして「#container #contents #main ol」までを削除し、「.chapter a:link」のように入力してから、ＣＳＳルールを設定できます。このことによって、リンクやリンク済み、やリンクをクリックした瞬間、やリンクにマウスを置いた折の、下線の有無や色などのスタイルを設定できます。