はげちゃんの世界

人々の役に立とうと夢をいだき、夢を追いかけてきた日々

初級講座2

Webページ原版作成

あなたのパソコン内にウエブページをつくる作業を開始します。専用のフォルダーを作成し、ホームページをつくるためのソース原版をエディタにコピーして保存します。ソースの解説を読みながら、最少必要事項を入力してウエブページの原版を完成します。

1 フォルダーをつくろう

 1-1 専用フォルダーの作成

ウエブページは一冊の本と同じですから、表紙や文章テキストのファイルや写真などが必要になります。あなたのパソコンのドキュメントにあなたが作成するウエブページ「島崎藤村の魅力」の表紙や文章のテキストファイルなど、必要なものすべてを収納するフォルダーを作ります。

マイドキュメント内で右クリックして、「新規作成」で「フォルダー」を作成します。「新しいフォルダー」の上にマウスのポインタを重ねて右クリックし、「名前の変更」を選択して「homepage」と入力します。この「homepage」フォルダー内に、表紙やテキストファイルと、写真類を保管するフォルダーを収納します。

フォルダーの上に「マウスのポインタを重ねる」ことをフォルダーを「ポイントして」と表現します。

では、マイドキュメント内に作成された「homepage」フォルダーをダブルクリックで開きましょう。「homepage」のフォルダー内で右クリックして、「新規作成」で「フォルダー」を作成します。「新しいフォルダー」をポイントして右クリックし、「名前の変更」を選択して「shasin」と入力します。homepageフォルダーの内容

「homepage」フォルダー内に表紙やテキストファイルを収納し、「shasin」フォルダーに写真などを収納します。

トップへ戻る

 1-2 フォルダーの使用例

はげちゃんのパソコンのマイドキュメント内にある「homepage」フォルダーには、「ホーム・ 減災と防災・MS管理体験・町内会運営体験・Web頁作成法・健康で逝くため・古き良き時代・疑惑の推理」という8種類のフォルダーがあります。但し、フォルダーの名前は日本語でなく「アルファベットや数字」になっています。

「Web頁作成」のフォルダー内に、「Web頁作成講座1~6」まで6つのファイルがあります。もちろん、名前は日本語でなく「アルファベットや数字」などです。Web頁作成で使用する「写真類」が収納されているフォルダーもあります。

トップへ戻る

2 ソースの原版作成

Webページはどのページにも共通する約束事があります。あなたが使いこなすW3Cの「文法」や、表示順序などを示す「ダグ」などがこれに該当します。共通している部分は「コピー&ペースト」でテキストファイルを作成するので、毎回スペル(アルファベットの綴り)で悩むことはありません。

「1.Webページの予備知識」で紹介した「Webページのソース」を基に、あなたが使用する「ソースの原版」をつくりました。作業が必要な個所に「◆」の記号を入れてあります。

トップへ戻る

 2-1 エディタの起動

エディタについては「1.Webページの予備知識」の最終部分で説明しました。「スタート」ボタンをクリックして開き、下段の「すべてのプログラム(アプリ)」」からエディタの「Crescent Eve」をダブルクリックで起動します。

トップへ戻る

 2-2 コピーの範囲

エディタの画面は、ブラウザの画面と重ならない位置に配置し、ブラウザに表示された「Web頁作成法」を読みながらエディタで作業を行います。

コピーする範囲の例示エディタで行う作業は、一区切りつくたびに「上書き保存」をします。これを忘れるとそれまでの努力はすべて無駄になります。エディタの使い方や保存の仕方、作成した作業の確認方法は逐一説明します。

ブラウザに表示されている「2) ソースの原版」の「<!DOCTYPE」から「</html>」までを、右の図のように選択してメニューバーの「編集」から「コピー」をクリックします。

