ホームページの作り方 講習会テキスト

Similar documents
ホームページの作り方 講習会テキスト

目次 1. ホームページ公開のしくみ... J3 2. ホームページ公開直前チェックリスト... J4 3. FTP クライアント について... J5 4. 公開の方法その1: ホームページ ビルダー 16 を使う... J6 5. 公開の方法その2: FFFTP を使う... J8 6. トラブ

< F2D837A815B B835789DB91E882542E6A746463>

ホームページの作り方 講習会テキスト

スライド 1

目次 1. ホームページ公開のしくみ ホームページ公開直前チェックリスト FTP クライアント について アップロード 方法その1: ホームページ ビルダー 19 のファイル転送ツールを使う 方法その2: FFF

<4D F736F F D208CC2906C A815B B CC8EE888F882AB2E646F63>

ホームページ 作成編                                                              (ホームページ・ビルダー19)

ホームページ公開方法

第21章 表計算

目次 1. ログイン ログアウト デスクトップ ( 例 :Word Excel 起動中 ) Dock( 例 :Word Excel 起動中 ) Finder ウィンドウ メニューバー ( 例 :Word 起動中 )...

更新履歴 変更履歴 版数 リリース日 更新内容 第 1 版 2017/5/15 第 1 版発行 第 2 版 2017/7/13 更新履歴 変更内容を追加 (2ページ) 編集の前に を追加(8 ページ ) ブロックエディタ スマートモード エディタモード の説明を追加 (10~12 ページ ) ブロッ

Microsoft Word A02

Microsoft Word - macマニュアル【 】.doc

ホームページの作り方 講習会テキスト

Microsoft Word - ニュース更新システム(サイト用).docx

共済会_Kねっと利用マニュアル(2018).indd

(3) 本文を書く 実際にページを開いたときに表示される本文を書いてみましょう から の間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存する ここで一度ページを保存してみましょう テキストエ

「旅日記」

20180308森の日県南支部 林

設定をクリックしてください 初期設定をクリックします

Microsoft Word - 1_基本編-1章

PowerPoint プレゼンテーション

スライド 1

地域ポータルサイト「こむねっと ひろしま」

すると メインメニューと呼ばれる DC さくらのメインウィンドウ部が表示されます ( 下の画面がスクリーンシ ョットです ) メインメニューは ウィンドウ右上の ボタンを押すと閉じます リスト内のアイテムは ダウンロードのタスクを表します ダウンロード状況を把握できます メニュー項目やボタンの説明は

目次 新規ユーザー登録... 3 初期設定... 6 (1) 特定商取引法に基づくページのURLを設定する... 7 (2) コンバージョン測定タグを設定する... 7 サイトを作成してみよう

引き算アフィリ ASP 登録用の日記サイトを 作成しよう Copyright 株式会社アリウープ, All Rights Reserved. 1

Ⅴ ブラウザーの使い方 V. ブラウザーの使い方 起動 終了 画面説明 ホームページ移動 リンクを使って移動 アドレスバーからの移動 ボタンでの移動

SILAND.JP テンプレート集

目次 Ⅰ. はじめに 1. 店舗ページの説明 2. 編集画面へのログイン 3. 編集画面メニューの説明 Ⅱ. 情報の編集方法 1. 編集の大まかな流れ 2. PR 情報の編集方法 1) PR 情報編集画面の表示 2) 文章の変更方法 3. 店舗情報の編集方法 1) PCに画像を準備する方法 2) 店

情報処理

ふれんずらくらく流通図面マニュアル

この操作説明書は 中央学院大学 ( 以下 本学 という ) の組織 団体 学生 教職員が本学内に設置してある Web サーバに FTP ソフト ( 名称 :FFFTP) を使用して ファイル ( データ ) のアップロード ( 転送 ) 及びダウンロード ( 保存 ) 手順について説明したものです

PowerPoint2003基礎編

このうち ツールバーが表示されていないときは メニューバーから [ 表示 (V)] [ ツールバー (T)] の [ 標準のボタン (S)] [ アドレスバー (A)] と [ ツールバーを固定する (B)] をクリックしてチェックを付けておくとよい また ツールバーはユーザ ( 利用者 ) が変更

V.ブラウザの使い方

4. [ 画像に関する機能 ] 画像に関する機能としては 大別して [ 画像の [ 挿入 ] に関する機能 ] と [ 画像の [ 編集 ] に関する機能 ] があります [ ウエブアートデザイナー ] による機能 [ 画像の挿入 ] [ 編集 ] [ 写真 ] を選択して 画面の指示に従って進める

使用上のご注意 本ソフトウェアを使用している場合は 管理者権限のユーザーアカウントが必要です 本ソフトの利用には ADSL FTTH CATV などのブロードバンド接続が必要です 本書のマーク このマークの欄は ご注意いただく内容です このマークの欄は 補足説明の内容です

「MT-3_2-ja

Microsoft Word - NEWSマニュアル docx

