-本日のアジェンダ-
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ここまで
------------------------------------------------------------*/