トップへ戻る

 2-3 ソースの原版

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01// EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta name="keywords" content="◆">
<meta name="description" content="◆">
<title>◆</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="◆">
</head>
<body>
<div class="title">
<h1>◆</h1>
</div>
<div class="logomark">
<p>◆</p>
</div>
<div class="navigation">
<a href="◆">◆</a>
<a href="◆">◆</a>
<a href="◆">◆</a>
</div>
<div class="menu">
<p>◆</p>
<ul>
<li><a href="#site01">◆</a></li>
<li><a href="#site02">◆</a></li>
<li><a href="#site03">◆</a></li>
<li><a href="#site04">◆</a></li>
<li><a href="#site05">◆</a></li>
<li><a href="#site06">◆</a></li>
<li><a href="#site07">◆</a></li>
</ul>
<p>◆</p>
<ul>
<li><a href="◆">◆</a></li>
<li><a href="◆">◆</a></li>
<li><a href="◆">◆</a></li>
<li><a href="◆">◆</a></li>
<li><a href="◆">◆</a></li>
</ul>
</div>
<div class="main">
<h1 id="site01">◆</h1>
<p>◆</p>
<h2 id="site02">◆</h2>
<p>◆</p>
<h2 id="site03">◆</h2>
<p>◆</p>
<h2 id="site04">◆</h2>
<p>◆</p>
<h2 id="site05">◆</h2>
<p>◆</p>
<h2 id="site06">◆</h2>
<p>◆</p>
<h2 id="site07">◆</h2>
<p>◆</p>
</div>
<div class="footer">
<p>◆</p>
</div>
</body>
</html>

トップへ戻る

 2-4 ペーストと保存

ディスクトップに表示されている「エディタ」画面の白地部分をクリックすると、画面左上にカーソルが点滅します。エデイタのメニューバーで「編集」から「貼り付け」を選ぶと、エディタにブラウザ画面と同様アルファベットの文字列が表示されます。

エディタのメニューバーで「ファイル」から「名前を付けて保存」を選びます。保存場所はマイドキュメントの「homepage」を指定し、ファイル名を「index.txt」として「保存」をクリックします。保存が済んだエディタは、メニューバー右端の「×」ボタンで閉じます。

トップへ戻る

3 付加情報の整備

 3-1 フォルダー内の確認

マイドキュメントの「homepage」フォルダーに「index.txt」ファイルと「shasin」homepageフォルダー内のファイルのフォルダーがあります。「index.txt」ファイル上で右クリックし、 「プログラムから開く」で「Crescent Eve」を選択して開き、ソースに「付加情報(meta)」を入力します。

トップへ戻る

 3-2 キーワードの入力

「"keywords"」の「◆」の位置にキーワードとなる単語を入力します。 次の文字を選択して、メニューバーの「編集」から「コピー」をクリックします。

島崎藤村,藤村の魅力,初恋,千曲川旅情の歌,椰子の実

エディタに表示されているソース、「"keywords"」の「◆」を選択してエデイタのメニューバーで「編集」から「貼り付け」を選ぶと、「before」と「after」は次のようになります。

<meta name="keywords" content="◆">

<meta name="keywords" content="島崎藤村,藤村の魅力,初恋,千曲川旅情の歌,椰子の実">

トップへ戻る

 3-3 説明文の入力

「"description"」の「◆」の位置に、発信する情報の説明文を百字以内で入力します。次の文章を選択して、メニューバーの「編集」から「コピー」をクリックします。

島崎藤村の代表的な作品「椰子の実」「初戀」「千曲川旅情の歌」の原文と作者の心情を反映した現代訳を紹介し、わたしの思い出を重ね合わせてみます。

エディタに表示されているソース、「"description"」の「◆」を選択してエデイタのメニューバーで「編集」から「貼り付け」を選ぶと、「before」と「after」は次のようになります。

<meta name="description" content="◆">

<meta name="description" content="島崎藤村の代表的な作品「椰子の実」「初戀」「千曲川旅情の歌」の原文と作者の心情を反映した現代訳を紹介し、わたしの思い出を重ね合わせてみます。">

トップへ戻る

 3-4 タイトルの入力

