1. Home
  2. tag:初心者

Tag Archives:  初心者

サイトをコーディングする準備。

サイトをコーディングする準備。

コーディングする作業は、すでにサイト構築の作業では後半に位置する作業です。

この記事は 私が忘れそうになった時に見返すメモです。間違っていることも書いてるかもしれませんしまとまってないかもしれませんが、どうぞお見逃しください。

コーディングの事前準備

  1. 画像ファイルを準備する。

    任意のデザイン(自分で作ったサイトのラフ画像など)から画像を書き出しする。

    このとき デザイン時 CSSのbackgraoundプロパティーで表示するのか? イメージタグで表示するのか?

    事前に考えておくとよい。たとえば、スワップイメージなどを使うときjavascriptを使うのか?

    擬似要素:hoverを使うのか。スワップするときのイメージ画像も用意しておく。

  2. 作成するhtmlファイルをDwなどで作る前に。
    フレームワークを確認しサイトのフォルダを作っておく、必要なライブラリなどもフォルダに入れておこう。 Dwでサイトで新規サイトの定義をしてフォルダを指定する。
    (余談)大規模サイトの場合

    Dwテンプレート で共通のデザイン部分(ヘッダー Áフッター  サイドメニュー  グローバルナビゲーション)を先にコーディングすることを考えよう。  ドリームウィーバー  テンプレートは教科書に詳しい操作方法が載っています。

    DWテンプレートの使い方:http://www.dougamanual.com/blog/61/

    サーバーに上げないファイルやフォルダはクローク設定しておこう。 教科書Part12  376ページ

  3. Dwを立ち上げて HTMLをコーディング
    1. 新規ファイルで 共通(Common.html もしくはcommon.dwt)ファイルを作る。共通のファイルを作っておいてindex.html以降を組んでいくと作業効率が上がる。
    2.  環境設定でHTMLのヴァージョン エンコーディング「"utf-8""shift_jis""EUC-jp"」などを設定。
    3.  サイトの定義でフォルダを指定する。

      要らないファイルやフォルダは入れない。また別のサイトを定義していたファイルの直下に新規サイトを定義しないこと。

    4. まずは 基本的な<head></head>タグ内のコードをかく。 閉じタグ忘れずに (/ >)書こう。  
      <meta><title><link><script>
      など。まだ決まってない内容があっても空でいれておくとよい。(後で編集できる)
    5. 必要なCSSファイルを作りリンクしておく。

      後に読み込むほうが上書きしていくのでリンクの順番に注意

      reset_mini.css clearfix.css を最初に書き込んでいく。

           reset_mini.css

           clearfix.css

           common.cssの順番

      で指定する



      ただし英数半角で命名すること。

    ★ bodyタグ内の記入
    1. サイトのラフを確認し幅,高さなどを確認しあらかじめDIVタグで各範囲を区切ってマーキングしておく。
    2. 固定幅のサイトでブラウザの中心にサイトを表示する場合 <div id="wrapper">等で囲み幅を指定する。

      idはHTMLファイル内には同じ名前は付けれない。英数半角小文字でA~Zのアルファベットから指定しましょう。

      なお数字はアルファベットの後ならOKです。 全体を慣れないうちは<div id="wrapper">で固定しよう。

     ワッパーの中に

    • header(ロゴ サイトの題名 グローバルメニュー 検索フォーム サマリー など固定情報 重要情報を入れるのがSEO的によい)
    • main_contents この中に主な情報を入れる。カラムレイアウト(縦に2行 3行)などの場合さらに カラム(行)の数だけ <div> タグを事前に 入れておくき。終了タグ部分にコメントを入れておくとタグが複雑になってきたとき探し出しやすい。
      <!-- id="side_menu"終わり -->
      など
    • footer コピーライトやサブ的なリンクなどいれてユーザビリティ(使いやすさ)の配慮が必要。

      あんまり重要ではないからシンプルデザインのサイトもあるが ecサイトの場合ここに電子商取引の説明、サイトの管理人の名前 サイトマップ サイトポリシーなどがリンクされている。
    1. style.cssやcommon.cssに基本的な設定を記入しておく。 サイトに共通なスタイルはbodyセレクタに記入しておく。
      body{
        font-size:87.5%;/*ベースの文字の大きさ例)14px */
        font-family:"メイリオ";*/字体の設定/*
        line-height:160%;/*行間*/
        color:#333333;/*文字色*/
      }
      --------------------------------------------
       h1{ 
       font-size:200%;
       }
      
      h2{
       font-size:180%;
       font-weight:bold;
       }
       
       a:link{}
       a:visited{}
       a:hover{}
       a:visited{}
      ------------------------------------------------
      

      などなど 必要に応じて bodyタグぐらい設定しておいたほうが見栄えがイメージしやすい。

    2. 各<div>に幅,floatなど,位置 場所が分かるように仮に背景色を入れておくと分かりよすい。 全体の大きさを見えるようにしておくとブラウジングしたときにわかりやすい。 CSSを新しく記入したらすぐに上書き保存して 各ブラウザで見え方を豆にチェックしましょう。 各divの要素の間隔(余白は)paddingで設定しよう。(パディングを設定した分widthを小さく設定)
    ★ bodyタグ内の記入
    ★ 各Divの中に素材をコーディングしていく。
    1. 必要な要素を先に全部いれていってもよいが・・・慣れないうちは header部分mein_contents部分 footer部分と順番に記入し誤認しないようにする。

      内容を入れたら各要素をタグで囲んでいく。

      一番重要なサイトのタイトルやLogoは<h1>文字は基本<p> 同意義リストは<ul><li> 定義リストは<dl><dt><dd> 順位リストは<ol><li>など 適切なタグでマークアップしましょう。 わからない時は辞書やインターネット検索を検索してみる。

      とくに大事な表題的文章やタイトル宣言部分は h2~h6を入れよう。 h1 h2の複数のマークアップはタグ重要度を薄れさせるのでhtmlファイル内にはh3 h4を複数入れておこう。

       重要な文字 太字は<strong>見栄えだけなら<span class="redFont">などで設定
    2.  フロートして配置するタグは <div>で囲み clearfixをかけてフロートをクリアする。
    3.  ボックス要素を利用して 「要素の見栄え」「左右上下の余白」「背景を指定する。」
    4.  
      デザインが再現できないとき
      • 見た目が再現できない場合、高さ 幅を計算し直す。
      • 文字の大きさやボーダーの幅で子孫要素が押し出してカラム落ちしたりはみ出たりしてないだろうか?
      • 無用なdivはなるべくつけないほうがよいが 見た目のためにdivをで囲むことも仕方がない。依頼主の見た目デザインを優先しましょう。
    5. 細かな部分の見栄えに入ったらのCSSには一番子孫のタグにwidthやheight設定し。内包する親タグにはボックスモデルのプロパティ(width height)を掛けない。子孫にふくらまさせる。


      ieの場合 背景画像やpaddingを指定している場合は height:1%;を入れて表示させる。(haslayout)

      haslayautoについて詳しいブログ http://coliss.com/articles/build-websites/operation/css/143.html

