WEB上に公開したコードそのものをWEBブラウザでチェックする方法。

WEB上に公開したコードそのものをWEBブラウザでチェックする方法。
http://wayohoo.com/より引用

Safariでソースコード（HTMLやCSS）をみる方法。

というわけで、Safariでソースコードを見る方法です。

SafariのメニューバーのSafariをクリックして「環境設定...」をクリックします。

詳細タブの一番下にある「メニューバーに”開発”メニューを表示」にチェックをいれます。

するとメニューバーに開発が追加され、ウェブページのソースが見ることが可能になります。

右クリックからも見れます。ちなみにソースコードをみるためのショートカットキーは「command + option + U」です。

こんな感じで。

ちなみに別ウィンドウアイコンをクリックすれば

このように広々とソースコードを見ることも可能です。

要素の検証がとても便利。

便利なのが要素の検証です。

たとえば、イメージ画像のHTMLやCSSを知りたいときは、そのイメージを右クリックして要素の検証をクリックします。

するとこのようにそのイメージのHTMLとそのHTMLに使われているCSSを覗くことが出来ます。

※注意: CSSを見る際には上の部分をクリックしましょう。

ちなみにCSSの値を変えればブラウザにそれを反映させることもできます。これは、ウェブサイトのコーディングをするときにホント使える機能だと思います。

サンプル

WEB

css-lesson
http://2010yoko14145.web.fc2.com/css-lesson/css-lesson.htm






dezign_zero
http://www.geocities.jp/cid2013/design_zero/index.html

---

DTP

雑誌の特集 ラフとサムネール サンプル	プランシート サンプル

校正

校正の時の出力の仕方
[10/21の記事の6.7を参照]

6.出力する際にトンボをつける。

トンボや印刷マークの設定

http://helpx.adobe.com/jp/indesign/kb/2625.html

1ページ目の扉はB4用紙にA4レイアウトにトンボをつけて出力
2-3ページ目は扉として2枚にしてB4の紙に出力するか

または、2+3ページを1枚としてA3の用紙に縮小して出力する
(用紙サイズに合わせるにチェックを入れる)

7.↑下の左から２番目のボタンを押し[プリンター]の設定をする。
↓[用紙サイズに合わせる]にチェックを入れる。

-------------------------------------------------------------------------------------
初校サンプル

プリントアウト校正で何を見るのか

例えば校正ではこういう所をチェックします

 例えば校正ではこういう所をチェックします

印刷しても耐えうる画像を作成する又は探す

・ラスター画像を ベクター化する オンラインツール

　ーーーロゴデータなどを印刷物からスキャンする場合などに有効

・DTP用のフリー素材を探すには？

　　1)「フリー素材　高解像度　テクスチャ（背景）　ベクター素材　フリー　ai素材　DTP EPS」　
  　　　などで検索して、フリー素材を提供しているサイト自体を見つけ、
　　2)そのサイト内を検索する。

　　　( 1)でhigh quality images, texture, Vector, free などの英単語で検索すると探せる素材の幅が広がる) 

[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