راهبران

استاد سلام:bala: میبخشید دیر شد، عجب دانشجوهای بی ملاحظه ای هستیم ماshotup اینم تمپ پوزیشن من

سلام به همه دوستان گلم به خصوص tarantino و amin.poorsaeed عزیز که با پست هاشون به من روحیه دوچندان دادن. راستش یه عذر خواهی دارم از بابت تاخیر در پست هام و دلیلش هم چند تا پروژه و همایشی بود که درگیرش بودم. از همه عذر خواهی می کنم الان هم در مسافرتم و انشاء الله به زودی ادامه آموزش ها رو خدمتتون خواهم داشت. پیشاپیش عیدتون هم مبارک باشه. تنها همین را می دانم که جوان های ایرانی لایق جان نثاری هستند. فعلا یا علی مدد.

واقعا نحوه بیان کردن مطالب فرق می کنه من نحوه بیان خودم رو با بیان ایشون مقایسه کردم و متوجه شدم که ایشون با زبان شیرین و آسانی بیان می کنن با اینکه منم شروع به ساخت قالب کردم ولی اگر کسی ازم راهنمایی بخواد با این زبان و به این نحو نمی تونم توضیح بدم واقعا آفرین داره ، با تشکر :128fs318181: :35:

بسم الله الرحمن الرحیم آموزش کامل طراحی قالب گرافیکی یک سایت از ابتدا تا انتها الف- استراتژی توجه به این نکته بسیار مهم است که ابتدا برای اتود زدن یک قالب، مخاطبین هدف سایت خودمون رو بشناسیم. برای دست یابی به این مهم باید بدونیم که سایت ما چه خدمات و محصولاتی رو ارائه می کنه. *****انشاء الله دوستان گل من در ادامه یک شرکت با خدمات مشخصی رو با کمک همدیگر (البته بنده در هم در خدمت هستم) تعریف بکنیم و بر اساس اون ادام هکار رو پیش ببریم.***** ب- انتخاب رنگ برخی از شرکت ها و سازمان ها سعی می کنند رنگ خاصی رو به عنوان رنگ شرکت در نظر بگیرند. این مسئله یک مورد بسیار مهم در طراحی به طور کلی می باشد. مثلا وقتی اسم ایرانسل به گوشمون می رسه نا خود آگاه همه به یاد رنگ زرد مایل به طلایی می افتیم. پس دقت کنید برای طراحی های سازمانیتون حتما با مشورت مدیر شرکت یک رنگ رو به عنوان رنگ سازمانی در نظر بگیرید. *****نکته مهم:درست است که در مورد انتخاب رنگ باید با مدیر شرکت مشورت شود ولی به این نکته توجه داشته باشید که انتخاب کد رنگ و ایجاد هارمونی بین رنگ ها رو اصلا به افرادی که سر رشته ندارند نسپارید. چرا که غیر از خراب کردن کار شما هیچ سود دیگری ندارند.***** پ-اجرا و رنگ بندی من در طول 10 - 11 سالی که کار آموزش گرافیک کامپیوتری رو انجام دادم با دانشجویان مختلفی سر و کار داشتم که اغلب اون ها سعی در این داشتن که بیشتر چیز هایی رو که بلد هستن و در طول 4 -5 جلسه اول فرا می گیرن در قالب یک طرح پیاده کنند و یا بی جا از رنگ ها متنوع و زیادی در طرح بندیشون استفاده کنن. این کار کاملا اشتباهه چرا که اثر بخشی کار رو تا حد زیادی داغون می کنه:128fs318181: برای روشن تر شدن مسئله و توجه به استثنائات یک مثال می زنم: مثلا فکر کنید برای یک شرکت رنگ سازی می خواهید سایتی رو طراحی کنید. خوب در این حالت شما مجبورید از رنگ های متنوع استفاده کنید، اما اینکه چگونه این رنگ ها را به کاربران نشون بدید بسیار مهم هست. در این جا مقوله بسیار مهمی نمایان می شه به نام رنگ پس زمینه، استفاده از رنگ پس زمینه در این جا به عنوان یک نجات گر به ما کمک می کنه که رنگ هامون رو با جذابیت هر چه بیشتر نمایش بدیم. فکر کنم تا الآن 99،9 درصد رنگ پس زمینه رو انتخاب کردید، درست حدث زدید بهترین رنگ برای بک گراند این سایت رنگ سفید هست و لا غیر البته شاید بشه از رنگ مشکی متالیک هم استفاده کرد ولی مطمئن باشید بک سفید چیز دیگری هست. خوب توضیح در مورد رنگ خیلی مفصل هست که من سعی می کنم در طول دوره بیشتر توضیح بدم. ت- Template Position منظور از Template Position همون مکان قرارگیری ماژول ها و کامپوننت های ماست که از اهمیت ویژه ای برخورداره، دسته بندی اصولی و کامل یک قالب با درنظر گرفتن خوانا بودن کار بسیار مهمی که در اول کار باید به آن توجه ویژه ای بشه. بچه ها سعی کنید با یه دید عمیق position ها رو ایجاد کنید چرا که در غیر این صورت ممکن هست به مشکل بر بخورید. ان شاء الله ادامه دارد ... خیلی دارم سعی می کنم کلی گویی بکنم تا حوصله شما هم سر نره ولی چه کنم که نکات مهمی برای طراحی قالب چشمگیر وجود داره که حیفم میاد نگم ولی چشم بقیش رو در حین پیاده سازی عملی می گم. راستش خیلی دوست دارم که این آموزش تعاملی باشه و فقط من گوینده و ندرس نباشمو شما هم خوبه در مباحث شرکت کنید تا هم من انرژی یبشتری بگیرم و هم کار رو به نحو احسن به سرانجام برسونیم. فقط توجه داشته باشین که با توجه به اینکه بنده مشغله کاری زیادی دارم در صورتی می تونم برای شما عزیزان کار رو ادامه بدم که شما هم از این تاپیک استقبال بکنید و در اون مشارکت داشته باشید و کاربران به تعداد قابل قبولی برسن، البته حتی یک نفر از شما هم برای بنده محترم هست ولی من خیلی وقتم محدوده، اگر بدونم شما هم خیلی حوصله بنده رو ندارید، من هم وقت ارزشمند شما عزیزان رو نمی گیرم. ان شاء الله از جلسه بعدی تمام بچه ها فتوشاپ به دست! آماده باشن که خیلی سریع می خواهیم وارد محیط فتوشاپ بشیم و کار رو از اونجا آغاز کنیم. فعلا یا علی مدد

