یک صفحه مگر چند تا پایین صفحه یا فوتر دارد
<footer></footer>
یک صفحه یک پایین صفحه دارد اما دوتا طراحی داشتیم یک طراحی بر مبنای بخش های آموزشی یک طراحی برمبنای پروژه ها با این فکر می گوییم اگر این بخش را به بعدا به یک
صفحه تبدیل کنیم فوترش را هم ایجاد کردیم اما در اصل فوتر یا پایین صفحه قسمت پایینی صفحه می شود در اصل یا در مسئله طراحی این قسمت می شود ولی بستگی دارد پایین صفحه مان را
کجا قرار بدهیم این هم از تگ فوتر و قسمت های مختلف صفحه مان و کجا قرار می گیرد بحث طراحی و فوتر این قسمت مربوط به تگ پاراگراف قبلا توضیح دادم
پاراگراف که تگ هایی که درونش قرار می گیرند اگر تگ پاراگرافی بسته نشود مرورگر آن را می بندد
یک خطای املایی داشتیم رفع کردیم اگر ایده طراحی نداشتید می توانید چند تا مثال ببینید تا راه بیفتید یا ایده طراحی داشته باشید یا بگیرید
این قسمت را می توانیم به حالت یا صورت یک صفحه جداگانه نگاه کنیم می توانیم قسمتی از این بخش باشد این طور که طراحی کردیم یک صفحه جدا گانه بیشتر می خورد
یک جستجویی در مورد طراحی متن کنیم از تمام این تگ ها استفاده کردیم الگوی طراحی بهتری می توانیم پیدا کنیم یا به ذهن مان می رسد از تگ هایی که قبلا
توضیح دادیم درحال استفاده هستیم یک تگ می تواند مجموعه ای از تگ ها باشد یعنی ما از یک تگی استفاده می کنیم که اگر بخواهیم ان کاری که می کند را طراحی کنیم باید
از چندین تگ استفاده کنیم یک روش دیگری که می توانیم ایده ای بگیرید در یک قسمت از وب سایت طراحی کدش را مشاهده کنید این قسمت از کد طراحی این وب سایت می باشد
کدهایش شبیه کدهای ما است ولی چرا نتیجه اش متفاوت است چون که از زبان های دیگر استفاده کرده است
این بخش هم شبیه قبل اگر به این موضوع فکر کنیم که طراحی مان جزوی از این صفحه باشد نیازی به فوتر ندارد اما اگر طراحی جدایی باشد نیاز به فوتر دارد
پس یک صفحه یا بخش اموزشی که می تواند جزویی از همین صفحه باشد یا می تواند جدا باشد
تشکیل شده از دوبخش مقاله و پایین صفحه می باشد
بخش مقاله تشکیل شده از دوبخش عنوان وزیر عنوان ها می باشد که زیر عنوان تقسیم شده اند به یک لیست توضیحات که
لیست توضیحات دو قسمت اول مفهوم عنوان انگلیسی و ترجمه توضیحات را رعایت می کند اما قسمت سوم که بقیه یا ادامه محتوای این صفحه یا بخش مان می باشد می تواند درون لیست توضیحات
قرار بگیرد که قرار دادیم اما ادامه یا بقیه محتوا جزو همین قسمت سوم می باشد حالا برای این قسمت هم یک طراحی در نظرمی گیریم پس طراحی که مد نظرم را براساس محتوا تا جایی پیش رفتیم
درون تگ توضیحات از یک تگ تغییرات متن استفاده کردم که جواب داد استفاده از تگ های تو درتو را قبلا توضیح دادم
استفاده از چند تا تگ توضیحات را هم توضیح دادم که به عنوان راه حل بود مشاهده کردید که وقتی تغییراتی در تگ لیست توضیحات ایجاد کردیم خطاهایی داشتیم خواستیم
بخش سوم را از بقیه بخش ها جدا کنیم الان قسمتی از بخش سوم درون تگ لیست توضیحات می باشد قسمتی از محتوایش درون تگ دایو می باشد یک روش که مثل قبل استفاده می کردیم
اگر براساس محتوا وتوضیحاتی که دادم طراحی بهتری توانستیم می توانید پیاده سازی کنید
استفاده از تگ خط جدید می باشد حالا از یک ویژگی که مربوط به خط جدید در تگ دایو می خواهیم استفاده کنیم این ویژگی این مقادیر را دارد
می توانید هر قسمت را در حال اجر نگاه کنید هرکدام را که خواستید درون سورس کدتان قرار بدهیدویژگی استایل کجا بود؟ برای کدام تگ می خواهیم استفاده کنیم برای این که
اجرای ویژگی را درون تگ یا روی تگ مشاهده کنیم باید کدام قسمت برویم از چه ویژگی می خواهیم استفاده کنیم ویژگی را وارد کردیم حالا مقدارش را می نویسیم
مثلا ویژگی روی
none
اجرا شد که محو شد روی هر حالتی که خواستید می توانید بگذارید همه این ویژگی را دارند مثلا تگ لیست توضیحات به صورت پیش فرض چنین ویژگی را از قبل دارد
فقط می توانیم تغییرش بدهیم نتیجه کاملا مشخص است حالا درون سورس کد می توانیم پیاده سازی کنیم به صورت پیش فرض این ویژگی را دارد اما اگر ما اضافه کنیم
یا تغییر بدهیم در این قسمت وارد می شود روی یک تگی اعمال کنم که کاملا مشخص شود من می خواستم از روشی استفاده کنم برطبق دایو که تکرار تگ های خط جدید حذف شود
که با این ویژگی نتواستم از تگ های دیگر باید استفاده کنم استفاده از ویژگی را دوباره تکرار کردیم با یک ویژگی جدید اشنا شدیم ولی چیزی که می خواستیم را پیاده سازی نکردیم
می خواستم این کار را حذف کنم و جای ان ازروش دیگری استفاده کنم به جای دائم از خط جدید استفاده کردن می توانستم از لیست استفاده کنم ولی مفهومی ندارد که برای این
روش از لیست استفاده کنم چون که خط جدید می خواهم بروندحالا از چه روشی استفاده کنم که این همه خط جدید تکرار نکنم اینجا تگ را تغییر بدهم ببینم فرقی ندارد
الان سوال این است که چطور این همه تگ خط جدید برای این قسمت وارد نکنم از چه تگی استفاده کنم یکی از راه ها جواب نداد استفاده از دایویا پاراگراف و استفاده از ویژگی
display
مثلا خود سایت برای این قسمت شبیه من استفاده کرده از تگ لیست استفاده کرده است ببینید سایت اموزش از چه روشی استفاده کرده است کلا طراحی اچ تی ام ال سایت اموزشی
استفاده از تگ پاراگراف می باشدبرای رفتن به خط جدید از پاراگراف استفاده کرده است یعنی به این شکل یک تقسیم بندی براساس پاراگراف کردیم
یعنی براساس محتوا یا براساس طراحی سورس کد هر جایی که نیاز به خط جدید داشت از پاراگراف استفاده کردم چقدر از این تگ استفاده کرده است در متن می خواهم ببینم پس خیلی کم
از این تگ استفاده کرده ولی استفاده کرده است درون متن از یک تگی به نام
<span></span>
استفاده کرده است از این استفاده کنیم از ویژگی استفاده کنیم پس همانطور که مشاهده می کنید ویژگی درست کارمی کند و به خط جدید می رود اگر یادتان رفت
می توانید از این قسمت استفاده کنید می بینید که در یک خط مجزا نیست و با استفاده از این ویژگی درون یک خط قرار می گیرد حالا در سورس کد اعمال می کنیم این هم
یک روش جایگزین خط جدید می باشد اگر استفاده از تگ های مختلف برای رفتن به خط جدید
این مسائلی که می تواند جایگزین مسئله استفاده از خط جدید شود
فیلم آموزشی:
فایل های مورد نیاز:
موفق باشید
به امید خدا
