web研究会

Ｗｅｂ研究会　第１３回例会
　おたるの桜の名所”手宮公園”の桜も見事と報じられた５月１０日(土)おたる美術館に於いて1：20pmより、
「Ｗｅｂ研究会」では、高木秀二氏(ＳＳＮの創設者で初代理事長)をお迎えしてＷｅｂ講座が開かれました。

高木先生が今日の「「Ｗｅｂ研究会」の勉強会のためにHP『Ｗｅｂデザイン研究会』のtopページに「Ｗｅｂ研究会交流ボード」を
設置して戴きました。その「Ｗｅｂ研究会交流ボード」を使って、先ずは

①『Ｗｅｂデザイン研究会』topページのアドレスをお気に入りに入れる。

②「Ｗｅｂ研究会交流ボード」に　”コメント”と”写真”の投稿をする。投稿の手順・修正・追加記事の投稿の仕方を教わり、
　全員がアップ！　Ｗｅｂにふれる実感を味わいました。

③「Ｗｅｂ研究会」がページ作りの方法としている、ＨＴＭＬ５で構造(モジュール)化文書を記述していくこと。

④　ＣＳＳではページの　見え方、見栄え(スタイル)の記述をする。

⑤ javaScriptではページに動きを作る。

⑥ Ｗｅｂ作りの手段として　テキストエデイター・ExpressionWeb(無償)・Dreamweaver(高価)・HPビルダー(テーブルレイアウト
　から抜け出せない。
　他にＷｅｂ作りの手段として、ＣＭＳの代表例としてWordpress(ワードプレス)やJIMDOなどが紹介された。

⑦Ｗｅｂの25年の歴史や、最近のＷｅｂ環境について。CSS Zen Gardenのスタイル分離ソース公開しました。
　特に、2008年～現在までのＷｅｂ環境について。ここ数年前までは、思いも及ばない程の目覚ましい進化をしました。

⑧これからのホームページ作にりは、クロスブラウザ(iPhone・iPad・ＰＣ。これらどの様なツールでも見られるブラウザ)を目指し
　作らなければならないこと(若者は『iPhone』『iPad』などの保有が多く、パソコン無い人が増えました)

⑩サーバーのお話など


★どのようなツールでも見られる環境をクロスブラウザ『Ｗｅｂの標準化』というそうですが、これからのホームページ作りは、
　もっと若い世代の持っているツール『iPhone』『iPad』などでも見えるホームページ作りを目指すべきと感じました。

　ossのホームページもシニア会員だけが見るようなホームページではなく、『Ｗｅｂの標準化』を目指すときと感じました。
　そこにＯＳＳの未来も係っていることを予感しました。

　世の中、これからまだまだ思いも及ばぬツールが出てくると思いますが、対応できる知恵を学び、どんどん吸収したいものと、
　高木先生のお話をお聴きし、気持ちを新たにいたしました。
　４：１０pmまで深いぃ(フカイ～ィ)お話で楽しい講座となりました。高木先生ありがとうございます。
　
　(本日の講座は、講師高木秀二氏・受講生は１３名・見学者１名・計１５名でした)講座の後に記念に集合写真を撮りました。


なお、近日中にこのプレゼンを『Ｗｅｂ研究会』のページに掲載の予定をしております。
投稿者
みぞいゆき
投稿日
2014/05/12(Mon) 21:59
No.
51

Re: Ｗｅｂ研究会　第１３回例会


Ｗｅｂ講座の後に　記念にパチリ！

投稿者
みぞいゆき
投稿日
2014/05/12(Mon) 22:02
No.
52

Re: Ｗｅｂ研究会　第１３回例会


Ｗｅｂ講座の準備です

≪画像をクリックすると大きくなります≫

投稿者
みぞいゆき
投稿日
2014/05/12(Mon) 22:06
No.
53

Re: Ｗｅｂ研究会　第１３回例会


交流ボードに投稿してみましょう！

投稿者
みぞいゆき
投稿日
2014/05/12(Mon) 22:08
No.
54

Re: Ｗｅｂ研究会　第１３回例会


『次は何？』どんどん話に引き込まれてゆきます！

投稿者
みぞいゆき
投稿日
2014/05/12(Mon) 22:10
No.
55

Re: Ｗｅｂ研究会　第１３回例会


交流ボードにコメントと画像を投稿してみる！

投稿者
みぞいゆき
投稿日
2014/05/12(Mon) 22:13
No.
56

Re: Ｗｅｂ研究会　第１３回例会


自分のお気に入り写真の一枚を画像を投稿するって楽しいね！ また　してみようかな！

投稿者
みぞいゆき
投稿日
2014/05/12(Mon) 22:19
No.
57

Web研究会　第12回例会
今回の例会は、例会の度に学習の内容を詳しく投稿してくださっています、副部長の溝井さんにがお休みして、いつもの投稿に感謝の気持ちを胸に抱き、久原が担当致します

今回はホームページ3作目の最終の講義でした
lefttboxの一番下の300x200のタイトル画像をclickすると
パソコン画面一杯のフルスクリーンスライドショーが始まる
仕掛けの学習とフッターの学習でした
このスライドショーはパッケージなっていますので、
用意した6枚の画像に　picという名前に3桁の番号をつけることから、はじまり決められた手順に沿って、作業を進めていきました　
皆さん全員、パソコンに想い想いのスライドショーが表示されました

又今後の個人のページとなるサーバーのフォルダー名も松本綾子さんが担当し希望の表示名で準備をしてくださいました
このフォルダー名は,個人のホームページのアドレスとなります
今まで作成した3つのホームページを繋ぐ.トップページの作成後、レンタルサーバーの、サクラサーバーへのupの学習となります
皆さんのホームページが楽しみですね
　
参加者は　12名でした

投稿者
久原　豊子
投稿日
2014/04/14(Mon) 08:34
No.
49

Web研究会　第11回例会


　前日には、公立の小樽の小中学校も青空の下一斉に卒業式が行なわれ門出を祝いましたが、
今日も青空！気温も上昇！雪解けが進んだせいでしょうか開放された気分でホット一息です。
そんな中、小樽美術館研修室に於いて「第１１回Web研究会例会」が行われました。


《今日の講習内容》
◎《sampley2.htm》構造についてモデル画面を使って説明

<head>部
①<title>について
②headに記載されている何個かのCSSについて。
　※そのCSSの役割とは(どんな働きをしているのかモデル画面を使って説明）

<leftbox><rightbox>モデル画面を使って説明　
①#contentsの中の#leftbox・#rightboxに記載されている内容と意味
<leftbox>
　<h1>〇〇〇〇見出し</h1>と<h2>〇〇〇〇見出し</h2>の文字色変更してみる。
　※cssのスタイルの管理から　#leftbox h1のスタイルの変更から
③<h2 class="hdline hd-orange">〇〇〇</h2>の"hdline hd-orange"　の色を変更してみる
変える方法※インテリセンスを利用して変える。※<head>部にあるline.cssからリンクして変える。
④画像の挿入
　※フォルダリストにあるphotoフォルダ内の画像ファイルからドラッグしていれる方法と
　※インテリセンスを利用して画像ファイルを挿入する方法。
⑤frame(フレーム）付きの画像のframeの種類を変えてみる
　※<head>部にあるframe.cssからリンクし変える方法。
⑥フレーム付き画像の説明文を記述するは・・・・・
　※<p class="bun">○○ここに文章を入れる〇〇</p>

<rightbox>
⑦自己紹介について
⑧#mapを挿入してみる
　※ユーチューブより目的のマップを検索し、マップの埋め込みコードをコピーし<div id="map">の下行に、
　　貼り付ける。
　※画像が大きすぎてはみ出す時には<iframe width="〇〇〇" height="〇〇〇"・・・・・・・・・・・・>の
　　〇〇〇にそれぞれ200と数値をいれてください。

⑨宿題
　※<slideshow>については４月に学習しますので、スライドショー用の画像を用意してください。
　　画像の大きさは横幅1050px　高さ700px　が　枚数は６枚です。

★３月の例会は今までに学習した確認しながらの集大成のような講座になりました。

★★
　 pm４：00～は年度の締めくくりとして(総会の代わり）溝井ユキが司会と努め、
　久原豊子部長さんに『Web研究会』起ち上げから今までの活動への思いと、平成２６年度の思いなど語って
　いただきました。
　松本綾子さんには会計報告をしていただきました。
　
★★★《26年度活動方針》
　①『Web研究会』のサーバーを持ちたいこと。
　※出席者全員の賛同をいただきました。
　②講座の研修場所について
　※なるべく会場借り上げ無料の美術館にしたい。
　③26年度の会費
　※26年度会費は￥1,000とする。残金は翌年に繰り越す。
　④外部講師について
　※講座で受講生の理解度がより増すと思われ、講師の方の了解が得られる場合に於いて、クラブ起ち上げ発起人で
　　相談の上お願いすることがあります。

★★★★講座を受講された方の感想やこれからの希望をお聴きしました。
　※とても詳しいテキスト作りにとても感謝していますとのご意見をいただきました。
　※テキストについては講座前には目を通して欲しい。
　

　日　時：小樽美術館１階研修室　pm1：30～4：30

　出席者：１４名
投稿者
みぞいゆき
投稿日
2014/03/16(Sun) 23:27
No.
47

Re: Web研究会　第11回例会


例会開催の日時は　３月15日(木曜)です
投稿者
みぞいゆき
投稿日
2014/03/17(Mon) 00:00
No.
48

Web研究会　第１０回例会

ここのところ小樽エリアも降雪で除雪作業で苦労していますが、ソチにもこの雪をお裾分けして上げたいくらいですね！
そんな中、小樽美術館の研修室に於いて第１０回Web研究会が行われました。

《今日の学習内容》
※１月の例会で学習した《sampley2.html》と《sampley2.css》の内容を詳しく復習しました。

①《sampley2.html》の画面構成について
　◎<header>の部位　(このページはブラウザで見ると６枚の画像がスライドしている)
　〇<nav>ボタンについて
　◎<contents>の部位について　(　<leftbox>と<rightbox>がある)
　◎<footer>の部位について

②基本のページレイアウトについて　(このページは以前に示した９ツのレイアウトの内の《2b.html》のレイアウトを
　使用している。

③<body>の構成について　(　bodyは<pagewrap>という枠内に納まる。<pagewrap>中に <header>と<contents>と<footer>がある。

④ページタイトルの確認
　<title>ページの○○タイトル</title>

⑤<header>部にスライドさせる６枚の画像を入れましょう
　<div class="topimage">
　<div class="slider">
　　<img alt="画像の説明" src="photo/画像名〇〇〇.jpg">　(○○にphotoフォルダ内ににある６枚の画像をいれてください)

⑥<nav>の色を替えてみましょう
　<ul class="clearfix">
　　<li><a class="button btn-orange" href="#">○○ページ名</a></li>

※<li><a class="button btn-orange"がナビボタンの色　href="#"はリンクさせるHPのURL>〇〇ページ名</a></li>
　
　ナビボタンの色を変えるには2月例会テキスト《ボタンの色を変えてみましょう》に従ってください。

　”エクスプレッションWeb4”のインテリセンス機能を利用して変える方法と、<nav>のスタイルの変更から変える方法です。

⑦CSSの追加
　《sampley3.css》の32行～47行までの　.topimage｛○○｝　.slider {○○｝　.slider img {○○｝　　　　
　　※○○の中身も一緒にコピーして《sampley2.css》の最後尾に貼り付けてください
　　※cssファイルでは後に記述した内容が優先されます。
　

およそこのような内容でしたが、久原部長さん作成の懇切丁寧なテキストにより、次回例会は益々面白くなりそうです。


《参考》
◎日時：2月22日(土）PM 1：30～4：00　◎場所：小樽市美術館(1F：研修室)　◎出席者(１１名)
投稿者
みぞいゆき
投稿日
2014/02/23(Sun) 15:00
No.
42

Re: Web研究会　第１０回例会


皆さん熱心に取り組まれております。
画像クリックすると大きく表示されます
投稿者
みぞいゆき
投稿日
2014/02/23(Sun) 15:07
No.
43

Re: Web研究会　第１０回例会


学習の様子①

投稿者
みぞいゆき
投稿日
2014/02/23(Sun) 15:10
No.
44

Re: Web研究会　第１０回例会


学習の様子②

投稿者
みぞいゆき
投稿日
2014/02/23(Sun) 15:12
No.
45

Re: Web研究会　第１０回例会


学習の様子③

投稿者
みぞいゆき
投稿日
2014/02/23(Sun) 15:13
No.
46

Web研究会　第９回例会

全国的な寒波に見舞われ、北海道も道央を中心に豪雪に、ここ小樽も朝からとても寒い日でした。
今回も小樽美術館に於いて11日(土)午後１時３０分～４時３０分)、Web研究会例会が行われました。

今例会からは"sampley2.html"を使いますが、昨年のプレビュー画面では"sampley3"に似ていますが
これに"slidesyow"が加わるものです。

これまでの復習として
①"header"に、それぞれ"タイトル画像"用に縮小用意した「画像」(幅1000px×250～300px)６枚

を"topimage"に入れる。"nav"にリンクを貼る。

②"contents"の"leftbox"に、１番目と２番目の記事に「見出し」・「画像」(幅300px×高さ200pxで
フレームを追加したフレーム付き付き画像)・「文章」を入れる。

③"rightbox"の"sidbox"にオーナーの紹介記事と画像を入れる・自分の作成しているページに関連
した"map"付き画像(mapのソースを貼る)・やはり自分の作成しているページに関連した"slideshow"
を貼る・・・・でした。

★③自分の作成しているのページに関連した"slideshow"を貼るは、次回例会に於いて学習することに
なります。

「サンプル2」は以前にも学習した内容でそれぞれページ作りをしましたが、お習いの意味で再確認
することになりました。

今日は前回勉強し完成させた「サンプル３」を久原部長さんのUSBメモリにコピー致しました。
またクラブ紹介用写真の(今日の参加者)撮影も致しました。

今日の出席者は１１名でした。
投稿者
みぞいゆき
投稿日
2014/01/12(Sun) 01:47
No.
34

Re: Web研究会　第９回例会


今日出席のメンバーです
投稿者
みぞいゆき
投稿日
2014/01/12(Sun) 01:51
No.
35

Re: Web研究会　第９回例会


今日参加のメンバーです

投稿者
みぞいゆき
投稿日
2014/01/12(Sun) 01:53
No.
36

Re: Web研究会　第９回例会


久原部長さんとＴ氏

投稿者
みぞいゆき
投稿日
2014/01/12(Sun) 01:56
No.
37

Re: Web研究会　第９回例会


左からＭさん、Ｍ氏、Ｈさん、Ｓさん

投稿者
みぞいゆき
投稿日
2014/01/12(Sun) 02:03
No.
38

Re: Web研究会　第９回例会


Ｔ氏

投稿者
みぞいゆき
投稿日
2014/01/12(Sun) 02:06
No.
39

Re: Web研究会　第９回例会


左からＫさん、Ｍ氏、Ｍさん

投稿者
みぞいゆき
投稿日
2014/01/12(Sun) 02:11
No.
40

Re: Web研究会　第９回例会


真剣にページ作りです

投稿者
みぞいゆき
投稿日
2014/01/12(Sun) 02:14
No.
41

Web研究会　第８回例会

１４日(土)は発達した低気圧が通過した影響で道内は前日より空模様は大きく乱れ
交通機関も大きな影響を受け、また気温もグッと下がる寒い日であった。


《今日の学習内容》
◎　自分の見ているパソコン画面の幅と、ホームページの<body>の幅との関連の解説。
　　<body>＝パソコンの幅の意味。パソコンの幅(body)を100％として<#pagewrap>は、
　　その80％と指定されている。従って<#pagewrap>内にある<#contents>の幅も80％
　　であること。
　　<#contents>内に<#leftbox>と<#rightbox>があった時に、仮に<body>の幅1000px
　　とし<#leftbox>を70％・<#rightbox>を30％とした時の<#leftbox>と<#rightbox>
　　の幅はそれぞれ何pxになるかを解説。

◎　html・ cssにかいてある言葉の解説
　　Font-family(文字書体)・Line-height(行間)・margin(内容の外余白)・Padding
　　(内容の内余白)・ border-radius(ボックスコーナーの角丸)・ box-shadow(ボッ
　　クスに影をつける)・ alignleft(左に寄せる)・alignright(右に寄せる)・
　　 aligncenter(中央に寄せる)・ background-color(背景の色)・rgba(透明度R、G、
　　B、A値で指定)・ hoveer(マウスポインタが乗ったとき)・iframe＝Inlinフレーム
　　の略で他のドキュメントを表示することができる)など。

◎　そのInlinフレームで<#rightbox>にGoogleマップを貼ってみました。
　　(貼り付けるマップは小樽駅から小樽市立美術館までの地図です)。
　　これは事前に『Web研究会』のホームページの「例会案内コーナー」”12月14日第
　　８回Web研究会”に於いて、詳細に解説された久原豊子部長作成の資料が掲載され
　　ましたので、予習に”サンプル３”の<#rightbox>に貼り付けてきた受講生もいま
　　した。まだ貼り付けずにいた受講生は、資料に書かれた手順通りGoogleマップ-
地図検索サイトにアクセスし、目的のマップの「埋め込みコード」をコピーして
　 「埋め込みコード」<#rightbox>貼り付けることができました。
　　受講生全員がマップを貼り付けることができました。

◎　マップを貼った後にＣＳＳの追加をしました。
　　CSSファイル表示して、今講習では『スタイルの管理』の新しいスタイルから追加
　　をしました。

　 「新しいスタイル」⇒「セレクタ(S)で＃mapを選択。「定義先」で既存のスタイル
　　シートを選択　⇒　『新しいスタイル』のダイヤログボックスで追加する必要な
　　値を”配置・フォント・ブロック・ボックス”に入れていく方法を選びCSSに追加
　　記載しました。

新しいことを学び、作成ページ内に表示できた喜びを受講生に感じていただいたことは
大きな収穫だったように思います。
　

《講習会場》
○場　所：小樽美術館・1F研究室　
○時　間：PM　1：30～4：30
○参加者：講師含め１２名でした
投稿者
みぞいゆき
投稿日
2013/12/15(Sun) 22:32
No.
30

Re: Web研究会　第８回例会


ページ内にマップを貼り付けようとしています

投稿者
みぞいゆき
投稿日
2013/12/15(Sun) 23:37
No.
31

Re: Web研究会　第８回例会


皆さん！学習意欲すごいんです！

投稿者
みぞいゆき
投稿日
2013/12/15(Sun) 23:39
No.
32

Re: Web研究会　第８回例会


部長の久原豊子さんです！

上の画像もクリックしてくださいね　大きくなりますヨ！

投稿者
みぞいゆき
投稿日
2013/12/15(Sun) 23:43
No.
33
Pages:

Page: | 1 | 2 | 3 | 4 | 5 | 6 |

先頭へ戻る
閲覧回数
12387

最新の技術で綺麗なホ-ムペ-ジ作成を目指すクラブです。月1回の例会ですが、希望の方にはサロンで補習を行っています
最新のwebページ作成に興味のある方はクラブ員までお申込み下さい。

Web研究会のページ

「WelcomeBoard」は、皆様の日常の声をお聞かせ戴いています。貴方の投稿お待ちしてます。

閉じる

修正または削除

処理

記事No

照合キー

閉じる

新記事投稿

おなまえ
タイトル
コメント
掲載画像
照合キー 修正、削除のときに必要です（英数字で8文字以内)
合言葉
文字色 ■ ■ ■ ■ ■ ■ ■

- Joyful Note -