vantantr
15-06-2008, 22:28
tui muốn làm 1 cái site chỉ dùng code html thôi nhưng chia làm 4 phần
1 cột Left, 1 header, 1 footer và 1 cái body ở giữa.
cái left,header,footer là không đổi nên muốn nó không load lại lần nữa chỉ load phần body thôi.
ví dụ: http://babegamer.com/test
chứ copy từng cái rồi viết nội dung lên từng trang html thì mỗi lần chuyển trang thì phải load lại từ đầu. (trừ mấy cái CSS)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<meta name="robots" content="all,follow" />
<meta name="author" lang="en" content="All: Your website name [www.your-website.com]; e-mail: info@your-website.com" />
<meta name="description" content="..." />
<meta name="keywords" content="..." />
<link rel="stylesheet" media="screen,projection" type="text/css" href="css/main.css" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/main-msie.css" /><![endif]-->
<link rel="stylesheet" media="screen,projection" type="text/css" href="css/scheme.css" />
<link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
<title>Your website name | Homepage</title>
</head>
<body>
<div id="main">
<div id="main-in">
<!-- Header -->
<div id="header" class="box">
<!-- Your logo -->
<h1 id="logo"><a href="#" title="[Go to homepage]">Your <span>website</span> name</a></h1>
<hr class="noscreen" />
<!-- Hidden navigation -->
<p class="noscreen noprint"><em>Quick links: <a href="#content">content</a>, <a href="#navigation">navigation</a>, <a href="#search">search</a>.</em></p>
<hr class="noscreen" />
<!-- Search -->
<div id="search">
<form action="" method="get">
<div>
<span class="noscreen">Fulltext:</span>
<input type="text" size="30" name="query" id="search-input" /><input type="submit" value="Search" id="search-submit" />
</div>
</form>
</div> <!-- /search -->
<hr class="noscreen" />
<!-- Tabs -->
<ul id="tabs" class="box">
<li id="tabs-active"><a href="#">Tab 01 – active</a></li> <!-- Active tab (highlighted) -->
<li><a href="weightloss.html">Tab 02</a></li>
<li><a href="#">Tab 03</a></li>
<li><a href="#">Tab 04</a></li>
<li><a href="#">Tab 05</a></li>
<li><a href="#">Tab 06</a></li>
<li><a href="#">Tab 07</a></li>
<li><a href="#">Tab 08</a></li>
</ul>
</div> <!-- /header -->
<hr class="noscreen" />
<!-- 2 columns (Content + Sidebar) -->
<div id="cols" class="box">
<!-- Content -->
<div id="content">
<!-- Perex -->
<h3 id="perex-title"><strong><a href="">H3 Feature</a></strong></h3>
<div id="perex" class="box">
<p class="nom"><img src="tmp/image.gif" width="200" height="150" alt="" class="f-right" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus convis dapibus magna. Proin eu justo ut massa <a href="#">molestie pellentesque</a>.
In hastel habitasse platea dictumst. Ut arcu. Maecenas sed ante. In hacei haasse platea dictumst. Cum sociis natoque penatibus et magnis dis
enarturient montes, nascetur ridiculus mus. Proin semper nisi puinar nunc commodo imperdiet. Integer pede. Morbi eu nisl. Praesent purus.
Aliquam nequate. Aenean urna. Quisque placerat erat quis neque.</p>
</div> <!-- /perex -->
<hr class="noscreen" />
<h2 class="nomb">h2 Body</h2>
<!-- 2 same width columns (50%/50%) -->
<div class="box">
<!-- Left column -->
<div class="col50">
<h3>H3 Left</h3>
<p class="box clear"><a href="#"><img src="tmp/image-02.gif" width="80" height="60" alt="" class="f-right" /></a>
<a href="#">Lorem ipsum dolor sit amet</a><br />
content day ne test thu </p>
<p class="box clear"><a href="#"><img src="tmp/image-02.gif" width="80" height="60" alt="" class="f-left" /></a>
<a href="#">Lorem ipsum dolor sit amet</a><br />
Lorem ipsum dolor sit amet, conatetuer adipiscing elit. Vivams convis dapbuils.</p>
<p class="box clear"><a href="#"><img src="tmp/image-02.gif" width="80" height="60" alt="" class="f-left" /></a>
<a href="#">Lorem ipsum dolor sit amet</a><br />
Lorem ipsum dolor sit amet, conatetuer adipiscing elit. Vivams convis dapbuils.</p>
<p class="box clear"><a href="#"><img src="tmp/image-02.gif" width="80" height="60" alt="" class="f-left" /></a>
<a href="#">Lorem ipsum dolor sit amet</a><br />
Lorem ipsum dolor sit amet, conatetuer adipiscing elit. Vivams convis dapbuils.</p>
<p class="box clear"><a href="#"><img src="tmp/image-02.gif" width="80" height="60" alt="" class="f-left" /></a>
<a href="#">Lorem ipsum dolor sit amet</a><br />
Lorem ipsum dolor sit amet, conatetuer adipiscing elit. Vivams convis dapbuils.</p>
<p class="box clear"><a href="#"><img src="tmp/image-02.gif" width="80" height="60" alt="" class="f-left" /></a>
<a href="#">Lorem ipsum dolor sit amet</a><br />
Lorem ipsum dolor sit amet, conatetuer adipiscing elit. Vivams convis dapbuils.</p>
</div> <!-- /col50 -->
<hr class="noscreen" />
<!-- Right column -->
<div class="col50 f-right">
<h3>H3 Right</h3>
<ul class="ul-style01">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<table class="table-style01">
<tr>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr class="bg">
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr class="bg">
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr class="bg">
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
</table>
</div> <!-- /col50 -->
</div> <!-- /box -->
</div> <!-- /content -->
<hr class="noscreen" />
<!-- Sidebar -->
<div id="aside">
<!-- Navigation -->
<h3 class="title" id="navigation">Menu Bar</h3>
<ul class="nav">
<li id="nav-active"><a href="#">Homepage</a></li> <!-- Active page (highlighted) -->
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- Archive -->
<h3 class="title">Archive</h3>
<ul class="nav">
<li id="nav-active"><a href="#">January</a></li>
<li><a href="#">Feburary</a></li>
<li><a href="#">March</a></li>
<li><a href="#">April</a></li>
<li><a href="#">May</a></li>
<li><a href="#">June</a></li>
<li><a href="#">July</a></li>
<li><a href="#">August</a></li>
<li><a href="#">September</a></li>
<li><a href="#">October</a></li>
<li><a href="#">November</a></li>
<li><a href="#">December</a></li>
</ul>
</div> <!-- /aside -->
</div> <!-- /cols -->
<hr class="noscreen" />
<!-- Footer -->
<div id="footer">
<p class="f-right"><a href="http://www.nuviotemplates.com/">Free web templates</a> by <a href="http://www.nuvio.cz/">Nuvio</a>, visit <a href="http://www.dresden.info/">Dresden</a></p>
<p>© 2008 <a href="#">Your website name</a></p>
</div> <!-- /footer -->
</div> <!-- /main-in -->
</div> <!-- /main -->
</body>
</html>
cái này là free template lầy từ http://www.nuviotemplates.com
ai help cái.
Chả lẽ phải dùng cái php để load như trang này dạy http://www.codeproject.com/KB/HTML/templating.aspx
1 cột Left, 1 header, 1 footer và 1 cái body ở giữa.
cái left,header,footer là không đổi nên muốn nó không load lại lần nữa chỉ load phần body thôi.
ví dụ: http://babegamer.com/test
chứ copy từng cái rồi viết nội dung lên từng trang html thì mỗi lần chuyển trang thì phải load lại từ đầu. (trừ mấy cái CSS)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="en" />
<meta name="robots" content="all,follow" />
<meta name="author" lang="en" content="All: Your website name [www.your-website.com]; e-mail: info@your-website.com" />
<meta name="description" content="..." />
<meta name="keywords" content="..." />
<link rel="stylesheet" media="screen,projection" type="text/css" href="css/main.css" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/main-msie.css" /><![endif]-->
<link rel="stylesheet" media="screen,projection" type="text/css" href="css/scheme.css" />
<link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
<title>Your website name | Homepage</title>
</head>
<body>
<div id="main">
<div id="main-in">
<!-- Header -->
<div id="header" class="box">
<!-- Your logo -->
<h1 id="logo"><a href="#" title="[Go to homepage]">Your <span>website</span> name</a></h1>
<hr class="noscreen" />
<!-- Hidden navigation -->
<p class="noscreen noprint"><em>Quick links: <a href="#content">content</a>, <a href="#navigation">navigation</a>, <a href="#search">search</a>.</em></p>
<hr class="noscreen" />
<!-- Search -->
<div id="search">
<form action="" method="get">
<div>
<span class="noscreen">Fulltext:</span>
<input type="text" size="30" name="query" id="search-input" /><input type="submit" value="Search" id="search-submit" />
</div>
</form>
</div> <!-- /search -->
<hr class="noscreen" />
<!-- Tabs -->
<ul id="tabs" class="box">
<li id="tabs-active"><a href="#">Tab 01 – active</a></li> <!-- Active tab (highlighted) -->
<li><a href="weightloss.html">Tab 02</a></li>
<li><a href="#">Tab 03</a></li>
<li><a href="#">Tab 04</a></li>
<li><a href="#">Tab 05</a></li>
<li><a href="#">Tab 06</a></li>
<li><a href="#">Tab 07</a></li>
<li><a href="#">Tab 08</a></li>
</ul>
</div> <!-- /header -->
<hr class="noscreen" />
<!-- 2 columns (Content + Sidebar) -->
<div id="cols" class="box">
<!-- Content -->
<div id="content">
<!-- Perex -->
<h3 id="perex-title"><strong><a href="">H3 Feature</a></strong></h3>
<div id="perex" class="box">
<p class="nom"><img src="tmp/image.gif" width="200" height="150" alt="" class="f-right" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus convis dapibus magna. Proin eu justo ut massa <a href="#">molestie pellentesque</a>.
In hastel habitasse platea dictumst. Ut arcu. Maecenas sed ante. In hacei haasse platea dictumst. Cum sociis natoque penatibus et magnis dis
enarturient montes, nascetur ridiculus mus. Proin semper nisi puinar nunc commodo imperdiet. Integer pede. Morbi eu nisl. Praesent purus.
Aliquam nequate. Aenean urna. Quisque placerat erat quis neque.</p>
</div> <!-- /perex -->
<hr class="noscreen" />
<h2 class="nomb">h2 Body</h2>
<!-- 2 same width columns (50%/50%) -->
<div class="box">
<!-- Left column -->
<div class="col50">
<h3>H3 Left</h3>
<p class="box clear"><a href="#"><img src="tmp/image-02.gif" width="80" height="60" alt="" class="f-right" /></a>
<a href="#">Lorem ipsum dolor sit amet</a><br />
content day ne test thu </p>
<p class="box clear"><a href="#"><img src="tmp/image-02.gif" width="80" height="60" alt="" class="f-left" /></a>
<a href="#">Lorem ipsum dolor sit amet</a><br />
Lorem ipsum dolor sit amet, conatetuer adipiscing elit. Vivams convis dapbuils.</p>
<p class="box clear"><a href="#"><img src="tmp/image-02.gif" width="80" height="60" alt="" class="f-left" /></a>
<a href="#">Lorem ipsum dolor sit amet</a><br />
Lorem ipsum dolor sit amet, conatetuer adipiscing elit. Vivams convis dapbuils.</p>
<p class="box clear"><a href="#"><img src="tmp/image-02.gif" width="80" height="60" alt="" class="f-left" /></a>
<a href="#">Lorem ipsum dolor sit amet</a><br />
Lorem ipsum dolor sit amet, conatetuer adipiscing elit. Vivams convis dapbuils.</p>
<p class="box clear"><a href="#"><img src="tmp/image-02.gif" width="80" height="60" alt="" class="f-left" /></a>
<a href="#">Lorem ipsum dolor sit amet</a><br />
Lorem ipsum dolor sit amet, conatetuer adipiscing elit. Vivams convis dapbuils.</p>
<p class="box clear"><a href="#"><img src="tmp/image-02.gif" width="80" height="60" alt="" class="f-left" /></a>
<a href="#">Lorem ipsum dolor sit amet</a><br />
Lorem ipsum dolor sit amet, conatetuer adipiscing elit. Vivams convis dapbuils.</p>
</div> <!-- /col50 -->
<hr class="noscreen" />
<!-- Right column -->
<div class="col50 f-right">
<h3>H3 Right</h3>
<ul class="ul-style01">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
<table class="table-style01">
<tr>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr class="bg">
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr class="bg">
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr class="bg">
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
</table>
</div> <!-- /col50 -->
</div> <!-- /box -->
</div> <!-- /content -->
<hr class="noscreen" />
<!-- Sidebar -->
<div id="aside">
<!-- Navigation -->
<h3 class="title" id="navigation">Menu Bar</h3>
<ul class="nav">
<li id="nav-active"><a href="#">Homepage</a></li> <!-- Active page (highlighted) -->
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- Archive -->
<h3 class="title">Archive</h3>
<ul class="nav">
<li id="nav-active"><a href="#">January</a></li>
<li><a href="#">Feburary</a></li>
<li><a href="#">March</a></li>
<li><a href="#">April</a></li>
<li><a href="#">May</a></li>
<li><a href="#">June</a></li>
<li><a href="#">July</a></li>
<li><a href="#">August</a></li>
<li><a href="#">September</a></li>
<li><a href="#">October</a></li>
<li><a href="#">November</a></li>
<li><a href="#">December</a></li>
</ul>
</div> <!-- /aside -->
</div> <!-- /cols -->
<hr class="noscreen" />
<!-- Footer -->
<div id="footer">
<p class="f-right"><a href="http://www.nuviotemplates.com/">Free web templates</a> by <a href="http://www.nuvio.cz/">Nuvio</a>, visit <a href="http://www.dresden.info/">Dresden</a></p>
<p>© 2008 <a href="#">Your website name</a></p>
</div> <!-- /footer -->
</div> <!-- /main-in -->
</div> <!-- /main -->
</body>
</html>
cái này là free template lầy từ http://www.nuviotemplates.com
ai help cái.
Chả lẽ phải dùng cái php để load như trang này dạy http://www.codeproject.com/KB/HTML/templating.aspx