Webページは一冊の本のような情報のかたまりですから、タイトルは書名と同じ意味を持ちます。「<title>」の「◆」を選択し、あなたがつくるWebページのタイトルを全角文字でキーボードから「島崎藤村の魅力」と入力すると、「before」と「after」は次のようになります。

<title>◆</title>

<title>島崎藤村の魅力</title>

付加情報の「キーワード・説明文・タイトル」などはロボット検索エンジン用の情報です。ロボット検索エンジンは世界中のありとあらゆるWebページを巡回して検索用データベースを作成しています。

検索エンジンを使うと、あなたのWebページの住所を知らない人でも「キーワード」と「説明文」と「タイトル」を組み合わせることであなたが作成したWebページを見つけ出す手助けができるようになります。

トップへ戻る

 3-5 CSSの保管位置

Webページに必要なものはすべて「homepage」フォルダーに保管します。Web頁作成講座3で「homepage」フォルダー内に「スタイルシート(style.css)」ファイルを作成保管します。「index.txt」ファイルと同じ位置に「スタイルシート」ファイルを保管する場合は、ファイル名をそのまま入力できます。「stylesheet」の「◆」を選択し、半角英数文字でキーボードから「style.css」と入力します。「before」と「after」は次のようになります。

<link rel="stylesheet" type="text/css" href="◆">

<link rel="stylesheet" type="text/css" href="style.css">

ここまでエディタに入力した結果は以下のようになります。

タイトルまでの入力結果

トップへ戻る

 3-6 入力内容の保存

エディタのメニューバーで「ファイル」から「上書き保存」を選択してから、エディタを閉じます。エディタに入力したままで閉じると、入力した内容はすべて消えて努力は無駄になります。エディタを使うときは「上書き保存」を絶対に忘れず、ちょっと席を離れる時やコーヒーなどを飲むときにも必ず「上書き保存」を実行してください。

トップへ戻る

4 共通データの入力

マイドキュメントの「homepage」フォルダーに、「index.txt」ファイルと「shasin」フォルダーがあります。「index.txt」ファイル上で右クリックし、「プログラムから開く」で「Crescent Eve」を選択して開きます。

ユーザビリティは「使いやすさの重視」ですから、読者が迷わないようにすべてのページを同じレイアウトにします。では、「ホームページ・初戀のページ・千曲川旅情の歌のページ」に共通するデータを入力していきます。

トップへ戻る

 4-1 表示用タイトル

ブラウザへ表示させるデータは「<body>」と「</body>」の間に入力します。表示用のタイトルは「<div class="title">」と「</div>」で挟まれた「<h1>◆</h1>」の「◆」を選択し、全角文字で「島崎藤村の魅力」と入力します。「before」と「after」は次のようになります。

付加情報の整備で入力した「タイトル」と同じですが、付加情報は検索用ロボットやブラウザ用、表示用タイトルは人間が確認するためのものと思ってください。

 <body>
 <div class="title">
 <h1>◆</h1>
 </div>

 <body>
 <div class="title">
 <h1>島崎藤村の魅力</h1>
 </div>

<div>に特別な意味はありませんが、<div>と</div>に囲まれた部分は"title"という名前がついた「表示用のタイトルに関するグループ」として、文字の大きさやなどのレイアウトはスタイルシートで決めます。

入力内容に間違いがないか確認し、メニューバーの「ファイル」をクリックして「上書き保存」を選択します。これを忘れると入力内容は消えてしまいます。

トップへ戻る

 4-2 自由な領域

Webページを訪れた人が興味を引くような簡単な説明を入れたり、イラストや写真やロゴマークなどを入れる領域です。後日、あなたのWebページをつくるときに、あなたのセンスで考えてください。

この部分には「5) 写真の準備」で小さな「はすの花」の写真を表示させます。なお、「logomark」は和製英語ですから世界に通用する言葉ではありません。

 <div class="logomark">
 <p>◆</p>
 </div>

トップへ戻る

 4-3 ナビゲーション

