タグ: Dreamweaver

2023年3月24日 コメントする

3月24日（金）－WEBデザイン実習

【要参考】
・【STEP4】Webページの制作＞「WEBデザイン実習の教科書.pdf」参考

Dreamweaverについて

Adobe Dreamweaver（アドビドリームウィーバー）は、ひとことで言うとホームページ制作ソフトです。
編集機能やレイアウトの表示機能、ファイル管理機能など、制作や更新作業に必要な機能がひとまとめになっている、統合ソフトウェアとなります。
アドビシステムズのホームページでは、“Webデザインソフトウェア、HTMLエディター”となっています。“Webオーサリングツール”や“Webサイト作成ソフト”などとも呼ばれます。ホームページは基本的に「HTML＋画像」なので、頑張れば「メモ帳＋ペイント」でもなんとか作れます。しかし、作業効率などやミスの防止などを考えると、専用ソフトを利用した方が効果的です。

【ワンポイントアドバイス】
Dreamweaverの歴史は長いです。いま世にいるデザイナーのほとんどの方がDreamweaverを過去に使った又は習った事のあるケースが多いです。ただし、昨今ではDreamweaverの需要は落ちています。
その理由は、様々ですがこれからの希望職に合わせて、習得してみてください。

【参考サイト】

Dreamweaver操作方法

※最初のサイト定義が重要！しっかり決めておかないと後で大変になるので、フォルダの場所などしっかり決めておく
例：デスクトップに「○○○サイトの件名など」→「images」フォルダなどもできたら作っておく

【新規ファイルを一から作る場合】
右側ファイルウインドウ→デスクトップ▼横の「サイトの管理」→「新規サイト」
サイト名：（Dreamweaver上だけの名前なので、日本語でもOK。○○様とか○○サービスとか案件名など）
※その下の【ローカルサイトフォルダー】右側フォルダマーク「フォルダーの参照」デスクトップとか参照
「フォルダーの選択」→保存→完了


【元々TeraPadなどで作ったファイルを開く場合】
「開く」でhtml、CSSを開いて都度保存で上書き保存反映される


◆編集タブ→環境設定

・W3Cバリデーター：コードのエラーチェックはどのバージョンでやるかの設定
　通常は現行のHTML5で、昔のサイトを触るときなどはそのサイトに合わせて選択

・コードヒント：終了タグ”</”がおすすめとのこと（好きなタイミングで閉じられる）

・コードフォーマット：インデント→2でも4でもOK、タブサイズ→4じゃなく2とかにするとタグの階層（親→子→孫）が深くなってタブが増えても見やすい


◆表示タブ→分割、左右表示・コード・コードだと見やすい
練習のためにもリアルビュー？は見ないで作業するようにとのこと


◆enter→<p>、shift+enter→<br>


◆ウィンドウ→プロパティでタグの細かい設定ができる


◆文字選択→【B】：太字、【🔗】：リンク


◆文字の上【≡ P ▼】の≡で「H2」等見出しや、クラス/ID指定とかもできる
　クラスは「.～」、IDは「#～」で入力


◆下のDOMパネル→Pやsectionやdivなどタグで囲む
　ドラッグで他のタグの下層に持っていける


◆右の挿入→画像も入れられる
　※自動で末尾に入ってしまう”/”は消して、altの画像説明は必ず入力する（プロパティでもOK）


◆Table→表作れる
　※先頭と末尾に「+body」が自動で付いてしまうけど消してOK
　※width、borderも自動で付いてしまうが古い書き方で非推奨なので消すこと！
　<table>～</table>にする


◆いったん一部分だけ消しとくとき
　選択→コメントボタン
　再表示するとき→コメントの削除でOK


◆「&nbsp;」とか自動で入るのを消す方法
　検索タブ→「現在の文書内を置換」→下段を空白（何も入れない）で「すべて置換」で消える
※「現在の文書内を置換」は、開いているファイル内のみ置換されるので、もし誤った場合でも戻せるが、
「ファイルを横断して検索/置換」だと、フォルダ内のDreamweaverで開いてないファイルも書き換えられてしまい、誤った場合戻す操作ができないので注意する！


◆右側【CSSデザイナー】→ソース→+「新規CSSファイルを作成」or作成済の場合「既存のCSSファイルを添付」（スタイルCSSやリセットCSS）
→「ファイル/URL」：「style」とか入れる、「リンクさせる」で追加
→htmlのhead内に自動リンクされる


◆【CSSデザイナー】htmlの<p>～</p>とか選択した状態で、+セレクタ→「CSSルールにフィルターを適用」に選択タグが表示されたらEnterで、CSSファイルに”P{　}”が記入される


◆左メニュー→…→「親タグを選択」をチェックして、表示させるように設定すると便利とのこと


◆Alt押しながら複数行選択で同時作業ができる
　例：<td>～</td>
　　　<td>～</td>
　　　　↓
　　　<th>～</td>
　　　<th>～</td>　など始まりタグとかだけ同時変更できるが、末尾タグは手作業で修正が必要になる


◆（Dreamweaver内で？）ファイルタブでファイルを移動したときは自動でパスを書き替えてくれる
右上の≡ （メニュー）で新規フォルダー作れる

メモ

※（先生より）Dreamweaverのリアルタイムプレビューは使わないのがおすすめとのこと
(F12とかの）リアルタイムプレビューで見てしまうと、余計なコードが追加されてしまい見づらくなる→消すのが面倒になるので、編集はDreamweaver→直接ローカルのhtmlファイルをネット（chrome等）で表示させながら作業するのがベスト
★ネットで表示させたローカルhtmlを検証ツール（デベロッパーツール）で細かく調整して、CSSコードを表示させて【ctrl+A→ctrl+C】→Dreamweaverで【ctrl+A→ctrl+V】で全体コピペで上書き保存がやりやすいとのこと
（齋藤先生はhtmlだけ先に書いて、あとは全部検証ツール上でCSS書いているとのこと）

※リセットCSSについて
・リセットCSSは、style.cssに一緒に書くと読み込み速度が遅くならない（SEO対策になる？）ので、おすすめとのこと
・（先生より）リセットCSSは自分好みにカスタマイズしていく、サイトごとに毎回書かなくても、オリジナルのリセットCSSを持っておき、コピペして反映させるのがおすすめ
・湊先生は、style.cssの最初にリセットCSSを記載し、境目が分かるように「/*=====RESET=====*/」とかコメントでメモしているとのこと

・hp製PCはファンクションキーロックされているので、ロック解除するか、都度fnキー押しながらF7やF12を押せば反応する

・サーバー部分（FTP?）は、Dreamweaverのは使用せず、FFFTPなどを使った方がいいとのこと

・Webサイトは複数のブラウザで表示チェックするのが普通（各ブラウザで微妙に表示が違うので）なので、契約時にどのブラウザで見れるようにするかを決める

・chromeの拡張機能が便利（やるなら自分のPCで）
色スポイトとか、使用フォント、スクショ機能とかおすすめとのこと