トップ > ネット > Deamweaver講習ノート

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版

 

kkzy9 読者になる

コメントを書く