وبلاگ آسیا آی تی » وحید دولتی http://blog.asiait.ir آی تی | معرفی سایت ها | نقد برسی | آموزش | دانلود Sun, 18 Sep 2016 07:04:56 +0000 fa-IR hourly 1 http://asiait.ir/?v=4.1 تنظیم بخش های مختلف در css http://blog.asiait.ir/%d8%aa%d9%86%d8%b8%db%8c%d9%85-%d8%a8%d8%ae%d8%b4-%d9%87%d8%a7%db%8c-%d9%85%d8%ae%d8%aa%d9%84%d9%81-%d8%af%d8%b1-css/ http://blog.asiait.ir/%d8%aa%d9%86%d8%b8%db%8c%d9%85-%d8%a8%d8%ae%d8%b4-%d9%87%d8%a7%db%8c-%d9%85%d8%ae%d8%aa%d9%84%d9%81-%d8%af%d8%b1-css/#comments Thu, 19 Nov 2015 10:30:29 +0000 http://blog.asiait.ir/?p=1305

تنظیم ابعاد در CSS

برای تنظیم ابعاد عناصر در CSS  از چند ویژگی میتوان استفاده کرد که مهمترین و اصلی ترین آنها Width و Height میباشد.

در ذیل به توضیح این ویژگی ها با توجه به ورژن تعریف شده در CSS میپردازیم.

height :  این ویژگی در تمام مرورگر ها پشتیبانی میشود.

 p.ex

{
height:100px;

}

با دو ویژگی max-height و max-width شما میتوانید حداکثر مقدار را برای یک عنصر تنظیم کنید.

max-height :  این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

 p

{
max-height:50px;
}

max-width : این ویژگی در تمام مرورگر ها پشتیبانی میشود. به استثتا IE6 و ورژن های پایین تر

 p

{
max-width:100px;
}

Background

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

انواع مختلفی از این ویژگی وجود دارد که به شرح هر یک از آنها میپردازیم

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

Font Family

در این بخش از آموزش css ، تنظیم قلم و فونت را آموزش میدهیم.

در css دو نوع از خانواده فونت ها وجود دارد.

  • “generic family” مثل  “Serif” یا “Monospace”
  • “font family” مثل “Times New Roman” یا “Arial”

با ویژگی font-family شما میتوانید نوع قلم مورد نظر را برای متن تنظیم کنید،چنانچه میخواهید از یک فونت خاص استفاده کنید ، نوع فونت مورد نظر خود را اول بنویسید ، چون ممکن است این فونت در کامپیوتر های دیگر موجود نباشد و باعث بهم ریختگی نظم خطوط شود میتوانید نام چند فونت دیگر را نیز وارد کنید.

Font Style
با این ویژگی شما نوع نمایش متن را مشخص میکنید.این ویژگی دارای دو مقدار زیر میباشد :

  1.  normal   :متن به صورت معمولی نمایش داده میشود
  2.  italic   : متن به صورات ایتالیک نمایش داده میشود
  3.  oblique  :  متن به صورت مورب نمایش داده میشود

Font Size
این ویژگی سایز متن را مشخص میکند. اندازه متن در طراحی وب سایت بسیار حائز اهمیت است. ویژگی font-size را میتوانید به صورت مطلق یا نسبی مقداردهی کنید . اگرچه در زوم و رزولیشن های مختلف این مقدار تغییر میکند.ولی این تغییر اندازه برای کل صفحه میباشد وشامل یک بخش نیست. سایز پیش فرض برای یک متنن نرمال 16px تعریف میشود.
برای متن هایی که در بالای صفحه (header) نمایش داده میشوند از تگ های <h1> – <h6> و تگ <p> برای پاراگراف های خود استفاده کنید، در مورد این تگ ها در قسمت آموزش HTML میتوانید بیشتر اطلاعات کسب کنید

