現在の位置: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
|