PDA

View Full Version : سوال: شروع طراحی قالبی با Html


zahra_mt
سه شنبه 13 تیر 1391, 19:25 عصر
میخوام یه سایت فقط با html طراحی کنم، واسه شروع می خوام صفحه رو به 2 قسمت تقسیم کنم ،سمت راست حالت منو و لینک و گالری و . . . داشته باشه و سمت چپ متن اصلی باشه ، اگه ممکنه راهنماییم کنید،ممنون
Saber Mogaddas
سه شنبه 13 تیر 1391, 20:13 عصر
سلام
به گفته شما صفحه ما باید به دو قسمت تقسیم بشه برای اینکار از تگ div استفاده می کنیم ..برای اینکار این دو قسمت رو که از تگ div تشکیل شده در داخل یک div کلی قرار میدیم به صورت زیر :


<html>
<head>
<title></title>
<style type="text/css">
*
{
margin:0;
padding:0;
}

#Wraper
{
width:1000px;
min-height:10px;
overflow:hidden;
margin:0 auto;
}
#Right
{
width:300px;
height:400px;
float:right;
background-color:#909090;
}
#left
{
width:700px;
height:400px;
float:left;
background-color:#d7d7d7;
}


</style>
</head>
<body>
<div id="Wraper">
<div id="Right"></div>
<div id="Left"></div>
</div>
</body>
</html>

من به صورت دیو های تو در تو و استایل های بالا وسط صفحه به دو قسمت جدا کردم و حالا به همین شکل شما این کدهارو گسترش بدید و منوها و قسمت گالری رو درست کنید و مسلما تو زمان گسترش سوالاتی نیز پیش خواهد اومد که تو همین تاپیک مطرح کنید..
موفق باشید..
davood59
چهارشنبه 14 تیر 1391, 13:35 عصر
آقا صابر ضمن عذرخواهی از شما؛ این قسمت باید به Left تغییر پیدا کنه که مطمئنم در هنگام copy & paste این قسمت از مد نظرتون دور افتاده:

#Right ==> change to #Left{
width:700px;
height:400px;
float:left;
background-color:#d7d7d7;
}


با تشکر.
Web Arman
چهارشنبه 14 تیر 1391, 13:39 عصر
شما میتونید با استفاده از تگ DIV و دادن خصیصه Flot توسط CSS صفحه رو قالب بندی کنید.
zahra_mt
چهارشنبه 14 تیر 1391, 16:40 عصر
ممنون ازتون اما گفتن از style استفاده نکنید و فقط html باشه ، امکانش هست که فقط باhtml بشه این کارو کرد؟
Saber Mogaddas
چهارشنبه 14 تیر 1391, 19:39 عصر
سلام
خوب ببینید تگ های html رو استایل های اون کامل میکنه و توسط کد های css هست که می تونیم به یک تگ html ارتفاع ، عرض ، رنگ و .. بدیدم ..
استایل دادن به تگ html سه حالت داره :
1- Embedded :
که این نوع استایل دادن دقیقا به شکل مثالی هست که براتون قرار دادم و استایل هامون داخل تگ head و در داخل :


<style type="text/css">
Inja
</style>

قرار میگیره ..
2- inline هست که داخل تگ قرار میگیره با استفاده از پارامتر style به صورت زیر :


<p style="font-size: 14px; color: purple;"></p>

3-External هست که به عنوان یه فایل css استایل ها داخل آن قرار میگیرند و در تگ head این فایل به صورت زبر فراخوانی میشه :


<link href="Controls.css" rel="stylesheet" type="text/css" />
پس استایل باید تو طراحی ما باشه و تنها با کد html این کار عملی نیست..
موفق باشید.
davood59
چهارشنبه 14 تیر 1391, 19:42 عصر
آره ؛ میشه ؛ شما میتونید به جای استفاده از Div و یا style برای اینکه همش از Html استفاده کنید از Table استفاده کنید. ذکر این نکته هم خالی از لطف نیست که استفاده از Table استاندارد نیست و Div به مراتب از اون بهتره؛ ولی چون گفتن از style استفاده نکنید و حتما میخوان تمرینی باشه برای شروع شما؛ پس بهتره که از همون روشی که گفتم استفاده کنید.
شما برای اینکه بتونید در این زمینه خودتون رو تقویت کنید از این سایت استفاده کنید؛ فوق العاده سایت مفید و خوبیه برای شما

www.w3schools.com (http://www.w3schools.com)
Saber Mogaddas
پنج شنبه 15 تیر 1391, 12:30 عصر
سلام
تو table نیز مجبور به دادن استایل به صورت Inline خواهیم شد برای مثال می خواهیم صفحه ما برای فارسی تنظیم شه و یا راست چین و rtl بشه مسلما باید از استایل ها برای اینکار استفاده کنیم یا متن ما تو تگ h1 مثلا باید سمت راست قرار بگیره باید از استایل text-align:right برای اینکار استفاده کنیم و راه دیگه ای وجود نداره .. ما توسط html تگ هارو در صفحه قرار میدیدم و با استایل دادن به تگ ها اونارو شکیل و منظم و یا تنظیم میکنیم ..و یا به عکس ها عرض و طول میدیم و یا فونتمون رو تغییر میدیم سایز فونت و ..
پس با این قرار استایل ها یار جدانشدنی تگ های html میشن ..