لیست UL و LI در سی اس اسدر این بخش از آموزش css ، تنظیم لیست ها را آموزش میدهیم.ویژگی هایی که برای یک لیست در css وجود دارد به ما این امکان را میدهد که  List را در 3 حالت زیر نمایش دهیم.

  • تنظیم لیست یه صورت مرتب
  • تنظیم لیست به صورت نامرتب
  • تنظیم تصویر برای نشانگر لیست

در HTML  دو نوع ار انواع لیست وجود دارد

  • unordered lists     آیتم های لیست با یک نشانگرد گرد شکل مشکی ، نمایش داده میشوند
  • ordered lists     آیتم های لیست با اعداد یا حروف ، نشانه گذاری میشوند.

Css  این انعطاف پپذیری را به شما میدهد که نشانگر آیتم های لیست خود را به یک تصویر مدل دهید،که برای زیبایی طراحی سایت شما موثر میباشد.

]]> http://blog.asiait.ir/%d8%aa%d9%86%d8%b8%db%8c%d9%85-%d8%a8%d8%ae%d8%b4-%d9%87%d8%a7%db%8c-%d9%85%d8%ae%d8%aa%d9%84%d9%81-%d8%af%d8%b1-css/feed/ 0 مزایای Css http://blog.asiait.ir/%d9%85%d8%b2%d8%a7%db%8c%d8%a7%db%8c-css/ http://blog.asiait.ir/%d9%85%d8%b2%d8%a7%db%8c%d8%a7%db%8c-css/#comments Thu, 19 Nov 2015 09:47:28 +0000 http://blog.asiait.ir/?p=1300 مزایای Css

با اینکه در سال‌های نخست پیدایش طراحی وب، طراح‌ها از جدول‌ها و ترفند پنهان سازی آنها برای چیدمان کمک می‌گرفتند، روش مدرن طراحی وب، این روند را منسوخ کرده است. چیدمان اکنون، تنها با دیواره (یا DIV)، که برتری‌های فراوانی نسبت به جدول‌ها (یا TABLE) دارند، انجام می‌شود. هر دیواره، یک موزاییک مجازی بخش کننده صفحه‌است که کار چیدمان را آسان‌تر انجام می‌دهد. جدول‌ها به جایگاه نمایش داده‌های ستونی خود بازگشتند و دیگر از آنها برای چیدن داده‌های صفحه‌های وب استفاده نمی‌شود. الگوهای آبشاری، افزون بر سبک تر کردن هر صفحه وب و پاک‌تر کردن آن، از داده‌های تصویری و نمایشی استاندارد، روش طراحی وب را به میزان فراوانی آسان تر و دسترسایی و کارایی وب را بهتر کرده‌اند.

به کمک CSS میتونیم از دوباره نویسی كدهای HTML که باعث مشکل شدن کدنویسی و همچنین كند شدن سرعت بارگذاری صفحه در اینترنت میشه جلوگیری كنیم.

برای مثال می تونیم یك بار نوع فونت مورد استفاده در یك صفحه را تعیین كنیم و دیگر مجبور نباشیم كد مربوط به فونت را در صفحه به كارببریم.
در واقع بطور کلی میشه گفت CSS این امکان رو ایجاد میکنه تا طراح بتونه چندین مشخصه توی طراحی صفحه رو به یکباره تعیین کنه و همچنین میشه گفت برای کنترل دقیق مشخصات صفحه و استاندارد کردن تگ های غیراستاندارد HTML و طراحی Layout صفحه میتونیم CSS رو بکار ببریم.

مزایای CSS بصورت خلاصه : (در مورد هرکدوم از این مزایا میشه مفصل صحبت کرد و مفهوم اونا رو در عمل باید دید)

  • CSS در وقت صرفه جویی میکنه (همونطور که گفتم با تعیین یکباره مشخصات)
  • تغیییرات مجدد تگ های HTML بسیار راحت میشه.
  • طراحی صفحه بدون نیاز به تگ های قالب بندی HTML
  • طراحی صفحات دینامیک به کمک javascript
  • و …
  1. از کاراکترهای خاص استفاده نکنید.کاراکترهای مجاز عبارتند از :حروف a-z ، اعداد 0-9 ، خط زیر (_) ، خط فاصله (-)
  2. از کاراکتر فضای خالی استفاده نکنید ( ) مثلا : style Master.css  ، این نامگذاری میتواند در وب سرور شما مشکل ایجاد کند.
  3. نام فایل بایستی با یک حرف شروع شود.
  4. برای نام گذاری فایل از حروف کوچک استفاده کنید.
  5. نام فایل را تا آنجا که ممکن است کوتاه تعریف نمایید.
  6. فراموش نکنید که حتما فایل را با پسوند css ذخیره کنید.

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