ナビゲーション用の簡単なボタンをつくります。ボタンは3つで、「ホーム」「初戀」「千曲川旅情の歌」の各ページへ移動できるようにします。「<a href="◆">」にはファイルの名前を入力し、「>◆</a>」にはボタンの名前を入力します。リンク先のファイルはこの講座の最終段階でつくります。

上段は  index.html と ホーム
 中段は  10.html   と 初戀
 下段は  20.html   と 千曲川旅情の歌

ホームページの「ホーム」で「初戀」と表示のボタンをクリックすると「10.html」ファイルが開きます。「10.html」で「ホーム」ボタンをクリックすると「index.html」ファイルが開きます。これでウエブページ内の2ファイルへ移動できる仕掛けになります。

太い文字を選択してメニューバーの「編集」から「コピー」をクリックします。エデイタの「navigation」で「◆」を選択し、メニューバーで「編集」から「貼り付け」を選ぶと「before」と「after」は次のようになります。貼り付ける位置を間違えないよう、下の「after」を見ながら作業をしてください。

次に「ホーム</a>」の右側に全角で1文字分の「スペース」入れ、「シフトキー」を押しながらキーボード最上段の「|と¥」表示のキーをポンと押し「」を入力します。三行とも同じように入力します。これはボタンとボタンの間に入れる区切りです。

 <div class="navigation">
 <a href="index.html">ホーム</a> 
 <a href="10.html">初戀</a> 
 <a href="20.html">千曲川旅情の歌</a> 
 </div>

最後に、「>」と「ホーム」の間にカーソルを表示して、「全角のスペースを二つ」入れます。これは表示位置の調整です。

homepageフォルダー内のファイルエデイタの画面が右図のように表示されているか確認し、メニューバーの「ファイル」をクリックして「上書き保存」を選択します。これを忘れると入力内容は消えてしまいます。

トップへ戻る

 4-4 サイドメニュー

  4-4-1 目次

ナビゲーションのボタンは、Webページ内のリンクで他のページへ移動することができます。開いているページ内でも移動できるように「そのページの目次」もつくります。開いたページごとにメニューが異なるので、使いまわしができるなひな形にしました。

目次の文字を太文字にすると見栄えが良くなります。太文字にするには、開始タグの「<strong>」と終了タグの「</strong>」を使います。次の文字を選択して、メニューバーの「編集」から「コピー」をクリックします。

<strong>目次</strong>

「menu」の「<p>◆</p>」で「◆」を選択し、メニューバーで「編集」から「貼り付け」を選択すると「before」と「after」は次のようになります。

 <div class="menu">
 <p>◆</p>

 <div class="menu">
 <p><strong>目次</strong></p>

目次の内容はページごとに異なるのでページごとに作成します。入力内容に間違いがなエディタ画面の調整結果いか確認し、メニューバーの「ファイル」をクリックして「上書き保存」を選択します。これを忘れると入力内容は消えてしまいます。

トップへ戻る

  4-4-2 ページ内のリンク

目次にはそのページ内のリンクを作成しますが、原稿ができるまでなにも入力しないで次へ進みます。

 <ul>
 <li><a href="#site01">◆</a></li>
 <li><a href="#site02">◆</a></li>
 <li><a href="#site03">◆</a></li>
 <li><a href="#site04">◆</a></li>
 <li><a href="#site05">◆</a></li>
 <li><a href="#site06">◆</a></li>
 <li><a href="#site07">◆</a></li> 
 </ul>

4-4-3 外部リンク

目次はそのページ内のリンクですが、この「リンク」は他のホームページなどを訪問するためのリンクです。

・ 見出し

目次の文字と同様「リンク」の文字も太文字にすると見栄えが良くなります。太文字にするには、開始タグの「<strong>」と終了タグの「</strong>」を使います。次の文字を選択して、メニューバーの「編集」から「コピー」をクリックします。

 <strong>リンク</strong>

