2014年4月25日金曜日

1学期 WEB 第5回 リンク(P.72)/絶対パスと相対パス




さっきまで出来ていたhtmlファイルの表示がいきなり崩れた 


レイアウト崩れの原因 - 閉めのDIVタグの過不足
CSSレイアウトは、DIVタグを入れ子にして構成していきますが、
いくつものDIVタグが重なりあい、
DIVタグを閉じるのを忘れてしまったり、
どれがどのDIVタグの閉めなのか分からなくなったりしてしまいます。
DIVタグの閉め忘れによるレイアウトの崩れ
右は、DIVタグを閉め忘れた崩れの例です。----------------------->>
DIVタグが閉まっていないことで、右に来るべきサイドバーが、メインスペースの枠の中に入ってしまうことで、崩れが生じています。
崩れを起こさないよう(=閉じタグを入れ忘れないように)、あらかじめ閉めのDIVタグに「目印」をつけておきましょう。
しかし、ただ目印をつけたのではブラウザ上にも表示されてしまいますので、「コメントアウト」を利用してこれを記載します。
[閉めのDIVタグを忘れないための目印のつけ方]
  1. <div is="mainWrap">  
  2. ~~~  
  3. </div><!-- mainWrap終わり -->  
<-- ○○○○ -->と囲ってあると、ブラウザには表示されないようにすることができます。

閉じるDIVタグを忘れてしまうと、後からどのDIVタグの閉めが抜けているのか調べるのは大変ですし、
それ以前にDIVタグを閉め忘れていることに気づかなかったりするので、
しっかり目印をつけておくことをオススメします。






画像や背景画像が全部いきなりでなくなった。 等の場合


このpageの一番上の例題の解説を読んで階層を理解しましょう。

[相対パス]
今編集しているhtmlファイルから見て表示したいファイルがどこにあるか
今編集しているhtmlファイルの
 1つ外のフォルダ(1階層上)に表示したい画像がある場合= ../フォルダ名/画像名
 2つ外のフォルダ(2階層上)に表示したい画像がある場合= ../../フォルダ名/画像名
 同じ階層のフォルダに表示したい画像がある場合=  フォルダ名/画像名

[絶対パス]
ネット上のどこにそのファイルがあるか
http://自分のサイトのURL/フォルダ名/画像名
 

参考:絶対パスと相対パス  [1時間で作るホームページ WEBデザインの素]

2014年4月22日火曜日

1学期 DTP第2回 Chapter01/Chapter02

[Chapter01]

P.38のデータがDVDから取込めない場合はここからダウンロードする↓

https://drive.google.com/file/d/0B78j9P1begssRzlFNFVEbERNTjQ/edit?usp=sharing

教科書ではプリントアウトするとなっていますが、

データをおくりん坊を使ってinfo@cid.jp.netへ提出


圧縮データのファイル名に出席番号を必ず入れる事



[Chapter02]

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

教科書P.50〜教科書の手順に従ってすすめる
おくりん坊(またはその他のオンラインストレージを介して)
info@cid.jp.netへ提出

2014年4月21日月曜日

1学期 WEB第4回 教科書にそって進める前に

現在すすんでいる所は?
第1章  サイト設定 → 第11章 ファイルのアップロード P.146〜155

 - - - - 4/18の時点で授業はここまで完了している- - - -



【提出物1】
第1〜第3章でできたデータを第11章の設定を使って自分のサーバにアップロード
http://自分のサイトのURL/chap01/ または
http://自分のサイトのURL/Chap01/ 


元データをDVDRからコピーすると混乱するので
ここからは、
「kadaisite.zip」を↓からダウンロードし、
解凍(zipファイルをダブルクリック)してできるフォルダ「kadaisite」を
Machintosh HD>ユーザー>Mac○○>書類>自分のフォルダ に入れ、
Dreamweaverで各htmlファイルを開いて教科書の手順で編集していきます。


これをクリックしてダウンロード  

ダウンロードの仕方
ファイルの中の「ダウンロード」を選択


すでに編集中のindex.htmlやproducts.htmlがある場合は
kadaisiteの中の同じ名前のファイルを消して編集中のファイルに置き換える



第2章
  • 新規ファイルの作り方 ⌘+N
  • タイトルの設定 テキストの打ち方 meta内<title>〜</title>
  • ファイル保存 ⌘+S  ブラウザで確認→

第3章
  • 見出しタグ<h1>〜</h1>  h1.h2.h3.h4....
  • リストタグの打ち方 <ul><li>〜</li><li>〜</li><li>〜</li></ul>
  • アドレスタグ <address>〜</adress>
  • 強調タグ<strong>〜</strong>



第4章
  • 表の作成 <table><tr><td></td></tr></table>
  • 画像の挿入 画像の変更 <img src="〜">

第5章
  • リンクの設定<a href="〜">○○</a>
  • 外部リンク<a href="http://○×△">あいうえお</a>
  • メールアドレスのリンク<a href="mailto:〜">アドレス</a>

