2014年10月24日金曜日

テンプレートとはそもそも何か？


テンプレートとは？ WEB Dreamweaver

テンプレートとは？　←　クリックでwikipedia[webテンプレート]へジャンプ

Webテンプレート（ウェブテンプレート）は、ウェブデザインにおいてコンテンツと見た目を分離し、Webドキュメントを大量生産するためのツールである。Webテンプレートシステムの基本概念である。Webデザインテンプレート、ホームページテンプレートとも。Webテンプレートはどんなタイプのウェブサイトでも使える。簡単に言えば、Webテンプレートはウェブサイト設定時のテンプレートである。

無料配布されているテンプレートを紹介しているサイト


http://tempnate.com/smartphone/
↑
このタイプのスマホ専用テンプレートを使う場合は、
[このコードを]userAgent.jsという名前で新規ファイルを作成して保存しindex.htmlと同じ場所へアップロードして
index.htmlのhead内に
<script type="text/javascript" src="userAgent.js"></script>
と一行入れる。と、見ている人のブラウザがPCかスマホかによって分岐自動転送されます。
参照：http://www.html5-memo.com/css3/pc_bunki/

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

2014年10月21日火曜日

「ラフとサムネール／プランシート」は現場でどう役立つのか？


新人Webデザイナーにありがちな５つのコミュニケーショントラブルとその解消法


フリーランス（デザイナーやプログラマー）の働き方について考えてみた
フリーランスのデザイナーが捨て駒にならないようにする為の方法

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

InDesignでの雑誌のテンプレートの作り方


テンプレートの作り方 (InDesign)
1.まず新規ファイルを
[ドキュメント]を選択して作成する



2.ノド小口天地を3mmに設定する。


3.1ページ目が自動的にできる
4.見開きのページ用のマスターを作る(教科書参照)

5.雑誌のレイアウト3ページ分のデータを作成し、完成する



トンボや印刷マークの設定
http://helpx.adobe.com/jp/indesign/kb/2625.html

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







または、2+3ページを1枚としてA3の用紙に縮小して出力する↓








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

記号と校正記号

校正記号について(wikipedia)

印刷物の校正や手書きの原稿の組版指定などを行う場合に使用する記号である。
JISのJIS Z 8208により規定されている。 


<校正記号表>

校正記号表　http://www.erc-books.com/ERC/How/H2-List.html
校正記号表　http://www.amudesu.co.jp/proof.pdf
印刷ミニ知識 校正記号http://ns.onoprint.jp/ols/page/wp0/wp27/

校正記号これだけ知ってると大丈夫---あいわプリント

校正の流れ　http://www.japanlink.co.jp/dtpjiten/pdf/pdf20.pdf


 実際に一度校正を実践してみましょう。


 Q: 上の文章が下記の文字の並びになるように、校正記号を使って校正を行いなさい。




[修正例]
投稿者 時刻: 0 件のコメント:
ラベル:

2014年10月20日月曜日

jQueryを組み込む


 jQueryを組み込む(例: lightbox)


SNSなどの外部ツールを組み込む




 ----------------------------------------------------------------------------
[自分のサイトを作成する]で最低限実装してクリアするべきチェック項目 

1.indexがあるか
2.menuバーがあるか 
3.テンプレートにmenuが組み込まれているか 
4.基本のテンプレートデザインを完成する 
(※ 段組みレイアウトになっていること！／フレームは×) 

5.CSSを書き出す
※<head>~</head>内に <style type="text/css">〜</style>が 全ページに同じ内容がある場合は×
↓ この方法で外部.cssファイルを作成してリンクする
6. 4を複製して各コンテンツを作成する 

7.オリジナリティのあるサイトを作成し完成する 
オリジナリティ？
＝以下のうちのどれかの条件を盛り込んであるか、画像パーツを工夫して作成しているかなど

★ツールを組み込んでより高度なサイト作成を行う
★画像の多いサイトを作成する場合lightboxやwebフォトギャラリーを使う 
★SNSを外部表示するjsツールを使用する 
★オンラインジェネレーターを使用する 

作例：■  ■  ■  ■  ■　／　■　■


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

lightboxの設置の仕方




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

SNSなどの外部ツールを組み込む

SNSなどの外部ツールを組み込む

2.完成したテンプレートをコピーして本文(コンテンツ)に各ページ内容を作成して行く

3.その１つに各SNSのページを作成する。

[参照]　http://ateitexe.com/web/twitter-widgets-customize/

1.自分のtwitterにログインし、右上の歯車のマークから「設定」を選ぶ。

2.左の欄の一番下の項目の「ウィジェット」を選択

3.右上の「新規作成」のボタンをクリック

4.検索クエリの窓に自分のサイトに合うワードを入れる。

