مطالب آموزش کامپیوتر و برنامه نویسی سایت همه گیر
صفحه اصلی
Login
Skip Navigation LinksHome : آموزش طراحی وب : آموزش طراحی صفحات وب با استفاده از CSS

طراحی صفحات وب با استفاده از CSS

طراحی صفحات وب پیشرفته چگونه صورت می گیرد؟
صفحات وبی دارای گرافیکی بالایی هستند،اما فلش نیستند چطور ساخته می شوند؟
چطور می توان سرعت طراحی را بسیار بالا برد؟
چگونه می توان از یک صفحه طراحی شده برای پروژه های بعدی هم بهره برد؟
آیا می توان صفحه وبی دقیقا با گرافیک فوتوشاپ اما سرعت بسیار بالا ایجاد نمود؟
سطح:  متوسط
زمان مطالعه: 30 دقیقه
نویسنده: پورمیرزایی
پیشنیاز: مقدمات HTML
 
1) CSS یعنی چه؟
Css مخفف cascading style sheets است یعنی برگه های آبشاری شیوه های نمایش!
Css چگونگی نمایش فایل html را معین می کند شبیه ویترین : مغازه هایی با یک فضا اما ویترینهای مختلف
یک تگ و یا قسمت از صفحه وب را می توان با CSS به چند قسمت مختلف تقسیم نمود و برای هر بخش ویژگی های اختصاصی تعریف کرد با CSS می توان محتوا و برنامه نویسی صفحات وب را  به راحتی از قسمت ظاهر  و طراحی کاملا جدا نمود
2) مزیت اصلی Css چیست؟
Css در زمان طراحی و دوباره استفاده کردن در پروژ ه های بعدی بسیار بسیار سودمند است.
3) اهمیت و کاربر CSS در طراحی صفحات وب چقدر است ؟
تمام طراحان وب در طراحی وب از css استفاده میکنند حداقل یک فایل css برای هر صفحه وب .
بسیاری از صفحات وبی که هم اکنون موجودند بخش اصلی گرافیک و ظاهر آنها با CSS طراحی شده اند پس اگر بخواهیم آن فایلها را بررسی و از امکانات آنها استفاده کنیم بایستی با CSS آشنا بود.
امروزه تغریباً تمام صفحات وب دارای فایلهای JavaScript هستند مثلا منوهای آبشاری (popup Menu) ، گالری تصاویر (SlideShow) ، افکتهای عبور متون (Rotators) و ... تمامی کارهای مربوط به گرافیک و نحوه نمایش انها با فایلهای CSS ایجاد می شوند.
4 ) یادگیری CSS چقدر طول می کشد؟
یادگیری css بسیار ساده است ؛ تمام نرم افزارهای طراحی وب css را بصورت wizard پشتیبانی می کنند .
اگر با HTML آشنا باشید یک روزه می توانید CSS را یادبگیرید.
5) در HTML شبیه ترین تگ به CSS چیست؟
جداول که با آنها می توان جایگاه هر قسمت صفحه وب را تعیین نمود.
جداول شبیه اسکلت بندی یک ساختمان هستند .
   
طراحی صفحه وب با استفاده از تگ جدول ( Web pag Design by tables) طراحی صفحه وب با استفاده از CSS ( Web page Design by CSS)
6) تگ CSS چیست؟ چگونه آنرا بر روی تگهای HTML اعمال کنیم ؟
CSS ها بعد از آنکه تعریف شدند به یکی از 3 شکل کلی زیر بر روی سر تگی که داخلشان قرار دارد بصورت آبشار ریخته می شوند!
1) بصورت صفتی برای تگ موجود ؛ نام صفت مربوطه class است که تغریبا تمامی تگهای HTML آنرا پشتیبانی می کنند. 2) اضافه نمودن تگ div و یا span به دور هر تگی که قرار است CSS بر آن اعمال شود. 3) بصورت مستقیم داخل خود تگ ؛ تعریف خصوصیات  CSS برای صفت style آن تگ HTML . (توصیه نمی شود)
     
