تنظیم ترازبندی عناصر html در Dreamweaver

• جزئیات
• نوع محتواآموزش تصویری

مقدمه

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

تنظیم ترازبندی عناصر html در Dreamweaver

در مطالب قبلی متن عنصر heading را با استفاده از روش های Dreamweaver ، و بدون استفاده از کدنویسی css ، تغییر دادیم. اکنون به بحث ترازبندی متن عنصر heading ، می پردازیم.

بنابراین، مرحله بعدی این است ، که تراز فونت را به مرکز تنظیم کنید. و اندازه آن را افزایش  دهید. برای این کار، می توانید. از ویژگی دیگری به نام Quick Edit ، نیز استفاده کنید.

برای استفاده از این ویژگی ، در قسمت code view ، روی بخشی که می خواهید تغییر دهید.  راست کلیک کنید. در این مورد ما روی تگ <h1> انجام می دهیم.

تنظیم ترازبندی عناصر html در Dreamweaver

روی گزینه Quick Edit ، از منوی باز شده ،کلیک کنید. اینکار، CSS مربوط به این عنصر، در زیر آن باز خواهد کرد. اکنون شما می توانید. کدهای css مورد نظر را به کدهای css ظاهر شده، به منظور تغییر دادن ظاهر عنصر html مورد نظر، اضافه کنید.

در اینجا ما برای تغییر دادن موقعیت عنصر به مرکز و افزایش اندازه فونت، کد زیر را اضافه می کنیم:

در هنگام تایپ، Dreamweaver نیز پیشنهاداتی را برای آنچه که می خواهید وارد کنید. ارائه می دهد. تا کار شما حتی ساده تر می شود.

زمانیکه کد را وارد کردید. نتیجه آن را در طرح وب سایت ، مشاهده می کنید:

تنظیم ترازبندی عناصر html در Dreamweaver بخش دوم

توجه داشته باشید. که متن در نمای زنده (live view) در حال حاضر تغییر کرده است. حالا، کلید Esc را فشار دهید. تا ویرایش سریع انجام شود. و به صفحه style sheet برسید. شما مشاهده خواهید کرد. که CSS جدید در مکان مناسب اضافه شده است.

به هر حال، اگر شما هنوز مطمئن نیستید. که هر کدام از ویژگی های CSS مربوط به چیست، به سادگی روی آن کلیک راست کرده و Docs را انتخاب کنید. (یا Ctrl + K را فشار دهید). Dreamweaver سپس به شما یک توضیح ، درباره آن کد css ، ارائه می دهد.

تنظیم ترازبندی عناصر html در Dreamweaver بخش سوم

سخن پایانی

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