آموزش طراحی سایت (HTML CSS Javascript) | آتریا

پروژه هتل - اضافه کردن منو

آموزش پروژه محور PHP - بخش چهارم: اضافه کردن منو در بالای تمام صفحات

چه کار خواهیم کرد

Wiki

در این قسمت از پروژه هتل، کارهای زیر را انجام خواهیم داد:

ایجاد فایل menu.php
اضافه کردن فایل منو به صفحات "index.php" و "about.php"

اضافه کردن منو

Wiki

در فولدر C:\xampp\htdocs\beyamooz-hotel یک فایل جدید با نام menu.php ایجاد نمایید.

محتوای زیر را در فایل menu.php قرار دهید: (شاید این سوال براتون مطرح بشه که چرا یه فایل جداگانه برای این قسمت در نظر گرفته شده و شاید بگید می شد براحتی کد HTML زیر رو در بالای تمام صفحات قرار داد ...! اولاً با این کار اگر خواستیم یه زمانی یه آیتم به منو اضافه کنیم، فقط کافی است که فایل menu.php را ویرایش کنیم و دوم اینکه شاید در آینده بخواهیم یک جدول جداگانه برای منوهامون داشته باشیم، از این طریق حالا می تونیم براحتی داده ها را از پایگاه داده بخونیم و به عنوان منو نمایش بدیم)

menu.php

Wiki

<ul class='menu'>
    <li><a href='index.php'>صفحه اصلی</a></li>
    <li><a href='#'>رزرواسیون</a></li>
    <li><a href='#' >خدمات</a></li>
    <li><a href='#' >گالری تصاویر</a></li>
    <li><a href="#">تماس با ما</a></li>
    <li><a href='about.php'>درباره ما</a></li>
</ul>

ویرایش فایل CSS خارجی (style_persian.css)

Wiki

حالا می خواهیم با استفاده از کلاس "menu" آیتم های منو را استایل دهی کنیم، بنابراین فایل style_persian.css را باز کنید و کد زیر را به آن اضافه نمایید:

style_persian.css

Wiki

ul#menu {
    padding: 0;
    margin-bottom: 11px;
}

ul#menu li {
    display: inline;
    margin-right: 3px;
}

ul#menu li a {
    background-color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    color: #696969;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    color: white;
    background-color: black;
}

Edit the Home Page

Wiki

In the DemoWeb folder, edit your home page Index.html.

Index.html

Wiki

<!DOCTYPE html>

<html>
<head>
<title>PHP Demo</title>
<link href="/Site.css" rel="stylesheet">
</head>
<body>

<nav id="nav01"></nav>

<div id="main">
<h1>Welcome to Our Company</h1>
<h2>Web Site Main Ingredients:</h2>

<p>Pages (HTML)</p>
<p>Style Sheets (CSS)</p>
<p>Computer Code (JavaScript)</p>
<p>Live Data (Files and Databases)</p>

<footer id="foot01"></footer>
</div>

<script src="/Script.js"></script>

</body>
</html>

خودتان امتحان کنید »

The page above, is a copy of the page from the previous chapters, with an added navigation element.