آنچه خواهید آموخت
Index
1- HTML & CSS – Dreamweaver
2- ـJ.Query – JavaScript
3- PHP
4- Template Design – Photoshop
5- Result
طراحی صفحات وب با استفاده از HTML
HTML مخفف "Hypertext Markup Language" است. زبانی است که از آن برای نوشتن صفحات وب ایستا (استاتیک) استفاده می شود. این زبان برای مشخص کردن عناصر مختلف صفحه از یک سری تگ (برچسب) استفاده می شود. برای مثال برای اینکه یک تصویر را وارد صفحه کنیم از برچسب <img> استفاده می کنیم و برای مشخص کردن یک پاراگراف متن مورد نظر خود را بین تگ <p> و <p/> قرار می دهیم. بدین وسیله مرورگر اینترنت می تواند عناصر مختلف صفحه را شناسایی کند و آنها را نمایش دهد. مرورگرهای اینترنت کدهای HTML را دریافت می کنند و پس از تفسیر آنها را به صورت یک صفحه وب به نمایش در می آورند.
نوشتن صفحات HTML لزوماً به برنامه خاصی احتیاج ندارد. حتی با استفاده از NotePad در ویندوز هم می توانید صفحات مورد نظر خود را طراحی کنید. صرف نظر از برنامه ای که از آن برای طراحی صفحات خود کمک می گیرید آشنایی شما با HTML می تواند تا حد بسیار زیادی در کیفیت صفحات تأثیر بگذارد. اما مبنای کاری ما نرم افزار Dreamweaver می باشد و شما نیازی به یادگیری تمام کدهای HTML ندارید.
آنچه که قبل از یادگیری HTML لازم است بدانید:
برای شروع کار با HTML شما به چیزهایی نیاز دارید که در لیست زیر آمده است:
1.
شما به یک ویرایشگر متن نیاز دارید.
در ویندوز شما می توانید از برنامه Notepad استفاده کنید. از هر نرم افزار ویرایش
متن دیگری استفاده کنید اما این نکته را در نظر داشته باشید که نرم افزار WordPad که
در ویندوز وجود دارد و نرم افزارهایی مانند Microsoft
Office Word و
امثال آن برای نوشتن کدهای HTML مناسب
نیستند چون در هنگام ذخیره کردن متن این نرم افزارها کدهایی را به آن اضافه می
کنند.
نرم افزار Notepad را می توانید از طریق منوی استارت در
قسمت Accessories پیدا کنید یا از طریق فرمان Run با
تایپ notepad در کادر Open و فشار دادن دکمه Enter.
2.
شما به یک مرورگر وب به انتخاب خود
نیاز دارید. می توانید از Microsoft
Internet Explorer استفاده
کنید که با ویندوز نصب می شود یا از Opera, Mozilla
Firefox و
نرم افزارهای مشابه که اغلب به صورت رایگان برای دانلود در اینترنت وجود دارند.
بهتر است صفحاتی را که می نویسید با
چند مرورگر آزمایش کنید. زیرا در HTML قسمتهایی
وجود دارد که مختص به یک مرورگر خاص است و با سایر مرورگرها کار نمی کند.
3.
شما به جایی برای ذخیره کردن متن خود
دارید که می تواند جایی روی هارد دیسک شما، یک فلاپی دیسک یا یک سرور باشد. البته
شما برای استفاده از HTML
نیاز ندارید حتماً به اینترنت متصل
باشید، شما می توانید با استفاده از یک مرورگر وب در کامپیوتر خود از HTML استفاده کنید.
برای ذخیره کردن فایلی که با Notepad نوشته
اید کافی است از منوی File گزینه Save As را انتخاب کرده و مسیری را برای ذخیره
فایل انتخاب کنید و در کادر File Name در پایین پنجره Save As نام فایل را با پسوند html بنویسید.
در آخر هم دکمه Save را کلیک کنید.
Dreamweaver چیست؟
دریم‌ویور (به انگلیسی: Dreamweaver) (به معنی رویاباف یا خیال‌پرداز) یک نرم‌افزار طراحی وب است که توسط شرکت ادوبی تولید می‌شد. آخرین نسخهٔ این نرم‌افزار تا امروز نسخهٔ CS6 آن است. شرکت ماکرومدیا در سال ۲۰۰۸ توسط شرکت ادوبی خریداری شد، و بر همین اساس، این نرم‌افزار نیز اکنون از تولیدات ادوبی به شمار می‌رود. این نرم‌افزار توانست نرم‌افزار فرانت پیج را که محصول مایکروسافت بود در بازار رقابت شکست دهد و بازار نرم‌افزارهای طراحی وب را بسوی خود متمرکز نماید.
دریم ویور امکان ویرایش صفحات HTML , asp , PHP , aspx , CSS , js , jsp, cf را داراست و ویرایش این صفحات را با شناخت کلمات کلیدی این زبان‌ها در یک ادیتور مجتمع آسان می‌کند. هم اکنون افزونه‌های بسیاری نیز برای این نرم‌افزار نوشته شده‌است که با نصب آنها بر روی دریم ویور، قدرت این نرم‌افزار دو چندان می‌شود. تا نسخهٔ هشت این نرم‌افزار به وسیلهٔ شرکت ماکرومدیا تولید می‌شد و پس از آن به وسیلهٔ شرکت ادوبی خریداری شد.
استفاده از CSS برای قالب بندی عناصر HTML
HTML اصولاً برای مشخص کردن هویت عناصر صفحه به وجود آمد. یعنی برای اینکه مشخص شود کدام بخش صفحه یک پاراگراف است یا کدام قسمت سرفصل است و کدام بخش یک جدول است و... برای این منظور هم از یک سری تگ استاندارد نظیر <p> ، <h1> و <table> استفاده می شد. وظیفه ای که برای HTML در نظر گرفته شده بود فقط همین بود و نحوه نمایش این عناصر بر عهده مرورگرهای وب بود. برای مثال مشخصاتی نظیر فونت متن، رنگ و مشخصاتی از این قبیل را مرورگر انتخاب می کرد و HTML در قالب بندی عناصر صفحه نقشی نداشت.
به تدریج مرورگرهای بزرگ مثل اینترنت اکسپلورر و Netscape از تگهای HTML جدیدی برای قالب بندی و تعیین ظاهر صفحات وب استفاده کردند مانند تگ <font> که برای تعیین فونت متن مورد استفاده قرار می گیرد و شناسه color که رنگ متن را مشخص می کند.
صفحاتی که با HTML 3.2 نوشته شده اند به دلیل استفاده از این تگها برای قالب بندی صفحه به کد نویسی بیشتری احتیاج و در نتیجه صفحه ای که با این روش به وجود می آید مملو از تگهای HTML می شود و در نتیجه حجم صفحات افزایش می یابد و سرعت لود شدن آنها کاهش پیدا می کند. علاوه بر این اصل جدایی محتویات صفحه از قالب آن هم رعایت نمی شود.
استفاده از استایل و شیوه نامه ها (CSS) با HTML 4.0 آغاز شد. از CSS برای قلب بندی عناصر صفحه استفاده می شود. برای مثال با آن می توان برای قسمتهای مختلف در صفحه تصویر زمینه تعیین کرد، فونت آنها را تغییر داد، رنگ متن ها را تغییر داد و بسیاری از قابلیتهای دیگر که قبلاً در HTML وجود نداشت با CSS در دسترس طراحان قرار می گیرد.
CSS یا همان Cascading Style Sheet روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون استفاده از کدهای HTML. از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکرپت نیز استفاده کنیم و چون مشکلات جاوا اسکرپت مثلاً غیر فعال بودن جاوا اسکرپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم.
CSS هم مانند جاوا اسکرپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین خواص بخشهای مختلف صفحه های یک سایت استفاده کنیم. در این صورت می توانیم ظاهر همه صفحه ها را با ایجاد یک تغییر کوچک در فایل استایل خارجی تغییر دهیم. مثلاً فرض کنید که رنگ متن همچنین نوع فونت متن صفحه هایمان را در یک فایل استایل تعیین کرده ایم و از آن در طراحی چندین صفحه استفاده کرده ایم، حالا اگر بخواهیم رنگ متن همه این صفحات را تغییر دهیم تنها کافی است تا رنگ متن را در همان فایل استایل تغییر دهیم و نیازی به تغییر دادن صفحات نداریم.
در این قسمت به معرفی قابلیتهای مختلف CSS خواهیم پرداخت . چون این قسمت در سایت ما به تازگی راه اندازی شده است هنوز کامل نشده و به مرور زمان سعی می کنیم آنرا کاملتر کنیم.
اگر انتقاد یا پیشنهادی برای بهتر شدن این قسمت دارید می توانید از طریق «فرم تماس با ما» ما را مطلع کنیم. ما نیز خوشحال می شویم از نظرات شما در جهت بهبود این بخش استفاده کنیم.
نوشتن صفحات پویای طرف کاربر با جاوا اسکرپت
جاوا اسکرپت گسترده ترین زبان اسکرپت نویسی مورد استفاده در اینترنت است. بسیاری از سایتها از این زبان برای ساختن صفحات پویایی که در کامپیوتر کاربر اجرا می شوند استفاده می کنند. تقریباً همه مرورگرهای مشهور از این زبان پشتیبانی می کنند و اگرچه امکان غیر فعال کردن آن توسط کاربران وجود دارد اما طبق آمار جاوا اسکرپت در مرورگرهای بیش از 90 درصد کاربران اینترنت فعال است.
در حقیقت HTML را نمی توان یک زبان برنامه نویسی دانست ولی جاوا اسکرپت یک زبان برنامه نویسی با ساختاری ساده است که می تواند عناصر HTML را بخواند، بنویسید و یا آنها را تغییر دهد. جاوا اسکرپت توانایی واکنش نشان دادن به رویداد ها را در صفحه HTML دارد. برای مثال می توان کد جاوا اسکرپتی نوشت که در هنگام ارسال یک فرم اجرا شود.
در این زبان ابزارهای برنامه نویسی از قبیل توابع، حلقه ها و ... در اختیار طراح صفحه قرار می گیرد تا با استفاده از آنها رفتار صفحه را مطابق نیاز خود تنظیم کند.
جاوا اسکرپت یک زبان اسکرپت نویسی تحت وب است که برای افزایش پویایی صفحات HTML استفاده می شود. از این زبان می توان برای ارزیابی اعتبار فرمهای HTML قبل از ارسال به سرور، شناسایی مرورگر کاربران، ایجاد انواع منو ها و بسیاری کارهای دیگر استفاده کرد.
نکته : باید توجه داشت که جاوا اسکرپت یک زبان طرف کاربر (Client Side) است توسط کامپیوتر شخصی کاربر تفسیر می شود. کدهای مربوط به جاوا اسکرپت توسط کاربر نهایی قابل مشاهده هستند پس توصیه می شود از آن برای مقاصد مهم نظیر اتصال به دیتابیس استفاده نشود.
می توان کدهای جاوا اسکرپت را به صورت تعبیه شده در صفحات HTML استفاده کرد و یا کدهای جاوا اسکرپت را در یک فایل جداگانه با پسوند js. ذخیره کرد ولی در هر صورت یان فایلها هم باید توسط یک صفحه HTML فراخوانی شده و نتیجه آنها در صفحات HTML نمایان خواهد شد.
بهتر است قبل از شروع به یادگیری جاوا اسکرپت با HTML و CSS آشنایی داشته باشد تا بتوانید به خوبی از قابلیتهای جاوا اسکرپت استفاده کنید. برای یادگیری زبانهای ذکر شده می توانید از پیوندهای زیر استفاده کنید :
برای آزمایش کردن اسکرپتهایی که می نویسید باید از مرورگری استفاده کنید که از جاوا اسکرپت پشتیبانی می کند. قابل ذکر است که تقریباً همه مرورگرهای جدید از جاوا اسکرپت پشتیبانی می کنند از جمله این مرورگرها می توان به اینترنت اکسپلورر (IE) که در ویندوز به صورت پیش فرض نصب می شود، فایر فوکس (Firefox) و اپرا (Opera) اشاره کرد. به خاطر داشته باشید که نسخه های قبل از نسخه 4.0 اینترنت اکسپلورر و Netscape از جاوا اسکرپت پشتیبانی نمی کنند.
