イメージをトレースしてHPを作成手順

(1)下図の準備

WEBデザイン画像を画像処理ソフトで制作しなおスライスしpngと合わせてjpgを作成

(2) WEBデザイン画像をCADでトレース

2-1下図の配置

2-2下図の補助線

(3)構造図のイメージを想像しコンテナ部材およびタグ部材を配置

●下図イメージを非表示にしてみると 以下のように表示されます。 またこの状態でプリンターで印刷できますので、構造の確認が簡単になります。

●拡大して詳細参照すると

(4)HTMLを出力し構造を確認

部材を配置した時点でHTMLの形状は決定します。 その後、イメージを部材に貼り付け、CSSを調整すればHPの完成です CSSパネルのボタンでHTMLを自動出力します。 構造に問題があれば警告表示されます。 エディターで確認します。またPartsHPの画面でもHTMLのコードがその横に表示されますので作業中はそこでチェック可能です。 ●エディターで確認

(5)各部材にimageを設定およびCSS作成&部材属性を調整

・5-1部材からクラスIDを作成

・5-2CSSから部材属性のGET

・5-3CSSダイアログでの詳細設定

(6)HPの作成

・6-1部材入力終了

・6-2HTMLとCSSを出力

ブラウザでのアウトプット

参考書ベースのコンポ組込みでHP作成手順