|
8月と9月にわたって行った「HTML+CSS」講座第一部に続いて、第二部を10月に実施しました。西脇さんに講師をお願いし、「Dreamweaverを使い実践的なサイト作成技量を身につけること」を目標にしました。
西脇さんは、最近、大規模なウェブサイトのリニューアルを行い、このDreamweaverなしには達成できなかったろうという貴重な体験談を熱く語られ、講座中も豊富な経験に基づき、Dreamweaverの魅力を、大変わかり易く説明してくださいました。
講座は、「Dreamweaverレッスンブック」（ソシム社：2007年8月）を使い、進められました。
最初に、教材（レッスンブック添付CD内のChapter06からChapter15）を作業用フォルダにコピーをする準備をし、
先ず、CSSを簡易に設定する方法として、コードビューに入力されている文字列にカーソルを置き、画面下にあるプロパティで「フォーマット」(h1〜h6,p)や「フォントの属性」などの選択を行なうと、自動的に<head>内にCSSが生成され、「style1」というようなクラスが設定されることを確認した。
次に、CSSファイルを作成する方法を習った。ウィンドウビューの右欄にある「CSSスタイル」を開き、その画面の右下部にある「新規CSSルール」というアイコン（この様な重要なアイコンが非常に小さいので操作しにくい、なぜこんなに小さくしてあるのか？）をクリックし、「新規CSSルール」ウィンドウで名前を設定すると、まだCSSファイルができていないので、「スタイルシートファイルの新規保存」ウィンドウで新規CSSファイル名を付けて、CSSファイルを作成する。その後、「CSSのルール定義」ダイアログが出て、CSSの各種セレクターが日本語解説のような名前で設定できる。これがDWの真髄であるのかと感心した。しかし、これらの意味を理解するためには、第一部で習ったCSSコード自体を知っておくことが望ましく、今回の第一部･第二部の講座は見事につながりあっていると言える。
「画像の挿入」も簡単で、右下に現れる「ファイル」パネルの中から所望の画像ファイルを「デザインビュー」の所望の場所にドラック＆ドロップすればよい。画像の各種パラメータは、画像をクリックすると画面下部に表れる「プロパティ」で選定できる。これらは、従来のHTMLで<img>の中で設定されるパラメータである。
リンクの設定も、当該のところの「プロパティ」内にある「リンク」から容易にリンクを張ることができ、大変効率的である。
さらに、「ロールオーバー」の画像設定や「ナビゲーションバー」の画像の設定も、画像をきちんと準備しておけば、スムースに組み立てられることが理解できた。
第２回は、ページの背景色や背景画像の設定を行い、さらに表（テーブル）の作成を行った。
表作成で、<table width="600" border="1" cellspacing="0" cellpadding="0">としても、罫線は2ピクセルになってしまうものである。如何にしたら1ピクセルの罫線の表ができるかのテクニックが説明された。<table width="600" border="0" cellspacing="1" bgcolor="#000000">とすると、「ボーダー」ではなく「セル間隔」で罫線に見立てることによって、好きな太さの罫線が設定できるというものです（これはCSSとは関係なく、HTMLでのテクニックである）。
ページレイアウトも、コラム落ちなく段組が可能なように、「CSSルール定義」ダイアログで行えば、容易にできることが説明された。
最終回は、テキストChapter15「チャレンジ！ やってみよう」に挑戦！ 完成ページは左図のようなものであった。ページのテキストや画像は既に作成されているので、CSSを用いて如何にきれいにレイアウトできるかを練習するものであった。これまで教わったDW機能で、皆さん、静かにも真剣に取り組んだ。
相当早い進度で講義が行われたので必死でついて行くのが精一杯であった。しかし、落ちこぼれることなく全員、ページを完成し終えた。
最後に、DWの便利な機能として、「HPの分析」の仕方や「検索/置換」機能を使うと、リニューアルの際の作業効率を相当に向上させることができるとの説明を受けました。
講師を見事に勤めていただいた西脇さんに大変感謝いたします。
講座後の9時過ぎから懇親会を開き、第一部だけ参加の方も加わり、11時過ぎまでHP談義に燃え、今回の「HTML+CSS」講座の打上げとなりました。
《私感：数年前から「HTML Project2」を使ってHP作成を始めたが、ページ制作に時間がかかり、なかなか改善されずに来た。今回の講座第一部で森さんが同ソフトを取り上げて、大変効率的な使い方を披露してくださり、これで作業改善がなって、DWを使わなくてもと一時考えたが、第二部の西脇さんの説明を受け、やはりDWを使うと格段に効率良い作業ができるのではないかと今は思えるようになった。この講座報告のページの本文の部分はDWを使って作成してみた、まだ継ぎはぎだらけであるが。という訳で、小生にとって大変価値ある講座であった。小生ばかりか、この講座を受けた勢いで、当会のHP作成事業に初めて参加された方も出て、さらに参加された全員が進歩を遂げ今後の活動に生かされることが期待されるなど、本講座開催の成果は十分にあった。》 |
