اموزش طراحی پوسته های وردپرس در دریمویور

شروع موضوع توسط websaz2012 ‏4 می 2012 در انجمن نرم‌افزارهای توسعه‌وب‌سایت (Sublime, VSCode و ...)

  1. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    اموزش طراحی پوسته های وردپرس در دریمویور + اموزش تصویری دریمویور بصورت عملی و تخصصی

    [​IMG]

    [​IMG]
    اموزش طراحی پوسته های وردپرس در دریمویور


    با سلام خدمت دوستان من میخوام طراحی پوسته های وردپرس را تو دریمویور بهتون اموزش بدم
    و از انجایی که مطالب مفصل است هفته ای 1 درس بهتون میدم و قول میدم دروس بصورت تصویری باشه
    در ضمن باید به عرضتون برسونم که سایتی که میخواهیم بسازیم اول بصورت html طراحی خواهد شد و سپس
    اونو مبدل به پوسته ورد پرس خواهیم کرد. پس همhtml خواهید اموخت و هم css و هم وردپرس. وقول میدم از جیکوثری هم تو سایت استفاده شود
    پس بزودی........


    البته اگه مایل باشید

    :green:



    اموزش طراحی پوسته وردپرس در برنامه دریمویور

    پیشگفتار :
    مراحل اولیه کار :
    1.قبل از هرکاری شما به یک نرم افزارکه بتونه نقش سرور را در رایانه شما ایفا کند نیاز دارید مانند نرم افزارهای
    easyPhp یا wampserver
    2.مرحله دوم نصب این نرم افزار است که کار دشواری نیست و بصورت معمولی نصب خواهد شد.
    3.این مرحله احتیاج به یک کم دقت دارد شما باید در ریشه نصب نرم افزار یک پوشه برای سایت خود ایجاد کنید
    مثلا من نرم افزار wampserver را نصب کرده ام پس باید به این ادرس بروم
    C:\wamp\www
    دوستان توجه کنند که کار هردو نرم افزار شبیه به یکدیگر هستند و هیچ فرقی با هم ندارن و فقط
    کار با ومپ سرور راحتتره و پیشنهاد میکنم که از این نرم افزار استفاده کنید. بگذریم خلاصه شما باید درون پوشه www
    یک پوشه ایجاد کنید و نام ان را wp-tm
    بگذارید فرقی نمیکند شما اسم ان را چی بذارید فقط سعی کنید با من یکنواخت باشید تا دچار مشکل نشوید
    [​IMG]
    نتیچه مهم : پس در هر دو نرم افزار باید در پوشه www واقع در ریشه نصب
    ما باید پوشه سایتمون را ایجاد کنیم.
    4. درون پوشه wp-tm که برای سایتتون ساختید سه پوشه دیگر با نامهای css,img,js
    ایجاد کنید.یکی برای استایل سایت شما ویکی برای تصاویر به کار رفته در سایت شما واخرین هم واسه فایلهای جیکوثری است.
    تا اینجا ما فقط وسایل ضروری را فراهم کردیم و هنوز شروع نکرده ایم

    در ضمن از استقبالی که به عمل اومد من شخصا قول میدهم که فایل pdf اموزش را در اخر بصورت کامل برای دانلود خواهم گذاشت.
    دوستان خواهشا مواد اولیه کارمون را هرچه سریعتر فراهم کنید تا از قافله دور نمانید. تا بعد.....




    [FONT=&amp]فصل اول

    [/FONT]
    [FONT=&amp]درس 1 ایجاد سایت در دریمویور

    [/FONT]
    [FONT=&amp]بالاخره ما کارمون را با نام و یاد خدا شروع میکنیم.
    قبل از شروع کار شما باید یک سایت جدید تو دریمویور تعریف کنید برای این کار مراحل زیر را دنبال کنید و به توضیحات هر بخش توجه [/FONT]
    [FONT=&amp]فرمایید.[/FONT]

    [FONT=&amp]مرحله 1[/FONT]
    .[FONT=&amp]همانطور که در تصویر میبینید بر روی تصویر مورد نظر کلیک کنید[/FONT]

    [​IMG]


    [FONT=&amp]مرحله 2[/FONT]
    [FONT=&amp]تنظیمات را همانند شکل زیر انجام دهید[/FONT]

    [​IMG]

    [FONT=&amp]مرحله 3[/FONT]
    [FONT=&amp]دقت فرمایید این مرحله خیلی حساس است[/FONT]
    [FONT=&amp]بر روی گزینه [/FONT]
    server
    [FONT=&amp]کلیک کرده و سپس روی علامت + کلیک کنید[/FONT]
    [FONT=&amp]و تنظیمات را مقابل شکل زیر انجام دهید[/FONT]

    [​IMG]

    [FONT=&amp]سپس روی گزینه[/FONT]
    Save
    [FONT=&amp]کلیک کنید و تیک عبارت [/FONT]
    Testing
    [FONT=&amp]را هم بزارید.

    [/FONT]
    [FONT=&amp]مرحله4[/FONT]
    [FONT=&amp]حالا نوبت ان رسیده که برای سایتمون یک پوشه تصاویر مشخص کنیم پس با توجه به شکل زیر انجام دهید[/FONT]

    [​IMG]

    [FONT=&amp]بر روی [/FONT]
    save
    [FONT=&amp]کلیک کنید.کار تمام شد وشما موفق شدید یک سایت تو دریمویور تعریف کنید.[/FONT]
    [FONT=&amp]توجه: این تنظیمات لزومیترین تنظیمات برای سایت شما بود که من از بقیه تنظیمات چشم پوشی کردم.[/FONT]
    [FONT=&amp]پایان درس

    نظر یادتون نره نظرات شما باعث دلگرمی ماست دوستان اگر سوالی دارند میتوانند مطرح کنند


    با سلام به دوستان از اینکه خیلی طول کشید شرمنده ام اخه یه مشکلی برام پیش اومده بود که رفع شد
    از امروز به بعد میریم به ادامه درسمون در ضمن یه سوپرایز براتون دارم.
    پس تا چند روز دیگه.....


    دانلود فیلم اموزشی به حجم 400KB

    less0n_1.rar - 463.1 Kb


    درس 2 ایجاید فایلها

    همونطور که قولشو داده بودم یه سوپرایز واستون دارم اون هم پوسته ای است که میخواهیم طراحی کنیم
    میتونین تصویرشو در زیر مشاهده کنید


    [​IMG]

    [/FONT]



    خوب برنامه دریمویور را باز کنیید و
    file->new>php>create
    کلیک کنید و یک فایل جدید باز کنیدو فایل را با نام
    index.php
    درون پوشه
    wp-tm
    ذخیره کنید.
    خوب شما الان تونستیید صفحه اول سایتتونو تعریف کنید خوب الان احتیاج به یک فایل استایل دارین پس
    file->new>css>create
    را انتخاب کنید و یک فایل
    css
    جدید را باز کنیدو ان را با نام
    style.css
    تو پوشه
    wp-tm
    ذخیره کنیید
    خوب الان باید شما این استایل را به صفحه اولتون فراخوانی کنید
    شما یک فایل استایل را به 2 صورت میتونیدبه یک صفحه فراخوانی کنید(منظور از فراخوانی در زبان وب اینه که اون فایل را به صفحه اعمال کنیم یا به صورت دیگر بخوام بگم ایینه که اون فایل را وارد صفحه کنیم)
    1.بصورت لینک
    <link href="style.css" rel="stylesheet" type="text/css" />
    2.بصورت ایمپورت
    <style type="text/css">
    @import url("style.css");
    </style>

    که فرق اینها در اینه که خاصیت ایمپورت بر خاصیت لینک ارجهیت دارد

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

    [​IMG]

    توضیح:تو دریموییور پانل
    css style
    را باز کنیدو بر روی ایکونی که شبیه یک زنجیر است کلیک کنید مطاب شکل 1
    سپس یک کادر باز شده که شما باید در ان دکمه
    Browse
    را کلیک کنید و سپس فایل
    style.css
    را که درون پوشه
    wp-tm
    است را انتخاب کنید مطابق شکل 2
    و در اخر هم
    ok
    کنیدو کار تمام است شما تو دریمیور اینجوری باید فایلهای استایل را به صفحه فراخوانی کنید.

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


    کد (Text):

    [LEFT]/*
    Theme Name: novindl
    Theme URI: [URL]http://www.novindl.com/[/URL]
    Version: 1.0
    Author: mohsen_golmohammadi
    Author URI: [URL]http://www.adoberan.com/[/URL]
    */

    *{margin:0;padding:0}
    body{
        font:11px tahoma,sans-serif;
        color:#494848;
        background-color:#f2efe9;
        line-height:1.7;
        margin:0;
        padding:0 0;
        text-align:right;
        direction: rtl;
    }
    /* list */
    ol,ul,li{
        list-style:none;
        direction: rtl;
    }
    /* link */
    a,a:link{
        text-decoration:none;
        color:#4e4a3d
    }
    a:hover{
        color:#07cfed
    }
    /* images */
    img{
        border-style:none;
    }
    /* text */
    h1{padding:0px;margin:0px;font:bold 1.4em/1.6 Arial,sans-serif}
    h2{padding:0px;margin:0px;font:bold 1.4em/1.6 Arial,sans-serif}
    h3{padding:0px;margin:0px;font:bold 1.3em/1.6 Arial,sans-serif}
    h4{padding:0px;margin:0px;font:bold 1.2em/1.6 Arial,sans-serif}
    /* class */
    .left{
        float:left;
        margin: 0px 10px 0px 0px;
    }
    .right{
        float:right;
        margin: 0px 0px 0px 10px;
    }
    .clear{clear:both;height:0;line-height:0;font-size:0}
    .clearfix:after{content:".";display:block;clear:both;visibility:hidden;height:0}
    *:first-child+html .clearfix{min-height:1px}[/LEFT]
     
    ازکدهای بالا نترسیید چون فرض کنید این کدها پیش فرض هستند و شما میتوانید برای هر پوسته یا سایتی از ان استفاده کنید
    البته حتی شما میتوانید انها را تغییر دهید.
    خوب حلا همه فایلهاتون را ذخیره کنید و درون صفحه
    index.php
    عبارت
    test
    را وارد کنیدو ذخیره کرده سپس کلید
    f12
    را برای نمایش پوسته درون مرورگر فشار دهید اگر عبارت فوق را مشاهده کردید هیچ مشکلی نیست در غیر این صورت
    1.مطمئن باشید که نرم افزار
    wampserver
    ذز حال اجزاست
    2.مطمئن باشید تمام سرویسهای نرم افزار فوق فعال هستند
    3.ممکن است در تعرییف سایت تو دریمویور اشتباه کرده باشید پس تمام اینها رو چک کنید.

    خوب دیگه داره وقت اون میرسه که باید کم کم کار عملی را شروع کنیم
    اما قبل از این یک توضیع بسیار مهم درمورد
    div id و div class
    باید بدهم تا شما با یک قانون کلی اشنا شوید
    div چیست؟
    خیلی ساده بخوام بگم یعنی مرز بین عناصر وب را دیو میگویند.(البته معنی کتابی و علمیشو نمیدونم اما من اینجوری
    معنی کردم که درک ان برای شما راحت بشود)
    این بدان معنی است که بوسیله دیوها ما صفحات سایتمون را به بخشهای مجزا تقسیم میکنیم.
    ما برای دیوها میتوانیم استاییل تعریف کنیم یعنی میتونیم مثلا طول و عرض ورنگ زمینه وفونت یا هر چیز دیگر برای ان تعریف
    کنیم.و مطالب و تصاویر یا هر چیز دیگر را درون ان بگنجانیم.
    دیوها را میتوان به دو گونه تقسیم کرد
    1.div id
    2.div class
    این دوتا چی هستند؟اصلا اون پسوند که بعد از اون اومده چیه و به چه دردی میخوره؟
    فرض کنید شما صفحات سایتتون را با یک دیو بدون این پسوندها تقسیم کنید
    منظور من یک دیو تنها نیست هر تعداد دیوی است که شما استفاده کرده اید بزارین با مثال بگم ما تو صفحمون داریم:
    کد (Text):
    <div>hello</div>
    <div>this is my site</div>
    <div>how are you?</div>
    ما بوسیله دیو مطالب خود را مجزا کرده ایم
    اما حالا چگونه به انها استایل دهیم؟شاید به ذهن شما برسد که میتوان استایل را به صورت
    inline
    وارد کرد که این راه خوبی است اما....ایا شا میخواهید تمام این استایلها رو تو صفحتون بنویسید؟
    پس
    تکلیف فایل
    style.css
    چی میشه؟
    پس اینجاست که اون دوتا پسوند به داد ما میرسند تا بتوانیم استایل دیوها رو تو فایل
    style.css
    بنویسیم.با مثال بگم مثلا همون کد قبلی
    کد (Text):
    <div id="hi">hello</div>
    <div class="info">this is my site</div>
    <div id="how">how are you?</div>
    که در این صورت ما تو استایل میتوانیم بنویسیم

    کد (Text):
    #hi {
    }
    .info {
    }
    #how {
    }
    امیدوارم که مطلبو گرفته باشید
    حال پس فرق بین
    div class و div id
    در چیه و ما چه وقت باید از کدام یک استفاده کنیم؟
    یک قانون کلی داریم که میگه
    div id
    یکتاست یعنی که شما میتوانید فقط یک بار از یک
    id
    در یک صفحه استفاده کنید با مثال میگم شما تو صفحتون اینو دارید
    کد (Text):

    <div id="hi">hello</div>
    پس شما دیگه از این
    id
    نمیتوانید استفاده کنید یعنی دیگر نمیتوانید از
    id
    به نام
    hi
    استفاده کنید بلکه باید با یک نام مجزای دیگری استفاده کرد مثلا

    کد (Text):
    <div id="good">hello</div>
    اما
    div class
    از این قانون مبراست و شما میتوانید بارها و بارها ار یک کلاس استفاده کنید
    خوب درس امروز هم تموم شد و از جلسه بعد کار عملی در پیش داریم.

    [FONT=&amp]دانلود فیلم اموزشی به حجم 500KB[/FONT]

    less0n_2.rar - 513.6 Kb


    pass:00123000000


    درس 3 وارد کردن یک div به صفحه

    سلام امروز میخواهیم دیگه کار عملی را شروع کنیم اما قبل از اون اگر مطالب قبل را مطالعه نکرده اید لطفا اول انها را مطالعه کنید
    اول کار میخواهم چگونگی تعریف div id و div class و وارد کردن انها در صفحه شما با دریمویور را توضیح دهم پس من این اموزش را بصورت کامل بیان میکنم تا در اینده اگه گفتم فلان کلاس یا ایدی را وارد صفحه کنید شما چگونگی این کار را فرا گرفته باشید
    چگونه یک div class و div id را تعریف و داخل صفحه کنیم
    برای این که شما یک div class یا div id را وارد صفحه کنید از منو بالا insert > layout Objects > Div tag را انتخاب کنید
    یک کادر برای شما باز خواهد شد مثل تصویر زیر که به معرفی بخش های ان میپردازیم

    [​IMG]


    اگر میخواهید که یک کلاس تعریف کنید تو کادر: class نام یک کلاس را وارد کنید اسمها مهم نیستند مهم اینه که شما اون اسمها رو به خاطر بسپاریید
    اگر میخواهید یک div id وارد صفحه کنید در کادر id: یک اسم را وارد کنید
    شما الان فقط یک کلاس یا ادی را انتخاب کردید اما هنوز وارد صفحه نکردین
    برای این کار دو دکمه برای شما تعبیه شده است که ما به ویزگی هر کدام می پردازیم
    دکمه ok
    با زدن این دکمه اسمی که برای یک id یا class انتخاب کردید مستقیم وارد صفحه میشود البته کاربرد این دکمه زمانی است که شما قبلا یک id یا class را درون فایل style.css تعریف کرده باشید که در این صورت تو کادهای کلاس و ایدی میتوانید ان را انتخاب کنید و ok را بزنید و وارد صفحه کنید.

    دکمه new css Rule
    این دکمه برای زمانی است که شما یک کلاس یا ادی جدید میخواهید تعریف کنید
    که با این دکمه میتوانید برای ان استایل مشخص کنید که پس از زدن این دکمه یک کادر بصورت زیر نمایان میشود
    مثلا من تو کادر کلاس عبارت test را تایپ و سپس دکمه new css Rule را میزنم.

    [​IMG]


    من بعد از زدن دکمه new css Rule با کادر بالا مواجه میشوم که به توضیح بخش های ان می پردازیم
    کادر selector tyle

    این کادر زمانی بدرتون میخوره که شما بخواهید نظرتون را عوض کنید مثلا من تو بالا یک کلاس با نام test نوشتم اما الان نظرم عوض میشه و میخوام اون test را بصورت id در بیارم که از این کادر عبارت
    ID (applies to only one HTM|L element)
    انتخاب میکنم

    کادر select name:

    اگر تو انتخاب نام منصرف شده اید ار این کادر تغییر نام دهید

    کادر Rule Definition:

    این کادر بسیار بسیار مهم و کاربردیه دقت فرمایید که شما میتوانید دراین کادر مشخص کنید که استایل این کلاس یا ایدی درون کدام فایل استایل نوسته شود اگر شما استایلی را به صفحتون فراخوانی کرده باشید اسمش تو این کادر میاد اما اگر شما استاییلی را به صفحه فراخوانی نکرده باشیید دو انتخاب دارید
    1.(this Document only)
    استایل مورد نظر را در همین صفحه تو بخش HED صفحه مینویسد
    2.(new css Rule file)
    با انتخاب این گزینه برنامه یک فایل css جدید را در پوشه ای که شما انتخاب میکنید ذخیره و به صفحه لینک میدهد و هم اون استاییل خاص را توی اون مینویسد .

    خوب به هر حال تنظیمات خود را انتخاب کنید و با زدن دکمه ok با یک کادر نهایی مواجه می شوید که شما توی اون استایل کلاس یا ایدی مورد نظر را تعریف میکنید.

    [​IMG]


    من دیگه با این کادر کاری ندارم و توضیح نمیدهم چون انوقت باید کل دریموییور را براتون توضیح دهم شما مییتوانید از پستهای قبل که بصورت مهم در امده اند این کادر و ویزگیهای ان را فرا بگیرید پس من در اینده به کارهایی میپردازم که با انها سروکار داریم.
    خلاصه تو این کادر شما ویزگی اون div را مشخص میکنید و با زدن دکمه ok کار تمام میشود و شما اون دیو را به همراه استایلش وارد صفحه میکنیید.

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



    دانلود فیلم اموزشی درس3 به حجم 700KB


    less0n_3.rar - 697.2 Kb

    [FONT=&amp]
    [/FONT]
    [FONT=&amp]درس [/FONT][FONT=&amp]4[/FONT]
    [FONT=&amp]بخش بندی صفحات توسط دیوها قسمت اول[/FONT]
    [FONT=&amp]تو این درس شما می اموزید که چگونه با دیوها صفحات سایتتون را بخش بندی کنید.[/FONT]
    [FONT=&amp]ما صفحه سایت خود را باید به صورت زیر در بیاریم تا بتونیم شکل کلی سایتمون را طراحی کنیم.[/FONT]
    [​IMG]

    [FONT=&amp]تصویر بالا نقشه کلی پوسته ما را تشکیل می دهد پس ما باید اول پوسته خود را مثل تصویر بالا با دیوها تقسیم کنیم .[/FONT]
    [FONT=&amp]همانطور که در بالا می بینید ما صفحه خود را با [/FONT][FONT=&amp]div id[/FONT][FONT=&amp] تقسیم کردیم چرا؟ چون مثلا دیو [/FONT][FONT=&amp]header[/FONT][FONT=&amp] فقط یک تا است نه چند تا یا ما فقط یک [/FONT][FONT=&amp]footer[/FONT][FONT=&amp] در صفحه داریم نه چندتا ما بقی هم همینطور.[/FONT]
    [FONT=&amp]شروع کار با دریمویور :[/FONT]
    · [FONT=&amp]برنامه را اجرا کنید وفایل [/FONT]

    [FONT=&amp]index.php[/FONT][FONT=&amp] را توش باز کنید[/FONT]
    · [FONT=&amp]از منو بالا [/FONT]

    [FONT=&amp]insert > Layout objects > Div tag[/FONT][FONT=&amp] را انتخاب کنید.[/FONT]
    · [FONT=&amp]توی کادر ظاهر شده تو قسمت [/FONT][FONT=&amp]id:[/FONT][FONT=&amp] عبارت [/FONT][FONT=&amp]warpaper [/FONT][FONT=&amp] را تایپ کنید.[/FONT]
    · [FONT=&amp]روی دکمه [/FONT][FONT=&amp]new css Rule[/FONT][FONT=&amp] کلیک کنید[/FONT]
    · [FONT=&amp]در کادر ظاهر شده تو قسمت [/FONT][FONT=&amp]Rule Difination[/FONT][FONT=&amp] را روی [/FONT][FONT=&amp]style.css[/FONT][FONT=&amp] تنظیم کنید.[/FONT]
    [FONT=&amp]روی [/FONT][FONT=&amp]ok [/FONT][FONT=&amp] کلیک کنید و در کادر جدید تب [/FONT][FONT=&amp]Box[/FONT][FONT=&amp] را باز کنید و مانند تصویر زیر انجام دهید. تصویر 1-10
    [​IMG]
    [/FONT] [FONT=&amp]توضیح:[/FONT]
    [FONT=&amp] همانطور که من قبلا گفتم این کادر برای استایل نویسی دیوها به کار میرود[/FONT]
    [FONT=&amp]حالا ما برای دیو [/FONT][FONT=&amp]warpaper[/FONT][FONT=&amp] چه استایلی تعریف کردیم؟[/FONT]
    [FONT=&amp]ما تو کادر بالا گفتیم که طول این دیو برابر با [/FONT][FONT=&amp]960 px[/FONT][FONT=&amp] و وسط چین باشد یعنی با خاصیت:[/FONT]
    [FONT=&amp]margin: 0px auto[/FONT][FONT=&amp];[/FONT]​
    [FONT=&amp]این کار امکان پذیر است.[/FONT]
    · [FONT=&amp]خوب بر روی [/FONT][FONT=&amp]ok[/FONT][FONT=&amp] کلیک کنید تا [/FONT][FONT=&amp]div id warpaper[/FONT][FONT=&amp] وارد صفحه شود.[/FONT]
    · [FONT=&amp]متن داخل [/FONT][FONT=&amp]div id warpaper[/FONT][FONT=&amp] را پاک کنید یعنی متن [/FONT][FONT=&amp]Content for id "warpaper" Goes Here[/FONT][FONT=&amp] و از منو بالا [/FONT][FONT=&amp]insert > Layout objects > Div tag[/FONT][FONT=&amp] را انتخاب کنید سپس در کادر جدید در قسمت [/FONT][FONT=&amp]id:[/FONT][FONT=&amp] نام [/FONT][FONT=&amp]header[/FONT][FONT=&amp] را وارد کنید و تنظیمات را کامل کنید تا به کادر زیر برسید و تنظیمات ان را انجام دهید[/FONT]
    [FONT=&amp]تصویر 1-11[/FONT]
    [​IMG]

    [FONT=&amp]و مثل قبل [/FONT][FONT=&amp]ok[/FONT][FONT=&amp] کنید تا [/FONT][FONT=&amp]div id header[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]div id warpaper[/FONT][FONT=&amp] شود.[/FONT]
    [FONT=&amp]حالا ما باید بعد از [/FONT][FONT=&amp]div id header[/FONT][FONT=&amp] یک [/FONT][FONT=&amp]id[/FONT][FONT=&amp] به نام [/FONT][FONT=&amp]nav[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]div id warpaper[/FONT][FONT=&amp] کنیم.[/FONT]
    · [FONT=&amp]از منو بالا [/FONT][FONT=&amp]insert > Layout objects > Div tag[/FONT][FONT=&amp] را انتخاب کنید سپس در کادر جدید در قسمت [/FONT][FONT=&amp]id:[/FONT][FONT=&amp] نام [/FONT][FONT=&amp]nav[/FONT][FONT=&amp] را تایپ کنید[/FONT]
    [FONT=&amp]و در همون کادر تنظیمات زیر را انجام دهید تا [/FONT][FONT=&amp]div nav[/FONT][FONT=&amp] بعد از [/FONT][FONT=&amp]div header[/FONT][FONT=&amp] قرار گیرد[/FONT]
    [FONT=&amp]تصویر 1-12
    [​IMG]
    [/FONT] [FONT=&amp]قبل از شروع ادامه کار باید در مورد محل قرار گیری دیوها یک توضیحاتی باید بدم تا در اینده دچار مشکل نشوید.[/FONT]
    [FONT=&amp]به [/FONT][FONT=&amp]insert:[/FONT][FONT=&amp] توجه کنید این کادر دارای چند گزینه است که به معرفی بخش های ان می پردازیم.[/FONT]
    1. [FONT=&amp]At insertation point[/FONT][FONT=&amp] دیو جدید را هرجا که کلیک
    کرده اید وارد می کند[/FONT]
    2. [FONT=&amp]Befor tag[/FONT][FONT=&amp] دیو جدید را قبل از دیو انتخابی شما قرار می دهد که دیو انتخابی شما در کادر راست این کادر انتخاب می شود[/FONT]
    3. [FONT=&amp]After start of tag[/FONT][FONT=&amp] دیو جدید را درون دیو انتخابی و در اول ان دیو قرار می دهد.[/FONT]
    4. [FONT=&amp]Befor end of tag[/FONT][FONT=&amp] دیو جدید را درون دیو انتخابی و قبل از تمام یا بسته شدن ان قرار میدهد.[/FONT]
    1. [FONT=&amp]After tag[/FONT][FONT=&amp] دیو جدید را بعد از دیو انتخابی شما وارد می کند.[/FONT]
    [FONT=&amp]خوب بر روی [/FONT][FONT=&amp]new css rule[/FONT][FONT=&amp] کلیک کنید و ما بقی کار را خودتون انجام دهید مثل تصویر زیر فقط یک نکته مهم که تمام دیوها یا تگهایی که ما تو این پروزه به ان می پردازیم باید استایل انها درون فایل [/FONT][FONT=&amp]Style.css[/FONT]
    [FONT=&amp]نوشته شوند پس حواستون باشه که همیشه [/FONT][FONT=&amp]Rule Definition[/FONT][FONT=&amp] روی [/FONT][FONT=&amp]style.css[/FONT][FONT=&amp] تنظیم باشد.[/FONT]
    [FONT=&amp]تصویر 1-13[/FONT]
    [​IMG]

    [FONT=&amp]*تصویر بالا تنظیمات [/FONT][FONT=&amp]#nav[/FONT][FONT=&amp] است[/FONT]
    · [FONT=&amp]یک [/FONT][FONT=&amp]id[/FONT][FONT=&amp] به نام [/FONT][FONT=&amp]container[/FONT][FONT=&amp] بعد از [/FONT][FONT=&amp]div nav[/FONT][FONT=&amp] قرار دهید.[/FONT]
    · [FONT=&amp]یک [/FONT][FONT=&amp]id[/FONT][FONT=&amp] به نام [/FONT][FONT=&amp]footer[/FONT][FONT=&amp] بعد از [/FONT][FONT=&amp]div id container[/FONT][FONT=&amp] قرار دهید.[/FONT]
    [FONT=&amp]شکل نهایی باید به صورت زیر باشد[/FONT]

    [​IMG]



    [FONT=&amp]پایان درس4 قسمت اول[/FONT]

    دانلود فیلم اموزشی درس4 قسمت اول به حجم 500KB

    less0n_4-part1.rar - 532.7 Kb


    [FONT=&amp]درس [/FONT][FONT=&amp]4[/FONT]
    [FONT=&amp]بخش بندی صفحات توسط دیوها قسمت دوم[/FONT]

    [FONT=&amp]خوب تو این درس می خواهیم [/FONT][FONT=&amp]sidebar[/FONT][FONT=&amp] ها و [/FONT][FONT=&amp]maincont[/FONT][FONT=&amp] را بسازیم در ضمن باید به عرضتون برسونم که این مبحث بسیار مهم است و ریزه نکات ظریفی دارد و شما باید این مبحث را با دقت بیشتری مطالعه کنید.[/FONT]
    [FONT=&amp]شما در این درس با کلاس [/FONT][FONT=&amp]clear[/FONT][FONT=&amp] اشنا می شوید. [/FONT]
    · [FONT=&amp]فایل [/FONT][FONT=&amp]index.php[/FONT][FONT=&amp] را باز کنید و متن داخل [/FONT][FONT=&amp]container [/FONT][FONT=&amp] را پاک کنید و از منو بالا [/FONT][FONT=&amp]insert > Layout objects > Div tag[/FONT][FONT=&amp] را انتخاب کنید [/FONT]
    [FONT=&amp]در کادر [/FONT][FONT=&amp]id:[/FONT][FONT=&amp] نام [/FONT][FONT=&amp]sidebar-left [/FONT][FONT=&amp] را وارد کنید و[/FONT][FONT=&amp]new css rule[/FONT][FONT=&amp] را کلیک کرده و بقیه مراحل را همانند قبل انجام دهید و در پایان تب [/FONT][FONT=&amp]box[/FONT][FONT=&amp] را انتخاب کنید و تنظیمات را با توجه به تصویر زیر انجام دهید.[/FONT]
    [FONT=&amp]تصویر 1-14[/FONT]
    [​IMG]


    [FONT=&amp]و در پایان کلید [/FONT][FONT=&amp]ok[/FONT][FONT=&amp] را بزنید
    [/FONT][FONT=&amp]حالا نوبت [/FONT][FONT=&amp]maincont[/FONT][FONT=&amp] است پس از [/FONT][FONT=&amp]insert > Layout objects > Div tag [/FONT][FONT=&amp] انتخاب کنید و اسم [/FONT][FONT=&amp]id[/FONT][FONT=&amp] را [/FONT][FONT=&amp]maincont[/FONT][FONT=&amp] بگذارید سپس در [/FONT][FONT=&amp]insert:[/FONT][FONT=&amp] گزینه [/FONT][FONT=&amp]After tag[/FONT][FONT=&amp] را انتخاب و از کادر روبرو [/FONT][FONT=&amp]sidebar-left[/FONT][FONT=&amp] راانتخاب کنید و [/FONT][FONT=&amp] new css rule[/FONT][FONT=&amp] را کلیک کنید و با توجه به شکل تب [/FONT][FONT=&amp]box[/FONT][FONT=&amp] را تنظیم کنید.
    تصویر 1-15
    [​IMG]

    [/FONT][FONT=&amp]ساخت [/FONT][FONT=&amp]sidebar-right[/FONT][FONT=&amp] از منوی بالا [/FONT][FONT=&amp]insert > Layout objects > Div tag [/FONT][FONT=&amp] را انتخاب کرده و یک [/FONT][FONT=&amp]id[/FONT][FONT=&amp] با نام [/FONT][FONT=&amp]sidebar-right[/FONT][FONT=&amp] بعد از [/FONT][FONT=&amp]maincont[/FONT][FONT=&amp] وارد کرده و تنظیمات [/FONT][FONT=&amp]box[/FONT][FONT=&amp] ان را با توجه به تصویر زیر انجام دهید. تصویر 1-16
    [​IMG]

    [/FONT]
    [FONT=&amp]خوب کار تمام شد اما یه مشکل ما سه تا [/FONT][FONT=&amp]id[/FONT][FONT=&amp] به نام های [/FONT][FONT=&amp]sidebar-left,maincont,sidebar-right [/FONT][FONT=&amp] را وارد [/FONT][FONT=&amp]container[/FONT][FONT=&amp] کردیم اما ظاهرا این [/FONT][FONT=&amp]container[/FONT][FONT=&amp] ناپدید شده و ما مثلا رنگ پس زمینه ان را ابی کنیم توی مرورگر هیچی نشون نمی دهد هنگار که اصلا چنین چیزی نبوده اگه به فایل [/FONT][FONT=&amp]style.css[/FONT][FONT=&amp] یه نگاهی بیندارید یک کلاس می بینید[/FONT]
    [FONT=&amp]به نام [/FONT][FONT=&amp].clear[/FONT][FONT=&amp] این کلاس واسه چنین شرایطی تعریف شده که با وارد کردن ان [/FONT][FONT=&amp]id [/FONT][FONT=&amp] ما نمایان می شود[/FONT]
    [FONT=&amp]پس این بار در کادر [/FONT][FONT=&amp]class:[/FONT][FONT=&amp] کلاس [/FONT][FONT=&amp].clear[/FONT][FONT=&amp] را انتخاب کرده و گزینه [/FONT][FONT=&amp]insert:[/FONT][FONT=&amp] را روی [/FONT][FONT=&amp]After tag[/FONT][FONT=&amp] تنظیم کنید و در کادر روبرو [/FONT][FONT=&amp]#sidebar-right[/FONT][FONT=&amp] را انتخاب کنید و مستقیما [/FONT][FONT=&amp]ok[/FONT][FONT=&amp] کنید تا این کلاس وارد شود وشما متن داخل ان را پاک کنید و صفحه را ذخیره کنید.

    [/FONT]


    [FONT=&amp]پایان درس4 قسمت دوم[/FONT]



    دانلود فیلم اموزشی درس4 قسمت دوم به حجم 530KB


    less0n_4-part2.rar - 534.9 Kb

    [FONT=&amp]درس 5
    هدر سایت [/FONT][FONT=&amp](header)[/FONT]

    [FONT=&amp]امروز می پردازیم به هدر سایت و تنظیم های ان و این درس بسیار کوتاه است.[/FONT]
    [FONT=&amp]قبل از شروع کار لطفاً فایل زیر را دانلود کنید و ان را تو پوشه [/FONT][FONT=&amp]img[/FONT][FONT=&amp] واقع در پوشه [/FONT][FONT=&amp]wp-tm[/FONT][FONT=&amp] کپی کنید و سپس ان را از حالت فشرده خارج کنید.[/FONT]
    [FONT=&amp]img.rar - 389.8 Kb
    [/FONT]
    پسورد : 00123000000
    [FONT=&amp]خوب برنامه دریمویور را باز کرده و فایل [/FONT][FONT=&amp]index.php[/FONT][FONT=&amp] را در ان اجرا کنید سپس تو پانل [/FONT][FONT=&amp]css styles[/FONT][FONT=&amp] روی ایدی [/FONT][FONT=&amp]header[/FONT][FONT=&amp] دوبار کلیک کنید.[/FONT]
    [FONT=&amp]سپس تو کادر باز شده تب [/FONT][FONT=&amp]Background [/FONT][FONT=&amp] را باز کنید اینک دکمه [/FONT][FONT=&amp]Browse[/FONT][FONT=&amp] را زده و از تو پوشه [/FONT][FONT=&amp]img[/FONT][FONT=&amp] تصویر [/FONT][FONT=&amp]header.jpg[/FONT][FONT=&amp] را انتخاب کرده و دو بار [/FONT][FONT=&amp]ok [/FONT][FONT=&amp] کنید.
    تصویر 1-17[/FONT]
    [FONT=&amp][​IMG]
    [/FONT]
    [FONT=&amp]همه پرونده ها رو ذخیره کرده و کلید [/FONT][FONT=&amp]F12[/FONT][FONT=&amp] را فشار دهید تا حاصل کار را در مرورگر مشاهده کنید[/FONT]
    [FONT=&amp]اکنون بر روی ایدی [/FONT][FONT=&amp]#warpaper[/FONT][FONT=&amp] دو بار کلیک کنید و تو تب [/FONT][FONT=&amp]Background[/FONT][FONT=&amp] رنگ [/FONT][FONT=&amp]Background-color[/FONT][FONT=&amp] را روی سفید {[/FONT][FONT=&amp]#FFF[/FONT][FONT=&amp]} تنظیم کنید.[/FONT]

    [FONT=&amp]پایان درس 5[/FONT]



    [FONT=&amp]درس 6[/FONT]
    [FONT=&amp] منو سایت [/FONT][FONT=&amp](nav)[/FONT][FONT=&amp] بخش اول [/FONT][FONT=&amp]menu[/FONT]
    [FONT=&amp]حالا نوبت به منوی سایت می رسد و شما تو این درس با خاصیت لینکها در حالت معمولی و هم تو حالت [/FONT][FONT=&amp]hover[/FONT][FONT=&amp] و از جهتی هم با انواع لیستها هم اشنا می شوید[/FONT]
    [FONT=&amp]لینک : نوشته یا تصویری است که با کلیک بر روی ان مرور گر به صفحه مورد نظر تغییر مسیر می دهد.[/FONT]
    [FONT=&amp]ما لینک ها رو در 4 حالت می توانیم قرار دهیم و هم می توانیم برای هر حالت استایل جدید مثلا رنگ متن [/FONT]–[FONT=&amp]فونت-زیر خط دار یا ..........[/FONT]
    [FONT=&amp]تعریف کنیم که این 4 حالت عبارتند از :[/FONT]
    1. [FONT=&amp]a:link[/FONT][FONT=&amp] این حالت معمولی لینک است و ما در این حالت موس را بر روی ان نبرده ایم.[/FONT]
    2. [FONT=&amp]a:hover[/FONT][FONT=&amp] به حالتی گویند که موس بر روی لینک است اما هنوز کلیک نکرده ایم.[/FONT]
    3. [FONT=&amp] a:active[/FONT][FONT=&amp] به حالتی گویند که ما بر روی لینک کلیک کرده ایم اما کلیک را هنوز رها نکرده ایم.[/FONT]
    4. [FONT=&amp]a:visited[/FONT][FONT=&amp] به حالتی گویند که ما روی لینک کلیک کرده و رها می کنیم.[/FONT]


    [FONT=&amp]همچنین می پردازیم به لیستها که ما دو نوع لیست داریم[/FONT]
    1. [FONT=&amp]لیستهای مرتب[/FONT]
    [FONT=&amp]که نمایش انها به صورت زیر است[/FONT]
    [FONT=&amp]1. لیست[/FONT]
    [FONT=&amp]2. لیست[/FONT]
    [FONT=&amp]3. لیست[/FONT]
    2. [FONT=&amp]لیستهای نا مرتب[/FONT]
    [FONT=&amp]که نمایش انها به صورت زیر است[/FONT]
    · [FONT=&amp]لیست[/FONT]
    · [FONT=&amp]لیست[/FONT]
    · [FONT=&amp]لیست[/FONT]
    [FONT=&amp]خوب بهتره دیگه ما به صورت عملی با اینها اشنا بشویم.[/FONT]
    [FONT=&amp]درون [/FONT][FONT=&amp]#nav[/FONT][FONT=&amp] در صفحه متن داخل ان را ([/FONT][FONT=&amp]Content for id "nav" Goes Here[/FONT][FONT=&amp]) پاک کنید و از منو بالا [/FONT][FONT=&amp]insert > Layout objects > Div tag[/FONT][FONT=&amp] انتخاب کنید و یک ایدی با نام [/FONT][FONT=&amp]search-top[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]nav[/FONT][FONT=&amp] کنید و خاصیتهای ان را به صورت زیر تعریف کنید.[/FONT]
    [FONT=&amp]تصویر 1-19[/FONT]
    [FONT=&amp] [​IMG]

    [/FONT]
    [FONT=&amp]حالا یک ایدی با نام [/FONT][FONT=&amp]menu[/FONT][FONT=&amp] بعد از ایدی [/FONT][FONT=&amp]search-top[/FONT][FONT=&amp] وارد صفحه کنید و به ان خاصیت های زیر را بدهید.[/FONT]
    [FONT=&amp]تصویر 1-20[/FONT]
    [​IMG]

    [FONT=&amp]حالا متن داخل [/FONT][FONT=&amp]menu[/FONT][FONT=&amp] را پاک کنید و از [/FONT][FONT=&amp]insert > html > text objects > unordered list[/FONT][FONT=&amp] را انتخاب کنید و کلمه صفحه اصلی را تایپ کنید سپس [/FONT][FONT=&amp]inter[/FONT][FONT=&amp] را بزنید و کلمه ارشیو و اینتر و کلمه جستجو و اینتر و کلمه تبلیغات و اینتر و کلمه تماس با ما و اینتر را بزنید حالا یک نگاه به قسمت کدها بیندارید کد شما باید مثل زیر باشد[/FONT]

    کد (Text):
    [LEFT]<div id="menu">
          <ul>
            <li>صفحه اصلی</li>
            <li>ارشیو</li>
            <li>تبلیغات</li>
            <li>جستجو</li>
            <li>تماس با ما</li>
          </ul>
        </div>
    [/LEFT]
     


    [FONT=&amp]سپس به همه کلمات یک لینک پوچ مثل [/FONT]# یا javascript:; بدهید
    تصویر شما باید به شکل زیر شده باشد.
    تصویر 1-21
    [​IMG]

    [FONT=&amp]حالا برای افزایش سرعت کار کدهای زیر را به [/FONT][FONT=&amp]style.css[/FONT][FONT=&amp] اضافه کنید[/FONT]

    کد (Text):
    #menu li { float: right; }
    #menu li a { color:#FFF; display:block; font-family:tahoma; font-size:11px; font-style:normal; font-variant:normal; font-weight:normal; line-height:14px; margin:5px 5px 0; padding:0 0 5px 5px; text-align:center; text-decoration:none }
    #menu li a:hover { color: #000; background-color: #acaaaa; }
     




    [FONT=&amp]شکل نهایی[/FONT]
    [FONT=&amp] تصویر [/FONT][FONT=&amp]1-22[/FONT]
    [​IMG]

    پایان درس

    دانلود فیلم اموزشی درس 5 و 6 بخش اول به حجم 2.5MB

    les5_6.rar - 2.5 Mb


    pass:00123000000



    [FONT=&amp]درس 6 بخش دوم کادر جستجو[/FONT]
    [FONT=&amp]متن داخل [/FONT][FONT=&amp]search-top[/FONT][FONT=&amp] را پاک کنید و به حالت [/FONT][FONT=&amp]code[/FONT][FONT=&amp] در دریمویور بروید و از [/FONT][FONT=&amp]insert>form>form[/FONT][FONT=&amp] را انتخاب کنید و یک کادر برای شما باز خواهد شد که با توجه به تصویر ان را کامل کنید[/FONT]
    [FONT=&amp]تصویر 1-26
    [​IMG]

    [​IMG]
    [/FONT] [FONT=&amp]سپس کلید [/FONT][FONT=&amp]ok[/FONT][FONT=&amp] را بزنید تا یک فرم وارد [/FONT][FONT=&amp]search-top[/FONT][FONT=&amp] شود این فرم جستجوی پوسته شما است حالا به یک کادر متن و یک دکمه جستجو نیاز دارید. اما قبلش یک توضیح در مورد فرم ها بدهم فرم ها را می توان به دو دسته کلی تقسیم کرد [/FONT]
    · [FONT=&amp]فرم هایی که وظیفه گرفتن اطلاعات را دارند که [/FONT][FONT=&amp]method[/FONT][FONT=&amp] انها به صورت [/FONT][FONT=&amp]get[/FONT][FONT=&amp] است مثل فرم های جستجو[/FONT]
    · [FONT=&amp]فرم هایی که وظیفه فرستادن اطلاعات را دارند که [/FONT][FONT=&amp]methord[/FONT][FONT=&amp] انها به صورت [/FONT][FONT=&amp]post[/FONT][FONT=&amp] است مثل فرم های ثبت نظرات یا فرم های تماس با ما و .....[/FONT]
    [FONT=&amp]خوب می رویم به ادامه مطلب درون فرم یک کیک بکنید تا بتوانید یک کادر متن را درون ان قرار دهید برای قرار دادن کادر متن مراحل زیر را دنبال کنید.[/FONT]
    [FONT=&amp]از [/FONT][FONT=&amp]insert>form>text field[/FONT][FONT=&amp] را انتخاب کنید و تنظیمات کادر جدید را با توجه به تصویر زیر انجام دهید.[/FONT]
    [FONT=&amp]تصویر 1-28[/FONT]
    [FONT=&amp][​IMG][/FONT]

    [FONT=&amp]سپس تب[/FONT][FONT=&amp]style sheet[/FONT][FONT=&amp] را باز کنید و تنظیمات ان را با توجه به تصویر زیر انجام دهید[/FONT]
    [FONT=&amp]تصویر 1-29
    [​IMG]
    [/FONT][FONT=&amp]حالا این استایل را به [/FONT][FONT=&amp]style.css[/FONT][FONT=&amp] اضافه کنید

    [/FONT]
    کد (Text):
    #search-form #s { background: transparent; height: 20px; margin-top: 5px; border-width: 0px; border-style: none; padding: 0px 10px; width: 120px; line-height: 20px; float: right; }
    [FONT=&amp]خوب می رسیم به دکمه جستجو برای یک دکمه جستجو از [/FONT][FONT=&amp]insert>form>text field[/FONT][FONT=&amp] را انتخاب کنید و تنظیمات ان را با توجه به شکل زیر انجام دهید(پیشنهاد میکنم برای درج فرم ها با کادرهای متن و جستجو همیشه به حالت [/FONT][FONT=&amp]code[/FONT][FONT=&amp] دریمویور بروید زیرا در این حالت شما میتوانید تنظیمات بیشتری را تحت اختیار داشته باشید.)[/FONT]
    [FONT=&amp]تصویر1-30
    [​IMG]

    [/FONT] [FONT=&amp]سپس[/FONT]
    [FONT=&amp]تصویر 1-31

    [​IMG]
    [/FONT] [FONT=&amp]خوب این هم استایل دکمه ما[/FONT]


    کد (Text):
    #search-form #submit { margin: 5px 0px 0px; padding: 0px; height: 20px; background: transparent; border-width: 0px; border-style: none; float: left; color: #FFF; font: 10px Tahoma, Geneva, sans-serif; width: 35px; }
     
    [FONT=&amp]شکل کلی باید به صورت زیر شده باشد[/FONT]
    [FONT=&amp]تصویر 1-32

    [​IMG]
    [/FONT] [FONT=&amp]خوب این درس هم به پایان رسید

    [/FONT]
    [FONT=&amp]درس 7 ستون های کناری [/FONT][FONT=&amp](sidebar)[/FONT]
    [FONT=&amp]بخش اول-[/FONT]
    [FONT=&amp]sidebar left[/FONT]

    [FONT=&amp]دیگه می پردازیم به ستون های کناری و از ستون کناری سمت چپ شروع می کنیم.[/FONT]
    [FONT=&amp]من اولش می خواستم کل ستون ها رو با سه تا کلاس سر هم کنم اما دیدم یک مشکلاتی بعدا پیش می اید که ارزش ان را نداشت پس یک کار دیگه ای میکنیم و اونها را به صورت مجزا تعریف می کنیم پس برنامه را باز کنید و متن داخل [/FONT][FONT=&amp]sidebar-lef[/FONT][FONT=&amp] را پاک کنید و از [/FONT][FONT=&amp]insert>layout objects>div tag[/FONT][FONT=&amp] را انتخاب کنید و یک کلاس به نام [/FONT][FONT=&amp]left-sidebar-box-ads[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]sidebar-left[/FONT][FONT=&amp] کنید و من از این به بعد برای سرعت کار فقط استایل ها را می دهم و شما ان را وارد [/FONT][FONT=&amp]style.css[/FONT][FONT=&amp] کنید تا سرعت کار افزایش یابد[/FONT]
    [FONT=&amp]خوب یک کلاس دیگه بعد از کلاس [/FONT][FONT=&amp]left-sidebar-box-ads[/FONT][FONT=&amp] به نام [/FONT][FONT=&amp]left-sidebar-box-last-post[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]sidebar-left[/FONT][FONT=&amp] کنید و همچنین یک کلاس بعد از [/FONT][FONT=&amp]left-sidebar-box-last-post[/FONT][FONT=&amp] به نام [/FONT][FONT=&amp]left-sidebar-box-monthly-archive[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]sidebar-left [/FONT][FONT=&amp] و یک کلاس بعد از [/FONT][FONT=&amp]left-sidebar-box-monthly-archive[/FONT][FONT=&amp] به نام [/FONT][FONT=&amp]left-sidebar-box-random-post[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]sidebar-left [/FONT][FONT=&amp] و یک کلاس بعد از [/FONT][FONT=&amp]left-sidebar-box-random-post[/FONT][FONT=&amp] به نام [/FONT][FONT=&amp]left-sidebar-box-statistics[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]sidebar-left[/FONT][FONT=&amp] کنید شکل کلی باید مثل زیر شده باشد[/FONT]
    [FONT=&amp]تصویر 1-23[/FONT]
    [​IMG]

    [FONT=&amp]خوب ما [/FONT][FONT=&amp]sidebar-left[/FONT][FONT=&amp] را به 5 قسمت تقسیم کردیم که هر قسمت مخصوص به یک بخش سایت می باشند که عبارتند از :[/FONT]
    [FONT=&amp]قسمت تبلیغات[/FONT]
    [FONT=&amp]مطالب قبل[/FONT]
    [FONT=&amp]آرشیو سایت[/FONT]
    [FONT=&amp]مطالب اتفاقی[/FONT]
    [FONT=&amp]امار سایت[/FONT]
    [FONT=&amp]- خوب حالا ما تک تک بخشها را طراحی میکنیم شما فقط طبق مراحل زیر پیش بروید[/FONT]
    · [FONT=&amp]متن داخل [/FONT][FONT=&amp]left-sidebar-box-ads[/FONT][FONT=&amp] را پاک کنید و یک کلاس به نام[/FONT]
    [FONT=&amp]top_left-sidebar-box-ads[/FONT][FONT=&amp] را داخل [/FONT][FONT=&amp]left-sidebar-box-ads[/FONT][FONT=&amp] وارد کنید و بعد از [/FONT][FONT=&amp]top_left-sidebar-box-ads[/FONT][FONT=&amp] یک کلاس به نام [/FONT][FONT=&amp]bg_left-sidebar-box-ads[/FONT][FONT=&amp] را وارد و همچنین یک کلاس به نام [/FONT][FONT=&amp]botoon_left-sidebar-box-ads [/FONT][FONT=&amp] را بعد از [/FONT][FONT=&amp]bg_left-sidebar-box-ads[/FONT][FONT=&amp] وارد [/FONT][FONT=&amp]left-sidebar-box-ads[/FONT][FONT=&amp] کنید.
    شکل کلی به صورت زیر می باشد. [/FONT]
    [​IMG]

    [FONT=&amp]حالا نوبت [/FONT][FONT=&amp]left-sidebar-box-last-post[/FONT][FONT=&amp] است مراحل زیر را دنبال کنید[/FONT]
    · [FONT=&amp]متن داخل [/FONT][FONT=&amp]left-sidebar-box-last-post[/FONT][FONT=&amp] را پاک کنید و یک کلاس به نام [/FONT][FONT=&amp]top_[/FONT] [FONT=&amp]left-sidebar-box-last-post[/FONT][FONT=&amp] را وارد و سپس بعد از ان یک کلاس به نام [/FONT][FONT=&amp]bg_[/FONT] [FONT=&amp]left-sidebar-box-last-post[/FONT][FONT=&amp] را وارد و همچنین بعد از ان یک کلاس به نام [/FONT][FONT=&amp]botoon_[/FONT] [FONT=&amp]left-sidebar-box-last-post[/FONT][FONT=&amp] را وارد [/FONT][FONT=&amp]left-sidebar-box-last-post[/FONT][FONT=&amp] کنید. شکل کلی را می توانید در زیر مشاهده کنید[/FONT]
    [FONT=&amp][​IMG]
    [/FONT]

    [FONT=&amp]خوب مراحل بعد هم شبیه مراحل بالا است و هیچ فرقی نمی کند من اسم کلاس ها را می دهم شما هم طبق مراحل بالا انجام دهید[/FONT]
    · [FONT=&amp]برای بخش [/FONT][FONT=&amp]left-sidebar-box-monthly-archive[/FONT][FONT=&amp] کلاس های [/FONT]
    [FONT=&amp]top_[/FONT] [FONT=&amp]left-sidebar-box-monthly-archive[/FONT][FONT=&amp] و بعد از ان [/FONT][FONT=&amp]bg_[/FONT] [FONT=&amp]left-sidebar-box-monthly-archive[/FONT][FONT=&amp] و بعد از ان [/FONT][FONT=&amp]botoon_[/FONT] [FONT=&amp]left-sidebar-box-monthly-archive[/FONT][FONT=&amp] را وارد کنید[/FONT]
    · [FONT=&amp]برای بخش [/FONT][FONT=&amp]left-sidebar-box-random-post[/FONT][FONT=&amp] کلاس های [/FONT][FONT=&amp]top_[/FONT] [FONT=&amp]left-sidebar-box-random-post [/FONT][FONT=&amp] و بعد از ان [/FONT][FONT=&amp]bg_[/FONT] [FONT=&amp]left-sidebar-box-random-post[/FONT][FONT=&amp] و بعد از ان [/FONT][FONT=&amp]botoon_[/FONT] [FONT=&amp]left-sidebar-box-random-post[/FONT][FONT=&amp] را وارد [/FONT][FONT=&amp]left-sidebar-box-random-post[/FONT][FONT=&amp] کنید[/FONT]
    · [FONT=&amp]برای بخش [/FONT][FONT=&amp]left-sidebar-box-statistics[/FONT][FONT=&amp] کلاس های [/FONT][FONT=&amp]top_[/FONT] [FONT=&amp]left-sidebar-box-statistics [/FONT][FONT=&amp] و بعد از ان [/FONT][FONT=&amp]bg_[/FONT] [FONT=&amp]left-sidebar-box-statistics[/FONT][FONT=&amp] و بعد از ان [/FONT][FONT=&amp]botoon_[/FONT] [FONT=&amp]left-sidebar-box-statistics[/FONT][FONT=&amp] را وارد[/FONT][FONT=&amp]left-sidebar-box-statistics[/FONT][FONT=&amp] کنید و شکل کلی [/FONT][FONT=&amp]sidebar-left[/FONT][FONT=&amp] باید شکل زیر شده باشد[/FONT]
    [FONT=&amp]تصویر 1-26[/FONT]
    [​IMG]

    [FONT=&amp]خوب مرحله بعد که مراحل پایانی کار است بسیار راحت است و شما باید تصاویر را در این کلاس ها جایگذاری کنید و همچنین خاصیت کلاس ها را تنظیم می کنیم.[/FONT]
    [FONT=&amp]پس از بالا شروع می کنیم[/FONT]
    ü [FONT=&amp]در پانل [/FONT][FONT=&amp]css styles[/FONT][FONT=&amp] روی کلاس [/FONT][FONT=&amp]top_left-sidebar-box-ads[/FONT][FONT=&amp] دو بار کلیک کنید و در کادر باز شده روی تب [/FONT][FONT=&amp]Background[/FONT][FONT=&amp] کلیک کنید سپس تو بخش [/FONT][FONT=&amp]background-images[/FONT][FONT=&amp] بر روی [/FONT][FONT=&amp]Browse[/FONT][FONT=&amp] کلیک کنید و از پوشه [/FONT][FONT=&amp]img[/FONT][FONT=&amp] تصویر [/FONT][FONT=&amp]sidebar-ads.jpg[/FONT][FONT=&amp] را انتخاب کنید و سپس تو تب [/FONT][FONT=&amp]Box[/FONT][FONT=&amp] تو قسمت [/FONT][FONT=&amp]Height[/FONT][FONT=&amp] را به [/FONT][FONT=&amp]37px[/FONT][FONT=&amp] تنظیم کنید و [/FONT][FONT=&amp]ok[/FONT][FONT=&amp] کنید. سپس متن داخل ان را پاک کنید[/FONT]
    ü [FONT=&amp]برای بخش [/FONT][FONT=&amp]bg_left-sidebar-box-ads[/FONT][FONT=&amp] تصویر [/FONT][FONT=&amp]sidebar-content.jpg[/FONT][FONT=&amp] را انتخاب کنید و تو قسمت [/FONT][FONT=&amp]Background-repeat[/FONT][FONT=&amp] را روی [/FONT][FONT=&amp]repeat-y[/FONT][FONT=&amp] تنظیم کنید و سپس تو تب [/FONT][FONT=&amp]Box[/FONT][FONT=&amp] و تو قسمت [/FONT][FONT=&amp]padding[/FONT][FONT=&amp] را به [/FONT][FONT=&amp]5px[/FONT][FONT=&amp] ارتقاء دهید و [/FONT][FONT=&amp]ok[/FONT][FONT=&amp] کنید.[/FONT]
    ü [FONT=&amp]برای بخش [/FONT][FONT=&amp]botoon_left-sidebar-box-ads[/FONT][FONT=&amp] تصویر [/FONT][FONT=&amp]right-sidebar-footer.jpg[/FONT][FONT=&amp] را انتخاب کنید و تو تب [/FONT][FONT=&amp]Box[/FONT][FONT=&amp] تو قسمت [/FONT][FONT=&amp]Height[/FONT][FONT=&amp] را به [/FONT][FONT=&amp]29px[/FONT][FONT=&amp] تنظیم کنید و [/FONT][FONT=&amp]ok[/FONT][FONT=&amp] کنید و متن داخل ان را پاک کنید.[/FONT]
    ü [FONT=&amp]بقیه کار هم به همین صورت می باشد که کلاس های [/FONT][FONT=&amp]botoon[/FONT][FONT=&amp] و [/FONT][FONT=&amp]bg[/FONT][FONT=&amp] مثل هم هستند یعنی کلاسهای [/FONT][FONT=&amp]bg[/FONT][FONT=&amp] اینها [/FONT][FONT=&amp]padding=5px[/FONT][FONT=&amp] و تصویر زمینه انها [/FONT][FONT=&amp]sidebar-content.jpg[/FONT][FONT=&amp] که به صورت [/FONT][FONT=&amp]repeat=repeat-y[/FONT][FONT=&amp] است و همچنین کلاس های [/FONT][FONT=&amp]botoon[/FONT][FONT=&amp] اینها تصویر زمینه انها [/FONT][FONT=&amp]right-sidebar-footer.jpg[/FONT][FONT=&amp] است و عرض انها که تو تب [/FONT][FONT=&amp]Box[/FONT][FONT=&amp] است [/FONT][FONT=&amp]Height=29px[/FONT][FONT=&amp] است پس شما تمام این کلاس ها را تنظیم کنید و من فقط کلاس های [/FONT][FONT=&amp]top[/FONT][FONT=&amp] را توضیح می دهم.[/FONT]
    ü [FONT=&amp]برای کلاس[/FONT] [FONT=&amp]top_left-sidebar-box-last-post[/FONT][FONT=&amp] تصویر [/FONT][FONT=&amp]last-posts.jpg[/FONT][FONT=&amp] و عرض ان [/FONT][FONT=&amp]35px[/FONT][FONT=&amp] است و نیز متن داخل ان را پاک کنید.[/FONT]
    ü [FONT=&amp]برای کلاس [/FONT][FONT=&amp]top_left-sidebar-box-monthly-archive [/FONT][FONT=&amp] تصویر [/FONT][FONT=&amp]monthly-archive.jpg[/FONT][FONT=&amp] و عرض ان[/FONT][FONT=&amp]35px [/FONT][FONT=&amp] است و متن داخل ان را پاک کنید.[/FONT]
    ü [FONT=&amp]برای کلاس [/FONT][FONT=&amp]top_left-sidebar-box-random-post[/FONT][FONT=&amp] تصویر [/FONT][FONT=&amp]random-posts.jpg[/FONT][FONT=&amp] و عرض ان [/FONT][FONT=&amp]35px[/FONT][FONT=&amp] است و متن داخل ان را پاک کنید.[/FONT]
    ü [FONT=&amp]برای کلاس [/FONT][FONT=&amp]top_left-sidebar-box-statistics[/FONT][FONT=&amp] تصویر [/FONT][FONT=&amp]statistics.jpg[/FONT][FONT=&amp] را انتخاب و ارتفاع ان را [/FONT][FONT=&amp]35px[/FONT][FONT=&amp] تنظیم کنید و متن داخل ان را پاک کنید.[/FONT]
    [FONT=&amp]شکل کلی [/FONT][FONT=&amp]تصویر1-30[/FONT]
    [​IMG][​IMG]


    پایان درس 7
     

    پیوست ها:

    • 1.png
      1.png
      اندازه فایل:
      کیلوبایت 92.6
      نمایش ها:
      668
    • 2.png
      2.png
      اندازه فایل:
      کیلوبایت 18
      نمایش ها:
      640
    • 3.png
      3.png
      اندازه فایل:
      کیلوبایت 19.5
      نمایش ها:
      641
    • 4.png
      4.png
      اندازه فایل:
      کیلوبایت 17.4
      نمایش ها:
      638
    • header-wp-thems.png
      header-wp-thems.png
      اندازه فایل:
      کیلوبایت 70.9
      نمایش ها:
      598
    آخرین ویرایش: ‏10 اکتبر 2012
    نوشته شده توسط websaz2012 در ‏4 می 2012
    shahin_3000_v، salam8، mohammad_r03 و 22 نفر دیگر از این ارسال تشکر کرده اند.
  2. mamad.noise

    mamad.noise کاربر فعال انجمن فتوشاپ

    ارسال‌ها:
    1,123
    تشکر شده:
    909
    امتیاز دستاورد:
    36
    دوست عزیز اگه آخر هم pdf رو قرار بدی ممنون میشیم
    مدیران هم لطف کنن تاپیک رو مهم کنن
     
    نوشته شده توسط mamad.noise در ‏4 می 2012
    p4yam، erpol، ghasemrayaneh و یک نفر دیگر از این ارسال تشکر کرده اند.
  3. unknown_i3oy

    unknown_i3oy Well-Known Member

    ارسال‌ها:
    244
    تشکر شده:
    620
    امتیاز دستاورد:
    93
    عالی میشه ... من یک آموزش انگلیسی واسه این کار دیدم ولی کامل نبود و آخرش هم کاری از پیش نبردم
    خوشحال میشم از شما آموزش ببینم . :green:
     
    نوشته شده توسط unknown_i3oy در ‏4 می 2012
    erpol و panoram از این پست تشکر کرده اند.
  4. MohammadGh

    MohammadGh Well-Known Member

    ارسال‌ها:
    2,372
    تشکر شده:
    2,804
    امتیاز دستاورد:
    113
    کار بسیار عالی هست
    با دوستموم موافقم که بصورت pdf هم قرار بدید
     
    نوشته شده توسط MohammadGh در ‏4 می 2012
    erpol و ghasemrayaneh از این پست تشکر کرده اند.
  5. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    ممنون دوستان
     
    نوشته شده توسط websaz2012 در ‏5 می 2012
    noo6ika، 686868 و erpol از این ارسال تشکر کرده اند.
  6. mamad.noise

    mamad.noise کاربر فعال انجمن فتوشاپ

    ارسال‌ها:
    1,123
    تشکر شده:
    909
    امتیاز دستاورد:
    36
    دوست عزیز فکر کنم عکس هارو یادت رفته بزاری....:green:
     
    نوشته شده توسط mamad.noise در ‏5 می 2012
    AmirHidDeN و erpol از این پست تشکر کرده اند.
  7. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    نه دوست عزیز تصاویر کاملا لود میشوند
     
    نوشته شده توسط websaz2012 در ‏5 می 2012
    686868 و erpol از این پست تشکر کرده اند.
  8. mamad.noise

    mamad.noise کاربر فعال انجمن فتوشاپ

    ارسال‌ها:
    1,123
    تشکر شده:
    909
    امتیاز دستاورد:
    36
    والا من که عکسی نمی بینم
    اگه شما دیدی بقیه دیدن به ما هم خبر بدن:wink:
     
    نوشته شده توسط mamad.noise در ‏7 می 2012
    erpol از این پست تشکر کرده است.
  9. MohammadGh

    MohammadGh Well-Known Member

    ارسال‌ها:
    2,372
    تشکر شده:
    2,804
    امتیاز دستاورد:
    113
    سلام
    اگه بشه تصاویر و ... را در خود پست پیوست کنید بهتره ...
    تشکر
     
    نوشته شده توسط MohammadGh در ‏8 می 2012
    erpol از این پست تشکر کرده است.
  10. MohammadGh

    MohammadGh Well-Known Member

    ارسال‌ها:
    2,372
    تشکر شده:
    2,804
    امتیاز دستاورد:
    113
    شما برای پیوست کردن عکس ها و ... در انجمن می تونین از در قسمت انتخاب بیشتر » الحاق پیوست » مدیریت پیوست ها تصاویر و .... در خود انجمن اپلود کنین و .. هرگز پاک نمیشه ...... احتمال داره اون وبساتی که شما تصاویر رو آپ میکنی ، بسته بشه یا ....

    تشکر
     
    نوشته شده توسط MohammadGh در ‏8 می 2012
    erpol و websaz2012 از این پست تشکر کرده اند.
  11. erpol

    erpol Member

    ارسال‌ها:
    56
    تشکر شده:
    10
    امتیاز دستاورد:
    6
    با سلام
    من میخوام یه چند تا عکس توی قالبی که دارم طراحی میکنم بزارم ولی برای جابجا کردنشون و گذاشتنشون جای که دلم میخواد با مشکل برخوردم و بلد نیستم آگه میشه راهنماییم کنید ممنون میشم
    باتشکر :rose:
     
    نوشته شده توسط erpol در ‏12 می 2012
  12. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    دوست عزیز این کار بسیار راحت است شما فقط به عکستون استایل زیر را بدهید
    position: absolute;
    و سپس میتوانید با خاصیتهای top و left و bottom , right اونو تغییر جهت دهید

    یه مثال میزنم فرض کنید من یه تصویر با نام img1 دارم پس اون به صورت ریر مینوسم
    HTML:

    img {
        position: absolute;
        left: 20px;
        top: 50px;
    }
     
    این میگه که تصویر ما از سمت چپ 20 پیکسل به طرف راست رفته و از طرف بالا 50 پیکسل به طرف پاییین
    امیدوارم که مشکلتون حل شده باشه
    در ضمن باید بگم این یک مثال بود و در عمل شما باید در استایل تصویر مورد نظر را باید تنظیم کنید.
    مثلا شما یک تصویر در div id logo دارید پس در استایل مییشه
    HTML:

    #logo img {
        position: absolute;
        left: 20px;
        top: 50px;
    }
     
    از خاصییتهای margin هم میتونی استفاده کنی که شامل
    margin left و margin right و margin top و margin bottom است.


    البته یه راه خیلی راحت تر است که شما میتوانید تو دریمیور ازش استفاده کنی
    اینه که شما یک کلاس با یه اسمی که دوست دارین تعریف میکنید و ویزگی مورد نظر را براش مینویسید سپس بر روی تصویر مورد
    نظز کلیک کرده و در پاییین برنامه دریمویور تو قسمت properties گوشه سمت راست یه کادری است به نام class که از تو اون کادر کلاسی را که تعریف کردیین را انتخاب کنید
    به همین راحتی


    درود

    by:oops:
     
    آخرین ویرایش: ‏28 می 2012
    نوشته شده توسط websaz2012 در ‏12 می 2012
    erpol از این پست تشکر کرده است.
  13. erpol

    erpol Member

    ارسال‌ها:
    56
    تشکر شده:
    10
    امتیاز دستاورد:
    6
    متشکر داداش قسمت css بخوام بنویسم هم همین شکلیه دیگه؟
     
    نوشته شده توسط erpol در ‏12 می 2012
  14. erpol

    erpol Member

    ارسال‌ها:
    56
    تشکر شده:
    10
    امتیاز دستاورد:
    6
    :tavajoh::tavajoh::tavajoh::tavajoh::tavajoh::tavajoh::tavajoh::tavajoh::tavajoh::tavajoh:


    ببخشید بازهم مزاحم شدم
    :nokte::nokte::nokte::nokte: حالا چطوری یک کلاس تعریف کنیم :sad::sad::sad::?::?::?::?:
     
    نوشته شده توسط erpol در ‏21 می 2012
  15. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    صفحه قبل درس 3 را مطالعه کنید جوابتون را پیدا خواهید کرد

    یا این کلاس را وارد صفحه استایلتون کنید و ویزگیهای مورد نظر را بهش بدین

    HTML:

    .img1 {
    }

    میتوانید به جای img1 هر اسم دیگر را بزارید
     
    آخرین ویرایش: ‏28 می 2012
    نوشته شده توسط websaz2012 در ‏28 می 2012
    p4yam و erpol از این پست تشکر کرده اند.
  16. rambow

    rambow New Member

    ارسال‌ها:
    19
    تشکر شده:
    5
    امتیاز دستاورد:
    3
    ممنون و خسته نباشي دوست عزيز

    اگه پي دي اف لطف كني ممنون ميشم شديييييييييييييييييييد
     
    نوشته شده توسط rambow در ‏28 می 2012
  17. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16

    حتما دوست عریر اما قبلش باید اموزش تموم شه بروی چشم حتی قراره فیلم اموزشی هم بزارم
     
    نوشته شده توسط websaz2012 در ‏28 می 2012
  18. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16

    حتما دوست عزیز اما قبلش باید اموزش تموم شه بروی چشم حتی قراره فیلم اموزشی هم بزارم
     
    نوشته شده توسط websaz2012 در ‏28 می 2012
  19. zedetahajom

    zedetahajom New Member

    ارسال‌ها:
    23
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    سلام
    داداش آموزش خیلی عالیه
    منتظر بقیه اموزشت هستم
    خیلی ممنون
     
    نوشته شده توسط zedetahajom در ‏3 ژوئن 2012
  20. websaz2012

    websaz2012 Member

    ارسال‌ها:
    198
    تشکر شده:
    259
    امتیاز دستاورد:
    16
    دروس جدید اغاز گردیدند
     
    نوشته شده توسط websaz2012 در ‏8 ژوئن 2012
    mohamadsobhan و erpol از این پست تشکر کرده اند.

به اشتراک بگذارید