بستن منو
۵۸
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با HTML
24
نمایش متن، در HTML
5
نمایش عکس، در HTML
5
لینک ها (Link)، در HTML
1
لیست ها (List)، در HTML
1
جدول ها (Table)، در HTML
2
فرم ها (Form)، در HTML
10
مباحث عمومی، در HTML
10
×

دانلود فروشگاه اندروید کلیدستان

499

نویسنده

علیرضا گلمکانی ( admin )

شماره کلید
دسته کلید - دسته بندی

ساخت اسکلت یک سایت کامل

اکنون آماده هستید که اسکلت یک سایت کامل را بسازید . کار من این است که کدهای مربوط به اسکلت یک سایت کامل را به شما بدهم و کار شما تنها یک چیز است و آن ((خرابکاری)) می باشد . نخندید کاملا جدی گفتم ، شما باید این کدها را کپی کرده و نتیجه را مشاهده کنید که یک اسکلت کامل برای سایت است سپس باید بخش های مختلف آن را دستکاری کنید و ببینید چه چیزهایی خراب می شود . تنها با این روش است که می توانید به چگونگی شکل گرفتن این اسکلت پی ببرید . نگران خرابکاری نباشید هر وقت که بخواهید کدهای صحیح در این صفحه در اختیار شما می باشد . البته من نیز توضیحاتی را در مورد کدها ارائه خواهم کرد .

کدها :


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان صفحه</title>
<style type="text/css">
body {
         font-family:Arial, Helvetica, sans-serif;
         text-align:right;
         direction:rtl;
     }
.container {
           width:100%;
           margin:0 auto;
                   }              
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {
                                                   margin:0px;
                                               padding:0px;
                                                                                           }    
#logo1 {        
           background:url(../images/kelid.gif) no-repeat;
           width:100%;
       height:180px;
           background-position:center
       }        
#tagline {
         padding-top:60px;
                 text-align:center;
         }                      
#tagline h3 {
                font-size: 30px;
                    color: #09F;
                    }                    
ul#menu {
        list-style:none;
                padding-top:50px;
        }              
ul#menu li a {
             font-size:20px;
             color:#090;
             text-decoration:none;
             }                                          
ul#menu li {                            
           float:right;
                   padding-left:0px;
           padding-right:30px;
           width:150px;
                   }            
#sidebar1 {
              width: 20%;
          float:left;
                  direction:rtl;
                  padding-top:30px;
                  padding-bottom:30px;
                  padding-right:2%;
                  padding-left:2%;
          }                                                        
ul#sidebar1_menu {
                 list-style:none;
                 }                        
#content {
         width:52%;
         float:left;
                 padding-top:30px;
                 padding-bottom:30px;
                 padding-right:0px;
         }              
#content h2 {
            font-size: 24px;
            color: #00C;
            padding-top: 25px;
            }                          
#content h3 {
            font-size:24px;
            color:#444444;
            padding:20px;
            }
#content h4 {
            font-size: 18px;
            color: #373737;
            font-weight: normal;
            }
#content p {
               text-align:justify;
           font-size: 18px;
           color: #000;
           padding-top: 20px;
           }                              
#content small {
               font-size: 12px;
               color: #373737;
               }                          
#content a {
           color: #F33;
           font-weight: bold;
           text-decoration: none;
           }                                                                                                                                    
#sidebar2 {
              width: 20%;
          float:left;
                  direction:rtl;
                  padding-top:30px;
                  padding-bottom:30px;
                  padding-left:2%;
                  padding-right:2%;
          }              
ul#sidebar2_menu {
                 list-style:none;
                 }                      
ul#sidebar2_menu li a {
                                  text-decoration:none;
                      }                  
#footer {
            width: 100%;
            text-align:center;
                padding-top:60px;
        }                        
</style>
</head>
<body>
     <div id="main">
          <div class="container">
               <div id="header">
                    <div id="logo1">
                         <div id="tagline">
                                                         <h3>شعار تبلیغاتی سایت شما در این محل نمایش داده می شود</h3>
                         </div>              
                    </div>
                   
                    <div style="clear:both"></div>
                   
                    <ul id="menu">
                        <li><a href="#">خانه</a></li>
                        <li><a href="#">مبحث اول</a></li>
                        <li><a href="#">مبحث دوم</a></li>
                        <li><a href="#">مبحث سوم</a></li>
                        <li><a href="#">تماس با ما</a></li>
                    </ul>  
                         
                    <div style="clear:both"></div>
               </div><!--end header -->
               
               <div id="sidebar1">
                    <h3>عنوان ستون سمت چپ</h3>
                    <br />
                    <ul id="sidebar1_menu">
                        <li>عبارت اول از ستون سمت چپ</li>
                        <hr />
                        <li>عبارت دوم از ستون سمت چپ</li>
                        <hr />
                        <li>عبارت سوم از ستون سمت چپ</li>
                        <hr />
                    </ul>
               </div><!--end sidebar1-->              
               
               <div id="content">
                    <h1>عنوان اصلی مبحث</h1>
                    <h2>زیر عنوان :</h2>
                    <p>
                           مباحث به زبان فارسی در این محل نوشته خواهد شد .
                    </p>
               </div><!--end content-->  
               
               <div id="sidebar2">
                    <h3>عنوان ستون سمت راست</h3>
                    <br />
                    <ul id="sidebar2_menu">
                        <li><a href="#">اولین لینک از ستون سمت راست</a></li>
                        <hr />
                        <li><a href="#">دومین لینک از ستون سمت راست</a></li>
                        <hr />
                        <li><a href="#">سومین لینک از ستون سمت راست</a></li>
                        <hr />
                    </ul>
               </div><!--end sidebar2-->
               
               <div style="clear:both"></div>
          </div><!--end main container-->
     </div><!--end main-->
     <div id="footer">
          <div class="container">
                    <div style="clear:both"></div>
                        <p>
                            Copyright © 2012 www.yoursite.com <br />
                            All Rights Reserved
                        </p>          
          </div><!--end footer container-->
     </div><!--end footer-->
