parsgreen.com
article

آموزش انتقال قالب از فتوشاپ به کد html و css

web-photoshop-html

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

طراحی طرح اولیه قالب در فتوشاپ


برای طراحی قالب های وب، فتوشاپ ابزاری سودمند و کاربردی است، البته از دیگر برنامه ها نظیر کُرِل (corel) هم می توان استفاده کرد، اما گستردگی و قدرتمندی فتوشاپ را به حق هیچ برنامه ی مشابه ای ندارد، به هر صورت در این آموزش مبنا را فتوشاپ قرار داده ایم.
برای ایجاد یک قالب، بهتر است ابتدا طرح و اسکلت بندی آن را روی کاغذ بکشیم (مخصوصا اگر تازه شروع به این کار کرده اید) تا چارچوب کار در اختیارمان باشد، مثلا ممکن است بخواهیم قالبی طراحی کنیم که متشکل از عناصر هِدِر (سربرگ)، منوها، باکس های کناری (برای قالب یک طرفه یا دوطرفه)، قسمت مربوط به محتوا و مطالب، فوتر و منوی پائین صفحه باشد؛ بدین منظور ابتدا پهنای پیکسلی استانداردی انتخاب می کنیم، مثلا بین 850 تا 900 پیکسل و در فتوشاپ لایه ای جدید می سازیم، ارتفاع لایه مورد نظر به دلیل متفاوت بودن آن، مقادیری ثابت نیست، ولی در طراحی صفحه باید حداقلی برای آن در نظر بگیریم تا بتوانیم پیش نمایش کارمان را به درستی مشاهده کنیم، آنگاه با ابزارهای ترسیم اشکال (در قسمت نوار ابزارها)، عناصری را که پیشتر گفتیم را روی لایه مورد نظر می کشیم، تصویر زیر کامل شده گام اول ما را به صورت فرضی نشان می دهد.
web-photoshop-template

کدنویسی چارچوب قالب با html و css


