طراحی سایت-طراحی وب سایت | طراحی سایت آسان و راحت
13219
rtl,post-template-default,single,single-post,postid-13219,single-format-standard,mkd-core-1.0,ajax_fade,page_not_loaded,,burst-ver-1.1, vertical_menu_with_scroll,smooth_scroll,blog_installed,wpb-js-composer js-comp-ver-4.8.0.1,vc_responsive
قالب وردپرس پوسته وردپرس قالب فروشگاهی وردپرس وردپرس قالب وردپرس
 

طراحی سایت آسان و راحت

طراحی سایت

طراحی سایت آسان و راحت

 

طراحی سایت آسان و راحت پیشرفت وب سایت HTML CSS  PSD به HTML

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

طراحی سایت آسان و راحت

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

قالب های وب سایت در Envato Elements

در غیر این صورت، این یک هفته با نام تجاری جدید است. شاید زمان آن است که یک مهارت جدید یاد بگیریم!

گام 1 – آنچه ما می سازیم ا قصد داریم این وب سایت بسیار ساده را طراحی و کد گذاری کنیم. طراحی چشمگیر، این نیست، اما برای

تدریس تکنیک های اساسی برنامه نویسی بسیار مفید خواهد بود.مرحله 2 – آماده شدن

آنچه شما نیاز دارید

این آموزش به صورت پیش فرض نوشته شده است و شما قبلا هرگز یک وبسایت را رمزگذاری نکرده اید یا تنها چند بار آن را انجام داده اید. با این وجود، برای تکمیل این آموزش، به موارد زیر نیاز خواهید داشت:

فتوشاپ یا یک ویرایشگر تصویر مشابه

درک پایه ای از نحوه کار HTML، نحو پایه و برچسب ها. برای رسیدن به سرعت.

برای CSS، شما باید بدانید که چگونه انتخابگرها کار می کنند و با خواص اولیه آشنا هستند

طرح

ما در حال ساخت یک وبسایت بسیار ساده در اینجا با چهار عنصر اصلی: header، content، sidebar و footer قرار می دهیم، طرح اینگونه نگاه می کند:

ایده خوبی است که طرح طراحی خود را پیش از شروع کار، یا بر روی کاغذ یا در فتوشاپ، برای ساده سازی گردش کار و سازماندهی ایده های خود، مسدود کنید.

مرحله 3 – شروع به کار

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

در حال حاضر، من نمی خواهم به بحث در مورد قطعنامه های صفحه نمایش و عرض وب سایت بهینه در اینجا. همه چیزهایی که باید بدانید این است که محتویات صفحه ما 800 پیکسل است و این درست است. بنابراین، در سند گسترده ای که 1000 پیکسل در آن وجود دارد، ما قصد داریم در صفحات 100 و 900px راهنمایی کنیم تا عرض را تنظیم کنیم. طراحی ما دارای نوار کناری است، و من تصمیم گرفتم آن را یک سوم عرض صفحه

مرحله 4 – سربرگ

مرحله 5 – برجسته کردن

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

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

5مرحله 6 – نوار ناوبری

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

6مرحله 7 – پاورقی

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

مرحله 8 – لوگو زمینه

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

 

حالا برای متن: بزرگ و جسور.

 

فونت: Myriad Pro

سبک: پررنگ

برای دادن آن به عمق، یک سایه درونی اضافه کنید:

مرحله 9 – تلنگر

فونت: Arial

سبک: پررنگ

مرحله 10 – ناوبری

 

نوشتن در لینک های ناوبری زیبا و بزرگ، گسترش آنها را و فضای آنها را در مورد به طور مساوی.

 

فونت: Arial

سبک: پررنگ

گام 11 – محتوای اصلی

زمان برای قرار دادن در برخی از محتوای ساختگی. من از یک بیت هدر استفاده می کنم که h2 است و کوچکتر h3 link به html ipsum خواهد بود.

جعبه متن را در مورد عرض 2 ثانيه اول صفحه قرار دهيد. سبک متن:

 

سربرگ h2:

 

فونت: Arial

سبک: پررنگ

سربرگ h3:

فونت: Arial

سبک: پررنگ

پاراگراف:

فونت: Arial

سبک: عادی

اندازه: 14pt

تاریخ در “آخرین به روز رسانی ها” در تگ کوچک قرار می گیرد، فونت همان پاراگراف است، اما 12pt.