「<p><strong>目次</strong></p>」の10行下、「<p>◆</p>」の「◆」を選択し、メニューバーで「編集」から「貼り付け」を選択すると「before」と「after」は次のようになります。

<li><a href="#site07">◆</a></li>
 </ul>
 <p>◆</p>
 </ul>
 <li><a href="◆">◆</a></li>

homepageフォルダー内のファイル

トップへ戻る

・ アドレスの入力

外部のリンク先を決めたりアドレスを探すのは慣れないと難しい作業なので、ここは簡単にコピー&ペーストで共通データとなる外部リンクをつくってしまいます。行ごとのアドレスとリンク先は次の通りです。

1行目  http://www.aozora.gr.jp/
      青空文庫ホームページ

2行目  http://www.aozora.gr.jp/guide/nyuumon.html
      青空文庫早わかり

3行目  http://www.aozora.gr.jp/index_pages/person158.html
      島崎藤村 公開中の作品一覧

4行目  http://www.aozora.gr.jp/cards/000158/card1508.html
      若菜集(初戀)

5行目  http://www.aozora.gr.jp/cards/000158/card18352.html
      藤村詩抄(千曲川旅情の歌)

あせると必ず失敗するので、1行毎にデータを確実にコピーして貼り付けていきます。リンクの「before」と「after」は次のようになります。

 </ul>
 <p><strong>リンク</strong></p>
 <ul>
 <li><a href="◆">◆</a></li>
 <li><a href="◆">◆</a></li>
 <li><a href="◆">◆</a></li>
 <li><a href="◆">◆</a></li>
 <li><a href="◆">◆</a></li>
 </ul>

エディタの表示画面

エデイタの画面が「after」と同一となっているか確認し、メニューバーの「ファイル」をクリックして「上書き保存」を選択します。これを忘れると入力内容は消えてしまいます。

トップへ戻る

 4-5 メイン

「main」は本編となる見出しや文章を入力する場所です。「<h1>◆</h1>」の大見出しと文章を入力する段落「<p>◆</p>」が一組あります。「<h2>◆</h2>」の中見出しと文章を入力する段落「<p>◆</p>」が六組あります。見出しも段落も必要に応じて増やすことができます。ここには他のページと共通するデータは入力しません。

 </div>
 <div class="main">
 <h1 id="site01">◆</h1>
 <p>◆</p>
 <h2 id="site02">◆</h2>
 <p>◆</p>
 lt;h2 id="site03">◆</h2>
 <p>◆</p>
 <h2 id="site04">◆</h2>
 <p>◆</p>
 lt;h2 id="site05">◆</h2>
 <p>◆</p>
 <h2 id="site06">◆</h2>
 <p>◆</p>
 <h2 id="site07">◆</h2>
 <p>◆</p>
 </div>

トップへ戻る

 4-6 フッタの入力

一般的に著作権表示がされています。ウエブページは全世界へ情報を発信することになるので、著作権表示は英語で書かなければなりません。

 </div>
 <div class="footer">
 <p>◆</p>
 </div>
 </body>
 </html>

簡単な書き方は「 Copyright © 西暦」に続けてヘボン式ローマ字であなたの名前と性と短文を入力します。「はげちゃんの世界」は「 Copyright © 2016 Osamu Yamazaki. All rights reserved.」と表示しています。「Copyright」は著作権、「©」は著作権表示の全世界共通マークで、キーボードから「」と半角英数で入力します。この文字は「特殊記号」で「実態参照」という方法で表示しているのでコピーして貼り付けることはできません。「2016」は著作権の発生年、「Osamu Yamazaki. All rights reserved.」はOsamu Yamazakiが著作権所有者ですという意味になります。

では、「footer」で「<p>◆</p>」の「◆」を選択し、半角英数入力にしてキーボードから次のように入力してください。但し、「namae sei」はあなたの名前と性をローマ字で入力します。

 </div>
 <div class="footer">
 <p>Copyright 2016 namae sei. All rights reserved.</p>
 </div>
 </body>
エディタ画面の入力結果

