ホームページ作成

1．ホームページビルダーでサイトを作る工事中

1-1 トップページを作る
トップページとはホームページの最初のページです。最初にトップページを作り、次にトップページの下の階層にくるページを作り、トップページから下の階層のページにリンクを貼り、トップページをクリックすると下の階層のページが見られるようにします。その逆、即ち下の階層のページからトップページにリンクを貼ることもできます。

最初にマイドキュメントの中に例えば「jitensha_hp」と云うフォルダを作ります。ホームページを構成するfileは全てここに入れなければなりません。

ホームページビルダーを開くと上の画面が出ます。「ホームページビルダー14へようこそ」の画面が出たら下二つ目の画面を見て下さい。

ファイル/標準モードで新規作成を選びます。→下三つ目の画面になります。


エディターズをクリック

標準モードをクリック。下の画面になります。


白い画面にポインターを置いて右クリック。下の画面が出てきます。

属性の変更をクリックして下さい。その中から「ページのプロパティー」をクリックして下さい。

ページタイトルは非常に重要な項目です。このページを「お気に入り」に入れたときに着く名前がここで入れたページタイトルです。また、Googleなどで検索した時に表示されるリストの名前もページタイトルになります。

背景/文字色タブを選び、例えば上記の様に色を指定し、OKを押します。

改行マークを二つ位入れて次のところに表を入れます。画面左の「表の挿入」を押します。

例えば、行数4、列数1、枠を表示しない、を選びOKを押します。

上の様な表が出来ます。

表を選択し、画面上4行の左端の「標準」の右のボタンで中央揃えにします。そして、緑の画面を右クリックし、属性の変更をクリックし、表を選択します。

属性の変更では上の画面のリンクと出ている窓の右端の下向き矢印をクリックすると、いくつかのメニューが出てきます。必要なものを選択して下さい。ここでは表を選択します。

表の幅を例えば750ピクセル、枠表示をなし、にします。

最初の行に「自転車ホームページ」と入力します。

「自転車ホームページ」を選択します。

中央揃えボタンで中央に配置します。

太字ボタン「Ｂ」と文字サイズ拡大ボタンAを押して文字を太く大きくします。

上の様になりました。

次に「1．トルコ自転車旅行」などこのトップページの下に来るページのタイトルを書きます。ここでとりあえずページを閉じます。（画面上のXで閉じる）次の画面が出ます。


「はい」をクリックします。



ファイルの場所は窓右側の下向き矢印でマイドキュメントに最初に作っておいた jitensha_hp を選択し、file名はnewpage1.html ではなく index.html にします。トップページは必ず index.html でなければなりません。

「jitensha_hp」と云うフォルダにトップページの「index.html」が入りました。

2．リサイズ超簡単をインストールする

「リサイズ超簡単」と云う無料ソフトをdownloadする。
画面の左中央にあるリサイズ超簡単！Pro Ver.3.17をダブルclick。

■ダウンロード

　リサイズ超簡単！Pro Ver.3.17　NEW !

下の画面が出てきます。

「リサイズ超簡単!Pro」であることを必ず確認後
「このソフトを今すぐダウンロード」のボタンをクリックします。

次の画面が出てきます。
download が始まらない場合は赤矢印のところにある「こちらをクリックして下さい」をクリックします。
またはパソコンの設定によってはdownloadの許可を求める場合があります。画面上の吹き出し?画面に注意して下さい。
ダウンロード後、実行・保存を選択する画面が出ます。
実行をクリックするとinstallが行われます。
保存を押して、デスクトップに保存されたfileをダブルクリックしてもinstallは行われます。どちらでもOKです。

インストールが終わるとデスクトップにショートカットができます。
これをダブルクリックして下さい。下の画面が出てきます。
画面左上のファイル選択、またはフォルダ選択をクリックしリサイズしたいfileを指定します。

ホームページと云うフォルダを作りその中にfile二つ入れてあります。
その二つのfileを指定しました。
画面右の横サイズ優先でサイズを750ピクセルに指定しました。
そして画面右下の「変換開始」ボタンを押します。

「リサイズ処理が完了しました。」のmessageが出ます。

リサイズするfileを入れてあった「ホームページ」と云うフォルダの中にResizeと云うフォルダが出来ています。その中にリサイズされたfileが入っています。

Resizeと云うフォルダを開いた中味です。R.jpgはリサイズされたfileです。

3. Print Screen Manager をインストールする

「Print Screen Manager」と云う無料ソフトをdownloadします。。

下の画面が出てきます。

「このソフトを今すぐダウンロード」のボタンをクリックします。

次の画面が出てきます。
download が始まらない場合は「こちらをクリックして下さい」をクリックします。

またはパソコンの設定によってはdownloadの許可を求める場合があります。画面上の吹き出し？画面に注意して下さい。
ダウンロード後、実行・保存を選択する画面が出ます。
実行をクリックするとinstallが行われます。
この場合、コンピュタが壊れていてinstallできない等と云うmessageが出てinstall出来ない場合があります。その際は実行・保存を選択する画面に戻り保存を押して、デスクトップに保存されたfileをダブルクリックしてもinstallは行われます。

インストールが完了するとデスクトップに「psmv.exe へのショートカット」というショートカットができます。
それをダブルクリックすると下の画面の左から二つ目の画面がデスクトップ右上に出ます。

