Dreamweaver使う
マウスオーバー
Daniel NolanさんのHPを使用する。
http://www.dnolan.com/code/js/rollover/
1.赤色部分をコピー＆ペースト
2.rollover.js 部分を右クリック→別名でリンク先を保存→jsフォルダに保存
3.各btn画像は、
『btn-gnav03.gif』にする
マウスオーバ時の画像名は
『btn-gnav03_o.gif』
Dreamweaver
立ち上げる
サイト→新規サイト→詳細設定→ローカルルートフォルダ：フォルダを選択→サイト名入力
Point!!
-フォルダ-
・日本語を含まない
・デスクトップでの保存は基本的にNG
Beauty Girl
常夏のナチュラルヘア＆メイク
HTMLの練習として雑誌の1ページ部分の記事をホームページにしてみました。
雑誌の記事とイメージが違いますが・・・。
つぎは、CSSも作成して、もうちょっと作ろうと思います。
人物のところはPhotoshopで切り抜いて、コピースタンプツールで少し修正しました。
雑誌記事
HTML作成
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style Type"content="text/css">
<title>Beauty girl</title>
<style type="text/css">
h1{
color: #ffcc00;
}
h2{
color: #81ffe0;
}
h3{
color: #6cfbe8;
}
</style>
</head>
<h1>Summer Make!!</h1>
<h2>■□ TROPICANA □■</h2>
<p>常夏のナチュラルヘア＆メイク</p>
<h3>-マリンなクラシックメイクに挑戦-</h3>
<p>アイシャドウ感覚で太く目尻を上げ気味に引いた水色のリキッドライナーがキュート!</p>
<p>部分用付けまつ毛もメイクのアクセントに。</p>
<p>ヘアは耳上から後ろの髪を逆立てふんわり１本にまとめ、フロントカチューシャで留める。</p>
<p><a href"#"><img src="images/01.jpg" alt="" width="400" height="707"></a></p>
<dl>
<dt>フェイス</dt>
<dd><a href"#">ポール＆ジョー フェイスカラー 2,940 円</a></dd>
<dt>アイメイク</dt>
<dd><a href"#">RMK アイクレヨン 2,310 円</a></dd>
<dt>リップ</dt>
<dd><a href"#">レブロン グロッシーポップス 1,260円</a></dd>
</html>
ブラウザで確認
style sheet を使う
HTML作成
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title> 練習 </title> <link href="base.css" rel="stylesheet" type="text/css"> </head> <body> <h1>My Home Page</h1> <h2>2004/12/3</h2> <p><img src="images.jpg/image.jpg">ここは練習用のホームページです。 ここで<em>スタイルシート</em>の練習をしていきましょう。 この<a href="#">HTMLファイル</a>と同じフォルダの中に <a href="#">CSSファイル</a>がありますので、 そこにスタイルシートを入力していきましょう。</p> <h2>2004/12/4</h2> <p>CSSファイルを編集したら、忘れずに上書き保存をしましょう。 上書き保存をしていないと、入力したデザインが反映されません。 </p> <h2>Link</h2> <ul> <li>Link1</li> <li>Link2</li> <li>Link3</li> <li>Link4</li> <li>Link5</li> <li>Link6</li> <li>Link7</li> </ul> </body> </html>
css作成
body {
background-image: url(images/bg.jpg);
background-repeat: no-repeat ;
background-position: center center;
}
h1 {
color: orange;
font-size: 1.5em;
font-family: sans-serif;
border-color: gold;
border-style: dotted;
border-width: 5px;
}
h2 {
color: yellowgreen;
font-size: 1.2em;
font-family: Georgia;
clear: both;
}
em {
background-color: yellow;
}
img {
float: left;
}
a:link {
color: lightseagreen;
}
a:visited {
color: deeppink;
}
a:hover {
color: red;
background-color: pink;
}ブラウザで確認
見る
新宿西口にopenしたUNIQLOのファサードは、おもしろく洋服と広告がディスプレイされてます。
今まで、あまり見たことのないデザインだなと思いました。
一見ゴチャゴチャとしているかなと思いましたが、離れて見ると外壁はシンプルなので夜になると照明も綺麗に演出されて今までとは、全く違う通りに感じました。
そして、広告とCMもおもしろい!!
新作のポロシャツ『POLONOW』ユニクロがポロシャツを新しくするというコンセプトみたいです。
広告は人物が白黒でポロシャツ部分はカラー。
なぜこの人物は白黒?
ポロシャツのカラーと洋服のバリエーションの豊富さを強調しているのかなと思いました。
男女それぞれにシンプルに着る人。ラフにきる人。着こなし方も広告で伝えている気がします。
そして、安さを感じさせない。
UNIQLO『POLONOW』広告
CMは、音もおもしろいです。たったこの音と人物だけ。一人一人に音をつけていて、音でもバリエーションをつけていて。
動きやすさも、このCMで伝わってきます。
UNIQLO『POLONOW』CM
tag用語
<!DOCTYPE>
Document TYPE(ドキュメントタイプ)
その HTML ファイルで使用している HTML のバージョンを宣言。
ドキュメントタイプ宣言。※タグではない。
<head>
Head(ヘッダ)
文書全体に関する指定など
<title>
ブラウザのツールバーに表示される/span>
<body>
Body(ボディ)
文書の本文を記述
<h1>-<h6>
Heading(ヘディング)
見出し
<p>
Paragraph(パラグラフ)
ひとつの段落。複数記述してOK。
<li>
List ltem(リスト アイテム)
リスト内の項目を定義する
<ol>
Ordered List(オーダー リスト)
順序付きリスト。olのみ場合は数字。
<ul>
Unordered List(アンオーダ リスト)
順序なしのリスト。ulのみの場合は黒ポチ。
<dl>
Definition List(ディフィニション リスト)
定義リスト。用語とその用語の説明や定義で構成される。
<dt>
Definition Term(ディフィニション ターム)
定義リスト内の用語部分を定義する
<dd>
Definition Description(ディフィニション デスクリプション)
定義リスト内の用語の説明
<a>
Anchor(アンカー)
リンクを貼る。リンクの出発・到達点を指定する。
<a href>
Hypertext Reference(ハイパーテキスト リファレンス)
指定したページにジャンプする
<meta>
METAinformation(メタ)
文書に関する情報（メタ情報）を指定する。ドキュメントについての情報。
