سرصفحه ( پس‌زمینه: #00b0d8 url (images/header-gradient.png) repeat-x؛ ) .header-bg ( پس‌زمینه: url(images/header-animal.png) تکرار-x مرکز پایین؛ ارتفاع: 405px؛ )

در نتیجه، حجم فایل ها 12.5 کیلوبایت بود که حتی کمتر از حد انتظار است.

نام سایت

این نام روی یک ابر با لبه‌های پر نوشته شده است که اعمال آن را برای شیب دشوار می‌کند. دو راه برای دور زدن آنها وجود دارد.

1. با حفظ شفافیت از فرمت PNG-24 استفاده کنید.
2. تصویر را به‌عنوان یک GIF یا PNG-8 با یک برش گرادیان ذخیره کنید، و سپس تصویر را روی شیب قرار دهید تا مطابقت با پیکسل کامل شود.

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

سرصفحه ( پس‌زمینه: #00b0d8 url (images/header-gradient.png) repeat-x؛ ) .header-bg ( پس‌زمینه: url(images/header-animal.png) تکرار-x پایین مرکز؛ ارتفاع: 405px؛ /* ارتفاع سرصفحه */ تراز متن: مرکز؛ /* تراز وسط */ ) .header-bg img ( موقعیت: نسبی؛ /* موقعیت نسبی */ بالا: 40 پیکسل؛ /* انتقال تصویر به پایین */ )

تراز وسط از طریق ویژگی text-align اضافه شده به والد تگ انجام می شود ، و از طریق ویژگی بالا به پایین شیفت کنید. برای اینکه این ویژگی کار کند، تصویر باید با استفاده از ویژگی position تنظیم شده روی relative در موقعیت نسبی قرار گیرد.

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

مقدار / از ویژگی href به صفحه اصلی اشاره می کند و فقط روی وب سرور کار می کند نه محلی.

کد نهایی هدر در مثال 6.14 نشان داده شده است.

مثال 6.14. سربرگ سایت

HTML5 CSS 2.1 IE Cr Op Sa Fx

اغلب به نظر می رسد کارهای سادهطرح‌بندی به ساختار پیچیده‌ای از نشانه‌گذاری HTML و استفاده از ترفندهای CSS نیاز دارد. قرار دادن عناصر در مرکز یا تراز کردن محتوا می تواند بسیار خسته کننده باشد. یکی از این کارها تراز کردن عناصر در بالای سایت است به طوری که لوگو در سمت چپ و آیتم های منو در سمت راست قرار گیرند. می توانید از float و position:absolute استفاده کنید و برای تراز عمودی، حاشیه و padding را به عناصر مختلف اضافه کنید. به نظر می رسد هیچ چیز پیچیده ای نیست. اما اگر سایت باید به درستی نمایش داده شود دستگاه های تلفن همراه، مشکلات زیادی وجود دارد.

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

نشانه گذاری HTML تا حد امکان ساده است:

ارتفاع هدر ثابت است، اضافه کنید text-align: توجیه کردن، برای عناصر کودک:

سرصفحه (تراز متن: justify؛ فاصله حروف: 1px؛ ارتفاع: 8em؛ بالشتک: 2em 10%؛ پس‌زمینه: #2c3e50؛ رنگ: #fff؛ )

اضافه كردن صفحه نمایش: بلوک درون خطیبرای همه عناصر ناوبریتا بتوانید آنها را در کنار یکدیگر بچینید:

هدر h1، هدر ناو (نمایش: بلوک درون خطی؛)

نسبت دادن text-align: توجیه کردنبرای کار به روشی که می‌خواهیم، ​​باید از یک ترفند شبه عنصری که در تکنیک شبکه CSS کاملاً توجیه‌شده با استفاده از بلوک درون خطی توسط Jelmer de Maat یافت می‌شود، استفاده کنیم:

Header::after ( محتوا: ""؛ نمایش: inline-block؛ عرض: 100%؛ )

نتیجه تراز افقی، بدون استفاده بود شناورو موقعیت: مطلق. اکنون باید عناصر را به صورت عمودی تراز کنید. استفاده كردن تراز عمودیبرای عناصر ناوبریوابستگی به ارتفاع بلوک والد - هدر وجود خواهد داشت. و این خیلی درست نیست. نمونه هایی از استفاده از vertical-align: top و vertical-align: middle در jsbin. در زیر احتمالاً بیشترین است راه راحتچیدمان عمودی.

بیایید دوباره از شبه عناصر استفاده کنیم. با استفاده از مثالی از مرکزگذاری در مقاله ناشناخته ذکر شده توسط Michał Czernow:

هدر h1 (ارتفاع: 100%؛ ) سرصفحه h1::قبل (محتوا: ""؛ نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ ارتفاع: 100%؛ )
نتیجه چیزی است که شما نیاز دارید:

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

با استفاده از ترفند شبه عنصر در سرتیتر:

کد CSS

سرصفحه (تراز متن: justify؛ ارتفاع: 15em؛ بالشتک: 2em 5%؛ پس‌زمینه: #2c3e50؛ رنگ: #fff; ) header::after ( محتوا: ""؛ نمایش: inline-block؛ عرض: 100%; ) header > div, header nav, header div h1 ( نمایش: inline-block; عمودی-align: middle; ) header > div ( عرض: 50%؛ ارتفاع: 100%؛ text-align: چپ؛ ) header > div: :before ( محتوا: ""؛ نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ ارتفاع: 100%؛ )

خیلی بهتر به نظر می رسد:

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

کد CSS

هدر (تراز متن: justify؛ padding: 2em 5%؛ پس‌زمینه: #2c3e50؛ رنگ: #fff; ) header::after ( محتوا: ""؛ نمایش: بلوک درون خطی؛ عرض: 100%؛ ) هدر h1، پیمایش سرصفحه (نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ ) سرصفحه h1 (عرض: 50%؛ تراز نوشتاری: چپ؛ padding-top: 0.5em؛ ) هدر ناو (بالا padding: 1em؛ )

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

صفحه رسانه @ و (حداکثر عرض: 820 پیکسل) ( سرصفحه ( ارتفاع: خودکار؛ ) سرصفحه > div، هدر >

نتیجه پاسخگو است و در دستگاه های تلفن همراه به شکل زیر است:

در مثال از 820 پیکسل برای وضوح استفاده می شود، البته در یک سایت زنده، مقدار باید متفاوت باشد، مطابق با الزامات. برای پشتیبانی اینترنت اکسپلورر 8 شما باید از ":" به جای "::" برای شبه عناصر استفاده کنید.

کد نهایی CSS

url @import(http://fonts.googleapis.com/css?family=Lato:400,700 italic)؛ * ( بالشتک: 0؛ حاشیه: 0؛ ) بدنه (پس‌زمینه: #1abc9c؛ فونت-خانواده: «Lato»، sans-serif؛ تبدیل متن: بزرگ؛ فاصله حروف: 1 پیکسل؛) سرصفحه (تراز متن: justify ؛ ارتفاع: 8em؛ بالشتک: 2em 5%؛ پس‌زمینه: #2c3e50؛ رنگ: #fff؛ ) header::after ( محتوا: ""؛ نمایش: inline-block؛ عرض: 100%؛ ) header > div, header > div::before, header nav, header > div h1 (نمایش: inline-block؛ عمودی تراز: وسط؛ متن تراز: چپ؛ ) header > div ( ارتفاع: 100%؛ ) header > div::pre ( محتوا : ""؛ ارتفاع: 100%؛ ) header > div h1 (اندازه قلم: 3em؛ سبک قلم: مورب؛ ) header nav a ( padding: 0 0.6em; space white: nowrap; ) header nav a:last -child ( padding-right: 0; ) @media screen و (حداکثر عرض: 720px)( header ( ارتفاع: auto; ) header > div, header > div h1, header nav ( ارتفاع: auto; عرض: auto; display : بلوک؛ تراز متن: مرکز؛ ) )

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

نحوه ایجاد ساختار صفحه با استفاده از بلوک ها (طرح بندی بلوک)

1. چگونه طرح بندی صفحه خود را به بخش ها تقسیم کنید

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

صفحه وب استاندارد شامل بخش های زیر است:

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

عناصر،

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

برنج. 2. بخش های اصلی صفحه با برچسب ظرف

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

ظرف (عرض: 100٪؛ حداکثر عرض: 1024 پیکسل؛ /*حداکثر عرض ممکن است متفاوت باشد*/ بالشتک: 0 15 پیکسل؛ حاشیه: 0 خودکار؛ )

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

2. چیدمان هدر سایت و موقعیت عناصر آن

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

نشان‌واره ( شناور: چپ؛ ) nav ( شناور: راست؛ ) nav ul (حاشیه: 0؛ بالشتک: 0؛ سبک فهرست: هیچکدام؛ ) nav li (نمایش: بلوک درون خطی؛ /*یک راه برای ردیف کردن عناصر * /)

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

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

Container:after ( محتوا: ""؛ نمایش: جدول؛ روشن: هر دو؛ )

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

ظرف (عرض: 100٪؛ حداکثر عرض: 1024 پیکسل؛ بالشتک: 15 پیکسل؛ حاشیه: 0 خودکار؛ )

برنج. 5. تمیز کردن جریان

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

در مثال ما، ارتفاع لوگو 38 پیکسل است، بنابراین برای تراز کردن پیوندهای منو در وسط هدر، باید ارتفاع خط مناسب را برای آنها تنظیم کنیم:

Nav a (تزیین متن: هیچ، ارتفاع خط: 38 پیکسل؛ ) 7. پیوندهای منوی سرصفحه را تراز کنید

3. یک شبکه برای قسمت اصلی صفحه ایجاد کنید

قسمت اصلی صفحه اغلب شبکه ای از بلوک ها با عرض های مختلف است. موقعیت یابی چنین بلوک هایی نیز با استفاده از خاصیت float انجام می شود. هر ردیف از بلوک ها با یک بلوک اضافی با کلاس row پیچیده می شود:

برنج. 7. گرید بدنه صفحه %؛ float: چپ؛ ) .col-2-3 ( عرض: 66.6666666667%؛ float: چپ؛ )

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

Container:after، .row:after ( محتوا: ""؛ نمایش: جدول؛ روشن: هر دو؛ )

برای جدا کردن ردیف ها از یکدیگر، می توانید یک حاشیه پایین اضافه کنید:

ردیف (حاشیه-پایین: 15 پیکسل؛ )

ارتفاع بلوک های شبکه با ارتفاع محتوای آنها تعیین می شود، بنابراین می تواند متفاوت باشد:

ارتفاع بلوک ها را می توان با مشخص کردن صریح آن، به عنوان مثال، .row div (ارتفاع: 100 پیکسل) ثابت کرد. اما در این مورد، باید مطمئن باشید که هنگام افزودن سازگاری به چیدمان، محتوای بلوک ها از لبه بلوک فراتر نمی رود.

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

Lorem ipsum dolor sit amet.

Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus، eget vestibulum lorem semper at.

ردیف یک ( پس‌زمینه: آبی روشن؛ ) .col-2-3 (عرض: 66.6666666667%؛ شناور: چپ؛ پس‌زمینه: صدف دریایی؛ )

برنج. 9. بستر زمینه

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

4. صفحه پاورقی طرح

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

من فکر می‌کنم که بسیاری از شما قبلاً متوجه شده‌اید که اکنون روند عناصر طراحی بیشتر و چسبناک‌تر است که وقتی کاربر صفحه را اسکرول می‌کند در دید باقی می‌ماند. به نظر من، این بسیار راحت است، به خصوص اگر ناوبری سایت باشد. این دقیقاً همان مثالی است که امروز قرار است انجام دهیم. ما یاد خواهیم گرفت که چگونه یک هدر جی کوئری و CSS3 متحرک با انیمیشن بسازیم.

طبق معمول، معلوم می شود که این کار در حداقل خطوط کد انجام می شود و بسیار ساده و در عین حال بسیار مؤثر است. خب حالا بریم سر درس.

اما ابتدا می خواهم از http://www.webdesignerdepot.com تشکر فراوان کنم و اکنون بیایید شروع کنیم.

Ι

HTML

کد HTML بسیار بسیار ساده است، فقط باید تگ ها را تنظیم کنیم و سپس محتوای سایت را بین آنها بنویسیم:

هدر سایت پیوست شده

از آنجایی که این ساده‌ترین مثال است، در اینجا فقط متنی را بین تگ‌های h1 اضافه کرده‌ایم، اما می‌توان از تصاویر نیز در آنجا استفاده کرد، یا مثلاً از ناوبری سایت.

کد جی کوئری

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

هنگامی که موقعیت صفحه در مقدار اسکرول بیشتر از 1 باشد، به این معنی است که کاربر صفحه را اسکرول کرده است و باید کلاس "Sticky" را به تگ هدر سایت اضافه کنید. بنابراین، هدر سایت فعال و ثابت می شود.

و این هم خود کد:

$(window).scroll(function() ( if ($(this).scrollTop() > 1)($("header").addClass("sticky"); ) else($("header").removeClass ("چسبنده")؛ )))

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

css

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

سرصفحه (موقعیت: ثابت؛ عرض: 100٪؛ تراز نوشتاری: مرکز؛ اندازه قلم: 72 پیکسل؛ ارتفاع خط: 108 پیکسل؛ ارتفاع: 108 پیکسل؛ پس‌زمینه: #335C7D؛ رنگ: #fff؛ فونت-خانواده: "PT Sans "، بدون دندانه؛ )

حال برای قسمت سرگرم کننده: وقتی کاربر صفحه را به پایین اسکرول می کند، کلاس .sticky اعمال می شود که می توانیم انواع نمایش هایی را که CSS قادر به انجام آن است به آن ارائه دهیم. ما همچنین یک موقعیت ثابت تعیین می کنیم تا هدر وب سایت ما همیشه قابل مشاهده باشد.

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

Header.sticky (اندازه قلم: 24 پیکسل؛ ارتفاع خط: 48 پیکسل؛ ارتفاع: 48 پیکسل؛ پس‌زمینه: #efc47D؛ تراز نوشتاری: چپ؛ بالشتک به چپ: 20 پیکسل؛ )

این ساده ترین مثالی است که با آن باید اصل کار را درک کنید. همه چیز به طراحی سایت شما بستگی دارد.

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

انتقال: همه 0.4s سهولت.

Ι

نتیجه

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

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

برنج. 6.3. عرض درپوش

اضافه کردن یک عکس در هدر از طریق تصویر پس زمینه انجام می شود که باید با مرکز عنصر تراز شود.

سرصفحه (نمایش: بلوک؛ /* برای مرورگرهای قدیمی */ ارتفاع: 405 پیکسل؛ /* ارتفاع سرصفحه */ پس زمینه: url(images/header-bg.png) بدون تکرار در مرکز پایین؛ )

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

برنج. 6.4. تراز کردن تصویر به صورت افقی

در این شکل مفصل با فلش و شکاف نشان داده شده است تا مفصل دیده شود. اگر قسمت‌های راست و چپ تصویر پس‌زمینه را به درستی ویرایش کنید، مانند یک تصویر پیوسته، به‌صورت افقی بدون اتصالات قابل مشاهده تکرار می‌شود. باقی مانده است که با جایگزین کردن مقدار بدون تکرار (بدون تکرار) با تکرار-x (تکرار افقی) سبک را کمی تغییر دهید.

هدر (نمایش: بلوک؛ ارتفاع: 405 پیکسل؛ پس‌زمینه: آدرس اینترنتی (تصاویر/header-bg.png) تکرار-x مرکز پایین؛ )

برنج. 6.5. تصویر پس زمینه برای هدر

در قالب PNG-24، فایلی با پس‌زمینه 1325x405 پیکسل حدود 32 کیلوبایت و در PNG-8 با پالت 256 رنگ، که در آن کیفیت گرادیان تا حدودی بدتر است - حدود 15 کیلوبایت طول می‌کشد. می‌توانید پس‌زمینه را به دو بخش تقسیم کنید - یک گرادیان و یک تصویر، و هر تصویر را در فرمت خود ذخیره کنید، که باید منجر به افزایش کیفیت نمایش گرادیان شود. با این حال، 32 کیلوبایت برای چنین تصویر بزرگی زیاد نیست و کسی بهینه سازی اضافی را به عنوان "صرفه جویی در مسابقات" در نظر می گیرد. با این حال، یک روش جایگزین برای ایجاد هدر سایت برای کسی مفید خواهد بود و در صورت تمایل می توانید از آن صرف نظر کنید.

بهینه سازی هدر

از آنجایی که گرادیان در هدر به صورت افقی تکرار می شود، می توان آن را از طرح بندی خارج کرد و به عنوان تصویر پس زمینه تنظیم کرد. روی انجیر شکل 6.6 یک گرادیان بالای 405 پیکسلی را نشان می دهد که برای این منظور آماده شده است. فرمت PNG-24 اعوجاج را به تصویر وارد نمی کند و گرادیان ها را به خوبی فشرده می کند (اندازه نهایی 402 بایت است) بنابراین در این مورد قطعا باید از آن استفاده شود. قاب اطراف تصویر برای وضوح اضافه شده است.

برنج. 6.6. طراحی گرادیان (header-gradient.png)

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

برنج. 6.7. تصویر پس زمینه با شفافیت (header-animal.png)

از آنجایی که این تصویر در فرمت PNG-8 ذخیره شده است که تنها یک سطح شفافیت دارد، برخلاف 256 سطح فرمت PNG-24، مهم است که اطمینان حاصل شود که به درستی با پس زمینه گرادیان ترکیب می شود. برای انجام این کار، هنگام ذخیره در فتوشاپ، باید رنگ لبه ها (مات) را نزدیک به قسمت میانی گرادیان، جایی که سیلوئت روی آن قرار گرفته است، مشخص کنید. تقریباً این رنگ #9de1f0 می باشد. در این حالت، هیچ گونه خطوط کثیفی در اطراف درختان و حیوانات وجود نخواهد داشت و هنگامی که تصویر به شیب اعمال شود، به عنوان یک کل درک می شود.

دو تصویر برای پس زمینه هدر آماده می شود، کد HTML را می نویسیم.

و برای عنصر و لایه header-bg استایل کنید.

سرصفحه ( پس‌زمینه: #00b0d8 url (images/header-gradient.png) repeat-x؛ ) .header-bg ( پس‌زمینه: url(images/header-animal.png) تکرار-x مرکز پایین؛ ارتفاع: 405px؛ )

در نتیجه، حجم فایل ها 12.5 کیلوبایت بود که حتی کمتر از حد انتظار است.

نام سایت

این نام روی یک ابر با لبه‌های پر نوشته شده است که اعمال آن را برای شیب دشوار می‌کند. دو راه برای دور زدن آنها وجود دارد.

1. با حفظ شفافیت از فرمت PNG-24 استفاده کنید.
2. تصویر را به‌عنوان یک GIF یا PNG-8 با یک برش گرادیان ذخیره کنید، و سپس تصویر را روی شیب قرار دهید تا مطابقت با پیکسل کامل شود.

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

سرصفحه ( پس‌زمینه: #00b0d8 url (images/header-gradient.png) repeat-x؛ ) .header-bg ( پس‌زمینه: url(images/header-animal.png) تکرار-x پایین مرکز؛ ارتفاع: 405px؛ /* ارتفاع سرصفحه */ تراز متن: مرکز؛ /* تراز وسط */ ) .header-bg img ( موقعیت: نسبی؛ /* موقعیت نسبی */ بالا: 40 پیکسل؛ /* انتقال تصویر به پایین */ )

تراز وسط از طریق ویژگی text-align اضافه شده به والد تگ انجام می شود ، و از طریق ویژگی بالا به پایین شیفت کنید. برای اینکه این ویژگی کار کند، تصویر باید با استفاده از ویژگی position تنظیم شده روی relative در موقعیت نسبی قرار گیرد.

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

مقدار / از ویژگی href به صفحه اصلی اشاره می کند و فقط روی وب سرور کار می کند نه محلی.

کد نهایی هدر در مثال 6.14 نشان داده شده است.

مثال 6.14. سربرگ سایت

HTML5 CSS 2.1 IE Cr Op Sa Fx

چگونه در صحرا شیر را بگیریم؟

اغلب، وظایف طرح‌بندی به ظاهر ساده به ساختار نشانه‌گذاری HTML پیچیده و استفاده از ترفندهای CSS نیاز دارند. قرار دادن عناصر در مرکز یا تراز کردن محتوا می تواند بسیار خسته کننده باشد. یکی از این کارها تراز کردن عناصر در بالای سایت است به طوری که لوگو در سمت چپ و آیتم های منو در سمت راست قرار گیرند. می توانید از float و position:absolute استفاده کنید و برای تراز عمودی، حاشیه و padding را به عناصر مختلف اضافه کنید. به نظر می رسد هیچ چیز پیچیده ای نیست. اما اگر سایت باید به درستی در دستگاه های تلفن همراه نمایش داده شود، مشکلات زیادی وجود دارد.

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

نشانه گذاری HTML تا حد امکان ساده است:

خیلی بد

ارتفاع هدر ثابت است، اضافه کنید text-align: توجیه کردن، برای عناصر کودک:

سرصفحه (تراز متن: justify؛ فاصله حروف: 1px؛ ارتفاع: 8em؛ بالشتک: 2em 10%؛ پس‌زمینه: #2c3e50؛ رنگ: #fff؛ )

اضافه كردن صفحه نمایش: بلوک درون خطیبرای همه عناصر ناوبریتا بتوانید آنها را در کنار یکدیگر بچینید:

هدر h1، هدر ناو (نمایش: بلوک درون خطی؛)

نسبت دادن text-align: توجیه کردنبرای کار به روشی که می‌خواهیم، ​​باید از یک ترفند شبه عنصری که در تکنیک شبکه CSS کاملاً توجیه‌شده با استفاده از بلوک درون خطی توسط Jelmer de Maat یافت می‌شود، استفاده کنیم:

Header::after ( محتوا: ""؛ نمایش: inline-block؛ عرض: 100%؛ )

نتیجه تراز افقی، بدون استفاده بود شناورو موقعیت: مطلق. اکنون باید عناصر را به صورت عمودی تراز کنید. استفاده كردن تراز عمودیبرای عناصر ناوبریوابستگی به ارتفاع بلوک والد - هدر وجود خواهد داشت. و این خیلی درست نیست. نمونه هایی از استفاده از vertical-align: top و vertical-align: middle در jsbin. در زیر شاید راحت ترین راه برای تراز عمودی باشد.

بیایید دوباره از شبه عناصر استفاده کنیم. با استفاده از مثالی از مرکزگذاری در مقاله ناشناخته ذکر شده توسط Michał Czernow:

هدر h1 (ارتفاع: 100%؛ ) سرصفحه h1::قبل (محتوا: ""؛ نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ ارتفاع: 100%؛ )
نتیجه چیزی است که شما نیاز دارید:

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

با استفاده از ترفند شبه عنصر در سرتیتر:

کد CSS

سرصفحه (تراز متن: justify؛ ارتفاع: 15em؛ بالشتک: 2em 5%؛ پس‌زمینه: #2c3e50؛ رنگ: #fff; ) header::after ( محتوا: ""؛ نمایش: inline-block؛ عرض: 100%; ) header > div, header nav, header div h1 ( نمایش: inline-block; عمودی-align: middle; ) header > div ( عرض: 50%؛ ارتفاع: 100%؛ text-align: چپ؛ ) header > div: :before ( محتوا: ""؛ نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ ارتفاع: 100%؛ )

خیلی بهتر به نظر می رسد:

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

کد CSS

هدر (تراز متن: justify؛ padding: 2em 5%؛ پس‌زمینه: #2c3e50؛ رنگ: #fff; ) header::after ( محتوا: ""؛ نمایش: بلوک درون خطی؛ عرض: 100%؛ ) هدر h1، پیمایش سرصفحه (نمایش: بلوک درون خطی؛ تراز عمودی: وسط؛ ) سرصفحه h1 (عرض: 50%؛ تراز نوشتاری: چپ؛ padding-top: 0.5em؛ ) هدر ناو (بالا padding: 1em؛ )

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

صفحه رسانه @ و (حداکثر عرض: 820 پیکسل) ( سرصفحه ( ارتفاع: خودکار؛ ) سرصفحه > div، هدر >

نتیجه پاسخگو است و در دستگاه های تلفن همراه به شکل زیر است:

در مثال از 820 پیکسل برای وضوح استفاده می شود، البته در یک سایت زنده، مقدار باید متفاوت باشد، مطابق با الزامات. برای پشتیبانی از اینترنت اکسپلورر 8، به جای "::" از ":" برای شبه عناصر استفاده کنید.

کد نهایی CSS

url @import(http://fonts.googleapis.com/css?family=Lato:400,700 italic)؛ * ( بالشتک: 0؛ حاشیه: 0؛ ) بدنه (پس‌زمینه: #1abc9c؛ فونت-خانواده: «Lato»، sans-serif؛ تبدیل متن: بزرگ؛ فاصله حروف: 1 پیکسل؛) سرصفحه (تراز متن: justify ؛ ارتفاع: 8em؛ بالشتک: 2em 5%؛ پس‌زمینه: #2c3e50؛ رنگ: #fff؛ ) header::after ( محتوا: ""؛ نمایش: inline-block؛ عرض: 100%؛ ) header > div, header > div::before, header nav, header > div h1 (نمایش: inline-block؛ عمودی تراز: وسط؛ متن تراز: چپ؛ ) header > div ( ارتفاع: 100%؛ ) header > div::pre ( محتوا : ""؛ ارتفاع: 100%؛ ) header > div h1 (اندازه قلم: 3em؛ سبک قلم: مورب؛ ) header nav a ( padding: 0 0.6em; space white: nowrap; ) header nav a:last -child ( padding-right: 0; ) @media screen و (حداکثر عرض: 720px)( header ( ارتفاع: auto; ) header > div, header > div h1, header nav ( ارتفاع: auto; عرض: auto; display : بلوک؛ تراز متن: مرکز؛ ) )

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

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

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

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

رفع هدر هنگام اسکرول صفحه

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

در اینجا یک ساختار html ساده است! حالا بیایید استایل ها را اضافه کنیم!

#headerMain ( عرض: 920 پیکسل؛ ارتفاع: 195 پیکسل؛ حاشیه: 0 پیکسل خودکار؛ z-index: 0؛ ) #header ( عرض: 920 پیکسل؛ ارتفاع: 195 پیکسل؛ پس‌زمینه: url (../img/bg-header.jpg) بدون -تکرار؛ موقعیت: ثابت؛ z-index: 9999؛ )

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

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

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

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

عرض تصویر را 900 پیکسل، عرض سایت، ارتفاع را 200 پیکسل می کنیم. البته، شما می توانید ابعاد خود را داشته باشید، تا زمانی که عرض تصویر با عرض سایت (پوسته لفاف) مطابقت داشته باشد، ارتفاع به عهده شماست.

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

در انتخابگر #header ارتفاع داده شده به آن را حذف می کنیم و عرض و ارتفاع تصویر ساخته شده را تجویز می کنیم.

#سرتیتر(
عرض: 900 پیکسل - عرض
ارتفاع : 200 پیکسل - ارتفاع
پس زمینه رنگ: #25B33f ; - زمینه
margin-bottom : 10px ; - تورفتگی از پایین
}

سپس خود تصویر را بچسبانید.

#سرتیتر(
عرض: 900 پیکسل
ارتفاع : 200 پیکسل
پس زمینه رنگ: #25B33f ;
margin-bottom : 10px ;
background-image: url(images/i8.png) - تصویر
}

ویژگی پس زمینه رنگ در صورتی مشخص می شود که تصویر به طور ناگهانی در هیچ مرورگر بازدیدکننده نمایش داده نشود.

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

حالا نوبت عنوان و توضیحات سایت است. برای این کار یک بلوک div با شناسه id="header" در تگ بدنه می نویسیم و حاوی دو عنوان h1 و h3 است که نام سایت و توضیحات آن را در آن وارد می کنیم.

بیایید ببینیم چه چیزی بدست می آوریم.

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

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

نتیجه را ببینیم.

به نظر من خیلی نازه

بیایید کد این صفحه را خلاصه کنیم.

گزینه دیگری برای درج تصویر در هدر سایت وجود دارد. می توانید آدرس تصویر را در بلوک وارد کنید

• اندروید - عمومی
• امنیت
• دیگر
• بازی ها
• اینترنت
• صفحه کلید
• چند رسانه ای
• جهت یابی
• دفتر
• برنامه ها
• متفرقه
• سیستمیک

آخرین یادداشت ها

بازگرداندن صفحه حذف شده یا مسدود شده در همکلاسی ها

چرا Vkontakte موسیقی پخش نمی کند و در مورد آن چه باید کرد؟

چگونه یک شخص را در Vkontakte ذکر کنیم؟

اطلاعات بیوگرافی نقشه های برایان

VKontakte MP3 mod تغییرات در آخرین نسخه

محبوب

فیفا هنگام راه اندازی از کار می افتد

تبدیل ساعت به دقیقه در مایکروسافت اکسل

نمودارها و نمودارها در مایکروسافت اکسل

اخبار

2022-10-21 03:04:00

Nine Store - این برنامه چیست دانلود نسخه قدیمی فروشگاه نه

2021-11-30 17:27:20

مزایا و چشم اندازها

2021-11-30 17:27:20

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

2021-11-25 03:14:50

حرفه ای طراح وب: چقدر درآمد دارند و کجا باید این تخصص را مطالعه کرد؟

2021-11-25 03:14:50

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