入力内容に間違いがないか確認し、メニューバーの「ファイル」をクリックして「上書き保存」を選択します。これを忘れると、入力内容は消えてしまいます。

トップへ戻る

 4-7 ソースの調整

「Home.txt」ファイルに共通データの入力が完了しました。このままでは見づらいので、次の位置に「改行」を入れてグループごとにわけます。

 </head>と<body>の間に「改行」
 </div>と<div class="logomark">の間に「改行」
 </div>と<div class="navigation">の間に「改行」
 </div>と<div class="menu">の間に「改行」©;という文字
 </div>と<div class="main">の間に「改行」
 </div>と<div class="footer">の間に「改行」

トップへ戻る

 4-8 ソースの確認

エディタの画面で、あなたが入力した日本語の前後で、「=」「"」「<」「>」「/」が消えていないか慎重に確認しましょう。最終段階になってから確認漏れが一ヶ所あったと気づいたら、すべてを再確認して直すのは大変な作業です。次のようになっていれば完成です。

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01// EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta name="keywords" content="島崎藤村,藤村の魅力,初恋,千曲川旅情の歌,椰子の実">
<meta name="description" content="島崎藤村の代表的な作品「椰子の実」「初戀」「千曲川旅情の歌」の原文と作者の心情を反映した現代訳を紹介し、わたしの思い出を重ね合わせてみます。">
<title>島崎藤村の魅力</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div class="title">
<h1>島崎藤村の魅力</h1>
</div>

<div class="logomark">
<p>◆</p>
</div>

<div class="navigation">
<a href="index.html">  ホーム</a> |
<a href="10.html">初戀</a> |
<a href="20.html">千曲川旅情の歌</a> |</div>

<div class="menu">
<p>目次</p>
<ul>
<li><a href="#site01"></a>◆</li>
<li><a href="#site02"></a>◆</li>
<li><a href="#site03"></a>◆</li>
<li><a href="#site04"></a>◆</li>
<li><a href="#site05"></a>◆</li>
<li><a href="#site06"></a>◆</li>
<li><a href="#site07"></a>◆</li>
</ul>
<p>リンク</p>
<ul>
<li><a href="http://www.aozora.gr.jp/">青空文庫ホームページ</a></li>
<li><a href="http://www.aozora.gr.jp/guide/nyuumon.html">青空文庫早わかり</a></li>
<li><a href="http://www.aozora.gr.jp/index_pages/person158.html">島崎藤村 公開中の作品一覧</a></li>
<li><a href="http://www.aozora.gr.jp/cards/000158/card1508.html">若菜集(初戀)</a></li>
<li><a href="http://www.aozora.gr.jp/cards/000158/card18352.html">藤村詩抄(千曲川旅情の歌)</a></li>
</ul>
</div>

<div class="main">
<h1 id="site01">◆</h1>
<p>◆</p>
<h2 id="site02">◆</h2>
<p>◆</p>
<h2 id="site03">◆</h2>
<p>◆</p>
<h2 id="site04">◆</h2>
<p>◆</p>
<h2 id="site05">◆</h2>
<p>◆</p>
<h2 id="site06">◆</h2>
<p>◆</p>
<h2 id="site07">◆</h2>
<p>◆</p>
</div>

<div class="footer">
<p>Copyright 2016 namae sei. All rights reserved.</p>
</div>
</body>
</html>

エディタの画面と見比べて同一であれば大成功です。でも、何度も確認して修正し、どこまで修正したのかわからなくなったあなたは、エディタの文字を消去して白紙にしてください。「<!DOCTYPE html PUBLIC」から「</html>」までを選択してコピーし、エディタに貼り付けましょう。

ソースの下から四行目の著作権表示「特殊記号の実態参照」が「Copyright 2014」のように抜け落ちます。半角英数で「Copyright 2014」と入力してください。また、「namae sei」となっているので、あなたの名前と性を入力してください。

