GoLive CSでホームページ


GoLive CSの特徴

Adobe GoLive CS(以下GoLiveと省略)はHTMLを使わなくてもドラッグ&ドロップで簡単にホームページを作成することができるソフトです.文章や画像などをデジタルで持っていれば,ワープロとレイアウトソフトを使う感覚でホームページが出来上がります.

GoLiveの使い方をマスターするには,サイト・ウインドウとドキュメント・ウインドウを理解することです.サイト・ウインドウは,ホームページを構成するファイルとリンクさせるURLの一覧などを納める場所です.サイト・ウインドウが最も基礎的な概念です.サイト・ウインドウに登録したファイルをダブルクリックするとドキュメント・ウインドウが開きます.このドキュメント・ウインドウで文字の入力や画像のレイアウトを行います.

GoLiveで作成したサイトは,SafariやFireFox等のブラウザで動作確認をすることになっています.編集メニューの環境設定でブラウザを指定します.

新規サイトの作り方[top]

GoLiveを起動後,問いかけのウインドウが現れるので,順に「新規サイト」→「シングルユーザ」→「ブランクサイト」を選び,「新規サイト名」の欄ではサイトに付ける名前を入力します.通常はあなたの名前を英文字で入れてください.例えば「sasayama」.次に保存する場所をきいてくるので,「参照」ボタンをクリックして,保存するサーバの場所を指定します.サーバ名はホームページです.ホームページサーバの中にあなたのフォルダ(ei.....)があるはずです.保存するフォルダ(サーバ上)を決めて,「選択」ボタンをクリックし,最後に「終了」ボタンをクリックします.「sasayama.site」という名前のサイト・ウインドウが開きます.サイト・ウインドウには「index.html」という名前のファイルが作られています.これがサイトの表紙となるトップページになるファイルです.

この段階で,上で作成したサイト「sasayama」には,sasayama.siteファイルと「web-content」フォルダ,「web-data」フォルダ,「web-settings」フォルダの4つが自動的に作られます.index.htmlファイルをはじめとして,これから作るファイルは「web-content」フォルダに保存されます.その他のフォルダはとりあえず無視してください.「web-content」フォルダ等の名前は変更しないでください.変更するとファイルが開けなくなります.

テキストの入力と色[top]

サイト・ウインドウ内のindex.htmlをダブルクリックすると,index.htmlのドキュメント・ウインドウが開きます.一番上にあるヘッダ タイトルの欄の,「Untitled Page」を消してページのタイトルを入れます.例えば,「Welcome to Sasayama Site」など.このページタイトルがサイトに最初にアクセスしたときブラウザのタイトルバーに現れる文字になります.すべてのhtmlファイルにはページタイトルを付けます.

ドキュメント・ウインドウでテキストを入力するときの注意です.リターンキーの使い方がワープロと異なります.

リターンキー:新しい段落を開始するとき押します.リターンキーを押すと,カーソルが1行あけてとびます.

通常の改行は:shift + return キーです.

なお,すでにワープロ等で文章が作ってあるときは,テキストを開いておいて,レイアウト・ウインドウに文章をドラッグ&ドロップします.

index.htmlファイルは論文のトップページになるので,ここには以下のように入力しておきましょう.

----------------------------------

2005年度 笹山ゼミ卒業論文

論文タイトル

はじめに

第1章 ・・・・・・・

第2章 ・・・・・・・

第3章 ・・・・・・・

おわりに

参考文献

熊本学園大学 経済学部 国際経済学科

学籍番号 12202・・・・

名 前

----------------------------------

文字の大きさを変える

大きさを変える文字列を選んだ後,「文字」メニューから「サイズ」→「+7 から−7」までの中から選択します.見出しだと「+4」ぐらいでしょうか.

文字の色を変える

ウインドウメニューから「カラー」あるいは「スウォッチ」を選んで,それぞれのツールを出しておきます.色をつける文字の部分をドラッグ選択してから,「カラー」ツールの「RGBスライダ」を選び,好みの色を作ります.

あるいは,「スウォッチ」から好みの色の部分をクリックします.

ページの背景の色を変える

ドキュメント・ウインドウの右上にある「プロパティ」アイコンをクリックして「ページプロパティ」を表示させます.「インスペクタ」で「ページ」タブを選びます.「背景」の色をチェックしてあるのを確認して,右横のボックスをクリックするとカラーパレットが現れるので,ここから背景にしたい色を選びます.するとページの背景が指定した色に変わります.

リスト入力
箇条書きで項目を入力するときは,文字メニューから「リスト」を選びます.さまざまなタイプのリスト入力があります.

リスト入力から脱出するには,メインツールバー(一番上にある)の「リストレベルを下げる」アイコンをクリックします.

画像の入力[top]

まず準備として,サイト・ウインドウにフォルダ(例えばimagesという名前)を作っておき,そのフォルダに画像ファイルを入れておきます.このフォルダは,オブジェクト・ウインドウからサイト,フォルダ(左上から4つ目)の順に選んでいきます.フォルダアイコンをサイト・ウインドウにドラッグするとフォルダが作られます.imagesという名前に変更しておきます.

