同志社女子大学　現代社会学部　社会システム学科

オリエンテーション・テキストエディタを用いたWEB作成基礎（1）

HTMLとは。テキストエディタ「Mery」を用いてHTMLの基礎を学ぶ。
HTMLの基本構造。
初めてのHTML
課題提出の準備： ホームページ公開　概要および注意事項申請用紙
今回の授業で作成したデータ

HTMLの特徴である「リンク」、「画像の表⽰」を学ぶ

テキストエディタ「Mery」を用いてHTMLの基礎を学ぶ。ハイパーリンクと画像。
リンク・画像表示のHTML
鷲の写真

今回の授業で作成したデータ

Adobe DreamWeaverを用いたWEB作成基礎

WYSIWYGのHTMLエディタのAdobe DreamWeaverを利用すればテキストエディタでHTMLを書くよりも簡単で高機能であることを体感する。

Dreamweaverの起動と設定

マルチメディアの基礎

WEBで使う静止画像（GIF、JPEG、PING、webpの特徴）。

WEBで使う静止画像の種類と特徴を学び、使い分けの基準を学習する。
画像エディタ「Adobe Photoshop」を使う。

CSSを使ってページ制作（１）CSSとは何か？

セレクタを理解する。CSSはどこに書くか？、CSSの書き方の基本。
セレクタって？
・HTML要素のセレクタ ・ID要素のセレクタ　・Class要素のセレクタ

CSSを使ってページ制作（2）

レイアウトを作る
〜ヘッダーの配置、メイン要素の配置、サイドバーの配置、フッターの配置。

CSSを使ってページ制作（3）

ブロック要素とインライン要素。マージン、パディング。

ブロック要素とインライン要素とは

CSSを使ってページ制作（4）

マージン・パディングとは
〜ボーダーとコンテンツ、要素間の隙間を作る

CSSを使ってページ制作（5）

背景のスタイル、画像のスタイル
メニューボタンの装飾（疑似セレクタ、ボーダー）。

テンプレートを利⽤して、レイアウトを維持したまま2ページ⽬以降を作成する。

テーブルの使⽤
〜テンプレートを利⽤することで、効率的にページを作成し、HTMLを使ってエクセルのような表を作る。

Javascript、Ajaxを使って機能を追加する

Javascriptとは。Ajaxを使うと何が出来るか。
画像が入れ替わる効果

マルチメディアを活用したWEBページ創作（1）
〜これまでに学習してきた素材制作や、⽂書の装飾⽅法を応⽤して、
表現⼒豊かなWEBページを創作する。

マルチメディアを活用したWEBページ創作（2）
〜引き続きWEBページを創作する。

マルチメディアを活用したWEBページ創作（3）
WEBページを完成させる。
公開状態を確認する。また、授業でのチェックポイントを確認する。

遠隔授業プラス
⾃宅でDreamweaverを使⽤している⼈は少ないと思われますので、家庭学習を効率的に進められる環境を構築します。
Microsoft社製のフリーソフトであるVS Codeの紹介と、インストール⽅法、より便利にするための拡張機能のインストール⽅法を学びます。
これにより、Dreamweaverとは操作⽅法が異なりますが、⾃宅でも制作を進めることが出来ます。