مرجع طراحی سایت حرفه ای

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

/* فولدر style.css */
body {
background-color: #f4f4f4; /* تنظیم رنگ پس‌زمینه صفحه */
font-family: Arial, sans-serif; /* تنظیم فونت پیش‌فرض متن‌ها */
}

h1 {
color: #2c3e50; /* تغییر رنگ متن عنوان به سرمه‌ای */
text-align: center; /* تراز کردن عنوان به صورت وسط‌چین */
}

p {
color: #34495e; /* رنگ متن پاراگراف به خاکستری تیره */
line-height: 1.6; /* فاصله خطی کمی بزرگ‌تر برای خوانایی بهتر متن */
}
کدهای بالا بدنه شیت را خاکستری پر‌نور کرده، فونت متون را به یک فونت معمولی و خوانا تغییر و تحول میدهد. همینطور رنگ و دکورا سیون متن‌های تیتر و جمله را تهیه نموده است. اکنون برای جاری ساختن این استایل‌ها بر روی کاغذ HTML خویش، می بایست پوشه CSS را به کاغذ پیوند (متصل) نمایید. این شغل با اضافه کردن یک خط در نصیب فولدر HTML شکل میگیرد:

فرض کرده‌ایم که فولدر CSS شما درون فولدر‌ای به اسم css جای‌دارد. در غیر این شکل در صورتی‌که style.css در به عبارتی شاخه اساسی کنار فولدر HTML باشد، می توانید مسیر را به طور href="style.css" بنویسید. تگ به مرورگر اعلام می‌نماید که یک طریق‌طومار‌ی CSS فرنگی را بار گذاری کرده و روی این کاغذ جاری ساختن نماید.

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

مرحله ۵: برخورد‌گرا کردن پیاده سازی برای تلفن همراه و تبلت
امروزه قسمت متعددی از یوزرها وب از روش گوشی یا این که تبلت اینترنت‌وب سایت‌ها را مشاهده می‌نمایند، براین اساس برخورد‌گرا (Responsive) بودن طراحی وب یک لزوم میباشد. عکس العمل‌گرا بودن به‌این مفهوم میباشد که صفحه های اینترنت در اندازه‌های متفاوت کاغذ‌اکران (از گوشی‌های خرد گرفته تا مانیتورهای تعالی) ظواهر و دکوراسیون مطلوب و خوانایی داشته باشند.

برای ساخت صفحه ها برخورد‌گرا، می‌اقتدار از تکنیک‌های CSS مانند Media Query (مدیا کوئری) بهره مند شد. مدیا کوئری به شما قابلیت میدهد استایل‌های CSS را متعلق به اندازه برگه یا این که دستگاه تهیه نمائید. از جمله، می توانید گزینش فرمایید که در‌صورتی‌که پهنا ورقه کمتر از 600 پیکسل بود (یعنی در یک دستگاه تلفن همراه)، بعضا المان‌ها به صورت متفاوتی اکران یابند (برای مثالً منوی چندستونه به صورت منوی آبشاری درآید یا این که سایز فونت‌ها کوچکتر گردد).

مثال‌ای معمولی از مدیا کوئری در CSS:

@media (max-width: 600px) {
body {
font-size: 90%;
}
nav ul {
display: block;
}
/* بقیه استایل‌های منحصر به فرد اکران در گوشی */
}
کد فوق بررسی می‌نماید در شرایطی‌که پهنا ورقه حداکثر 600px بود، اندازه فونت متن‌های کاغذ کمی کوچکتر خواهد شد و برای مثالً فهرست منو (nav ul) به طور بلوکی (پایین هم) اکران داده گردد. شما می توانید یک سری مدیا کوئری برای اندازه‌های متفاوت (مانند تبلت‌ها، دسکتاپ‌های تبارک و غیره) تعریف‌و‌تمجید نمائید تا مطمئن گردید تارنما شما در کلیه حالات به خیر چشم می شود.

ضمن مدیا کوئری، به کار گیری از واحدهای اندازه‌گیری نسبی (مثل درصد یا این که واحد vw/vh به مکان پیکسل اثبات) نیز به برخورد‌گرایی پیاده سازی یاری می‌نماید. همینطور می توانید از چارچوب‌های عکس العمل‌گرای مهیا مانند Bootstrap به کار گیری فرمائید که بخش اعظمی از بحران‌های پیاده سازی Responsive را پیشتر حل کرده‌اند. در هر شکل، فراموش نکنید که بعداز اتمام پیاده سازی، وب سایت خویش را در دستگاه‌ها و اندازه‌های متعدد تست فرمائید تا از همت درست آن در کلیه حالات اعتقاد و باور نتیجه ها فرمائید.

