Dreamweaverでhtmlタグを綺麗にする設定(ソースコードのフォーマット)

イメージ
 Dreamweaverでhtmlを作成していると、プログラマーの人に渡した時に「タブスペースや改行がくずれる」という現象が起きる。 というのも、Dreamweaverでタグをエンター改行すると、インデント分の空白が勝手にタブで入ったりしてしまうのだ。 今まではその都度手作業でスペース入れたりしていたのだが、ちょっとdiv増やしたりするともうスペースの入れ直し!! …というのが一発で解消する方法を知ったので、設定を含めてメモ。 まずは上部メニューの「Dreamweaver」→「環境設定」を開く その中にある「コードフォーマット」で、上記設定をしておく。 ・インデント:☑を使用「2」「スペース」 ・タブサイズ:「2」☑スペースとして挿入 ・TDタグ:□TDタグ内に改行を含めない コード画面左側にある「ソースコードのフォーマット」をクリック その中にメニューとして「コードフォーマット設定」があるので、それを選ぶ。 タグごとに細かな設定ができるので、自分が一番見やすいように修正する。 自分の場合は「a」「div」「head」「button」を修正。 aタグの設定 改行:タグの前後 コンテンツ:フォーマットおよびびインデントあり divの設定 改行:前、中間、後 コンテンツ:フォーマットおよびびインデントあり buttonの設定 改行:前、中間、後 コンテンツ:フォーマットおよびインデントあり headの設定 改行:前、中間、後 コンテンツ:フォーマット及びインデントあり 最後に、「ソースフォーマットの適用」 ソース画面左の「ソースコードのフォーマット」アイコンを押して、「ソースフォーマットの適用」を選択すると、開いているソースの中身が整形されます。 ざっと見直して問題なければこれで完了!

opencms設置方法

■opencms_8.0.1jaのインストール手順
※Windows7の64bit環境だった為、VirtualPCを構築

1.サイトからダウンロード
http://www.opencms.jp/download/

2.解凍した中のinstall.htmlの流れに沿って各種ソフトをインストール
  1)java SDKをインストール
http://www.oracle.com/technetwork/java/javase/downloads/index.html
    Windows x86版の「jdk-7u1-windows-i586.exe」をダウンロード&インストール
  2)Tomcatをインストール
http://tomcat.apache.org
    「apache-tomcat-7.0.22.exe」をインストール
  3)Tomcatの中にopencmsのファイルを移動
    Tomcatのインストール先フォルダの下記階層にopencmsのフォルダ内にあった「opencms.war」を配置
    例)C://tomcatにインストールした場合
      C://tomcat/webapps/opencms/  (「opencms」は任意のフォルダ名で良い)
      opencms.warの拡張子を.zipに変更し、解凍して出てきた中身を上記階層に配置しておく
  4)MySQLをインストール
http://www.mysql.com/downloads/
    「mysql-installer-5.5.17.0.msi」をサービスにインストール
    ※MySQL Workbenchで以下の設定をしておく
      1)Server AdministrationのLocal MySQL5.5を起動
      2)Options Fileにある「Networking」タブに移動し、「max_allowed_paket」にチェックを入れ、
        値に「16777216」を入力
      3)MySQLを再起動させる
  5)opencmsのインストール画面を起動
    ブラウザで下記アドレスにアクセス
http://localhost:8080/opencms/setup/
  6)画面に従ってインストール(特に問題がなければそのまま行くはず)

■opencmsの使い方(たぶんこんな感じ)
1.jspファイルを作成して、そこに独自タグを記述しておく。
2.「1」で作ったファイルをテンプレートにして、通常のhtmlページを作る

■インストールで起きた問題点
※MySQLのmy.iniの場所が分からなかったり、変更したのに再起動がうまく出来てなかった問題が起きた
※opencmsでページを作成してアクセスすると「?」だらけのエラー画面が表示されるが、一度「設定」画面を開いてOKを押すとなぜかふつうに見られるようになっている。(英語と日本語の関係か?)
※プレビュー画面上で編集が行えるはずの◎ボタンがうまく機能しない問題は、単純にタグの記述ミスか?
※まだまだ中身を完全にいじりきれていないのでよくわからない点が多い

コメント

このブログの人気の投稿

Dreamweaver(ドリームウィーバー)でコピーができない。ペーストができない。

wordpressのtwentyseventeenのヘッダー画像サイズを統一する

habakiri 固定ページ・個別(投稿)ページ・その他ページのヘッダー画像にアイキャッチ画像を使用