第6章
  • グループ化<div id="〜">〜</div>
  • グループ化<div class="〜">〜</div>

第7章
  • cssファイル作成  「〜.css
  • cssファイルをHTMLファイルに読み込ませる meta内で<link rel="">
第8章・・・・
第9章・・・・
第10章・・・

2014年4月18日金曜日

1学期 WEB第3回 WEBの仕組みとFTP設定






WEBデザイン授業内容





プリントでは分かりにくいので↓このデータを各自で開いてみてみましょう
http://artinkochi.flier.jp/cid/gazo.zip












↑ このプリントの6番の「中央揃えボタン」がCS6では
使いにくい(非常に複雑な設定になる)ので
以下のように、画像のタグ(<img の行)の
前に<CENTER>
後に</CENTER>
を入れる。


<CENTER>

<img src="画像のコード.jpg">

</CENTER>




動画↓

1.FTPの設定
手順 1~6



手順 7~10



手順 11~13



4.画像のアップロードとWEB上での表示確認

5. htmlファイルの編集レイアウトとWEB上での表示確認

 inserted by FC2 system

2014年4月15日火曜日

1学期 DTP1回目 カーニング3種類の違い


オプティカル・メトリクス・和文等幅



http://study-room.info/id/studyroom/id2/study18.html

1学期 DTP第1回  オンラインストレージ

muumuu-mailでは10MB以上のデータを添付して送れない。


Q. 容量の大きい印刷データはどのようにして送るのか。

A.

オンラインギガストレージオンラインストレージ

大容量データ送信無料ファイル転送サービス

などを利用する。




授業の「雑誌の特集の課題データ」の提出ではおくりん坊を使ってみます。

(データが500MB以上の人はおくりん坊1アップロードのみではデータが送りきれないので、
 分割して2アップロード以上に分けて送信するか、
上記のAにある500MB以上送る事が出来るサービスを使いましょう。)



【おくりん坊に関して】Q1:おくりん坊ってなに?
おくりん坊は動画や印刷用大容量データなど最大500MBまで(登録無しの場合250MBまで)送れるファイル転送サービスです。 
ファイルを送る際にユーザ登録が必要となりますが、
ファイルを受信するだけであれば特にユーザ登録は必要ありません。
1、https://okurin.bitpark.co.jp/register.php から新規登録する
2、登録した自分のメールアドレスにログインして、仮パスワードを確認し
3、●おくりん坊 ログインページ https://okurin.bitpark.co.jp/login.php からログイン

4、ログインをするアップロード画面が開きます。



送りたいファイルをまずは、おくりん坊サーバにアップロードします。

(※ 1つのフォルダに必要なデータ[.inddファイルだけでなく、配置している画像ファイルも]を全て入れ、
controlキー + クリックで、フォルダを「圧縮」を選択し、zipファイルを作成。
ここでアップロードするのはこのzipファイルです。 inddのみや画像のみの部品をバラバラに送らない事。)

圧縮ファイル(.zip)の作り方 ←は、このページを参照

【(1)アップロードするファイルの選択】
登録をすると500MBの領域を使用することができます。空き容量によりますが、アップロードしているファイルがない場合、1度に500MBのファイルをアップロードすることも可能です。
【(2)ファイルの説明】
ダウンロードする相手にファイルの内容をつたえるために、説明を記載します。
【(3)ダウンロード回数の設定】
ダウンロード回数は10回まで設定することができます。受け取り側がダウンロードが完了した時点ではなく、ダウンロードボタンをクリックした時点でカウントされるため、少し多めに設定することをおすすめします。
【(4)ファイルの保存日数設定】
3日間までファイルを保存しておくことができます。
【(5)ダウンロード通知を受ける】
相手がダウンロードした際にメールで通知します。
【(6)ファイル削除通知を受ける】
アップロードしたファイルが削除された際にメールで通知します。
5、ファイルがアップロード完了すると画面に「アップロードが完了しました」と表示されます。

これでおくりん坊サーバにアップロードすることが出来ました。つづいてメールで通知する方は「メールで通知」、アップロードを続ける方は再度アップロード 画面から操作してください。 「ダウンロード画面URL」にて、ボタンをクリックするとダウンロード画面を確認することができ、またこのURLを直接コピーして、ユーザ御自身のメー ラーから相手にダウンロード画面を案内することもできます。
「システムがファイル削除時メール通知を受ける」チェックをはずしていればメール通知を受けることはございません。
アップロード画面ではアップロードされたファイルのリストが追加されています。
6、メールで通知する


info@cid.jp.net


ファイルをアップロードしたらダウンロードする画面のURLを相手にメールで通知することができます。
(アップロードされたファイルがないと、この機能の御使用はできません。)