7) CSS را چگونه تعریف کنیم ؟
Css را به 3 صورت می توان تعریف کرد
1) بصورت یک فایل جداگانه (بهترین روش) 2)داخل همان صفحه وبی که در حال طراحی آن هستیم (قابل استفاده تنها در آن صفحه وب) 3) بصورت مستقیم داخل خود تگ ؛ تعریف خصوصیات  CSS برای صفت style آن تگ HTML . (توصیه نمی شود)
الف) فایلهای فوق با  پسوند CSS ذخیره (save) میشوند
برای بزرگ شدن عکس موس را روی آن ببرید
ب) حتماً بایستی فایلهای فوق را در صفحه دلخواه وارد نمود که به این کار attach گفته می شود
برای بزرگ شدن عکس موس را روی آن ببرید
نکته : تمامی نرم افزارهای طراحی وب مثل DreamWeaver یا Visual Studio این کار را با دارا بودن دکمه ای در پنجره مربوط به مدیریت CSS ها انجام میدهند
در این روش می توان تعاریف خصوصیات CSS را داخل تگ باز و بسته style نوشت. مهم نیست که در کجای صفحه وبتان این کار را بکنید ، اما معمولا قبل از بستن تگ head
برای بزرگ شدن عکس موس را روی آن ببرید
 
 
برای بزرگ شدن عکس موس را روی آن ببرید
 
8) روش ایجاد قوانین CSS چگونه است ؟
  • هر قانون Css را می توان با نام دلخواه تعریف کرد مانند : bgkol.
  • یا هر یک از تگ های html را اختصاصی کرد مثلا تگ h1 تا h6 تگهای قدیمی و بسیار معتبر html هستند را میتوان با css اندازه شان ، رنگشان ، نوع خطشان و ... را به شیوه دلخواه در صفحه وب معرفی نمود.
برای بزرگ شدن عکس موس را روی آن ببرید
در Css هر قانون با ; از قانون بعدی جدا می شود .
هر css می تواند چندین قانون (صفت) دارد .
هر کدام از ویژگی ها با یک نام تعریف شده و قوانین آن داخل { } قرار میگیرند .
اگر css هایی با نام دلخواه تعریف می شوند بهتر است قبل از آنها . قرار گیرد .
9) ساخت CSS درون نرم افزار DreamWeaver برای بزرگ شدن عکس موس را روی آن ببرید
1
2
3
10) دانلود فایل مربوط به آموزش CSS ، لینک های مفید CSS
 
     
  نام
  ایمیل
Label وب سایت
5 = بهترین امتیاز
  نظریات
نــام سـایت تـاریخ امتیاز
LJdmcAODEkqJXdM gLdaFDMWa 1390/11/21 2
نظر free auto insurance quotes 167 free car insurance quotes =(
 
نــام سـایت تـاریخ امتیاز
mvEnoHWEGCMjhBRepj ESDCXhKBnfhIqkNCrdv 1390/11/20 2
نظر home insurance rates 230741 new jersey car insurance >:-OOO business insurance quotes cdmnwa
 
نــام سـایت تـاریخ امتیاز
JhDTmDcgtB iZAFuYFQGsSrPcDyjD 1390/11/19 2
نظر cheap health insurance plans inrvoq life insurance companies 00795
 
نــام سـایت تـاریخ امتیاز
AcVfihLkuJIoBa ELWjIXaDXA 1390/11/12 4
نظر ativan 227 topamax >:D accutane 8DDD
 
نــام سـایت تـاریخ امتیاز
rHKHwYdaICjvEbi VcHpKTghoJdaPOX 1390/11/07 4
نظر accutane %-))) where to buy levitra acg
 
