• توجه: در صورتی که از کاربران قدیمی ایران انجمن هستید و امکان ورود به سایت را ندارید، میتوانید با آیدی altin_admin@ در تلگرام تماس حاصل نمایید.

جابجایی بخش های یک قالب

C

Cube

متخصص بخش هاستینگ و دامین
سلام

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

انجام این کارا بستگی به این داره که قالبتون چطوری طراحی شده باشه (طراحی قالب چقدر حرفه ای باشه)

قالب ها به 3 صورت طراحی میشن :


1- با جدول (Table)
(یک جدول کلی داریم و کلیه عناصر درون این جدول قرار دارند) >> طراح معمولی

2- با css و جدول
یک سری تگ <div> داریم که بوسیله کد CSS در جاهای مختلف صفحه موقعیت دهی شده اند و درونشان از جدول برای مثلا نمایش منو های بالای سایت و یا ... استفاده شده >> طراح نیمه حرفه ای


3- با css ( بدون بکار بردن جدول)یک سری تگ <div> داریم که بوسیله کد CSS در جاهای مختلف صفحه موقعیت دهی شده اند و درونشان
هم از تگ های <div> استفاده شده .... >> طراح حرفه ای

 
C

Cube

متخصص بخش هاستینگ و دامین



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



  • اگر قالب شما به روش دوم یا سوم ساخته شده باشه ، باید کمی کد نویسی انجام بدین و نیاز است که یکمی css بلد باشین. برای اینکار باید کد های css (استایل) بلوک (تگ div) مورد نظر رو تغییر بدید تا در صفحه در موقعیت جدیدی قرار بگیره
مثلا بنده یک بلوک که دی سمت راست صفحه قرار داره رو از سمت راست می خوام به سمت چپ ببرم

کد بلوک بنده اینه :
کد: 
<div style="width:80px;position:absolute;top:220px;right:50px">
عناصر درون بلوک
</div>
به دستورات سی اس اس top و right دقت کنین
این کد ها نشون میدن که بلوک ما ار بالای صفحه 220 پیکسل و از سمت راست 50 پیکسل باید فاصله بگیره ....
حال اگر بنده right رو به left تبدیل کنم ، بلوک بنده در همین ارتفاع (فاصله از بالای صفحه رو من تغییر ندادم) با سمت چپ میره :)))

البته همیشه به همین سادگی هم نیست و گاهی باید شما آنقدر با عدد ها بازی کنین تا دقیقا اون چیزی که می خواهید رو بدست بیارید .... (باید با زبان css آشنا باشین)

کد: 
 <div style="width:80px;position:absolute;top:220px;left:50px">
 عناصر درون بلوک
 </div>
 
آخرین ویرایش:
C

Cube

متخصص بخش هاستینگ و دامین
نکته : گاهی از کد های css برای وسط چین نمودن کل صفحه استفاده میشه .... در اینصورت کارتون یکم داستان دار میشه

در این روش دیگه از تگ منسوخ شده <center> استفاده نمیشه و از یک بلوک div استفاده میشه که بصورت زیر با css وسط چین میشه و کلیه عناصر صفحه رو درون این بلوک قرار میدیم .....

<
کد: 
div style="width:1024px;position:relative;margin:0px auto 0px auto">
بلوک ها و عناصر صفحه
</div>

​

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

دوستان علاقمند به یادگیری دقیق تر و کامل تر html و css به آدرس زیر مراجعه نمایند :

w3schools.com

موفق باشید
 
C

Cube

متخصص بخش هاستینگ و دامین
نکته 2 :
سوال : تو تگ div قالب بنده (یا هر تگ دیگه) خبری از کد css نیست ؟!!!

دستورات css رو به 3 صورت می تونن بنویسن :

1- بصورت inline و درون خود تگ ... مثل بالا و کاری که من در بالا انجام دادم و درون خود تگ و درون خصوصیت style کد هامو نوشتم
این روش باعث شلوغ شدن کد ها و سردرگمی در پروژه های بزرگ میشه

2- در تگ head : در این روش به بلوک ها (تگ هامون) یک آی دی میدیم و یا برای آن یک کلاس تعریف می کنیم و در داخل تگ head داریم :

کد: 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>[/SIZE] [SIZE=2]
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Hamid Sample Page</title>


<style type="text/css">[/SIZE]  [SIZE=2]

.cube{[/SIZE] [SIZE=2]
    width:100px;
    height:100px;
}

#hamid{[/SIZE] [SIZE=2]
    background-color:aqua;
    width:80px;
    height:120px;
}

</style>[/SIZE] [SIZE=2]

</head>[/SIZE] [SIZE=2]

<body>[/SIZE] [SIZE=2]

<div id="hamid">[/SIZE] [SIZE=2]
عناصر درون بلوک
</div>


<div class="cube">[/SIZE]  [SIZE=2]
عناصر درون بلوک
</div>

</body>[/SIZE] [SIZE=2]

</html>[/SIZE] [SIZE=2]
درون تگ head تگ style ایجاد می کنین و توش کد css میزنین ...
# برای بلوکی که آی دی خاصی داره استفاده میشه
. (دات) برای بلوکی که کلاس خاصی داره ، استفاده میشه

نکته : کلاس رو میشه به چند تا بلوک داد (مثلا چند تا بلوک داریم که اندازه همشون باید 100 در 100 باشه ) خیلی راحت یک کلاس با هر نامی دوست دارین می سازین و با کد css سول و عرض رو 100 پیکسل قرار میدین و بعد به همه بلوک هایی که باید اندازشون 100 در 100 باشه ، این کلاس رو میدین

3- در این روش کد های css رو درون یک فایل با پسوند css. می نویسین و بعد با کد زیر این سند رو به صفحتون متصل می کنین ...
کد: 
[/SIZE] [LEFT][SIZE=2]<link href="آدرس سند سی اس اس" rel="stylesheet" type="text/css"/>
[/SIZE] [/LEFT]
[SIZE=2]
​
 
C

Cube

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

پس اگر این کد رو دیدین .... بدونین که تو قالبتون از روش سوم استفاده شده و باید به آدرس سند css برین و اون رو دانبود کنین و تغییر بدین و یه جا آپلود کنین و آدرس فایل جدید رو تو قالبتون ست کنین ....
 
برای ارسال پاسخ شما باید وارد سیستم شوید.
بالا