مرحله ۶: اضافه کردن تعامل و پویایی با JavaScript
تا اینجا اینترنت‌تارنما شما از دید ساختار و ظواهر مبنا صورت گرفته میباشد. ولی برای اضافه کردن تعاملات کاربری و ساخت‌و‌ساز پویایی در صفحه ها، میتوانید از JavaScript منفعت ببرید. جاوااسکریپت قابلیت و امکان اعمال شغل های متنوعی را در شیت میدهد؛ از جمله:

اعتبارسنجی هیبت‌ها (اعتقاد از اینکه مخاطب کل فیلدهای ما یحتاج را لبریز کرده و پوسته داده‌ها درست میباشد)
ساخت آلبوم تصاویر یا این که اسلایدر که به طور اتوماتیک یا این که با کلیک استفاده کننده عکس‌ها را جابجا می‌نماید
پیاده سازی منوهای کشویی، مودال‌ها (پنجره‌های شناور)، تب‌ها و بقیه المان‌های تعاملی
بهبود تجارب کاربری با عکس العمل علامت دادن به کلیک‌ها، جنبش موشواره، اسکرول برگه و بقیه حادثه ها
برای افزودن JavaScript به برگه خویش، در‌حالتی که فولدر JS غیروابسته‌ای (به عنوان مثالً app.js) ساخته‌اید، می بایست آن را با به کار گیری از تگ

(قرار به دست آوردن این خط پیش از مسدود شدن تگ body سبب ساز می شود آغاز کل موادسازنده ورقه بارگذاری شوند و آنگاه اسکریپت‌ها ایفا شوند که طریق با صرفه‌تری میباشد.)

باطن پوشه app.js میتوانید با استعمال از JavaScript نپخته یا این که کتابخانه‌هایی مثل jQuery کدهای متبوع خویش را بنویسید. یک نمونه بسیار بی آلایش در JavaScript نپخته:

// اکران یک پیام معمولی بعداز بار گذاری ورقه
window.onload = function() {
alert("صفحه با موفقیت بارگذاری شد!");
};

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

/* فولدر style.css */
body {
background-color: #f4f4f4; /* تنظیم رنگ پس‌زمینه صفحه */
font-family: Arial, sans-serif; /* تنظیم فونت پیش‌فرض متن‌ها */
}

h1 {
color: #2c3e50; /* تغییر رنگ متن عنوان به سرمه‌ای */
text-align: center; /* تراز کردن عنوان به صورت وسط‌چین */
}

p {
color: #34495e; /* رنگ متن پاراگراف به خاکستری تیره */
line-height: 1.6; /* فاصله خطی کمی بزرگ‌تر برای خوانایی بهتر متن */
}
کدهای بالا بدنه شیت را خاکستری پر‌نور کرده، فونت متون را به یک فونت معمولی و خوانا تغییر و تحول میدهد. همینطور رنگ و دکورا سیون متن‌های تیتر و جمله را تهیه نموده است. اکنون برای جاری ساختن این استایل‌ها بر روی کاغذ HTML خویش، می بایست پوشه CSS را به کاغذ پیوند (متصل) نمایید. این شغل با اضافه کردن یک خط در نصیب فولدر HTML شکل میگیرد:

فرض کرده‌ایم که فولدر CSS شما درون فولدر‌ای به اسم css جای‌دارد. در غیر این شکل در صورتی‌که style.css در به عبارتی شاخه اساسی کنار فولدر HTML باشد، می توانید مسیر را به طور href="style.css" بنویسید. تگ به مرورگر اعلام می‌نماید که یک طریق‌طومار‌ی CSS فرنگی را بار گذاری کرده و روی این کاغذ جاری ساختن نماید.

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

مرحله ۵: برخورد‌گرا کردن پیاده سازی برای تلفن همراه و تبلت
امروزه قسمت متعددی از یوزرها وب از روش گوشی یا این که تبلت اینترنت‌وب سایت‌ها را مشاهده می‌نمایند، براین اساس برخورد‌گرا (Responsive) بودن طراحی وب یک لزوم میباشد. عکس العمل‌گرا بودن به‌این مفهوم میباشد که صفحه های اینترنت در اندازه‌های متفاوت کاغذ‌اکران (از گوشی‌های خرد گرفته تا مانیتورهای تعالی) ظواهر و دکوراسیون مطلوب و خوانایی داشته باشند.