CSS خارجییکی از روشهای تعریف css استفاده از روش External Style Sheet میباشد.برای داشتن طراحی سایت بهینه پیشنهاد میشود که از این روش استفاده کنید.

از CSS خارجی زمانی استفاده میشود که آن style در بیشتر صفحات استفاده شده باشد.
با استفاده از CSS خارجی ، شما با تغییر دادن تنهایک فایل میتوانید ظاهر سایت خود را تغییر دهید.هر صفحه بایستی به CSS Style مورد نظر خود لینک داده شود. بهترین روش برای گذاشتن CSS Style در صفحات وب ، CSS خارجی میباشد
با استفاده از تگ <link> در داخل بخش head شما میتوانید یک CSS خارجی تعریف کنید.
مثال :

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>

]]> http://blog.asiait.ir/%d9%85%d8%b2%d8%a7%db%8c%d8%a7%db%8c-css/feed/ 0 نکات پایه ای – اطلاعات مفید در html http://blog.asiait.ir/%d9%86%da%a9%d8%a7%d8%aa-%d9%be%d8%a7%db%8c%d9%87-%d8%a7%db%8c-%d8%a7%d8%b7%d9%84%d8%a7%d8%b9%d8%a7%d8%aa-%d9%85%d9%81%db%8c%d8%af-%d8%af%d8%b1-html/ http://blog.asiait.ir/%d9%86%da%a9%d8%a7%d8%aa-%d9%be%d8%a7%db%8c%d9%87-%d8%a7%db%8c-%d8%a7%d8%b7%d9%84%d8%a7%d8%b9%d8%a7%d8%aa-%d9%85%d9%81%db%8c%d8%af-%d8%af%d8%b1-html/#comments Thu, 19 Nov 2015 08:17:06 +0000 http://blog.asiait.ir/?p=1295 نکات پایه ای – اطلاعات مفید

هنگامی که شما یک متن HTML می نویسید هرگز نمی توانید مطمئن باشید این متن  در یک مرورگر دیگر چطور نشان داده می شود.تعدادی از مردم صفحه نمایش بزرگ کامپیوتر دارند و تعدادی کوچک. هر بار که کاربر اندازه پنجره را تغییر دهد متن دوباره قالب بندی خواهد شد. هرگز سعی نکنید که با اضافه کردن خطوط خالی و فاصله در متن آن را در ویرایشگرتان قالب بندی کنید.
HTML فاصله ها را از متن حذف می کند، هر تعدادی از فاصله ها تنها  به یک فاصله  تبدیل می شوند.

نکات پایه ای – اطلاعات مفید

همیشه یک علامت “/” به منابع زیر پوشه ها اضافه کنید. اگر شما پیوندی مثل این درست کنید

href=”http://www.html.ir/links.html”

شما دو تقاضا برای سرور درست کرده اید ، چون سرور یک علامت “/” به انتهای آدرس اضافه کرده و یک تقاضای جدید درست می کند. مثل این:

href=”http://www.html.ir/links.html/”

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

نکات پایه ای-اطلاعات مفید

اگر یک قاب حاشیه پدیدار داشته باشد کاربر می تواند با کشیدن حاشیه آن ، اندازه آن را تغییر دهد. برای جلوگیری از این عمل کاربر ، شما می توانید “noresize=”noresize را به برچسب <frame> اضافه کنید. اگر برچسب <noframes> را اضافه کنیم ، مرورگر قاب را پشتیبانی نمی کند.
مهم:شما نمی توانید برچسب های <body> </body> و <frame> </frame> را با هم استفاده کنید. هر چند اگر شما برچسب <noframes> را در مرورگر هایی که قابها را پشتیبانی نمی کنند و حاوی مقداری متن نیز باشد اضافه کنید شما باید متن را بین برچسب های <body> </body> قرار دهید.

