یادگرفتن پباده سازی وبسایت و کدنویسی ( از ابتدا تا پایان )

<p><br></p>یادگرفتن پباده سازی وبسایت و کدنویسی ( از ابتدا تا پایان )

درین خویش آموز شما خواهید توانست یک تارنما <a href="https://www.on5.ir/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%AF%D8%B1-%D9%85%D8%B4%D9%87%D8%AF/">طراحی سایت در مشهد</a>

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

نوشته خویش آموز , کدها و پوشه گرافیکی این تارنما هم برای سهولت در یاد گیری شما دوستان خوب در اختیار شما قرار خواهد گرفت .

می توانید

دموی آخرین

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

به چه شکل طراح تارنما قابلی شویم

چه‌طور طراح وبسایت شویم؟

هشت قدم حساس برای ساخت یک تارنما

اهمیت رنگها در پباده سازی

اصول و پیش نیازهای پباده سازی تارنما #۱

اصول و پیش نیازهای پباده سازی تارنما #۲

این خویش آموز از چهار بخش به طور زیر درست شده شده‌است :

نصیب اولیه : گرافیک تارنما ( پباده سازی یک طرح پیش فرض گرافیکی )

نصیب دوم : برش طرح ( براندن تصاویر برای استفاده در کد ها و صفحه ها اینترنت )

نصیب سوم : کدهای html ( نوشتن کدهای html و انتخاب ساختار برگه اینترنت )

نصیب چهارم : کدهای css ( صورت دهی کدهای html با استفاده از کدهای css )

نصیب اولیه – گرافیک وبسایت

تراز اولیه – به کجا خوا‌هیم رسید ؟

یک سایت بی آلایش و معمولی برای پباده سازی و کد نویسی در لحاظ گرفته شده اما عمل کردن بر روی این سایت مضاعف آموزنده خواهد بود . بدین ترتیب روند را دنبال فرمایید و به طور عملی یاد بگیرید و تجربه فرمایید .

در زیر نمایی آخری کاغذ اینترنت متبوع را میبینید .

تراز دوم – فراهم شدن :

به چه چیزهایی احتیاج دارید ؟

همت شده‌است فرایند پباده سازی و کدنویسی این وبسایت به بی آلایش ترین روش و برای اشخاص مبتدی و تازه کار توضیح داده شود البته برای استارت احتیاج به علم مقدماتی و شناخت با بعضا از قابل انعطاف افزارها دارید :

اپلیکیشن فتو شاپ Photoshop یا این که ویرایشگرهای تصویر شبیه

قابل انعطاف افزارهای ایجاد کد نظیر Dreamweaver

شناخت مقدماتی با کدهای html

شناخت مقدماتی با کدهای Css

استفاده از ویرایشگرهای استاندارد ( IE+7 , FireFox ) – درین خودآموز از FireFox مستعمل شده‌است

در صورت نیاز می‌توانید به سایت W3Schools رجوع‌کنید و نکات آموزنده اکثری را فرا بگیرید .

ساختار و لایه ها

برای آغاز ساختار فراوان معمولی و همگانی را در حیث می گیریم که اکثری از شما دوستان خوب با این ساختار آشنا می‌باشید .

header , content , sidebar and footer

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

تراز سوم – استارت به عمل :

عالی برای استارت به محیط اپلیکیشن فتوشاپ میرویم و یک کاغذ با پهنا و ارتفاع ۱۰۰۰px در ۱۲۰۰px ساخت میکنیم . در اینجا همت شده پهنا متبوع بیشتر از پهنا حقیقی وواقعی سایت در لحاظ گرفته شود تا محیط گشوده تری برای فعالیت وجود داشته باشد و در آخر این کاغذ به مقدار حقیقی خویش در خواهد آمد .

در‌حالتی که با محیط اپلیکیشن فتوشاپ شناخت کافی داشته باشید عمل با این خویش آموز برای شما مضاعف راحت خواهد بود . برای سهولت در فعالیت از خط کش و خط های کمکی استفاده می کنیم . مقیاس خط کش را برای Pixel تهیه نمایید ( پیمانه در پباده سازی تارنما Pixel است ) .

طبق تصویر دو خط کمکی عمودی یکی در میزان ۱۰۰px و دیگری در ۹۰۰px ساخت نمایید . اینک پهنا وبسایت ۸۰۰px در لحاظ گرفته شده‌است ( بین خط کمکی روی ۱۰۰px و خط کمکی روی ۹۰۰px ) . آن گاه ازایجاد این دو خط کمکی یک خط دیگر در مقدار ۶۳۰px ساخت نمائید . اکنون ۳ خط کمکی در‌این ورقه تاسیس شده است . در صورت نیاز میتوانید با کشیدن خط ها و Drag کردن آنان بر روی خط کش آن‌ها را تمیز فرمایید .

سطح چهارم – Header :

بعداز نماد گذاری مرزهای تارنما در تراز قبلی به نصیب Header وبسایت می رسیم که یک کدام از مهم ترین اجزاء تشکیل دهنده هر تارنما است . شعار تبلیغاتی , لوگو و تصاویر تبلیغاتی وبسایت شما درین نصیب قرار خواهد گرفت . با استفاده از ابزارها ( کلید میانبر U ) یک مستطیل به طول ۱۷۰ px و با رنگ #۲۳b6eb تولید فرمائید . تلاش نمایید که از نوار ابزار فتوشاپ برای میزان گذاری ظریف اجزاء و همینطور دکوراسیون ظریف اجزاء در کاغذ استفاده نمائید .