مرحله 12 – نوار کناری

بعد یک مستطیل لاغر را بر روی نوار کناری ما

با استفاده از محتوای منحصر به فرد، نوار کناری را پر کنید، میتوانید آیکونهای رایگان را که در اینجا استفاده کردم، دریافت کنم. فونت ها عبارتند از:

 

سربرگ h3:

 

فونت: Arial

سبک: عادی

اندازه: 24pt

بعد ما قصد داریم یک دکمه “پیوستن به تیم ما” را در زیر لینک های همکاران اضافه کنیم. این دکمه تنها یک مستطیل با شیب یکسان با لوگو و یک رنگ ضربه ای است:

فونت: Arial

سبک: عادی

اندازه: 24pt

مرحله 13 – پاورقی

برای تکمیل کردن قالب، فقط کمی از متن کپی رایت شده یا هر چیزی که می خواهید، به پایین صفحه اضافه کنید. فونت:

فونت: Arial

سبک: عادی

اندازه: 14pt

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

برش PSD

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

طراحی سایت آسان و راحت

مرحله 14 – ابزار برش

در حال حاضر شما مجبور به استفاده از ابزار برش قبل نیست، اما واقعا بسیار ساده است. این فقط به شما اجازه می دهد تا فایل خود را به قطعات کوچک کوچک تبدیل کنید که می تواند برای وب صادر شود.

بنابراین، بیایید جلو برویم و یک تکه کوچک از هدر ما را بگیریم. برای ایجاد تکه ای، درست مثل ابزار مستطیل مستطیلی کلیک کنید و بکشید. مراقب باشید که قطعه را از طرف تصویر بگیرید، بنابراین هیچ کدام از برجسته ها را نمی گیرید.

پاورقی:

ما از همان فرآیند برای برش بالای پایه استفاده می کنیم، یک تکه پائین از پایین صفحه را بگیریم.

ما فقط نیاز به یک تصویر دیگر داریم: آیکون “اشتراک” و دکمه “پیوستن به تیم ما”.

از آنجا که آیکون ها و آرم ها نامنظم شکل می گیرند، ما قصد داریم آنها را به عنوان فایل های .png شفاف ذخیره کنیم، بنابراین ما قصد داریم به عقب برگردیم و آنها را به طور جداگانه برداریم.

خوب، پس برای برش دکمه، ما می توانیم همان تکنیک را با عنوان و header و footer استفاده کنیم، اما این بار فقط به یک تکه تکه ای نیاز داریم.

مرحله 15 – صادرات برای وب

 

حالا تصاویر به هم ریخته را  عنوان jpegs بهینه سازی و ذخیره کنیم و آنها را در جای مناسب قرار دهیم.

 

به فایل / ذخیره برای وب و دستگاه بروید … در پنجره بازشوند، حرکت را فشار دهید و برای انتخاب هر یک از برش ها کلیک کنید (دوباره ممکن است بخواهید زوم کنید) بررسی کنید که منوی کشویی «پیش تنظیم شده» تنظیم شده باشد به JPEG-High، علامت “convert to srgb” را بردارید و روی “save” کلیک کنید

15a

در پنجره بعدی که بالا میآید، نام و مکان برای تصاویرتان را انتخاب کنید، فقط میخواهم در حال حاضر به دسکتاپ ذخیره کنم.

اطمینان حاصل کنید که آن را به “فقط تصاویر”، “تنظیمات پیش فرض” و “فقط برش های انتخاب شده” تنظیم شده است.

بعد، بررسی محل ذخیره فایل های خود را به جای دیدن تصاویر شخصی، شما فقط یک پوشه با برچسب “تصاویر” پیدا کنید که در آن همه تصاویر شما واقع شده اند. کامپیوتر هر عکس را یک عدد می دهد، که بسیار مفید نیست. بررسی کنید که تصاویر شما مناسب است، سپس آنها را به طور مناسب نامگذاری کنید.

 

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

در حال حاضر ما از همان فرایند صادرات برای وب همانطور که با jpegs انجام می شود، تنها این بار مطمئن شوید که PNG-24 را از منوی کشویی “پیش فرض” انتخاب کرده اید و جعبه “شفافیت” علامت گذاری شده است. این فایلها را نیز تغییر نام دهید، و پوشه تصاویر شما باید چیزی شبیه به این باشد:

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

 

قسمت 3 – HTML

 

مرحله 16 – شروع به کار

 

