Deamweaver講習ノート

職業訓練でDreamweaverを習った。その際の講習ノート。

Dreamweaverの機能

  • エディタ     →メモ帳
  • ファイル管理(サイト管理)
  • FTP

作ったらバリデーションlintで文法が正しいか確認、css版はあまり意味無い
サイト定義:フォルダを開いて選択

<html>

・index.html
ディレクトリごとにindex.htmlを作るケースがある(appleなど)
※デザインビューはあてにならないので、必ずブラウザで確認する(F12)

・コードヒントのショートカット
同じタグを使いまわしたいときなど、値だけ消してCtrl+スペースで再度参照などのコードヒントを表示できる

・ID
ID属性の頭文字には数字は使えない 
1ページ内に一箇所しか使わないものにIDを割り振る→構造     id="" #{}
1ページ内に何度も出てくる要素にclassを割り振る→要素        class="" .{}

左のバーにコメント挿入・削除ボタンがある(コメントアウトに便利)

・<dl><dt><dd>
項目名、内容に分けて記述する際の定義型リスト

リンクを貼るには下のリンクボックスを使用,消すにはボックスの文字列を削除

プラグインを利用した拡張機能があるemmet

ctrl+shift+p→<p>で囲う

相対パスを書き直してくれる機能:全て閉じてコピー→リンクの更新

検索/置換:編集→検索/置換 ctrl+F

<css>

・@import
複数のCSSファイルを定義する際に使用
import.cssを間に挟むことで、適応させるcssの編集を容易にする

・@media
媒体によって表示形式の切り替え
モバイル、印刷、各媒体に合わせたcssの切り替え

CSSリンクの貼り方
右上にあるCSSスタイルパネルより、リンクアイコンからリンクを挿入
CSSファイルはhtmlに付随するため、CSS単独では開かないようにする
※より詳細な設定を行うファイルを後から読み込む

CSSファイルを分ける場合は、使いまわす内容をbase、個別の内容をproductsなど、分けるメリットデメリットを考慮する

ボックスの中心に文字列を配置したければ、ボックスと同じ高さのline-heightを設定

floatを記述する際、ボックスはfloatをかけた物同士しか並べて表示できない

・position
relative:元の位置から移動する,後続要素は影響しない,子要素のpositionの基準として親要素に使うことが多い
absolute:body 0,0が基準,親要素にpositionがついていれば、そこが基準になる,後続要素は無視する
fixed:スクロールしても配置が固定される,グローバルナビゲーション等に使用
z-index:positionの重なり順を指定,重なった際に数値が大きいものが前面
positionを利用すると、ボックスを重ねることができる

・リンク関係の背景に画像をつける際は、aタグの背景につける

・overflow:hidden:ボックスからはみ出た文字列を非表示にするプロパティ

・横並びリスト:各liにIDを設定してポジション指定など,他にfloatを使う

CSSにclass,idを設定していれば、html上からコードヒントで選べる

・floatをかけたボックスを親要素は認識しないため、floatが親要素の高さを超える
     →解決法
     ①親boxに"overflow:hidden":overflowは高さの算出方法が異なる・よく使われる
     ②親boxの最後で"clear:both":<br class="floatclear">など
     ③親boxに"clearfix"

・listの行頭にimageを置くlist-style-imageは位置指定できないため使わない
     →background-imageを使用してbackground-position位置を指定する

Adobe Dreamweaver CS6 Macintosh版

Adobe Dreamweaver CS6 Macintosh版