コラム————————————————————————————————————
 

ソフトウェアの世界では、アプリケーションソフトを開発する際に頻繁に必要とされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのこと。アプリケーションの雛型。開発にフレームワークを利用すると、独自に必要とされる部分だけを開発すれば済むため開発効率の向上が見込める。具体的なソフトウェアだけでなく、汎用的に適用できるプログラムの設計モデルや典型的な処理パターンなどを含めてフレームワークと呼ぶ場合もある。

出展 IT用語辞典。

htmlでのサイトでは。最初に閲覧者が訪問するtopページ(ファイル)を中心にサイト構成に応じて作られたフォルダ構成と考えてください。 CSSの入るフォルダ Jsが入るフォルダなど。 さらに細かくCSSのフォルダ内のCSSファイルの各役割などを決めておきます。 樹形構造で フォルダの位置関係階層を視覚的に図表にしておくとよい。 おもにサイトマップなどがあるが。Javascriptなどのエンドユーザー(人間)が直接読まないプログラムの位置も決めておく。これらの一連の作業は コーディングする前にする作業でサイト構築の作業です。

初めてのご来校の方へ(その3)

グラフィック志望の方へ 「最新のソフトが使いたいのか!? そんなにさわりたいのか!!」

adobe製品の最新版を学習をしようと・・・私もそういう口でした。 Photoshop,Illustrator,最新のやつが使いたかった。

