We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 20289
    • 958 Posts
    قالبها مجموعه ای از نوشته ها و تگ هایی هستند که با زبان اچ تی ام ال تهیه میشوند و شکل و ظاهر سایت شما را مشخص میکنند
    در اینجا به شما طریقه ی ساخت قالب (استاندارد وب1 و سی اس اس) مخصوص برای سایت خودتان را آموزش میدهیم
    قالبهای سایت در قسمت "منابع" در بخش مدیریت کل سایت شما ساخته میشود
    از فهرست سمت راست صفحه روی گزینه ی "قالب جدید" کلیک کنید
    در فرم "ساخت / ویرایش قالب" اسمی را برای قالب خود انتخاب کنید و بنویسید.. توضیحات قالب و در صورت تمایل حتی قالب را برای ویرایش قفل کنید
    سپس کدهای اچ تی ام ال قالبی که طراحی کرده اید را در قسمت وارد کردن کدها بیاورید
    شما برای ساخت قالب میتوانید از ویرایشگرهای متنوعی همچون فرانت پیج و یا دریم ویور برای طراحی قالب خود استفاده کنید و تنها کدهای تهیه شده از قالب شما توسط این برنامه ها را در همین بخش کپی و پیست کنید
    بعنوان مثال بیایید با هم یک قالب ساده دوستونی را بسازیم

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>قالب آزمایشی</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <div id="banner">
    <h1>آرم و نشان</h1>
    </div>
    <div id="wrapper">
      <div id="container">
        <div id="content">
          <!-- محتویات اصلی صفحه اینجا قرار میگیرد -->
          Content
        </div> <!-- آخر بخش محتویات اصلی صفحه -->
      </div> <!-- آخر بخش مادر صفحه -->
      <div id="sidebar">
        <!-- فهرست و گزینه های دیگر اینجا خواهد بود -->
        Sidebar
      </div>
    <!-- فهرست و سایر گزینه ها اینجا تمام میشود -->
      <div class="clearing"> </div>
    </div> <!-- پایان برش و فاصله صفحه -->
    <div id="footer">Footer</div></body>
    </html>
    


    همچون هر کد "اچ تی ام ال"دیگری قالبهای مدایکس نیز حاوی کدهایی هستند که ساختار صفحه را مشخص میکنن
    صفحه شما با معرفی نوع صفحه یا داک تایپ شروع میشود
    برخی اطلاعات را در بخش "هد" یا سربرگ مشخص میکند بعنوان مثال آدرس فایل "سی اس اس" را از شما میگیرد و از روی ساختار مشخص شده در "سی اس اس" صفحات شما را ساختار بندی میکند
    ما در اینجا سعی نداریم چگئنگی "اچ تی ام ال " نوشتن را برای شما توضیح دهیم اما بعنوان ارجاع موضوع میتوانید سری به سایتهای مفید آورده شده در زیر بزنید:

    Joe Barta’s beginners tutorials (where I started! Thanks, Joe!) http://www.pagetutor.com/pagetutor/makapage/
    W3Schools tutorials http://www.w3schools.com/default.asp
    A List Apart http://www.alistapart.com/
    W3C tutorials http://www.w3.org/2002/03/tutorials

    حالا بعنوان مثال یک فایل "سی اس اس" را برای تعیین نمایش ساختار صفحه خود در زیر داریم:

    * { padding:0; margin:0; border:0; }
    body { margin:0 20px; }
    #banner { background: #cdcdcd; border-left:1px solid #ababab; border-right:1px solid #ababab; }
    #banner h1 { padding:10px; }
    #wrapper { background: #ffffff; border-left:1px solid #ababab; border-right:1px solid #ababab; }
    #container { width: 100%; background: #ffffff; float: left; margin-right: -200px; }
    #content { background: #ffffff; margin-right: 200px; height:200px; border-right:1px dotted #ababab; }
    #sidebar { width: 200px; float: right; }
    #footer { background: #cdcdcd; border-left:1px solid #ababab; border-right:1px solid #ababab; }
    .clearing { clear:both; height:0; } 
    


    بوسیله ی ساختاری که در این قالب و توسط فایل " سی اس اس" تعیین کرده ایم صفحه ی ما چیزی شبیه عکس زیر خواهد بود:
    بنظر شما این چیزی نیست که ما خواسته باشیم؟ درباره این یکی چه فکری میکنید؟

    یا این یکی؟

    اینها همه آشی است که " سی اس اس " برای ما میپزد
    با کمک تگهای مدایکس برای وارد کردن محتوا و دستوراتی که برای ارتباطات و تعامل بین محتوای صفحات داریم
    در مقاله ی بعدی "مستند سازی" مدایکس سعی داریم نحوه وارد کردن کدهای پیشفرض و مخصوص مدایکسبه قالب سایت را آموزش دهیم

    در صورتیکه علاقمند به دانستن بیشتر در زمینه ی هنر نگارش "سی اس اس " دارید میتوانید از سایتهای مفید در این زمینه که در زیر فهرستی ازآن را آورده ایم استفاده کنید:

    W3Schools Tutorial http://www.w3schools.com/css/default.asp
    Eric Meyer’s css/edge http://www.meyerweb.com/eric/css/edge/
    glish.com CSS Layout Techniques http://www.glish.com/css/
    A List Apart http://www.alistapart.com/
    Left Justified http://leftjustified.net/
    CSS Zen Garden http://www.csszengarden.com/

    این مقاله تنها جنبه ی آموزشی دارد و بمنظور جلوگیری از شلوغی مبحث این عنوان قفل شده است اما چنانچه در این مورد سوال و یا موردی را قابل ذکر میدانید لطفا آنرا در موضوع زیر به بحث بگذارید


      [img]http://i10.tinypic.com/52c4eir.gif[/img][/td]
      [td][Wiki] [Persian support forum]
      [SVN] [RTL SVN Branch] [bugs] [FishEye+Crucible] [Learn MODx!] | [My Google Code]
      [font=tahoma][برای دسترسی به راهنمای فارسی به [url=http://www.modxcms.ir]
      • 3026
      • 189 Posts
      سعی میکنم در اسرع وقت ماژول
      SkinGraft
      رو به فارسی ترجمه کنم
      ماژول خیلی مفیدی برای طراحی قالب برای مد ایکس است
        آموزش ساخت ماژول برای مد ایکس "قسمت اول"1
        http://modxcms.com/forums/index.php/topic,8990.0.html
        آمورش ساخت ماژول قسمت دوم2
        http://modxcms.com/forums/index.php/topic,9265.0.html
        کار با فرم الکترونیک مد ایکس
        http://modxcms.com/forums/index.php/topic,9305.0.html
        فارسی Skin graft ماژول پوسته ساز
        http://modxcms.com/forums/index.php/topic,9379.0.html
        • 20289
        • 958 Posts
        ممنون از خبرت
        یه نگاهی میکنم ببینم چیزی هست
          [img]http://i10.tinypic.com/52c4eir.gif[/img][/td]
          [td][Wiki] [Persian support forum]
          [SVN] [RTL SVN Branch] [bugs] [FishEye+Crucible] [Learn MODx!] | [My Google Code]
          [font=tahoma][برای دسترسی به راهنمای فارسی به [url=http://www.modxcms.ir]
          • 3026
          • 189 Posts
          تموم شد لینکش توی امضای من هست SkinGraft کار ماژول
            آموزش ساخت ماژول برای مد ایکس "قسمت اول"1
            http://modxcms.com/forums/index.php/topic,8990.0.html
            آمورش ساخت ماژول قسمت دوم2
            http://modxcms.com/forums/index.php/topic,9265.0.html
            کار با فرم الکترونیک مد ایکس
            http://modxcms.com/forums/index.php/topic,9305.0.html
            فارسی Skin graft ماژول پوسته ساز
            http://modxcms.com/forums/index.php/topic,9379.0.html
            • 20289
            • 958 Posts
            خوب لینکشو همینجا بگذار مسلم جان
            امضا رو شاید بعدها عوض کردی و حالا ما بگردیم و اسکین گرافت رو پیدا نکنیم
            واقعا دستت درد نکنه از بابت این آموزش wink
              [img]http://i10.tinypic.com/52c4eir.gif[/img][/td]
              [td][Wiki] [Persian support forum]
              [SVN] [RTL SVN Branch] [bugs] [FishEye+Crucible] [Learn MODx!] | [My Google Code]
              [font=tahoma][برای دسترسی به راهنمای فارسی به [url=http://www.modxcms.ir]
              • 3026
              • 189 Posts
              حق با شماست
              اینم لینک
              http://modxcms.com/forums/index.php/topic,9379.0.html
              امیدوارم مفید باشه
                آموزش ساخت ماژول برای مد ایکس "قسمت اول"1
                http://modxcms.com/forums/index.php/topic,8990.0.html
                آمورش ساخت ماژول قسمت دوم2
                http://modxcms.com/forums/index.php/topic,9265.0.html
                کار با فرم الکترونیک مد ایکس
                http://modxcms.com/forums/index.php/topic,9305.0.html
                فارسی Skin graft ماژول پوسته ساز
                http://modxcms.com/forums/index.php/topic,9379.0.html
                • 20289
                • 958 Posts
                [rtl]
                به دانشنامه (وایکی) اضافه شد: http://wiki.modxcms.com/index.php/Fa:Template
                  [img]http://i10.tinypic.com/52c4eir.gif[/img][/td]
                  [td][Wiki] [Persian support forum]
                  [SVN] [RTL SVN Branch] [bugs] [FishEye+Crucible] [Learn MODx!] | [My Google Code]
                  [font=tahoma][برای دسترسی به راهنمای فارسی به [url=http://www.modxcms.ir]