برای ساخت صفحه ها برخورد‌گرا، می‌اقتدار از تکنیک‌های CSS مانند Media Query (مدیا کوئری) بهره مند شد. مدیا کوئری به شما قابلیت میدهد استایل‌های CSS را متعلق به اندازه برگه یا این که دستگاه تهیه نمائید. از جمله، می توانید گزینش فرمایید که در‌صورتی‌که پهنا ورقه کمتر از 600 پیکسل بود (یعنی در یک دستگاه تلفن همراه)، بعضا المان‌ها به صورت متفاوتی اکران یابند (برای مثالً منوی چندستونه به صورت منوی آبشاری درآید یا این که سایز فونت‌ها کوچکتر گردد).

مثال‌ای معمولی از مدیا کوئری در CSS:

@media (max-width: 600px) {
body {
font-size: 90%;
}
nav ul {
display: block;
}
/* بقیه استایل‌های منحصر به فرد اکران در گوشی */
}
کد فوق بررسی می‌نماید در شرایطی‌که پهنا ورقه حداکثر 600px بود، اندازه فونت متن‌های کاغذ کمی کوچکتر خواهد شد و برای مثالً فهرست منو (nav ul) به طور بلوکی (پایین هم) اکران داده گردد. شما می توانید یک سری مدیا کوئری برای اندازه‌های متفاوت (مانند تبلت‌ها، دسکتاپ‌های تبارک و غیره) تعریف‌و‌تمجید نمائید تا مطمئن گردید تارنما شما در کلیه حالات به خیر چشم می شود.

ضمن مدیا کوئری، به کار گیری از واحدهای اندازه‌گیری نسبی (مثل درصد یا این که واحد vw/vh به مکان پیکسل اثبات) نیز به برخورد‌گرایی پیاده سازی یاری می‌نماید. همینطور می توانید از چارچوب‌های عکس العمل‌گرای مهیا مانند Bootstrap به کار گیری فرمائید که بخش اعظمی از بحران‌های پیاده سازی Responsive را پیشتر حل کرده‌اند. در هر شکل، فراموش نکنید که بعداز اتمام پیاده سازی، وب سایت خویش را در دستگاه‌ها و اندازه‌های متعدد تست فرمائید تا از همت درست آن در کلیه حالات اعتقاد و باور نتیجه ها فرمائید.

مرحله ۶: اضافه کردن تعامل و پویایی با JavaScript
تا اینجا اینترنت‌تارنما شما از دید ساختار و ظواهر مبنا صورت گرفته میباشد. ولی برای اضافه کردن تعاملات کاربری و ساخت‌و‌ساز پویایی در صفحه ها، میتوانید از JavaScript منفعت ببرید. جاوااسکریپت قابلیت و امکان اعمال شغل های متنوعی را در شیت میدهد؛ از جمله:

اعتبارسنجی هیبت‌ها (اعتقاد از اینکه مخاطب کل فیلدهای ما یحتاج را لبریز کرده و پوسته داده‌ها درست میباشد)
ساخت آلبوم تصاویر یا این که اسلایدر که به طور اتوماتیک یا این که با کلیک استفاده کننده عکس‌ها را جابجا می‌نماید
پیاده سازی منوهای کشویی، مودال‌ها (پنجره‌های شناور)، تب‌ها و بقیه المان‌های تعاملی
بهبود تجارب کاربری با عکس العمل علامت دادن به کلیک‌ها، جنبش موشواره، اسکرول برگه و بقیه حادثه ها
برای افزودن JavaScript به برگه خویش، در‌حالتی که فولدر JS غیروابسته‌ای (به عنوان مثالً app.js) ساخته‌اید، می بایست آن را با به کار گیری از تگ

(قرار به دست آوردن این خط پیش از مسدود شدن تگ body سبب ساز می شود آغاز کل موادسازنده ورقه بارگذاری شوند و آنگاه اسکریپت‌ها ایفا شوند که طریق با صرفه‌تری میباشد.)

باطن پوشه app.js میتوانید با استعمال از JavaScript نپخته یا این که کتابخانه‌هایی مثل jQuery کدهای متبوع خویش را بنویسید. یک نمونه بسیار بی آلایش در JavaScript نپخته:

// اکران یک پیام معمولی بعداز بار گذاری ورقه
window.onload = function() {
alert("صفحه با موفقیت بارگذاری شد!");
};