学科 WEB動画基礎

-本日のアジェンダ-

1限目
学科 WEB動画基礎
YouTube利用について

2限目
学科 WEB動画基礎
WebサイトでYouTubeの 使い方について

3限目
学科 WEB動画基礎
課題作成

4限目
学科 WEB動画基礎
課題作成

5限目
学科 WEB動画基礎
課題作成

本日のテーマ

WebサイトでのYouTubeの活用法についてです。

YouTubeについて

YouTube ( ユーチューブ ) は、アメリカ合衆国・カリフォルニア州サンブルーノに本社を置く世界最大の動画共有サービス。Youは「あなた」、Tubeは「ブラウン管(テレビ)」という意味である。

Youtubeパートナーシッププログラムについて

 【資料】・・・DEAUアカデミー WEBデザイナー養成(午前)科 B教室 / 資料 /【5】運営 /WEB動画基礎20220818.pdf

VIDEOとIFRAMEタグ

WEBサイトに動画を埋め込む方法は2つあります。
①iframeタグを使用する(youtubeなどの動画サイトから読み込む)
②videoタグを使用する(動画ファイルをアップロードして読み込む)

①IFRAMEタグを使用する(YOUTUBEなどの動画サイトから読み込む

記述例
<iframe width="410" height="200" src="https://www.youtube.com/embed/9No-FiEInLA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

②VIDEOタグを使用する(動画ファイルをアップロードして読み込む)

記述例
<video src="sample.mp4"></video>

参考サイト

その他、埋め込みについては下記を参考に!

SNSの埋め込み方

第5回成績考査について

8月30日(火)の5限目までに、Webページを提出してください。
※WEBページはFFFTPでHTMLサーバーにアップしてください。
※サイト内容は自由です。是非、就職活動に活かせる作品を作成してみてください。

実技 WEBデザイン実習②

-本日のアジェンダ-

1限目
実技 WEBデザイン実習②
Dreamweaverの便利機能について

2限目
実技 WEBデザイン実習②
DreamweaverのFTP機能について

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

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

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

本日のテーマ

Dreamweaverの便利な機能の確認

Dreamweaverについて

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

ワンポイントアドバイス

置換機能やコードヒントなど便利な機能もありますのでしっかりポイントを押さえておきましょう。

参考サイト

FTP機能について

ワンポイントアドバイス

DWでもサーバにUPする機能が付いています。使いどころと注意点をしっかり理解して必要に応じて使用しましょう。

参考サイト

第5回成績考査について

8月30日(火)の5限目までに、Webページを提出してください。
※WEBページはFFFTPでHTMLサーバーにアップしてください。
※サイト内容は自由です。是非、就職活動に活かせる作品を作成してみてください。

就職活動に役立つサイト

情報収集に役立つ参考サイト