استفاده از برگه‌سبک‌های خارجی

ایجاد یک برگه‌سبک خارجی در NvU کار ساده‌ای است. CSS Editor را باز کنید و «Internal Stylesheet» را انتخاب کنید. بعد روی دکمهٔ «Export style sheet and switch to exported version» کلیک کنید.

یک پنجرهٔ محاوره‌ای باز می‌شود که از شما می‌خواهد برگه‌سبک خارجی خود را ذخیره کنید. هر اسمی که می‌خواهید می‌توانید انتخاب کنید، یک جفت قانون به شما می‌گویم. پرونده باید با پسوند css. تمام شود، همچنین از آن‌جایی که این پرونده در وب استفاده می‌شود، بهتر است در نام آن از فاصله استفاده نشود. اگر می‌خواهید که در نام پرونده فاصله داشته باشید از «_» استفاده کنید. برای این مثال من نام پرونده‌ام را My_stylesheet.css گذاشتم. هنگامی که پرونده را ذخیره می‌کنید، مطمئن شوید که در همان پوشه‌ای ذخیره می‌شود که باقی پرونده‌های وب‌سایت‌تان قرار دارد.

متوجه می‌شوید که در قسمت Sheets and Rules پنجرهٔ CSS Editor، ورودی برگه‌سبک شما از Internal Style Sheet به یک متن بلندتر که با //:file شروع می‌شود تبدیل شده است.

قبل‌تر گفته بودم که زمانی که از برگه‌سبک‌های خارجی استفاده می‌کنید در NvU یک اشکال کوچک وجود دارد. خوشبختانه تصحیح آن کار ساده‌ای است. تنها باید یک خط از کُد HTML صفحات را تغییر دهید. در این‌جا شاید بد نباشد که قسمتی از راهنما را که تفاوت پیوندهای نسبی را با مطلق تشریح می‌کرد، نگاه دوباره‌ای بیندازید.
روی زبانهٔ Source در پایین پنجرهٔ NvU کلیک کنید.

تمام کاری که باید بکنید این است که آن خط از کُد را که به پروندهٔ برگه‌سبک شما پیوند می‌دهد پیدا کنید. در تصویر فوق من این خط را رنگی کرده‌ام. وقتی شما در NvU یک برگه‌سبک خارجی می‌سازید، برنامه همیشه از نشانی مطلق آن استفاده می‌کند. تا زمانی که وب‌سایت‌تان روی کامپیوتر شما است این مورد مسئله‌ای ایجاد نمی‌کند، اما زمانی که وب‌سایت خود را روی یک کارگزار وب بارگذاری می‌کنید، پیوند مطلق ممکن است به درستی کار نکند. باید این پیوند را به یک پیوند نسبی تبدیل کنید.

برای این‌کار همه‌چیز را و حتی / را پیش از نام پروندهٔ css حذف کنید. همین! حالا روی زبانهٔ Normal در پایین پنجرهٔ NvU کلیک کنید. زمان خوبی برای ذخیره کردن صفحه است. این تصحیح را برای هر بار که از یک صفحه به یک برگه‌سبک خارجی در NvU پیوند می‌دهید باید اینجام دهید.
برای آن‌که ببینیم تا چه اندازه استفاده از برگه‌سبک‌های خارجی می‌تواند در زمان صرفه‌جویی کند، یک صفحهٔ سوم برای وب‌گاه می‌سازیم و تنها با چند کلیک (و تصحیح آن خط از HTML) چیدمان آن را درست می‌کنیم.
روی دکمهٔ «New» در قسمت بالا و سمت چپ پنجرهٔ NvU کلیک کنید. یک زبانهٔ خالی جدید ظاهر می‌شود. این زمان خوبی برای افزودن پیوند به برگه‌سبک در صفحه است. با کلیک کردن روی Tools > CSS Editor پنجرهٔ CSS Editor را باز کنید. این بار به جای کلیک کردن روی دکمهٔ «.Style elt» روی دکمهٔ «.Link elt» کلیک کنید.

روی دکمهٔ «Choose File» کلیک کنید.

یک پنجرهٔ محاوره باز می‌شود و از شما می‌خواهد که پروندهٔ CSS که می‌خواهید به آن پیوند بدهید را انتخاب کنید. پروندهٔ My_Styelsheet.css را انتخاب کنید.

بعد روی دکمهٔ «Create Stylesheet» کلیک کنید. (می‌توانید به پیغامی که به شما می‌گوید صفحه را ذخیره کنید توجه نکنید. می‌توانید بعد از این‌که کُد HTML را تصحیح کردید صفحه را ذخیره کنید).

