[jQuery サンプル] 自分のサイトでこんなのがやってみたい

メニューにサブカテゴリを表示する サンプル
　作り方↓
http://ri-mode.com/rainbow/2014/06/11/simple_css_dropdown_menu/


画像が何枚か切り替わるバナー　jQuery 　

「bxSlider」
サンプル
http://wp-and.me/bxslider/


画像がスクロール表示で数枚表示されるバナー　jQuery
「slider.js」
サンプル
http://kaelab.ranadesign.com/blog/2010/10/jquery.html

自分のサイトを作る[メニューの作り方] 9/12・9/19

これまでの作業

まず、6/2のメニューを作る　の手順でメニューをつくる

つぎに

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

 　　　index.htmlを作る

　　　　BをAに埋め込む

完成したらindex.htmlをサイトのトップページにアップロードする。

動画が再生できない場合

解決方法１＝動画データをここからダウンロード

解決方法2 = Safariの環境設定のセキュリティを
下記の設定にすると再生が可能な場合があります。





　大前提● 復 習：CSSってなんだった？ 

・HTML=骨組み
・CSS=見た目の着せ替え=デザイン

↑・メニューの埋め込みが完了した人

　 ・(1学期の復習)--【課題】元々作られているテンプレートを改造する

を作成しアップロード完了した人は

↓プリントを見ながらコチラをスタートして下さい

HD＞ユーザー(iMac○○)＞サイト＞ 自分のサイトのフォルダ ＞

の中に　フォルダ名「dezign_zero」のフォルダがあるようにして下さい。

↓ 

Part4 Lesson-5(元データ)
 http://artinkochi.flier.jp/cid/design_zero.zip

 の元データをその中に入れること。 

P.242のSTEP.17の１のcss.txtの内容




最初のデータの状態(画像と文章がバラバラに並んでいる状態)

↓



完成の状態

---

1.CSSスタイルの<style>の中のbodyを選択

2.CSSスタイルのパネルの右上の項目をクリックしCSSルールを移動を選択

3.新規スタイルシートを選んでOKをクリック

4.basic.cssという名前をつけて保存

5.人によってはこのコマンドが出るのではいを選ぶ

6.CSSスタイルのパネルを確認　basic.cssが出来ている

ソースコードの隣に、basic.cssが出来ている

basic.cssの左の三角をクリックするとbodyがその中に移動している

DTP 教科書 第６章

[Chapter6]
https://docs.google.com/file/d/0B-f8r3Tajvw7d2ptTjJPMkswbTQ/edit?usp=sharing
↑元データはここからダウンロード

教科書P.176〜教科書の手順に従ってすすめる

メールに添付してcidgd2@gmail.comへ提出


※P.185の(9)は、自分のフリーメールのアドレスを入れる。
※P.187の(5)の保存方法で保存した.pdfをメールに添付して提出する。

画像の挿入の仕方(画像の差し替え方)

画像の変更は実は5カ所から操作が可能

(A)アセットから画像を選択＝(教科書P.64に同じ手順が出てきます)
　
(B)画面上のバー「挿入」の「イメージ」から画像を選択
(C)画面右「挿入」のパネルの「イメージ」から画像を選択

(D)差し替えたい画像をクリックして
　 プロパティのソースの欄の右のフォルダのアイコンをクリックして画像を選択

(E)画像を挿入したい場所(差し替えたい画像の場所に)カーソルを移動してクリックし
　 コードの中から画像のコードを見つけて紫の文字＜img src="〜"＞の〜の部分を
　 差し替えたい画像の画像名(例：○○.jpg)に変える。

(1学期の復習)--【課題】元々作られているテンプレートを改造する

http://yoko14145.com/cid/css-lesson.zip

から元データ(圧縮データ)をダウンロード


１・サーバとつながっている自分のサイトのフォルダの中に
「css-lesson」のフォルダを移動する。

２・css-lesson.htmをDreamweaverで開いて編集。
編集内容は　下記の通りの10ヶ所
  
 (10)
最後に、css-lessonのフォルダごと自分のサイトにアップロードする。(＝提出)

※
 (7)のタイトルと文字の内容は下記を引用する事。

がん細胞、光らせて発見　ウミホタルの発光物質利用
青く光る甲殻類の一種、ウミホタルの持つ発光物質を利用して、マウスのがん細胞だけを光らせる技術を産業技術総合研究所の近江谷克裕主幹研 究員らのグルー プが開発した。青い光を透過性の高い近赤外線に変換することで、体の奥にあるがんも特定できるようにした。がんの新しい診断法の開発につながる成果だ。今 週の米科学アカデミー紀要で発表する。 ウミホタルは日本近海に生息する体長数ミリの甲殻類。発光物質「ルシフェリン」と、ある種の酵素が化学反応して光る。ルシフェリンは、ノーベル化学賞を受 賞した下村脩さんが初めて結晶化したことで知られる。


(9)の背景色の変更の仕方。
1.画面上のメニューバーの[ウインドウ]の[CSSスタイル]にチェックをいれる
2.CSSスタイルのパネルのexm_navi_right.cssを開く
3.bodyを選択すると[bodyのプロパティ]がその下のウインドウに出るので
4.background-colorを#990000に
5.background-imageを(url"")にする(又は削除する)

※http://自分のサイトのURL/css-lesson/
　で表示されるようにindex.htmlに名前を変えて保存しアップロードする。




完成すると以下のようなビジュアルになります

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

【階層を理解するとWEBサイトがとても編集しやすくなります】

