LogoMark.png

Webデザイン実習/2019

Whiteboard

Webデザイン実習|情報デザイン専攻| 水曜1・2限 デジタルラボ 501
受講生マスターページ一覧 

FTPクライアント接続情報

第15回

ポートフォリオサイトの制作 4

サンプルサイトの整理

視聴覚情報論のレポート提出確認のお願い

レポート提出が確認できない方が数名います。メールが正しく送信されていないケースがあるようです。学科の特設ページで提出状況を確認できるようにしていますので、以下ご確認下さい。
ソーシャルデザイン学科/特設ページ



第14回

ポートフォリオサイトの制作 3

第13回

ポートフォリオサイトの制作 2

補足説明

第12回

ポートフォリオサイトの制作

残り数回で、各自ポートフォリオサイトの作成に取り組みます。
まずは以下、Web制作のワークフローについて確認します。

各自のポートフォリオサイトについて

ポートフォリオサイトは、各自の個人プロジェクトとして扱います。以下の手順で、プロジェクトページを作成し、そこから閲覧できるようにして下さい。


参考:学生サイトスライド

学外、学内サーバーが混在しています。一部のサイトは学内のみです。
http://art.kyusan-u.ac.jp/Slide20190226/




第11回

jQueryをベースとした各種プラグインを試します。

はじめに

より本格的なサイト制作に向けてサンプルのディレクトリ構造を変更します。

この状態で、ページが正常に表示されるよう、html, css を調整して下さい。


bxSliderの活用 SAMPLE

画像のスライドショーを実現する技術でカルーセルとも言われます。この種のプラグインは多数ありますが、ここでは、導入が比較的簡単な bxSlider を紹介します。

参考:jQuery/Slider

LightBox SAMPLE

クリックで画像が拡大表示。ギャラリーサイト等でよく用いられる技術です。

参考:jQuery/ModalWindow

パララックス効果 SAMPLE

パララクスとは「視差」のことで、ボックス領域のスクロールスピードを調整することで、奥行きのある視覚空間を演出するものです。jQuery用のプラグインが多数ありますが、ここでは、parallax.min.js を使います。




第10回

jQueryの活用

jQueryとは、様々な表現機能を使いやすくまとめた軽量ライブラリです。Javascriptライブラリのデファクトスタンダードとして、様々な場面で活用されています。以下のページで概説します。

サンプル制作




第9回

はじめに

前回の続き、DOMのサンプル html_css_javascript_03 について、サンプルを提供します。複数の事例を組み込んでいますので、まずはご確認ください。
filehtml_css_javascript_03.zip

BOM と DOM

JavaScriptの書き方、動きのイメージが掴めたところで、次の段階に入ります。JavaScriptのコードを本格的に理解するには、ブラウザとHTMLドキュメントの「オブジェクト構造」を知ることが必要です。以下で概説します。

JavaScriptプログラミングのキーワード

以下、重要なキーワードについて再確認 > JavaScript

JavaScriptの基本文法について

プログラムの各行の記述を、より深く理解するために、JavaScriptの文法について、詳細に確認します。

第8回

事務連絡

はじめに

DOMについて

JavaScript をより本格的に活用するためには DOM(Documment Object Model)の理解が必要になります。DOMとは、HTMLドキュメント(window.document)にアクセスするためのAPIです。JavaScriptは、このDOMを用いることで window.document を親オブジェクトとして階層化された様々な要素にアクセスできるようになっています。以下のページで概説します。




第7回

今回から JavaScriptを利用したサンプルを制作します。

JavaScriptの基本

第6回

演習:レスポンシブデザイン

補足

以下、CSSの様々なキーワードを列挙します。時間に余裕のある方は、それぞれお試し下さい。

擬似要素

その他

よくある質問への回答 > CSS/Tips




第5回

演習:基本レイアウト(前回の続き)

前回に引き続き、CSSによる様々なレイアウトサンプルを作成する時間とします。なるべく多くのパターンをサンプルとして作ることをお勧めします。

前回紹介したサンプルの構造は、以下のようなものでした。

body{ 
  #container {
    header { }
    nav { }
    main { 
      section {
        article { }
        article { }
            :
      }
      aside { }
    }
    footer { }
  }   // End of Container
} // End of Body

 