Word編2 宛先の氏名を入力する職人編宛名を入力するための画面が表示されます 姓と名の間にスペースを入れて氏名を入力します ボタンをクリックして敬称を選びます [ 連名 情報 ] タブをクリックします 必要に応じて [ 名前 ] 欄をクリックして連名を入力します 3 宛先の住所を入力する [ 自宅

ホームページ・ビルダー16

教材ドットコムオリジナル教材 0から始めるiアプリ (3) 0 から始める i アプリ (3) i アプリを作れるようになったならば次は公開です i アプリでは前述したように たとえエミュレータで動作確認ができたからといって実機のテストを怠ってはいけません 実機での処理速度 発色 プログラム等の耐性

製品を使う前に基本操作インターネットアプリケーション Q&A 付録 Web Internet Explorer の使い方 1 Web Web Windows Internet Explorer Web Internet Explorer Internet Explorer を ❶ 起動する Inte

Microsoft Word - P doc

FutureWeb3 Web Presence Builderマニュアル

page1.doc

取引上手くん 9 のインストール時にエラーが表示される際の対処法 ~Windows8 Windows8.1~ 本ドキュメントは Windows8/8.1 のパソコンにおいて 取引上手くん 9 のインストールが正常にできなかった場合の対処 法をまとめたものです なお インストールの手順そのものにつきま

Taro-02_Web_html自習テキストⅡ.

ホームページ・ビルダー16

FTP ウェブコンテンツダウンロード手順書 ver1.0 作成 :KDDI 株式会社 作成日 :2018 年 10 月 31 日

旅のしおり

2 COPYRIGHT TempNate. ALL RIGHTS RESERVED.

目次 1. はじめに - ログインとトップ画面の見方 各種の設定について ログインしましょう トップ画面の見方について ユーザー情報を設定しましょう パスワードを変更しましょう 電子会議室のメール配信設定をしま

2/10 ページ 対象画像の選択 エルスプローラなどで対象の ( 縮小する ) 画像が入っているフォルダーを開きます 例えば 次の通りです 例では 下のフォルダーから反転しているファイル ( つまり 2006_ JPG ) を縮小するものとします 以下の説明では 対象画像 と呼びます

ランタイム版 Pro 版共通 症例登録システム 2018/12/11 Q & A 目次 1. 起動時のエラー... 2 Q11. " ファイル jsgoe_data3.fmp12 を開くことができません" と表示されます (Windows) 2 Q12. ショートカットから起動できません (Wind

目次 メールの基本設定内容 2 メールの設定方法 Windows Vista / Windows 7 (Windows Live Mail) Windows 8 / Windows 10 (Mozilla Thunderbird) 3 5 Windows (Outlook 2016) メ

■ ジャストスマイルワープロ講座 ■ 新聞を作ってみよう

フレーム ページの作り方 那須シニアネット三宅節雄 今回は那須シニアネットのホームページと同様に 1バナーとホームページのタイトルなどを入れた top.html 2スライドショーなど構成するページの名前の一覧から各ページへリンクさせた menu.html 3 取り敢えず表紙を飾った main.htm

2 1: ネットワーク設定手順書 が完了後に行なってください 鏡野町有線テレビ 各種設定手順書 この手順書では以下の内容の手順を解説しています メール設定 ホームページの掲載 お客様がご利用の OS により設定方法が異なる部分があります OS をご確認の上 作業を行なってください お客

2004年度情報リテラシーⅢ

住所録を整理しましょう

Microsoft Word MT操作マニュアル(ユーザ編).doc

IE5及びOE5の設定

ポストカード

Turph汎用フォーマット

Windows ユーザー名に全角が含まれている場合は インストールできません のエラーが表示される場合の対処法 手順 1 管理者権限のある Windows ユーザーでログインした上で 以下の処理を行ってください 画面左下の 旗のマークを左クリックし 続いて表示される一覧から 設定 ( 左側に歯車のよ

Word2013基礎 基本操作

2 / 25 複数ソフトの組み合わせ テキストファイルを Excel で開く テキスト形式 (.txt) で保存したファイルを Excel で利用しましょう 第 14 講で保存した west.txt を Excel で開きます 1. Excel を起動します 2. [Office ボタ

目次 新規会員登録 P.3 ログイン P.6 管理画面について P.7 研究情報の編集 P.8 お知らせの新規追加 編集 P.10 メディアの新規追加 編集 P.12 会員情報の編集 P.14 2 / 16

Web メール画面の表示 Web メール画面の表示 Web メール画面の表示方法について説明します Web メール画面を表示する 1 利用者メニューを表示し メール確認 または Web メール をクリックします 利用者メニューの表示方法 利用者メニューにログインする (P.24) 2 Web メール

PowerPoint プレゼンテーション

1. WebShare 編 1.1. ログイン / ログアウト ログイン 1 WebShare の URL にアクセスします xxxxx 部分は会社様によって異なります xxxxx. 2 ログイン名 パスワードを入力し

目次 新規会員登録 P.3 ログイン P.6 管理画面について P.7 研究情報の編集 P.8 お知らせの新規追加 編集 P.10 メディアの新規追加 編集 P.12 会員情報の編集 P.14 2 / 16

やさしくPDFへ文字入力 v.2.0

完成見本 罫線表を使用して 会計報告書 を作成しましょう 1 / 15

Microsoft Word - Word1.doc

新規インストールガイド Microsoft Office Professional Plus 2016 本書は Download Station から Microsoft Office Professional Plus 2016( 以下 Office) をダウンロ ドし 新規インストールを行う手順

履歴 作成日 バージョン番号 変更点 2016 年 9 月 19 日 新システム稼働本マニュアル ( 初版 ) 2016 年 10 月 6 日 システム公開に伴う 初版最終調整 2016 年 11 月 7 日 添付ファイルの公開設定について 追加 2

5.1. ホームページ登録 ホームページ URL を登録します ホームページ URL は基本契約で 1 個 (100MB) まで無料 2 個目以降は有料オプションサービス ( 月額 300 円 / 個 ) で追加登録が可能です (1) 左メニューの HP アカウント登録 リンクをクリックします (1

目次 管理画面へログイン 3 採用情報の投稿 4 採用情報の入力方法 5 トップページの項目の編集 6-9 メディアライブラリ 10-11

編集 キャンバスの設定をクリックします キャンバスの設定ダイアログが表示されますので幅 300 高さ 50 と半角で入力します 下の画像のようにキャンバスのサイズが変更されました 画像を選択します 右側中央 の上にマウスをポイントすると の矢印 が出ますので左端までドラッグし 文字を完全に消します

SnNCutCnvs ステッカーウィザードを使ってデザインを作成する ここでは スターターキットに付属している A4 サイズ (210 mm 297 mm) のプリントステッカーを使用する場合の例を説明します [ ステップ 1] エリアサイズを変更します パソコンの場合 : 編集画面 >[ プロジェ

「ライフサポートワーク」ケアプラン作成支援ソフト【マニュアル】 _vol01

PowerPoint プレゼンテーション

情報C 4月スクーリング プリント

1-2. 文字の編集について (1) 文字入力する ページ編集フィールド 上では キーボードからの文字入力 または コピーした文章の貼り付け操作に より 文章を入力します 以降 文字入力に関する操作について説明します ページ編集フィールド (1) 改行の扱いについて [Enter キー ] を押下し

Format text with styles

1/2

スライド 1

目次 1. プロフィール画像工房の概要 3 2. プロフィール画像の作成 9 3. プロフィール画像の登録 まとめ 29 レッスン内容 プロフィール画像工房 インターネット上に提供されているさまざまなサービス ( これ以降 サービス と記述します ) を利用するときには 利用するユーザー

Web ファイルアクセス (Nextcloud) 利用マニュアル PC 操作編 Ver /4/26 明治大学情報基盤本部

Word編Word編7 宛名欄 住所欄を調整する職人編5 差出人登録画面を表示する 住所録の登録が終了したら [ 差出人を作成 編集する ] をクリックし 宛名面を印刷 保存する 1 宛名面を印刷する [ 印刷 ] ボタンをクリックし [ 宛名印刷 ] 画面が表示され印刷範囲を指定し必要に応じて出受


Microsoft Word - FTTH各種設定手順書(鏡野地域対応_XP項目削除) docx

おがらすネットホームページ作成操作説明書

_責)Wordトレ1_斉木

2. 生田仮想デスクトップ PC の接続方法 生田仮想デスクトップ PC に接続する方法は 次の 2 通りです 1. HTML アクセス Internet Explorer や Safari などのブラウザを用います PC に特別なソフトウェアをインストールす る必要が無いので 管理者権限をもってい

<4D F736F F D F8E FEE95F1836C F8EE88F878F F88979D8BC68ED2976C A2E646F63>

Transcription:

ホームページの作り方 2011 年 4 月更新 明治大学 講習の前に この講習は ホームページ ビルダー 14 を利用してホームページを作成し 駿河台地区設置の WWW サーバーで公開する手順を実習する講習です ( 最新のバージョンと異なる場合もあります ) 講習では 2 つ ページを作成します テキストの中では 各自の USB メモリに保存するように指示されています 持っていない場合は デスクトップまたは MyDocs に保存してください なお このテキストはパソコンの基本的な操作は一通りできるものとして作成されています ブラウザ ( Firefox や Internet Explorer) の使い方はこの講習ではふれません また ホームページを公開するためには 基盤サービスアカウントが必要です 注 1) Homepage Builder14 ではファイルのことを ページ と呼んで管理しています 注 2) Homepage Builder14 はメディア教室 1 2 3 4 メディア実習室 1 2 で利用可能です 1

目次 1. ページ公開の仕組み... 3 2.HTML とタグ... 4 3. 準備... 4 4. ホームページ ビルダーの立ち上げ... 5 5. 新たにページを作成する... 6 (1) 通常の新規作成... 6 (2) フレームを使いたい場合などの新規作成... 6 6. 見出しの作成... 7 7. 文の入力 ( 段落の作成 )... 8 8. 水平線の入力... 9 9. 箇条書きの作成... 9 10. ページにタイトルを付ける... 11 11. ページを保存する... 12 12. リンクの設定... 13 (1) リンク先の用意... 13 (2) 設定... 13 13. 画像の貼り込み... 16 14. ページの保存 ( 画像ファイルも合わせて保存する )... 17 15. ページのアップロード ( 転送と公開 )... 18 付録... 20 A. 文字の書式の変更... 20 B. リンクの設定 (URL で指定 )... 21 C. 表の作成... 21 D.FFFTP でのサーバー側のファイル操作... 23 (1) ファイルの削除... 23 (2) フォルダの作成... 23 E.FTP ツールによるファイル転送... 24 F. ロゴの作成... 26 2

1. ページ公開の仕組み ホームページは WWW(World Wide Web ワールドワイドウェブ ) というシステムを利用して情報を発信する際に作成します 作成したデータを WWW サーバー ( 情報を実際に発信するコンピュータ ) 上に用意することで インターネット上のコンピュータから そのデータが閲覧されるようになります 駿河台 和泉の利用者がホームページを公開する場合は 作成したデータを suruga2 というサーバに転送 ( アップロード ) します その際には 必要に応じて事前に各自の転送先に local_html あるいは public_html というディレクトリ ( フォルダ ) を用意し 学内へのみ公開 にしたいならば suruga2 の local_html へ ( 練習用 ) 学外へも公開 にしたいならば suruga2 の public_html へ 転送します なお 転送したデータは 以下の URL で参照できます 学内のみの公開 http://local.kisc.meiji.ac.jp/~ 基盤サービス利用アカウント / ファイル名 学外への公開 http://www.kisc.meiji.ac.jp/~ 基盤サービス利用アカウント / ファイル名 なお ホームページを公開するに当たっては MIND 利用基準 を遵守しなければなりません 以下を参照してください 学校法人明治大学総合情報ネットワーク (MIND) 利用基準 (http://www.meiji.ac.jp/mind/rule/mind-riyoukijun.html) MIND 利用上の遵守事項ガイドライン (2010 年 4 月 1 日 ) (http://www.meiji.ac.jp/mind/guideline/mindguideline2010.pdf ) 転送 ( アップロード ) 3

2.HTML とタグ ホームページは HTML(Hyper Text Markup Language) という形式で記述します ( 図 1) <HTML> <HEAD> <TITLE> ホームページだよ ~ ん </TITLE> </HEAD> <BODY> <H1> ホームページだよ ~ ん </H1> <IMG SRC= my_face.gif > <HR> ほにゃほにゃ ふげふげ </BODY> </HTML> ( 図 1) この中の <H1> や </H1> を タグ といい 文章の構成や書式などを指定する役割を持っています この HTML のデータはテキストデータですので メモ帳 などでも作成可能ですが その場合は タグ の種類 意味を覚えていないと作成できません この講習で使う ホームページ ビルダー は タグ を知らなくても マウスの操作でデータにタグを自動的に埋め込みながらホームページの作成を行なえるソフトです 3. 準備 講習会では学内用に公開するページの作成を行います 用意した USB メモリに local_html という名前のフォルダを作成してください 以後 作成したページなどはこのフォルダに保存します また この講習では サーバーへの転送は このフォルダごと行います ( 図 2) ( 図 2) 4

4. ホームページ ビルダーの立ち上げ ホームページ ビルダーは以下の順にメニューをたどって立ち上げてください ( 図 3) スタート ボタン すべてのプログラム 配信型アプリケーション ( 図 3) WebDesktop XP Style Windows Internet Explorer ウィンドウから Homepage Builder14 をクリックすると Z!Stream 3.0 のウィンドウが表示されます 状態の欄が 起動準備中 から 起動中 に変わるとホームページ ビルダーが立ちあがります ( 図 4) ( 図 4) 5

5. ページを新規作成する (1) 通常の新規作成 ホームページ ビルダーが立ち上がると 最初に スタート ウィンドウが表示されます この中から ページを作成する (N) をクリックしてください 次いで ページ作成方法の選択 ウィンドウから 白紙ページ (B) を選択してください 白紙ページの作成 ウィンドウが現れるので初期設定の状態のままで OK ボタンをクリックしてください ( 図 5) ( 初期設定では 表示環境 (D) は PC ページ ページの種類 (P) は 通常ページ 編集モード (E) は 標準モード が選択されています ) これで ページの作成が始められます ( 図 5) (2) フレームを使いたい場合などの新規作成 白紙ページの作成 ウィンドウで ページの種類 (P) メニューから フレームページ を選択するとフレームを使用したホームページを作成できます ( 図 6) ( 図 6) ページを閲覧するであろう対象のシステム (PC や携帯電話など ) の指定は 白紙ページの作成 ウィンドウの 表示環境 (D) メニューから選択できます 白紙から作成するか 予め用意された雛形 ( テンプレート ) を元に作成を始めるかの指示は ページ作成方法の選択 ウィンドウから選択できます 詳細なレイアウトの指示を含むページを作成するか否かの指示も同様に ページ作成方法の選択 ウィンドウから選択できます はじめて利用する場合や意味がよくわからない場合には (1) 通常の新規作成の手順で進めるのがよいでしょう 注 ) このテキストでは初心者用の編集スタイルである かんたん モードで作成していきます あらかじめ 表示 (V) の 編集のスタイルの切り替え (O) を選択し かんたん モードに切り替えておきましょう 6

6. 見出しの作成 はじめにページに見出しをつけましょう ページ編集 の画面内をクリックしてください ( 図 7) ( 図 7) この状態で文字を入力すると 通常の文として文字が入力されます 文字が入力されている間 色つきの枠が表示されます この枠が 現在編集している対象あるいはページの部分を示していて この枠内の箇所に対して様々な設定をすることが可能です ( 図 8) 色つきの枠内の文字 ( 列 ) に対して属性等が指示できる ( 図 8) 文字を入力したら ツールバーにある 属性の変更 をクリックし 属性 ウィンドウの 段落 (P) メニューの中から 見出し 1 を選択してみてください すると 入力した文字に対して それが 見出し の レベル 1 であることが指示されて 画面上の表示も変化します ( 図 9) ( 図 9) この操作は画面中央上のメニューから選択することでも可能です ( 図 10) ( 図 10) 見出し は新聞でいう 見出し と同じ意味で 表示される文字の大きさや形を指示するものではありません 見出し がブラウザ上 (Firefox や Internet Explorer) で どのような大きさ 形で表示されるかという点については 基本的にはブラウザ次第です 通常の文を入力している際に 単純に文字の大きさを変更したい場合は 書式 (O) メニューの フォント (F) を選択して フォント ウィンドウの サイズ (I) で文字の大きさを変更してください 実際の手順は 付録 A. 文字の書式の変更 を参照してください 7

7. 文の入力 ( 段落の作成 ) 見出しの設定ができたら 通常の文章を入力してみましょう まず 見出しの下をクリックしてください このとき見出しにあった枠の表示が消えた場合は そこから 新しい段落が開始できます まだ 見出しに枠がある場合は 下向きのカーソルキー ( ) を押してください ホームページ ビルダーでは 通常 下向きのカーソルキー ( 矢印キー ) を押して 新しい文 段落を開始します 適当に文字 ( 文 ) を入力してみてください ( 図 11) ( 図 11) ホームページ ビルダーで Enter キーを押すと 改行されますが段落が変更になったとはみなされません ( 図 12) ( 図 12) 段落と改行 改行 の指示は 行を変える <BR> タグをページに埋め込みます 一方 段落 の変更は <P> タグが埋め込まれます 画面では同じように見えますが 実際に作成された HTML には違いがあるのです ホームページを作成する際に 使わない方が良い文字 世の中には様々なコンピュータがあり 機種によっては表示できない文字があります これを 機種依存文字 または 環境依存文字 といいます 例えば 半角カナ文字 ( ア イ ウ ) 丸付きの数字 (1 2 3) ローマ数字 (Ⅰ Ⅱ Ⅲ) などがそれにあたります これらは表示する側で違う文字に置き換えられたり 何も表示されなかったりすることがあるので ページを作成する際には使用しないようにしましょう 8

8. 水平線の入力 次は水平線 ( 区切り線 ) を引いてみましょう 左側の ナビメニュー から 水平線の挿入 を選択します 水平線の挿入 ウィンドウが表示されるので 内容を確認し OK をクリックします ( 図 13) これで水平線が入ります ( 図 14) ( 図 13) ( 図 14) 9. 箇条書きの作成 今度は箇条書きを作成してみましょう ホームページで使われる箇条書きには 番号なしの箇条書き ( 通常の箇条書き ) 番号つきの箇条書き などがあります では カーソルを移動し 枠 が表示されていない状態にしてください ( 図 15) ( 図 15) 9

箇条書きは 左側の ナビメニュー から リストの挿入 を選択し リストの挿入 ウィンドウで箇条書きの種類を指定することではじめます ( 図 16) ( 図 16) 通常 を選択すると カーソル位置に が表示されるので 何か文を入力し Enter キーを押してみてください すると 2 番目の文が入力できるようになります 箇条書きは この操作の繰り返しで必要な分だけ入力します ( 図 17) ( 図 17) 10

10. ページにタイトルを付ける 作成したページには必ずタイトルを付けるようこころがけましょう タイトル は1ページに1つだけ付けるもので 見出し とは異なりますので注意してください ( 図 18) これが タイトル これは 見出し ( 図 18) ページ余白部分をクリックしてから 編集 (E) メニュー 属性の変更 (A) の順に選択してください ( 図 19) ( 図 19) ページ情報 タブにある ページタイトル (P) に適当にタイトルを入力し OK をクリックしてください ( 図 20) タイトルを入力する タイトルが表示される ( 図 20) ここで入力した文字列が 編集中のページのタイトルになります ページの背景色や表示文字の色の変更なども ページの属性として指示することができます 11

11. ページを保存する 保存は ファイル (F) メニューから 名前を付けて保存 (A) を選択し USB メモリへ index.html という名前で保存してください 保存する場所 を指定しないと MyDocs の Documents にページが保存されてしまうので注意してください ( 図 21) 1. ドライブの指定 2. 保存するフォルダを開く ( 図 21) index.html という名前について 明治大学で運用している WWW サーバーは あるクライアント ( ブラウザ ) からページ閲覧のリクエストを受け取ったときに ページの名前が省略されていると index.html ( または index.htm) という名称のファイルを送り返します たとえば http://www.kisc.meiji.ac.jp /manuals/ というファイルの閲覧要求を受けた場合 http://www.kisc.meiji.ac.jp/manuals/index.html を送り返します ページに付けるファイル名 パソコンではファイルやフォルダの名前には アルファベットや数字だけでなく ひらがな カタカナ 漢字等さまざまな文字を使うことが可能です しかし ページの名前 ( ファイル名 ) に漢字等全角文字を使用すると ページを公開する際に ファイル名が文字化けを起こしたり 別の形式の文字列に変換されてしまうことがあります よって ページに付ける名前は 半角英数字をのみを使うよう注意してください 12

12. リンクの設定 (1) リンク先の用意 次はリンクの設定ですが その前にリンク先のページを用意しておきましょう もう一度 ファイル (F) メニューから 標準モードで新規作成 (B) を選択してください ( 図 22) ( 図 22) こちらのページは単純に index.html からのリンク先として用意するだけですので 適当に文字を入力し sub.html という名前を付けて保存してください 10. ページにタイトルを付ける を参考にして こちらのページにも任意のタイトルを付けてください ( 図 23) (2) 設定 ( 図 23) 保存できたら 画面右側にある ページ一覧 タブを見てください 現在開いているページの一覧が表示されています 複数のページを開いている場合は この中から編集したいページを選択できます では index.html を選択してください ( 図 24) ( 図 24) 最初に作成 保存した index.html に sub.html へ移動するためのリンクを設定しましょう 先ほど練習した箇条書きの後にカーソルを移動してください その場所に 次のページへ と入力してください さらに 次のページへ の部分をドラッグして 色が反転した状態にしてください このドラッグした文字列のどこかをクリックしたときに 別のページへ移動する設定をします ( 図 25) ( 図 25) 13

このままの状態で 画面左側 ナビメニュー タブから リンクの挿入 を選ぶと リンク作成ウィザード が表示されます ここで ページや URL へのリンクを作成する (P) を選択して 次へ をクリックし リンク作成ウィザード ( 文字列 画像ファイルの設定 ) ウィンドウではそのまま 次へ をクリック リンク作成ウィザード ( ページや URL へのリンク作成 ) ウィンドウでは 選択 ボタンをクリックして ファイルから を選択 開く ウィンドウが表示されるので sub.html を選択して 開く 完了 の順にクリックしてください ( 図 26) ( 図 26) すると 先ほどドラッグした箇所に下線が引かれます これでリンクの設定は終了です ( 図 27) ( 図 27) 正しく設定できたか確認するには プレビュー のタブを選択し 実際に設定したリンクの箇所をマウスでクリックしてみます クリックしたときに 意図したページが表示されれば 正しく設定がなされていることになります ( 図 28) ( 図 28) プレビュー の状態では編集はできません 設定が間違っていた場合などは ページ編集 のタブをクリックし リンクの設定した箇所を一旦クリックしてから リンク先の再指定をしてください ( 図 29) ( 図 29) 14

リンクは 文字をドラッグして選択した状態で右クリックし メニューの リンクの挿入 (L) を選択しても同じ様に設定できます ( 図 30) 右クリックでメニューが表示される ( 図 30) 属性 ウィンドウで先ほどのようにリンク設定を行うことができます ( 図 31) ( 図 31) 画像などをクリックした場合に別のページへ移動するようなリンクの設定も同じ方法で行います 15

13. 画像の貼り込み 今度は画像を貼り込んでみましょう 今回は ホームページ ビルダーに添付されている素材集の画像を貼り込んでみます カーソルを移動し 枠 が表示されていない状態にしてください 次に ナビメニュー タブの 写真や画像の挿入 から 素材集から を選択してください ( 図 32) ( 図 32) 素材集の中から好きな画像を選択して 開く (O) をクリックすれば カーソル位置に その画像が貼り込まれます ( 図 33) カーソル位置に画像が入る ( 図 33) 画面左側の素材タブからも画像ファイルを選択することができます ( 図 34) ( 図 34) 著作権や肖像権に注意 ページに貼り込む画像データの 著作権 や デジカメなどで撮影した写真に自分以外の人物が写っている場合の 肖像権 などには 十分注意してください ページに貼る画像の形式 通常 ページに画像ファイルを貼る場合 GIF( 拡張子.gif) や JPEG( 拡張子.jpg) PNG( 拡張子.png) といった形式の画像を用意しますが ホームページ ビルダーでは BMP( 拡張子.bmp) の画像でも貼り込むことが可能です ( ホームページ ビルダーが形式を変換してくれます ) ページに画像を貼る場合 画質を保ちながらなるべくファイルサイズを小さくして サーバー容量や閲覧者の通信負担を軽減する配慮も必要です 16

14. ページの保存 ( 画像ファイルも併せて保存する ) ページの用意ができたので すべてを保存しましょう すべてを保存するには まず編集スタイルを スタンダード モードに変更します ( 現在の編集スタイルである かんたん モードには すべて保存 (V) の項目が無い為 この操作が必要になります 慣れてくれば 始めから スタンダード モードでページを作成しても構いません ) 表示 (V) メニューの 編集スタイルの切り替え (O) を選択し編集スタイルをスタンダードに変え OK をクリックしてください ( 図 35) ( 図 35) ファイル (F) から すべて保存 (V) を選択します ( 図 36) ( 図 36) 現在開いているページは index.html と sub.html の 2 つですが 変更があったページについて 保存の方法を尋ねてきます ここで index.html には先ほど画像を貼り込んだので ホームページ ビルダーはその画像ファイルをどこに保存するか 尋ねてきます 画像を含むページを作成した場合は 画像ファイルの保存場所に注意してください ホームページ ビルダーは ページとそのページに使われている画像ファイルを 同じフォルダに保存しようとします 特に理由がない限り ページと画像は同じフォルダに保存しておくとよいでしょう ( 特に素材集から画像ファイルを貼り込んだ場合など )( 図 37) Index.html と同じ場所 ( 図 37) 画像ファイルの名前を変更する必要がある場合には ここで変更しておきましょう 画像ファイルを一つのフォルダにまとめて保存しておきたい場合は ページと画像ファイルを無理に同じフォルダにする必要はありませんが ページを転送 公開する際には 画像を保存してあるフォルダも 併せて転送する必要がありますので 注意してください 以上でページの作成は終了です 次に これらのページをサーバーへ転送し 実際にブラウザで表示してみましょう 17

15. ページのアップロード ( 転送と公開 ) 作成したページはサーバーへ転送して 初めてインターネット上に公開されます 転送には FFFTP というファイル転送のためのソフトを利用しましょう ホームページ ビルダーにも作成したファイル ( ページ ) をサーバーへ転送するためのツール FTP ツール がありますが そちらについては 付録で紹介します 駿河台地区でページを公開する際には 作成したページを suruga2 に転送する必要があります では スタート メニューから すべてのプログラム (P) を選択し FFFTP フォルダの FFFTP を立ち上げてください ( 図 38) ( 図 38) suruga2 を選択し 接続 をクリックしてください ( 図 39) ( 図 39) 接続のためのユーザー名とパスワード ( 基盤サービス利用アカウントとパスワード ) を入力します 一旦接続を切ってしまった場合などは ユーザー名とパスワードの再入力が必要になります ( 図 40) ( 図 40) 正しく接続できると 転送先にあるファイル名 フォルダ名 ( ディレクトリ名 ) が表示されます 画面の左側が使用しているローカルパソコン 右側がサーバーになります ( 図 41) 自分の ID 現在使用している PC 側のファイル等が表示される サーバー側のファイル等が表示される ( 図 41) 18

PC 側を USB メモリ ( この場合は F ドライブ ) に指定し ページを保存した local_html フォルダをクリックして選択し アップロードボタンを押すとアップロードが開始されます ファイルを直接ドラッグ & ドロップしてもアップロードは可能です ( 図 42) アップロード ボタン F ドライブ (USB メモリ ) を選択し ページを保存した local_html フォルダ アップロード ボタンを順にクリックする ( 図 42) サーバー側に local_html フォルダがない場合は自動的に作成されます すでにサーバー側に local_html ディレクトリがある場合は 上書きされてしまいますので 必要に応じてサーバー側のフォルダの名前を変更してからアップロードしてください 以上で転送は終了しました 切断 ボタンをクリックして FFFTP を終了してください ( 図 43) ( 図 43) ブラウザ ( インターネットエクスププローラーかネットスケープナビゲーター ) を立ち上げて http://local.kisc.meiji.ac.jp/~ 基盤サービス利用アカウント / にアクセスしてみてください 作成したページが表示されたでしょうか 最後に ホームページ ビルダーなど 起動しているソフトウェアを終了してください また 以下の事項にも注意してください USB メモリなどが PC に残ったままになっていないか? パソコンをシャットダウンしたか? 19

付録 A. 文字の書式の変更 文中の文字の色や大きさ 形を変更したい場合は 以下の手順で行います 変更したい文字列をドラッグして選択します ( 図 44) ( 図 44) このとき 枠 は段落全体にかかっているので 右クリックをして表示されるメニューの 属性の変更 (A) を選択すると 段落 に対しての属性が変更になってしまい 文字の色や形状の変更はできません よって 文字列の選択後 書式 (O) メニューを開き 指定したい内容を選択します 指定できる内容は以下の通りです ( 図 45) 主な項目 フォント(F) 文字飾り(M) 位置揃え(A) 指定できる内容 文字の色 大きさ 形状 ( 太字 斜体など ) 太字 斜体 下線付などの指示 右寄せ 左寄せ センタリングの指示 ( 図 45) ここで フォント (F) を選択し フォント ウィンドウ上 ( 図 46) で色を赤 サイズを +2 と指定すると 20 ( 図 46)

このようになります ( 図 47) ( 図 47) これを再度変更したい場合は 変更部分をドラッグすると その部分だけに 枠 が表示されるので 右クリックで表示されるメニューから 属性の変更 (A) を選択してください ( 図 48) A ( 図 48) なお 書式 (O) メニューを開かずに ツールバーのボタンを用いて書式を変更することも可能です 左から 太字 斜体 打ち消し線 を設定するボタン ( 打ち消し線は かんたん モードでは表示されない場合があります ) 左から 文字サイズ拡大 文字サイズ縮小 フォント ( 大きさ 色 形状など ) の変更 を行うボタン 左から 左揃え 中央揃え 右揃え を指示するボタン 文字の大きさの指定について 文字の大きさは 1~7 までの数字 あるいは -2~+4 の割合で指示します 特に指示がない場合 文字の大きさは 3(0) になります ただし 大きさの違いは実際にブラウザで表示しないとわかりませんので 注意してください B. リンクの設定 (URL で指定 ) リンク先にインターネット上の別のサイトを指定する場合は 文字列をドラッグして右クリックし リンクの挿入 (L) を選択したあと 属性 ウィンドウで URL へ タブを選択し リンク先の指定をしてください ( 図 49) ( ナビメニューの リンクの挿入 からでも設定できます ) ( 図 49) 21

C. 表の作成 表の作成は 表 (A) メニューの 表の挿入 (B) を選択する あるいは 表の挿入 ボタンをクリックします ( 表の挿入 ボタンは かんたん モードでは表示されません )( 図 50) ( 図 50) 表の挿入 ウィンドウが表示されますので ここで行数 列数を指定して OK をクリックしてください ( 図 51) ( 図 51) カーソル位置に四角い枠が指定した数だけ表示されます あとは この枠をクリックし 文字などを埋めていけば 表ができあがります ( 図 52) ( 図 52) 22

D.FFFTP でのサーバー側のファイル操作 (1) ファイルの削除 たとえば転送の際にフォルダごと転送した場合 フォルダ内のすべてのファイルが転送されるので ホームページ ビルダーが作成したバックアップ用ファイル ***.bak. といった不要なファイルも転送されてしまいます これらを削除したい場合は 不要なファイルを右クリックし 削除 を選択し ファイル名を確認のうえ はい (Y) をクリックしてください ( 図 53) サーバー側 (2) フォルダの作成 ( 図 53) サーバー側にフォルダを作成する場合は FFFTP のサーバー側で右クリックし 表示されるメニューから フォルダ作成 (K) を選択し 名前を指定して OK をクリックしてください ( 図 54) ( フォルダ作成 ボタンをクリックしても作成できます ) サーバー側 ( 図 54) 23

E.FTP ツールによるファイル転送 ホームページ ビルダーに付属している FTP ツールを使用したファイル転送の手順は以下のとおりです ホームページ ビルダーの ツール メニューから FTP ツールの起動 (F) を選択します ( 図 55) ( 図 55) ファイル転送設定 ウィンドウが表示されたら 以下を入力します ( 図 56) サーバープロファイル名 任意の名前 プロバイダの選択 選択不要 指示をするなら その他 を選択します FTP サーバー名 (S) suruga2 FTP アカウント名 (U) 自分の基盤サービス利用アカウント FTP パスワード (P) なにも入力しないあるいは自分のパスワードを入力する ここで入力しない場合 接続を始めたときにパスワードをきかれるので そのときに入力する 任意の名前 選択不要 suruga2 を指定 自分の ID 入力不要 ( 図 56) 24

OK をクリックし 接続 ボタンをクリックし 次いでパスワードを入力します ( 図 57) サーバープロファイル名 サーバーとの接続または切断 サーバープロファイル名 FTP サーバー名 ( 図 57) 左側には PC のファイルやフォルダが表示されるので 必要なものを選択し 上向き矢印をクリックすれば それがサーバーに転送されます ( 図 58) 必要なファイルを選択し 転送ボタンをクリックする ( 図 58) 終わったら 切断 ボタンをクリックして終了してください ( 図 59) ( 図 59) 25

F. ロゴの作成 ロゴ は以下の手順で作成できます ロゴを入れたい箇所にカーソルを移動します ( 図 60) ( 図 60) 画面左側 ナビメニュー タブの ロゴ ( 飾り文字 ) の挿入 から ロゴ ( 飾り文字 ) をクリックします ( 図 61) ( 図 61) ロゴの作成 ウィンドウが表示されるので 文字列 サイズ 形状等を入力してください ( 図 62) ( 図 62) 完了 ボタンをクリックすると カーソル位置にロゴが入ります ( 図 63) ( 図 63) 26