コピーしてエディタに貼り付けた場合は、メニューバーの「ファイル」をクリックして「上書き保存」を選択します。これを忘れると入力内容は消えてしまいます。「上書き保存」をしたらエディタの上部右余白の「×」で終了します。

トップへ戻る

5 写真の準備

 5-1 写真の選定

ウエブページに掲載される写真やイラストは、文章の補足をしたり内容の理解を深めさせてくれます。あなたがつくるウエブページ「島崎藤村の魅力」にも写真を掲載します。他人が撮影した写真や他人が写っている写真は著作権や肖像権があるので、あなたが撮影した風景写真などを利用するのが最善です。

あなたのパソコンに保管されている風景などが写ったデジタル写真(拡張子が「.jpg」の写真)を5枚選択し、選択した写真のコピーを「homepage」の「shasin」フォルダーに保管します。写真の縮小方法と掲載方法を覚えるのが目的ですから、写真の選択に時間をかけるのはやめましょう。

適当な写真が見つからない場合は、はげちゃんが撮影した写真を使います。下のリンクボタンをクリックすると5枚の写真が表示されます。説明を見ながらダウンロードしてください。

     デジタル写真がない方  ⇒  講座で使用する写真

トップへ戻る

 5-2 写真に名前をつける

ダウンロードした写真に名前をつけます。写真をポイントして右クリックし、「名前の変更」を選択します。写真の名前は次のように半角英数で入力してください。

・ はすの花の写真        00_01

・ 伊豆下田港の初日の写真    00_02

・ 札幌環状線のリンゴ      10_01

・ 浅里川温泉街の春の写真    20_01

・ すすらん丘陵公園入口写真   20_02

「00_01」の「 _ 」は「ー」や「-」ではありません。アンダースコアと呼び、英数半角で Shiftキーを押しながら「ろ」キーを押すと入力できます。

「homepage」の「shasin」フォルダー内に、「00_01、00_02、10_01、20_01、20_02」という、半角英数で名前が付けられた写真が5枚保管されました。

トップへ戻る

 5-3 写真を縮小する

「00_01」の写真はすべてのページに表示させる共通データになります。「00_01」写真をクリックすると、下のステータスバーに「大きさ:500×392」と表示されます。単位はピクセルです。

タスクバー左端の「スタート」から「すべてのプログラク」をクリックして「アクセサリ」内にある「ペイント」ソフトを起動させます。

ペイントソフトの上段メニューバー左端の「▼(下向き三角マーク)」をクリックして「開く」を選択し、「homepage」内のフォルダー「shasin」フォルダーから「00_01」写真をクリックして「開く」を選択すると写真が読み込まれます。

メニューの左から二番目のグループにある「サイズの変更」をクリックすると「サイズ変更と傾斜」のダイアログが表示されます。サイズ変更の単位で「ピクセル」をクリックし、中央部分にある「縦横比を維持する」にチェックが入っているのを確認してから「水平方向」の窓の数字「500」を「100」に修正します。

自動的に垂直方向は「375」から「78」に変更されました。「OK」をクリックし、上段メニューバー左端の「▼(下向き三角マーク)」をクリックして「上書き保存」を選択します。これで「00_01」の写真は「大きさ:500×392」から「大きさ:100×78」へ縮小されます。

「00_02、10_01、20_01、20_02」の写真は、該当フアイルの「メイン」を入力してから説明します。「ペイント」ソフトを終了させます。

トップへ戻る

 5-4 写真を挿入する

マイドキュメントの「homepage」フォルダーを開くと「index.txt」という名のファイルと「shasin」フォルダーがあります。「index.txt」をポイントして右クリックし、「プログラムから開く」で「Crescent Eve」を選択して開きます。

ブラウサのウエブページに、写真やイラストを表示させるときは「img」タグを使います。「img src="shasin/00_01.jpg"」は「homepage」フォルダー内の「shasin」フォルダーに保管されている「00_01」という名前で、拡張子が「.jpg」になっている img(イメージ=写真)という意味になります。