CSSの全体像を復習

CSSを書く順序

絶対的な決まりがあるわけではありませんが、基本的には「全体から部分へ」「ページの上部から下部へ」を意識して記載します。意識的に追加するCSSなどを除いて、基本的に記述が重複しないよう、注意して下さい。一般に以下の順番になります。

様々なレイアウトの手法

親要素と子孫要素について

階層構造をもつ文書において対象を選択する際にこの概念を理解することが重要です。外側の要素を親要素、中に囲まれている要素を子孫要素といいます。

<div> ← 親要素
  <p> ・・・ </p> ← 子要素
  <p> ← 子要素
      <span>・・・</span>  ← 孫要素
  </p>
  <p> ・・・ </p> ← 子要素
</div>


思い通りのレイアウトを実現するには・・

第4回

はじめに

第4回から数回に渡って、CSSによるビジュアルの制御を試します。
これ以降のサンプルは html_css_xxx というフォルダ名で管理します。
以後、個々のサンプルづくりにはそれ相当の時間を要します。

CSSの利用

CSS(Cascading Style Sheets)とは、HTMLで記述された文書内の各要素のビジュアルに関する仕様(書)を意味します。CSSを記述することにより、ページのレイアウト(各要素の配置)、文字の種類・サイズ・色、また背景色・背景画像といった、ビジュアルに関する細かな設定が可能になります。

CSSの基本的な書き方

セレクタ、プロパティ、値 ・・・ルールは以下のとおり。
コロン(:)とセミコロン(;)を間違えないようにご注意下さい。

セレクタ {
   プロパティー : 値 ;
          :
}


スタイルシートファイルの作成と関連づけ

body {
    background-color: silver;
}
h1 {
    background-color: black;
    color: silver;
}
a {
    color: red;
    text-decoration: none;
}

 

タグ要素に対するデザイン定義

<body>や<h1>など、タグ要素に対してスタイルを定義する場合

h1 {
     background-color : gray;
}


ID と CLASS を利用したデザイン定義

HTMLには、書類上の場所を特定するために、IDとCLASSを自由に命名して記載することができます。これらを利用すると、任意の場所に対してデザインの定義が可能になります。

演習:基本レイアウト

補足:ダミーテキストの利用について
イメージ確認用のダミーテキストには意味があってはいけません。以下のようなダミーテキスト生成ツールがありますので、利用して下さい。

レンタルサーバーについて

早期にサーバーの確保を希望する方、授業中に個別にサポートします。



第3回

前回の質問への回答:文字参照

HTMLの中に直接書くと、タグや特殊記号として処理されて、その文字そのものが表示されないものがあります。その場合は以下のように「文字参照」を使って表示させます。

文字実体参照 表示 備考
&quot;    "    quotation mark  引用符
&amp;     &    ampersand アンド記号
&apos;    '    apostrophe アポストロフィ
&lt;      <    less-than sign 不等号(小なり)
&gt;      >    greater-than sign 不等号(大なり)
&copy     ©    copyright コピーライト
尚 &lt; という文字そのものを説明のために表示したい場合は、
&記号自体を、&amp; と表記します。
よって、以下のように記載すると表示されます。
&amp;lt;


前回にひきつづき、HTMLタグの個別サンプルページを作成します。
以下の点に留意して作成して下さい。

演習:A

<a href="sample.html" target="_blank">サンプルページへ</a>

演習:TABLE

<table>
    <tr>
        <td>データ</td>
        <td>データ</td>
    </tr>
</table>

演習:FORM

<form action="(送信時の動作|CGIやJavaScript関数)">
    <input type="text" name="NAME"></div>
    <input type="submit" value="送信">
</form>

その他

以下のようなタグもシンプルな事例で試すことができます。
時間に余裕があればサンプル化してください。

以下のような見栄えに関するタグは非推奨です。これらはCSSで制御するので、使わないようにしましょう

第2回

はじめに

前回の授業で、サーバー/WWW-KSU に置かれていた index.html ほか、1年次に作成したWebサイトを portfolio フォルダに移動しました。その操作により、情報デザイン演習I の演習7 がリンク切れになっているケースが見られますので、各自、昨年のページを確認して、以下のようにリンクを再構築して下さい。

