戻る


グローバルナビメニュー:  | top | glbmenu1 | glbmenu2 | glbmenu3 | glbmenu4 | glbmenu5 |
 【以下は、ホームページの「枠組みテンプレート」のソースコードです。
以下のhtmlプログラムの全体を「copy」して、エディタの新規ページに貼り付けます。そのファイル名を、例えば「hptenplate.html」などの様に名付けて保存します。
その後、その保存された「htmlファイル」名をクリックすると、このページと同じ型枠がwebページに表示されます。】

<html> <head> <title>ホームページのタイトル</title> <link rel="stylesheet" type="text/css" href="拡張子(.css)のURL"> <style type="text/css"> <!-- #header {text-align:center;width:780px;border:1px solid gray;margin:0 auto ;} #globaltopmenu {background-color:lightyellow;border:2px solid green;width:778px;height:30px;margin:5px auto} #inner {border:1px solid purple;margin:0 auto;} #wrap { border:1px solid gray; width:780px;margin:0 auto } #mainWrap { float:right; width:615px;border-left:1px solid green;margin:0 auto} #leftsideWrap {float:left;width:160px; text-align:left; margin:0 auto} #footer {width:780px;height:60px;text-align:center;background-color:lightblue;border-top:2px solid green;margin:0 auto} .clear { clear:both;} --> </style> </head> <body> <div id="header"> <br /><br /> <span style="text-align:center">ホームページタイトル名</span> <br /><br /> シンボル画像など。 <br /><br /> </div><!-- /header END --> <div id="globaltopmenu"> グローバルナビメニュー:  | <a href="#">top</a> | <a href="#">glbmenu1</a> | <a href="#">glbmenu2</a> | <a href="#">glbmenu3</a> | <a href="#">glbmenu4</a> | <a href="#">glbmenu5</a> | </div> <div id="Wrap"> <div id="mainWrap"> <br /> <span style="text-align:center">(コンテンツ部分)</span> <br /> <br /> <br /><br /><br /><br /><br /><br /<br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /> <br /> </div><!-- /mainWrap END --> <div id="leftsideWrap"> (左サイドメニュー部分) <br /> <ul> <li><a href="#">top</a></li><br /> <li><a href="#">sidemenu1</a></li><br /> <li><a href="#">sidemenu2</a></li><br /> <li><a href="#">sidemenu3</a></li><br /> <li><a href="#">sidemenu4</a></li><br /> <li><a href="#">sidemenu5</a></li><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div><!-- /lefttsideWrap END --> <div class="clear"> <div id="footer"> <br /> コピーライトなど を記入 </div><!-- /footer END --> </div><!-- /Wrap END --></body> </html>
(左サイドメニュー部分)

戻る