ホームページ講習会テキスト
Mac OS 編
2002.1.16 浅川
目次
はじめに
１．Netscape Communicator 4.7 の Composer での HTML 書類の作成｡ ２．FTP によるサーバへのファイルのアップロード 付録 MS-Office2001 での HTML 書類作成方法 はじめに 現在のインターネットでは､インターネットエクスプローラやネットスケープコミュニケータなどのブラ ウザーで情報を検索して､表示する WWW サーバクライアントシステムが標準となっています｡これは､ブラ ウザーで WWW サーバに接続して､目的とする書類を送ってもらい､ブラウザーがその書類に書かれている 書式で画面を作って表示するというシステムです｡
やりとりする書類は HTML(Hyper Text Markup Language)という言語で書かれていますが､ファイル形 式はテキストファイルです｡ この HTML 書類を作って､その書類を発送するサーバのディレクトリに置くことで､ホームページが公開 されることになります｡ HTML 書類は､HTML 言語がわからないとまったく作成できないということは､ありません｡HTML エデ ィターと呼ばれる専用ソフトが無償でも手に入り､これはワープロ感覚で操作できるようになっています｡こ れで HTML 書類を作成しサーバに送ります｡ サーバ上には既に､皆さんのディレクトリが用意されていて､LAN 利用申請書に書かれている初期パスワ ードで､アクセスが可能です｡
本講習会では、Netscape Communicator の Composer 機能を使って､ HTML 書類の作成方法 大学の WWW サーバへの書類の転送方法 について実習します。 また､最近のワープロは､その画面通りに表示されるように HTML 書類を生成する機能を持っていますの で､ワープロ文書を簡単に HTML 書類に変換できます｡MS Office の書類を HTML 化する方法を付録に載せ ました｡
1．Netscape Communicator 4.7 の Composer での HTML 書類の作成｡ 1-1．Composer の起動とデータの取り込み 1-1-1．ファイル収納用の自分の id を名称にしたフォルダの作成 まず､フロッピーディスクに LAN のユーザ名と同じ名前のディレクトリを作成します｡
Netscape Communicator は､Netscape 社製のブラウザですが､メールや
HTML エディタとしての機能を持つコンポーネントを含んでいます｡ここでは､HTML エディタである Composer を使用します｡
1-1-2．Netscape Communicator 4.7 の起動と Composer の開始｡ 1-1-3．Word を起動し､皆さんが用意したファイルを開いてください｡
1．フロッピしまーディスクのウィンドウ内をクリックして､
アクティブにします｡
2．ファイルメニューから新規フォルダを選択すると名称未
設定フォルダが作成されます｡ (右図参照)
3．その名称は反転していますので､自分のユーザ名 (例えば
asakawa)を入力します｡
1．Netscape Communicator 4.7 を起動します｡
2．Composer
を開きます｡ (右図参照)
3．白紙のウィンドウが現れますので､ index.html と
名前を付けて先ほど作った自分のフォルダに保
存します｡
1-1-4．Composer のウィンドウに､1 行１列の表を作成します｡ ・枠線を 0 ピクセルにすると表の枠は表示され ません｡ ・配置を中央にするとこの表が真ん中に表示されます｡ 1-1-5．表の設定をします｡
1．Composer
の上部の表作成アイコン(上
図)をクリックします｡
2．現れたウィンドウで右図のように設
定します｡
3．挿入ボタンを押します｡
1．
表の中をクリックします｡
2．書式メニューから｢表の情報｣を選択します｡
(右図参照)
3．ウインドウの｢セル｣の項目で､
縦の左をチェックし
横の上をチェックします｡
(次ページの図参照)
4．OK ボタンを押します｡
文字の表示位置を決めています｡ 1-1-5． Word で開いた皆さんの書類を Composer の表にコピーペーストします｡ 画像をコピーペーストする場合は､画像を保存するフォルダを聞いてきますから､index.html が保存されているフォルダを指定します｡ 1-1-6． Composer の表の中のテキストなどを調整します｡ Composer の操作については次の項を参照してください｡
1-2．Composer の基本操作 1-2-1．Composer の操作アイコン Composer のウィンドウの上部には下記のような操作アイコンが並んでいます。 下図にはそれらの機能も表示してあります。 今回はここに出てくる機能を使って、ホームページを作成します。 1-2-2．ページの編集作業 ホームページ書類はこの画面に表示されたとおりに、ブラウザーで表現されます。操作はほぼワープロの 画面とほぼ同一です。 消去 --- マウスで消去範囲を選択して、delete キーを押します。 コピー -- マウスで消去範囲を選択して、コピーアイコンを押します。 カット -- マウスで消去範囲を選択して、カットアイコンを押します。 ペースト -- マウスで挿入位置を選択して、ペーストアイコンを押します。 先ほどのメニューアイコンの下側のものを利用して、 文字スタイル 、大きさ、色指定、太字(ボールド)、イタリック、下線 にできます。 また、インデントや左右中央寄せ もできます。 操作方法は、共通して、操作範囲をマウスで選択してから、アイコンを押します。
1-2-3．背景色、背景画像の設定 ページの背景の色を設定したり、背景にそれようの画像を張り付けたりすることが出来ます。これによっ て、少しは見やすいページになります。 ◎背景色の設定 注意 、 色の選択を誤ると文字が判別できないような事態になりますので、注意して下さい。その場合は、 変更直後に編集メニューから「取り消し」を選択すると、背景は元に戻ります。 ◎背景画像の設定 背景として特定の画像ファイルを設定することが出来ます。
1．メニューバーの「書式」を開き、「ページのプ
ロパティ」を選択します。(右図参照)
2．現れる「ページのプロパティ」ウィンドウの
なかで、ユーザ定義をチェックし、「背景」を
ダブルクリックします。 (下図参照)
3．現れる色選択ウィンドウの中で、適当な色を
選択します。色を選択すると新規の所に選択
色が表示されます。 (右下図参照)
4．色選択ウィンドウの OK ボタンを押します｡
5．
「ページのプロパティ」ウィンドウの色が変
わりますので､文字の表示を確かめた後､ OK
ボタンを押します｡
このように､gif タイプか jpg タイプの背景画像を用意しておき､適当な画像背景を設定することが出 来ます｡ 1-2-4．画像の挿入 ホームページに新たに写真や画像をいれたい場合があります。 やり方は色々ありますが､最も簡単な方法を示します｡挿入できる画像のファイルタイプは、gif および jpg です。 ・ドラッグすると画像ファイルはそのページが保存されているのと同じフォルダにコピーされます｡ ・コピーペーストすると､保存するホルダとファイル名の入力を求められますので､必ずホームページ書類を
1．メニューバーの「書式」を開き、「ページ
のプロパティ」を選択します。
2．現れる「ページのプロパティ」ウィンドウ
のなかで、ベージ背景の画像をチェックし
ます。既に設定されている場合は「ファイ
ルを選択」ボタンを押します。(右図参照)
3．画像ファイル選択ウィンドウが現れますか
ら、図のように wood3.gif を選択し、開く
を押します。 (下図参照)
4．
「ページのプロパティ」ウィンドウの OK
ボタンを押します｡
1．画像を適当なアプリケーションで表示させます｡
例えば､ブラウザーを開いてください｡
2．その中の画像を Composer 画面にドラッグします｡
2．或いは､Composer 画面にコピーペーストします｡
保存してあるフォルダを指定します｡ ・さらに、表示された画像をダブルクリックしますと書式ウィンドウが開きます。 このウィンドウで、画像の大きさ、画像周辺の空白の大きさが変えられます。 ・画像の消去は､画像をクリックして選択し、delete キーを押します。 1-2-5．リンクの作成 ホームページをみると青くなった文字列がみられます｡これらの部分にカーソルを持っていくとカーソル の形が｢指マーク｣に変わります｡ここは､リンクがはられている箇所です｡ここで､クリックすると､リンク先 の画像や新しいページなどが表示されます｡このような方法をハイパーリンクといいます｡ リンクは、文字列、画像に作成することが出来ます。 ◎リンク作成方法 ・この場合は､リンク先に asakawa の URL を指定しました｡ ・画像を指定する場合には､｢ファイルを選…｣ をクリックして､表れるファイル選択画面で､ リンク先のファイル名をクリックして反転さ せ、開くボタンを押します。 リンク先ファイルには HTML 書類ファイル、 画像ファイルなどを指定できます。 ◎リンクの削除 作成と同様に範囲選択の後、リンクアイコ ンを押して、現れる書式ウィンドウで、「リン クを削除」のボタンを押します。
1．リンクを作成する、文字列、或いは画像を
選択します。(マウスでドラッグ、或いは、
クリックによって反転させる。)
(右図参照)
2．リンクアイコンをクリックします。 (右図
参照)
3．現れた書式ウィンドウの中で、リンク先(フ
ァィル､ URL,ターゲットなど )を指定しま
す｡ (右下図参照)
4．書式ウィンドウの OK ボタンを押します｡
注意 リンクされたファイルや挿入された画像ファイルは、HTML 書類上では、どのディレクトリにある何と いう画像がここに入るよというふうに指定されています。従って、リンク作成や画像の挿入後、該当ファイ ルを別なディレクトリに動かすとリンクは切れてしまい、ジャンプや表示が出来なくなります。 従って、前もってファイルの位置を確認し、ディレクトリの位置関係を変えないように、サーバに送り込 みます。 1-3． Composer の詳しい使い方 メニューバーのヘルプをあけると「ヘルプの目次 」と「リファレンスライブラリ 」があり、それらを 使って、Composer の使い方を調べることが出来ます。
２．WWW サーバへの転送( アップロード)方法 作成したホームページデータは WWW サーバの適当なディレクトリに転送することによってはじめてイ ンターネット上から閲覧できます。 2-1．Netscape Communicator による転送 Netscape Communicator 日本語版 4.7 (無料)には、サーバにファイルを送り込む FTP 機能があります ので、これを利用してサーバに作成したファイルをアップロードします。
これを、Netscape Communicator の用語ではPublish (出版)といいます。
*必要データ 1) WWW server の名称 a-com.asa.hokkyodai.ac. 2) その中の自分のディレトリへのパス パス /export/http/htdocs/research/staff/asakawa/ ここは各自の ディレクトリ名 ⇧ 各係りの場合､ /export/http/htdocs/kyomu/ 附属学校園の場合､ /export/http/htdocs/fuzoku/fusho/ 3) Login 用 id asakawa --- (ATSON1 で使用しているもの｡) 4) Login 用パスワード XXXXXX --- (LAN 利用申請書の初期パスワード)
1．ファイルメニューから出版を選びます｡(右図参照)
2．開いた出版ウィンドウでサーバ、id 等の設定を行います。(右
図参照)
3．現れた書式ウィンドウの中で、リンク先 (ファィル､URL,ター
ゲットなど)を指定します｡
・
出版する場所 には、下記のようにサーバ名､パス､文書ファ
イル名を､改行せず続けて記入します。
ftp://a-com.asa.hokkyodai.ac.jp/
export/http/htdocs/research/staff/asakawa/i
ndex.html (次ページ図参照)
・ ユーザ名欄､パスワード欄に
Id, パスワードを記入します｡
・どのページを送るか等を、図のように「含めるファイル 」
のところで指定します。1 ページだけ直した場合は､ページに
関するファイルにチェックし､そのページのみを指定します｡
4．出版ウィンドウの出版ボタンを押します｡
ウインドウが現れても､OK を押してください｡
・「含めるファイル 」のところでの指定のやりかた。 普通は、「ページに関連するファイル」を選択しますが、ディレクトリ全体を送るときや複数のファィ ルを送るときは、「ページのフォルダ内の全てのファイル」を選択し、さらに、「選択しない」ボタンで 送りたくないファイルを除外します。 今日は、「ページのフォルダ内の全てのファイル」を選択し、その中で、リンクのはってあるファイル のみを送ります。そうすると、html 書類とともに画像ファイルも同時に転送されます。 ・Composer では、一度転送場所のディレクトリ名を入力すると、次回から、利用した転送場所を、一覧 で手軽に選択できます。［標準の場所を使用］ボタンをクリックすると、Composer の設定ダイアログ ボックスの出版パネルで指定されている場所が使用されます。このほうが場所が固定しているなら楽で す｡
2-2．ブラウザーによる確認 ファイルの転送後、ブラウザーできちんと表示されることを確認します。 皆さんの URL は､ http://www.asa.hokkyodai.ac.jp/research/staff/xxxxx/ です｡Xxxxx には､皆さんの id が入ります｡ 各自､ブラウザの場所(Netsite:)に次のように､下線部を id 名にして記入し､リターンキーを押します｡ ・この様に作業を行うことにより、いつも作業するコンピュータには自分のホームページのデータのバック アップが存在することになります。そして､今後の作業としては、まずパソコン上のバックアップのデ ィレクトリー内で、HTML 書類を作り、それをサーバに転送し、常に、Mac の中のファイルとサーバ の中のファイルを一致させるようにします。
3．付録 MS-Office2001 での HTML 書類作成方法 ワープロの Word で文章を作成し、保存するときに、HTML 書類として保存します。 MS Office2001 からの自動的な HTML 書類の作成は､今のところ少し限界があり､Word の場合は､全部が 一つのページになったり､Word 上でリンクがはりずらかったりします｡そこで､HTML エディターを用いて､ さらに HTML 書類を加工する必要があります｡ 3-１．MS Word2001 からの HTML 書類作成 1．ファイルメニューから皆さんが用意した文書を読み込みます。 文章の文字の大きさは､10 ポイントぐらいではブラウザでみて小さすぎますので､12 ポイント以上が適 当です｡ 2．ファイルメニューから「Web ページとして保存…」を選びます。 ファイル保存用のウィンドウが開きます。 3．先ほど作成した自分のユーザ名のフォルダを指定します｡ さらにファイル名前をつけます。ファイル名はブラウザで開くことを考えて、半角英数字で付け、html 書類であることを示すために、.html とつけます。 今回は、index.html として下さい。このファイル名は皆さんのホームページのトップページになる特 別の名称です 4．保存ボタンを押します。 警告メッセージがでる事がありますが、OK を押して下さい。 ５． ブラウザを起動して、出来た HTML 書類を表示します。 この様にして出来た HTML 書類は複数ページが繋がって 1 ページの長いホームページになります。
フォルダ中に、Word 書類が図を含む場合には､エクスプローラ書類(HTML 書類)と別のフォルダに gif ファイルができます。
gif ファイルは、HTML 書類にリンクしていますので、これらは常に同じフォルダに置いておきます。
１-2．MS Office2001 の Excel, PowerPoint からの HTML 書類作成
これも､Word と同様に､一度書類を開いた後､ファイルメニューから「Web ページとして保存…」を選 びます。そして保存先を指定します｡Excel の場合､ブック全体か､シートかを選択して､保存します｡ PowePoint でも同様です｡