خوب، زمان به شیرجه رفتن به برخی از HTML. اولین چیزی که به آن نیاز دارید یک ویرایشگر کد است. این اغلب زمینه ای از ترجیح شخصی است

اما من توصیه می کنم شروع با یک رایگان است. برای مک و کامپیوتر، من به شدت Komodo را به عنوان اولین ویرایشگر کد توصیه می کنم. این ویژگی های زیادی دارد که برای مبتدیان و کاربران پیشرفته ایده آل است.

یکی از بهترین ویژگی ها، نحو چک کننده است که مانند چک کردن املا در پردازنده های کلمه است که اشتباهات کوچک را شناسایی و توضیح می دهد.

در این آموزش، ما قصد داریم از ویرایش Komodo استفاده کنیم، اما اصول در هر ویرایشگر یکسان هستند.

مرحله 17 – ایجاد پوشه ها

برای اولین بار، ابتدا باید یک مکان برای نگهداری تمام فایل های مربوط به سایت ما ایجاد کنیم. یک پوشه برای وب سایت خود ایجاد کنید، معدن “MySite” نامیده می شود، در داخل این پوشه، پوشه ای دیگر حاوی تصاویری که فقط برش داده شده است ایجاد می کنیم.

نام این پوشه “تصاویر”. در حال حاضر ما ویرایشگر کد خود را باز می کنیم، این قسمت بسته به نوع نرم افزاری که شما از آن استفاده می کنید کمی متفاوت خواهد بود:

اگر دنبال Comodo هستید، “ایجاد یک پروژه جدید” را انتخاب کرده و فایل .kpf را به پوشه “MySite” ذخیره / انتقال دهید. هنگام باز کردن فایل، مرورگر فایل در کنار Komodo باید محتویات پوشه را نمایش دهد.

روی فایل پروژه راست کلیک راست کرده و به «اضافه کردن» بروید و «فایل جدید» را انتخاب کنید. در پنجره ای که ظاهر می شود، “html (xhtml)” را انتخاب کنید و فایل “index.html” را بنویسید.

اگر از ویرایشگر دیگری استفاده می کنید، فرایند باید مشابه باشد، اما ملزومات یکسان هستند: شما باید یک فایل index.html ایجاد کنید، و باید در پوشه “MySite” همراه با پوشه تصاویر باشد.

مرحله 18 – ایجاد فایل index.html ما اولین چیزی که باید انجام دهیم این است که نوع اسناد، رمزگذاری کاراکتر و تگهای <html> را ایجاد کنیم. بسیاری از ویراستاران این کار را برای شما انجام می دهند، اما اگر نباشد، باید چیزی شبیه به این باشد:

به طور منطقی، زیر بدن ما بدن را اضافه می کنیم، همچنین در تگ های <html> موجود است.

این یک صفحه صفحه اصلی است، شما ممکن است بخواهید این کلیپ را در جایی برای استفاده در آینده ذخیره کنید.

بنابراین به یاد داشته باشید زمانی که ما گفتیم بخش های هدر، محتوای، نوار کناری و پاورقی داشته ایم؟

خوب، اکنون هر کدام از اینها در داخل <div> خود قرار دارد و یک شناسه مناسب داده می شود.

نکته: ایده خوبی است، مخصوصا وقتی که ابتدا شروع کنید، برای اضافه کردن نظرات در هر </ div>، بنابراین شما می توانید پیگیری سلسله مراتب div ها را دنبال کنید.

 

حالا اجازه دهید نگاهی دیگر به PSD ما بگذاریم – به یاد داشته باشید که چگونه می خواهیم برش های پاورقی و هدر به طور نامحدود به دو طرف تکرار شوند؟

ما قصد داریم راهی برای اجازه دادن به این عناصر وجود داشته باشد، اما در عین حال، ما به محتوای اصلی (“محتوای” نوار کناری) نیاز داریم.

باید در عرض عرض مشخص شده در مرکز صفحه قرار گیرد.

 

برای مقابله با این، ما نیاز به یک div بزرگ با عناصر گسترش ما، و div برای حاوی محتوای اصلی.

ما همچنین باید توجه کنیم که متن پایه نیز محور است، بنابراین ما باید همان فرایند را برای پاورقی تکرار کنیم.

برای انجام این کار، ما باید برخی از تقسیمات را در اطراف آنهایی که قبلا داشتیم قرار دهیم. ما دو بخش اساسی، بخش اصلی و بخش پایینی داریم.

