スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

PHPとは(開発環境のセットアップに必要なもの )Part1

PHP関連の記事ははじめてになるので、基本部分をおさえておきます。
PHPとは、という所からなるべく簡素にまとめてみました。

PHPとはWEB開発など世界で幅広く使用されているオープンソースの汎用スクリプト
プログラム言語です。
ApacheなどのWebサーバと連携する事で、動的にHTMLデータを生成し
動的なWEBページを実現します。

■PHPの特徴
・他のプログラム言語と比べて習得が容易
・コンパイル不要
・記述はテキストベース
・数多くのデータベースをサポート
 Oracle、SQL Server、MySQL、PostgreSQL、Infoemixなど
・数多くのOSに対応
 Windows、Linux、Macinoshなど
・世界中で使用されている為、ネットでの情報が豊富


■PHPが主に使われているWEBシステム例
・予約システム
・求人、求職サイトシステム
・グループウェア
など

dreamweaverユーザー向け
■PHP開発環境のセットアップに必要なもの
・WEBサーバ(Apache,IISなど)
・PHP
・MySQL

PHP開発環境のセットアップに関しては次回詳細を説明をしてきます。
スポンサーサイト

IllustratorCCで円の下半分を描く

円の下半分を描きます。

イメージとしては、円を作成して上半分を切り取る感じです。

まずは、円と 円の直径と同じが少し長めの直線を作成します。



二つのオブジェクトを選択し、整列パネル(ウィンドウ - 整列)の

「垂直方向中央に整列」を選択します。


円の真ん中に直線が並びます。

続いて、円と直線が選択された状態で

パスファインダーパネル(ウィンドウ - パスファインダー)の分割を選択します。


オブジェクトを右クリックして、グループ解除を選択します。


これで、円の上半分と下半分が別々のオブジェクトになりますので、

選択ツールで切り離す事ができます。


ここで下半分の上部にあたる線を削除します。

ダイレクト選択ツールに切り替えて、上の線を選択しDELETEボタンを押します。


これで円の下半分のみになりました。

半円のパス上沿いに文字を並べる

円のパス上に沿って文字を入れます。

通常は円の上部に沿って文字を入れますが、

今回は下部の円上に文字を入れてみようと思います。

まずは楕円形ツールを使用し、円を描きます。

そのあと、パス上文字ツールを選択します。
20131026_9.jpg

円の左側適当な箇所をクリックし文字を入力していきます。

円上に沿って文字が入りました。

続いて、選択ツールにして文字の最後の方にある境界線の様な線をドラッグし

円の内側でドロップアウトします。

すると文字も内側に移動しました。


20131026_10.jpg

直感的に操作できる所がいいですね。

この機能を使用して、試しに制作した画像です。

greensavetheworld.png




GoogleMapを使用し目的の地図を埋め込む

企業やお店等のホームページで必ずと言っていいほどある地図の埋め込み

Google Mapでは埋込み用のコードがすぐに作成できるため便利です。

1.GoogleMapにて表示させたい会社やお店の住所を打ち込み、目的の地図を表示させます。

  
2.左メニューの右上にある鎖のようなマークをクリックすると

  ウェブサイトへの地図埋め込み用 HTML コードが表示されます。
 
201310252.jpg

「埋め込み地図のカスタマイズとプレビュー」 を選択し、表示させたい地図を大きさを設定します。

大・中・小の他、カスタムを選択し幅、高さを数値で入力する事も可能です。

一番下にHTMLコードが作成されているので、それをコピー&ペーストすれば完成です。

小サイズで作成したものを以下に貼り付けております。


大きな地図で見る

CTLボタンを使用しオブジェクトの前面、背面を切り替える

オブジェクトをひとつ背面に、前面にという操作は、

オブジェクトを選択して、右クリック後に「重ね順」を選び

最全面、前面、背面、最背面と選択できますが、