نکته های پایه ای-اطلاعات مفید

عناصر <thead>، <tbody>و <tfoot>به دلیل پشتیبانی بد مرورگر ها به ندرت مورد استفاده قرار می گیرند. انتظار می رود که در نسخه های بعدی XHTML این روند تغییر کند.

نکات پایه ای – اطلاعات مفید

اگر یک فایل HTML حاوی 10 تصویر باشد ، برای نمایش کامل صفحه به 11 فایل احتیاج است. بارگیری تصاویر وقت گیر است ، بنابر این بهترین توصیه من اینست که از تصاویر به دقت استفاده کنید.

نکات پایه ای-اطلاعات مفید

bg color, background و موجودیت های متن در برچسب <body> در آخرین نسخه HTML بد دانسته شده است. کنسرسیوم شبکه گسترده جهانی(w3c) این موجودیت ها را از نظریه های خود حذف کرده.
به جای آن از CSS باید استفاده کرد(برای معرفی طرح بندی و نمایش خواص عناصر).

]]> http://blog.asiait.ir/%d9%86%da%a9%d8%a7%d8%aa-%d9%be%d8%a7%db%8c%d9%87-%d8%a7%db%8c-%d8%a7%d8%b7%d9%84%d8%a7%d8%b9%d8%a7%d8%aa-%d9%85%d9%81%db%8c%d8%af-%d8%af%d8%b1-html/feed/ 0 یک فایل HTML چیست؟ http://blog.asiait.ir/%db%8c%da%a9-%d9%81%d8%a7%db%8c%d9%84-html-%da%86%db%8c%d8%b3%d8%aa%d8%9f/ http://blog.asiait.ir/%db%8c%da%a9-%d9%81%d8%a7%db%8c%d9%84-html-%da%86%db%8c%d8%b3%d8%aa%d8%9f/#comments Thu, 19 Nov 2015 07:53:34 +0000 http://blog.asiait.ir/?p=1289 یک فایل HTML چیست؟
  • HTML مخفف زبان نشانه گذاری فرا متنی است (hyper text markup language).
  • یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست
  • بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد
  • یک فایل HTML باید دارای پسوند htm. یا html. باشد
  • یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود

پسوند htm. یا html. ?

هنگامی که شما یک فایل HTML را ذخیره می کنید شما می توانید هرکدام از پسوندهای htm. یا html. را انتخاب کنید.ما در مثال هایمان از پسوند htm. استفاده می کنیم. این ممکن است یک رفتار بد موروثی از گذشته باشد که بیشتر نرم افزارهایی که استفاده می شوند فقط پسوند سه حرفی را قبول می کنند.با نرم افزار جدیدتر ما فکر می کنیم که اگر از پسوند html. استفاده کنیم بسیار ایمن تر خواهیم بود.

برچسب های HTML

  • برچسب های HTML برای نشانه گذاری عناصر HTML استفاده می شوند
  • بر چسب های HTML توسط دو کاراکتر < و > محاط می شوند
  • این کاراکتر های محاط کننده قلاب نامیده می شوند
  • بر چسب های HTML معمولا بصورت جفت می آیند <b> , <b/>
  • اولین برچسب دوتایی برچسب شروع و دومی برچسب پایانی است
  • متن های بین برچسب ابتدایی و انتهایی محتوای عناصر هستند
  • برچسبهای HTML به حروف کوچک و بزرگ حساس نیستند <b> معادل <B>
]]> http://blog.asiait.ir/%db%8c%da%a9-%d9%81%d8%a7%db%8c%d9%84-html-%da%86%db%8c%d8%b3%d8%aa%d8%9f/feed/ 0