سایت ها نیز اسکلت خاص خود را دارند. اما سؤال از پزشکان در مورد ویژگی های آن بی فایده است. بله، و دامپزشکان نیز از ساختار سایت آگاه نیستند. این فقط برای طراحان چیدمان شناخته شده است. ساختار اسکلت منبع آینده به آنها بستگی دارد. و راه اصلی برای ایجاد استخوان های اسکلت او، طرح بلوک است.
چیدمان وب سایت یک کاردستی برای افراد اختصاص داده شده است
چیزی مرموز در چیدمان سایت وجود دارد. اما این تا زمانی است که این هنر را بهتر بشناسید. بیایید تقدیم خود را شروع کنیم:
گام بعدی در توسعه سایت پس از ایجاد طرح آن، layout است. وظیفه طراح چیدمان این است که اسکلت سایت آینده را با استفاده از کدهای html و جداول css به دنیای مجازی منتقل کند. به عبارت ساده، اندازه و نسبت های منبع را به شکلی که برای مرورگر قابل درک باشد، منتقل کنید.
در فرآیند چیدمان با کد html، "اسکلت" سایت به قطعات تقسیم می شود. و با css شیت های سبک آبشاری) ابعاد «استخوان»، رنگ و محل آن تنظیم شده است.
چند نوع چیدمان وجود دارد:
I. جدولی - قبلاً روش اصلی چیدمان بود. در طرح بندی جدولی، از تگ برای تنظیم ساختار سایت استفاده می شود.
و فرزند آن را تگ می کند. چیدمان با استفاده از جداول به شما این امکان را می دهد که به تناسب تمام عناصر طراحی را نسبت به یکدیگر مرتب کنید. اما در عین حال، این کد بسیار حجیم به نظر می رسد:
همچنین از معایب اصلی کدهای جدولی می توان به بارگذاری طولانی آن و نمایه سازی ضعیف محتوا توسط موتورهای جستجو اشاره کرد.
محتوای یک صفحه مبتنی بر جدول نمایش داده نمی شود تا زمانی که همه داده ها بارگیری شوند. طرح بندی بلوک به شما امکان می دهد هر عنصر بارگذاری شده را جداگانه نمایش دهید.
نمایه سازی ضعیف صفحات جدولی با شکاف های بزرگ بین بلوک های متن واقع در سلول های مختلف جدول توضیح داده می شود.
در حال حاضر verst جدولی به ندرت به عنوان روش اصلی ایجاد سایت استفاده می شود. اکنون فقط برای ساختار داده های جدولی و ترتیب تصاویر گرافیکی استفاده می شود.
II. بلوک - در حال حاضر روش اصلی چیدمان است. بر خلاف طرح بلوک جدولی دارای تعدادی مزیت است:
جداسازی سبک عنصر از کد html.
توانایی پوشاندن یک لایه بر روی لایه دیگر - این ویژگی موقعیت عناصر را بسیار تسهیل می کند.
نمایه سازی بهتر توسط موتورهای جستجو؛
سرعت بارگذاری صفحه بالا، متشکل از عناصر مستقل متقابل؛
نقطه ضعف اصلی چیدمان بلوک مشخص است " گنگ» درک کد آن توسط مرورگرهای مختلف. بنابراین، اغلب صفحه html باید با استفاده از هک های ویژه "تمام" شود.
با ظهور طرح بندی بلوک، مفهومی مانند "سازگاری بین مرورگرها" متولد شد. با توجه به تفاوت در نمایش یک عنصر در مرورگرهای مختلف، طراحان چیدمان مجبورند قطعات کامل کد (هک) را در html اصلی وارد کنند.
عمل هک بسیار تخصصی است و مشکل نمایش نادرست را تنها در یک مرورگر حل می کند.
عنصر اصلی مورد استفاده در طرح بندی بلوک، تگ است.
. قطعه کدی که توسط این تگ جدا می شود لایه نامیده می شود. همه تصمیمات مربوط به سبک از کد html به شیوه نامه های آبشاری خارج می شوند. آنها از طریق ID یا کلاس های css قابل دسترسی هستند:
طرح بندی بلوک چگونه کار می کند؟
قبل از شروع طرح، طرح psd تمام شده سایت در یک ویرایشگر گرافیکی به بلوک (لایه) بریده می شود. تصاویر پس زمینه بریده شده در یک پوشه جداگانه قرار می گیرند که به طور جداگانه به هر لایه متصل می شود:
برای مثال، بیایید این طرح‌بندی وب‌سایت ایجاد شده در فتوشاپ را در نظر بگیریم. ابتدا در یک ویرایشگر متن، با استفاده از div، ساختار منبع آینده را تنظیم می کنیم و به هر لایه یک انتخابگر id اختصاص می دهیم. به نظر می رسد این ساختار:
سپس به ساختار سایت تمام شده در html با خط فایل css را ضمیمه کنید سپس شرح سبک هر لایه، موقعیت نسبت به سایر عناصر و ابعاد آن را به آن اضافه می کنیم.
شما می توانید در مورد تمام ویژگی های css از مستندات فنی زبان بیشتر بیاموزید.
به این صورت است که مثال طرح بلوک ما در پنجره مرورگر به نظر می رسد.
این درس برای کسانی که تازه شروع به یادگیری حکمت ایجاد وب سایت کرده اند توصیه می شود. آن شامل مفاهیم اساسیدر باره HTML و CSS. با رعایت گام به گام دستورالعمل های این درس، در عرض چند دقیقه یک قالب برای سایت خود قرار می دهید.
ما با استفاده از یک قالب وب سایت خواهیم ساخت طرح بلوک، من از برچسب استفاده می کنم - " DIV».
مرحله 1 - علامت گذاری صفحه وب خود با استفاده از تگ های HTML
اول از همه، ما باید صفحه وب خود را با استفاده از تگ های HTML علامت گذاری کنیم. فقط پس از آن می توانید با استفاده از CSS Cascading Style Sheets به طراحی سایت بروید.
HTML- این زبان نشانه گذاری فرامتن. ایجاد می کند ساختارصفحات وب. برای این منظور از تگ های HTML استفاده می شود. آنها در داخل پرانتز قرار می گیرند "<" и ">".
برچسب ها معمولاً به صورت جفت می آیند - باز و بسته می شوند. تفاوت دومی در این است که بعد از اولین پرانتز علامت "/" دارد. (مثلا:
). برچسب ها همان چیزی هستند که در صفحه وب خود تعریف می کنید.
برگه های سبک آبشاریcssبعدا اعمال شد آنها برای قرار دادن محتوای تگ ها در مکان های خاصی از صفحه و همچنین دادن ظاهر دلخواه به این محتوا ضروری هستند.
ساده ترین تگ های صفحه وب عبارتند از:
متعاقباً بین تگ ها قرار می گیرد شما تگ های دیگری را برای علامت گذاری عناصر صفحه وب قرار می دهید.
یک تگ مهم برای ساختار یک صفحه، تگ است
. با استفاده از آن می توانید صفحه خود را به بلوک ها تقسیم کنید.
در داخل این تگ می توانید تگ های HTML دیگری را که برای ایجاد محتوای سایت خود نیاز دارید (لینک ها، متن ها، تصاویر و ...) قرار دهید. سپس همه این عناصر با استفاده از CSS Cascading Style Sheets استایل دهی می شوند.
اکنون، با استفاده از یک ویرایشگر گرافیکی (به عنوان مثال فتوشاپ)، اجازه دهید بلوک های صفحه وب خود را ترسیم کنیم:
کد HTML این صفحه مانند کد زیر خواهد بود. این نمونه ای از استفاده از تگ است بخش:
همانطور که می بینید، هر تگ بخشما معینی دادیم انتخابگر شناسه. یعنی ما به هر بلوک صفحه خود نام خود را دادیم. این امر ضروری است تا بعداً هنگام استایل دهی به بلوک ها در فایل CSS، بتوانیم یک بلوک را از دیگری تشخیص دهیم.
دو نوع وجود دارد انتخابگرها. شناسه- برای بلوک های منحصر به فرد استفاده می شود، بلوک هایی که در هیچ جای دیگر صفحه تکرار نمی شوند. در حالی که انتخابگر کلاس- برای تعیین بلوک های تکرار شونده استفاده می شود.
همچنین، ما تمام بلوک ها را در داخل بلوک قرار داده ایم. ظرف". این کار به این دلیل انجام می شود که بعداً بتوانیم کل صفحه خود را همانطور که می خواهیم قرار دهیم.
مرحله 2 - ضمیمه کردن صفحه سبک CSS
همانطور که قبلا ذکر شد، شیوه نامه CSS طراحی عناصر صفحه وب را تعیین می کند. می توانید آن را در سند html خود قرار دهید یا یک فایل خارجی را پیوست کنید. در این آموزش از گزینه دوم استفاده خواهیم کرد.
اگر قبلاً صفحه وب خود را در یک مرورگر باز کرده باشید، چیزی در آنجا پیدا نخواهید کرد. این به این دلیل است که شما بلوک های خود را با محتوایی پر نکرده اید و هیچ شکل یا رنگی به آنها نداده اید. می توانید برای بلوک ها بین تگ های مربوطه محتوا اضافه کنید. اما شکل، محل رنگ و سایر تظاهرات خارجی بلوک ها را با استفاده از فایل CSS تنظیم می کنیم.
اما ابتدا باید آن را ایجاد کنید. بیایید آن را style.css بنامیم و آن را در همان پوشه سند html قرار دهیم. پس از آن، در فایل html، بین تگ ها، باید خط زیر را اضافه کنید:
بنابراین ما این دو فایل را با هم پیوند می دهیم. اکنون هنگام نمایش یک صفحه وب، مرورگر از شیوه نامه مناسب استفاده می کند.
مرحله 3 - سبک را تنظیم کنید
سینتکس CSS از یک انتخابگر، یک ویژگی و یک مقدار تشکیل شده است. انتخابگر برچسبی است که می خواهید با دادن ویژگی های مختلف ظاهر آن را مشخص کنید. یک ویژگی با استفاده از ویژگی‌های مختلف تنظیم می‌شود که به نوبه خود می‌توانند مقادیر متفاوتی بگیرند.
برای نوشتن انتخابگرهایی غیر از برچسب بدن، علائم" #
"یا" .
". آنها قبل از نام انتخابگر می آیند. اولین برای اشاره به استفاده می شود انتخابگرشناسه، دوم، به ترتیب انتخابگرکلاس. یک انتخابگر می تواند هر تعداد ویژگی داشته باشد. که در براکت های مجعد محصور شده اند " {}
".
#انتخاب کننده(
خاصیت: ارزش
خاصیت: ارزش
خاصیت: ارزش
}
انتخابگر(
خاصیت: ارزش
خاصیت: ارزش
خاصیت: ارزش
}
ما انتخابگرهای زیر را داریم:
بدن ظرف سرتیتر جهت یابی منو محتوا پاورقی
ویژگی های CSS و مقادیر ممکن:
زمینه (زمینه) را می توان با یک تصویر یا یک رنگ یا هر دو به طور همزمان مشخص کرد. برای نمایش تصویر باید مسیر رسیدن به آن را مشخص کنید. اگر پس‌زمینه روی یک رنگ تنظیم شود، از سیستم هگزادسیمال استفاده می‌شود (#ffffff برای سفید و غیره).
از ویژگی color برای تعیین رنگ متن استفاده می شود.
فونت-خانواده - این ویژگی خانواده فونتی را که برای نمایش متن استفاده می شود، تعریف می کند. به عنوان یک قاعده، سه نوع فونت به طور همزمان تنظیم می شود. بنابراین، اگر مرورگر نتوانست اولین مورد را نمایش دهد، گزینه های زیادی برای انتخاب دارد (Trebuchet MS، Arial، Times New Roman).
اندازه فونت- اندازه متن، تنظیم شده در سیستم های اندازه گیری مختلف، در اینجا از پیکسل ها استفاده خواهیم کرد.
لبه- محل بلوک را تعیین می کند. در این حالت، هم پنجره مرورگر و هم مرزهای سایر عناصر صفحه وب می توانند به عنوان یک نقطه مرجع عمل کنند. از آنجایی که می خواهیم صفحه خود را در وسط پنجره مرورگر قرار دهیم، مقادیر زیر را برای این ویژگی می نویسیم: 0px auto 0px auto. ورودی ممکن است ساده تر از 0px خودکار به نظر برسد. در مورد تنظیم این مقادیر، شمارش معکوس در جهت عقربه های ساعت می رود: بالا - راست - پایین - چپ. از آنجایی که بالا - پایین، راست - چپ برای ما یکسان است، نیازی به تکرار آنها نیست.
عرض- عرض بلوک
ارتفاع- ارتفاع
شناورخاصیتی است که به ما امکان می دهد عناصر انتخابگر را عمدتاً در سمت چپ یا راست قرار دهیم.
حالا بیایید کد را به فایل style.css خود اضافه کنیم (شما قبلاً آن را ایجاد کرده اید، درست است؟):
بدن ( پس زمینه: #f3f2f3; رنگ: #000000; font-family: Trebuchet MS، Arial، Times New Roman. اندازه فونت: 12px; }
در زمان نگارش این مقاله، همه مرورگرها صفحه وب ایجاد شده را به درستی نمایش ندادند. برای رفع این نقص می توانید از یک بلوک اضافی استفاده کنید که باید بلافاصله بعد از بلوک قرار گیرد محتوا.
این کد HTML آن است:
#روشن( واضح: هر دو }
و بین تگ ها سراگر به طور ناگهانی سعی می کنید متن روسی را به بلوک های خود اضافه کنید، مرورگر را بنویسید که چه رمزگذاری باید استفاده کند:
کد HTML نهایی:
مبانی HTML و CSS
سربرگ سایت
بلوک ناوبری
منو
محتوا
بدن (
پس زمینه: #f3f2f3;
رنگ: #000000;
font-family: Trebuchet MS، Arial، Times New Roman.
اندازه فونت: 12px;
}
#ظرف (
پس زمینه: #FFFFFF;
حاشیه: 30 پیکسل خودکار؛
عرض: 900 پیکسل
ارتفاع: 1000 پیکسل؛
}
#سرتیتر(
پس زمینه: #838283;
ارتفاع: 200 پیکسل؛
عرض: 900 پیکسل
}
#جهت یابی(
پس زمینه: #a2a2a2;
عرض: 900 پیکسل
ارتفاع: 20 پیکسل؛
}
#منو(
پس زمینه: #333333;
شناور به سمت چپ؛
عرض: 200 پیکسل
ارتفاع: 600px;
}
#محتوا(
پس زمینه: #d2d0d2;
float:right;
عرض: 700 پیکسل
ارتفاع: 600px;
}
#روشن(
واضح: هر دو
}
#پانویس (
پس زمینه: #838283;
ارتفاع: 180 پیکسل؛
عرض: 900 پیکسل
}
امیدواریم این درس به درک شما کمک کرده باشد اصول کار با HTML و CSS.
در مرورگر به این صورت است:
Layout سفر خود را از زمانی آغاز می کند که کد به زبان HTML نوشته می شد و نشانه گذاری با استفاده از جداول انجام می شد. با گذشت زمان، آنها از این موضوع فاصله گرفتند و نشانه گذاری به CSS منتقل شد. اکنون چندین نوع طرح وجود دارد. Flex-box، جعبه ابزار Bootstrap و جدیدترین Grids پیشرفته هستند و قدرت زیادی به سازندگان می دهند. یکی از گزینه های انتقالی در توسعه وب، طرح بندی بلوک است. قبلاً برای ایجاد نشانه گذاری کل صفحه استفاده می شد، اکنون منسوخ تلقی می شود، اما با این وجود هنوز در موارد خاص کاربرد گسترده ای پیدا می کند.
طرح بندی بلوک چیست؟
جایگزین جدول منسوخ و ناقص شد. صفحه از به اصطلاح لایه ها یا بلوک ها تشکیل شده است و تگ بسته شدن به عنوان آجر برای این کار عمل می کند.
. این یک تگ بلوکی است که عرض کامل عنصر والد و ارتفاع آن را متناسب با محتوا می گیرد. بعدها، چنین چیدمانی "شگفت انگیز" نامیده شد. اساس جهت یابی صفحه به اصطلاح کلاس ها هستند.
در حال حاضر، این نوع طرح به طور قابل توجهی منسوخ شده است، و خود برچسب
فقط باید برای هدف مورد نظر استفاده شود. بسیاری از تگ های صحیح معنایی ظاهر شده اند که حرکت در کد را آسان تر می کند. به عنوان مثال، یک برچسب ویژه برای منوی ناوبری وجود دارد
