2016年6月24日金曜日

design_zeroの課題のdivボックスの入れ子の関係図





特にsubcontentの中がおかしくなっている人が多いので
index.html内のdivボックスの入れ子関係を再チェックすること！
↓




投稿者 時刻: 0 件のコメント:

メニューボタンの作り方

ボタンの作成ができた人は メニューボタンを作成しよう！

以下の説明を読んで、２学期に作成する「自分のサイト」の
メニュー部分を作成していきましょう。


------------------------------------------------------------------------------------------------------------------------------------
まず
※ロールオーバーボタンの復習 ※
ロールオーバーリンクのその他の種類
カーソルを置いた時に表示が変化するメニューボタンのことをロールオーバーと言います。
(教科書のロールオーバーはjavascriptを用いたものですが、
ここにあげているロールオーバーはcssとHTMLで構成されています。)


カーソルを置いた時に表示が変化するメニューボタン(6種)


画像でもできるがCSSのみでもボタンはできる

-メニューボタンを CSS でつくるには -

or

-CSSとHTMLがセット配布されているメニュー(22種類) 

の中から自分のサイトに入れるメニューボタンに組み込む仕組みを選び
自分のサイト用にデザインをオリジナル化してmenu.htmlを完成させましょう。


------------------------------------------------------------------------------------------------------------------------------------


-メニューボタンを CSS でつくるには -

(文字と背景カラーでつくる／文字と背景画像でつくる／画像でつくって表示位置をズラす)
http://www.css-designsample.com/csslayout/technique-3.html

例=テキストのみの場合

 1.新規htmlファイルを作成
 2.公開されているコードをプレーン表示(orコピー)してコードをコピーする。
 3.作成した新規htmlの<body> ~ </body>のコード内にペーストする。
 すると、デザインビューでは↓このように表示される
 4.同じようにcssコードもコピーする
 5.新規cssファイルを作成する
 6.cssファイル内にペーストする。
 7.cssファイルをmenu.cssという名前で保存
 8.最初に作成したhtmlファイルをmenu.htmlという名前で保存する
 9.menu.htmlを表示しcssスタイルパネルの下にあるクサリのマークをクリック
 10.参照ボタンをクリックしてmenu.cssをリンクさせる
 11.menu.htmlファイルのデザインビューがこのように表示される事を確認する。
12.ネット上できちんと動作するかどうかを確認する

 ------------------------------------------------------------------------------------------------------------------------------------

- CSSとHTMLがセット配布されているメニュー(22種類) -





(教科書のロールオーバーボタン(P.109)はjavascriptを用いたものですが、
ここにあげているロールオーバーはcssとHTMLで構成されています。)

1.Dreamweaverで新規htmlファイルを作成
　(例えば名前をmenu.htmlとする)
2.新規でCSSを作成する
　(例えば名前をmenu.cssとする)
3.スタイルシートを添付ボタンをクリックしてmenu.cssを選ぶ
　menu.htmlとmenu.cssを結びつけてリンクする

4.画像を保存する
My Islandの場合は[Download]からダウンロード。
その他のサイトの場合は画像をドラッグしてダウンロードする場合もあります。

5.cssへのリンクのコードをコピーして<head>〜</head>内に貼付ける。

6.公開しているHTMLコードを
<ul>~</ul>まで または <div>〜</div>まで
をコピーしてmenu.htmlに貼付ける。

7.公開されているCSSコードをすべてコピーしてmenu.cssに貼付ける。

8.menu.htmlとmenu.cssを保存し、
menu.htmlをSafariにドラッグして表示し、正しく動作するかどうかを確認する。

[コードの全景]　
※〜の部分は画像コードの場合とテキストの場合があるので省略しています。
自分のメニューに合うコードを〜の部分に入れましょう。

OKであれば、
画像のメニューボタンにしたい人は、テキスト部分をオリジナル画像に差し替える。
または画像を使わずCSSの色コードでメニューボタンを作る場合は色のコードを書き換える。
またはcssのliの背景画像をオリジナル画像に差し替える
投稿者 時刻: 0 件のコメント:

2016年6月7日火曜日

ロールオーバーボタンの作成

第８章・・・・ロールオーバーイメージを追加しよう

[新規ロールオーバーボタンのページを作成して公開]
次に、前回の授業で準備した↓のボタン素材(ジェネレータまたはPhotoshop or Illustrator)を使って作成したものを使って

オンラインジェネレーター


kadaisiteの一つ上の階層にrollover.htmlファイルを新規作成し、
下記の条件にあわせて編集し完成させましょう。
(下記の条件はすべて今までに教科書にでてきたもので、
※P.101〜P.102でかなり省略された中でやったことになっています。)




