Dreamweaver CC入門

ヘッダー・ナビゲーション・メイン・フッターを設定する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
<main>タグ、<nav>タグ、<main>タグ、<footer>タグを効率よく追加する方法について学びます。
講師:
04:37

字幕

このレッスンでは Web ページの情報のグループ化について解説します。Web ページは大きく分けてヘッダー・ナビゲーション・メインコンテンツ・フッターの4つのグループに分かれています。これらを HTML のタグを使ってそれぞれグループ化します。Dreamweaver の画面です。既に文字原稿やテーブル画像、リンク設定など基本的なHTML の情報が入ってる状態です。ここにヘッダー・ナビゲーション・メイン・フッターの HTML タグを追加していきます。これらのタグを追加するには挿入パネルを使うと便利です。パネルグループの中の「挿入」タブをクリックしアクティブにしておきます。まず最初に、ヘッダータグを追加します。今回は1行目のロゴ画像の部分こちらがヘッダーエリアになります。デザインビューのロゴ画像をクリックしプロパティインスペクターの上タグセレクターの中からh1 を選びます。そうすると、h1 タグで囲まれた所全てが選択されました。この状態で挿入パネルの中のHeader メニューをクリックします。「Header を挿入」というダイアログボックスが出てきました。今回は何も設定しませんのでこのまま右上の OK ボタンをクリックします。 そうするとコードビューにheader タグが追加されました。これでヘッダータグの設定は完了です。ヘッダータグを設定するとDreamweaver の画面に点線が表示されました。この点線は Dreamweaver のデザインビューだけに表示されるものでWeb ブラウザーには表示されません。ヘッダータグに限らず情報のグループ化に関するタグを追加するとデザインビューに点線が表示されます。続いて、ナビゲーション部分です。今回は「ホーム」「おすすめメニュー」「お店情報」こちらがナビゲーション部分になります。こちらのリストの中の上をクリックしカーソルを表示させます。プロパティインスペクターの上にあるタグセレクターからul をクリックします。リストタグ全てが選択されました。ここから挿入パネルの中の「ナビゲーション」メニューをクリックします。「ナビゲーションを挿入」ダイアログボックスが出てきました。このまま OK ボタンをクリックします。そうするとコードビューにナビゲーションを意味する nav タグが追加されました。続いて、メインタグの追加です。今回は店内写真からスタッフブログのバナー画像までがメインエリアです。 ここをドラッグで選択します。左上からドラッグがしづらい場合は右下から左上にドラッグをすると大変選択がしやすいです。選択ができましたら、挿入パネルの中の「Main」メニューをクリックします。「メインを挿入」ダイアログボックスです。このまま OK ボタンをクリックします。タグセレクターにmain タグが追加されました。最後に、フッタータグです。今回のフッターエリアは住所からCopyright 部分までです。デザインビューの住所からCopyright までをドラッグして選択します。挿入パネルの中の Footerメニューをクリックします。「フッターを挿入」ダイアログボックスが出てきました。ここもそのまま OK ボタンで確定します。コードビューにフッターを意味するfooter タグが追加されました。作業は以上です。ファイルを上書き保存しておきます。ここでは Web ページの情報のグループ化について解説しました。

Dreamweaver CC入門

DreamweaverはWebサイトに関係するHTMLファイルやCSSファイルなどを効率よく作成できるアプリケーションです。このコースではDreamweaverを使ってみたい、使ってみたけれどよくわからないという方に向け、サイト設定やHTMLのマークアップなどの基本操作を紹介します。またWebサイトを制作するために必要な知識も一緒に解説します。

1時間41分 (42 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年08月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。