サイタWeb・デザインスクールHTML/CSS入門講座 兵庫 初心者でもできるHTML・CSS入門講座 レッスンノート サイトマップとカラーミーのテンプレートにつきまして

サイトマップとカラーミーのテンプレートにつきまして

HTML/CSS入門講座のレッスンノート

レッスンノートって?レッスンノートって?

体験レッスンお疲れさまでした!

本日は現在ご依頼を受けておられる
カラーミーで作られているネットショップの
リニューアルについて、
不安点や疑問点などをお伺いしました。

いきなり簡単なWEBサイトではない
カラーミーでのECサイトリニューアルで
不安なことが多いかと思いますが、
1つずつ手順をしっかり踏めば
作り上げることができてきます。

また、
課題点や疑問点も出てくると思いますが、
その際はぜひレッスンにて解決していきますので、
お気兼ねなくメッセージをお送りください。



【サイトマップ】

サイトマップは今日見せていただいたリストのみの形式と、
お教えしました図形化したものがあります。

リスト形式のみのタイプは、
何百ページもある大規模サイトで効力を発揮し、
サイトをシステム化する際に使われます。

しかしながら、
WEBを勉強されている方や、WEB制作初心者の方には、
実際に想像しにくいので図形化する
サイトマップをお勧めします。

また、階層については最初のうちは
混乱するかもしれませんが、
windowsのフォルダー概念と同じです。

下の階層に行くということは、
一つ下のフォルダーのものを見る
ということになります。

この事を頭のなかに入れていただいて、
サイトマップを作成してください。



【カラーミーにソースを入れ込む方法】

まずは、
普通のサイト作成と流れを見てみましょう。

①サイトマップを作り、ワイヤーフレームを作る。
②サイトのデザインを作り込む。
③デザインに沿ってマークアップをする。
④JavaScriptやCSS3の動的なものを入れる。
⑤(必要であれば)PHP・WordPressなどのシステムやプログラムを入れる


実は、
カラーミーでテンプレートを使って作るのも、
基本的には全く同じ流れになります。

⑤のシステム・プログラムの部分が、
今回はカラーミーということになり、
まずはローカルでHTML/CSSデータを作りましょう。

データが作りあがりましたら、
実際にカラーミーの管理画面に
パーツを入れ込んでいきます。


まずは新しいテンプレートを作成し、
共通(ヘッダー・サイドメニュー・フッター)な部分から
部分的に切り取ったHTMLとCSSを少しずついれこんでみて、
ブラウザーで確認しながら行ってください。

この作業を繰り返し行いながら、
少しずつ理想とする形に近づけていきます。

一通り共通な部分を入れ込んだら、
次にカラーミー専用のタグで
URLなどのショップの情報を引き出す命令を書いていき、
1つずつブラウザーで確認してください。

こんな感じで、
共通が出来上がったらトップのコンテンツ部分へと進み、
残りのページを仕上げていきます。
このレッスンノートを書いたコーチ

制作会社で自力で得た実践的ノウハウ伝授。WEBデザイナーも夢じゃない!

新着レッスンノート

体験レッスンお疲れさまでした。 本日はWordPressで作るサイトについて システムにおいてできることなどを お話しさせていただきました。 その他にも、 Webコピーライティングについてですとか、 Webの仕事を営業などについてお話いたしました。 最近の本屋を見てみ...

レッスンお疲れさまでした! 本日は前回作成しました レスポンシブウェブデザインのデザインから、 マークアップした分を チェックさせていただきました。 基本的には ほぼほぼ完成してましたね! あとは デザインに照らし合わせて 細かいところを微修正していきましょう。 ...

レッスンお疲れさまでした! 本日は、 前回にお出ししたデザイン課題について、 特にスマートフォンに関しまして 修正を行いました。 また、 デザインから書き出しをおこなって マークアップする準備をしました。 まずはスマートフォンから作りこみ、 出来上がりましたらデス...

レッスンお疲れさまでした! 本日は、 前回にお出しした課題について 改善したいポイントを中心に お教えいたしました。 レスポンシブウェブデザイン化する際に、 下記の2つの方法があります。 ・デスクトップから先に作る ・スマートフォンから先に作る 実は難易度として高...

レッスンお疲れさまでした! 本日は、 ローカルでWordPressを使って作成したWebサイトを 本番サーバに上げる方法や、 お客様とのディレクションについて お話しさせていただきました。 【Webサイトを本番サーバに上げる方法】 基本的に、 データを上げる...

レッスンノート ページ先頭へ

HTML/CSS情報

サイタのHTML/CSS講師がブログを通して、HTML/CSS情報を発信。更新情報のチェックはこちらから!

twitter

HTML/CSSの先生

@DTPCyta