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

قالب بندی اولیه را تنظیم کنید

حالا بیایید به استایل CSS برویم تا ظاهری اولیه به سند بدهیم.

باز کن style.cssو خطوط کدی را که در زیر می بینید اضافه کنید.

حذف padding و حاشیه های صفحه به طور پیش فرض:

* ( حاشیه: 0 پیکسل؛ بالشتک: 0 پیکسل؛ )

ما رنگ پیوندها را بسته به رفتار کاربر تنظیم می کنیم (محور، نشانگر ماوس نشده، بازدید شده) و زیر خط را از پیوندهایی که نشانگر ماوس روی آنها قرار دارد حذف می کنیم:

A:link ( رنگ: #D72020; ) a:hover (تزیین متن: هیچکدام؛ رنگ: #FF0000؛ ) a:visited (رنگ: #D72020؛ )

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

بدنه ( پس زمینه: #FFD723 url(images/back_all.jpg) repeat-x؛ فونت: 13px Tahoma، Verdana، Arial، Helvetica، sans-serif؛ رنگ: #333333; )

تعریف بلوک محتوا:

#content ( حاشیه: 0 خودکار؛ پس‌زمینه: #ffffff؛ عرض: 786 پیکسل؛ تراز متن: چپ؛ )

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

ساخت منوی افقی

یک شروع وجود دارد و اکنون می توانید مستقیماً بلوک های اصلی را شروع کنید.

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

ابتدا، اجازه دهید ظاهر کلی هر دو عنصر هدر را تنظیم کنیم: تراز متن در سمت چپ، پس زمینه سفید و ارتفاع 306 پیکسل:

#header ( پس‌زمینه: #ffffff؛ ارتفاع: 306 پیکسل؛ تراز متن: چپ؛ )

بنابراین ما نوعی فضای هدر به دست آوردیم: یک مستطیل سفید که عناصر آن روی آن قرار خواهند گرفت.

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

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

#menu ( حاشیه سمت چپ: 2px توپر #ffffff؛ عرض: 779px؛ ارتفاع: 80px؛ پس‌زمینه: url(images/header_top.gif) repeat-x؛ )

صفحه در مرورگر بلافاصله تغییر می کند و به این شکل خواهد بود.

حالا می توانید خود منو به فایل اضافه کنید index.html:

با رفرش کردن صفحه، می بینید که واقعا ظاهر شده است.

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

#menu a ( شناور: چپ؛ عرض: 99 پیکسل؛ ارتفاع: 46 پیکسل؛ نمایشگر: بلوک؛ تراز متن: مرکز؛ تزئین متن: هیچ؛ رنگ: #ffffff؛ وزن قلم: پررنگ؛ اندازه قلم: 14 پیکسل؛ بالشتک -بالا: 35 پیکسل؛ ) #menu a:hover (رنگ: #D72020؛ متن-تزیین: زیرخط؛ )

قالب بندی منو اکنون می تواند به الگوی PSD نگاشت شود.

به نحوه تغییر طراحی آیتم توجه کنید اگر نشانگر را به آن منتقل کنید (قوانین مسئول این هستند). #menu a:hover).

سفارشی کردن لوگو

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

#لوگو ( پس‌زمینه: #ffffff url(images/big_pic.jpg) بدون تکرار؛ عرض: 738 پیکسل؛ ارتفاع: 146 پیکسل؛ تراز نوشتاری: سمت چپ؛ padding-top: 80px؛ padding-left: 40px؛ حاشیه سمت چپ: 4px جامد #ffffff;)

لوگو دقیقاً در اندازه درج شده است.

تنها چیزی که کم دارد متن است. موارد گم شده را در بلوک وارد کنید لوگوفایل index.htmlبرای بدست آوردن:

متن ظاهر شده است، اما همچنین باید قالب بندی شود.

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

#لوگو a (تزیین متن: هیچ؛ تبدیل متن: حروف کوچک؛ سبک فونت: مورب؛ اندازه قلم: 36 پیکسل؛ رنگ: #FFFFFF؛ ) #لوگو h2 a (اندازه قلم: 24 پیکسل؛ )

در اینجا نیازی به توضیح نیست، شما با تمام ویژگی های دروس CSS آشنا هستید. با این حال ظاهرمتن تغییر کرده است و به طور کلی، هدر اکنون حتی بهتر از طرح‌بندی PSD به نظر می‌رسد.

تایپ کردن قسمت اصلی صفحه

در مرحله بعد، بزرگترین بلوک را راه اندازی می کنیم که تمام محتوای منحصر به فرد روی آن قرار می گیرد. 500 پیکسل را اشغال می کند و در سمت راست سایت قرار دارد. بیایید قوانینی را برای موقعیت یابی، طراحی سرفصل ها، پاراگراف ها و پیوندها تنظیم کنیم (ما قبلاً در مورد تمام ویژگی ها در مقالات در CSS صحبت کرده ایم).

#راست ( شناور: سمت راست؛ عرض: 500 پیکسل؛ بالشتک-راست: 10 پیکسل؛ ) #راست h4 ( حاشیه: 0؛ بالشتک: 0 پیکسل؛ اندازه قلم: 12 پیکسل؛ رنگ: #D72020؛ ) #راست a ( رنگ: #D72020 ؛ text-decoration: none; ) #right p ( حاشیه: 0; padding: 0; padding-bottom: 10px; ) #right h2 ( حاشیه: 0; padding: 0; padding-top: 10px; color: #D72020; )

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

ظرف را پر کنیم درست. تصاویر در یک جدول ساده قرار خواهند گرفت.

گالری

آشپزخانه ها

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

ایجاد پنل سمت چپ

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

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

کد زیر را در فایل CSS وارد کنید.

#چپ ( بالشتک: 10 پیکسل؛ عرض: 237 پیکسل؛ بالشتک-راست: 1em؛ ) #چپ h3 (عرض: 225 پیکسل؛ ارتفاع: 25 پیکسل؛ اندازه قلم: 14 پیکسل؛ وزن قلم: پررنگ؛ بالشتک-چپ: 15 پیکسل بالا: 15 پیکسل؛ تبدیل متن: بزرگ؛ رنگ: #ffffff؛ پس‌زمینه: آدرس اینترنتی (تصاویر/title.gif) بدون تکرار ؛ اندازه فونت: 18px; ) #left li ul ( موقعیت: مطلق؛ سمت چپ: 90px؛ بالا: 0؛ نمایش: هیچکدام؛ ) #left ul li (موقعیت: نسبی؛ حاشیه-پایین: 20px؛ ) #left ul li a (نمایش: بلوک؛ تزیین متن: هیچکدام؛ رنگ: #ffffcc؛ پس‌زمینه: #ff9900؛ بالشتک: 5 پیکسل؛ حاشیه: 1 پیکسل طلایی؛ حاشیه پایین: 0؛ ) #چپ li:hover ul (نمایش: بلوک; ) #left li li ( margin-bottom:0px; عرض: 150px; ) #left p ( padding: 10px; border-bottom: 1px solid #D72020; border-left: 1px solid #D72020; حاشیه-راست: 1px solid # D72020;)

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

اجازه دهید ابتدا یک بلوک اطلاعاتی بدون منو به ظرف سمت چپ سند HTML اضافه کنیم.

اطلاعات

ما به شما تخفیف های تعطیلات ارائه می دهیم. به علاوه...

منو

پس زمینه سفید بیشتر به سمت پایین صفحه کشیده شد.

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

• گالری
  • آشپزخانه ها
  • تخت
  • دیوارها
  • راهروها
  • کمد لباس
  • جداول کامپیوتر
• معاهده
• قیمت
  • آشپزخانه ها
  • تخت
  • دیوارها
  • راهروها
  • کمد لباس
  • جداول کامپیوتر
• نمونه ها
  • شیشه
  • نئوپان
  • تجهیزات جانبی
  • و غیره.
• مخاطب
• مهم

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

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

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

برای کاربران حرفه ای، ما بیست طرح PSD برتر را برای اهداف مختلف ارائه می دهیم: تجارت، خلاقیت، وبلاگ و تجارت الکترونیک. تقریباً تمام طرح‌بندی‌های PSD دارای نسخه وردپرس هستند، بنابراین برای مبتدیان، خواندن این بررسی را نیز توصیه می‌کنم.

طرح بندی وب سایت برای چیدمان برای کاربران مبتدی و با تجربه

TheFox - طرح بندی وب سایت چند منظوره

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

آوادا - موکاپ جهانی PSD

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

AdelFox - قالب PSD چند منظوره

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

سیاه + سفید - چیدمان ساده با طراحی مینیمالیستی

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

HUGE - مدل PSD جهانی برای وب سایت عالی

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

نسخه هایی برای وردپرس و جوملا برای این طرح وجود دارد تا توسعه را آسان تر کند.

Enfold - طرح بندی وب سایت های محبوب برای طرح بندی در قالب PSD

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

Waxom - طرح بندی فتوشاپ جهانی خالص

238 فایل، طراحی تمیز، فونت های گوگل و شبکه بوت استرپ. برنامه های کاربردی: نمونه کارها، میزبانی، پزشکی، مسافرت، کلیسا، املاک و مستغلات، اتومبیل، تجارت آنلاین و تجارت. همچنین طرح‌بندی‌های موبایل و تم وردپرس تنها با ۵۹ دلار وجود دارد.

حلقه ها - طرح بندی های جالب وب سایت با طراحی عالی

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

Travelo - کیت چیدمان آژانس مسافرتی

این طرح شامل طرح های شیک برای اپراتورهای تور و آژانس های مسافرتی است. 21 گزینه اسلایدر با پشتیبانی از Revolution و Layer Slider. 12 طرح بندی صفحه اصلی. یک نسخه وردپرس نیز وجود دارد.

Delimondo - طرح‌بندی وب‌سایت رستوران واکنش‌گرا

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

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

سفر خود را رزرو کنید - طرح بندی سایت برای طرح اپراتور تور

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

آژانس مسافرتی - طرح بندی وب سایت مسافرتی PSD چند وظیفه ای

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

بررسی سایت های آماده وردپرس برای بخش گردشگری را ببینید و.

Super Duper - طرحی شیک برای هر کسب و کاری

در این طرح در 150 فایل های فتوشاپشما 21 طرح بندی صفحه اصلی، بیش از 50 گزینه فروشگاه آنلاین، 10 صفحه وبلاگ، و حتی 2 طراحی وب سایت تک صفحه ای را خواهید یافت. طرح بندی موبایل ارائه شده است.

Carry Hill - طرح PSD وب سایت مدرسه

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

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