</body>
</html>

نتیجه :

Result

توضیحاتی در مورد کدها :

نحوه جداسازی بخش های مختلف سایت با تگ div :

در بخش body از فایل html ، با استفاده از تگ div ، بخش های مختلف سایت را جدا کرده ایم تا بتوانیم به هر یک به طور جداگانه مشخصه هایی را اختصاص بدهیم و همچنین نحوه چیدمان بخش های مختلف سایت در کنار هم را مشخص کنیم . به هر تگ div یک id اختصاص داده ایم زیرا کدهای CSS را در بخش head فایل html نوشته ایم و با استفاده از id است که تعیین می کنیم هر قسمت صفحه ( محتویات هر تگ div ) چه مشخصه هایی باید داشته باشد .

بخش های مختلف سایت عبارتند از header که در بالاترین بخش سایت نمایش داده می شود و درواقع سردر ورودی سایت می باشد ، sidebar1 که ستون سمت چپ سایت است ، sidebar2 که ستون سمت راست سایت است ، content که مطالب مربوط به هر صفحه در آن نوشته می شود و بین دو ستون اصلی سایت قرار می گیرد و footer که در پایین ترین بخش سایت قرار می گیرد و معمولا حاوی علامت تجاری سایت ، حقوق مادی و معنوی سایت و ... می باشد .

چگونگی نوشته شدن کدهای CSS :

کدهای CSS در قسمت head فایل html باید نوشته شوند ( یعنی بین دو تگ <head> و <head/> ) . شروع کدهای CSS را با تگ <"style type="text/css> و پایان کدهای CSS را با تگ <style/> اعلام کرده ایم . سپس ابتدا باید مشخص کنیم که می خواهیم مشخصه ها را به کدام بخش سایت اعمال کنیم . اگر بخواهیم مشخصه ای را به محتویات یک تگ div اعمال کنیم باید ابتدا علامت # را نوشته و بعد از این علامت ، نام id مربوط به آن تگ div را بنویسیم . سپس یک علامت ((})) را نوشته و پس از آن مشخصه های مورد نظرمان را می نویسیم . چنانچه قصد نوشتن چند مشخصه را داشته باشیم باید آنها را با علامت ((;)) از یکدیگر جدا کنیم . پس از نوشتن تمامی مشخصه های مورد نظرمان ، علامت (({)) را به کار می بریم تا اعلام کنیم که مشخصه های آن تگ div پایان یافته است . برای سایر تگ ها نیز باید همین شیوه را اجرا کنیم و کدهای آنها را پشت سرهم بنویسیم .

همان طور که می بینید برای تعیین مشخصه های تگ های div ، ترتیب فراخوانی تگ های div دقیقا مثل ترتیب نوشته شدن کدهای آنها در بخش body فایل html می باشد .

نکته

بهترین انتخاب برای نوشتن کدهای CSS ، نوشتن آنها در فایلی جدا از فایل html می باشد زیرا با این شیوه می توانید کدهای CSS را به هر فایل html که بخواهید اعمال کنید و برای این کار تنها باید در فایل html آدرس فایل حاوی کدهای CSS را مشخص کنید . ما فعلا از این شیوه استفاده نکرده ایم تا گیج نشوید و تمرکز اصلی خود را فعلا بر روی نکات دیگر قرار دهید .

نحوه چیدمان بخش های مختلف سایت در کنار هم :

نحوه چیدمان بخش های مختلف سایت باید به این شکل باشد که ابتدا header نمایش داده شود و سپس دو ستون اصلی سایت و بخش content باید در پایین قسمت header نمایش داده شوند . ما برای کنار هم قرار دادن دو ستون اصلی و بخش content از مشخصه float استفاده کرده ایم که باعث می شود تگ های div شناور شوند و موقعیت خود را بر اساس تگ div کنار خود ، تنظیم کنند . در کدهای CSS مشاهده می کنید که برای هر سه تگ div با id های sidebar1 ، sidebar2 و content ، مشخصه float به کار رفته است به این صورت که چون ابتدا کدهای sidebar1 در بخش body نوشته شده است پس ابتدا مشخصه float آن را به صورت left ( سمت چپ ) تعیین کرده ایم تا در سمت چپ صفحه قرار بگیرد ، سپس بخش content را داریم که مشخصه float آن را نیز برابر left تعیین کرده ایم تا به sidebar1 که در سمت چپ آن است بچسبد . سپس برای sidebar2 نیز مشخصه float را برابر left تعیین کرده ایم تا در کنار بخش content که در سمت چپ آن است بچسبد .