css را مي توان به سه طريق مورد استفاده قرار داد: 1- دستوري 2- صفحه اي 3- خارجي اگر بخواهيم براي عناصري خاص از css استفاده كنيم دستو رات را مستقيما در صفت style عنصر قرار مي دهيم به عنوان مثال : <p style="font-size: 15px:>click</p> در صورت استفاده صفحه اي بايد دستورات را درون تگ <style tape="text/css"></style> قرار داد مانند مثال زير: <style> {left {color: red# {left {color: red. </style> اگر بخواهيم به صورت خارجي استفاده كنيم بايد همان تگ <style> بالا را در يك فايل متني با پسوند css. خارج از سند html خود بنويسيم. حال پس از تعريف فايل css خود بايد آن را به سند html خود بشناسانيم. اين مهم با استفاده از تگ </ link> انجام مي شود. اين تگ كه در تگ <head> بكار مي رود داراي دو صفت مهم است: rel و href صفت rel واسط بين فايل html و فايل حاوي css را نام گزاري مي كند و به صورت "rel="stylesheet استفاده مي شود. صفت href مسير فايل css را مشخص مي كند. به مثال زير توجه كنيد: </"link rel="stylesheet" href="test.css> حال به راحتي مي توان از css اضافه شده به سند html استفاده كرد.

CSS را مي توان به دو طريق استفاده كرد 1- سراسرس 2- محلي در صورت سراسري بايد در قسمت انتخابگر نام عنصر مورد نظر و در پي آن خصوصيت و مقدار آن را درون پوشه {} قرار دهيم اما نوع دوم به دو صورت استفاده مي شه 1- صفت CLASS 2- صفت ID صفت CLASS شايد از خود پرسيده باشيد كه ممكن است از يك عنصر در دوجاي متفاوت با صفات متفاوت استفاده كنيم تكليف چيست؟ در اين صورت بايد كمي بيشتر دقت كنيم. حال مثالي ميزنم {left{color: red. {right{color: red. ********************* <p class="left">click</p> <p class="right">click</p> همانطور كه مشاهده كرديد ما در بخش تعريف css در قسمت انتخابگر نام هيچ عنصري را قرار نداديم و بجاي آن از نقطه و يك نام استفاده كرديم حال اگر به قسمت زير ان برويد مي بينيد كه آن اسم را در يك عنصر<p> با استفاده از صفت class قرار داده ايم. حال از اين پس اين عنصر از صفت بالا تاثير مي پذيرد اگر اين كلاس را به هر عنصر html دهيم در صورتي كه آن خصوصيات تعريف شده در كلاس بالا باشد از آن تبعيت مي كند * نكته: نام ها كاملا دلخواه مي باشد. اگر دستورات بالا به اين صورت استفاده مي شد: {p.left{color:"red فقط براي عناصر <p> استفاده مي شد صفت id اين صفتم مانند صفت قبل كار مي كند با تفاوت كوچكي در قالب دستوري بايك مثال روشنتان مي كنم {left {color: red# ******************** <p id="left">click</p> همانطور كه مشاهده مي كنيد به جاي نقطه از # استفاده و بجاي class از id استفاده شده * نكته: توجه داشته باشيد كه مقادير id بايد يكسان باشد و انعطاف كمتري نسبت به class دارد يعني نمي توان براي عنصري خاص مورد استفاده قرار داد:

برای id های html هم می تونید از این دستور استفاده کنید . در html بنویسید: <p id=phantom>test</p> و حالا در css بنویسید: #phantom } text-align:center; } و حالا در اون بخش تغییرات اعمال میشه. (بچه ها آموزش هاتون خیلی پراکندس ... !):13: موفق و موید باشید:auizz3ffy9vla57584x

هر دستور css از سه بخش درست شده : انتخابگر، خصوصيت، مقدار {selector{property:value انتخابگر در واقع همهن عناصري هستند كه شما قصد تغيير خصوصيات آن ها را داريد property ها همه خصوصيات موجود در html هستد با هستند با تفاوت هاي اندكي كه در ادامه به آن مي پردازيم value ها كه جلوي خصوصيت و بعد از علامت : قرار مي گيرند در css مي توان براي بيشتر از يك عنصر خصوصيت تعيين نمود براي مثال {h1,h2,h3,h4 {color:green