そこに4つのボタンがあります。その機能を説明します。下の画面の左から2，3番目の画面を交互に見ると分かりやすいでしょう。

左のPrint Screen：パソコンの画面を取り入れる時に押すボタン。
左から2番目：キャプチャー範囲
　　　　　　　　　　　TVの絵：全画面を取り込む
　　　　　　　　　　　fileの絵：
　　　　　　　　　　　　　　全画面の中に開いている現在
　　　　　　　　　　　　　　使用しているソフトの画面を取り込む
　　　　　　　　　　　　　　（例えば、メール画面）
　　　　　　　　　　　　　　（アクティブ・ウインドウ）

左から3番目：イメージ出力先
　　　　　　　　　　　TVの絵：パソコン画面に出す
　　　　　　　　　　　黄色フォルダーの絵：ファイルとして出力する
　　　　　　　　　　　　　　　　　　　　　　　　　（通常の設定）
　　　　　　　　　　　プリンターの絵：印刷する

MENU↓↑ボタン：下の画面を出したり閉じたりする
この画面を閉じる時は右上の小さなxボタンを押す

通常は
キャプチャー範囲を全画面かアクティブ・ウインドウ
イメージ出力先をファイルに設定します。
「オプションを表示」の窓にチェックを入れて出てくる画面のイメージの種類でJPEG形式を指定しておきます。

そして一番左のPrint Screenを押すとファイル保存の画面が出ますので適当なフォルダに保存して下さい。jpegファイルとして保存されます。

アクティブな画面を取ろうとしたうまく行かないときは、取ろうとする画面を一度クリックしてからPrint Screenボタンを押すと取れることがあります。
このソフトに慣れるためには全画面設定にしておくのがよいでしょう。

画面が消えてしまうとき。
ドロップダウンメニューにポインターを置いた画面をPrintScreenしようとしてポインターをPrintScreenのアイコンに持って行くとドロップダウンメニューが消えてしまいます。
そのようなときはキーボードのPrintScreenを押して下さい。PrintScreen Mａnager で取り込んでいると時と全く同様に取り込まれます。

4. Photoshopをインストールする工事中

4-1．インストール

4-2．画面の説明

4-3．画面の切り抜き

4-1．インストール

CDを入れると最初に出てくる画面です。

Adobe Photoshop(R)5.5を選択し、インストールをクリックします。
下の画面が出てくるのですが、上の画面に隠れている場合があります。その場合は上の画面を移動されて下さい。

次へをクリックします。

日本を選択します。

「はい」を選択。

「標準」を選択。

ここでJPEGを選択し、登録しないの窓に●を入れて下さい。
そうしないとJPEGをImageReadyで開く設定になり、画像が立ち上がるのに時間がかかってしまいます。

後は指示に従ってインストールして下さい。

4-2．画面の説明

インストール後、Photoshopのショートカットがデスクトップ上に出来ているのでこれをclickして立ち上げると次の画面が出てきます。

Photoshopを立ち上げるのにショートカットをclickする方法以外に上のような方法があります。
即ち、Photoshopで開きたいfileを右クリック。プログラムから開く/Adobe Photoshopを選択。するとfileがPhotoshopで開きます。

Photoshopの最初の画面左側にあるツール群を拡大し下の画面で説明します。

選択　　：切り抜く範囲等を指定。
消しゴム：消しゴム
ライン   ：線を引く
手のひら：画面を移動
移動     ：画面上に文字を書いたりしたとき、その文字を移動させる
ブラシ   ：輪郭がぼやけた線を引く
鉛筆     ：輪郭がハッキリした線を引く
文字     ：画面に文字を書く
スポイト：画面の色、カラーパレットの色を選択する
拡大     ：画面の拡大。Altを押しながら使うと縮小

なお、選択ツールのボタンには右下に小さい▼があります。このボタンをclickすると○等の選択ツールが出てきます。

画面の左側でブラシボタンを選んだとき、線の太さをこの画面で選択する。

画面左側でスポイトを選んで、画面右側にある色見本画面で色を選択する。

ここから上3枚目にある画面を作成する際、画面に「→鉛筆」などと「文字ツール」を使って書いて行く。その際、上に示したように、レイヤータブには上の様な画面が出てくる。
即ち、書いた文字はレイヤーになり、その重なったものが画面として表示される。即ち、透明なフィルムに各々「背景」、「ブラシ→」、「←鉛筆」、「選択→」と書き、それを重ねたものが画面に表示される。
従って、例えば「←鉛筆」を削除したり、修正するのは簡単にできる。

4-3．画面の切り抜き

画面上の点線で囲まれた部分を切り抜くには、画面左下にある、選択ツールで点線の部分を囲む。

次に画面に上部にある「イメージ」をclickすると上の画面になる。「切り抜き」をclickすると先に点線で囲んだ部分が切り抜かれる。

ファイル/複製を保存を選択。

画面左にある「複製を保存」をクリックし、出てくる画面で
・保存する場所を指定し
・「別名で保存」の窓の右にある▼を押して、ファイル形式を選択する（ここではJPEGを選択）
・「ファイル名」にファイル名を入れる（半角の英数字等）

保存ボタンを押す。

OKを押す。これで切り抜いた画像が保存された。