دنیای طراحی سایت

برای پیاده سازی منو تارنما به طور ماهر و استاندارد می بایست از دو لهجه علامت گذاری html و css یاری بگیرید. html نوعی لهجه آرم گذاری میباشد که در واقع بدنه اساسی کلیه وبسایت‌ها را صورت میدهد و اساسا برای پیاده سازی صفحه ها گوناگون یک وب سایت مثلا منوی آن گزینه به کار گیری قرار میگیرد. در گویش html نصیب‌های طراحی سایت در مشهد متعدد وبسایت با استعمال از اجزایی به اسم «تگ» از یکدیگر جداازهم گردیده که هرمورد از این تگ‌ها دارنده کاربرد مخصوص به شخصی می‌باشند و به مرورگرها اعلام می‌نمایند که هر قسمت از یک کاغذ دربرگیرنده چه عناصری میباشد و به چه شکل بايد نمايش داده شوند.

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

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

مرحله اولیه: پیاده سازی دور نما و لوگو در منو وبسایت
برای استارت شغل آغاز می بایست یک فولدر HTML ساخت‌و‌ساز فرمائید و بعد از آن ساختار اپلیکیشن نویسی تحت را در آن اسکن کرده و به پوشه HTML خویش اضافه فرمایید. در‌این مثال برای پیاده سازی منو وبسایت از یک دورنما معمولی به کار گیری کردیم و لوگو وب سایت را نیز با به کارگیری از کد css تحت پیاده سازی کرده‌ایم که‌این منو دارنده طول 80 پیکسل و پهنا 100 درصد میباشد.

رنگ دورنما این منو «مشکی» میباشد البته شما می توانید رنگ آن را بر طبق ذوق و سلیقه خویش تغییر‌و تحول دهید.

مرحله دوم: اضافه کردن پیوند به منو
در‌این مرحله از پیاده سازی منو تارنما بایستی از کدهای html پایین به خواسته افزودن پیوند و استعمال از گزینه‌های جانور در منو استعمال نمائید. در‌این مثال 5 گزینه قرار داده گردیده‌است ولی شما میتوانید گزینه‌های بیشتری به منوی خویش اضافه فرمائید.

این پنج مورد در منوی مثال با به کار گیری از کدهای css تحت پیاده سازی گردیده‌اند که اندازه فونت آن‌ها 18 پیکسل و رنگ‌شان نیز سپید میباشد. ما درین مثال از نوعی افکت هاور (Hover) استعمال کرده‌ایم که با کلیک بر روی گزینه‌های منو میتوانید رنگ دور نما آن را تغییر‌و تحول دهید.

مرحله سوم: پیاده سازی دکمه برای دستگاه‌ های واکنشگرا
این نوار منو در موبایل یا این که دستگاه‌های واکنشگرا، تماما مخفی میباشد و صرفا یک دکمه منو در آن‌ها اکران داده می گردد. با کلیک بر روی این دکمه، گزینه‌های جان دار در منو نمایان خواهند شد. کد HTML و CSS پایین برای تولید و پیاده سازی این دکمه آیتم به کارگیری قرار گرفته میباشد:

مرحله چهارم: پیاده سازی واکنشگرا منو با به کار گیری از کدهای css
ما تا این مرحله از پیاده سازی منو تارنما فقط آن را برای اکران در دسکتاپ مهیا کرده‌ایم ولی از آنجایی که طیف بزرگ‌ای از یوزرها با به کار گیری از موبایل از سایت‌ها بازدید می‌نمایند پس بایستی منوی آن را واکنشگرا پیاده سازی کنیم تا در کلیه دستگاه‌ها به نیکی اکران داده خواهد شد. ما برای ایفا این شغل از پهنا 920 پیکسل به کار گیری کرده‌ایم؛ یعنی نوار منو و اندازه آن برای دستگاه‌هایی با پهنا کمتر از 920 پیکسل، بر پایه ی ساختار اپلیکیشن نویسی ذیل گزینش شود:

برای پیاده سازی منو تارنما به طور ماهر و استاندارد می بایست از دو لهجه علامت گذاری html و css یاری بگیرید. html نوعی لهجه آرم گذاری میباشد که در واقع بدنه اساسی کلیه وبسایت‌ها را صورت میدهد و اساسا برای پیاده سازی صفحه ها گوناگون یک وب سایت مثلا منوی آن گزینه به کار گیری قرار میگیرد. در گویش html نصیب‌های طراحی سایت در مشهد متعدد وبسایت با استعمال از اجزایی به اسم «تگ» از یکدیگر جداازهم گردیده که هرمورد از این تگ‌ها دارنده کاربرد مخصوص به شخصی می‌باشند و به مرورگرها اعلام می‌نمایند که هر قسمت از یک کاغذ دربرگیرنده چه عناصری میباشد و به چه شکل بايد نمايش داده شوند.

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

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

مرحله اولیه: پیاده سازی دور نما و لوگو در منو وبسایت
برای استارت شغل آغاز می بایست یک فولدر HTML ساخت‌و‌ساز فرمائید و بعد از آن ساختار اپلیکیشن نویسی تحت را در آن اسکن کرده و به پوشه HTML خویش اضافه فرمایید. در‌این مثال برای پیاده سازی منو وبسایت از یک دورنما معمولی به کار گیری کردیم و لوگو وب سایت را نیز با به کارگیری از کد css تحت پیاده سازی کرده‌ایم که‌این منو دارنده طول 80 پیکسل و پهنا 100 درصد میباشد.

رنگ دورنما این منو «مشکی» میباشد البته شما می توانید رنگ آن را بر طبق ذوق و سلیقه خویش تغییر‌و تحول دهید.

مرحله دوم: اضافه کردن پیوند به منو
در‌این مرحله از پیاده سازی منو تارنما بایستی از کدهای html پایین به خواسته افزودن پیوند و استعمال از گزینه‌های جانور در منو استعمال نمائید. در‌این مثال 5 گزینه قرار داده گردیده‌است ولی شما میتوانید گزینه‌های بیشتری به منوی خویش اضافه فرمائید.

این پنج مورد در منوی مثال با به کار گیری از کدهای css تحت پیاده سازی گردیده‌اند که اندازه فونت آن‌ها 18 پیکسل و رنگ‌شان نیز سپید میباشد. ما درین مثال از نوعی افکت هاور (Hover) استعمال کرده‌ایم که با کلیک بر روی گزینه‌های منو میتوانید رنگ دور نما آن را تغییر‌و تحول دهید.

مرحله سوم: پیاده سازی دکمه برای دستگاه‌ های واکنشگرا
این نوار منو در موبایل یا این که دستگاه‌های واکنشگرا، تماما مخفی میباشد و صرفا یک دکمه منو در آن‌ها اکران داده می گردد. با کلیک بر روی این دکمه، گزینه‌های جان دار در منو نمایان خواهند شد. کد HTML و CSS پایین برای تولید و پیاده سازی این دکمه آیتم به کارگیری قرار گرفته میباشد:

مرحله چهارم: پیاده سازی واکنشگرا منو با به کار گیری از کدهای css
ما تا این مرحله از پیاده سازی منو تارنما فقط آن را برای اکران در دسکتاپ مهیا کرده‌ایم ولی از آنجایی که طیف بزرگ‌ای از یوزرها با به کار گیری از موبایل از سایت‌ها بازدید می‌نمایند پس بایستی منوی آن را واکنشگرا پیاده سازی کنیم تا در کلیه دستگاه‌ها به نیکی اکران داده خواهد شد. ما برای ایفا این شغل از پهنا 920 پیکسل به کار گیری کرده‌ایم؛ یعنی نوار منو و اندازه آن برای دستگاه‌هایی با پهنا کمتر از 920 پیکسل، بر پایه ی ساختار اپلیکیشن نویسی ذیل گزینش شود: