沖の島・猫

沖の島・初猫祭プロジェクト　

ペインティング案募集・ボランティアスタッフ募集

猫のペインティングデザイン案募集
https://drive.google.com/file/d/0B78j9P1begssUC1vTXd0T3ZibUREbm9zcjctWk14cy16V0w0/edit?usp=sharing
↑これにベアブリック的なペイントデザイン案を出してくれる人を募集
pdfデータをイラストレーターorフォトショップで開いてデザインを描き込んで完成して
info@yoko14145.comへ送ってください。
　※その猫の色・特性・ご利益を考えてデザインする(立体はこちら)


第一回〆切り=6月末日 (これに間に合うとチラシの一部に採用されます)
第二回〆切り＝9月中旬
(これまでに間に合うと9.10.11月に須崎で行われる報告点にて展示されます。)

------------------------------------------------------------------------------------
猫の素体量産作業

場所：高知市北本町3-11-35

OBにデザインの話しなども聞けます(とくひらさん)






鵜来島で同時期にイベントを行う作家さんのパフォーマンスのほうのサイト

檸檬隊長さん
　幻想戦隊レモネード　http://genlemo.com
　鵜来島で行う龍宮学校のイベントサイトhttp://rukuru.info/ryugugakkou/
　普段のクリスタルボール(ファッションメーカー)のデザインの仕事
　http://www.garcia-style.com

岸田万里(万里ちんゲール)さん
　四国銀行のキャラクターイラストの仕事　http://www.shikokubank.co.jp
　http://www.shikokubank.co.jp/ryoma/

とくひらようこさん (CID OB)

課題優先順位の板書・facebookの個人アカウントのバナーを外部サイトに表示する方法

facebookの個人アカウントのバナーを外部サイトに表示する方法

facebookの個人アカウントのバナーを外部サイトに表示する方法
http://knn.typepad.com/knn/2011/05/facebookページ用のバナーをブログなどに設置する方法.html

Facebookのプロフィールバナーを作ってアピールしよう！
http://matome.naver.jp/odai/2134658747736210501

6/20 jQueryを組み込む(例: lightbox)

lightboxの設置の仕方(↓元記事)

http://www.chamanet.com/lightbox/

画像紹介を多く扱うサイトの作成

画像を多く紹介するサイト作成には、htmlページを大量に作成(複製)するか、

元画像そのものを呼び出して表示できるjqueryを使うか

photoshopの自動処理のwebフォトギャラリー機能を使って作成すると効率が良い。

(jquery=高度なcssとjavascriptを使いやすく改良した配布セット[キット]のようなもの)

lightbox

[公式サイト 英字サイト]

http://lokeshdhakar.com/projects/lightbox2/

日本語サイト

http://www.chamanet.com/lightbox/ 

Lightbox導入方法 Lightboxの導入方法とサンプルのダウンロード 簡単にLightboxに対応出来ます。 Lightboxのサンプル サンプルページ サンプルページの写真をクリックすると Lightboxが起動します。 サンプルページのHTMLファイルは こちらからダウンロード出来ます。 Lightbox導入方法 １．ダウンロード LightBoxサイトからLightboxをダウンロードして下さい。 ダウンロードはこちら（ページの中央あたりのDOWNLOAD） ２．ZIPファイルを解凍 LHACA、LHASAなどで解凍して下さい。 解凍すると「css」「images」「ｊｓ」が作成されます。 ３．サーバーに転送 Lightboxに対応させたいページと同じフォルダに「css」「images」「ｊｓ」を転送します 転送後、ディレクトリ構造はこのようになります index.html  ←Lightboxに対応させたいページ ※　解凍した「images」の中の「image-1.jpg」と「thumb-1.jpg」は不要です ４．HTMLタグの編集 Lightboxに対応させたいページのHTMLタグを編集します。 <TITLE></TITLE>の次の行に <meta name="description" lang="en" content="Lightbox 2 is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers."/> <meta name="author" content="Lokesh Dhakar"> <meta name="viewport" content="width=device-width,initial-scale=1"> <script src="js/modernizr.custom.js"></script> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/lightbox-2.6.min.js"></script> を挿入します。 各写真のHTMLタグを下記のように修正します。 <a href="img/demopage/image-1.jpg" data-lightbox="example-1"> <img src="img/demopage/thumb-1.jpg" alt="thumb-1" width="150" height="150"/> </a> グループ名は「aiueo」や「abc」など自由な半角英字で指定します。 サムネール画像クリックでlightbox出現 　<a href="img/ファイル名" title="説明文" data-lightbox="グループ名"> <img src="img/ファイル名" alt="説明文" width="150" height="150" /></a>文字クリックでlightbox出現 <a data-lightbox="image-1" href="http://www.blogger.com/img/image-1.jpg" title="My caption">image #1</a>

縦長画像の背景が途中で切れる

PhotoshopのWEBフォトギャラリーの機能を使う

(↓使い方の紹介サイト)※CS6のphotoshopではこの機能がなくなりました

http://cashari.net/use/p_album/p_album_web_gallery_1.htm

↓
代わりに縮小の自動処理に使えるもの
　　　縮小専用。http://labo.i-section.net/shukusen-air/
　　　【PhotoshopCS6】なんでも自動処理→アクションファイルの作り方。



jQueryのサンプルリンク集
サンプルリンク集2
サンプルリンク集3
サンプルリンク集4
サンプルリンク集5

ハイクオリティなサイトサンプル集