هر کدام در یک بزرگ بزرگ و غیرقابل تحمل با عرض نامشخص قرار میگیرد

و محتویات هر کدام در divs فردی تعریف می شود که عرض و مرکز را مشخص می کند.

 

ما می خواهیم از قوانین مشابه برای محتوای اصلی و پایین تر استفاده کنیم، بنابراین به جای (یا علاوه بر آن) شناسه های خاص، آنها کلاس های مشخص را خواهند داشت

به این معنی که شما می توانید مجموعه ای از قوانین را برای تعریف همه div ها با همان کلاس ایجاد کنید.

 

بنابراین محتوی اصلی در داخل یک div با شناسه “main” قرار می گیرد و بالا و پایین صفحه ما در div با id “footer” تعبیه می شود. اگر این به ساختار تجسم کمک کند، در اینجا یک نمودار وجود دارد:

 

18

و نشانه گذاری به نظر می رسد به شرح زیر است:

حالا ما هر قسمت را در div حاوی، با کلاس “ظرف” قرار می دهیم.

 

من می دانم که همه این تقسیم بندی های بسته بندی به نظر می رسد غیر ضروری است، اما زمانی که ما شروع به طراحی یک صفحه می کنیم، آنها با هم مرتبط خواهند شد.

مرحله 19 – اضافه کردن محتوا

اکنون که ساختار صفحه ما تنظیم شده است، می توانیم از بالا به پایین اضافه کردن محتوا را شروع کنیم. در اینجا یک مفهوم از عناصر HTML است که صفحه ما را تشکیل می دهد:

در بالای صفحه ما هدر ما هستیم و درون هدر ما سه عنصر اصلی داریم: لوگو، شعار و منوی ناوبری.

بنابراین اجازه دهید یک دیو را برای هدر ما ایجاد کنیم و برای حفظ چیزهایی که تمیز هستیم، لوگو و برچسب را در divs خود قرار می دهیم.

نکته: ارزش href در تگ های لنگر به طور معمول مشخص می کند کجا پیوند می رود، اما در این مورد، نماد پوند فقط به معنای “پیوند به بالای صفحه است”.

محتوای اصلی

با نگاهی به محتوا اصلی ما، ما 4 سبک مختلف از نوع: یک عنوان بزرگ در بالای صفحه، یک کوچکتر،

و یک حتی کوچکتر به عنوان عناوین خبری، بعلاوه بعضی پاراگرافها و تاریخهای کمی در موارد خبری اشاره دارد.

ما این <h2>، <h3>، <h4>، <p> و <small> را به ترتیب می نامیم. در حال حاضر این فقط یک موضوعی است که در محتوای شما قرار دارد، که بسیار سرگرم کننده نیست، اما بسیار آسان است.

من در انتهای هر آیتم جدید برچسب های لنگر را با مقدار “Read More” اضافه کردم.

نوار کناری

در حال حاضر به نوار کناری نوار کناری دارای سه عنصر است که هر کدام از آنها در دیوای خود پیچیده می شوند.

هر div حاوی <h3> header و یک فهرست غیر ارادی است و هر مورد لیست دوباره حاوی تگ لنگر است.

بنابراین پیش بروید و متن خود را کپی کنید و چسب بزنید، و باید چیزی شبیه به این باشد:

ما ممکن است قبل از چک کردن آن در مرورگر، footer را قرار دهیم، فقط باید یک ثانیه طول بکشد.

لازم به ذکر است که هر نمادی که می خواهید در متن خود استفاده کنید، کد خاصی در HTML دارد، مثلا نماد حق نشر به عنوان ©

و این در مورد آن برای نشانه گذاری است، بیایید نگاهی بیاندازیم:

به نظر می رسد خیلی خوب، نه؟ خوب، نه، هنوز. اما این شامل تمام اطلاعاتی است که ما نیاز داریم و آماده است تا یک ظاهر طراحی شده باشد.

قسمت چهارم – CSS

مرحله 20 – اضافه کردن CSS

حالا این جایی است که جادو اتفاق می افتد.

یک فایل جدید در پوشه سایت ما ایجاد کنید و آن را “style.css” نامگذاری کنید.

حالا ما باید یک راه برای گفتن مرورگر که این فایل CSS متعلق به فایل index.html ما است، بنابراین ما با برچسب “لینک href” لینک. این خط کد را در بخش <head> خود در زیر عنوان قرار دهید.

