Web Page をつくる

Home > Web Page制作 > HTML文書制作

● トップページHTML文書の制作

DockのDreamweaverアイコンをクリックして表示する。

 現在多くのWebサイトはHTMLとCSS(カスケーディング・スタイル・シート)で構成されています。これはW3Cの勧告にそったものです。最初、表紙(ホームページ)を作ります。このサイトで表現したい事柄を簡潔に表現します。このページの項目にハイパーリンクを設定して全体を閲覧できるようにします。書式はCSSで行うので、HTML文書は文字だけの簡単なものになります。

ファイル > 新規
カテゴリ: 基本ページ
基本ページ: HTML
[ 作成 ]

見出し、段落文章、著作権表示の順に、例えば、次のように文章を入力します。(.....)は説明です、入力しません。

------------------------------------------------------------------

Study in HCC             (見出し1を指定)
「HCC」stands for "Hokkaido Chuo Computer College". 私はこの「HCC」の学生です。このサイトは「HCC」でおこる出来事を綴ったものです。             (段落を指定)
News                  (見出し2を次の5行に指定)
Study
Hobby
Profile
Mail                   (見出し2を指定)
更新情報 (見出し3を指定)
Maya実習を掲載(2006.2.3)     (箇条書きを次の4行に指定)
Illustrator実習を掲載(2006.2.2)
Photoshop実習を掲載(2006.2.2)
サイトを作りました(2006.2.1)

Copyright y.takase since 2006

----------------------------------------------------------------

 見出しなどの設定を行った後でも次のような単純テキスト画面です。

 トップページは伝統として「index.html」というファイル名にします。多くのWebサーバではこの名前を規定のトップページとして登録してあります。この場合はURLにindex.html名称を指定する必要がありません。

ファイル > 新規保存
ファイル名: index.html
[ 保存 ]

 ここで、HTMLのコードを表示して確認しておきましょう。書式設定にはスタイルシートを使うので次のような<link>タグを<title>タグの下に追加します。また、足りないタグ(divとaddress)は追加入力してください。

<head>
(省略)
<title>(省略)</title>
<link href="index_style.css" rel="stylesheet" type="text/css">
<link href="navbar.css" rel="stylesheet" type="text/css">
</head>

 全体のHTMLソースコードは以下のようになります。

[ ソースコードの参照 ]

 

 

Springfield > Web Page制作 > HTML文書制作

Copy right © y.takase since 2003