ctl + ]   前面へ
ctl + [   背面へ

という操作でもできます。

こちらの方が、早くて簡単ですね。

これはフォトショップと操作が共通という事も覚えておきたいです。

水滴(雫)が付いた葉をIllustratorで立体的に描く

PR >PC1台で月20万稼ぐ方法がやっとわかりました。



今回はIllustratorで基本的な葉を描いてみようと思います。

ただの葉では芸がないので、雫がついている瑞々しい葉を立体的に描こうと思います。
20131020_1.jpg

まずはペンツールにて下図の様な葉を描きます。
真ん中の線を引くことにより上下の葉を分割します。
パスファインダーパネルで分割ボタンを押します。
そのあと、グループ化を解除します。


20131020_1.jpg

二つのオブジェクトに分割された所で、グラデーションを書くオブジェクトにて行います。
光の反射を葉の上部に追加し、立体的にします。
20131020_1.jpg

20131020_1.jpg

さらに茎も追加していきます。
20131020_1.jpg

ここからが、今回のポイントの雫部分です。
雫は下図の左側にあるように、
1.まず楕円を描き、葉の濃い部分と同じ色にします。
2.次に作成した楕円より少し小さめの楕円を作成し、右側が白に近くなるようにグラデーションで色付けします。
3.二つの楕円を重ねて下側に濃い緑が少し出るように重ね合わせます。
4.二番目に作成したグラデーションの楕円をコピー(二つ)しグラデーションを逆にする(もしくは図形を回転させる)
 その楕円を縮小する。大きさは下図を参照
5.コピーした二つの楕円を下図の様に配置すれば水滴の完成

20131020_1.jpg

今回この葉を作成するにあたり、下記のサイトを参考にさせてもらいました。
このサイトの完成図より完成度は低いですが(汗)
なんとか形にはなったと思います。
vector.tutsplus.com



動画(YOUTUBE)の埋め込み

商品の紹介や開催されたイベントの様子など、企業のアピール等でも
最近は動画を使用する場合が多々あると思います。

サイトに簡単に動画を埋め込み(貼り付け)する事ができるので
今日はYouTube動画を埋め込んでみましょう。

まずはYouTubeのサイトで目的の動画を選びます。
動画の画面で右クリックをして”埋め込みコードをコピー”を選択します。
20131016.jpg


あとは、貼り付けたい場所にコピーしたコードを貼り付けるだけです。

貼り付ける際、表示の大きさを調節しましょう。

デフォルトでは、
width="640" height="360"
となっていると思いますので
ちょうど良いサイズに変更してみてください。
サイズは半分の 
width="320" height="180"に変更して
実際に表示させたのが、以下の通りです。




リンクの色を変える(全体・一箇所)

リンクを設定する際に気になるのが、リンクの色です。

デフォルトは青色で
訪問済みサイトの場合は紫色ですね。
サイトによっては見づらくなりますので、CSSで色を変更してみましょう。

リンクの色は訪問済み以外にも
マウスオーバー時やクリック時など4パターンに分類できます。
a要素にこのプロパティを設定する事でリンクの色を変更できます。

通常時
a:link { color: #0000ff; }

訪問済み
a:visited { color: #000080; }

マウスオーバー時
a:hover { color: #ff0000; }

クリック時
a:active { color: #ff8000; }

サイト全体をこのリンク色で統一する場合は良いのですが、
一箇所だけ別の色にしたい場合は
HTMLのコードに直接指定してあげれば良いと思います。

<a href="http://www.xxx/" target="_blank"><font color="#FFF571">YAHOO!</font></a>
上記の場合、マウスオーバー時やクリック時に色は変わりません。

[リンクの色を変える(全体・一箇所)]の続きを読む

マウスオーバー時に画像を切り替える2

サムネイルのような小さな画像を3つ並べて、

画像にマウスを合わせた時に大きな画像として一箇所に表示するように設定します。

1.まずは小さな画像3枚と大きな画像1枚を貼り付けます。

ソースの例は以下のとおり


  <p><img src="images/onsen.jpg" width="580" height="386" alt="温泉" /></p>
 
  <p>
  <img src="images/onsen.jpg" width="100" height="77" alt="温泉" />
  <img src="images/himawari.jpg" width="100" height="77" alt="ひまわり" />
  <img src="images/ichigo.jpg" width="100" height="77" alt="いちご" />
 </p>


2.大きな画像の方を選択したらプロパティのIDに「change1」を入力します。
  これで、大きな画像のIDがchange1になりました。

3.小さな画像の方を選択したら、メニューのウィンドウからビヘイビアーを選択し、+マークをクリックしたら 「スワップイメージ」を選択します。

  先ほどID登録した イメージ "change1"を選択し、ソースの設定欄に実際に大きく表示させたい画像のURLを入力
  もしくは「参照」から選択します。
 
  3.の作業を他の2つの画像に対しても行います。

 20131010_20131010221958f0a.jpg

最終的なソースは以下になりました。

  <p><img src="images/onsen.jpg" alt="温泉" name="change1" width="580" height="386" id="change1" /></p>
  <br />
  <p>
  <img src="images/onsen.jpg" alt="温泉" width="100" height="77" onmouseover="MM_swapImage('change1','','images/onsen.jpg',1)" onmouseout="MM_swapImgRestore()" />
  <img src="images/himawari.jpg" alt="ひまわり" width="100" height="77" onmouseover="MM_swapImage('change1','','images/himawari.jpg',1)" onmouseout="MM_swapImgRestore()" />
  <img src="images/ichigo.jpg" alt="いちご" width="100" height="77" onmouseover="MM_swapImage('change1','','images/ichigo.jpg',1)" onmouseout="MM_swapImgRestore()" />
  </p>
 


マウスオーバー時に画像を切り替える「ロールオーバー」

いろいろなサイトでよく見かけるのが、

画像やメニューなどでマウスオーバー時に、画像が切り替わったり色が少し変わったりするものです。

実際javascriptでfunctionを作成するのですが、操作としてはjavascriptを知らなくても簡単にできてしまいます。

まず、挿入パネルの”イメージ”の文字の左側にある逆三角形をクリックし、ロールオーバーイメージを選択します。

ロールオーバーイメージの挿入画面で

マウスオーバー時以外の時に表示している画像を ”元イメージ”で選択
マウスオーバー時に表示する画像を”ロールオーバーイメージ”で選択

20131008.jpg 

OKを押せば完成。

実際にjavascriptを記述していないが、htmlを見てみると以下のコードが自動生成されている。

■SCRIPTはここから

<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>


■通常htmlコード (一部抜粋)
<p><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/c2.jpg',1)"><img src="images/c1.jpg" alt="roll" width="160" height="108" id="Image1"></a></p>

よく使うコードは「スペニットの登録」

よく使うコードは記憶しておいて必要の時にすぐ呼び出せたら便利ですよね。

繰り返し使うコードを「スペニット」として登録しておく事で 
スピーディにコードを挿入する事が可能になります。

登録したいソースコードを選択して右クリック→ 「新規スペニットの作成」を選択
(スペニットが見つからない場合は、メニューのウィンドウから表示させて下さい)

わかりやすいように名前をつけて 

ブロックの挿入にチェックをつけてokで登録



スペニットパネルに登録されるので、

呼び出すときは、スペニットパネルから登録した名前のスペニットを選択して

下の挿入ボタンを押すと挿入されます。



ドラッグでの挿入もできます。

サイト全体を中央に表示させる

サイト全体を中央寄せする場合は、サイト全体を囲んでいるDIVタグに対して中央揃えをしてあげれば良いです。

例えば下記コードのように全体をwrapperという名前のDIVタグで囲んでいる場合
(囲んでいいない場合はbodyでも可)

<body>
<div id="wrapper">"Wrapper" 
  <div id="header">"header"</div>
  <div class="menu">"menu"</div>
  <div id="main">"main"</div>
  <div id="footer">"footer"</div>
</div>
</body>

wrapperに対するCSSを下記のように設定します。
(余分なコードは省いてあります)

左右のマージンをautoにする。
#wrapper {
 margin-right: auto;
 margin-left: auto;
}

これでサイト全体が中央寄せされます。


WEBページで使用できる画像

WEbページでは一般的にGIF形式、JPEG形式 PNG形式を使用します。

GIF形式
 8bit 256色 透過○
 表示できる色数256色 
 アニメーション可能
 文字がぼやけにくく、ロゴやイラストなどで色数をあまり必要としないものに
 使用するのに良い。

JPEG形式
 24bit 1670万色 
 フルカラーなので、写真やグラデーションに使用。
 文字はぼやけてしまうのでロゴやイラストには向かない。
 圧縮率に応じてサイズを大きくしたり小さくしたりできる。

PNG形式 最大 280兆色以上 透過○ 
 jpegよりファイルサイズが大きく 多い色数で表現できる。
 透明度を利用した画像ができる
 インデックスカラー(256色)を扱う「PNG-8」フルカラーを扱う「PNG-24」がある

スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。