طراحی سایت

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

مرحله ۱: اپلیکیشن‌ریزی و پیاده سازی اول
هر پروژه‌ی اینترنت غالب با اپلیکیشن‌ریزی ظریف شروع می‌گردد. قبل از آنکه حتی یک خط کد بنویسید، آغاز غرض و محدوده اینترنت‌تارنما خویش را معلوم فرمایید:

نوع اینترنت‌وبسایت چیست؟ (فردی، شرکتی، فروشگاهی, بلاگ، انجمن و غیره)
مخاطبان مقصود چه اشخاصی می‌باشند و انتظار دارا‌هستند در تارنما شما چه چیزی بیابند؟
چه قسمت‌ها و صفحاتی برای وب سایت نیاز دارید؟ (ورقه مهم، درباره ما، تماس، تولیدها/سرویس ها، وب لاگ و غیره)
چه تجهیزات و امکان‌های ویژه‌ای مد لحاظ میباشد؟ (برای مثالً هیبت تماس، قابلیت و امکان عضویت یوزرها، آلبوم تصاویر، نقشه، نصیب سوال و جواب و …)
بعداز گزینش هدف ها و نیازمندی‌ها, عالی میباشد یک طرح اول یا این که اسکچ از دکوراسیون صفحه های اینترنت‌وبسایت تهیه و تنظیم فرمائید. این فعالیت را می توانید روی شیت ایفا دهید یا این که از ابزارهای پیاده سازی واسط کاربری (UI Design) مانند فیگما (Figma) یا این که اسکچ (Sketch) به کارگیری نمایید. در‌این مرحله انتخاب می کنید که برای مثالً منوی ناوبری کجا باشد, هر برگه چه نصیب‌هایی داشته باشد, مخلوط رنگ و مدل بصری کلی چه‌گونه باشد و غیره.

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

مرحله ۲: ساخت ساختار پروژه و تعیین ویرایشگر کد
در حال حاضر که درکی پر‌نور از آنچه میخواهید بسازید دارید، فرصت آن میباشد که شغل عملی را شروع نمایید. آغاز یک فایل (فایل) در رایانه خویش برای پروژه اینترنت‌سایتتان ساخت نمایید. به عنوان مثالً میتوانید فایل‌ای به اسم MyWebsite در مسیر دلخواه بسازید. این فایل محل حفظ کلیه فولدر‌های وب سایت شما خواهد بود.

بعد از آن ویرایشگر کد انتخابی خویش را گشوده نمایید. چنانچه هنوز ویرایشگری نصب نکرده‌اید، می توانید Visual Studio Code (که مجانی میباشد) را دانلود و نصب فرمائید. بعداز اجرای ویرایشگر، فایل‌ی پروژه‌ای که ساختید را در آن گشوده فرمایید. بیشتر ویرایشگرها قابلیت و امکان گشودن فایل پروژه را دارا هستند که سبب ساز می‌گردد بتوانید به راحتی در بین پوشه‌های متفاوت کد جابجا گردید و ساختار پروژه را ملاحظه کنید.

در‌این مرحله می توانید یک فولدر HTML تازه تولید نمایید. معمولاً اسم این پوشه را index.html میگذارند چون به صورت پیش‌فرض اکثری از اینترنت‌سرورها پوشه index.html را تحت عنوان برگه اساسی اینترنت‌وبسایت تشخیص میدهند. فولدر index.html را در فولدر مهم پروژه خویش ساخت و ساز کرده و در ویرایشگر گشوده نمایید. به طور شبیه، میتوانید یک پوشه CSS به عنوان مثالً با اسم style.css نیز از همین آغاز ساخت نمائید (در فولدر پروژه یا این که ترجیحاً باطن فایل‌ای غیروابسته از جملهً فایل‌ای به اسم css). همینطور در حالتی‌که می خواهید از JavaScript به کارگیری نمایید، میتوانید یک پوشه جاوااسکریپت به عنوان مثالً app.js نیز بسازید (در فولدر پروژه یا این که فایل‌ای مانند js).