یک مستطیل دیگر مثل تصویر روی مستطیل نخستین خویش ساخت فرمائید به طول ۳۰px و رنگ #۵d5a5a ( مستطیل تیره رنگ بر بالای header )

تراز پنجم – Navigation Bar – نوار منوها :

برای تولید نوار منوها طبق تصویر یک مستطیل با طول ۶۰px ساخت فرمایید , در بالا رنگ این مستطیل اهمیت ندارد چون ازگرادیانت ها برای زیباتر شدن آن استفاده خوا‌هیم کرد . برای شناخت با گرادیانت ها می‌توانید مقاله فوق را مطالعه کنید .

استفاده از گرادیانت در پباده سازی

بعد از ایجا د این مستطیل , گرادیانتی با استفاده از رنگ #e2e3e4 تا #bebdbd با زاویه ۹۰ سکو ساخت نمائید .

تراز ششم – Footer :

برای ساخت footer هم از یک مستطیل با رنگ #۵d5a5a استفاده فرمائید . در اینجا طول ۵۰px کافیست . یک footer عالی و استاندارد نقش فراوان ارزنده ای در صدر بردن دسترسی پذیری وبسایت و چه بسا زیبایی آن داراست و یکی اجزای اساسی یک تارنما است .

تراز هفتم – Logo – لوگو :

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

چه‌گونه میتوان یک لوگوی ماهر و تاثیر گذار ساخت؟

برای ساخت لوگو طبق فرآیند زیر کار شده‌است و ولی شما هم میتوانید از لوگوی متبوع خودتان استفاده فرمایید . واژه و کلمه متبوع خویش را با استفاده از ویژگی ها زیر بر روی طرح می نویسیم ( LOGO ) .

Font : Myriad Pro

Style : Bold

Size : 60px

Color : #36809a

سطح هشتم – tagline :

با استفاده از خصوصیات زیر شعار تبلیغاتی خویش را در جلوی لوگوی پباده سازی شده می نویسیم .

Font : Arial

Style : Bold

Size : 30pt

Color : #e4dfdf

سطح نهم – منو ها :

با استفاده از خصوصیات زیر منو ها را با مقدار و رنگ متبوع پباده سازی میکنیم .

Font : Arial

Style : Bold

Size : 30pt

Color : #676666

تراز دهم – محتویات و متن ها :

می توان با دقت به تصاویر و با استفاده از خصوصیات زیر محتویات و متن ها را هم در جای مطلوب قرار بخشید تا برنامه ای کلی و پیش فرض از برگه اینترنت برای ادامه عمل بدست آید . این نکته در اینجا لازم به ذکر است که ساخت یک طرح گرافیکی پیشین از آغاز کد نویسی یک سایت خوبیهای فراوانی داراست که به یکسری نکته از اشاره می گردد تولید یک نقشه راه و روش برای این‌که بدانیم به کجا خوا‌هیم رسید . استفاده از تصاویر طرح گرافیکی برای ساختن تارنما . رفع مشکل ها و نواقص پیشین از استارت به کد نویسی ( علی الخصوص برای فعالیت با مشتری ها …!؟ ) عمل کردن بر روی یک طرح گرافیکی مضاعف راحت خیس از کد نویسی آن است بدین ترتیب می‌توانیم کلیه نظرات ی خویش برای یک برگه اینترنت را در یک طرح گرافیکی پیاده نماییم و آن گاه به مهیا سازی آن بپردازیم .

h2 Header :

Font : Arial

Style : Bold

Size : 36pt

Color : #0e5d7a

h3 Header :

Font : Arial

Style : Bold

Size : 24pt

Color : #444444

Paragraph :

Font : Arial

Style : Normal

Size : 14pt

Color : #595858

تراز یازدهم – Side Bar :

ابتدا مستطیلی با بعد ها متناسب و با رنگ #d4d6d3 همراه با یک stroke ( خط بدور طرح در اپلیکیشن photoshop ) به میزان ۱px و رنگ #bebdbd ساخت کنید .

لینکها

لینکها را میتوان با ویژگی ها زیر به راحتی تولید نمود .

h3 Headers :

Font : Arial

Style : Normal

Size : 24pt

Color : #044055

List items :

Font : Arial

Style : Normal

Size : 18/14pt

Color : #373737

Button

برای ساخت این button از گرادیانتی که در پباده سازی لوگو استفاده شد با به عبارتی مخلوط رنگ مصرف شده شده‌است و در محیط این button یک stroke به مقدار ۱px و رنگ #c7c7c7 هم تاسیس شده است .<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3216.208415546944!2d59.594443715489156!3d36.28299260434094!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f6c913ae2988767%3A0x9bb53a655a55e550!2sOn5!5e0!3m2!1sen!2sir!4v1503767608928" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

سطح دوازدهم – محتویات و متن های footer :

در انتهای این بخش به زیر ترین نقطه