なんでCS3じゃなくてスタジオエイトなの?て子供ながらに思ってました。i  うん いろいろ事情はわかるが、よくよく足元を見てみると。 CS3の機能を限界まで使える知識と技術を学習の初期で私はもっていないのである。

たとえば [W:F-35]が乗りたい!

 あなた[W:ゼロ戦]も満足に操縦できないでしょ?

( ゚д゚ ) ii



基本はF-35もZEROファイターも操縦方法や理論は同じで studio8だろうがCSだろうがCS5だろうが基本操作は同じです。iii まずは基本機能を使いこなせるようになりましょう。仕事場では古いソフトを使用しなければならないことがあるのでまずはソフトの新しい古いにとらわれない基本操作を覚えるべきです

 それぞれの時代のバージョンによって強化されてユーザビリティーがよくなったり、互換性がとれていたりして最新ソフトのほうがもちろんよい点もありますが基本操作は変わりません。 Illustratorでパスをとる。 Photoshopの境界線ツールで人物を囲う作業の基本はどのバージョンも同じです。 ですからソフトのバージョンはこだわる時期ではないですよ。

千里の道も一歩から毎日経験を積んで操作時間を増やしてください。きっと知らない間にどんなソフトでもよい作品ができるようになることを信じて、基本技術をみがいてください。

 

 安く手にはいるぜ

 Waveの生徒は学生割引(アカデミックパック)でお安く買えるので使いなれたころに購入を希望するといいですね。クリエイティブスーツ系のソフトパックがお勧めです。 購入決定からお手元にお届けまで1カ月ぐらい係るのがデメリットではあるんですが、量販店より安く手に入ります。

 わたくし自身 2010年CS5が発売されて 購入を迷っています。しかし、自宅PCのスペックが追いつかないのではないかと危惧しています。動くんでしょうけどフリーズ地獄・・・・ 古いソフトは軽いので大きなファイルを扱えませんが動作が速いのと当時のPCのスペックに合っています。 CS5を購入すると古いCS3は動作負荷がかかるので削除ですね。 その前にCS3を償却できていないので残念です。 CS5を購入する時はご自分のPCの環境がCS5の動作環境範囲内にあるかどうかしっかり調べてから購入に踏み切ってください。 詳しくはPCのスペック系のサイトを検索してしらべてください。

補足情報

動画マニュアルってのがあってほんと基本操作を忘れた時の防備録としてはこいつを利用すれば結構便利ですね。

 大したこともできないのに上から目線で書いて御免!!

  1. おっさんでしょ []
  2. 例えが微妙!? []
  3. 飛行機の例えがまずかった? []

WAVE 利用者として心がけてること (その2)

WAVEに通っていて心がけてることシリーズです。前回と同じく全員に当てはまらないのであくまでみなさんに良かれと思う老婆心ながらのアドバイスです。なので価値観強要ではないですが、要らなければよみとばしてください。

しゃぶりつくせ!!WAVE i 

 

いろいろ利用していて、良い制度がいっぱいあるんですが 私もすべて使い切ってないし知らないことは多いですが、身近なところでご案内です。それは講師です。

講師を活用しよう。

講師はビジネス Web DTP ITに大まかに分かれますが・・・・・ 先生には得意不得意があれどとりあえず、質問しまくれ!! わからんままで家に帰るのは損です。 PALの授業内容ならほぼ質問には答えてくれるはずです。 また将来作品を作るにしても ある程度自分の作品ができてきたら先生に見せて触ってもらってください。Web作品をビジネスの先生に見せてもOK その先生なりの意見をもらいましょう。たとえば「自分が作ったボタンなどを思った通りにクリックしてくれない」など行動から作品の欠点のヒントを見抜けます。 これはとある先生からの受け売りなんですけどね。とくに1人で作品を作っていると自分目線になって視野が狭くなりますのでよくアドバイスをもらってください。

講師スケジュールをチェック 

 毎月はじめ講師のスケジュールが関西のすべての校舎分のわかるように紙ベースでもらえます。自分が通っている講師がわからなくても別の校舎の先生に聞けるかも知れません。また少人数授業のスケジュールもあります 特殊な質問が学習を進めていくごとに増えてきますのでほかの校舎で授業を受けていろいろな先生に顔を覚えてもらいましょう。