サイト・ウインドウにある画像を,ドキュメント・ウインドウにドラッグ&ドロップするだけでページに画像が表示されます.

ホームページで使う画像ファイルは,JPEGかGIF形式であることが必要です.JPEGかGIFでない画像は,画像処理ソフトPhotoshopで変換しておきます.

JPEGかGIFか
写真など,きれいさが要求される場合はJPEGの方を選ぶべきです.それ以外はGIFでよい.GIFは256色までしか表現できないかわりに,ファイルサイズが小さくてすみます.

ファイルの追加方法[top]

サイト・ウインドウへのファイルの追加は,オブジェクトパレットを使います.オブジェクトパレットの右列の上から3番目にサイトタブがあります.サイトタブをクリックすると下に「一般ページ」アイコンが現れるので,これをサイト・ウインドウにドラッグ&ドロップします.untitled.htmlファイルが作られるので,untitledの部分を変更します.例えば,chapter1.htmlのように名前を付けます.これは論文の1章に相当するファイルになります.ドキュメント・ウインドウでヘッダ・タイトルも変更しておきます.

ワードの文章をコピーアンドペーストで,GoLiveのファイルにもっていくことができます.

ファイルのリンク[top]

目次のページの各項目をクリックすると,その項目のファイルにジャンプするリンクをはります.リンクはドキュメント・ウインドウから,ファイルのあるサイト・ウインドウへ「ポイント&シュート」という操作を行います.

1.ドキュメント・ウインドウの項目をドラッグ選択し,
2.コマンドキー(アップルマークのキー)を押しながら,サイト・ウインドウにあるリンクするファイルにドラッグ(引っ張って)いきます.

ファイルのリンクの確認は,プレビューを選んで行います.

リンクの解除
リンク部分を選んで,メインツールバーの「リンク削除」ボタンをクリックします.

URLのリンク[top]

参照する外部URLは,まずサイト・ウインドウの「外部参照」タブに登録しておきます.その後,ドキュメント・ウインドウから「ポイント&シュート」します.

1.サイト・ウインドウの「外部参照」タブを選ぶ.
2.オブジェクト・パレットの「サイト」タブにある「URLアイコン」を「外部参照」の名前欄にドラッグ&ドロップします.
3.インスペクタで,URLの名前とURLをタイプして,最後にリターンキーを押して確定します.
4.ドキュメント・ウインドウのリンクをはる部分をドラッグ選択して,コマンドキーを押しながら,「外部参照」欄のURLに引っ張っていきます(「ポイント&シュート」).

別ページとしてリンクサイトを表示する方法
ドキュメント・ウインドウでリンク先をクリックして,インスペクタ・ウインドウを出します.インスペクタのターゲット欄で「_blank」を選びます.

メールアドレスのリンク
メールアドレスのリンクもURLのリンクと同じようにできます.違うのは,2.でオブジェクト・パレットの「サイト」タブにある「アドレスアイコン」を選ぶことです.

アンカーによるリンク[top]

ページの途中にリンクさせたいときはアンカーによるリンクを使います.見出しの項目をいくつか作り,その項目をクリックすると,ページの下方にあるより詳しい説明にジャンプさせるようなときに有効です.アンカーを設定して,それにリンクをはるという手順になります.

1.リンクをはる文字の部分をドラッグ選択します.
2.コマンドキーを押しながら,アンカー先に1.で選択した部分をドラッグします.リンクがはられた証拠に,1で選択した部分がアンダーライン付きの青色に変わります.アンカー先には錨(いかり)のマークがつきます.
3.インスペクタ・ウインドウで,アンカーの番号をわかりやすい文字や記号に編集することができます.

アンカーの解除
アンカー部分を選んで,ツールバーの「リンク解除」ボタンをクリックします.

エクセルのグラフを変換する[top]

エクセルで作成したグラフをGoLiveで使うためには,エクセルのグラフをGIF形式に変換する必要があります.
1.エクセルでグラフを作成
2.1のグラフをコピーアンドペーストでPhotoShopへもっていきます.
 (注:Shiftキーを押しながら,編集メニューから「図のコピー」を選びます.)
3.PhotoShopでGIF形式に変換して保存します.GIFに変換するにはイメージメニューから「モード」を選び,ここで「インデックスカラー」を選びます.
インデックスカラーを選んでおかないとGIFでは保存できません.
・問い掛けのダイアログボックスでは「OK」を選びます.
・ファイルメニューでは「別名で保存」を選びます.
・ファイル形式(フォーマット)は「CompuServe GIF」を選びます.
 保存するファイル名は,「chart1.gif」のようにします.
・描画方法では「標準」を選びます.インターレースは少しずつじわじわと画像を表示します.大きな画像のとき選びます.

[top] [インターネットへ戻る]


Mail to: sasayama@kumagaku.ac.jp
Copyright(C) Kumamoto Gakuen University