FreeSoft De PcLife!

「FreeSoft De PcLife!」フリーソフトでパソコン生活！

フリーソフトを使った覚書と感想などを掲載しながら、フリーソフトを活用してWebページの作成を行っています。

ステップ 1：Inkscapeでレイアウト！

InkscapeはWINDOWS版・Linux版があります。
ベクトル形式のドロー系ソフトです。
Inkscapeでボタンやホームページレイアウトの作成について
このページはInkscapeでレイアウトしたものです。

ステップ 2：GIMPで整形！

フォトレタッチ系のソフトです。
GIMPはWINDOWS版・Linux版があります。
Inkscapeでレイアウトしたものを各パーツごとに整形したり掲載する画像の加工などを行います。

ステップ 3：StyleNoteでHTMLページ！

■ StyleNote
HTML・StyleSheetを作成編集できるエディタ
タグの一部を入力するだけで自動生成！
例[<a空白]と入力すれうば⇒<a href=""></a> href=""以降にスペースを空ければ各要素を簡単入力できます。
Inkscape・GIMPで作成した画像をStyleNoteを使いwebページを作成していきます。

今回3つのフリーソフトを使ってWEBページを作成しました。
（このページ全体、StyleNoteで作成しております。）
作成したHTMLを雛型にし各ページを同じように表示させました。
こうすることで各ページを容易に作成することが出来ます。
（雛型に各ページの写真や記事を入力するだけ）
またレイアウトを変えればぜんぜん違ったイメージに置き換えることが出来ます。
CSSをブログに合わせて作成すれば雛型として作成することが出来ます。
ブログと言えば文字コードが問題になる事がありますが残念ながら今回のStyleNoteでは対処できません。

しかし、下記高機能エディタで解決できます。

■ 高機能エディタ
Windowsメモ帳はShift_JISでCMSやショッピングサイトを編集した場合文字化けが起こります。
こんな時に活躍するのが、CMS・ショッピングサイトを編集できるのが高機能エディタです。
いろんな文字コードに対応していますので、文字化け対策にご利用ください。
またソフトにより保存時に変換したい文字コードに変換できます。
※ 各種エディタのページ