XHTML+CSSで作るWebサイト

XHTML+CSSで作るWebサイト

XHTML+CSSで作るWebサイト(初級編)で学習する内容

XHTMLとCSSのテンプレートを活用し、ほんの少し修正を加えるだけで、ビジネス用のWebページとして公開できる、効率的な作成方法を学習します。

Lesson.1 Web サイトの構成

  • Web サイトの構成
  • WWW サーバとは
  • URL(Uniform Resource Locator)とは

Lesson.2 Web サイト作成の流れ

  • Web サイトの公開目的の明確化
  • Web サイトの掲載内容の準備
  • Web サイト公開の準備
  • Web サイトデザインの検討
  • Web ページの作成

Lesson.3 XHTMLの基礎知識

  • XHTML ファイルを作成するステップ

Lesson.4 テンプレートをダウンロード

  • テンプレートのダウンロード
  • フォルダの作成

Lesson.5 ホームページ・ビルダーで編集

  • 初期設定
  • テンプレートを利用してXHTML の編集
  • ファイルを開く

Lesson.6 CSSファイルの関連付け

  • CSS ファイルの作成
  • CSS の関連付け
  • CSS をはずす方法
  • CSS との関連付けの再設定

Lesson.7 テンプレートの編集

  • head 要素の編集
  • Web ページのタイトル(見出し)の記述
  • サブメニューを追加する
  • 「著作権名」の変更
  • その他のページの変更

Lesson.8 画像の編集

  • ヘッダー画像の変更
  • 画像編集の準備
  • オリジナル画像の作成
  • ページタイトルの記載

Lesson.9 CSS(スタイルシート)の編集

  • CSS を開く
  • トップページ[index.html]のCSS を編集する
  • バナーのリンク先と文字の装飾を変更する



XHTML+CSSで作るWebサイト

XHTML+CSSで作るWebサイト(中級編)で学習する内容

XHTMLとスタイルシートの使い方や記述方法、XHTMLとCSSの関係や役割を理解し、ビジネスの場に活かせるWebページを実践的に作り上げながら知識を習得します。

Lesson.1 Web サイトの作成準備

  • 保存先フォルダの作成
  • XHTML ファイルの新規作成
  • CSS(スタイルシート)の外部ファイル作成
  • XHTML ファイルとCSS ファイルの関連付け

Lesson.2 レイアウトの基本

  • レイアウトを<div>で作成
  • デザインをCSS(スタイルシート)で作成
  • float で左右に配置
  • 横幅の指定

Lesson.3 ラインの作成

  • ラインの作成
  • 背景の指定

Lesson.4 タイトルと見出しの作成

  • タイトルの記述
  • 見出し本文の記述

Lesson.5 箇条書きの作成

  • ul タグとli タグで箇条書き

Lesson.6 Class 属性の活用方法

  • div タグとclass 属性

Lesson.7 フォントサイズと色の変更

  • CSS(スタイルシート)を指定する3 つの方法
  • テキストの色の指定

Lesson.8 margin とpadding の活用方法

  • 余白の指定
  • 全ての余白をリセット
  • 「padding」と「margin」のおさらい
  • 上下左右の余白を個別に指定

Lesson.9 文章の配置

  • 文章の配置の指定

Lesson.10 テンプレートの完成

  • Web ページを中央へ配置

Lesson.11 Web ページの作成

  • XHTML ソースの貼り付け
  • レイアウトの基本構成
  • リンクでWeb ページを関連付け