LogoMark.png

Webデザイン基礎B/2020/0914

第1回 ガイダンス

Webデザイン基礎B/2020|造形短期大学部|2020.09.14対面
情報共有シート特設サイト

AGENDA


以下、本日の内容です。



本日のメニュー


ガイダンス

この授業の進め方について

学習目標

HTML+CSSによるページ制作の技術を習得するとともに、
自身の「ギャラリーサイト」を構築します。

Webの現状と演習内容の位置づけ

専門的な知識がなくても、誰でもきれいなWebサイトを持てる時代です

ですが、この演習では単なるエンドユーザーではなく、デザイナーとしてサイト構築に携わることを前提に、HTMLとCSSというWeb標準の技術について学びながら、半年を通して「あなた自身のギャラリーサイトの構築」を目指します。

受講に必要な環境

対面と遠隔のハイブリッド授業となるため、以下のような、インターネットを活用するためのアカウントと自宅の受講環境が必要になります(自宅に環境がない場合は、実習室を利用して下さい)。

この演習で使用するソフトウエア

特別なソフトは必要ありません*1。ホームページの制作には以下の2つがあれば十分です。

付記:実習室における Atomの利用について

個人用のディスク領域に Atomを置いて下さい。

特設サイトについて

対面と遠隔のハイブリッド展開を臨機応変に切り替えられるよう、当授業用の特設サイトを設けています。以下に、あなた専用のページ(お名前がそのままページ名です)があることを確認してください。

 特設サイト(受講生一覧) ブックマークしておいて下さい。

第1回目の授業では、まず、その使い方の説明と、実際に、みなさんからの情報発信体験をしていただきます。

特設サイトはMediaWiki というCMSでできています

MediaWiki は、Wikipedia のために作られたWikiシステムで、 Webブラウザから簡単にページの発行・編集などを行なうことができます。MediaWiki はオープンソース(無料)なので、Webの基礎とサーバー関連の技術を身につければ、誰でも自由にこのようなサイトを構築することができます。
 MediaWiki は Markdown記法という、HTMLを記号化した文法で記述されたテキストデータを PHPによって HTML に変換する処理を行なっています。
 つまり、この授業で後に予定している、HTML の構造に関する理解は、Wikiの編集を通して学ぶことができるので、このスキルを身につけて損することはありません。
 さらにここで、経験したことは、そのまま Wikipedia の執筆にも活かすことができますので、ぜひ、積極的な記事の執筆に挑戦して下さい。



特設サイトの執筆・編集の手順を体験します

1. はじめにログインが必要です

サイト右上の「ログイン」をクリックして、利用者ID と パスワードでログインして下さい。

2. あなたのページに移動します

MediaWikiの編集記法を確認します

基本3要素

記事の基本要素は、見出し・本文・箇条書き です。これを正しく、使って記事情報を構成することができれば、仕事の8割は完成すると思ってください。

見出し

見出しは、半角の [ = ]記号を連結する形で、大見出し、中見出し、小見出しを区別します。

==大見出し==
===中見出し===
====小見出し====


本文

編集画面内での改行は画面には反映されません。連続する文章は一つの段落内に連続する文字列とみなされ、文章の幅はウインドウの幅に応じて変化します(リキッドレイアウト)。

箇条書き

番号なしリスト、番号付きリスト、定義リストは以下の書式で実現します。

* 箇条書きレベル1
** 箇条書きレベル2


斜体・太字・文字色

斜体と太字については シングルクォーテーション ['] を用いて演出します。

''斜体''
'''太字'''
'''''太字 & 斜体'''''


整形済みブロック

行頭に半角スペースがあると「整形済みプロック」とみなされて、ライトグレーの背景枠が出現します。

この文章は、行頭半角スペースに続けて記載しています。




記事の執筆を体験します

1. 自身のページへ移動

あなたのページを別窓で開いて下さい。
特設サイト

2. 記事の雛形を入力

はじめに、テンプレート(雛形)を提供します。

==研究テーマ(私の関心ゴト)==
===タイトル===
◯◯◯◯◯ ◯◯◯◯◯◯◯◯◯◯ ◯◯◯◯◯(一行程度で簡潔に)
<br>

===研究の目的・背景===
上記、研究テーマ(関心ゴト)との出会い、背景。また、その関心ゴトを追求するために、具体的にどんなことを学びたいと考えているか・・など
<br>
<br>

==自己紹介==

===ごあいさつ===
(担当教員に向けて・・ではなく、不特定多数の閲覧者に向けて)

<br>
 
===自由な見出し===
(趣味、好きな音楽・・など自由に・・)

<br>
<br>


3. 記事の書き込み


留意事項

以上、第1回目は、この先の遠隔授業を想定した「情報共有のための基盤づくり・記事の執筆体験」をもって終了とします。

第2回は、対面 / 遠隔 で行います。 (第1回の授業の状況を見て判断します)



PAGES

GUIDE

DATA


*1 一般にWebページを作る際にはDreamweaverやホームページビルダーのようなWebオーサリングツールが必要なのではないか?という印象をお持ちの方も多いかと思いますが、それらは視覚的に組み上げられたページを描画するHTMLとCSSを自動生成するソフトで、結果的に出来上がるのはHTML、CSSなどのテキストファイルに過ぎません。HTMLとCSSの仕組みを理解した上で利用すれば格段に生産効率が上がりますが、基礎が無いとかえって混乱します。はじめのうちはHTMLとCSSを直接テキストエディタでコツコツ手入力することをお勧めします。
Last-modified: 2020-09-14 (月) 16:55:57