حالا پنجرهٔ CSS Editor را ببندید و روی زبانهٔ Source در پایین پنجرهٔ NvU کلیک کنید. گام‌هایی را که موقع تبدیل پیوند مطلق به پیوند نسبی طی کرده بودید، دوباره تکرار کنید. وقتی کارتان تمام شد، کُد باید شبیه زیر به نظر بیاید:

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

این‌جا کمی لاتین است (این خط باید H1 باشد)

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ultricies lacus eu dui. Duis viverra risus et eros. Aenean odio dolor, tristique quis, commodo id, posuere sit amet, dui. Pellentesque velit. Aliquam erat volutpat. Duis sagittis nibh sed justo. Sed ultrices nisl sed pede. Sed tempor lorem in leo. Integer gravida tincidunt nunc. Vivamus ut quam vel ligula tristique condimentum. Proin facilisis. Aliquam sagittis lacinia mi. Donec sagittis luctus dui. Maecenas quam ante, vestibulum auctor, blandit in, iaculis in, velit. Aliquam at ligula. Nam a tellus. Aliquam eu nulla at turpis vulputate hendrerit. Proin at diam. Curabitur euismod.

و باز هم لاتین (H2)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque vel erat eget diam consectetuer iaculis. Cras ante velit, suscipit et, porta tempus, dignissim quis, magna. Vivamus viverra, turpis nec rhoncus ultricies, diam turpis eleifend nisl, a eleifend ante felis ac sapien. Integer bibendum. Suspendisse in mi non neque bibendum convallis. Suspendisse potenti. Sed sit amet purus at felis adipiscing aliquam. Vivamus et nisl sit amet mauris aliquet molestie. Integer tortor massa, aliquam a, lacinia nonummy, sagittis nec, eros. Nunc non mauris id eros venenatis adipiscing. Cras et lectus ut nisl pharetra ornare. Proin leo risus, elementum eget, ultrices vitae, molestie sed, erat. Curabitur et lectus in tellus egestas hendrerit. Sed dapibus ipsum. Quisque sit amet ligula. Suspendisse odio dolor, semper id, feugiat quis, sodales id, mauris. Curabitur id ligula ac libero malesuada pharetra.

و باز هم همچنان لاتین (H3)

Suspendisse potenti. Cras ut mi sit amet quam consequat consequat. Aenean ut lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse vel sapien. Nullam non turpis. Pellentesque elementum pharetra ligula. In rhoncus. Aliquam vel enim consequat sem aliquet hendrerit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam felis.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas tortor metus, pellentesque nec, vehicula vitae, suscipit sed, quam. Aenean scelerisque sodales tortor. Sed purus. Curabitur turpis est, bibendum tristique, porttitor tempor, pulvinar vitae, tortor. Nullam malesuada dapibus orci. Vivamus aliquet tempus velit. Curabitur interdum posuere risus. Duis egestas, ipsum sit amet molestie tincidunt, ligula libero pretium risus, non faucibus tellus felis mattis sapien. Ut eu velit at massa auctor mattis. Nam tristique velit quis nisl. Vivamus neque velit, ornare vitae, tempor vel, ultrices et, wisi. Cras pede. Phasellus nunc turpis, cursus non, rhoncus vitae, sollicitudin vel, velit. Vivamus suscipit lorem sed felis. Vestibulum vestibulum ultrices turpis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent ornare nulla nec justo. Sed nec risus ac risus fermentum vestibulum. Etiam viverra viverra sem. Etiam molestie mi quis metus hendrerit tristique.

در مثال پایین من یک تصویر نیز اضافه کرده‌ام:

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

همان‌طور که می‌بینید ظاهر صفحاتی که به یک برگه‌سبک پیوند دارند یکسان دیده می‌شود. متأسفانه گاهی این موضوع کمی زشت به نظر می‌رسد. زیرا تغییری که شما می‌خواهید در یک صفحه اعمال شود، در همهٔ صفحات اعمال می‌شود.
برای آن‌که این را در عمل ببینید، پنجرهٔ CSS Editor را بار دیگر باز کنید. یک قانون دیگر باید اضافه کنید که مشخص می‌کند که متن و رنگ پیش‌زمینهٔ صفحه به صورت پیش‌فرض چگونه باید دیده شوند.
در یک صفحهٔ HTML تمام اطلاعات یک صفحه که دیده می‌شود، میان برچسب‌های <body> و <body/> قرار دارند. اگر یک قانون را به این انتخاب‌گر نسبت دهید، هر تنظیمی درآن قانون، پیش‌فرض صفحه می‌شود. تمام قوانین دیگر که تعریف می‌کنید، استثنائات این قانون پیش‌فرض می‌شوند. پس در پنجرهٔ CSS Editor:

و مقادیر زیر را در زبانه‌های Text و Background وارد کنید:

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

صفحهٔ دوم:

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

محتویات این صفحه تحت اجازه‌نامه کریتیو کامانز است.