ロゴ作成 その１

今日はロゴ作成です。

まずは入門編

ペイントというWindowsのツールを使用しましょう。

☆今日の目標
１．cssindex.htmlにヘッダ画像をつける
２．leftにメニューボタンをつける

練習です。
ここから画像をダウンロードしてデスクトップに保存してください。

崖の上のぽにょ


まずこの画像の大きさを把握しましょう。
→画像を右クリックでプロパティを見ます。

次にペイントを開きます。

方法
　その１　「ぽにょ」を右クリック　→　「プログラムから開く」　→　「ペイント」
　その２　スタートキー　→　アクセサリ　→　ペイント　→ファイル　→　開く


開かれた画像は求めるヘッダ画像より小さいので拡大します。

変形　→　サイズ変更/傾斜
水平　200％　垂直　200％にします。

変形　→　キャンパスの色とサイズ
※「ピクセル」を選択
幅　903　高さ　200

他にも画像自体を直接ドラッグでサイズ変更できるので試してみましょう

☆課題１
これをcssindex.htmlに表示できるようにしましょう。

☆課題2
１．他の画像を検索
２．ふさわしいサイズに変更（特に高さを考えてください）
３．cssindex.htmlに表示できるようにする。



Leftにボタンを表示する

ペイントでボタンを作成します。
ファイル　→　新規
変形　→　キャンパスの色とサイズ
Leftで指定しているピクセル数を把握した上で最適と思われる
サイズにしてください。

テキスト入力ボタンをPUSH
文字を入力

名前を付けて保存
→ここではGifにしましょう。

トラップですが･･･
保存先は？

課題
１．Leftに表示
２．リンク先を自分のGmail
３．別Windowで開く

これを例題として各自
１．メニューボタンの作成
　どんなメニュー？（うどんとかおでんとかじゃないです！）
２．該当ページに表示＆リンク

☆☆☆発展バージョン

ここでは単語だけ言いますね。

ロールオーバー

チャレンジャーはぜひやってみてください。

よい子はみちゃだめ
CSSでロールオーバー

#image a{
display:block;
width:200px;
color:#F0027F;
background:url(../images/bottan.jpg) no-repeat;
height:50px;
line-height:50px;
text-decoration:none;
text-align:center;
　}

#image a:hover{
color:orange;
background:url(../images/bottan2.jpg) no-repeat;
}

→これをhtml内に

<div id ="image"><a href="URL">見本です。</a></div>

って感じかな？



☆もしくは

css－－－－－

#sidemenu dd{
font-size:13px;
border-bottom:1px solid #fff;
}

#sidemenu dd a{
display:block;
height:20px;
line-height:20px;
color:#666666;
padding-left:16px;
text-decoration:none;
}

#sidemenu dd a:hover{
color:#fff;
background:orange
;}

html－－－－－

<div id="sidemenu">
<dl>
<dt>CSSの基礎知識</dt>
<dd><a href="URL">CSS フォント</a></dd>
<dd><a href="URL">CSS テーブル</a></dd>
<dd><a href="URL">CSS ロールオーバー</a></dd>
<dd><a href="URL">CSS 背景</a></dd>
<dd><a href="URL">CSS margin</a></dd>
<dd><a href="URL">CSS float</a></dd>
</dl>
</div>

いろいろありますね。