投稿者: admin

-本日のアジェンダ-

1限目
実技 WEBデザイン実習②
DOMについて

2限目
実技 WEBデザイン実習②
挿入について

3限目
実技 WEBデザイン実習②
課題制作

4限目
実技 WEBデザイン実習②
課題制作

5限目
実技 WEBデザイン実習②
課題制作

本日のテーマ

Dreamweaverでマークアップしましょう

DOMパネル

【point】HTML文書の構造がわかりやすい！

• 複数をタグで囲う事ができる
• タグを複製できる
• id名、class名をつける事ができる
• 要素名を変更できる

挿入パネル

【point】HTMLの記述に便利です！

• クリックでタグを挿入できる
• 開始タグと終了タグをセットで記述できる
• タグで囲う事ができる

DWを使ってマークアップしましょう！

▼HTML構造（設計図）

<aside> …… 余談・補足情報のセクションであることを示す

---

▼デザインの都合上必要であればdivで囲って、さらにclass名をつけましょう。

①mainとasideを横並びにする為に、親要素が必要です。
　→mainとasideをdivで囲います。class名content-wrap

②headerは幅960px、その外側に幅100%の背景グレーのボックスを作ります。
　→headerをdivで囲います。class名header-wrap

なぜclass名をつけるのか？

この場合、divが２つ存在することになるので、ヘッダーのdivとコンテンツのdivを区別する為に名前をつけてあげます！

---

最低限のリセットCSS

/*リセットCSS*/
* {
    box-sizing: border-box;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dd {
    margin: 0;
}
ul,ol {
    padding: 0;
    list-style: none;
}
img {
    max-width: 100%;
    vertical-align: bottom;
    border: none;
}
/*この上は変更しない*/

imgにmax-width: 100%;

imgタグはwidthを指定しないと画像本来の大きさで表示します。
<div><img src="photo.jpg" alt=""></div>
例えば、divが親要素でphoto.jpgが幅800pxの場合、
divに幅400pxを指定してもphoto.jpgははみ出して本来の大きさで表示してしまいます。

そこで、cssで全部のimgにmax-width: 100%;を指定し、画像を親要素からはみ出ないようにしておきましょう。

max- min-

max-width: 100%;は、最大の幅が親要素の100%
つまり100%以上にならない＝はみ出さない

中央寄せのCSSについて

text-align:center;
中のインライン要素（文字や写真）を中央に寄せる

margin:0 auto;
そのボックス自体が中央に移動する
※widthと一緒に使いましょう。

-本日のアジェンダ-

1限目
実技 WEBデザイン実習①
DWについて

2限目
実技 WEBデザイン実習①
DWの機能

3限目
実技 WEBデザイン実習①
課題制作

4限目
実技 WEBデザイン実習①
課題制作

5限目
実技 WEBデザイン実習①
課題制作

本日のテーマ

Dreamweaverを触ってみましょう

Adobe Dreamweaver

Adobe Dreamweaver（アドビ ドリームウィーバー）は、アドビシステムズが販売しているWebオーサリングツールです。旧称はMacromedia Dreamweaverであり、かつての開発会社はマクロメディアでした。高機能なWebオーサリングツールで、有償ツールの中では、最も有名なWEBオーサリングツールであり、デファクトスタンダードツールとして有名です。
※Webオーサリングツール＝いわゆるウェブページ作成ソフトのこと

メリット

ウェブサイトを作成するにあたって必要な下記ソフトの両方の機能が備わっていて、かつ高機能な為、効率的にコーディングができます。

• テキストエディタ（Terapadなど）
• FTPクライアント（FFFTPなど）

便利な機能

• コードとデザインの分割（ウィンドウ＞ワークスペースのレイアウト　標準）
• コードヒント（環境設定＞コードヒント）
• コメントの適用と削除（左のツールバー）
• ソースフォーマット（左のツールバー）
• インデント機能（環境設定＞コードフォーマット）
• リンクファイルとの連携（上のタブ）
• ファイルを横断して検索/置換（検索）

▼リセットCSSの一例

/* リセットCSS
------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,select,header,nav,section,footer {
	margin: 0;
	padding: 0;
	color: #333;
	line-height: 1.6;
	word-wrap: break-word;
	box-sizing: border-box;
}
address,em,i {
	font-style: normal;
}
strong,th,b {
	font-weight: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
hr {
	display: none;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}
img {
	border: 0;
}
li {
	list-style-type: none;
}
small{
	font-size: 100%;
}
iframe {
	border: 0;
}
a{
	text-decoration:none;
}
/* リセットCSSここまで
------------------------------------------------------------*/