برای شروع طراحی سایت، لازم نیست هم زمان چند زبان و ابزار یاد بگیرید. ابتدا مشخص کنید می خواهید با وردپرس یک سایت محتوایی بسازید یا با کدنویسی، رفتار و امکانات سایت را خودتان پیاده سازی کنید. این نقشه راه طراحی سایت، مسیر کدنویسی را از اولین صفحه تا انتشار یک پروژه نشان می دهد و در مرحلهٔ انتخاب تخصص، مسیر وردپرس را هم جدا می کند.
پیشنهاد تمرین این راهنما یک «سایت معرفی خدمات» است: معرفی، فهرست خدمات، نمونه کار و راه ارتباطی. پروژه را کوچک نگه دارید و در هر مرحله یک قابلیت قابل آزمایش به آن اضافه کنید.
نقشه راه طراحی سایت در هفت مرحله
- شناخت وب و ابزارهاخروجی: یک پوشهٔ مرتب و صفحه ای که در مرورگر باز می شود.
- ساختار صفحه با HTMLخروجی: معرفی، خدمات، نمونه کار و لینک تماس.
- طراحی واکنش گرا با CSSخروجی: صفحه ای خوانا در موبایل و لپ تاپ.
- تعامل با JavaScriptخروجی: فیلتر خدمات و مدیریت حالت بدون نتیجه.
- انتخاب مسیر تخصصیخروجی: تصمیم روشن بین وردپرس، فرانت اند و بک اند.
- داده و منطق سمت سرورخروجی: یک قابلیت ذخیره و بازیابی اطلاعات.
- انتشار و ارائهخروجی: نشانی قابل بازدید، راهنمای اجرا و فهرست محدودیت ها.
مرحلهٔ اول: وب را بشناسید و محیط تمرین بسازید
مرورگر فایل های صفحه را دریافت و نمایش می دهد؛ سرور به درخواست ها پاسخ می دهد. دامنه نشانی سایت است و هاست محیط نگهداری فایل ها و اجرای برنامه. برای تمرین نخست، یک ویرایشگر کد و مرورگر کافی است. ابزار توسعهٔ مرورگر را باز کنید و بخش های نمایش ساختار صفحه، خطاها و درخواست های شبکه را بشناسید.
تمرین: پوشه ای برای پروژه بسازید و فایل های صفحه و ظاهر را جدا نگه دارید. پس از تغییر یک جمله یا رنگ، نتیجه را در مرورگر ببینید. از همان ابتدا تغییرات مهم را با توضیح کوتاه در گیت ثبت کنید.
مرحلهٔ دوم: ساختار معنایی با HTML
پیش از ظاهر، ترتیب محتوا را درست کنید. صفحهٔ معرفی خدمات به یک تیتر اصلی، توضیح روشن، بخش خدمات، نمونهٔ پروژه و راه ارتباطی نیاز دارد. از تیترهای فرعی برای بخش ها و از لینک برای رفتن به یک مقصد استفاده کنید. تصویر باید متن جایگزین متناسب با کاربردش داشته باشد.
<main>
<h1>معرفی خدمات من</h1>
<section aria-labelledby="services-title">
<h2 id="services-title">خدمات</h2>
<p>توضیح یک خدمت مشخص و نتیجهٔ آن برای مخاطب.</p>
</section>
</main>معیار پایان: بدون فایل ظاهر هم بتوانید موضوع و ترتیب صفحه را بفهمید. لینک ها مقصد معتبر داشته باشند و تیترها فقط برای بزرگ کردن متن استفاده نشده باشند.
مرحلهٔ سوم: طراحی صفحه برای موبایل و لپ تاپ
مدل جعبه ای، فاصلهٔ داخلی و بیرونی، عرض محتوا و اندازهٔ متن را تمرین کنید. سپس چیدمان کارت ها را با فلکس یا گرید بسازید. از صفحهٔ کوچک شروع کنید؛ کنار هم قرارگرفتن سه کارت در نمایشگر بزرگ نباید در موبایل باعث خروج محتوا از صفحه شود.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
}
img { max-width: 100%; height: auto; }تمرین: پروژه را در عرض 360، 768 و 1280 پیکسل بررسی کنید. متن نباید بریده شود، صفحه نباید اسکرول افقی داشته باشد و دکمه ها باید با صفحه کلید هم قابل استفاده باشند.
مرحلهٔ چهارم: یک تعامل کوچک با JavaScript
متغیر، شرط، حلقه، تابع، آرایه و رویداد را در یک مسئلهٔ مشخص تمرین کنید. برای همین پروژه، فیلترکردن کارت های خدمات کافی است. ابتدا رفتار را با چند جمله بنویسید: کاربر یک دسته را انتخاب می کند، کارت های مرتبط نمایش داده می شوند و اگر نتیجه ای وجود نداشت، پیام مناسبی دیده می شود.
معیار پایان: حالت اولیه، نتیجهٔ خالی و تغییر انتخاب کاربر را امتحان کنید. خطاهای کنسول را بخوانید. یک فرم نمایشی را به عنوان فرم ارسال واقعی معرفی نکنید؛ ارسال و ذخیرهٔ اطلاعات به پیاده سازی سمت سرور نیاز دارد.
مرحلهٔ پنجم: وردپرس، فرانت اند یا بک اند؟
وردپرس: اگر هدف اولیه ساخت سایت شرکتی یا مدیریت محتواست، مدیریت صفحه ها، قالب، افزونه و نسخهٔ پشتیبان را یاد بگیرید. برای جزئیات، نقشه راه یادگیری وردپرس و المنتور و دورهٔ طراحی سایت با وردپرس را ببینید.
فرانت اند: اگر به رابط کاربری علاقه دارید، جاوااسکریپت، دسترس پذیری، کار با داده و مدیریت حالت را عمیق تر تمرین کنید. انتخاب یک چارچوب، جای یادگیری اصول مرورگر و زبان را نمی گیرد.
بک اند: اگر به منطق برنامه، کاربران و داده ها علاقه دارید، سی شارپ و ASP.NET Core یکی از مسیرهای قابل بررسی است. راهنمای یادگیری پروژه محور ASP.NET Core و سرفصل های دورهٔ برنامه نویسی وب را بخوانید.
اگر هنوز منطق برنامه نویسی برایتان تازه است، تمرین های شروع پایتون به یادگیری شرط، حلقه و تابع کمک می کند. برای مقایسهٔ کاربرد مسیرها، راهنمای انتخاب بین وردپرس، پایتون و ASP.NET را ببینید.
مرحلهٔ ششم: ذخیرهٔ اطلاعات و منطق سمت سرور
این مرحله برای مسیر توسعهٔ اختصاصی وب است. یک قابلیت کوچک، مثل فهرست خدمات با امکان افزودن و ویرایش در پنل مدیریت، انتخاب کنید. ساختار داده، اعتبارسنجی ورودی، دسترسی کاربران و پیام خطا را مشخص کنید. ابتدا ثبت، نمایش، ویرایش و حذف را روی دادهٔ تمرینی اجرا کنید.
معیار پایان: ورودی خالی و نامعتبر کنترل شود، کاربر بدون مجوز نتواند اطلاعات را تغییر دهد و داده پس از بارگذاری دوبارهٔ صفحه باقی بماند. کلیدها و رمزهای محیط اجرا را داخل کد عمومی پروژه قرار ندهید.
مرحلهٔ هفتم: انتشار و ارائهٔ پروژه
پروژه را در محیطی مناسب منتشر کنید و لینک ها، تصاویر و نسخهٔ موبایل را دوباره بررسی کنید. برای یک سایت دارای فرم، نتیجهٔ ارسال را با دادهٔ آزمایشی کنترل کنید. عنوان و توضیح هر صفحه باید موضوع واقعی آن را بیان کند. فایل راهنما باید شیوهٔ اجرا، امکانات و بخش های هنوز پیاده سازی نشده را روشن کند.
برای آماده کردن ارائه، راهنمای ساخت نمونه کار برنامه نویسی را بخوانید. پروژهٔ کوچک و کامل، امکان بررسی بیشتری از مجموعه ای از صفحه های نیمه تمام به مخاطب می دهد.
یک برنامهٔ تمرین قابل تنظیم
این ترتیب، پیشنهاد تمرین است و زمان تسلط افراد را پیش بینی نمی کند. برای هر جلسهٔ تمرین، بخشی را به خواندن، بخشی را به نوشتن کد و بخشی را به بررسی نتیجه اختصاص دهید.
- بخش اول: ساختار پروژه و محتوای صفحهٔ معرفی را کامل کنید.
- بخش دوم: ظاهر و نمایش موبایل را اصلاح کنید.
- بخش سوم: یک تعامل کوچک اضافه کنید و حالت های مختلف آن را امتحان کنید.
- بخش چهارم: پروژه را منتشر کنید، فایل راهنما بنویسید و از شخص دیگری بخواهید آن را بررسی کند.
پروژهٔ نمونه برای شروع
نمونهٔ قابل مشاهدهٔ صفحهٔ معرفی خدمات را باز کنید یا فایل های تمرینی HTML و CSS را دانلود کنید. این نمونه برای آموزش ساخته شده و نمونه کار یک مشتری یا هنرجوی واقعی نیست. فایل ها را باز کنید، خدمات و رنگ ها را تغییر دهید و یک بخش پرسش های متداول به آن اضافه کنید.
از کجا بفهمم برای مرحلهٔ بعد آماده ام؟
- می توانید بخش اصلی تمرین را بدون کپی خط به خط دوباره بسازید.
- دلیل انتخاب ساختار و چیدمان را توضیح می دهید.
- یک خطا را بازتولید می کنید و نتیجهٔ اصلاح آن را می سنجید.
- محدودیت های پروژه و قدم بعدی را می نویسید.
پرسش های رایج دربارهٔ شروع طراحی سایت
برای شروع به ریاضی پیشرفته نیاز دارم؟
برای ساخت نخستین صفحه های وب، تمرین منطق و دقت در ساختار مهم تر است. نیاز ریاضی با انتخاب حوزه های تخصصی تغییر می کند.
آیا یادگیری وردپرس همان برنامه نویسی است؟
ساخت سایت با ابزارهای وردپرس می تواند بدون کدنویسی انجام شود. توسعهٔ قالب یا افزونه و قابلیت های اختصاصی به مهارت های برنامه نویسی نیاز دارد.
کلاس حضوری در شیراز را چگونه انتخاب کنم؟
مدرس، سرفصل، روش تمرین و پشتیبانی، زمان بندی و شهریه را بررسی کنید. در صفحهٔ کلاس های برنامه نویسی در شیراز اطلاعات دوره های قابل ثبت نام را ببینید یا برای انتخاب مسیر مشاورهٔ آموزشی بگیرید.