site_make

WEBサイト作成準備

2015-01-01

WEBサイト作成準備をしましょう

ready

作成準備をしましょう!
といっても、特別に用意するものはありませんがイラストサイトを作りますので掲載するイラストとかロゴマークとかの画像は描いてくださいね。
イラストは後々追加していくわけですので最低1つですよw
それ以外は最低でも「メモ帳」があれば作れますが下にオススメ無料ソフトを紹介していますので軽い気持ちで頑張りましょう。
あ、あとはレンタルサーバーが必要ですね。無料でもたくさんありますから出来上がる頃までには選んでおきたいところです。
一応イラストサイトの作り方ってことなのでサーバー関連は次の機会で失礼しますね。

WEBサイトに必要なファイルは?

まずWEBサイトはどんなファイルでできていて、何のファイルが必要なのかです。

私たちが見ているサイトの文字や画像などの「情報」部分はhtmlファイルでできています。
このファイルに書かれている情報をユーザーや検索ロボットが読んで内容を把握していきます。
しかし、私たち人間は文字を読み、画像を見てページのタイトルや何のイラストかを理解しますがロボットは理解できません。
そこでhtmlで「ここはタイトルデスヨ」とか「このページはこんなページデスヨ」と分るようにするのが「html」です。

私たちが見ているサイトは見た目がキレイにできていますよね。
今度は人間相手です。ただ、情報が並んでいるだけでは読みづらいし、見づらくなってしまいます。
そこでキレイに並べるのがcssというファイルになります。これは「スタイルシート」といいまして、文字や画像のレイアウトから背景の色や模様など見た目(デザイン)を作るファイルになります。
ロボットはhtmlで理解させて、人間はスタイルシートで理解させましょう。

この二つのファイルの組み合わせでWEBサイトは作れます。が、このサイトはイラストサイトの作り方を紹介していきますのでjavascriptというWEB言語も少し紹介しています。
javascriptとは簡単なプログラミングだと思ってくれればいいかなと思います。
トップページの画像がスライドして切り替わったりするのを見たことがあるかと思います。ユーザーが何かすると見た目が変わる。そんなページを作るときに使うのですがいろいろなイラストのギャラリーを作るときに見てください。

サイトを作る準備をしよう

では、サイトを作る準備をしましょう。
まずは何で「html」「css」のファイルを書くか、ということですが・・・「メモ帳」でもいいです。
ポイントは保存するときに末尾に「.thml」「.css」と付けるということです。これは拡張子といいまして、何で書かれているかを示しています。

さて、メモ帳では書きづらいので無料のソフトをダウンロードしましょう。WEB作り専用のやつです。
EmEditor
TeraPad
これは無料ですし、使いやすかったのでオススメです。お好きな方をお使いください。

  • 01-emeditor
    EmEditor
  • 01-terapad
    TeraPad

これで準備はできました。
オリジナルサイトを作るってワクワクしますよねぇ。
サイトのデザインは考えてありますか?
もし、あやふやなら一度絵にしてみましょう。
(昔の)プロの方は「Photoshop」や「fireworks」で描いたものをそのままWEBページで1pxの誤差なく再現しますからね。

関連リンク

copyright 2017 eo
  プロフィール  PR:無料HP  湯沢自動車学校  ゲーム 制作  IID  中古ホイール 三重  タイヤ 格安  Webディレクター 専門学校  BATTLEZ  秩父自動車学校  水晶  長崎 合宿免許  音楽 専門学校 福岡  ランドクルーザー トヨタ 中古  リノベーションセミナー