2010年10月1日金曜日

ホームページを作ろう-pectinの使い方(1)

pectin の使い方(1)

pectin はXML,XHTML,CSSなどWebページ制作を行うためのテキストエディタです。つまり,文字,文書を入力するということに関しての基本操作はメモ帳やワープロなどと同じです。

ここでは、次のソースを新規に作成する場合を例に pectin の基礎操作について説明します。

なお、説明画面はMac上のpectinを例示してありますが,画面デザインが若干異なるだけで,操作はWindows,Mac,Linuxともに共通です。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta content="text/html; charset=UTF-8"
http-equiv="Content-Type" />
<title>とにかく作ろう</title>
</head>
<body>
<p>初めてのWebページ</p>
</body>
</html>
  1. pectin の起動
    pectin をインストールしたフォルダ内にある「pectin.jar」をダブルクリックします。Windows でもしうまく起動できない場合は,Java がインストールされているか?、あるいはプログラムの関連付けがJavaに関連づけられているか?を中心に確認してみてください。

  2. 新規文書の作成
    新規文書を作成する場合,最初にツールバーの左端にある「新規作成アイコン」をクリックするか,メニューバーから「ファイル-新規作成」を選択するか,ショートカット「Ctrl+N」(Mac の場合は,Ctrlキーの代わりにcommandキーを使用)を操作します。

  3. テンプレートの挿入
    次に新規Webページのひな形(テンプレート)を挿入します。まずは、左側のパネル(この部分を「XMLカタログ」と呼びます)の「テンプレート」部分をダブルクリックするか,「テンプレート」の前の記号をクリックします。すると,基本テンプレートが3種類表示されます。

    今回は,もっとも基本となる「XHTML 1.0 基本」をダブルクリックします。すると,白紙だった新規文書に新たにテンプレートが挿入され,カーソルは,最後の行の末尾に位置付けられます。

  4. 不要な行の削除
    今回は不要となる行を選択します。選択方法は,メモ帳やワープロと同じです(キーボード操作ならば「Shift+矢印」で選択します)。
    行を選択後,「deleteキー」をクリックするか,メニューバーから「編集-カット」を選択するか,ショートカット「Ctrl+X」を操作します。

  5. title要素の記述
    title要素の記述を「とにかく作ろう」に変更します。

  6. body要素内のp要素の記述 p要素の記述には,いくつかの方法があります。

    • 方法1
      タグも含めてすべてキーボードから入力します。慣れてくると,案外,この方法が一番早い場合もあります。
    • 方法2
      XMLカタログを利用してタグを先に入力する方法です。
      この方法では,タグを挿入したい位置にカーソルを移動し,その後,XMLカタログの「ブロックレベル要素」を展開(ブロックレベル要素をダブルクリック)し,その中から「p」をダブルクリックします。
      p要素の開始タグと終了タグが挿入され,開始タグの直後にカーソルが位置付けされます。



    • 方法3
      p要素の内容を先に入力して,その後,XMLカタログを利用してタグを挿入する方法です。まずは,内容となるテキストを先に入力して,入力したテキストを選択します。

      テキストを選択後,方法2と同様にして,XMLカタログの「p」をダブルクリックします。すると,選択したテキストの前後に開始タグと終了タグが挿入され,開始タグの直後にカーソルが位置付けされます。

    実際には,どの方法でも構いませんし,要素によって使い分けしてもいいと思います。
  7. 完成したソースの新規保存
    ソースが完成したならば,それを「新規保存」します。まずは,メニューバー「ファイル-名前を付けて保存」を選択するか,ショートカット「Shift+Ctrl+S」を操作します。
    保存ダイアログが表示されるので,保存したいフォルダを選択後,ファイル名を入力し,エンコーディング(新規保存の場合は,UTF-8がデフォルト)を選択します。そして最後に「保存」ボタンをクリックします。

最後に,保存したファイルを再び編集する場合のファイル読み込み方法について説明します。ファイルを読み込む場合は,pectin を起動後,ツールーバーの左端から2番目の「ファイルを開く」アイコンをクリックするか,メニューバー「ファイル-ファイルを開く」を選択するか,あるいはショートカット「Ctrl+O」を操作します。
すると,「ファイルを開く」ダイアログが表示されるので,読み込みたいファイルを選択後,「開く」ボタンをクリックします。なお,ファイル開く場合,デフォルトエンコーディングは「UTF-8」となっていますから,エンコーディングが異なる場合は,そのエンコーディングを選択してから,「開く」ボタンをクリックします。
そして,編集後,ファイルを上書き保存する場合は,ツールバーの左端から3番目の「上書き保存」アイコンをクリックするか,メニューバー「ファイル-上書き保存」を選択するか,あるいはショートカット「Ctrl+S」を操作します。

0 件のコメント:

コメントを投稿