必要項目を記入します。
【(1)送り先指定/メールアドレス手入力】
直接宛先のメールアドレスを入力できます。 複数の相手にメールを送る場合はカンマ(,)で区切って追加記入します。
【(2)送り先指定/アドレス帳より指定】
アドレス帳に登録したメールアドレスから選択して宛先を指定することができます。 アドレス帳を登録していないとこの指定はできません。
【(3)メール件名】
メールの件名は自由に変更できます。相手にわかりやすいように記入してください。
【(4)メール本文】
「メール本文」でメールの文章を入力します。初期値は「 ★ おくりん坊より お知らせを致します。 テスト ユーザ 様 によりアップロードされた ファイルが公開されました。ダウンロードファイル公開URLを クリックの上、ダウンロード可能回数または、保存期間に ご注意してダウンロード願います。 ★」 となっていますが、自由に編集可能です。
【(5)通知ファイル選択】
相手にお知らせするファイルを(送りたいファイル)を選択します。
【確認画面】ボタンをクリックして内容を確認してから【メール送信】ボタンで相手にメールを送ります。
7、相手には↑の形でメールが届き、文中のURLリンクからダウンロードされます。
その他、おくりん坊の使い方については、
https://okurin.bitpark.co.jp/static.php?action=guide
のガイドを見てみましょう。

1学期 DTP第1回 圧縮ファイル(.zip) の作り方

圧縮ファイル(.zip) の作り方

まず授業で使った「Chapter01」のフォルダから
データ作成に使ったファイルをコピーして
1つのフォルダに入れる(フォルダの名前は自分でわかる名前なら何でも良い)

 今回の場合は、使ったファイルは
Flyer.inddと1-photo.psdと1-Map.psdが使ったファイル。
これを例えばflyerという名前の新規フォルダに入れる



そのフォルダをcontrolキーを押しながらクリックして「圧縮」する。




するとお
zipファイルが出来る




この↑画面でアップロードボタンをクリックすると自分のパソコンの中が表示されるので


その中から先ほど作ったzipファイルを選んで「開く」ボタンを押す。


2014年4月14日月曜日

1学期 WEB第2回 WEBスペースの契約とサイトの設定


ホームページスペースを契約する
(メールアドレスが有れば契約ができます。
先週のアドレスを使って契約します。
以下の3種類から1つ選ぶ)

ドメインが340種類から選べる
(画面一番下に一行広告有り)



更新を続けていれば広告ほぼ無しで大容量
(画面一番下に一行広告有り)
※URL内に大文字が使えません




広告が付きます(広告の形を選ぶ事はできます)
※URL内に大文字が使えません



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

契約ができたら次に


「Machintosh HD」の中の
「ユーザー」の中の
「Mac○○」の中の
「書類」のフォルダの中に

自分のサイト用のフォルダ(名前は自由)」を作って

教科書に書いてある通りにデスクトップ上に置くと、
他の授業での利用者が間違って捨ててしまう事もあり得るので
上に書いた場所にフォルダを設置しましょう。


その中に

教科書に付いているDVDの中の

レッスンの中から
「Chap01」のフォルダをフォルダ丸ごとコピー

(やり方は、教科書P.23の⑤に載っています。)

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



続いて教科書の以下の順序で設定をして行く
P.22の①② 
P.23の③④
P.24の⑥⑦
P.146の①〜


------------------
FTPアドレス
ユーザー=ユーザー名=ID
パスワード=登録時のパスワード
------------------

忍者ホームページ

「忍者ホームページを作成」(右上黄色)

「忍者ホームページを作成」(左下黄土色)

「新規登録」(画面下寄り)
メールを登録

メールにログインして本登録URLをクリック

各項目を記入選択して登録
(2ページ有ります)

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


FC2
まず「FC2 ID」に新規登録して、
次に「FC2 ID」にログイン、
それから「サービス追加」→「ホームページ」を追加




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

今日の提出


1.メールにログイン

2.メールタイトルを 「出席番号と名前」


3.本文に自分のサイトの URL


4. info@cid.jp.netへ送信する
------------------

「3.本文に自分のサイトの URL」って何?



忍者ホームページの人は公開したデータをネット上で見るURLは
http://自分のサイトのURL/Chap01/index.html
http://自分のサイトのURL/Chap01/products.html
です。


FC2とジオシティーズの人は
FC2とジオシティーズの決まりとしてとしてフォルダ名に大文字が使えません。
1、まずパソコンの中のChapのCをcに変えて、
2、サーバー上の大文字のつくフォルダを削除して
3、小文字のフォルダをサーバーにPUTしてください。

(※ジオシティーズは大文字のフォルダを最初の1度はPUTする事が出来てしまいます。
  最初にPUTしたフォルダをサーバーから削除し
    →その後にPUTしないとあらゆるPUTがブロックされます。)


(※FC2は大文字のフォルダをPUTしようとすると最初からブロックされます。)


結果、FC2の人とジオシティーズの人は

公開したデータをネット上で見るURLは

http://自分のサイトのURL/chap01/index.html

http://自分のサイトのURL/chap01/products.html


です