htmlファイルの数とフォルダの名前や位置を確認しよう。

htmlファイルの数とフォルダの名前を確認しよう。
※これが違うとリンクがズレたり、(=提出のページのリンクから到達できない)
　画像のソースがズレます(＝表示されません)


ローカルファイルのウインドウ内が↓こうなっていないといけない

Machintosh HDの中の、ユーザーの中の、iMac○○の中の、書類の中の、自分のサイトのフォルダの中がこうなっていないといけない↓

.DS_storeファイルがエラーを起こす場合

フォルダを選んでPUTすると
.DS_storeファイルがエラーを起こす場合があります。

送りたいデータ自体を選択してPUTするようにしてください。

どうしても.DS_storeファイルを削除したい場合は

http://inforati.jp/apple/mac-tips-techniques/system-hints/how-to-troubleshoot-mac-finder-window-and-icon.html
↑
の

個別のフォルダから.DS_Storeを削除する方法

を行ってください。

フローチャート書き方の注意

フローチャート(サイトの構成予定図)を書き完成させる。
※段組みレイアウト式のサイトを想定して作成する事。
段組みレイアウトのサンプル１　サンプル２　サンプル元

良くない例

↓

※フレームを使わないこと
(全てのページから全てのページへ移動できるサイトを作成する事)

サイトマップ とフローチャート(図形の意味) の機能をかねあわせたものを
illustratorデータで作成、
メールタイトルを「フローチャートー出席番号」とし
info@cid.jp.netへ送信する。(コレは１学期の提出物です)

　　　　サイトマップには色々な書き方がありますが　以下画像参照↓

サイトマップ とフローチャートの機能を兼ね備えたものをつくるので
完成の様子とリンクのつながり方がある程度分かる書き方で作成する事(↓例)

1学期 DTP 第５回 Capter05

教科書にはP.144にフォーマットデータを開くとあるが、
第４章で作成したデータと同じなので
自作の第４章完成データを元に第５章を作成すること。

よってテンプレートの元データはありません。

Links フォルダデータのダウンロード[50MB]
https://docs.google.com/file/d/0B-f8r3Tajvw7M1R0Z2pVeEVBZ2M/edit?usp=sharing 

05Elements フォルダデータのダウンロード[50MB]
 https://docs.google.com/file/d/0B-f8r3Tajvw7QWRkMnhGYkNUMTg/edit?usp=sharing
 

提出方法 
P.172のmemoにある
[パッケージの作成]と[PDFの作成]の２つの方法で保存書き出ししたデータを
一つのフォルダに入れて圧縮し、おくりん坊などで提出
(おくりん坊以外のオンラインストレージを利用して提出しても良い) 

info@cid.jp.netへ提出


モニターでの授業の教科書解説は[Chapter03]の途中(P.83〜)から行います。


■　DTP提出状況一覧表



---------以下、第５章を教科書通りにやってもうまく行かない部分の解説---------

04 見出しと本文を流し込もう
P.151の(4)(5)あたりでテキストが教科書通りに表示されなくなります。
(※表の元データを テキストエディタ で開くと、見えない余分な情報が追加されてしまい、改行が段落に変わってしまうようです。)

  
テキストエディタを使わずに、元データをブラウザで表示したものを元にコピーすると
この問題を回避できます　[ブラウザで表示したもの→] http://j.mp/13i8Z0H
 

---

06 テキストを流し込んでルビを付けよう
 P.4-5の説明(P.156〜159)のレイアウト全体像がわかりにくいので下記の画像を参照する事

---

09 表組を作成しよう
P.166の(2)、表の元データを テキストエディタ で開くと、
見えない余分な情報が追加されてしまい←(04の改行が段落に変わってしまうのはこれが原因)、
p.167(5)の段階で表が●だらけになってしまうので、
↓のデータを使う（●=文字あふれ=表のサイズに対して文字の空間が足りない状況）
http://j.mp/13i8Z0H


それでも●が出る場合は、表の場所のテキストエリア全体を選択し、
[オブジェクト]→[テキストフレームの設定]のウインドウを表示し、
[ベースラインオプション]のベースライングリッドにチェックを入れ、
グリッドの間隔の項目の数字を変更する。
本来は16Qで良いはずだが、4Q程度にすると文字がすべて表示される。

フローチャート

フローチャートの例

↓↓↓↓↓良くない例↓↓↓↓↓

メニューが全ページに無い

メニューが全ページに無い

メニューが全ページに無い

メニューが全ページに無い

メニューが全ページに無い

△メニューが全ページにあるがボタン位置が入れ替わっている