少人数ライブ授業を受けよう

 時間的に合致するなら 自分の取っている授業の補完をするためにも少人数ライブ授業をつかって学習を深めてください。わからないことがあればどんなことでも質問しましょう。授業についていけないかもと云う不安があるかもしれませんが、特殊な授業以外何回か同じ授業が受けれます。(契約によって違ったかも・・・詳しくはスタッフに聞いてね。) だたし、校舎によってやってない授業もあります。また同じ授業の名目でも先生によって授業内容が違うのでいろんな角度から学習できます。 ただ講師の先生も現場のプロが多いのでいつまでもWAVEにいるとはかかぎりませんので特定の講師の授業を見逃さないようにしましょう。

  1. 「しゃぶりつくせセガサターン!!」のオマージュです。 []

WAVE 利用者として心がけてること (その1)

本日もWAVEなんば校での知っといて損しないことを利用者目線で、あくまで私の価値観でお伝えします。今回は私の価値観です。価値観をごり押しするのってよくないと思いますので、気に入らなければ読みとばしてください。

 予約

 あなたの生活スタイルによって変わりますが 大体来校時間は一定になるとおもいます。いや 来校時間を一定にしましょう。習慣付けないと終わりません。自由にできるからこそ習慣づけましょう。まさかの三日坊主はどぶに金を捨てるような物ですからね。予約のルールは受講日を消化して初めて次の受講日の予約を取れる一日しか予約できないシステムです。 いつでも席が用意されているわけでは無いので次に来れる日をしっかり確保しましょう。

 効率よく予約を取るには、席に着いたらPALの準備のうちにインターネット予約してしまうのがよいのではないでしょうか。 なぜなら 受講を終わってからの予約だと、外からの予約や同じ時間帯に来た人たちに予約を取られて埋まっている事があるので着たらすぐ次の受講日の予約です。 予約の方法は契約したときスタッフから教えていただけるとおもいます。

予約システムの利用方法

予約の窓口は 3種類あります。

  1. インターネット予約

    一番手軽です。しかも混雑状況もわかり便利です。最優先での席確保ができます。 ただしシステムの不具合などで△の次の〇以降は予約時間を確保できなかったりします。混雑時によくおこります。i 気をつけてほしいのは、よく受講内容、受講時間、受講する学校名、使用するPCのソフトを間違って入力して予約完了させてしますこと、予約完了画面をしっかり確認することと、予約の希望入力がネットで一度は拒否されると、デフォルトの表示になり最初から入力しなければならないから気をつけてください。

  2. 電話予約

     出先での予約やキャンセルもできます。 会社帰りや、用事が早くかたずいて時間があいた場合 電話で問い合わせしてみるといいでしょう。ただしインターネットでの予約が優先ですのでいっぱいの場合は希望通りの予約ができないかもしれません。しかし電話での予約はスタッフが調節してくれるので確実です。 

  3. 窓口予約

    窓口 基本電話と一緒です。昔はこのやり方しかなかったですが、メリットは確実に予約が取れることです。今はホームページでの予約で4時間確保が可能なのに、なぜか、1時間しかとれないシステム上の不具合がたまにあります。そのときは窓口や電話で延長を申し込んでおくと間違いないでしょう。基本はインターネットなので窓口は不具合時のときだけにしときましょう。ii

以上の3つの方法を駆使して予約競争に勝ってください。習慣をつけるのは大切だとおもいますので安定した学習時間を確保しましょう。以上が予約をとる上でのコツですかね。

ちなみに私は PALでの学習をほぼ終えて、主に作品製作のために利用している微妙な受講生です。なのでその日に自宅で出発前に予約もしくは出先からは電話です。 情けない話ですが 寝坊による遅刻、すっぽかしをなくすのと、一応PALを受講している生徒さんを優先と考えてこうしています。予約が取れなければ自宅のPCで製作です。

予約のすいてる時間、

雨の日、 朝一番の10:30から、 夜20:00以降 が比較的空いています。iii  職業訓練や就職活動で日中学習に時間が当てれる方は生活習慣を整えるためにも10:30からくるようにするのがいいと思います。

私からの個人的なお願い!