作成画面の動画

事前の準備
ロールオーバー用のボタン画像を2個作成する。
(1個目は最初の表示のボタン、２個目はマウスを画像の上にもってきた時の表示用のボタン)

1.Dreamweaverを起動
2.画面上の「ファイル」内の新規から
　「空白ページ」ページタイプ:「HTML」レイアウト:<なし>を選択する。
3.出てきたHTMファイルをrollover.htmlという名前で自分のサイトのフォルダに保存する。
4.画面上の「挿入」の中の「レイアウトオブジェクト」から「Divタグ」を選択
5.idの欄にcontentと記入してOKをクリック
6.「 id "content" の内容がここに入ります」の文字を選択し
7.画面上の「挿入」の中の「レイアウトオブジェクト」から「Divタグ」を選択
8.idの欄にalphaと記入してOKをクリック


9.コード内の「 id "content" の内容がここに入ります」の文字を消す

10.コードの
<div id="alpha">　(ココ)　</div>
をクリック

11.画面上の「挿入」内の「イメージオブジェクト」内の「ロールオーバーイメージ」を選択
12.出てきたウインドウの「元のイメージ」の欄の右側にある「参照」ボタンをクリックし
最初の表示用のボタン画像を選択する。
13.次にその下の「ロールオーバーイメージ」の欄の右側にある「参照」ボタンをクリックし
マウスを画像の上にもってきた時の表示用のボタン画像を選択する。

手順の続きは↓のページを参照

ロールオーバーボタンの作成の 手順13以降の設定
1.alpha内のパーツの配置は中央配置にする(セレクタ alphaのプロパティーtext-alignのバリューをcenterにする)

まず、alphaの中身を選択し、CSSをクリックし
プロパティのパネルをHTMLからCSSに切り替える


 プロパティのパネルの右の方に
中央揃えボタンがあるのでそれをクリック


2.alpha内にロールオーバーボタンを設置し　＝P.112〜P.115 
ロールオーバーボタンのリンクをkadaisiteの中のindex.htmlに設定する。
＝P.112〜P.115 
3.ボタン下に「↑ボタンクリックでkadaisiteのトップページへ」のテキストを挿入し、
4.フォントファミリーを「ＭＳ Ｐ明朝, MS PMincho,ヒラギノ明朝 Pro W3, Hiragino Mincho Pro, serif」に設定。＝P.98-(６)
5.文字サイズを10pxに設定。=P.98-(7)   文字の色を#53C09Bに設定。=P.99-(9)
6.contentの横幅を500pxにし、
新規CSSボタンを押す(CSSスタイルのパネルの右下)　　


IDを選択し、contentという名前のセレクタ名を入れてOK


左の「カテゴリ」から「ボックス」を選択
ボックスの横幅(width)を500pxにする。




7.境界線の線種を点線、境界線の色を#09Fにする(border: 1px dotted #09F;)

「カテゴリ」から「ボーダー」を選択する

すべて同一のチェックを外し、styleの項目をdotted(点線)にする。

投稿者 時刻: 0 件のコメント:

オンラインジェネレーター

オンラインジェネレーター

photoshopやIllustratorでメニュー用ボタンや背景画像を作成しても良いですが、
オンラインジェネレータを使うとある程度簡単にweb用素材を作成することが出来ます。



■海外版

背景画像　ジェネレータ
http://www.stripegenerator.com/
チェック模様の画像
http://www.tartanmaker.com/

Web2.0風ボタンメーカー
http://www.mycoolbutton.com/

ajaxローディング画像ジェネレータ
http://www.ajaxload.info/
http://www.loadinfo.net/

オンラインメニュージェネレータ
http://www.cssplay.co.uk/menus/menu_builder_flyout.html
http://jscook.yuanheng.org/JSCookMenu/MenuBuilder.html#help

■オンラインジェネレータまとめサイト(日本語)
http://online-generator.bex.jp/

■画像加工ジェネレータ
http://sekailog.com/2012/01/imagegenerator/


■ボタンジェネレーター

http://jirox.net/AsButtonGen/  http://www.glassybuttons.com/glassy.php


■背景画像ジェネレータ
http://blog.e-riverstyle.com/2009/05/web15.html


■Photoshopで自作する場合参考サイト

mac アクア風ボタンの作り方　http://www.allef.com/gpx/

photoshop ボタンの作り方(初心者向け)
http://blog.livedoor.jp/psychedeledge/archives/51812346.html

投稿者 時刻: 0 件のコメント:
登録: コメント (Atom)