構想雑文

DREAMWEAVER、FLASH、JavaScriptなど WEBデザインとMacに関すること中心の、自分向けメモ主体のブログです。

Nvu入門

Nvu から KompoZerへ

Nvuの開発がなんか動きがないなぁ〜 とおもっていたら、KompoZer というプロダクトになって継 続してます。

WYSIWYG編集可能なHTMLエディター「Nvu」の後継「KompoZer」v0.7.10が公開
http://www.forest.impress.co.jp/article/2007/09/14/kompozer.html

Linux、Windows、 Mac OSX版がそれぞれ用意されていますので、とりあえず、HTMLを書くアプリケーションに悩んでいる方は使ってみてはどうでしょうか?

とりあえず、日本語のパッチ(Extensions)もありますが、私の環境ではパッチ(Extensions)をいれる とうまく起動しませんでした(汗。

Mac版は例によって簡単にもとに戻せるのですが、Windows版の場合、以 下のフォルダを削除するともとに戻りますので、おかしくなった! という人はお試しあれ!

C:¥Documents and Settings¥[ここはユーザー名]¥Application Data¥KompoZer¥

【追伸】

確認のために、再度インストールしたところ、うまくいきました!

KompoZerのlanguage packs(Localization)からダウンロードするとうまくいきます!
http://www.kompozer.net/l10n/

[Nvu]step13 テーブルでレイアウトをする

近年ホームページを作る際、レイアウトを作成するのに、スタイルシートを使ったほうがいいと言われるようになっています。

スタイルシートを使うべき理由はここでは割愛しますが、スタイルシートのレイアウトには経験と知識、時間が必要で、はじめてホームページを作る人にとっては修得するのにとても大変な技術です。


続きを読む

[Nvu]step12 リンクを追加する

Nvuでは、簡単にリンクを作成できます。

リンクの方法は、相対パスと絶対パスの二種類あります。
絶対パスは、「http://www……」というURLアドレスを頭から記述したもの。相対パスは、リンクを始めるファイルから、リンクするファイルを見た位置関係で記述するやり方です。

続きを読む

[Nvu]step11 テーブルを挿入する

Nvuでの表の作成は、Wordの表の作成と似ている部分があるが、Nvuのほうがより直感的に作成できる。

ただ以下の注意点もある。

  • 標準の表の各セルの行揃えが右寄せになっている。
  • 標準では表を作成した時点の高さの情報(height)がはいるため、Sourceで修正する必要がある。
ここでは喫茶店のメニューを表で作成していきます。続きを読む

[Nvu]step10 背景の色を変える/背景に画像を埋め込む

ここではHTMLの文字色、背景色を変更、背景に画像を配置します。

ブラウザの基本設定では、テキストの色は黒、背景は白、リンクする部分は下線の入った青、リンクの一度開いた部分は紫、リンクをクリックした瞬間は赤になっています。

続きを読む

[Nvu]step9 画像を追加する

Nvuでは画像の加工ができません。ホームページに貼付ける画像は事前に「Adobe Photoshop Elements」「Paint Shop」「Paintgraphic」などの画像作成ソフトを使って作成・加工しておきます。

挿入できる画像はpng、gif、jpegの3種類です。

画像はhtmlと同じ場所に用意してください。
※Nvuの編集中、画像だけをフォルダわけしておくとファイルが煩雑にならず、作業をやりやすい。ところがアップロードするとhtmlファイルと同じ場所に配置されるようになるので、注意が必要。

続きを読む

[Nvu]step8 ページの先頭にもどる

前のステップでリンクをクリックするとページ内の指定された場所へ移動できるようにしました。

同じページ内のリンクは、一度リンクで移動させると、次の項目に移動させるためのリンクを設定するのが大変です。

そのため、読ませたい文章の箇所が終わったら、「上にもどる(メニューにもどる)」というリンクを追加し、必ずそのページの先頭にもどるリンク、もしくはメニューの部分へもどるリンクを用意しておくといいでしょう。

続きを読む

[Nvu]step7 ページの中でリンクする

リンクをクリックすると同じページの中で移動できるようにします。

リンク先の名前は、必ず半角英数字にしてください。半角英数字以外で名前をつけるとサーバーにファイルをアップロード後うまくリンクしない場合があります。

続きを読む

[Nvu]step6 メーラーが起動するようにする

メールアドレスをクリックするとメールソフトが起動するようにします。
最近は、ホームページ内に埋め込まれたメールアドレスを収集される恐れもあるので、あまりお薦めの方法ではありません。

お問い合わせなどはできれば、フォームとCGIの組み合わせで作成するといいでしょう。
  続きを読む

[Nvu]step5 文章にメリハリをつける2

文章を読みやすく、わかりやすくするためにメリハリをつけていきます。

見やすくするために、文章の位置を整え、罫線、文字に色をつけたり、太字にしていきます。

また、特殊文字の挿入方法です。

続きを読む

[Nvu]step4 文章にメリハリをつける1

文章を読みやすく、わかりやすくするためにメリハリをつけていきます。

見やすくするために、文章に見出し(headline)、段落(paragraph)、リスト(list)の他に、文字に色をつけたり、太字にしていきます。

続きを読む

[Nvu]step3 文章を作成する

NvuではWordのようなワープロソフト、テキストエディタのように文字の入力ができます。

実際、文章はあらかじめワープロソフト、テキストエディタなどで作成しておき、その文章をNvuに貼り付けたほうがいいようです。

ここではあらかじめテキストエディタで作成した文章を貼付けることを前提に作業を進めます。


続きを読む

[Nvu]step2 新規ページをつくる

Nvuを起動すれば、空欄の編集可能なウィンドウが開いた状態になります。
新規にファイルを作る場合は、メニューのfile > Newで作成してください。

新たに作られたファイルはタブで増えていきます。

ここではまず、作業するファイルを保存します。


続きを読む

[Nvu]step1 作り始める前の準備

Nvuをインストールした時点で作成を進めると、ブラウザで確認すると日本語のページが文字化けして表示されてしまうことがあります。

それは、作成されるHTMLが英語圏向けに設定されているために起こる問題です。

インストール後、最初に文字化けが起きないように、環境設定を変更してください。

その後、制作に入ります。


続きを読む

[Nvu]step0

Nvuでホームページを作成する方法

架空の喫茶店(カフェ)のホームページの作り方を通してNvuの使い方を学習するための文章です。

最終的には、ノンピリオドのホームページに画像も含んで公開予定です。

実際の素材もある程度できあがったら、ダウンロードできるようにします。

もともとDreamweaver学習用に作成したものなので、ちょっと無理な部分があるんですが‥‥‥

また、スタイルシートは一切使っていません。最終的にはテーブルでレイアウトを組むところで、まずは終わりです。

Nvu関連

唐突にNvu関連の資料を漁っている。

私のサイトではDreamweaverの使い方をまとめていたのだけど、それだけだとどうもうなぁ〜となぜか思い立って、急にNvuのほうはどうかと調べはじめた。 続きを読む

改めてNvu

そろそろホームページビルダーの最新版がでそうですが
ホームページを作るためにはソフトを買わなくちゃいけないってことはない。

ホームページビルダーのように Nvuを使えばホームページを作ることができる。
普段、私はDREAMWEAVERを使っているのだけど、このNvuにはDREAMWEAVERにはない機能もあるし、使ってみると意外や面白いソフトだと思う。

現在、英語版しかダウンロードできないが、日本語の解説や日本語化する方法をまとめたサイトがあるので、他のオープンソース系のソフトに比べると初心者にもそんなに敷居が高いソフトではないと思う。

ちょっとしたホームページの練習に、ブログに記事を書くようにできるのが、このソフトの面白いところ、と思ってしまった。


「HTML5入門」絶賛発売中!


「DreamweaverではじめるWebサイト構築」という本を書きました。
現在絶賛販売中!

楽天市場


FaceBook
記事検索
訪問者数

    livedoor プロフィール

    ムラヒデ

    ブログランキング・にほんブログ村へ

    人気ブログランキングへ

    • ライブドアブログ