[[学内サーバー動作確認>http://www.kyusan-u.ac.jp/~k18as000/portfolio/]]


HTMLタグ 基本サンプルの制作

前回にひきつづき、HTMLタグそれぞれについて、基本的なサンプルを作成して、各自のマスターページから閲覧できるようにします。

前回作成したサンプルをベースに、以下の点に留意して作成して下さい。


演習:LIST

<ul>
  <li><a href="#">項目1</a></li>
  <li><a href="#">項目2</a></li>
  <li><a href="#">項目3</a></li>
</ul>


演習:DL/DT/DD|説明リスト(定義リスト)

<dl>
  <dt>芸術表現学科</dt>
  <dd>芸術表現学科では・・・・・・・・</dd>
  <dt>写真映像メディア学科</dt>
  <dd>写真映像メディア学科では・・・・・</dd>
  <dt>ソーシャルデザイン学科</dt>
  <dd>ソーシャルデザイン学科では、・・・・</dd>
</dl>


演習:PRE|整形済みテキスト

<pre>
  この文章は、そのままのイメージで表示されます。
  BR(改行)タグが無くても、見た目のまま改行されます。
</pre>

参考:プログラムのソースコードなどを表示する場合、されに<code>を併用することで、素材のイメージをそのまま表示できるようになります。以下、PREタグ、CODEタグを用いて、CSSのコードを画面に表示する例です。

<pre><code>body{color:red};</code></pre>


演習:IMG

<img src="images/sample.gif" alt="香椎駅" width="200" height="100" >
属性 src ソース alt 代換え文字 width="480" 表示幅 など
画像として使える形式  JPEG、GIF、PNG

画像の形式
・JPEG:微妙な色彩の変化を多く含む写真等の圧縮に最適
・GIF:256色以下、写真よりはイラスト等で圧縮効率が大きい
 アニメーションのデータを扱える点でも重要な形式 > GIFアニメ
・PNG:背景を透明化したロゴ・マークの作成等に最適
  Photoshop等では背景レイヤーを削除(透明化)した状態のものをPNGで保存すればOK
 
サイズの目安
現在のWebサイト(PC)の幅は、960px 〜 1280pxあたりです。小さな表示でいい場合は、320px幅〜640px幅、拡大して見てもらいたい場合でも1280px幅あれば十分です。1920px幅(FullHD)はWebページ掲載用としては贅沢です(通信負荷が大きくなります)

演習:AUDIO / VIDEO

<audio src="sounds/sample1.wav" autoplay></audio>
属性 src ソース autoplay 自動再生 loop ループ再生 
   controls コントロールバー など
使えるデータ形式 WAV、MP3、MIDI(演奏情報)
<video src="movies/sample1.ogv" autoplay></video>
属性 src ソース autoplay 自動再生  width="480" 表示幅
   controls コントロールバー など
使えるデータ形式 WebM、Ogg、MP4

第1回

ガイダンス

演習の進め方について

学習のキーワード


演習環境の準備

以下の3種類のツールを使います。いずれもOpenSourceです。自宅の学習環境にも準備しておいてください。

サーバーの準備

当実習の成果物を収める専用のディレクトリ(フォルダ)を準備します。

はじめの1ページ

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Sample Page</title>
  </head>
  <body>
    <h1>見出し</h1>
    <P>
      本文|適当に文章を書いて下さい。
    </P>
  </body>
</html>


はじめの1ページを基本サンプルとして公開


リモートとローカル

基本のタグについて

参考:HTML

ソースコードの書き方について

フォルダ名、ファイル名は必ず半角英数で''

images page01.html page-01.html page_01.html logoMark.jpg など、
Webサイトを構成するフォルダやファイルの名称は、すべて英字ではじまる半角英数で命名します。日本語や特殊記号、またスペースも不可です。

文字コードについて

演習:P と BR

演習:H1-H6

補足講義


以下、準備中

ローカルサーバーの利用について

本格的な運用に向けて、サーバーを理解する演習を行います。

補足確認

PAGES

GUIDE

DATA

添付ファイル: filehtml_css_javascript_02.zip 39件 [詳細] filehtml_css_javascript_03.zip 62件 [詳細]
Last-modified: 2020-02-02 (日) 18:04:17