デザインの学校 ウェブデザイン 実戦編 第3回

ウェブデザイン実戦編は、もう第3回目です。
一週空けごとの授業なので、記憶が・・・って、感じですがっ!
今日も、前回の分より何倍も張り切っていきたいと思います。
では、では、*ウェブデザイン実戦編 第3回目開始*~!!
今日習ったことを早速おさらいして行きましょう
.html.aspx の違い
.aspxとは、javascriptやCGIなど活かす時に
使うことができます。
.htmlでは、フラッシュやjavascriptくらいの動きしか
だせないみたいで、.htmlから.aspxに保存し直すことが
できないみたいので、あえて最初から作らないとならないのです。
CGIによって
よくサイトで見る最新トピックや数のカウント・件数の変化・
アフィリエートなどの動きをだすのです。
そして、
情報サイトとかでよく見るイベントカレンダーとかもその1つですが、
イベントカレンダーは、フレーム内に入れ込みカレンダー内のページに
飛べるようにする形にです。
フレーム内に入れることによって、自由がきき、
共有化するこができるので、いろんな人が見ることができ、
活用でき、情報もいろんな面から入力ができることができるのです。
といことで・・・
今日はそんなイベントカレンダーのスタイルを変更しました。
スタイルで、がっちり固めたカレンダーの色を青から赤系にチェンジ
平日・土・日と曜日、日と色を分けてあり、
セル、リンクと1つ1つスタイルが当てられています。
テーブル中にテーブルで、カレンダーを作りあげます。
イベントカレンダー
たくさんのスタイルがあって、探しあてるのが大変でした。
ここまで、スタイルシートに触れればスタイルシートをマスターできる??
スタイルシート、CGIを理解したうえで
今度は、実際に情報を入力側に
練習で、入力したのはイベントカレンダーではなく、
不動産を登録です。
これも、イベントカレンダーと同様でCGIを使われています。
管理画面によって情報を入力し、登録することでサイトに更新されます。
実際に、物件を登録したら実施に更新されてるかを確認します。
そして、フォームで作された資料請求ページ内では、資料請求した内容も管理画面に反映され、
確認できるようになっており、返事を返せるようになっています。
そして、ここで請求された内容も管理画面だけじゃなく
FAXにて送信されるように設定
InterFAXにてCMSで、
データーをFAXに送られるようにできるようにされています。
今日は、専門用語がたくさんでていて難しいと思いました。
これは、復習が必要がかもしれませんね。

 

WEB(ホームページ)デザイン上級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

デザインの学校 ウェブデザイン 実戦編 第2回