در حال حاضر فایل HTML ما می تواند به فایل CSS ما دسترسی داشته باشد، بنابراین هر گونه تغییر ما را به CSS بر فایل HTML تاثیر می گذارد.

مرحله 21 – پاکسازی عمومی

یک چیز زشت زشت در مورد سایت ما وجود دارد که ما می توانیم آن را درست حل کنیم: ما می خواهیم فونت پیش فرض را تغییر دهیم، ما می خواهیم محتوای 800px گسترده و محور باشد و ما می خواهیم خلاص شدن از تمام فضاهای بین عناصر.

اول، ما قصد داریم فونت را برای تمام متن درون صفحه برگزینیم که به صورت ممتنع نمایش داده خواهد شد مگر اینکه مشخص شود:

 

تنظیم مجدد CSS

 

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

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

مرحله 22 – سربرگ

خوب، پس همه چیز تمام شده و آماده برای ما برای دستکاری! حالا ما شروع به اضافه کردن سبک های خودمان، دوباره از بالا به پایین.

بیایید بخش اول را از ابتدا انتخاب کنیم: تنظیم تصاویر پس زمینه برای هدر.

ما با تکه تکراری که هدر هدر داده ایم، ستاره می کنیم. تصویر تکراری در داخل div “main” قرار دارد که دارای عرض نامشخص است. ما باید مرورگر را بشناسیم که در آن تصویر است و چه کاری باید انجام دهد (برای تکرار، بدون تکرار) برای تنظیم تصویر پس زمینه، ما از «پسزمینه» اموال استفاده می کنیم و مکان تصویر یا آدرس را تعیین می کنیم: در مورد ما، تصویر در پوشه تصاویر ما است، بنابراین ما موقعیت مکانی مانند این را مشخص می کنیم:

سپس مشخص کنید که ما می خواهیم آن را در امتداد محور x تکرار کنیم:

عالی، درست است؟ سعی کنید مرورگر خود را کشف کنید، آن را فقط در می آید و در و … اما ما هنوز هم از دست رفته برجسته در نوار آبی، و از آنجا که ما قسمت 800px از هدر ما قطع، ما می توانیم آن را در داخل “ظرف ما “دیو مشکل این است که ما دو نفر از آنها را داریم (یکی برای div اصلی، یکی برای پایین صفحه)، بنابراین ما باید مشخص کنیم که ما div را با کلاس “container” که در div با id “main”

مرحله 23 – تعویض تصویر لوگو

آرم ما بسیار پیچیده است، درست است؟ ما از یک پس زمینه تصویر و یک فونت غیر HTML با سایه درونی استفاده می کنیم. ما نمی توانیم این کار را در CSS انجام دهیم، بنابراین ما باید متن را با یک تصویر جایگزین کنیم.

“چرا فقط تصویر را به جای خط <h1> قرار ندهید؟”

شما ممکن است بپرسید خوب، در اینترنت، هدر <h1> اساسا “نام” صفحه شما است، و مهم است، ربات قدرتمند (گوگل) برای این ویژگی در هنگام جستجوی کلمات کلیدی اسکن می کند. اگر شما یک هدر <h1> ندارید، سایت شما می تواند kalamazoo نامیده شود، اما در جستجو برای آن کلمه دقیق نخواهد بود.

تکنیک های مختلف دیگری وجود دارند که مزایای خود را نسبت به این موارد دارند (به ویژه در روش شماره 8)، اما این ساده ترین و مناسب ترین روش برای این وضعیت است.

بنابراین، برای رفع این مشکل، ما از یک تکنیک کوچک به نام «جایگزینی تصویر» برای استفاده از تصویری که میخواهیم استفاده میکنیم، در حالی که حاوی header <h1> در نشانه گذاری ما است. اول، بگذارید تصویر را به عنوان پس زمینه برای #logo div اضافه کنیم.

اگر شما به مرورگر خود نگاه می کنید، خواهید دید که لوگوی ما نصف شده است. این به این دلیل است که ما هیچ فضای خالی به آن داده ایم، ما می توانیم این را با مشخص کردن ابعاد تصویر حل کنیم.

