• Black
  • Blueberry
  • Slate
  • Blackcurrant
  • Watermelon
  • Strawberry
  • Orange
  • Banana
  • Apple
  • Emerald
  • Chocolate
  • Charcoal

عضویت ویژه طلایی گارد ایران با تخفیف 50%

برای عضویت کلیک کنید

16 ارسال در این موضوع قرار دارد

با سلام

 

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

 

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

 

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

 

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

 

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

guardiran.org

 

1.part1.rar

 

1.part2.rar

 

1.part3.rar

 

1.part4.rar

 

1.part5.rar

 

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

C0d3!Nj3ct!0n، k.shadow، REX و 4 کاربر دیگر پسندیده اند

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

۹ نکته طلایی درمورد 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، rezarahemi، REX و 2 کاربر دیگر پسندیده اند

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

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

 

در این قسمت ما بیش تر با روش های 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، DeMoN، REX و 3 کاربر دیگر پسندیده اند

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

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

 

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

 

 

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

 

 

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

 

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

 

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

 

 

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

 

 

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

 

 

 

avc_Merge 1.part1.rar

 

avc_Merge 1.part2.rar

 

avc_Merge 1.part3.rar

 

 

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

 

 

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

 

 

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

 

post-324-0-94409200-1465468550_thumb.png

 

 

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

 

 

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

 

ممنون و یا علی

REX، k.shadow، DeMoN و 1 کاربر دیگر پسندیده اند

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

به نام خدا

 

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

 

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

 

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

t003.htm

 

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

 

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

margin-top:10px;

و یا 

margin-bottom:10px;

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

 

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

 

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

 

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

 

post-324-0-01793700-1466239032_thumb.png

 

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

 

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

 

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

 

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

NetDeF، DeMoN، k.shadow و 1 کاربر دیگر پسندیده اند

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

http://s7.picofile.com/file/8258769426/طراحی.avi.html

 

 

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

 

avc_html&css1.part1.rar

 

avc_html&css1.part2.rar

 

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

 

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

k.shadow، abarestan، No_One و 2 کاربر دیگر پسندیده اند

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

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


 


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


 


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


 


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


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


 


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


 


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


 


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


 


 


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


 


http://s7.picofile.com/file/8259561068/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_2.avi.html

No_One، REX، k.shadow و 3 کاربر دیگر پسندیده اند

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

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


 


عرض سلام خدمت تمامی کاربران تیم امنیتی گارد ایران


 


در جلسه ابتدا مروری بر تگ های اصلی سایت و تگ head  کرده ایم اما اصل آموزش در خصوص مفهوم لینک دهی درhtml است که به صورت مفصل و ساده به شما عزیزان آموزش داده شده !


 


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


 


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


 


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


 


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


 


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


 


 


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


 



 

 


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


abarestan، DeMoN، No_One و 2 کاربر دیگر پسندیده اند

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

درباره ی ما

تیم امنیتی گارد ایران یک گروه مستقل است که قوانین آن با خط مشی جمهوری اسلامی ایران مغایرت ندارد. تیم امنیتی گارد ایران از سال 1393 فعالیت خود را آغاز کرد و هدف این تیم تامین امنیت سایت ها و سرورهای ایرانی است. تیم ما همیشه برای دفاع از مرزهای سایبری سرزمین عزیزمان ایران آماده است.