オンラインジェネレーターーーーcssで動的webパーツを生成するオンラインツール
オンラインジェネレーター集2
オンラインジェネレーター集3
画像加工ジェネレ−ター集
ボタン・フォーム・アイコン生成ジェネレータ

昨年までの作例 と こだわりサイト例

2012年
■　■　■　■　■　■　
2013年
■　■　■　■　■　■　
■　■　
OB
■　■　■　■　■　　
作家サイト
■　■　
■　■　■　■　■　■　　
他
■　■　■　■　■　■　　

■　■　■　■　■

細部まで気を抜かない！フッターにもこだわったWebサイトまとめ

少しの手間で大きく変わる、細部にこだわったWebデザインを


大阪市交通局がプロのデザイナーを月給11万で募集し炎上。
イラレ、フォトショ、実務経験必須ｗｗｗｗ


Ｗｅｂデザイナーは他と比較すると給料が安いのですが、
なぜ皆さんはＷｅｂデザイナーになられたのですか？

デザインの仕事について／表示がいきなり崩れた(階層がずれた)時の対処法／[自分のサイトを作成する]で最低限実装してクリアするべきチェック項目

デザインの仕事

2chまとめ　デザイン系の仕事って実際どうなの？
http://bipblog.com/archives/4494735.html

てんやわんやのグラフィックデザイン業界
http://www4.osk.3web.ne.jp/~works501/file/3df_01/3d_01.html
(現行サイト http://osakadesign.com/?86,42)

デザインの現場
http://artdesignjobs.bijutsu.co.jp/


新人Webデザイナーにありがちな
５つのコミュニケーショントラブルとその解消法
http://lpo.gaprise.com/blog/web-designers-communication-2045/


2014年6月2日これが欲しかった！フリーフォント22選
【日本語対応／商用可／無料】
http://liskul.com/freefont-2626

相場の価格表が毎年出るサイト http://w3q.jp/t/4482 http://w3q.jp/t/137

http://touch.allabout.co.jp/gm/gc/296956/?spref=http%3A%2F%2Fwebdc76.blog.fc2.com%2Fblog-entry-51.html

ほか参考 http://m.chiebukuro.yahoo.co.jp/detail/q1076997925 http://cyblog.jp/modules/weblogs/11774 http://www.webcreatorbox.com/tech/low-budget-projects/ http://e0166.blog89.fc2.com/blog-entry-401.html

---

さっきまで出来ていたhtmlファイルの表示がいきなり崩れた
画像が全部いきなりでなくなった。

WEB 第５回 4/25

↑の画像3枚を読んで階層を理解しましょう。

[相対パス]
今編集しているhtmlファイルから見て表示したいファイルがどこにあるか
今編集しているhtmlファイルの

　１つ外のフォルダ(１階層上)に表示したい画像がある場合= ../フォルダ名/画像名

　２つ外のフォルダ(２階層上)に表示したい画像がある場合= ../../フォルダ名/画像名

　同じ階層のフォルダに表示したい画像がある場合=  フォルダ名/画像名

[絶対パス]
ネット上のどこにそのファイルがあるか

http://自分のサイトのURL/フォルダ名/画像名
　

参考：絶対パスと相対パス  [１時間で作るホームページ WEBデザインの素]
http://www.shoshinsha.com/hp/1hour/know/pass.html

---

[自分のサイトを作成する]で最低限実装してクリアするべきチェック項目

2学期に向けてこれらを考慮してフローチャートを作成しよう


※フレームを使用しない事(例)。　
※段組みレイアウトを使うこと。(例：２段組みレイアウト ３段組みレイアウト)

index.htmlがあるか 
menuバーがあるか 
テンプレートにmenuが組み込まれているか     
基本のテンプレートデザインを完成する(※段組みレイアウトになっているか)
CSSを書き出す
複製して各コンテンツを作成する
ツールを組み込んでより高度なサイト作成を行う
オリジナリティのあるサイトを作成し完成する

以下のうちのどれかの条件を盛り込んであるか
★画像の多いサイトを作成する場合lightboxやwebフォトギャラリーを使う 
★SNSを外部表示するjsツールを使用する 
★オンラインジェネレーターを使用する

自分のサイトのレイアウトをどのパターンにするか

各課題が未完成の人は各課題を提出(公開)する。

課題が出来た人は

1.フローチャートを作る(これは１学期の提出物です)

2.ロールオーバーによるメニューボタンをCSSとhtmlで設置(これは2学期の内容)

メニューも出来た人は、以下の方法で
自分のサイトのレイアウトをどのパターンにするか考える

　※要注意　フレームは使わないこと。
　　　　　　２段または３段組のレイアウトで作成する

1.画面上のメニューバー「ファイル」＞「新規」で「HTML」を選択すると
次のような画面が出てきます



レイアウトの中から自分のサイトの構想に合うものを選ぶ

詳細な説明のついたHTML(とCSSが合体したもの)が自動生成されます。

このページに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種類) -
http://myisland.jp/template/menus/index.html

(教科書のロールオーバーは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であれば、
画像をオリジナル画像に差し替える。
または色のコードを書き換える。
または背景画像をオリジナル画像に差し替える。

この課題は２学期の各自のサイト作成のメニューになります。(2学期の提出物です)





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



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

• ロールオーバーリンク1
• ロールオーバーリンク2
• ロールオーバーリンク3
• ロールオーバーリンク4
• ロールオーバーリンク5
• ロールオーバーリンク6