در حال حاضر نگاهی بیندازید و تصویر لوگوی ما با خوشحالی نشسته است که متن <h1> ما مورد استفاده قرار می گیرد. اما هنوز هم به نظر بسیار بد است، همه در بالای آن وجود دارد. هنگامی که ما می خواهیم یک مورد را از موقعیت اولیه خود در صفحه منتقل کنیم، می توانیم از ویژگی های padding و margin استفاده کنیم. ما قصد داریم هر دو را به دیدن تفاوت

 

ابتدا اجازه دهید یک حاشیه به بالای تگ h1 اضافه کنیم. ما می توانیم چگونگی استفاده از ابزار حاکم در فتوشاپ را بیابیم.

وای! ما موفق به حرکت لوگو شدیم، اما کل صفحه را با آن گرفتیم! بیایید به جای آن از padding استفاده کنیم:

حالا نگاهی بیندازید، و چیز عجیب و غریب به جایی که آغاز شد، بازگشت. این به این دلیل است که اموال حاشیه کل عنصر را حرکت می دهد، اما محفظه تنها محتوای عنصر را منتقل می کند، پس زمینه را که در آن است قرار می دهد

بنابراین، برای حرکت تصویر پسزمینه آرم، ما باید دو برابر آن را حرکت دهیم، چرا که کل لوگوی div، محتوای “header div” است. بیایید آن را امتحان کنیم:

خیلی بهتر! در حال حاضر آرم ما به نظر می رسد درست مثل آن را در PSD ما، دقیقا در نقطه مناسب است. اگر فقط می توانیم این شعار را اصلاح کنیم …

گام 24 – تلنگر شناور

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

ما چند گزینه برای اصلاح این، اما من قصد دارم از شناورها استفاده کنم که کمی روی حیله و تزویر هستند، اما هنگامی که آنها را آویزان می کنید، به طور جدی مفید هستند.

خوب، پس چه چیزی شناور است؟ خوب، این پیچیده است اساسا هنگامی که یک عنصر را به “شناور” می دهید، آن را به سمت یک صفحه یا عنصر می چسبانید و همچنین از “جریان” صفحه معمولی خارج می شود. سردرگم؟ بگذارید نشان دهم

خب، همانطور که می بینید، ما توانستیم خط تیره خود را به طرف آن ببریم، اما منوی ناوبری را با آن در می آورد.

من از این به این موضوع فکر می کنم: یک عنصر طبیعی (به عنوان مثال، یک div یا یک هدر header یا یک تصویر)، حتی اگر واقعا کوچک باشد، نامرئی تمام فضای آن را به سمت آن اشغال می کند، مثل یک نوار افقی طولانی .

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

حالا که می دانید چگونه شناورها کار می کنند، چگونه می توانیم وضعیت فعلی ما را رفع کنیم؟ اول، ما باید این شعار را به یک شناور از خود جدا کنیم، بنابراین آن را نیز در خارج از «جریان» عادی صفحه قرار می دهیم

. در حال حاضر آیتم های منو در اطراف شعار ما قرار می گیرند! آنچه که ما در اینجا نیاز داریم، بازگرداندن جریان طبیعی سند پس از عناصر شناور است. چند راه برای انجام این کار وجود دارد، اما ما از روش مستقیم به جلو استفاده می کنیم. به فایل index.html خود بازگردید و در div جدید زیر divs شناور ما اضافه کنید.

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

و سپس اضافه کردن کمی از padding در بالا و سمت چپ:

نگاهی بیاندازیم: در حال حاضر جایی را می گیریم!

مرحله 25 – نوار ناوبری

 

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

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

طراحی سایت راحت و ساده

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

همه موارد لیست ما باید در یک خط در حال حاضر، ما فقط باید آنها را فضا و کمی حرکت منو. بنابراین ابتدا فاصله را از پایین آرم خود به بالای متن منو اندازه گیری کنید و حدود 55 پیکسل را دریافت می کنیم.

اولین مورد در حدود 30 پیکسل در سمت چپ راهنمای ما است، پس بگذارید پلاگین مورد لیست را به 30 پیکسل سمت چپ تنظیم کنید.

ما هنوز هم باید فاصله بیشتری بین هر یک از آیتم ها قرار دهیم، اگر فضای ما را در psd ما اندازه گیری کنیم، این حدود 105px است، اما از آنجا که ما در حال حاضر 30px padding بین هر یک است، ما فقط نیاز به اضافه کردن 75px به سمت راست هر یک از آیتم.

مرحله 26 – محتوا

