طراحی وب سایت حرفه ای

طراحی قالب psd به صورت حرفه ای با بهره گیری از امکانات ویژه فوتوشاپ

سلام دوستان اکر دوست دارید یه فروشگاه مثل mohajer.takmc.com داشته باشید کلیک کنید ولذت ببرید.کسب در آمد از سایت یا وبلاگ | takmc.com

 

 

 

HTML چیست ؟

عبارت HTML ( اچ تی ام ال ) مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است. Html زبان استاندارد طراحی صفحات وب است و کليه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهايت به کدهای HTML تبديل شده و توسط مرورگر نمايش داده می شوند.

به عبارت دیگر مرورگر ها هیچکدام از کدها و کنترل های سمت سرور همچون کدهای asp و php را نمیشناسند و کد قابل فهم برای آنها اچ تی ام ال می باشد.

کامپایلر های زبان های برنامه نویسی سروری در نهایت کد های خود را برای نمایش به کد اچ تی ام ال تبدیل میکنند و برای مرورگر میفرستند تا به کاربران نمایش داده شود.

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

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

 هر یک از کدهای html ، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند. مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند.

Html چیست ؟ آموزش جامع html

یک سند اچ‌تی‌ام‌ال، یک پروندهٔ مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آن‌ها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند.

اچ‌تی‌ام‌ال زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساخت‌مند کردن اطلاعات و جدایش اجزای منطقی یک نوشتار — نظیر عناوین ، تصاویر ، فهرست‌ها ، بندها و جداول — به کار می‌رود. از سوی دیگر، اچ تی ام ال را نباید به عنوان زبانی برای صفحه‌آرایی یا نقاشی صفحات وب به کار بُرد؛ این وظیفه اکنون بر دوش فناوری‌های دیگری همچون سی اس اس ( Css ) است که در بخش آموزش Css به طور کامل به آن خواهیم پرداخت.

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

موزش سی اس اس در کنار آموزش html گام اول برای آموزش طراحی وب سایت می باشند.

آموزش Css (آموزش سی اس اس) اصلی ترین بخش برای زیبا کردن سایت است.

سی اس اس

تقریباً همه کسانی که صاحب تجارتخانه های کوچک و بزرگ می باشندبایستی دارای طراحی وب سایت باشند.دانش عمومی طراحی وب سایت با یادگیری پایه ای HTML و CSS باعث می شود  وب سایت خود را با آخرین تکنولوژیهای طراحی وب سایت بسازید.

Css (سی اس اس) به عبارت ساده برای زیبایی صفحات وب در طراحی سایت می باشد.

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

آموزش cssنکته ی مهم اینکه بدون استفاده از سی اس اس نیز میتوان صفحات وب را قالب دهی نمود (توسط جدول ها)، ولی سی اس اس مزایایی دارد که این روش را منسوخ کرده است. 

از مهمترین مزایای Css میتوان به انعطاف پذیری بالای css ، کاهش استفاده از پهنای باند شبکه، کم حجم کردن فایل html ، هماهنگی راحت تر نمایش ظاهر سایت در مرورگر های مختلف و ... می باشد.

تمرین زیاد و آموزش کامل سی اس اس، شما را می تواند در استفاده از دستورات Css حرفه ای کند. کدهای سی اس اس بصورت متنی می باشند و تنها نرم افزار مورد نیاز برای آن NotePad ویندوز می باشد. css مخفف Cascading Style Sheets به معنی الگو های آبشاری می باشد. پس از یادگیری این زبان میتوانید مفهوم این عبارت را متوجه شوید.

با استفاده از CSS میتوان تگ های html را به راحتی به استایل های مختلف در آورد. رنگ بندی و تعیین پس زمینه ، تعیین مکان و عرض و طول ، فرمت دهی font و ... همگی کارهایی است که با آموزش Css می توان به راحتی آنها را برای صفحات وب سایت هایمان انجام دهیم.

امیدواریم بخش آموزش سی اس اس برای شما مفید باشد.

مقدمات آموزش CSS

 

قویترین ویرایشگر های HTML و انتخاب بهترین ویرایشگر: 

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

اما طراحان حرفه ای ، با این برنامه رابطه خوبی ندارند . علت این امر اینه که مدیریت جدول هایی که در یک صفحه کشیدین خیلی مشکل است . دیگر اینکه فرانت‌پیج با
CSS رابطه خوبی نداره و مدیریت CSS های ساخته شده در صفحات بسیار مشکل است. همچنین فرانت پیج کد های اضافی بسیاری رو در داخل html شما می گنجاند که باعث سنگین شدن و ناخوانا شدن کدها و صفحات طراحی شده میشه.
جهت فارسی نویسی در فرانت پیج کافیه علامت
Right-to-Left رو از بالای تولبار انتخاب کنید و شروع کنید به فارسی نوشتن.
 

DreamWeaver (یا رویاباف) در حال حاضر پیشرفته ترین محیط طراحی Layout صفحات وب است. این برنامه که محصول شرکت ادوبی است پیشرفته ترین ابزار های مدیریت CSS در صفحات را داراست. همچنین تگ های زبان های اسکریپتی ASP و PHP و JSP وASP.NET را شناخته و امکان insert کردن آنها را در برنامه براحتی امکان پذیر کرده است.
جهت فارسی نویسی در دریم ویور باید خاصیت
Dir=rtl را به تگ دربرگیرنده متن فارسی اضافه کنید و Encoding صفحه را هم به UTF-8 تنظیم کنید.

و اما   Expression Webمایکروسافت که شکست فرانت پیج را در برابر دریم ویور پذیرفته است ، دست به کار طراحی برنامه جدیدی برای طراحان وب زده است با امکاناتی که برای هر طراح و برنامه نویسی جذاب است. محیط کار برنامه بسیار شبیه ویژوال استودیو است . امکان مدیریت CSS های صفحات ، بسیار شبیه دریم ویور است و طبق گفته مایکروسافت تعامل زیادی با بسته نرم افزاری ویژوال استودیو دارد. برای نصب این برنامه نیاز به دات نت فریم ورک دارید.  برای فارسی نویسی در این محیط نیز کافی است مانند ویژوال استودیو عمل کنید و یا خواص html صفحه را مطابق Dir=rtl قرار دهید .