台風一過の後、天気の良い気持ちの良い日が続きましたね。
みなさんどのようにお過ごしですか?
わたしの連休第一日目は、ウェブデザインスタジオ山梨 実践編第二回目でお勉強の一日でした
週末は眠気も貯まり、なかなか勉強内容の記憶も怪しいですがここでおさらいしたいと思います。
では、行きましょー
今日は、ほぼ講義形式で。
(1)CMS(コンテンツ・マネージメント・システム)
(2)CSSでHTMLをわかりやすく短く
(3)PDFについて
こんな内容をしました。
まずは、CMS(Contents Management System)から。
CMSは、コンテンツ管理システムとも言います。
その名の通り、コンテンツを管理するシステムです。
HTMLの編集は、それなりに知識がないとできません。
そういう理由もあり、本格的に、しかもきれいなサイトの制作を目指すなら、外部のデザイナーさんに依頼するケースが多いのでは、と思います。
でも、いざ出来上がったとき、その編集するのって誰でしょう?
せっかく出来上がったサイトを自分の手で管理したい!
情報更新したい!と思う、依頼主さんにとっての必需システム
それがコンテンツ管理システムなのです
本来ならテキストや画像の更新作業は、直接HTMLを編集して行われるものですが、そうすると知識のない人が触ればデザインが崩れたり、見れなくなったりなどのトラブルを起こす可能性があります。
そんなときに、PHPやPERLなどの言語を使用してつくられているCMSは、デザインに変更を加えず、テキストや画像だけなど、任意の部分に変更を加えられるのです。
これまでの説明でもピンと来なかった方。
皆さんの身近にもCMSがたくさんあるんですよ。
例えば、ブログや最近人気のmixiなどならみなさんもご存知ではないでしょうか。
ああいうのもCMSっていうものなんです
利用されたことのある人は、すぐにわかっていただけたかと思います
次に、CSS
カスケーディング・スタイル・シート( Cascading Style Sheets )は、以前にも応用編でお伝えしました
詳しくは、6/12のWDS応用編を見てみてください★
前回は、特にフォントタグの代替としてのCSSをお伝えしましたが、今回はもっともっと違う部分でHTMLをコンパクトにするCSS利用法・CSSのメリットについてお伝えします。
まず、前回お伝えしなかったCSSのメリット!
CSSの仕組みは、例えば文字の大きさや色、余白や字間、その他の設定などを単一のhtml内部、もしくは外部のCSSファイルに一回定義しておけば、あとは
<span class="pink">スタイルシート適用して~(-人-)</span>
スタイルシート適用して~(-人-)
というように、クラスの指定をするだけで、要所要所でその必要な設定を呼び出し、再現することが可能というモノ。
簡単に言うと、例えば同じクラスを70箇所、200箇所とどれだけの数定義していても、単一のhtml内部、もしくは外部のCSSファイルにある、文字の大きさ~もろもろの詳細を指定している部分、その部分一カ所に、一度変更を加えるだけで、スタイル・クラスの指定をしている箇所全体にその変更が反映されるということなのです
一回で全体に!って考えると、作業効率もかなりいいですよね。
しかも、CSSは文字だけでなく、その他の見え方も指定することが可能です。
例えば、バナー下に5pxの余白を設けたり、背景の画像を指定したり、h2などの既存のタグの再定義ができたりと、とにかく大活躍!
そういった指定をhtml内でなく、外部のCSSファイルに記述することで、テーブルタグや、位置指定、幅・高さ指定などのhtml内の記述を削減することが可能なのです

例えば、このようにバナーを配置するにも…
いままでなら、こう作っていました↓が
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#"><img src="images/banner_1.jpg" width="210" height="65" border="0" /></a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td><a href="http://iooo.weblike.jp/adb/" target="_blank"><img src="images/banner_2.jpg" width="210" height="65" border="0" /></a></td>
</tr>
</table>
  

CSSを上手に活用すればこんな風にシンプルになります!!
ただdivタグで囲むだけ
かつしかも間のスペースは1px単位で指定が可能になるのです
<div class="banner-contents"><a href="#"><img src="images/banner_1.jpg" width="210" height="65" border="0" /></a></div>
<div class="banner-contents"><a href="#"><img src="images/banner_2.jpg" width="210" height="65" border="0" /></a></div>
例えば、バナーならこのスタイル・クラスって決めておけば、デザインにも統一性が出て美しいです。
よりプロっぽいホームページサイトづくりができること間違いなし!
しかも、htmlをシンプルにすることでSEO的にも、よりロボットの巡回しやすい環境ができあがるのです
素晴らしいですね、CSSって
そして、最後にPDFについて。
PDFって皆さんご存知でしょうか?
日頃、インターネットというものに触れている方々ならば、いろんなところで目にするのではないでしょうか
でもPDFがどんなものか、ご存知ですか?
ということで、まずは解説。
PDFは、別名Portable Document Formatと言って、アドビシステムズ社社の開発したフォーマットです。
一般的には、PDFの作成にはAcribat、印刷や表示にはAdobe ReaderというそれぞれAdobe社の提供するソフトが必要となります。
Adobe Readerは無料で入手できるというところが良いですね
このPDFのすごいところは、作成したドキュメントを環境の違うコンピュータでも、元のレイアウトどおりに、表示・印刷ができるところ。
パソコンを触っていて、パソコン間の見え方の違いって、気になります。
サイトも動き方・見え方に、色々と差が出てしまう中、PDFはみんなが同じ見え方で見えるフォーマットなのです
しかも、Acrobatというソフトを使ってPDF編集する時には、セキュリティの設定も可能!
そのPDFファイルをどこまで変更可能にするかが設定でき、中身の変更許可から、印刷の可・不可まで、高度なセキュリティの設定が可能です
他にも、PDFを開いた時に、どんな状態で開くかの設定もできるんです。
等倍表示や、その他縮小表示などなど。
その中でも、相手の環境を選ばない表示方法はウィンドウサイズに合わせて100%になる開き方ですね
こうして全体が表示されている状態であれば、後はみなさんお好みで読みたい場所をアップで表示したり、例え解像度の低いモニタでも問題なく全容が見れます。
また、しおりなどの機能もあり、利用しやすくなっています。
画面で見づらい場合にも、印刷が簡単にできるところも嬉しいですね★
こんな感じで今回は終了
書き出すと、ほんとはアレもコレもでなかなか終れなくなってしまいそうで怖いですね
でもいかにも実践編!
この世界を目指す方にとっては、充実した内容となっているのではないでしょうか。
そんなクリエイター系職種を希望する方に朗報です。
今、WDSのサイト内で求人募集しています。
やる気のある方・気になる方見てみてはいかがでしょうか?
では、また再来週~

 