サイトの作り始めは HTMLファイルやイメージファイルなどの数も少なく
ファイルの収納は1つのフォルダでも困りませんが、 
ページが増えてくると、1つのフォルダ内にいろいろなファイルが散らばってどれがどれだが分からなくなります。
ファイルを手直したり、イメージを差し替える時たくさんのファイルから一つ一つ確かめないと作業はできなくなり、
効率が非常に悪くなります。 
そこでファイルの整理が必要になります。
新しいフォルダを作ってその中に関係するファイルを一まとめに収めます。
フォルダの中にサブフォルダを作りサブフォルダの中にまたフォルダ・・・と
フォルダ名も入っている内容に合う名前を付け、自分がわかりやすいように整理します。
ファイルのフォルダ分けをするとファイルの位置が変わります。 
そこで階層(かいそう)という考え方が必要になります。

↓階層について
http://www2.ttcn.ne.jp/webforest.com/html/hierarchy.html 
↓絶対パスと相対パスhttp://www.d3.dion.ne.jp/~tiyoko01/rink/rink-kihon.html 

ホームページを作成し始めて、最初に混乱するのがリンクでのファイルの位置指定。 
同じフォルダ内にあるファイルならそのままファイル名を指定すればいいのですが、
フォルダ分けをするとファイルの位置も変わりわかりにくくなってきます。
フォルダを移動するたびに / を入れ、上のフォルダに上がるたびに ../ を加えることを
頭においてファイル指定方法を実行してください。 

●ディレクトリって？
ディレクトリというのは、パソコンのフォルダと同じものです。
ファイル収納する場所です。 
フォルダをインターネット上で使うときはディレクトリという言葉を使います。

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

[ビジュアルエイド]の使い方

編集中の画面をパーツごとに見えやすくするツールを「ビジュアルエイド」と言います。
ビジュアルエイドは実際のサイトには表示されません。

編集するときにボックスの境目がわかりづらいので
試しに「CSSのレイアウトの背景」というビジュアルエイドを使ってみましょう。

コードやライブのボタンが並んでいる列の右側に目のアイコンがあります。 

これをクリックし、「CSSレイアウトの背景」にチェックを入れる

すると、CSSのタグやDIVごとにボックスの背景に仮の色がつき
境目が見えやすくなります。

※チェックを外せば背景の色は実際のサイト上で表示される色に戻ります。

WEB 2学期 概要 重要なポイント

1学期に何をしていたか?

フローチャート(サイトの完成予定構造図)を提出しました。
これを元に２学期には自分のサイトを作成しながら
新しい技術について説明、組み込み可能なものやより良い仕組みを検討しながら
WEBを構築して行きます。

[確認参照]　[フローチャートの例・昨年一昨年のサイト例]

自分のサイトを作る
自分のフォルダの直下のindex.htmlは自分のサイトのトップページ

指定のページのコードを使って
http://www.css-designsample.com/csslayout/technique-3.html

まず、6/2のメニューを作る　の手順でメニューをつくる

つぎに

自分のサイトのレイアウトをどのパターンにするかの手順でindex.htmlを作るBをAに埋め込む

完成したらindex.htmlをサイトのトップページにアップロードする。

動画はここからダウンロード



(1) CSSとHTMLとは何だったか  WEB 2学期 概要
(2) (1学期の復習)--【課題】元々作られているテンプレートを改造する
(3) idとclassの違い(画像にidを付ける) marginとpaddingの違い
(4) カラム落ちとは
(5) 子孫セレクタ
(6) スタイルシート3種類の適用方法の練習
(7) 外部ツールの実装／SNSや配布パーツをサイトに表示させる。
(8) jQueryを組み込む(例: lightbox)
(9) WEB上に公開したコードそのものをWEBブラウザでチェックする方法。
(10)WEB用のフリー素材の探し方(商用利用可のデータを探す)
(11)自分のサイトを作成する(フローチャートの数値を詳細に書き改める)
(12)ブラウザ別CSS
(13)質問の出た前例のサンプルデータ
(14)  
(15)
(16)
(17) 仕上げ作業
(18) 仕上げ作業
(19) 仕上げ作業
(20) 仕上げ作業 

[自分のサイトを作成する]で最低限実装してクリアするべきチェック項目
[1]indexがあるか 
[2]menuバーがあるか 
[3]テンプレートにmenuが組み込まれているか     
[4]基本のテンプレートデザインを完成する(※段組みレイアウトになっているか)
[5]CSSを書き出す
[6]複製して各コンテンツを作成する
[7]ツールを組み込んでより高度なサイト作成を行う
[8]オリジナリティのあるサイトを作成し完成する

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

DTP 第1回 ２学期

1学期の残り分

・教科書　5章・6章
・ラフとサムネール

日程

・フォントについて
・校正の時のチェックポイント

・組み版と禁則処理
・記号と校正記号／プリントアウト校正のチェックポイント／PDF校正の利点
・印刷可能データへの変換[初級編] 
・印刷可能データへの変換[中級編]  
・印刷可能データへの変換[上級編] 


1　10月中旬
校正(初校)の〆切り
順次データの完成した人からプリントアウト
↓提出
校正(初校)
↓
データの修正
↓ 

2　11月上旬
校正(2回目)の〆切り
修正したデータを提出
↓提出
修正データの確認。


3　11月中旬

データ校正がOKであれば、
印刷可能データへの変換
↓提出 

・印刷可能データのチェック ↓
訂正場所がある場合は修正したデータを提出 

・仕上げ1
・仕上げ2
・仕上げ3
・仕上げ4 DTP授業最終

KURODA‏@kuroda0311

プロとアマの仕事の違いを表した図に加筆させてもらった。仕事って甘くないのよ。 pic.twitter.com/iAldGevxfd