یک سایت دیدنی و پولساز حق شماست. این مجال رو از دست نده. همین الان به کاغذ طراحی وب طهران مراجعه کن تا یک مشورت کردن خوب بهت بدم.

تماس تماس حاصل نمایید
در نقطه پایان این مرحله، ساختار نخستین پروژه شما صورت گرفته میباشد: یک فولدر اساسی که دربردارنده پوشه index.html و بقیه فولدر‌های موردنیاز (CSS و JS) میباشد. فعلا مهیا‌اید تا کدنویسی صفحه ها را استارت نمایید.

مرحله ۳: تایپ کردن ساختار HTML مبنا
گام‌بعدی، تایپ کردن کد HTML برای کاغذ اینترنت میباشد. فولدر index.html را گشوده کرده و با ساختار مبنا یک برگه HTML شغل را آغاز نمائید. یک برگه HTML معمولاً مشتمل بر موادسازنده ذیل میباشد:

تیتر اینترنت‌وبسایت اینجانب

درود

! به اینترنت‌تارنما مثال اینجانب خوش آمدید.

اجزای کد فوق به ترتیب تحت میباشد:

خط نوع گواهی را HTML5 اعلام می‌نماید.
تگ ریشه‌ی مدرک HTML میباشد و با لهجه برگه (فارسی) تعریف‌و‌تمجید گردیده.
قسمت دربرگیرنده داده ها فراداده (metadata) درباره ورقه میباشد؛ به عنوان مثال نوع رمز گذاری کاراکترها (UTF-8) را انتخاب می‌نماید تا حروف فارسی به صدق اکران یابند. تگ برای برخورد‌گرا شدن شیت در گوشی ضروری میباشد و مقیاس ورقه را در دستگاه‌های خرد تهیه می‌نماید.
تگ

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

مرحله ۱: اپلیکیشن‌ریزی و پیاده سازی اول
هر پروژه‌ی اینترنت غالب با اپلیکیشن‌ریزی ظریف شروع می‌گردد. قبل از آنکه حتی یک خط کد بنویسید، آغاز غرض و محدوده اینترنت‌تارنما خویش را معلوم فرمایید:

نوع اینترنت‌وبسایت چیست؟ (فردی، شرکتی، فروشگاهی, بلاگ، انجمن و غیره)
مخاطبان مقصود چه اشخاصی می‌باشند و انتظار دارا‌هستند در تارنما شما چه چیزی بیابند؟
چه قسمت‌ها و صفحاتی برای وب سایت نیاز دارید؟ (ورقه مهم، درباره ما، تماس، تولیدها/سرویس ها، وب لاگ و غیره)
چه تجهیزات و امکان‌های ویژه‌ای مد لحاظ میباشد؟ (برای مثالً هیبت تماس، قابلیت و امکان عضویت یوزرها، آلبوم تصاویر، نقشه، نصیب سوال و جواب و …)
بعداز گزینش هدف ها و نیازمندی‌ها, عالی میباشد یک طرح اول یا این که اسکچ از دکوراسیون صفحه های اینترنت‌وبسایت تهیه و تنظیم فرمائید. این فعالیت را می توانید روی شیت ایفا دهید یا این که از ابزارهای پیاده سازی واسط کاربری (UI Design) مانند فیگما (Figma) یا این که اسکچ (Sketch) به کارگیری نمایید. در‌این مرحله انتخاب می کنید که برای مثالً منوی ناوبری کجا باشد, هر برگه چه نصیب‌هایی داشته باشد, مخلوط رنگ و مدل بصری کلی چه‌گونه باشد و غیره.

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

