実技 WEBデザイン実習

-本日のアジェンダ-

1限目
実技 WEBデザイン実習
オーサリングツールについて

2限目
実技 WEBデザイン実習
Dreamweaver の使い方について

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

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

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

本日のテーマ

Dreamweaverです。

Dreamweaverについて

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

参考資料

ドロップボックス
資料>【STEP4】Webページの制作>「WEBデザイン実習の教科書.pdf」をダウンロードしましょう。
制作のポイントをまとめた資料です。

ワンポイントアドバイス

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

参考サイト

本日の課題

「デザインラフ」の続きを作成しましょう。
今日の時点できたところまでの成果をDropboxに上げてください。

※ファイル名は、work_xxxx_20230619.jpg

学科 CSS基礎⑥

-本日のアジェンダ-

1限目
学科 CSS基礎⑥
ボックスモデルについて

2限目
学科 CSS基礎⑥
ボックスモデルについて

3限目
学科 CSS基礎⑥
レスポンシブWEBデザインについて

4限目
学科 CSS基礎⑥
レスポンシブWEBデザインについて

5限目
学科 CSS基礎⑥
本日の講義のまとめ

本日のテーマ

Box modelについて(レスポンシブWEBデザイン)

Box modelについて(RWD)

【資料】

ドロップボックスの資料をダウンロードしましょう。
資料 > 【STEP3】Webページの理解 > マルチデバイス対応の教科書①.pdf
Box model(レスポンシブWEBデザイン)の手順をまとめた資料です。

【動画】

RWD 対応のサイトについて

  • 幅広デザインでの Web ページ作成
  • viewport 定義の指定
  • 横幅変動時のコンテンツ幅を設定
  • Media Querie でデザインを整える
  • 画面サイズに合わせた表示部品の導入

本日の課題

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。