WEB(ホームページ)デザイン上級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

デザインの学校 ウェブデザイン 実戦編 第1回

さぁ!ついに今日から、ウェブデザインスタジオ山梨の実戦編が始まります!
受講生のみなさんは、すでにいくつかサイトの制作もしているデザイナーさんやイラストレーターさんばかり
なので、実戦編では、仕事にすぐ役立つ内容をお勉強しちゃうんです
その分、専門的だったり難しかったりで上手くお伝えすることができないかもですが、おつきあいよろしくお願いします
さて、今日はHTMLの組み方についてです。 
ウェブには数多くのサイトが存在するわけですが、例えレイアウトがとても似ていても、その組み立て方法が同じとは限りません。
どう組み立ててあると、後で編集しやすいのか、とか、どこまでHTMLをシンプルにできるのか、など色んな観点でのHTMLの組み方があると思います。
例えば、テーブルなどは編集しやすさ・シンプルさの両方の観点から、幅などの数値を指定しないほうがより編集しやすく、かつシンプルと言えます。
また、同じ数値の入力でも%の指定の方がより柔軟であるということは、わかっていただけるのでしょうか?
という感じで。
今回は、手元にある我らがウェブデザインスタジオの現行のサイトの一部を使って、HTMLの組み方を考えました
実戦編に至るまでの間に、ウェブサイトをつくるのに必要な基礎的知識を学び、デモンストレーション的にHTMLを記述してきました。
でも、やっぱり練習と実戦は別物
やっぱり現場のHTMLを触らなきゃ始まりませんね!
ではでは行きましょー
今回特にやったのはサイトのこの部分
    ↓↓↓
≪ Befoer ≫

≪ After ≫