مرحله ۲: ساخت ساختار پروژه و تعیین ویرایشگر کد
در حال حاضر که درکی پر‌نور از آنچه میخواهید بسازید دارید، فرصت آن میباشد که شغل عملی را شروع نمایید. آغاز یک فایل (فایل) در رایانه خویش برای پروژه اینترنت‌سایتتان ساخت نمایید. به عنوان مثالً میتوانید فایل‌ای به اسم MyWebsite در مسیر دلخواه بسازید. این فایل محل حفظ کلیه فولدر‌های وب سایت شما خواهد بود.

بعد از آن ویرایشگر کد انتخابی خویش را گشوده نمایید. چنانچه هنوز ویرایشگری نصب نکرده‌اید، می توانید Visual Studio Code (که مجانی میباشد) را دانلود و نصب فرمائید. بعداز اجرای ویرایشگر، فایل‌ی پروژه‌ای که ساختید را در آن گشوده فرمایید. بیشتر ویرایشگرها قابلیت و امکان گشودن فایل پروژه را دارا هستند که سبب ساز می‌گردد بتوانید به راحتی در بین پوشه‌های متفاوت کد جابجا گردید و ساختار پروژه را ملاحظه کنید.

در‌این مرحله می توانید یک فولدر HTML تازه تولید نمایید. معمولاً اسم این پوشه را index.html میگذارند چون به صورت پیش‌فرض اکثری از اینترنت‌سرورها پوشه index.html را تحت عنوان برگه اساسی اینترنت‌وبسایت تشخیص میدهند. فولدر index.html را در فولدر مهم پروژه خویش ساخت و ساز کرده و در ویرایشگر گشوده نمایید. به طور شبیه، میتوانید یک پوشه CSS به عنوان مثالً با اسم style.css نیز از همین آغاز ساخت نمائید (در فولدر پروژه یا این که ترجیحاً باطن فایل‌ای غیروابسته از جملهً فایل‌ای به اسم css). همینطور در حالتی‌که می خواهید از JavaScript به کارگیری نمایید، میتوانید یک پوشه جاوااسکریپت به عنوان مثالً app.js نیز بسازید (در فولدر پروژه یا این که فایل‌ای مانند js).

یک سایت دیدنی و پولساز حق شماست. این مجال رو از دست نده. همین الان به کاغذ طراحی وب طهران مراجعه کن تا یک مشورت کردن خوب بهت بدم.

تماس تماس حاصل نمایید
در نقطه پایان این مرحله، ساختار نخستین پروژه شما صورت گرفته میباشد: یک فولدر اساسی که دربردارنده پوشه index.html و بقیه فولدر‌های موردنیاز (CSS و JS) میباشد. فعلا مهیا‌اید تا کدنویسی صفحه ها را استارت نمایید.

مرحله ۳: تایپ کردن ساختار HTML مبنا
گام‌بعدی، تایپ کردن کد HTML برای کاغذ اینترنت میباشد. فولدر index.html را گشوده کرده و با ساختار مبنا یک برگه HTML شغل را آغاز نمائید. یک برگه HTML معمولاً مشتمل بر موادسازنده ذیل میباشد:

تیتر اینترنت‌وبسایت اینجانب

درود

! به اینترنت‌تارنما مثال اینجانب خوش آمدید.

اجزای کد فوق به ترتیب تحت میباشد:

خط نوع گواهی را HTML5 اعلام می‌نماید.
تگ ریشه‌ی مدرک HTML میباشد و با لهجه برگه (فارسی) تعریف‌و‌تمجید گردیده.
قسمت دربرگیرنده داده ها فراداده (metadata) درباره ورقه میباشد؛ به عنوان مثال نوع رمز گذاری کاراکترها (UTF-8) را انتخاب می‌نماید تا حروف فارسی به صدق اکران یابند. تگ برای برخورد‌گرا شدن شیت در گوشی ضروری میباشد و مقیاس ورقه را در دستگاه‌های خرد تهیه می‌نماید.
تگ