نــام سـایت تـاریخ امتیاز
FELrMfgfKJE PXszfdRCK 1390/10/24 3
نظر xkkH2y , [url=http://hjfrngtwzxiz.com/]hjfrngtwzxiz[/url], [link=http://jsrxpxvwqwpm.com/]jsrxpxvwqwpm[/link], http://odnaxnvlduiq.com/
 
نــام سـایت تـاریخ امتیاز
ZTQyBXuCRXOZVOaJ IAImhhzboyejeToO 1390/10/24 2
نظر 1vX96N , [url=http://wcnnhwrwiktm.com/]wcnnhwrwiktm[/url], [link=http://qcrjmocrtdyu.com/]qcrjmocrtdyu[/link], http://sunszcuqgnkz.com/
 
نــام سـایت تـاریخ امتیاز
nkprpJscnVQkxWXhSde jVHWGsRkpdwriTHC 1390/10/20 2
نظر pAQNDV vrefmfoocxzs
 
نــام سـایت تـاریخ امتیاز
XsYcTwUJepKYuAsX DTAFhjSDuyqdg 1390/10/19 3
نظر BvaFK6 , [url=http://gptejlcicexh.com/]gptejlcicexh[/url], [link=http://vuhzhlubieog.com/]vuhzhlubieog[/link], http://tisaptovchfj.com/
 
نــام سـایت تـاریخ امتیاز
xOOkhlgFaxFkTWPPX VDPGzpWhLyZ 1390/10/19 2
نظر W0w3lu , [url=http://kewwrilbwoby.com/]kewwrilbwoby[/url], [link=http://bbvfwkkolrhp.com/]bbvfwkkolrhp[/link], http://wkzxaqehkteb.com/
 
نــام سـایت تـاریخ امتیاز
emkiXGTFfMYonBopZMv FlxAlujxYygNzK 1390/10/19 4
نظر I was seroiulsy at DefCon 5 until I saw this post.
 
نــام سـایت تـاریخ امتیاز
hJeGzSivTeLZfzDAW nFlCXEVPI 1390/10/18 3
نظر Hey, that's powrfeul. Thanks for the news.
 
نــام سـایت تـاریخ امتیاز
ydjyNGfrxDSs njoeusdjGPJDwkOj 1390/10/18 4
نظر It's impreative that more people make this exact point.
 
نــام سـایت تـاریخ امتیاز
mehrdad 1390/05/18 3
نظر
 
نــام سـایت تـاریخ امتیاز
ایمان 1390/01/17 5
نظر خیلی عالی بود. امیدوارم موفق باشی...
 
نــام سـایت تـاریخ امتیاز
پورمیرزایی 1389/11/22 5
نظر به نام خدا سلام سعید جان ممنون از ابراز محبت شما 1- در مورد سوالت این بستگی به سیاست امنیتی (Security polocy) می شه که طراح و پیاده ساز یک سایت روی آن اعمال میکه. الان زبانهای ASP.NET و PHP هرکدام دارای قوانینی هستند که با تغییر آنها می شه تعداد دفعات سعی کاربر برای ورود را محدود کرد مثلا در ASP.NET یک راه دیگه استفاده از تکنولوژی ایجاد تصاویر امنیتی هست که برای مطمئن شدن از آن است که حتماً کسی که دار سعی برای ورود به سایت می که یک انسان است ! نه یک ربات که بخواد سرور را down کنه . به این تکنولوژی میگن captcha الان اکثر سایتهای بزرگ مثل yahoo و گوگل از این روش استفاده کردن اطلاعات بیشتر en.wikipedia.org/wiki/CAPTCHA
 
نــام سـایت تـاریخ امتیاز
saeid 1389/11/20 1
نظر agar user e admin e sitet admin bashe va ye nafar 7 or 8 bar ghalat bezane chi mishe?
 
نــام سـایت تـاریخ امتیاز
saeid 1389/11/20 1
نظر kheili kheili mofid bood makhsoosan bakhshe moghadame ke tozihate kafi o vafi dasht
 
نــام سـایت تـاریخ امتیاز
امیرحسین 1389/11/14 5
نظر طراحی وب سایت را کجا می توان خوب فرا گرفت؟
 
نــام سـایت تـاریخ امتیاز
صفرپور 1389/10/13 5
نظر سلام عالی است.تکامل سایت روهم تبریک میگم همیشه موفق باشید.
 
نــام سـایت تـاریخ امتیاز
علی رضا 1389/09/15 5
نظر با تشکر از آموزش طراحی وب
 
نــام سـایت تـاریخ امتیاز
قرنلی 1389/09/06 5
نظر دستتون درد نکنه.با اینکه فعلا برنامه نویسی رو کنار گذاشتم صفحه رو مالعه کردم.خوشحالم که می بینم ادامه دادید
 
نــام سـایت تـاریخ امتیاز
amin 1389/08/30 5
نظر salam besyar aali bud ba arezuye movafaghiyat