نکته

برای آنکه دو ستون اصلی و بخش content به درستی در کنار هم قرار بگیرند باید مجموع عرض هر سه بخش برابر عرض کل صفحه باشد وگرنه ممکن است sidebar2 در زیر sidebar1 و content قرار بگیرد . برای فهمیدن عرض هر بخش ابتدا باید در کدهای CSS نگاه کنید و ببینید عرض آن بخش چقدر تعریف شده است و علاوه بر این باید ببینید که این بخش ها دارای مشخصه padding-left یا padding-right هستند یا نه . زیرا باید میزان این مشخصه ها را به عرض تعریف شده اضافه کنید . به عنوان مثال در کدهای بالا عرض های تعریف شده به صورت درصد می باشند و زمانی که کل درصدها را برای sidebar1 ، content و sidebar2 جمع بزنید ، برابر 100 درصد خواهد شد .

کپی برداری از محتوای سایت کلیدستان، ممنوع بوده و پیگرد قانونی دارد. (تنها استفاده شخصی کاربر، مجاز است) (کپی برداری توسط سایر وب سایت ها = حرام) (بیشتر بدانید)

خوانده شد
مبحث بالا، مفید بود و سایت کلیدستان را دوست داشتم :
محبوب کردن این مبحث در گوگل :
اون چیزی که میخواستم نبود :
سوال دارم :
ارسال نظر :
نظرات 4 4 0
elahe afravi
۱۳۹۵/۰۵/۱۸
۲۱:۴۵

سلام
چرا وقتی فارسی مینویسم علامت سوال میاد؟؟ Sad

admin
۱۳۹۵/۰۵/۱۹
۱۳:۰۷

سلام.
احتمالا کد زیر را در بین زوج تگ head ننوشته اید (تعیین charset برابر utf-8) :

کد پی‌اچ‌پی:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


Flower

حامد
۱۳۹۵/۰۵/۲۲
۱۸:۱۷

با سلام و خدا قوت
بنده کد های بالا رو در نوت پد کپی میکنم و بعد اجرا ولی مطالب یه خورده بهم ریخته اجرا میشه؟؟ چرا؟؟
مبحث اصلی میره سمت راست و ستون سمت راست میچسبه به ستون سمت چپ.

admin
۱۳۹۵/۰۵/۲۵
۱۶:۴۸

سلام.
تگ div با id برابر content از کدها حذف شده بود (نمونه خروجی درست بود، اما نمی دانم چرا از کدهایی که در مبحث نمایش داده بودیم، بخشی حذف شده بود). تگ مورد نظر :

کد پی‌اچ‌پی:
<div id="content"


اکنون کدهای مبحث تصحیح شده است و می توانید دوباره امتحان کنید.

Flower

*** نظر بدهید

دسترسی سریع

×

شماره کلید


کلید
×

شماره دسته کلید


دسته کلید
×

جستجو


جستجو

راهنمای تگ های HTML

راهنمای تگ های HTML بر اساس حرف اول تگ :

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

بستن منو
۱۹۷
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مجموعه ویدئوهای آموزشی HTML5 - مجموعه HTML5 Tutorial - از thenewboston.com
53
مجموعه ویدئوهای آموزشی XHTML و CSS - مجموعه XHTML and CSS Tutorials - از thenewboston.com
46
مجموعه ویدئوهای آموزشی HTML - مجموعه HTML Tutorials
28
مجموعه ویدئوهای آموزشی HTML و CSS - مجموعه Learn HTML/CSS
19
مجموعه ویدئوهای آموزشی HTML5 و CSS3 برای مبتدیان - مجموعه HTML5 and CSS3 beginners tutorials
51
بستن منو
۴۲
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مباحث اولیه برای آشنایی با CSS
7
نمایش متن در CSS
7
ساخت حاشیه (border) در CSS
4
عکس ها در CSS
2
ساخت انیمیشن در CSS
6
لینک ها (links) در CSS
5
رنگ ها در CSS
1
مباحث عمومی در CSS
10
بستن منو
۱۵
تعداد کلیدهای این موضوع
لیست همه کلیدهای این موضوع
مفاهیم اولیه در طراحی وب سایت
2
توسعه وب سایت (ساخت بخش ها و امکانات جدید برای وب سایت)
3
کار با کنترل پنل سایت
1
معرفی سایت های مفید در زمینه طراحی سایت
1
یافتن کد رنگ ها برای طراحی سایت
2
نرم افزار FileZilla
1
ارسال ایمیل، در طراحی سایت
1
مباحث عمومی در طراحی سایت
4

آخرین کلیدهای غیررایگان

شما هم می توانید کلیدهای غیررایگان منتشر کنید (بیشتر بدانید)