web研究会

Ｗｅｂ研究会　第１９回例会
この頃は陽ざしも弱く、雪の便りやイワシが浜辺に大量に打ち上げられるなどの不思議な現象も聞かれます。
そんな中、私達は冬に備えてお腹周りも一段と福与かになってきたようです。例会日も穏やかな日となりました。


今日の学習

※受講に際しては、ＨＰ『Ｗｅｂ研究会』の19回例会より、テキストをダウンロードし印刷したテキスト
『Ｎｏ1～Ｎｏ３』を基に進みました。
、
●≪大まかなＨｔｍｌとＣＳＳ≫
ページの構造についてプロテクター映像により再確認いたしました。
"sample1.10.html"と"sample1.11.css"によるページにおいては、

<body>の幅は100％でパソコンデスプレイに表示される幅であること。
<div id="pagewrap">は<body>の幅の80％の幅である。ＣＳＳでは(#pagewrap{width:80%;)
<header>の幅は<div id="pagewrap">の100％。ＣＳＳでは(header{width:100%;)
<div id="contents">の幅は<div id="pagewrap">の幅の100％である。
<div id="leftbox">の幅は<div id="contents">の幅の70%である。ＣＳＳでは(#leftbox{width:70%;} )
<div id="rightbox">の幅は<div id="contents">の幅の30%である。ＣＳＳでは(#rightbox{width:30%;} )
<footer>は<div id="pagewrap">の100％。ＣＳＳでは(footer{width:100%;)

●ＣＳＳを変更しページの画面(デザイン)がどのように変わるのか確かめてみる。
〇bodyの背景色を変更してみる。ＣＳＳではbody{ background-color:#〇〇〇〇〇〇; }
　※スタイルの管理→bodyを右クリック→スタイルの変更→背景→ background-colorで選択する。
〇ＣＳＳの　#pagewrap{min-width:800px;}(最小の幅を800pxに指定する)。 の数値を変更するとページの
　表示がどの様に変わるのか？
〇ＣＳＳの　#pagewrap{margin:0 auto; が無いとページの表示がどの様に変わるのか？
〇ＣＳＳの　#contentsとfooterには廻り込みを解除するclear:both; を入れましょう。
　ＣＳＳでは#contents{clear:both; }　・ footer{ clear:both; }
〇ほかfooterの背景色や<h1>や<h2>の文字色の変更をしてみる。
　rightboxのタイムライン(<ul class="timeline">)設定で、文字色・文字の大きさ・行間高さなどを
　ＣＳＳから、デザインを変えてみることを実際にして戴きました。
〇サンプルのfooterから、もう一つの footerに入れ替える(例会時配布のファイル"footer.txt"により
footerのhtmlとcssを書替え、footerに色を付け文字を2emと大きく文字は中央配置にする)などでした。

※ページのできた方はアップロードをいて戴きたいこと。またＯＳＳサロンでもサポートを致します。
　12月例会までには皆さんがアップロードできるよう頑張ってください。
　また新年からは素敵なページの紹介も致します・・・と久原部長さんのお話でした。


※今例会では、ＳＳＮホームページクラブから副部長の横山範雄さんが、当会の学習の見学においで戴き
　ました。遠いところありがとうございます。

例会参加者は１２名でした。
投稿者
みぞいゆき
投稿日
2014/11/10(Mon) 12:07
No.
72

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


sample1.10.htmlページの一部

投稿者
みぞいゆき
投稿日
2014/11/11(Tue) 00:04
No.
75

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


ＣＳＳでデザインを変えてみましょう

投稿者
みぞいゆき
投稿日
2014/11/11(Tue) 00:09
No.
76

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


学習風景！

投稿者
みぞいゆき
投稿日
2014/11/11(Tue) 00:14
No.
77

Ｗｅｂ研究会　第１８回例会

近くに見える山々も色づきを増し、我が町も紅葉前線の真っ只中にあるようです。
１８日(土)、午後１時３０分より「小樽レピオ」に於いて、第１８回Ｗｅｂ研究会例会が行われました。

今日の主な学習

※９月例会でファイル(sample1.10.html・sample1.11.css)内に、ライトボックス(Lightbox)を作り完成させましたが、
今日の学習では、このファイル内に更にスーパーボックス(Superbox)を設置することでした。
追加する(Superbox)を設置する手順としては　(※)　の順にします。

※SuperBoxに挑戦しましょう
●<head>内に以下のスクリプト・スタイルシートを追加します
〇テキストＮｏ4　の９行目赤ラインで囲まれている部分
〇テキストＮｏ4　の１８行目で赤ラインで囲まれている部分
〇<script>
　　　$(function() {
　　　　　$('.superbox').SuperBox();
　　　});
</script>

●sample1.11.cssファイルにcssを追加します
〇cssの最後尾に以下を追加する

/* SuperBox */
.superbox {
width:86%;
margin:10px auto 50px;
}
.superbox-list {
width: 25%;
}
.superbox-list img {
border-left: 1px #fff solid;
border-bottom: 1px #fff solid;
}

※設置する(Superbox)に画像を入れて下さい。(画像ファイルはphoto フォルダに保存しましたね)
●<div class="superbox-list">
<img src=""photo/画像jpg"data-img="photo/画像jpg" alt="" class="superbox-img"> </div>
①<img src=""photo/画像jpg"とある箇所にphotoフォルダに在る画像を入れた下さい。
②data-img="photo/画像jpg"とある箇所に入れる画像は<img src=""photo/画像jpg"に入れた画像と
同じものを入れます。
③①・②の操作を８～１２回繰り返し行って(Superbox)を作ってください。


◎ライトボックス(Lightbox)とスーパーボックス(Superbox)の説明については、今回使った
pdfファイルに説明があります。

◎ＨＴＭＬの構造について
●HTMLの構造は毎回例会に於いて解説していますが、図解により基本的情報や内容をどこに
記述するのか示されました。


☆午后４時迄学習・参加者は１３名でした

★なお、この投稿は禁止ワードに(ＷＷＷ)が記述されていて投稿拒否されましたのでリンクを外し
投稿しております。
投稿成功するといいのですが！・・・やはり投稿拒否されましたので

未だ、スーパーボックスが未完成の方は、もう一度テキストを見て下さい。
投稿者
みぞいゆき
投稿日
2014/10/20(Mon) 01:41
No.
71

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

スーパーボックスに挑戦

投稿者
みぞいゆき
投稿日
2014/11/10(Mon) 23:53
No.
73

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

テキストに従い・・・・

投稿者
みぞいゆき
投稿日
2014/11/10(Mon) 23:57
No.
74

Ｗｅｂ研究会　第１７回例会

夜明け前、野の草に宿る『白露』の候、それでも昼間は残暑が残り夏の気分が抜け切れません。何となく体の疲れを感じるのでは
無いでしょうか？

蒸し暑い６日(土)に、1：30pm～小樽美術館研修室に於いてＷｅｂ研究会例会が行われました。

≪主な講義≫
①先ず、久原部長さんから、今日から学習する『サンプル1の応用』のファイル(sample1.10.html.txt)(sample1.10.css.txt)の配布を受け、自分のサイトのフォルダ内に納め( .txt をはずすこと)また、自分で用意してきたReサイズ画像をphotoフォルダに納める。

②今日のサンプルページは、画像をクリックすると拡大表示する『 Lightbox 』を使っています。表示させるためのソースは
<div class ＝"syasin"><a href="photo/〇〇〇.jpg" data-lightbox="aki-1"><img src="photo/〇〇〇.jpg" alt="説明"></a>となる。
１枚の画像でサムネイル写真も、拡大写真も表示できるのです。

③『 Lightbox 』と『 rightbox = 右boxの意 』とでは意味が違うので注意のこと。

④『 javascript 』と『 jqueryプラグイン 』について簡単な説明があった。

⑤ほか、前回に作ったページの分からないところのサポート。ＯＳＳサロンに於いてもＷｅｂ研究会のサポートをしますので『サロンにも
おいで下さい』との久原部長さんのお話でした。

★写真の挿入しましたら、文章もいれて完成を目指してくださいね！

午後４時過ぎまで熱心に学習しました。　出席者は講師を含め１１名でした。
投稿者
みぞいゆき
投稿日
2014/09/08(Mon) 02:10
No.
66

Web研究会　第１６回例会

第１６回Web研究会例会

台風が迫る蒸し暑い日でしたが、8月9日(土)午後1時30分～4時迄　生涯学習プラザ『レピオ』に於いてWeb研究会の
例会が行われました。

今日の例会の一番のテーマは　≪自分の作成したページを公開する≫　でした。


①前回７月の例会でも学習しましたが、ページをアップする作業をスムーズにする為に、『Web研究会』フォルダ
　の以下のフォルダの整理と確認をしました。

　※『Web研究会』フォルダは、名前の変更で『Mysite』となっているか。

　※『Mysite』を開くと『Webken○○○』フォルダ(○○○の部分は自分の名前です)と・『練習サイト』フォルダが見えます。

　※『Webken○○○』フォルダの中には(css ・ dsgnimg ・ img ・ js ・ photo ・ slideshow)のフォルダ・index.htmlと、
　　 top.htmlとtop.css ・これまでに作成したファイルの□□.htmlと □□.css 等ファイルがある)

　※ 各フォルダには空のindex.htmlを入れる。

　※『Webken○○○』フォルダと、『練習サイト』フォルダの中身は同じにすること。

　※ アップするファイルは『Webken○○○』の中にある。

②Web研究会サーバーに接続する準備

　※７月例会までにダウンロード済みの『FFFTP』を開き、ホストの設定で以下をする。
　(ホストの設定名・ホストのアドレス・ユーザー名・パスワード・ローカルの初期フォルダ・ホストの初期フォルダ)

③サーバーに接続する(接続ボタン)

　※ ローカルサイト側(左側)にはこれから転送しようとするフォルダとファイルが並んでいます。サーバー側右側には
　　　index.htmlがあります。
　　
　※ 上部バーにある、ローカルサイト側(左側)と、サーバー側(右側)にあるアドレスを見比べて確認すること。
　　 ローカルサイト側アドレスの末尾にはWebken○○○とある・サーバー側アドレ末尾には〇〇〇とあることを確認すること
　(他人のフォルダに転送しないようにする確認ためです)

　※ 転送するフォルダ・ファイルを選択してアップロードボタンを押す。
　 　転送が完了したら、ローカルサイト側とサーバー側は同じなる。

　※ 切断ボタンを押す。

　※ アップしたページの確認(Web研究会会員に割り当てられた自分のアドレスに〇〇〇.top.htmlでみる)


④ほか、絶対パスと、相対パスについてなど学習しました。


★今回のページのアップロードは、ＰＣの調子の不具合のためアップできなかった１名を除き、全員がアップできました。
　アップロードのためのフォルダの確認などの準備に時間をかけましたので、思ったよりスムースにアップできました。

★
日 時：8月9日(土)　午后 1時30分～4時迄
場 所：生涯学習プラザ『レピオ』１階研修室
出席者：１２名

※今回は例会様子をお伝えする写真はありません。担当者のカメラの不具合により載せることが出来ず、お詫びします。
投稿者
みぞいゆき
投稿日
2014/08/11(Mon) 01:50
No.
65

Ｗｅｂ研究会　第15回例会

7月16日(土)　Ｗeb研究会例会報告

今日は生涯学習センター『レピオ』1階に於いて、6月例会に引き続き講師は副部長の松本綾子さんが担当しました。

①自分の作ったページを、サイトにアップロードするための準備としてフォルダの整理をしました。
　〇ドキュメント内に作った、旧フォルダ『1Ｗeb研究会』の中のフォルダ「Mysite」を”名前の変更”をし⇒
　変更後のフォルダ名は　webken〇〇〇となる(例：webkenyuki・各人に割り当てられたホルダ名となります)
　〇「Mysite」内の資料倉庫は１ツ上の階層に移すます。
　〇名前の変更したフォルダ「webkenyuki」をコピーして”名前の変更”をし⇒変更後は「練習用」となる。
　〇フォルダ『1Web研究会』の”名前の変更”をし⇒変更後のフォルダ名は『Mysite』となる。
　※『Mysite』フォルダ内は、３ツのフォルダ「webkenyuki」・「資料倉庫」・「練習用」が並びます。
　※「webkenyuki」と「練習用」の中身は同じになる
　　「webkenyuki」はアップロードするためのフォルダ・「練習用」は自分のレッスン用のフォルダなので、作成中
　のページは「練習用」フォルダを使います。
　※「photo」フォルダ内の余分な画像ファイルは削除整理しておいたほうが良いでしょう。

②〇『Web4』を起ち上げ「サイトリストの管理」でドキュメントの『Ｍysite(新サイト)』を”追加”、”完了”する。
　　『1Web研究会(旧サイト)』は削除します
　〇「サイトを開く」から追加された『Ｍysite』を選択、開いて下さい。

③〇ページ間のリンクの付け方についての復習。
　「練習用」ホルダの「top.html」と「top.css」を開き、top.htmlの<header>の<nav><!--ナビゲーションメニュー -->
　を記述させます。次は例です⇒ <li><a href=#"></a></li>・・・・・("#"はリンク先のページです)
　　<li><a href="top1html">title文字の変更</a></li>・・・・
　　<li><a href="top2html">スライド</a></li>・・・・・(等となります)
　※リンクさせたい数だけのページを作ります
　※「スライド」・「navは画像の上に」・「contents横に配置」等のページは、以前に配布したテキストを参考にして
　作ってください。(〇〇.cssや〇〇.htmlを見て記述を変更します)

④アップローとするためのフリーソフト、『FFFTP』を未だダウンロードしてない人に『窓の杜』よりダウンロードする
　お手伝い。
　・・・・・等々でした。

講座は16：00pm迄熱心に行われました。7月例会の出席者は講師を含め12名でした。
　　
投稿者
みぞいゆき
投稿日
2014/07/20(Sun) 14:43
No.
62

Re: Ｗｅｂ研究会　第15回例会


今日はページをサイトにアップロードする準備についてです。

投稿者
みぞいゆき
投稿日
2014/07/20(Sun) 17:07
No.
63

Re: Ｗｅｂ研究会　第15回例会


まずはフォルダの整理を　「名前の変更」から始めます

投稿者
みぞいゆき
投稿日
2014/07/20(Sun) 17:12
No.
64

Web研究会　第14回例会
どんよりと雨を含んだ曇り空の午后、小樽美術館研修室に於いて第14回Ｗｅｂ研究会例会が開催されました。

『Ｗｅｂ研究会』のＨＰより、副部長の松本綾子さんが作成したファイル・6月14日分資料をダウンロードして講座に
臨みました。

≪講座内容≫
①今日ページで使うダウンロードした資料(Stylelesson.html.txt)(Stylelesson.css.txt)(pdfファイルを)　Mysiteの
資料倉庫フォルダに・画像はMysiteのphotoフォルダに納める。またteml・cssファイルはReネームし使いました(top.htm
とtop.css)

②図解でheader / content / footer を表示し、今日はどんなページに作り上げて行くのか解説。

③bodyの幅 / headerの幅 / headerに表示させる画像の幅と高さ / contents の infowkuの幅 / infowkuに表示させる
４枚の画像の大きさ(其々幅200px ×　高さ80px)

④Ｗeb4 でhtml と cssのタグを記述する時のインテリセンスの機能の使い方 / 画像の入れ方で(html)左側のフォルダリスト
　のphotoにある画像をドラッグして入れる方法が以前から使っているが便利で時間も短縮されていい。

⑤header画像外の上部に表示された『タイトル文字』を、スタイルの変更(css記述の変更)で、header画像上に表示させる。

⑥他のページへのリンクさせる方法。

　※テキストに従い③～⑥迄の作業を行った。スライドショウーについてはhtmlの記述のし方は(Ｈ26.2.22 の資料をみて参考に
　してみましょう。


　今日の(４月１６日)出席者は講師含め１２名　・　講座開始時間は 1：３０pm～４：００pm　迄でした。
（きょうの講師は松本綾子さんでした)

投稿者
みぞいゆき
投稿日
2014/06/15(Sun) 12:41
No.
58

Re: Web研究会　第14回例会


講習会　1　　　　　画像クリックしてください。大きく表示されます

投稿者
みぞいゆき
投稿日
2014/06/15(Sun) 13:38
No.
59

Re: Web研究会　第14回例会



講習会　2

投稿者
みぞいゆき
投稿日
2014/06/15(Sun) 13:40
No.
60

Re: Web研究会　第14回例会



講習会　3

投稿者
みぞいゆき
投稿日
2014/06/15(Sun) 13:43
No.
61
Pages:

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

先頭へ戻る
閲覧回数
12389

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

Web研究会のページ

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

閉じる

修正または削除

処理

記事No

照合キー

閉じる

新記事投稿

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

- Joyful Note -