پرش به

  • تبلیغات تبلیغات تبلیغات تبلیغات تبلیغات تبلیغات
    تصویر

    • لطفا وارد حساب کاربری خود شوید تا بتوانید پاسخ دهید
    14 پاسخ برای این موضوع

    #9

    abarestan

    با سلام

     

    با کمی تاخیر باز برگشتم تا یکی دیگر از اموزش های html5 در قالب css3 در خدمت شما عزیزان باشم.

     

    در این قسمت ما بیشتر به css می پردازیم و شما را با تگ link اشنا می کنیم.

     

    مدت زمان فیلم:

     

    8 دقیقه و 7 ثانیه.

     

    پسورد فایل ها:

    guardiran.org

     

    حجم: 3MB  دریافت ها: 18
    دریافت پیوست

     

    حجم: 3MB  دریافت ها: 10
    دریافت پیوست

     

    حجم: 3MB  دریافت ها: 10
    دریافت پیوست

     

    حجم: 3MB  دریافت ها: 9
    دریافت پیوست

     

    حجم: 771.6K  دریافت ها: 10
    دریافت پیوست

     

    تشکر نشانه رضایت شماست


    • C0d3!Nj3ct!0N, REX, Mafia_IR و 4 فرد دیگراز این پست تشکر کرده است

    #10

    abarestan

    ۹ نکته طلایی درمورد css :

     

    ۱- در هر tag شما ‫فقط یکبار می توانید از خصوسیت استایل استفاده کنید.

     

    ۲- بهتر است از تگ style فقط یک بار استفاده شود اما در صورتی که چند بار استفاده کنید مجموعه دستورات style اعمال می گردد و دستوراتی که هم پوشانی داشته باشند دستورات پایین تر اولویت پیدا می کنند.

     

    ۳- از دستور link به هر تعداد می توان استفاده کرد اما توصیه شده که بیش از ۷ مورد استفاده نشود.

     

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

     

    ۵- اولویت اول دستورات css با روش inline است. اما در روش embedded و external اولویت بستگی به محل نوشته شدن تگ style و LINK دارد یعنی هر کدام از دستورات که پایین نوشته شود اولویت بالاتری دارد. این اولویت ها فقط مربوط به دستوراتی است که هم پوشانی داشته باشد.

     

    ۶- در دستورات css به جای علامت مساوی از علامت دو نقطه استفاده می شود.

     

    ۷- مقادیر دستورات css لازم نیست که  در داخل "یا ' قرار گیرد. مگر اینکه مقدار دستورات شامل space باشد.

     

    ۸- دستورات css فاصله ندارند و به جای آن از - (دش) استفاده می شود.

     

    ۹- در انتهای دستورات css حتما باید علامت ; قرار بگیرد.

     

    در اموزش بعدی بیش تر درباره ‫‪external‬‬ ‫و‬ ‫‪embedded‬‬ صحبت خواهیم کرد و وارد بحث ‫‪selector‬‬ ها می شویم در ضمن در اموزش های جلو تر قست های مورد نیاز فیلم تصویری قرار می گیرد.

     

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

     

    باتشکر و یاعلی


    • C0d3!Nj3ct!0N, Mafia_IR, J.ALL_EdIT0r و 1 فرد دیگراز این پست تشکر کرده اند

    #11

    abarestan

    با سلام خدمت دوستان

     

    در این قسمت ما بیش تر با روش های external و embedded می پردازیم و شما را با selector اشنا می کنیم ولی قبل از اون ما یه عذرخواهی خیلی ویژه به تیم امنیتی گاردایران بدهکاریم...

     

    راستش این چند وقت انقدر درگیر زندگی شده بودیم که وقت نکردیم به تیم گاردایران سربزنیم و درخدمت شما باشیم و البته یه بد قولی هم سر اقای DeMoN کردیم مبنا بر موندنمون ولی انشا الله حالا بتونیم در کنارتون باشیم. :) 

     

    بریم سراغ اموزش:

     

    در روش embedded و external دستورات css جداگانه نوشته شده و باید بر روی بخشهایی از صفحه اعمال شود. برای تعیین بخشهای مورد نظر که میخواهید استایلها بر روی آن اعمال شود از selector ها استفاده کنید. در

     

    روش embedded و external برای مشخص کردن مجموعهای از دستوراتی که باید بر روی یک یا چندین تگ اعمال شود دستورات را در داخل {} بنویسید. حال هر کجا که selector ها به آن اشاره میکنند مجموع این

     

    دستورات با هم بر روی آن بخش اعمال می گردد.

     

    حالا با انواع selector ها اشنا می شوید: 

     

    ۱- tag modify : در این روش شما میتوانید استانداردهای یک تگ را تغییر دهید و آن تگ را برای خود سفارشی کنید. به عبارتدیگر هر وقت از آن tag استفاده میکنید خصوصیاتی که قبلا برای آن معرفی کردهاید را میگیرد.

     

    برای حالت tag modify کافیست قبل از علامت {}  نام تگ را بنویسید. حال هر کجای صفحه از این تگ استفاده کنید آن خصوصیات اعمال میشود.

    Tag name{ css code}
    

    ۲- class : گاهی اوقات طراح وب میخواهد فقط برای بعضی از tag های html خود استایل بنویسد برای این منظور از class selector استفاده میکند . برای تعریف یک selector class قبل از } نام class را بنویسید و

     

    در هر tag که نیاز به آن style دارید خصوصیت class را برابر با نام کلاس قرار دهید. نام class با عدد شروع نمیشود. قبل از نام کلاس در تگ استایل علامت . قرار میگیرد.

    .class name{ css code}
    

    ۳- id: گاهی اوقات طراح وب بنا به دلایلی بخشهایی از صفحه را نامگذاری میکند. به دلیل نامگذاری، آن بخش از بخشهای دیگر صفحه جدا گردیده و میتوان برای آن بخش style نوشت. برای نوشتن style علامت # و نام id را قبل

     

    از علامت } بنویسید.

    #id name{ css code}
    

    ۴- compound : گاهی اوقات طراح وب میخواهد برای بخشهایی از صفحه که دارای یک آدرس مشخص است استایل بنویسد. برای این منظور کافی است آدرس محلی که میخواهید style اعمال شود را مشخص کنید. برای تعیین

     

    آدرس میتوانید بر اساس نام تگ نام class و یا نام id آدرس را تعیین کنید. برای مشخص کردن یانکه کدام tag درداخل کدام tag قرار دارد باید بین tag ها از space استفاده کنید. در تعریف آدرس شما میتوانید از tag هایی که

     

    تاثیری در آدرس ندارند چشم پوشی کنید.

    Tagname #idname {css code}
    

    ۵- *: هر زمان بخواهید یک style بر روی تمام tag ها اعمال گردد از * قبل از } استفاده کنید. در این حالت تمام tag ها جدا از نام tag ، class و id این استایل را دریافت میکنند.

    *{css code}
    

    ۶- ,: زمانی که بخواهید برای چندین تگ یک استایل بنویسید میتوانید قبل از علامت } نام تگهای خود را نوشته و بین آنها از علامت ، استفاده کنید.

    Tag name,tag name{css code}
    

    نکات

     

    • در صورتی که بخواهید بر روی بخشی از صفحه چند class به طور همزمان اعمال شود می توانید در خصوصیت class تگ مورد نظر نام class ها را نوشته و با space آنها را جدا کنید. اولویت با آخرین class می باشد.
    • Id به دلیل اینکه فقط به یک نقطه از صفحه اشاره می کند اولیت بالاتری دارد، بعد از آن اولویت class می باشد و در انتها اولویت tag modify است.
    • در روش compound اولویت بستگی دارد به نحوه نوشتن compound . به عبارت دیگر در صورتی که از id استفاده کنید اولویت بالاتری پیدا می کند تا class.
    • در صورت تعریف دو selector با اولویت برابر، اولویت با پایین ترین دستور است.

     

     ​در جلسه بعدی چند کار عملی شروع می کنیم   ;)

     

    تشکر نشانه رضایت شماست

     

    یاعلی


    • C0d3!Nj3ct!0N, REX, Mafia_IR و 3 فرد دیگراز این پست تشکر کرده است

    #12

    abarestan

    با سلام دوباره به همه دوستان

     

    با ادامه اموزش های html5 در قالب css3 در خدمت شما هستیم.

     

     

    در این آموزش چی یاد میگیریم؟

     

     

    در این قسمت قرار با تگ های h1 تا h6 و p  و div بیشتر آشنا بشیم.

     

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

     

    قصد داریم آموزش ها رو پروژه ای محوری کنیم!

     

     

    اموزش ها در 3 پارت قرار داره که پس از دانلود در یک مکان اکسترکت کنید.

     

     

    پسورد فایل ها : guardiran.org

     

     

     

    حجم: 5MB  دریافت ها: 19
    دریافت پیوست

     

    حجم: 5MB  دریافت ها: 13
    دریافت پیوست

     

    حجم: 4.78MB  دریافت ها: 9
    دریافت پیوست

     

     

    اسپم ممنوع و سوالات خودتون رو در بخش مربوطه بپرسید.

     

     

    نکته : دوستان برای شما یه فایل تمرین گذاشتم! سعی کنید عکسی رو ک پیوست کردم رو بسازید . حتما این کار رو بکنید و بعد آموزش بعدی رو تماشا کنید.

     

     

    اینم عکس سعی کنید چیزی شبیه تصویر زیر بسازید:

     

    حجم: 75.42K  دریافت ها: 2
    دریافت پیوست

     

     

    در آموزش بعدی کد های تمرین رو قرار میدم که ایراد های خودتون رو پیدا کنید>!

     

     

    تشکر نشانه رضایت شماست

     

    ممنون و یا علی


    • Mafia_IR, J.ALL_EdIT0r و Mr.Kali از این پست تشکر شده است

    #13

    abarestan

    به نام خدا

     

    با سلام خدمت دوستان گرامی

     

    در این قسمت ابتدا قرار سورس کد های پروژه قسمت قبل رو خدمت شما عزیزان قرار بدیم.

     

    اینم سورس کد های این پروژه:
     

    حجم: 657bytes  دریافت ها: 1
    دریافت پیوست

     

    فقط دو کد جدید در این پروژه قرار گرفته بود که به ترتیب: margin-bottom و margin-top است.

     

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

    margin-top:10px;
    

    و یا 

    margin-bottom:10px;
    

    بریم برای آموزش این قسمت:

     

    این قسمت قرار با دستور float در css اشنا بشیم.

     

    خواصیت float این است که اگر به خواهیم جسمی را در راستای محور X ها (محور افقی)  شناور کنیم باید از خواصیت float استفاده کنیم.

     

    خب با توجه به این توضیحات شما باید توانید تصویر زیر را بسازید:

     

    حجم: 71.27K  دریافت ها: 0
    دریافت پیوست

     

    از آن جایی که قرار آموزش ها پروژه ای محور باشه باید حتما شما ابتدا سعی و تلاش برای زدن کد ها بکنید و سپس ما انشا الله سورس کد های اون پروژه رو قرار میدیم و یا در صورت نیاز فیلم های آموزشیش را نیز برای شما تهیه می کنیم.

     

    در قسمت های بعدی علاوه بر سورس کد با تگ Span نیز اشنا می شین.

     

    این رو هم ذکر کنم که قسمت بعدی کاربر rezarahemi آموزش هایی که بنده به صورت نوشتاری در اوردم ایشون لطف می کنند و به صورت تصویری و با صدا قرار میدهند تا راحت تر بتوانید یک طراح خوب بشوید.

     

    با سپاس و یاعلی


    • Mafia_IR, J.ALL_EdIT0r و 1TED از این پست تشکر شده است

    #14

    Mr.Kali

    به نام برنامه نویس هستی

     

    با سلام خدمت دوستان

     

    قرار در این قسمت از آموزش ها بنده تمامی آموزش هایی رو که کاربر abarestan به صورت نوشتاری قرار دارند رو به صورت تصویری قرار بدم. این تاپیک هماهنگ شده با کاربر abarestan می باشد.

     

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

     

    مشخصات ویدیو:

     

    1- آموزش تصویری فرمت فایل avi.

     

    2- آموزش به همراه صدا برای افزایش درصد یادگیری.

     

    3- پسورد فایل در صورت لزوم: guardiran.org

     

     

    لینک آموزش با بالاترین کیفیت در آپلود سنتر خارج از انجمن:

     

    http://s7.picofile.c.../طراحی.avi.html

     

     

    اینم همون آموزش کیفیت پایین . آپلود در انجمن:

     

    حجم: 5MB  دریافت ها: 14
    دریافت پیوست

     

    حجم: 4.74MB  دریافت ها: 8
    دریافت پیوست

     

    تشکر نشانه رضایت شماست

     

    با سپاس و یاعلی


    • abarestan, Mafia_IR و J.ALL_EdIT0r از این پست تشکر شده است

    #15

    Mr.Kali

    به نام برنامه نویس هستی

     

    با سلام خدمت دوستان

     

    قرار در این قسمت از آموزش ها بنده تمامی آموزش هایی رو که کاربر abarestan به صورت نوشتاری قرار دارند رو به صورت تصویری قرار بدم. این تاپیک هماهنگ شده با کاربر abarestan می باشد.

     

    این قسمت : معرفی تگ head  هستش 

    مشخصات ویدیو:

     

    1- آموزش تصویری فرمت فایل avi.

     

    2- آموزش به همراه صدا برای افزایش درصد یادگیری.

     

    3- پسورد فایل در صورت لزوم: guardiran.org

     

     

    لینک آموزش با بالاترین کیفیت در آپلود سنتر خارج از انجمن:

     

    http://s7.picofile.c...راحی_2.avi.html


    • abarestan, Mafia_IR, Reza.attacker و 1 فرد دیگراز این پست تشکر کرده اند





    همچنین به اموزش html, اموزش css, اموزش html5, اموزش css3, اموزش کامل html 5, اموزش کامل css3, اموزش کامل html, اموزش کامل html در قالب, اموزش کامل html + صدا, اموزش طراحی وب نیز برچسب خورده است

    0 کاربر در حال خواندن این موضوع است

    0 کاربر، 0 مهمان و 0 عضو مخفی