サイト内検索: ナビゲーション リンクのスキップ

  昨日:10  本日:1  合計:78853


Visual Web Developerの操作(静的ページ2)

 ここでは、前章で作成したページを修正をしていきます。
 また、<table>(テーブル)の挿入方法も紹介します。

■ デザインビューとソースビュー

1.印のタブをクリックすることで、上段にソース、下段にデザインというふうに分割して表示できる。
 

2.下段デザインビューの 初めての・・・の前にカーソルをセットして、「私の」と入力したところです。
連動して上段ソースも書き換わることがわかります。
 

■ 改行、文字色変更

1.上段ソースの 私の の後ろにカーソルをセットして、<br>と入力します。すると、<br />に変更されました。
※これは、ソース冒頭の<!DOCTYPE…(前章で少し触れた文書型宣言)によるもので、XHTML 1.0定義の文法に自動的に書き換わります。

下記は、ホームページ の前にカーソルをセットして<font color=r まで入力したところですが、候補を予測して表示してくれます。また、<font color=red>まで入力すると、対になる</font>も自動的に書き足されます。(そのかわり、ホームページ以降が消されてしまいますが・・・)
 

2.下記は、一番下の「エラー一覧」というタブをクリックしてエラーをチェックしています。
※これも、XHTML 1.0定義の文法に準じたチェックとなります。
 

「ん、ん、こりゃぁ、余計めんどくさいぞ!」と思った人も多いかと思いますが、次のテーブルの挿入で考え方が少し変わるはずです。ちょっと我慢して慣れると、とても便利になります。

※XHTML 1.0定義(HTML4.01の改訂版)についても、あまり深く考えないで、実行できれば良し、くらいの軽い気持ちで・・・
もう少し詳しく知りたいという人は、Webデザインレッスンを参照してください。

といいつつも、本文部分<body>~</body>に文字を書く場合、段落で区切らないといけません。
そこで、<div>~本文~</div>と書き換えておきましょう。
その他、<p>~</p>、<span>~</span>でもかまいません。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>ホームページの練習</title>
</head>
<body>
  <div>
  私の<br />
初めての
<font color=red>ホームページ</font>です。<br />
  </
div>
</body>
</
html>

■ テーブルの挿入

1.下段デザインビューの任意の場所にカーソルをセットした後、上部メニューの[テーブル]→[テーブルの挿入]の順でクリックすると、下記のようなウインドウが表示されます。
とりあえず、行、列、ともに 10 と入力して[OK]ボタンをクリックします。
 

2.すると、下段デザインビューには10×10のテーブルが挿入され、上段ソースも自動的に書き足されます。ちなみに、ツールボックスのテーブルを下段デザインビューにドラッグ&ドロップすると、3×3のテーブルが挿入されます。
 


Copyright (C) 2009-2009 ケンゾー
初版:2009年4月17日、最終更新:2009年4月21日
http://www.xox.bz/