5.右下に出てくるコードをコピーしてサイト内の表示したい場所にペーストする。
(index.htmlが完成している人は、index.htmlをコピーしてsns.htmlまたはtwitter.htmlという名前で保存し、sns.htmlの本文の部分にペーストする。)
----------------------------------------------------------------------

 例) 自分のtwitterを持っている場合は自分のtwitterを表示してみましょう。


1.自分のtwitterにログインし、右上の歯車のマークから「設定」を選ぶ。

2.左の欄の一番下の項目の「ウィジェット」を選択

3.右上の「新規作成」のボタンをクリック

4.ユーザー名を入れて「ウィジェットを作成」のボタンをクリック
5.右下に出てくるコードをコピーしてHTMLの表示したい場所にペーストする。

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

Facebook の組み込み
　2種類埋め込むコードが出てくる事が多いので若干複雑

個人ページのバッジの埋め込み
https://www.facebook.com/badges/
http://ameblo.jp/7natsu5/entry-11344350567.html

Social plugin
http://developers.facebook.com/docs/plugins/

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

 youtubeの組み込み
サイトに埋め込みたいyoutubeのページを表示している時に
右下の「共有」をクリック→下に出てくる「埋め込みコード」をクリック




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

2014年10月17日金曜日

コメントアウト

コメントアウト

タグにメモを残して他の人にもコードをわかりやすくする事が出来ます。
自分でわからなくなったときの整頓にも使えます。




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

WEB用のフリー素材の探し方

[WEB用のフリー素材の探し方]
web free フリー素材　などで検索して、素材集配布のサイトを見つけ、
そのサイト内を検索する。
(検索エンジンの画像検索などでフリーではない画像を勝手に取って来て使わないこと)

WEBデザイン用フリー素材まとめのまとめ
（素材探しがめんどくさい人向け ...


素材屋・HP素材のおすそわけ。
著作権フリーのweb素材屋


WEBデザイナーが作った超シンプル素材集 

フリー素材「blue-green」 - シンプルかわいいWEB用フリー素材 ...


メニュー画像を下揃えにする

(何も指定しないと左上ぞろえになるor真ん中でそろってしまう時の対処法)
http://2010yoko14145.web.fc2.com/menu1108.html


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

スタイルシート3種類の記述の使い分け



1.外部スタイルシート

HTMLからCSSファイルを呼び出す方法

CSSファイルをHTMLファイル内で呼び出す方法を紹介する。
CSSファイルの呼び出しは<head></head>内に記述する。

CSSファイルの呼び出し – HTMLファイル

<title>タイトル</title>
<link rel=”stylesheet” href=”CSSファイルへのパス” type=”text/css” />
</head>
CSSファイルへのパスは相対パス、絶対パスのどちらでも良い。

2.head要素のスタイルシート
headタグ内への記述
headタグ内への記述は以下の通り。今回h1タグに対して、margin:0（余白ゼロ）
とfont-size:3em（文字の大きさを3emにする）のスタイル指定をする。

head内でのCSSの記述例 – HTMLファイル

<head>
<title>タイトル</title>
<style type=”text/css”>
h1 {
margin: 0;
font-size: 3em;
}
</style>
</head>
この記述方法のデメリットとして、まず、SEOの効果が下がる事が挙げられる。これは、CSSファイルを呼び出す方法と比べてbodyタグの位置が下に来るからである。詳しくは関連記事を参考にしていただきたい。
他にも、「1つのファイルが長くなるため単純に見づらいコードになる」、「それぞれのHTMLファイルにいちいち記述しなければならない」などのデメリットが挙げられる。

3.インラインスタイルシート
それぞれの要素に対するスタイル指定

今回は特定のpタグに対してcolor: red（文字色を赤）とfont-size: 20px（文字の大きさを20pxにする）のスタイル指定をする。

特定のpタグに対するCSSの記述例 – HTMLファイル

<p style=”color: red; font-size: 20px;”>
このpタグに対してスタイルを指定する。
</p>
この記述方法のデメリットとして、
「全てのpタグに手動で書かなければならず、変更の際に面倒」
「コードが見づらくなる」などが挙げられる。
できる限りHTMLからCSSファイルを呼び出した方が良いだろう。





スタイルシート3種類の適用方法の練習

サンプル(回答例)
http://www.geocities.jp/cid2013/styletest.html
http://www.geocities.jp/cid2013/styletest.css



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>スタイルシート３種類の適用方法</title>
</head>

<body>
<div align="center" id="ichi">
  <p><br /> 
    <br /> 
    <br />
    <font size="18px">この文字を外部スタイルシートで#ff0000の色にせよ。</font></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div align="center">
  <p><br /> 
    <br /> 
    <br />
    <font size="18px">この文字をhead要素のスタイルシートで#00ff00の色にせよ。</font></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div><div align="center">
  <p><br /> 
    <br /> 
    <br />
    <font size="18px">この文字をインラインスタイルシートで#0000ffの色にせよ。</font></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</body>
</html>
投稿者 時刻: 2 件のコメント:
ラベル:
登録: コメント (Atom)