اولین چیزی که ما در اینجا انجام می دهیم، تمام فونت ها را تنظیم می کنیم، بنابراین می توانیم فاصله ای را که ما باید با آن کار کنیم را ببینید. فقط اطلاعات فونت را از فتوشاپ پلاگین کنید:

ما چیزی شبیه به این می خواهیم:

در این مرحله شما ممکن است متوجه شوید که ما رنگ پس زمینه برای منطقه محتوا را تنظیم نکرده اید.

نتایج را بررسی کنید:

 

بخش اخبار

 

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

در آنجا، در حال حاضر همه ما باید انجام دهیم این است که نوار کناری را کنار بگذاریم و محتوای اصلی را انجام دهیم.

مرحله 27 – شنا کردن نوار کناری

اول، ما باید عرض را برای بخش محتوا تنظیم کنیم:

اکنون، برای به دست آوردن نوار کناری خارج از آن، ما یک بار دیگر از شناورها استفاده می کنیم، تنظیم هر دو محتویات محدوده و نوار کناری را به سمت چپ شناور می کنیم.

 

اگر نگاهی به مرورگر خود بیاندازید، متوجه خواهید شد که متن پاورقی ما در اطراف نوار کناری پیچیده شده است. ما می دانیم که چگونه با این مشکل در حال حاضر مقابله کنیم: ما فقط نیاز داریم که تقسیم کوچک ما را به نشانه گذاری اضافه کنیم:

خوب، گام بعدی این است که فقط از سبک های فونت ما از PSD برای نوار کناری کپی کنیم:

به خاطر داشته باشید که برای فونت کردن پیوندها در یک لیست غیر ارادی، باید به ترتیب لنگر، به جای آیتم لیست، مراجعه کنید.

در حال حاضر، اگر دوباره در psd ما نگاه کنیم، متوجه خواهیم شد که متن مورد نظر در لیست ویجت “subscribe” کمی بزرگتر از بقیه نوار کناری است. برای حل این مسئله، ما باید لیست خاص غیر ارادی را هدف قرار دهیم، بنابراین ما نیاز به اضافه کردن یک ارزش شناسایی به subscribe ul در نشانه گذاری ما حالا ما باید نوار کناری خود را سبک کنیم: اضافه کردن حاشیه، حاشیه، پس زمینه و مرزها. اول از گلوله ها خلاص شویم:

خوب، پس هنوز هم راه در نقطه اشتباه است، پس بگذارید آن را با اضافه کردن حاشیه به بالا و چپ حل کنید. هنگام اندازه گیری در PSD خود، اندازه گیری به جایی که مرز نوار کناری آغاز می شود.

حالا برای پس زمینه: در زیر ملک حاشیه بالا، ویژگی های پس زمینه و مرز را اضافه کنید:

بعد از آن ما 15 پیکسل از پد برای هر طرف اضافه می کنیم:

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

نوار کناری ما تقریبا کامل به نظر می رسد، ما فقط نیاز به اضافه کردن در آیکون در بخش اشتراک و سبک است که “پیوستن به ما” تگ لنگر.

 

خوب، پس بگذارید این آیکون ها کار کنند. اضافه کردن تصاویر به یک فهرست غیر ارادی ممکن است گیج کننده باشد، اما اگر شما گام به گام را انجام دهید، آن را کاملا معنی می دهد. اما کمی خسته کننده است.

برای شروع، ما قصد داریم یک اتاق برای آیکون ها ایجاد کنیم. ما قصد داریم آنها را به عنوان تصاویر پسزمینه تنظیم کنیم، بنابراین اگر از ویژگی property padding برای انتقال اقلام لیست خود به مقدار کمی استفاده کنیم، تصاویر تحت تأثیر قرار نخواهند گرفت. آیکون ها در حدود 26 پیکسل عرض هستند، بنابراین برخی از پانل ها را در سمت چپ موارد لیست اضافه می کنیم:

حالا ما باید یک راه برای هدف قرار دادن هر یک از آیتم های لیست جداگانه داشته باشیم، بنابراین برخی از id ها را در نشانه گذاری اضافه می کنیم:

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

در این مرحله به من نشان داد که احتمالا 18 پیکسل برای لینکها کمی بیش از حد بزرگ است، بنابراین من آن را به 16 پیکسل کمتر قابل تحسین کاهش دادم، که به من اجازه افزودن کمی بیشتر در سمت چپ بدون کشیدن نوار کناری را اضافه کرد.

 

