BlueGriffon3.0 (1/9) BlueGriffonで作るホームペー...

BlueGriffon3.0 (1/9)

BlueGriffonで作るホームページ（Ver3.0.1）

◆サンプル画面

◆準備作業

①フォルダの作成（マイドキュメントの中）

bxn11xxx-Blue Griffon （先頭は学籍番号）

②サンプル写真のコピー

（以下のフォルダを開き、①の中へフォルダごとコピーする）

[public] → [jugyo] → [kenkou] → [太田] → [情報処理Ａ] → campus-photo

◆作成するファイル（先頭は学籍番号）

「トップページ」 bxn11xxx-top.html

「自己紹介」のページ bxn11xxx-jiko-shoukai.html

「お気に入りスポット１」のページ bxn11xxx-spot1.html

「お気に入りスポット２」のページ bxn11xxx-spot2.html

「おすすめリンク」のページ bxn11xxx-link.html

お気に入りスポット１

おすすめリンク

トップページ自己紹介

お気に入りスポット２


１．Blue Griffon の起動

スタート－すべてのプログラム－ BlueGriffon をクリックする

２．Blue Griffonの画面と初期設定

◇文字の入力例

◇設定を変更しておく方がよいもの

メニューのツール－オプションをクリックする

トップページの入力例

バックアップファイルを自動作成しない

（チェックをoffにする）

アンカーを表示する場合はチェックする


２-１．ツールバーと文字の設定

新規ページファイルを開く保存

太字 Bold

斜体 Italic

下線 Underline

左揃え中央揃え右揃え

前景色と背景色

インデントの設定と解除

表作成画像挿入リンク

見出しと段落の設定

見出し１～６

番号が小さいほどレベルが高い

（文字サイズは大きくなる）

CSSスタイル設定

パネル－スタイルプロパティ

デザインを設定する前にスタイル

プロパティを表示させておく


２-２．文字の色と背景色の設定

①変更したい行（たとえば「見出し」を設定した行）をクリックする

②スタイルの適用先を「要素名で指定する」にする

③スタイルプロパティの[色]から、前景色（＝文字色）または背景色をクリックする

④カラーパレットで色を選択する

２-３．画面全体の背景色の設定

①画面左下の<body>をクリックする（画面全体の文字が選択される）

②スタイルの適用先を「要素名で指定する」を選択する

③背景色を設定する（上記と同様の方法）

②

③

④カラーパレット

※特定の行や一部の文字だけに

スタイルを設定したいとき

①


３．ファイルの保存

メニューファイル－名前を付けて保存 → ページの表題とファイル名を入力する

（例）ページの表題 → 文教花子トップページ（日本語名でもＯＫ）

ファイル名 → bxn11xxx-top.html （ファイル名は半角英数字、拡張子は html）

４．ファイルを開く

作成済みのページを開く場合は、ファイル－ファイルを開くで選択する

５．リンクの設定

（例）トップページから自己紹介のページにリンクを設定

文字を反転させた状態で

「リンクの挿入」をクリック

ここをチェックしてから、最後に「ＯＫ」をクリック

「bxn11xxx-jiko-shoukai.html」と指定する

ここをクリックして

ファイルを選択

★外部ページへリンクさせたい場合は、「対象」の欄にURLを直接、入力する

（例）文教大学へのリンクの場合 http://www.bunkyo.ac.jp/ と入力する


６．画像の取り込み

（例）お気に入りスポットのページに画像を挿入する

画像を入れたい場所にマウスをあわせ

「画像を挿入または編集」をクリック

フォルダを選択して、画像ファイル

を指定する

最後に「ＯＫ」をクリック

画像を説明する文字列を入力する。（altメッセージ）

または「空の代替文字列を許す」にチェックを入れる。

（注意）

画像を挿入する前に、そのページに[表題]と[ファイル名]を付けて保存しておくこと

（ファイル名が未定の状態では画像は挿入できない）

（柱）ファイルとフォルダの所在と指定方法

①htmlファイルと画像ファイルが同じフォルダ内にあるとき

画像ファイル名

②htmlファイルと画像用フォルダが同一のフォルダ内にあるとき

フォルダ名/画像ファイル名

③htmlファイルより上位のフォルダに画像用フォルダがあるとき

../フォルダ名/画像ファイル名

私のお気に入りスポット

を紹介します

（注）

表示する画像のサイズ変更

①スタイルプロパティで幅と高さを指定する

または

②マウスで画像をドラッグして調整する


７．表の作成（例）２行×５列の表を作成する

◇表の作り方

◇作成した表の設定変更

表の内側で右クリックして表のプロパティをクリックする

表全体の幅 750ピクセル

高さ 140ピクセル

枠線の太さ 1ピクセル

・設定する部分を選択する

セル or 行 or 列

・設定する位置を変たいとき

前 or 次

文字配置や背景色を指定する

表を作成したい場所にマウスをあわせ、

「表を挿入」ボタンをクリック

２行×５列の表を作成する

※表全体のセンタリングやコピーを行うとき

画面左下の<table>をクリックして、

表全体を選択すると簡単に操作できる

【表全体の設定】【セル・行・列の設定】


８．アンカーの設定とリンク

【ページの途中にジャンプさせる方法】

◆手順１ジャンプ先のページに「アンカー」を設定する

①ジャンプさせたい位置をクリックしておく。

②「アンカーの挿入または編集」をクリックする

③適当な名称を半角文字で入力する（たとえば「seimon」など）

◆手順２ジャンプ元のページに「リンク」を設定する

①リンク元の写真をクリックしておく

②「リンクの挿入または編集」をクリックする

③「bxn11xxx-spot2.html」の文字列に続けて＃とアンカー名を入力する（たとえば「#seimon」）

正門の写真の上位置にアンカーが設定された


９．知っておくと便利なこと

（１）ソースコードを直接編集する

・画面下部にある「プレビュー」／「ソース」ボタンで画面表示を切り替えることができる

・ソース画面上では、HTMLタグやスタイル（CSS）を直接編集できる

（２）色設定時の注意点

・色の設定で「透明度」を指定すると、ブラウザによっては色が表示されなくなる

・その場合は透明度の値を「100」に設定する（透明の設定をしない）

（３）マウスが反応しなくなったとき

BlueGriffonの操作中に、マウスが反応しなくなることがある（ソフトの不具合と思われる）。

文字や画像をクリックしても選択できない場合は、一旦、そのページを閉じたあと、すぐに開き直せば

復旧できることが多い。

透明度を指定できる（100は透明なし）

BlueGriffon3.0 (1/9) BlueGriffonで作るホームペー...

Documents

Transcript of BlueGriffon3.0 (1/9) BlueGriffonで作るホームペー...