現在の位置:home>練習用テンプレート | ||||||||||||||||||||||||||||||||||||||||
|
■練習用テンプレート 質素な感じですが練習用のテンプレートを用意いたしました。 このプレートで商品の貼り付け方など練習してみてください。 こちらでは、テンプレートのHTMLソースと、ページのバランスをとるスタイルシートを用意しています。 ソースを記述しておきますので、すべてをコピーして、ホームページビルダーのHTML新規作成のHTMLソースに 貼り付けて使ってみてください。 ![]() まずはじめに、これからあなたが構築していくホームページを保存していく為の【 フォルダ 】を作成します。 フォルダを作成する場所は、特別に決まりがあるわけではありませんので、 あなたが、わかりやすい場所でしたらどこでも良いです。 (すぐわかるようにデスクトップに作ってみます。) デスクトップをパソコンの画面に表示して、右クリックすると、コンテクストメニューが表示されます。 このメニューの中の、【 新規作成 (W) 】にマウスカーソルを合わせると右か、左にもう一つメニューが現れます。 そのメニューの中の、【 フォルダ (F) 】をクリックすると、新しいフォルダができます。 この、新しいフォルダに、カーソルを合わせて、右クリックするとまた、メニューが現れますので、 その中から【 名前の変更 (M) 】をクリックします。 すると、フォルダの名前をつける事ができますので、あなたが好きな名前を付けてください。 (このフォルダーは、これから、あなたが構築するホームページのデーターを保存していくモノになります。 ホームページをサーバーにアップロードする時にも使いますので、覚えやすい名前が良いと思います。) ![]() 保存先のフォルダの準備ができましたら、練習用テンプレートのHTMLソースをコピーします。 テンプレートのデザインはこんな感じです。 ![]() ブラウザで見てみる・・・・ このプレートお使いになる場合は、下記のソースをすべてコピーして、ホームページビルダーで使用します。
マウスの左クリックボタンを押しながらソースをすべて選択していきます。 コピーできましたら、ホームページビルダーを開いて、新規白紙のページを選択して、 HTMLソース画面の初めから表示されているソースを削除して、今コピーしたソースを貼り付けます。 ビルダーの上部にあるメニューバーの【 ツール(T) 】をクリックして、 【 HTML 構文チェック(M)】をクリックします。 問題なければ、『エラーはありません』と表示されます。 ここで一度、HPを保存しておきます。 必ずしなくてはいけない事でもないのですが、フォルダもせっかく作ったことですし、失敗しても、 この状態に戻す事ができますので、保存しておきます。 ビルダーの上部メニューバーの【 ファイル(F) 】をクリックします。 すると、メニューがズラ〜と現れますので、その中から【 名前をつけて保存(A) 】をクリックします。 すると、保存画面が現れますので、【 保存する場所(A) 】の∨でデスクトップを選択します。 すると、デスクトップにあるフォルダが現れますので、先ほどあなたが作った フォルダを選択(クリック)し、【 開く 】ボタンをクリックします。 そのまま、ファイル名のところに【 index.html 】と記述して【 保存 】ボタンを押せばOKです。 ![]() つぎに、スタイルシートをコピーします。 このテンプレートは【 CSS 】というスタイルシートを使用していますので、下記の記述を すべてコピーして、メモ帳に貼り付けます。 メモ帳は、【 スタート 】 ⇒ 【 すべてのプログラム 】 ⇒ 【 アクセサリー 】 ⇒ 【 メモ帳 】で開く事ができます。 開きましたか? 上手く開いたら、下記の記述をすべてコピーしてください。
上手くコピーできましたら、先ほど開いたメモ帳に貼り付けます。 後はテンプレート(HP)の保存と同じ様に、上部メニューバーの【 ファイル(F) 】をクリックして、 【 名前をつけて保存(A) 】をクリック。 保存する場所は、テンプレート(HP)と同じ場所を指定して、好みの名前をつけて保存します。 (半角英字でtxtとなっていますが、○○○.cssと書き換えます) (この名前を覚えておくか、コピーしておきます) 上手く保存できましたら、ホームページビルダーで【 index.html 】を開いて、HTMLソースを表示させます。 このソースの上のほうにあります、 <LINK rel="stylesheet" href="◆◆◆.css" type="text/css" id="_HPB_TABLE_CSS_ID_"> の◆◆◆の部分にあなたが保存した名前に書き換えます。 ビルダーの上部にあるメニューバーの【 ツール(T) 】をクリックして、 【 HTML 構文チェック(M)】をクリックします。 問題なければ、『エラーはありません』と表示されます。 ビルダーの上部メニューバーの【 ファイル(F) 】をクリックします。 すると、メニューがズラ〜と現れますので、今度は【 上書き保存(S) 】をクリックして保存完了です。 ![]() これでテンプレートの設定が完了しました。 続いて、商品を載せていきたいところですが、まだ、ASPに登録していませんので商品を仕入れることができません。 一服してから、HP完成までの手順を確認しておきます。 製作の手順 |
|||||||||||||||||||||||||||||||||||||||
:お問い合わせ(e-mail): | Copyright (C) agood-grip.com All Rights Reserved 不労所得構築web.hp
|