「00_01.jpg」という名の写真は、横幅が「83」で縦幅が「65」で、ブラウザ画面の右側に表示します。これらのデータを「イメージタグ」に入力します。

 <img src="shasin/00_01.jpg" width="83" height="65" class="right">

上記のイメージタグを選択してコピーし、「logomark」の「ソース」で「<p>◆</p>」の「◆」を選択しメーニューバーの編集で「貼り付け」を選択します。すると、「before」と「after」は次のようになります。

 <div class="logomark">
 <p>◆</p>
 </div>

イメージ(=写真)の大きさはピクセル(px)で表します。メニューバーの「ファイル」をクリックして「上書き保存」を選択します。これを忘れると入力内容は消えてしまいます。「上書き保存」をしたらエディタの上部右余白の「×」で終了します。

トップへ戻る

6 ファイルの作成

 6-1 ホームページファイル

マイドキュメントの「homepage」フォルダーを開くと「index.txt」、「style.css」ファイル、「syasin」フォルダーがあります。「index.txt」ファイルを基にして、ホームページとなるファイルをつくります。

「index.txt」ファイルの拡張子「txt」の三文字を「html」の四文字に変更します(プロバイダが「htm」を指示している場合は「htm」とします)。 「index.txt」ファイルをポイントして右クリックで「名前の変更」を選択し、「txt」の三文字を消し「html」の四文字を入力します。ファイル名は「index.html」となりました。

入力が終わったら、何もないところをクリックします。「拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか。」という「確認」画面が現れます。「はい」をクリックします。すると、ファイルは「ブラウザと同様のアイコン」にかわります。

トップへ戻る

 6-2 複数のファイル作成

「index.html」ファイルを使って、「初戀」「千曲川旅情の歌」という2つファイルをつくります。「index.html」ファイルをポイントして、右クリックで「コピー」を選択し、「homepage」フォルダー内の何もないところで右クリックして「貼り付け」を選択すると「index - コピー.html」ができます。

再びフォルダー内の何もないところを右クリックして、「貼り付け」を選択すると「home - コピー (2).html」ができます。

「index.html」から、「index - コピー.html」と「index - コピー (2).html」が生まれました。

トップへ戻る

 6-3 ファイル名の変更

「index - コピー.html」をポイントして右クリックし、「名前の変更」で「10」と入力すると「10.html」に変更されます。

同様にして、「home - コピー (2).html」を「20.html」に変更します。

トップへ戻る

 6-4 ファイルの確認

マイドキュメントの「homepage」フォルダー内に、4つのファイルと1つのフォルダーがそろいました。

 index.html  ホームページ(表紙)になります
  10.html   初戀のページになります
  20.html   千曲川旅情の歌のページになります
  shasin    写真の保管フォルダーです。

トップへ戻る

 6-5 ブラウザの操作

ブラウザには「現在見ている説明」が表示され、ブラウザ最上段の「タブ」に「はげちゃんの世界」と表示されています。この状態で「homepage」フォルダーの「index.html」をダブルクリックすると、ブラウザ画面の表示内容右の画面が現れます。

ブラウザの最上段、「はげちゃんの世界」の横に「島崎藤村の魅力」という「タブ」が表示されます。タブの背景が「明るく」なっているのは、見出しが選択されてその内容が表示されているからです。

背景が暗くなっている「はげちゃんの世界」のタブをクリックすると明るくなって「現在見ている説明」が表示されます。このように、見出しをクリックして画面を切り替えながら作業を行います。

講座の説明を読むときは「はげちゃんの世界」のタブをクリックして表示させ、作業を行うときは「島崎藤村の魅力」のタブをクリックして表示させます。作業結果を確認するときは「島崎藤村の魅力」を表示させ、ブラウザの最上段左側、データが保存されているサイトやフォルダーの場所を表示する長方形の窓にある「時計の針状回転の矢印(最新の情報に更新)」をクリックします。

トップへ戻る

     「 W初級講座1 」 ←  初級講座2 → 「 初級講座3