...

ホームページビルダーによるHPの作成

by user

on
Category: Documents
5

views

Report

Comments

Transcript

ホームページビルダーによるHPの作成
ホームページビルダーによるホームページ作成
Ⅰ
新規作成とファイル保存
<ホームページビルダー起動画面>
※ホームページビルダーを起動し、左端の白い用紙のアイコンボタン(「新規作成ボタン」
)をクリック
します。ここで新しいファイル(「htmlファイル」または「htmファイル」と言います)を作成
します。
(↓図1)
<メニューバー>
※一番上の「メニューバー」から「編集」をクリックし、新しいページ(htmファイル)を作成する
ための必要最低限の設定をします。(図3および図4)
(↓図2)
クリック
<タイトル入力①>
※タイトル(「330-A ページ」
)を入力します。
(↓図3)
②
①
1/10
<背景/テキスト色選択②>
※「背景/テキスト色」タブ(②)を選び、背景やテキスト(文字)の色の設定をします。
(↓図4)
<写真挿入>
※「My Pictures」に入っている写真画像を2つ挿入してみます。
(↓図5)
ドラッグ&ドロップ
<文字の修飾>
※「書式設定バー」では、テキスト(文字)を太くしたり、
大きさを変えたりすることができます。
(大抵の操作は、MS-Word と同じ感覚です。)
(↓図6)
太字
文字拡大
2/10
<作成したhtmファイルと使用した画像ファイルの保存>
※作業画面にて作成したhtmファイルをパソコンに保存します。
メニューバーの「ファイル」→「名前を付けて保存」を選択します。
(↓図7)
クリック
クリック
※「My Documents」フォルダ内にあらかじめ作っておいた「330-A_HomePage」フォルダの中に、
新規作成したファイル(ここでは「330-a」という名前を付けました)を保存します。
(名前の後の拡張子(htm)は自動的に付いてきますので入力の必要はありません。)
(↓図8)
クリック
3/10
(↓図9)
クリック
※使用した画像ファイル2つ(「LC_logo.gif」と「houshi.jpg」)を、新規作成したファイル「330-a.htm」
と同じフォルダ「330-A_HomePage」に保存します。
(特に操作をしなくても、(図9)の操作の後、自動的に使用した画像ファイルの保存画面が出てきま
す。)
(↓図10)
クリック
4/10
Ⅱ
Web サーバーへのファイル転送(FTP 転送)
<「ファイル転送」の起動とサーバープロファイルの作成>
※ 実際に、作成したファイル「330-a.html」を全世界に公開するために、Web サーバー(WWW サ
ーバーとも言います)にファイルをアップロードします。(アップロード・ダウンロードの手続き
を「FTP 転送」と言います。)
(↓図11)
※最初に「ファイル転送設定」画面が表示されるので、ここで 330-A の Web サーバーに接続するた
めのプロファイルを設定します。
「サーバープロファイル名」---自分でわかりやすい名前を自由入力
「ログイン情報の設定」---「接続先のサーバー名」
「ユーザーID」
「パスワード」の3つについては
サーバー管理者から付与された情報を入力
(↓図12)
クリック
5/10
<ファイルの転送作業>
※(図12)の後に、ファイル転送画面が表示されます。まず、左側の画面(パソコン内を表示する画
面)で、転送(アップロード)するファイルを表示させておきます。
次に、上の「接続」ボタンをクリックし、Web サーバーに実際にアクセスします。
(↓図13)
クリック
※Web サーバーに接続されると、右側にサーバーの中身が表示され、左下には接続完了のメッセージ
が表示されます。
(↓図14)
6/10
※サーバーへ転送するファイルを選択(クリック)した後、上向きの矢印ボタンをクリックします。
パソコンに保存されていた「330-a.htm」が、サーバーに転送されたことを確認します。
(↓図15)
クリック
※画像も(図15)と同様の操作にて転送し、転送作業が全て終了したら、
「切断ボタン」をクリック
して、サーバーとの接続を切断します。
(↓図16)
クリック
7/10
<ブラウザ(Internet Explorer 等)にてインターネットにファイルが公開されていることを確認>
※転送したファイルが全世界に公開されているかどうか、また、入力したページタイトルが正確に表示
されているかどうか、実際にブラウザで確認してみます。
(URL(ホームページアドレス欄には、サーバー名の後をスラッシュ(/)で区切り、転送したht
mファイルの名前を入力します。
注意点:ここではサーバー直下にファイルを転送しましたが、サーバーの中にフォルダが何階層にも渡
って存在することもあるので、その場合は、フォルダごとにスラッシュで区切っていきます。)
(↓図17)
8/10
Ⅲ
ファイルの更新
①更新する HTM ファイルをサーバからダウンロード
※先ほどアップロードした「330-a.htm」を修正してみます。
右側(サーバー側)の「330-a.htm」を選択し、下向きの青い矢印ボタンをクリックして、サーバー
にある最新ファイルをパソコンにダウンロードします。
(↓図18)
クリック
②更新(修正)作業
<ホームページビルダー起動と更新ファイル選択>
※ホームページビルダーを起動し、「新規作成ボタン」の隣の「開くボタン」をクリックします。
(↓図19)
クリック
9/10
※更新(修正)するファイル「330-a.htm」をクリックし、「開く」をクリックします。
(↓図20)
クリック
<更新(修正)作業>
※作業画面にてファイルの更新をします。ここでは「おしらせ」という文字を入れてみます。
更新作業が終了したら、フロッピーディスクのアイコンのボタン(「保存ボタン」)をクリックします。
これで「330-a.htm」ファイルがパソコン上で上書きされました。
(↓図21)
クリック
③更新(修正)した「330-a.htm」ファイルを Web サーバーにアップロード(上書き)
※(図11)~(図16)と同様の手続きにて、ファイルの上書きをします。
(既にサーバープロファイルが登録されているので、図12の「プロファイル設定」画面は省かれます。)
10/10
Fly UP