2016年12月13日火曜日

板書まとめ(10月以降〜最終授業)

板書まとめ(10月以降〜最終授業)



最終授業



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

テンプレートについての板書

必須条件
(※要注意※ footerの著作権表示はサイトの作品の作者の名前を入れること。
テンプレートをダウンロードしてきた時のままの表記にしていると、
テンプレートの作者がサイトの作品の作者になってしまいます。
テンプレートの作者の名前はCSS内などにも書いてあるのでfooter内から消してください)


最もよく使われる組み方


どういうテンプレートはダメなのかの例

良いテンプレートの例
(TOPページを他のページのレイアウトとは若干変える場合のパターンの例)



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

Dreamweaverの使い方がわからない
WEB素材の作り方で悩んで手が進まない
場合の作業の進め方


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

画像の上に画像を貼りたい場合についての板書


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

menu部分についての板書

メニューを画面の中央に配置したい


メニューを画面の中央に配置したい
{(liの横幅)×メニューの数}+(liとliの間と両サイドのすき間)＝ulの横幅 
※ulの横幅よりも中身の横幅の合計が大きいとメニューが２行になってしまいます。

 メニューの表示色の指定
(元の表示／オンマウス時の表示／訪問済みページの表示)
どれがどれかわからなくなったらこの↓css一覧で確認しましょう



メニューのコードの順序
と
実際の透明の箱(div / ul / li / a)の表示の関係


投稿者 時刻: 0 件のコメント:

2016年12月9日金曜日

12/09金　仕上げ作業 授業最終日

(21)11/11金 自分のサイトのindex.htmlの作成
(22)11/15火 自分のサイトのメニュー部分の作成  
(23)11/18金　仕上げ作業 テンプレート完成
(24)11/22火　仕上げ作業 メニューと各カテゴリー(コンテンツ)ページの完成 
(25)11/25金　仕上げ作業 jQueryを組み込み完成　
(26)11/29火　仕上げ作業 SNSやWEBツール等の埋め込み表示完成
(27)12/02金　仕上げ作業 作品集ページの完成1
(28)12/06火　仕上げ作業 作品集ページの完成2 
↑ ここまでは完了してない場合、
　急がないと追いつかなくなって完成できなくなってしまいます。


１２月

(29)12/09金　仕上げ作業 　← 今日 授業最終日です。

　今日までに出た質問で授業中に即解決できないものについては、メールで後日回答を行います。12/15の提出までに自力で解決できそうにない質問がある場合、本日の授業中に質問をしてください。


WEB確認用URL ---採点チェック

※最終の提出先(アップロード先)は忍者サーバです

忍者ホームページ 
01  02  03  04  05  06  07  08  09  10
11  12  13  14  15  16  17  18  19  20
21  22  23

----------------------------------------------------------------
最後に

他の表現系のデザインと異なり、WEBの場合は

　1.サイトが誰でも見て操作でき[機能]しなければならないこと
  (このような操作画面をUIと言い、操作のしやすさ説明の不要さ全てを含めてUIをデザインすることが必要です。
　　見る人は一般の人々で特殊な知識がないと見られないページではサイトが商用として告知能力があるものと言えません)
　2.画材に当たるものが[コード]であること
　　(Dreamweaverは最新版でも最新のコード全てに対応できる機能が備わっていません。
　　 使うデザイナーがそこを補正できるためには、結論としてコードを直に編集できる能力が必要となります)

から一定以上の知識と過去の経験のストックがないと、
短時間での突貫工事が効きません。

このことから現場では

計画的にスケジュールを自ら組み、
クライアント(依頼主)と間間の打ち合わせで確認をし
双方が同じ完成形態のイメージを共有しながら、作業を進めていくという
スケジュールの進行能力が必要となってきます。


何故フローチャートやラフが必要なのか
クライアントからの無茶ぶり名言集http://www.webcreatorbox.com/webinfo/clients-funny-requests/
頼む人にも見て欲しいデザインができるまでhttps://twitter.com/Mash_RD/status/262507498240634880/photo/1
クライアントよ、お前の依頼の大変さを思い知れ！これがデザイナーにとっての「デザイン修正」だ！http://gori.me/it/22125

投稿者 時刻: 0 件のコメント:

2016年12月6日火曜日

12/06火　仕上げ作業 作品集ページの完成2

(21)11/11金 自分のサイトのindex.htmlの作成
(22)11/15火 自分のサイトのメニュー部分の作成  
(23)11/18金　仕上げ作業 テンプレート完成
(24)11/22火　仕上げ作業 メニューと各カテゴリー(コンテンツ)ページの完成 
(25)11/25金　仕上げ作業 jQueryを組み込み完成　
(26)11/29火　仕上げ作業 SNSやWEBツール等の埋め込み表示完成
(27)12/02金　仕上げ作業 作品集ページの完成1

↑ ここまでは完了してない場合、
　急がないと追いつかなくなって完成できなくなってしまいます。


１２月
(28)12/06火　仕上げ作業 作品集ページの完成2 ← 今日

(29)12/09金　仕上げ作業 


WEB確認用URL ---採点チェック


webの表示が少しズレて動いて見える問題
デザインがページによって少しずれている？と感じたら！
http://books.rasen-d.net/web-template/tips/deviation-design-43.html
↑全部のページにスクロールバーを出してズレないようにする方法
(窓のような表示になる)
または、

本文の入っているdivボックスのheight(高さ)を一番長いページに合わせて、全てのページにスクロールバーが出るようにする。


※最終のアップロードは忍者サーバへ

忍者ホームページ 
01  02  03  04  05  06  07  08  09  10
11  12  13  14  15  16  17  18  19  20
21  22  23

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

instagramを自分のサイトに貼り付ける

・無料instagramブログパーツ作成　(<script>~</script>のコードを作成してくれるサイト。　　使い方のページには)各レンタルブログサービスに貼り付ける方法が説明されていますが、　　通常のhtml内にも貼り付けることができます。)　http://instawidget.net/?hl=ja

・WEBSTA Widgets for Instagramhttps://widgets.websta.me/SnapWidget。英語サイト。インスタグラムへのログインが必要

・SnapWidget | Instagram Widgethttps://snapwidget.com/WEBSTA Widget。日本語にも対応。ただしハッシュタグでの検索表示が不可能。

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

投稿者 時刻: 0 件のコメント:

2016年12月2日金曜日

12/02金　仕上げ作業 作品集ページの完成1

(21)11/11金 自分のサイトのindex.htmlの作成
(22)11/15火 自分のサイトのメニュー部分の作成  
(23)11/18金　仕上げ作業 テンプレート完成
(24)11/22火　仕上げ作業 メニューと各カテゴリー(コンテンツ)ページの完成 
(25)11/25金　仕上げ作業 jQueryを組み込み完成　
(26)11/29火　仕上げ作業 SNSやWEBツール等の埋め込み表示完成
↑ ここまでは完了してない場合、
　急がないと追いつかなくなって完成できなくなってしまいます。


１２月
(27)12/02金　仕上げ作業 作品集ページの完成1← 今日
(28)12/06火　仕上げ作業 作品集ページの完成2

(29)12/09金　仕上げ作業 ※最終のアップロードは忍者サーバへ

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

メニューの部分を
フラットデザインでもただのベタ塗りにしないで美しくデザインされたものとして見せるには。
CSSでもphotoshopなどで加工したボタンのように細かい見せられる方法がたくさんあります。


動きを加えることもできます。
投稿者 時刻: 0 件のコメント:
登録: コメント (Atom)