メディアデザイン演習3β
04 HTMLの基本を知ろう3

HTMLを書きながら要素を知る

前期は、ウェブサイトを表示するために必要なHTMLというプログラムを学びます。
前期合評時の製作目標は、自分が編集長となるウェブマガジンサイトをつくることです。

HTMLを実際に書いてみながらその構造と書式を勉強しています。
今週もさらによく使われる要素を、実際にタグを書きながら学んでいきましょう。
引き続き、「UNDER CONSTRUCTION」工事中のページを作成していきます。

今日は宿題だったウェブマガジン工事中の看板画像データ(IllustratorもしくはPhotoshopで作成)をウェブ用に保存する方法を学びます。

また、その画像を使って工事中のページをカスタマイズして自分のウェブマガジンのイメージに近づけていきましょう!

この間のふりかえり

これまでの授業で作成したファイルを継続して使っていきます
準備:
デスクトップに、アルファベットで自分の名字を名付けたフォルダを出して下さい。
中にはindex.htmlやimageフォルダが入っているはずです。


ウェブ用に画像を書き出す

Web用の画像(GIF、JPEG、PNG)を書き出す方法
Adobeのプロダクトの場合 :「Web用に保存」を使う

ポイント1
解像度は72ppi

ポイント2
ウインドウに表示したい"原寸サイズの2倍"で書き出す
<img src="image/moon.jpg" alt="moon" width="50" />
※実際の画像サイズは横幅100pxで作られています。

ポイント3
切りのいい数字で作る

ポイント4
画像の保存する場所は分かりやすい場所に(今回はimageフォルダ)
わかりやすい名前で(アルファベット半角小文字のみ)

[ 一緒に書き出してみましょう! ]




PHOTOSHOPなどのAdobe製品 : 「Web用に保存...」コマンドの使用方法
http://tv.adobe.com/jp/watch/learn-photoshop-cc/21907/


スライスツール

動画: http://tv.adobe.com/jp/watch/learn-illustrator-cs6-jp/14718/

Adobeの説明:http://help.adobe.com/ja_JP/illustrator/cs/using/WS714a382cdf7d304e7e07d0100196cbc5f-636ca.html#WS714a382cdf7d304e7e07d0100196cbc5f-6368a


Creative Suite / Web グラフィックの出力設定
Adobeの説明:
http://help.adobe.com/ja_JP/creativesuite/cs/using/WS6B44432F-0A47-4b51-BE84-1F64C7645B6A.html#WS24571C65-D508-48d0-B505-826DB53FA849

 


リンク文字の色設定

リンクの文字色 [CSS : color]

</title> のあと </head> のまえに

<style type="text/css">
<!--
a:link { color: red; }
a:visited { color: green; }
a:hover { color: blue; background-color : lightblue;}
a:active { color: yellow; }
-->
</style>

a:link { color: ***; } /* 未訪問の色
a:visited { color: ***; } /*アクセス済みの色
a:hover { color: ***; } /*マウスがリンク文字の上に乗っているときの色
a:active { color: ***; } /*クリックした瞬間の色


設定できるもの

文字色、背景色、サイズ(例: a:active {font-weight : bold;})などなど、、、。
色の便利ツール:216色カラーチャート 原色大辞典を参考に、 いろいろ変化させてみて下さい。

CSSリファレンス http://css.uka-p.com/reference/
・幅・高さ・背景・罫線関係
・余白・レイアウト関係
・フォント・テキスト・リスト・テーブル関係

色の便利ツール:
216色カラーチャート
原色大辞典

 

ヒアリング+ 工事中ページ作成

どんなウェブマガジンを作るのか概要を聞いていきます

まずは、今後自分ウェブマガジンをどのようなものにするのかを聞かせてください。

その間、イラストレータもしくはフォトショップで工事中のページに貼付ける画像を作り、ウェブ用に書き出してみてください。
そして月の画像のかわりに貼付けて、文字のデザインなどを調整して、工事中のページを完成に近づけていってください。

来週の内容

引き続き要素と属性の紹介
今日作ったファイルは保存して次週も使える様にしておいて下さい。
[宿題] 次週までに、工事中のページを完成させておいてください。

今日の内容を振り返って、よく理解しておきましょう。
わからない事は早めに質問して下さい。