今日の教材：WEBデザイン実習の教科書.pdf

Dreamweaver→HP制作ソフト。HTMLやCSSの記述ができる

terapadが使用できる上で使うこと！簡略化ソフトなので

まずは…サイトの定義

学校でも家でも、必ず毎回サイトを読み込む必要がある！＝サイトの定義！サイトの定義やらないならDreamweaver使う意味がない。

毎回右タブサイトの管理→新規サイトで、案件名など自分でわかる名前つけて、フォルダを選択する。→保存→右側パネルに表示。

サイトの定義完了！

※Dreamweaver起動前にデスクトップ上にフォルダを作って、画像を入れておく。必ず使用できるファイル名にしておくこと。日本語×。ファイルもここで入れといても良いし、Dreamweaver上で作成しても良い。

→最初から入れてある分は自動で表示してくれる。

ただし、Dreamweaver使用途中で、変更したくなった時。例えばリンクを貼った後、リンクのパス名変えたいときとか、画像の名前変えたいときとか。

その場合は、必ずDreamweaver上でやらないと、エラーになる！Dreamweaverでやれば、更新すれば（聞かれる）自動でデスクトップ上のフォルダも更新してくれる。

環境設定をやる。PDFとノート参照。

そのあと新規で作ったり、ファイル読み込みしたりすればその環境でできる◎環境設定は先にやる！

新規なら、

HTML：ファイル→新規で新規作成。
CSS：右上のCSSデザイナー→ ソース横の＋→新規CSSを作成

作成中のファイルを編集したいなら、

HTML：右タブファイル名のファイル名をダブルクリックすれば表示される！
CSS：CSSデザイナー→ソース横の＋→既存のCSSファイルを添付→選ぶ！

と、index.html内ソースコードの横に、style.cssが表示されればOK！（下に出る）
index.htmlの横にstyle.cssが出てたらおかしい！
横だと、読み込んでいるファイルと編集してるファイルが違うということ。確認する！

サイト定義したフォルダを消したい

右上タブ　デスクトップ→サイトの管理→−！！

ファイルは右タブ上でdeleteすれば消える。

機能

白紙の簡易ブラウザ表示→ライブビュー
HTMLやCSSなど→コードビュー

表示→分割→コードコードで、HTML・CSS一緒に表示できる。左右に分割もできる。

ライブビュー上で挿入したりすると、コードビューに反映される。

・ライブビュー上でカーソル合わせて出てくるパネル左上三で、p→h2 が出来たり、リンクマーク押してリンク貼るとaタグ出来たり、B押すと<strong>タグ出来たり。
・画像入れたいなら、ライブビュー上で右タブ挿入→img→定義してある画像を選ぶと、imgタグできる。前に入れるか、後に入れるか選べる。（閉じタグ/が自動でついちゃうので、消す）
・表も作れる。右タブ挿入→Tableでtableタグ出来る。widthとborder自動で入るが、cssに書くものなので消す。
・リストも作れる。

※プロパティパネルを出しておけば（ウインドウ→プロパティ）下に表示されて詳細変更しやすい。

どこかに長文メモした文章を、コピペでHTMLに貼り付けした際、

pなどつけたい→ enter
p内で、ただ改行したい→Shift＋enter

で時短できる

セレクタの候補を出すには。

右タブcssデザイナー→style.cssをクリック！ →htmlの該当セレクタをクリックしてから→＋セレクタ押すと候補が出てくるからエンター！

< !–  –>コメントアウト入れたい。

左タブ!–→HTMLコメントの適用

HTML親タグがわからなくなった

左タブ

特殊文字をまとめて置換できる

1つにカーソル合わせて上タブ？検索→（現在の文書で検索をしてから？）→現在の文書内で置換。プロパティパネルで置き換えたい文字を入力。空白が良いなら空白のまま？→ページ内のその特殊文字すべて置換。

or

検索→プロパティで置き換えたい文字入力
検索対象、現在のドキュメントを選ぶ。
※ ファイルを横断して置換は選ばないように注意！フォルダ内全部変わっちゃう。