昨年までのWEB作品作成例
昨年　CSS+HTML+jQuery+Javascript

[良い例 テンプレートが作成されている]
http://parasite777.web.fc2.com/
[良い例 GIFアニメーションをTOPに・galleryにjQuery]
http://music.geocities.jp/vd7294b387505p/
[良い例 galleryにjQuery]

http://sky.geocities.jp/kounoren/index.html

[良い例 メニューにjava・galleryにjQuery]

http://allegro20.web.fc2.com/

http://kochijapanworld.web.fc2.com/

[よく見るとテンプレートが使い切れていない]
http://book.geocities.jp/olololo_22/

[サイト内の閲覧導線がわかりにくい／内容が作れていない]

http://guragurajyunko.web.fc2.com/

[テンプレートしか作れていない・ただしgalleryにjQuery]

http://nakibokuroooo.web.fc2.com/

２年前　CSS+HTML (スマホ対応を考えると全体的に画像表示が小さい)

[良くない例] フレームを使っている

[良くない例] すべてのページにメニューが無い

青いアンダーバーを消す方法

青いアンダーバーの正体は空白に貼られたリンクです。
メニューボタンの画像がくっついてしまう場合も同じ方法で直せます


<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navi01','','img/navi_home_on.png',1)"> 

<img src="img/navi_home.png" alt="ホーム" width="201" height="37" id="navi01" /></a>

 の部分に空白があります。

この空白を<a href= ~> 〜 </a>の外側へ移動する 
(※空白を消すとデザイン上の隙間がなくなってしまうので消さないこと)

移動例1
 <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navi01','','img/navi_home_on.png',1)"> 

<img src="img/navi_home.png" alt="ホーム" width="201" height="37" id="navi01" /></a>

移動例2

<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navi01','','img/navi_home_on.png',1)"> 

<img src="img/navi_home.png" alt="ホーム" width="201" height="37" id="navi01" /></a>

1学期 WEB 第９回 第９章--ショップ情報を学校の情報に変えよう

第９章・・・・ショップ情報ページを作成しよう

手違いでkadaisiteの中のabout.htmlがすでに完成してしまっています。
about2.htmlを作成し「ショップ情報」を「webページ作成者情報」とし、
下記情報と下記住所を使ったgoogle mapコードを組み込んだページを作成しましょう。

国際デザイン・ビューティカレッジ
〒780-0935 高知市旭町2-22-58
TEL.088-875-0099
FAX.088-875-3299

アクセス方法の項目は次の2行に書き換える

●JR旭駅より徒歩４分
●伊野ICより車で15分

P.122〜P.124までは全く同じ手順

変更箇所
「ショップ情報」を「webページ作成者情報」
「店舗情報」を「webページ作成拠点情報」
「アクセスマップ」はそのまま「アクセスマップ」
メールアドレスは「cidgd2@gmail.com」
営業時間と定休日は削除

●［mapのはりつけ方］

1.検索でgoogle mapへいく

2.住所を検索窓に打ち込む

3.検索ボタンをクリック

4.マイプレイスボタンの右にある鎖のマークをクリック

5.「埋め込み地図のカスタマイズとプレビュー」をクリック

6.カスタムを選択しサイズを横幅800px 高さ450pxに設定する

7.左下に出てくるコードをコピー

8.Dreamweaverのコードの該当場所にペーストする。

---

新しいGoogleマップにすでになっている人は
次のやり方でmapコードを埋め込む事が出来ます。
(1~3までは上の手順と同じ)
※同じパソコンを使っている誰かが
「新しいGoogleマップに切り替えますか？」という質問が出たときに「はい」を選択していると
すでに新しいGoogleマップに切り替わっています。

4.右下の黄色い人の隣に歯車のアイコンがあります。
それをクリックして

5.地図を埋め込みを選ぶ

6.はじめは「リンクを共有」になっているので
「地図を埋め込む」を選択

7.カスタムを選択し、サイズを800px×450pxにする。

8.その下に出てくるコードをコピーして
Dreamnweaverのmapの表示場所にペースト。

1学期 DTP 第４回 Chapter 04

[capter01〜03]がすでに完成している人は、Chapter04を教科書を見ながら作成して下さい。


[Chapter 04]
教科書P.125〜140の手順にそってマスターページを作成する。
(新規ファイル作成から全て自分でつくるため、元データはありません)

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

(.inddファイル1枚以外のデータは無いので充分メールで送れます。
／ムームーメールは10MB 、GメールやYahooメールは25MBまでは送信可能)



モニターでの授業の教科書解説は[Chapter02]の途中(P.72〜)から行います。


■　DTP提出状況一覧表