نوار کناری اسپارتان ما تقریبا کامل است! حالا دکمه ما را سبک کنید:

ما باید دکمه را هدف قرار دهیم، بنابراین اجازه دهید کلاس را به نشانه گذاری اضافه کنیم: (من با استفاده از یک کلاس به جای یک شناسه در این زمان، که معمول است، همانطور که ما می توانیم بعدها دکمه های بیشتری را اضافه کنیم)

بنابراین اجازه دهید فقط سبک متن را اصلاح کنیم و در تکه تکه تکراری ما اضافه کنیم:

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

حالا اجازه دهید فقط کمی با اضافه کردن polding به کلیه نوار کناری تقسیم کنیم:

در نهایت، ما فقط باید این مرز 1px را به کلاس دکمه اضافه کنیم:

 

مرحله 28 – پاورقی

 

آخرین، اما نه کم، پاورقی ساده ما. ما همانطور که هدر را تنظیم می کنیم، پاورقی را همانند می کنیم:

گام 29 – تغییرات کوچکی

 

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

در حال حاضر فقط برخی از موارد نگرانی در مورد: اعتبار سنجی است.

مرحله 30 – اعتبار سنجی

در حال حاضر اعتبار گامی مهم در طراحی وب سایت است، من در اینجا به دلایل بی پایان نمی روم، زیرا این مقاله این کار را برای من انجام می دهد

اعتبار HTML

به سرویس Validation w3.org بروید ، با آپلود فایل تایید کنید و فایل index.html خود را انتخاب کنید و روی «بررسی» کلیک کنید.

بعد … لحظه ای حقیقت:

قرمز (قرمز بد است!)

نگران نباش، خیلی بد نیست بیایید بررسی کنیم که چه چیزی اشتباه کرد:

برای اینکه ایمن باشیم، اجازه دهید صفحه ما دوباره بارگیری شود تا مطمئن شود تغییرات غیرمعمول وجود نداشته باشد.

موفقیت صفحه ما اکنون XHTML معتبر است. شما حتی می توانید یک آیکون را دانلود کنید اگر می خواهید بی نظیر شوید

اعتبارسنجی CSS

سرانجام به w3 CSS Validator بروید و از همان فرآیند همانند HTML استفاده کنید، فقط این بار فایل style.css خود را انتخاب کنید

این فقط چند مشکل کوچک است: ما باید عرض را برای همه آیتم های شناور ما اعلام کرد. باز هم این پیشنهادات اختیاری است، اما بهتر است که به انتقاد سازنده گوش فرا دهیم.

تمیز کردن: تگ لاین، آیتم های لیست دلخواه منو و نوار کناری همه باید عرض را اعلام کنند. ما همچنین می خواهیم این کار را بدون تغییر ظاهر صفحه انجام دهیم.

 

و بارگیری مجدد: بدون تغییر، عالی است. بعد، آیتم های لیست منو. این یک تردید کوچک است: صفحه ما 800 پیکسل عرض است، بنابراین حداکثر عرض کلی همه موارد لیست با هم است. اگر ما از چهار آیتم لیست تقسیم کنیم و عرض را به 200px تنظیم کنیم، آیتم ها با هم مخلوط می شوند و لیست به صورت عمودی. این به این دلیل است که ما در هر دو طرف از هر مورد لیست داریم: 30 پیکسل در سمت چپ و 75 پیکسل در سمت راست. تفریق آن 105 از 200 و عرض باقیمانده 95 پیکسل است.

همان ایده با نوار کناری: ابتدا نگاهی به عرض محدوده محتوا: 510px. باقیمانده در صفحه 800px ما 290 پیکسل است، اما ابتدا باید تمام پلاگینها را در سمت چپ و راست تقسیم کنیم:

290-30 = 260. سپس حاشیه سمت چپ را محاسبه کنید و با 205 پیکاچ باقی می مانی. یکی از آخرین مشکل: ما 1px مرز، پس اجازه دهید 2px دیگر را محاسبه، و عرض نوار کناری به 203px را تنظیم کنید. دوباره آن را بررسی کنید، بدون تغییر.

وب سایت ما، تا آنجا که به استانداردهای w3c مربوط می شود، کامل است.

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

 

Naeej
بدون دیدگاه

با عرض پوزش، فرم دیدگاه در این زمان بسته شده است.