اکنون که طرح کلی کار را کشیدیم، باید عناصر را تجزیه کنیم، برای این کار ابتدا بهتر است ستون بندی کار را با کدهای html و css پیاده کنیم تا جزئیات هر قسمت را در اختیار داشته باشیم، سپس تکه تکه، اجزاء را برش زده و به تصاویر قابل استفاده در css تبدیل کنیم، پس بدین منظور ویرایشگر html خود را به کار می گیریم، (برنامه های زیادی برای کدنویسی html و css وجود دارند، از جمله Adobe Dreamweaver)، ابتدا بلاک اصلی و تگ body را تنظیم می کنیم.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | انتقال قالب از فتوشاپ - گام اول</title>
<!--http://webgoo.ir-->
<style type="text/css">
body{
margin:0px;
padding:0px;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
.main-block{
width:900px;
height:auto;
border:#666 1px solid;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div class="main-block">
بلاک اصلی قالب html و css
</div>
</body>
</html>
توضیح:
- برای تگ body حاشیه ها را صفر قرار داده ایم تا تمام فضای خالی مرورگر را پوشش دهیم.
- در کلاس main-block پهنای پیکسلی را 900 تنظیم کرده ایم و آن را در وسط صفحه با تعریف margin-left:auto و margin-right:auto قرار داده ایم (به این ترتیب بلاک اصلی ما در وسط صفحه از هر طرف به یک میزان فاصله خواهد داشت).
- همانطور که در کد بالا ملاحظه می کنید، مقادیر ارتفاع به صورت خودکار تعریف شده است (height:auto) که اینکار به دلیل ثابت نبودن محتوای ماست (در بعضی صفحات استاتیک می توان مقادیری ثابت برای ارتفاع در نظر گرفت).

کدنویسی پیشرفته با css و ایجاد بلاک های تو در تو


اکنون که چارچوب کار را ساختیم، باید بلاک های تو در تو و به اصلاح آشیانه ای (nested) ایجاد کنیم، هرچند برخی طراحان، از جداول هم برای این منظور استفاده می کنند، اما به دلایلی که جای بحث دارد، بهتر است از بلاک های div به جای جداول استفاده کنیم، هدف از ایجاد این بلاک ها، شکل دهی و استحکام به لایه های درونی قالب است که نهایتا به صورت ستونهایی نامرئی، فرم کل قالب را شکل می دهند.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | انتقال قالب از فتوشاپ به html</title>
<!--http://webgoo.ir-->
<style type="text/css">
body{
margin:0px;
padding:0px;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
text-align:center;
}
.main-block{
width:900px;
height:auto;
border:#666 1px solid;
margin-left:auto;
margin-right:auto;
}
.header{
width:896px;
display:block;
margin-left:auto;
margin-right:auto;
height:150px;
border:#CCC 1px solid;
clear:both;
}
.top-menu{
height:30px;
width:896px;
display:block;
margin-left:auto;
margin-right:auto;
border:#CCC 1px solid;
}
.side-left{
float:left;
width:200px;
height:auto;
min-height:150px;
border:#CCC;
margin-left:auto;
margin-right:auto;
display:block;
border:#CCC 1px solid;
}
.side-right{
float:left;
width:200px;
height:auto;
min-height:150px;
border:#CCC;
margin-left:auto;
margin-right:auto;
border:#CCC 1px solid;
display:block;

}
.side-center{
float:left;
width:494px;
height:auto;
min-height:150px;
border:#CCC;
margin-left:auto;
margin-right:auto;
display:block;
border:#CCC 1px solid;
}
.footer{
width:896px;
height:100px;
display:block;
margin-left:auto;
margin-right:auto;
border:#CCC 1px solid;
clear:both;
}
.top-div{
width:198px;
height:30px;
display:block;
/*
background-image:url(bg-image-1.jpg);
background-repeat:no-repeat;
*/
}
.middle-div{
height:auto;
width:198px;
min-height:80px;
display:block;
/*
background-image:url(bg-image-2.jpg);
background-repeat:repeat-y;
*/
}
.bottom-div{
width:198px;
height:30px;
display:block;
/*
background-image:url(bg-image-3.jpg);
background-repeat:no-repeat;
*/
}
</style>
</head>
<body>
<div class="main-block">
<div class="header">هدر</div>
<div class="top-menu">منوی بالا</div>
<div class="side-left">
<div class="top-div">تیتر</div>
<div class="middle-div">محتوا</div>
<div class="bottom-div">پائین</div>
</div>
<div class="side-center">محتوا و مطالب</div>
<div class="side-right">باکس راست</div>
<div class="footer">فوتر و کپی رایت</div>
</div>
</body>
</html>
پیش نمایش
توضیح:
- در کلاس های بالا، بلاک هایی تو در تو تعریف و آنها را در بلاک اصلی (main-block) تنظیم کرده ایم.
- برای کنار هم قرار دادن چند بلاک مختلف در یک خط، می توان از عناصر float یا display:inline-block برای آنها استفاده نمود (در کلاس های بالا ما از float:left استفاده کرده ایم).
- با دقت در نحوه چینش بلاک ها، به راحتیِ کار با css در شکل دهی استایل صفحه پی خواهید برد، البته یادآور می شویم، ایجاد جلوه های زیباتر و رعایت جزئیات بیشتر، نیازمند تمرین و تکرار و تسلط نسبی بر css است.

ایجاد باکس های داینامیک و استفاده از ویژگی های background در css


کد بالا در قسمت میانی، سه بلاک استاتیک برای سایدبار چپ و راست و قسمت محتوای صفحه ایجاد می کند، اما اگر دقت کرده باشید، بسته به میزان محتوای درون این باکس ها، ممکن است ارتفاع آنها نیز کم و زیاد شوند، از این رو نیازمند تعریف پس زمینه ای داینامیک برای این نوع بلاک ها هستیم، این کار را هم باید با بلاک های div تو در تو انجام دهیم، به این صورت که برای قسمت میانی از ویژگی های پس زمینه در css و به طور خاص، تکرار در محور y ها استفاده کنیم، از این رو درون این بلاک ها، سه بلاک دیگر تعریف می کنیم؛ جهت نمونه ما این کار را برای سایدبار چپ به صورت زیر انجام داده ایم.
.top-div{
width:198px;
height:30px;
display:block;
background-image:url(bg-image-1.jpg);
background-repeat:no-repeat;
}
.middle-div{
height:auto;
width:198px;
min-height:80px;
display:block;
background-image:url(bg-image-2.jpg);
background-repeat:repeat-y;
}
.bottom-div{
width:198px;
height:30px;
display:block;
background-image:url(bg-image-3.jpg);
background-repeat:no-repeat;
}
و در داخل بلاک side-left آنها را تعریف می کنیم.
<div class="side-left">
<div class="top-div">تیتر</div>
<div class="middle-div">محتوا</div>
<div class="bottom-div">پائین</div>
</div>
توضیح:
- اگر دقت کرده باشید، به جهت متغیر بودن میزان ارتفاع به دلیل متفاوت بودن محتوا، از مقادیر height:auto برای بلاک میانی که محتوا را نشان می دهد استفاده کرده ایم.
- ویژگی background-repeat:repeat-y یک تصویر را به صورت همپوشانی تا جایی که کل ارتفاع را پوشش دهد در محور y ها تکرار می کند.
- برای تکه بالا و پائین بلاک، به عناصر استاتیک (با ارتفاع ثابت) نیاز داریم، لذا از پس زمینه ای ثابت و مقادیر background-repeat:no-repeat استفاده می کنیم.
- به نحوه قرار گیری و چینش بلاک های div به صورت تو در تو دقت کنید.

برش عناصر در فتوشاپ و ذخیره کردن آنها


با دانستن چارچوب کار، برش تصاویر کار سختی نیست، کافی است برای هر قسمت، به همان اندازه یک لایه جدید در فتوشاپ بسازیم و تصویر را در آن تنظیم کنیم، مثلا برای هدر قالب، یک لایه با اندازه 896 در 150 پیکسل (که قبلا در کد css تعریف کرده ایم)، در فتوشاپ ایجاد می کنیم، و تصویر هدر را به داخل آن می کشیم، یا حتی می توان آن را مجددا درون لایه جدید ترسیم کرد (انتخاب روش ها تا حدود زیادی بستگی به خودتان دارد).
web-template-transport
آنگاه خروجی کار را با فرمت jpg یا png ذخیره می کنیم تا از آن برای پس زمینه هدر استفاده کنیم.
برای آشنایی با نحوه برش پس زمینه های داینامیک، می توانید از آموزش زیر استفاده کنید:
نحوه ساخت باکس گوشه گرد در فتوشاپ و css

پیش نمایش نهایی قالب


پس از اینکه پس زمینه ها را برش زدیم و آنها را در تصاویر جداگانه ذخیره کردیم، برای تکمیل شدن قالبمان باید در کدها و کلاس های css آنها را تعریف کنیم و آنطور که انتظار داریم، موقعیتشان را تثبیت نمائیم، کدی که پیش تر از باب مثال نوشتیم را در زیر کامل کرده ایم، خطهای اضافی و راهنما را حذف و تصاویر را در آن تنظیم نموده ایم که در زیر می توانید کد و پیش نمایشی از آن را ببینید.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | انتقال قالب از فتوشاپ به html - کد کامل</title>
<!--http://webgoo.ir-->
<style type="text/css">
body{
margin:0px;
padding:0px;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
text-align:center;
}
.main-block{
width:900px;
height:auto;
border:#666 0px solid;
margin-left:auto;
margin-right:auto;
}
.header{
width:896px;
display:block;
margin-left:auto;
margin-right:auto;
height:150px;
border:#CCC 0px solid;
clear:both;
background-image:url(template/header.jpg);
background-repeat:no-repeat;
}
.top-menu{
height:30px;
width:896px;
display:block;
margin-left:auto;
margin-right:auto;
border:#CCC 0px solid;
background-image:url(template/menu.jpg);
background-repeat:repeat-x;
}
.side-left{
float:left;
width:200px;
height:auto;
min-height:150px;
border:#CCC;
margin-left:auto;
margin-right:auto;
display:block;
border:#CCC 0px solid;
}
.side-right{
float:right;
width:200px;
height:auto;
min-height:150px;
border:#CCC;
margin-left:auto;
margin-right:auto;
border:#CCC 0px solid;
display:block;

}
.side-center{
float:left;
width:494px;
height:auto;
min-height:150px;
border:#CCC;
margin-left:auto;
margin-right:auto;
display:block;
border:#CCC 0px solid;
}
.footer{
width:896px;
height:100px;
display:block;
margin-left:auto;
margin-right:auto;
border:#CCC 0px solid;
clear:both;
background-image:url(template/footer.jpg);
background-repeat:no-repeat;
}
.top-div{
width:198px;
height:30px;
display:block;
background-image:url(template/top-bg.jpg);
background-repeat:no-repeat;
}
.middle-div{
height:auto;
width:198px;
min-height:80px;
display:block;
background-image:url(template/middle-bg.jpg);
background-repeat:repeat-y;
}
.bottom-div{
width:198px;
height:30px;
display:block;
background-image:url(template/bottom-bg.jpg);
background-repeat:no-repeat;
}
.center-top-div{
width:496px;
height:30px;
display:block;
background-image:url(template/center-top-bg.jpg);
background-repeat:no-repeat;
}
.center-middle-div{
height:auto;
width:496px;
min-height:80px;
display:block;
background-image:url(template/center-middle-bg.jpg);
background-repeat:repeat-y;
}
.center-bottom-div{
width:496px;
height:30px;
display:block;
background-image:url(template/center-bottom-bg.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<!--بلاک اصلی -->
<div class="main-block">
<!--هدر قالب -->
<div class="header">هدر</div>
<!--منو -->
<div class="top-menu">منوی بالا</div>
<!--سایدبار سمت چپ -->
<div class="side-left">
<!--شروع باکس داخل سایدبار -->
<div class="top-div">تیتر</div>
<div class="middle-div">محتوا</div>
<div class="bottom-div">پائین</div>
<!--پایان باکس داخل سایدبار -->
</div>
<!--سایدبار محتوا -->
<div class="side-center">
<!--شروع باکس محتوا -->
<div class="center-top-div">تیتر</div>
<div class="center-middle-div">محتوا</div>
<div class="center-bottom-div">پائین</div>
<!--پایان باکس محتوا -->
</div>
<!--سایدبار سمت راست -->
<div class="side-right">
<!--شروع باکس داخل سایدبار -->
<div class="top-div">تیتر</div>
<div class="middle-div">محتوا</div>
<div class="bottom-div">پائین</div>
<!--پایان باکس داخل سایدبار -->
</div>
<!--قسمت مربوط به فوتر و کپی رایت -->
<div class="footer">فوتر و کپی رایت</div>
</div>
</body>
</html>
پیش نمایش
نکته: با دقت در نحوه تعریف استایل ها و کلاس های css و با دقیق شدن در تصاویر به کار رفته در آن، به راحتی می توانید به چگونگی انتقال قالب از فتوشاپ به صورت html و css پی ببرید، همانطور که می بینید، انجام این کار بیشتر نیازمند تسلط بر css است تا تسلط بر فتوشاپ.

نکات کلی در انتقال قالب از فتوشاپ به کد html و css


- تسلط بر css لازمه طراحی وب و انتقال قالب به صورت صحیح از فتوشاپ به صورت کد html است.
- برای شروع، سعی کنید از قالب های ساده و تک ستونه استفاده کنید.
- ویژگی های مختلف را در css با آزمون و خطا امتحان کنید تا مهارتهایتان در این خصوص به تدریج افزایش پیدا کند.
- از نوشته های راهنما در طراحی و کدنویسی خود حتما استفاده کنید، این کار موجب قابل فهم تر شدن کدنویسی شده و در مورد تغییرات بعدی کاربرد فراوان دارد.
- قالب های طراحی شده خود را حتی المقدور با مرورگرهای مختلف سازگار کنید.
- پس از تسلط نسبی در طراحی قالب، می توانید قبل از ایجاد طرح اولیه در فتوشاپ، ابتدا کدنویسی کار را انجام دهید، سپس الِمان ها را یکی یکی ایجاد کنید (این شیوه موجب افزایش سرعت کار می شود).
- طراحی وب، کاری سلیقه ای است، لذا سعی کنید شیوه مورد علاقه خودتان را پیدا کنید و با تمرین و تکرار، آن را توسعه دهید.
sectionدسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
» نحوه ساخت باکس گوشه گرد در فتوشاپ و css
» آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
» قابلیت های کاربردی CSS3 در طراحی وب
» طراحی باکس جستجو با فتوشاپ و CSS
» چگونه قالب های دو طرفه برای سایت یا وبلاگ خود طراحی کنیم؟
commentنظرات (۶۲ یادداشت برای این مطلب ارسال شده است)
نویسنده: فریبا
زمان: ۱۵:۵۸:۳۸ - تاریخ: ۱۳۹۱/۰۴/۲۲
سلام
عالی بود و یک سوال:
می خواستم سایدبارهای راست و یا چپ شامل چندین قسمت (div) باشند مثلاً قسمتی برای ورود به سایت، عضویت در خبر نامه و ... ؟
از پاسختان ممنونم.
پاسخ: 
سلام
همانطور که در مثال ها ملاحظه می کنید، سه بلاک زیر یک باکس کوچک ایجاد می کنند:
<div class="top-div">تیتر</div>
<div class="middle-div">محتوا</div>
<div class="bottom-div">پائین</div>
کپی دوباره آنها زیر هم یک باکس دیگر ایجاد می کند و...
<div class="top-div">تیتر</div>
<div class="middle-div">محتوا</div>
<div class="bottom-div">پائین</div>
<!-- باکس دوم -->
<div class="top-div">تیتر</div>
<div class="middle-div">محتوا</div>
<div class="bottom-div">پائین</div>
البته در این آموزش، هدف، آشنایی با نحوه ساخت چارچوب کار است و در کدنویسی کاربردی، ممکن است نیاز به تنظیمات دیگری با توجه به کل قالب باشد.
نویسنده: saeed tavakolii
زمان: ۱۴:۲۲:۲۸ - تاریخ: ۱۳۹۱/۰۴/۲۸
سلام آموزشتون عالی بود واقعا ممنونم نجاتم دادید
ایشالا خدا عوضشو بهتون بده...
نویسنده: میلاد
زمان: ۱۴:۲۴:۱۶ - تاریخ: ۱۳۹۱/۰۴/۲۹
سلام استاد
استاد آموزشها خیلی خیلی عالیه استاد من میخوام برای سایتم یه قالب بسازم میشه کمی منو راهنمایی کنی؟
پاسخ: 
سلام
اولین گام در طراحی یک قالب، تسلط و تجربه کافی در کار با html و css است، سپس تجربه نسبی در گرافیک و در اختیار داشتن المان هایی که در وب کاربرد دارند مانند آیکن ها، تصاویر پس زمینه و...، برخی سیستم های مدیریت محتوا (CMS) و مدیریت وبلاگ، تگ های خاص خود را دارند که در طراحی باید به آنها نیز توجه کنید. بقیه موارد تا حدود زیادی سلیقه ای و مبتنی بر تجربه است.
نویسنده: محمد رضا
زمان: ۱۳:۰۳:۵۷ - تاریخ: ۱۳۹۱/۰۵/۰۴
سلام
چطور می تونم ساید بارهای چپ و راست رو افزایش بدم؟
پاسخ: 
سلام
سوال شما مشابه نظر اول ارسال شده برای این مطلب است، لطفا به پاسخ مربوطه مراجعه کنید.
نویسنده: حسین
زمان: ۱۳:۱۰:۴۶ - تاریخ: ۱۳۹۱/۰۵/۰۴
با عرض سلام به مدیر سایت.
من میخوام یه منوی کشویی زیر هدر سایت بسازم چگونه این کار رو بکنم هر کاری میکنم منوی کشویی بالای هدر قرار میگیره؟
پاسخ: 
سلام
منو و سایر عناصر صفحه، معمولا باید با استفاده از css قابل تنظیم شدن باشند، البته رفع دقیق این مشکل نیاز به بررسی صفحه مورد نظر و دیدن سورس کد دارد، به طور مثال برخی مواقع استفاده از خاصیت ساده
clear:both;
می تواند مشکل را حل کند و در مقابل ممکن است ساختار کل صفحه شما نیاز به بازسازی داشته باشد.
نویسنده: نوشین
زمان: ۱۹:۲۱:۵۰ - تاریخ: ۱۳۹۱/۰۵/۱۸
سلام . بسیار ممنون از آموزش مفید و خوبتون نهایت استفاده رو از آموزشتون کردم . موفق باشید
نویسنده: حمزه
زمان: ۰۹:۰۲:۱۴ - تاریخ: ۱۳۹۱/۰۵/۲۵
با عرض سلام ميخواستم از مديريت وبسايت تشكر كنم و اگر بتوانيد مطالب بيشتري را در مورد برنامه نويسي و طراحي سايت درسايتتون قراردهيد
پاسخ: 
سلام
ممنون از شما، تا آنجا که امکان داشته باشد و طبق روال و طبقه بندی مطالب، به تدریج آموزش ها بیشتر و بیشتر خواهند شد.
نویسنده: arash
زمان: ۱۶:۰۱:۲۱ - تاریخ: ۱۳۹۱/۰۵/۳۱
ببخشین میشه یه برنامه ای معرفی کنید که قالب فتوشاپ رو به کد اچ تی ام ال تبدیل کنه
پاسخ: 
واقعیت مطلب را بخواهید، چنین برنامه ای وجود ندارد! شما تنها از برنامه هایی که قالب های آماده طراحی می کنند (مانند Artisteer) در این خصوص می توانید استفاده کنید، طراحی قالب در وب بیش از آشنایی با فتوشاپ نیاز به تسلط نسبی بر css دارد، یعنی باید html و css را یاد بگیرید.
نویسنده: arash
زمان: ۱۶:۳۰:۰۴ - تاریخ: ۱۳۹۱/۰۵/۳۱
ببخشید در این برنامه، طراحی قالب به صورت دلخواه هست یا نه؟
من تا حدودی html بلد هستم و از css سر در نمیارم
پاسخ: 
مسلما قدرت آن در حد قالب های کدنویسی شده شخصی نیست، بسته به میزان آشنایی شما با برنامه، می تواند در حد کار راه انداز یا حتی یک برنامه تقریبا حرفه ای باشد، به امتحانش می ارزد.
نویسنده: سهیل
زمان: ۱۶:۵۳:۰۵ - تاریخ: ۱۳۹۱/۰۵/۳۱
سلام
پیش نمایش نهایی قالب در برنامه notepad به خوبی نمایش داده نمیشه چرا؟؟؟؟؟؟؟؟
پاسخ: 
برنامه notepad یک ویرایشگر متنی ساده است و قابلیت پیش نمایش قالب ندارد!
نویسنده: سهیل
زمان: ۱۷:۱۳:۲۴ - تاریخ: ۱۳۹۱/۰۵/۳۱
خیلی ماه هستید در این روز زمونه که هیچکس به سوال آدم ها جواب نمیده شما میدید
پاسخ: 
خواهش می کنیم؛ تا جایی که بتوانیم و وقتمان اجازه بدهد، خوشحال می شویم اگر کمکی کرده باشیم.
نویسنده: سهیل
زمان: ۱۱:۴۷:۵۷ - تاریخ: ۱۳۹۱/۰۶/۰۱
سلام/ببخشید کلا برنامه هایی که در ساخت وب سایت لازم هست رو میشه نام ببرید تا تهیه کنم
پاسخ: 
سلام
برای ساخت وبسایت ابتدا باید html و css را فرا بگیرید، سپس برای ایجاد سایت از CMS های موجود به زبان PHP مثل جوملا، وردپرس و... استفاده کنید (به صورت متن باز و فارسی شده همراه با پشتیبانی در وب موجود هستند)، برای کدنویسی و برنامه نویسی پیشرفته از Adobe Dreamweaver CS استفاده کنید، برای کدنویسی های مقدماتی نیز می توانید از ++Notepad هم استفاده کنید که در وب موجود است.
نویسنده: سهیل
زمان: ۱۵:۵۷:۵۶ - تاریخ: ۱۳۹۱/۰۶/۰۱
سلام استاد برنامه Adobe Dreamweaver CS رو تهیه کردم وبعد نصبش کردم آیا آموزش کار با این برنامه رو دارید ،اگه ندارید هم مشکلی نیست خودم یه جورایی یاد میگیرم
پاسخ: 
متاسفانه آموزش خاصی در این مورد در اختیار نداریم، البته کار با این برنامه چندان سخت نیست، بخش اصلی کار آشنایی شما با زبان های برنامه نویسی وب است، سایر موارد با بررسی منوهای برنامه و کمی تجربه حل می شود.
نویسنده: محمد
زمان: ۱۷:۴۸:۰۴ - تاریخ: ۱۳۹۱/۰۶/۰۱
سلام عبارت
clear:both;
به چه معنیه ؟ چیکار میکنه ؟ چرا باید استفاده بشه ؟
متشکر
پاسخ: 
سلام
این عبارت در css استفاده می شود، وقتی به یک لایه آن را اختصاص می دهیم، باعث می شود تاثیرگذاری آن لایه (در فرمت بندی) در امتداد سمت چپ و راست خود کشیده شود و لایه های مجاور در پائین آن لایه قرار گیرند، معمولا از این خاصیت در هنگام کار با float نیز استفاده می شود، یا به طور مثال اگر قسمت فوتر یا بلاک پائینی یک قالب در مجاورت چند بلاک دیگر باشد و بخواهید بلاک فوتر در همه حال پائین تر از آنها نمایش داده شود، بین آنها می توانید از یک بلاک جداکننده با خاصیت clear:both استفاده کنید.
در طراحی وب برخی مواقع بلاک های زیرین به صورت ناخواسته بالاتر از بلاک های رویی قرار می گیرند که با clear:both می توان مانع این کار شد.
نویسنده: سهیل
زمان: ۱۴:۱۴:۲۰ - تاریخ: ۱۳۹۱/۰۶/۰۲
ببخشید استاد در قسمت (<title>وبگو | انتقال قالب از فتوشاپ به html - کد کامل</title>) منظورتان از کد کامل چیه کد کامل رو از کجا باید پیدا کنیم
پاسخ: 
این فقط عنوان صفحه ای است که کد آن را قرار داده ایم، از تگ title در html برای نمایش عناوین در صفحات وب استفاده می شود، یعنی همان عنوانی که در بالای مرورگر سمت چپ در نوار آبی رنگ می بینید! اگر پیش نمایش آنلاین قالب را ملاحظه کنید متوجه می شوید.
paged صفحه 1 از 5




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

3 × 1
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...