病気

誰しもが生きていれば病気になります。ここで言う病気は風邪などの軽い疾病のことです。WAVEは学校法人でもなければ会社でもない。契約期間中なら何時でも行ける習いもの教室で気軽な施設です。だから風邪などを引いたと思ったら休もう。休めない事情が個人個人であるかもしれないが普通なら無理する事ではない。

 こんなことを書くのは、ここに通う人が必ずしもみんな健康が万全ではないからです。いやここだけではない社会にいる人全般ですが、たとえば人工透析して免疫が弱まってる人などがいるかもしれないからです。またWAVEを責めるわけではないし皆さんを脅すわけでもないですが、基本、PCのキーボードやマウスはかなりの量の雑菌が繁殖しているといわれていますiv 。自分のPCならまだしも、いろんな人が触っているんだからある意味仕方がないです。普通の健康な人は免疫力が強いので健康を害することはないですが体の弱ってる人は予防につとめたほうがいいです。もちろん風邪の症状の場合私はいきません。もし風邪の症状がでていたり 咳が止まらない状態でマスクもせずにここを利用しないように最低限の予防を施して利用するように私は心がけています。人から感染すのも嫌だし感染させるのも嫌だからです。 受付には消毒用のアルコールがあるので利用前と利用後は消毒したり手を洗うようにしています。当たり前といえば当たり前ですが不特定多数の人が同じものを触るので公衆衛生上のマナーです。

ここでコマーシャル 今回はキーボードの汚さとかが話題だったので以下の商品は如何?

上記商品は私は使用感をためたわけではありませんので皆さん自己責任でよろしくおねがいします。

飲食

 基本 PCの机では飲み物はOKv  食い物はNGです。 まあ キャンディー程度ならOKになっていたとおもいますが・・vi

マナーですから。みんなが気持ちよく利用するために守らなきゃいけない線引きなのです。 キーボードのキーの間にパンのカスやご飯粒や海苔の破片があるのを遭遇すのは嫌です。便所と同じくらい雑菌が繁殖してるかもしれないキーボードの上で飯を食べていることを自覚してほしいです。 勉強していたら腹が減るのは当たり前だが、休憩時間も自由に取れるのだからいったん席を離れて外で食事をとってほしいです。まぁすぐにそんな雰囲気ではないことに気づいて食事などしないようになるんですけどね、最近はみかけません。

 と苦言を申し上げている私も以前、i-phoneの音量が大きくてシャカシャカうるさいと講師に注意をうけました 申し訳ないです。

お手洗い(男子)

女子トイレの事情は残念ながら私は存じ上げないが、男子トイレは使用しないときは消灯である。つまり使い終わったら消灯しよう。便器が大小一つづつしかないので点灯時は使用中の合図である。決して地球がどうとか、光熱費がどうとか私にとってはどうでもいいのである。使用中の暗黙のルールである。繰り返し書くが、使い終わったら消灯しよう。でないとMACの前でおれは股間を押さえプルプル震えているぞ!!

以上の3点がお願い、かなりたいしたことない 普通の常識的な事をお願いします。

  1. 最近はCS3の席が多く確保されたのであまりこの障害はおこらなくなりました。 []
  2. インターネットの予約システムの意味がなくなるのと インターネットのこと学習してるのにそれぐらいできないと恥ずかしいです。 []
  3. 最近出勤前の習い事とか丸の内系で流行ってるらしいですが、7:00ぐらいからやらないですかね? やらねえか・・・ まぁ 私はいかないけど。 []
  4. WAVEのキーボードで雑菌繁殖テストを実施し悲惨な結果を見たわけではない、あくまで一般論である。不特定多数の人が触るドアノブやエレベーターのボタン、電車のつり革など環境が似ているからである。 また、だからといっていちいちキーボードを交換したり除菌洗浄するのは僕は時間、費用、労力から反対です。利用者が気をつけるものだとおもいます。ただ時にはキーボードの間の埃を掃除してくれてもいいかなと思う。 []
  5. こぼすと悲惨だが []
  6. こないだ パン食ってる馬鹿がいたが・・・ お前のPCじゃねえよ []

Powered By WordPress

thema:ng

Copyright © nuritategomen.com 2010-2019 All Right Reserved.