下がソースコードです。
変わっているところわかりますか??
≪ Befoer ≫
<table width="315" height="300" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="#E4E4E4">
<tr>
<td height="22" valign="top"><img src="images/top_class_web_basic.gif" alt="WEB DESIGN – ウェブデザイン [ 基礎 ]" width="315" height="22"></td>
</tr>
<tr>
<td><table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="300" align="center" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="100" height="125" align="left"><a href="design_basic.html"><img src="images/top_photo_basic.jpg" width="100" height="125" border="0"></a></td>
<td width="10" height="125">&nbsp;</td>
<td width="190" height="125"><font size="-3"><a href="design_basic.html"><strong class="font-txt-3">WEB デザイン [ 基礎編 ]</strong></a><br>
<a href="design_basic.html"><img src="images/arrow_detail.gif" alt="WEB DESIGN [ 基礎編 ] 詳細" width="100" height="20" vspace="5" border="0"></a><br>
Webサイト構築講座 初心者クラス。<br>
Webデザインツールの業界標準となるDreamweaver、Fireworks、Illustrator、Photoshopの操作・機能を中心に学ぶ。制作現場で最初に必要とされる基本的な制作知識・スキルを習得する。</font></td>
</tr>
<tr>
<td height="1" colspan="3" align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td height="120" colspan="3" align="left" valign="middle" bgcolor="344628">
<table width="300" height="120" align="center" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF">
<tr>
<td bgcolor="#FFFFFF"><table width="278" height="99" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="13" bgcolor="9195A2"><img src="images/top_contents_level.gif" width="97" height="17"></td>
</tr>
<tr>
<td height="20"><font size="-4">全くの初めての方/趣味として始めたい方</font></td>
</tr>
<tr>
<td height="13" bgcolor="9195A2"><img src="images/top_contents_charge.gif" width="97" height="17"></td>
</tr>
<tr>
<td height="20"><font size="-4">[入]
21,000円 [受] 105,000円</font></td>
</tr>
<tr>
<td height="13" bgcolor="9195A2"><img src="images/top_contents_lesson.gif" width="97" height="17"></td>
</tr>
<tr>
<td height="20"><font size="-4">1.5ヵ月,10回,3時間/回
【 全30時間 】</font></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
≪ After ≫
<table width="315" border="0" cellpadding="0" cellspacing="0" bgcolor="#E4E4E4">
<tr>
<td height="22" valign="top"><img src="images/top_class_web_basic.gif" alt="WEB DESIGN – ウェブデザイン [ 基礎 ]" width="315" height="22"></td>
</tr>
<tr>
<td valign="top"><table width="100%" border="0" cellpadding="10" cellspacing="0">
<tr>
<td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="100"><a href="design_basic.html"><img src="images/top_photo_basic.jpg" width="100" height="125" border="0"></a></td>
<td width="10">&nbsp;</td>
<td><a href="design_basic.html"><strong class="top-txt-class">WEB
デザイン [ 基礎編 ]</strong></a><br>
<a href="design_basic.html"><img src="images/arrow_detail.gif" alt="WEB DESIGN [ 基礎編 ] 詳細" width="100" height="20" vspace="5" border="0"></a><br>
<span class="top-txt-normal">Webサイト構築講座 初心者クラス。<br>
Webデザインツールの業界標準となるDreamweaver、Fireworks、Illustrator、Photoshopの操作・機能を中心に学ぶ。制作現場で最初に必要とされる基本的な制作知識・スキルを習得する。</span></td>
</tr>
<tr>
<td height="10" colspan="3" valign="top"><img src="images/spacer.gif" width="100%" height="10"></td>
</tr>
<tr>
<td colspan="3" valign="top"><table width="100%" border="0" cellpadding="5" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#999999">
<tr>
<td bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="top-txt-detail">
<tr>
<td height="13" bgcolor="9195A2"><img src="images/top_contents_level.gif" width="97" height="17"></td>
</tr>
<tr>
<td>全くの初めての方/趣味として始めたい方</td>
</tr>
<tr>
<td height="13" bgcolor="9195A2"><img src="images/top_contents_charge.gif" width="97" height="17"></td>
</tr>
<tr>
<td>[入] <span class="top-txt-money">21,000円</span> [受] <span class="top-txt-money">105,000円</span></td>
</tr>
<tr>
<td height="13" bgcolor="9195A2"><img src="images/top_contents_lesson.gif" width="97" height="17"></td>
</tr>
<tr>
<td>1.5ヵ月,10回,3時間/回 【 全30時間 】</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
どうでしょう?
長かったですね…
以前のソースコードと比べると、新しいソースコードでは余分なテーブルタグが一つ消えています。
そして、スタイルシートをきちんと定義したのでフォントタグが無くなりました。
その他にも、幅や行揃え、上下の指定などが減っています
見える結果に大差が無くても、ソースコードにはこんな違いがあるのが、お分かりいただけたでしょうか。
ソースコードがシンプルになることで、**デザインの学校*ウェブデザイン 応用編 第4回**でもお話したSEO的にも検索ロボットが重要なキーワードにより到達しやすい状況が作れます
それにつくる人にも見やすいですよね
今回、自分以外の人がつくったHTMLを編集しみて、編集する人間が同じとは限らない以上、私もできる限り編集しやすいソースコード、ユーザーのアクセシビリティやユーザビリティ、SEOなどいろんな観点で有効なソースコードでかけるようにならなければ!と思いました

 

WEB(ホームページ)デザイン上級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

  • デザインでお困りの企業様
  • 人材や教育でお困りの企業様