webサイトのHTMLを検証する

バリデートは、ページがWeb標準に従って作成されていることを 確認するための最も簡単な方法の1つです バリデートによって、Webプラットフォームが 設計どおりにそのページを処理することを確信できます このビデオでは、結果のパネル群と関連機能を使って ワークフローを改善し Webサイトを検証する方法を説明します まずは、「デザイン」ワークスペースに切り替えます 検証プロセスでは最初に 「サイトレポート」パネルを開いて コードの状態に関するレポートを収集します ウィンドウ／結果／サイトレポートを選択します 「サイトレポート」パネルの「再生」ボタンをクリックし レポート対象のページまたはサイトと レポートする詳細を選択します 「現在のドキュメント」を選択し 「HTML レポート」のオプションをすべてオンにして 「実行」をクリックします レポートにいくつかの問題が含まれています これらの問題を修正していきます Dreamweaverには、HTMLコードのクリーンアップに 役立つコマンドが2つあります 見てみましょう 選択したコードに、空のdivタグと ネストされた冗長なfontタグが含まれています このタイプの問題は 「HTMLのクリーンアップ」コマンドを使って解決できます 「コマンド」から「HTMLのクリーンアップ」を選択します 「HTMLのクリーンアップ」ダイアログボックスが開き オプションが表示されます 空のタグを自動的に削除したり ネストされたfontタグを結合したり 乱雑で可読性の低いHTMLコードの改善をおこないます 最初の2つのオプションを選択し、「OK」を押します コマンドがタスクを実行し、終了すると、まとめがポップアップ表示されます 次に、Webフォントのスクリプトタグがフォントを 正しく埋め込んでいることを検証しましょう 段落のスタイルを見ると そのフォントがWebフォントのopen-sansに設定されていることがわかります しかし、HTMLページの上部にあるWebフォントの スクリプトタグを見ると open-sansフォントを参照していないことがわかります 「Webフォントのスクリプトタグのクリーンアップ」コマンドを実行してこの問題を解決します 「コマンド」から「Webフォントのスクリプトタグのクリーンアップ」を選択しましょう スクリプトタグが正しい状態に更新されて ページ上のCSSと一致するようになります 次に、「リンクチェック」パネルで ページ上のリンクを検証します 「リンクチェック」は、サイト内の壊れたリンク 外部リンク、放棄されたリンクを報告します 「ウィンドウ」から「リンクチェック」を選択します メニューを「破損リンク」に設定し 「再生」ボタンをクリックし 「現在のドキュメントのリンクチェック」オプションを選択します 「リンクチェック」に壊れたリンクが表示されます 問題を修正し、Enterキーを押して「コード」ビューを更新します また、必要に応じて外部リンクを確認したり レポートをダウンロードしたりすることもできます W3Cの検証サービスを使ってページを検証して このプロセスを完了します これにより、見逃していた問題があれば指摘され ページが標準に準拠しており 各種のブラウザーで表示できることを確認できます ファイル／バリデート／現在のドキュメントをバリデートを選択します DreamweaverがW3Cの検証サービスに ドキュメントを送信することを示すポップアップが表示されます 「OK」をクリックします 結果が「検証」パネルに表示され エラーと警告が変更の提案とともに示されます この場合、主なエラーは メールアドレスにアンカータグの閉じタグが含まれていないことです この問題は「コード」ビューで修正します ここからもう一度検証サービスを実行したり 警告に対処したり、レポートをダウンロードしたりします さらに HTML5標準に対して検証を実行しますが 「検証」パネルで「設定」を選択して DOCTYPEを変更できます または、「編集」、「環境設定」の「W3C バリデーター」を選択します ご覧のとおり Dreamweaver CCの検証ツールを使うと コードをクリーンアップでき、コードの問題を解決でき Webサイトの準備が整ったことを確認できます 結果のパネル群を確認し これらの検証機能を使って制作ワークフローを 改善する方法を確認してください