آموزش برنامه نویسی وب و مهارتهای مرتبط
شنبه ۲۲ شهریور ۱۴۰۴
Saturday, September 13, 2025 GMT +3:30
Saturday, September 13, 2025 GMT +3:30
دسته بندی
دسترسی سریع
آموزش انتقال قالب از فتوشاپ به کد HTML و CSS
طراحی طرح اولیه قالب در برنامه فتوشاپ
کدنویسی چارچوب قالب با HTML و CSS
ایجاد بلاک های میانی با HTML و CSS
ایجاد باکس های داینامیک و واکنش گرا با HTML و CSS
برش عناصر در فتوشاپ و ذخیره به صورت فایل های مجزا
پیش نمایش نهایی و آنلاین قالب
نکات کلی در انتقال قالب از فتوشاپ به کد HTML و CSS
طراحی طرح اولیه قالب در برنامه فتوشاپ
کدنویسی چارچوب قالب با HTML و CSS
ایجاد بلاک های میانی با HTML و CSS
ایجاد باکس های داینامیک و واکنش گرا با HTML و CSS
برش عناصر در فتوشاپ و ذخیره به صورت فایل های مجزا
پیش نمایش نهایی و آنلاین قالب
نکات کلی در انتقال قالب از فتوشاپ به کد HTML و CSS
آموزش انتقال قالب از فتوشاپ به کد HTML و CSS
یکی از مهم ترین و در عین حال مشکل ترین مراحل در طراحی وب انتقال قالب و الگوی طراحی شده در برنامه های گرافیکی نظیر فتوشاپ به صفحه وب و تبدیل آن به صورت کدهای HTML و استایل CSS است، همانطور که می دانیم صفحات و قالب هایی که در فضای وب مورد استفاده قرار می گیرند از اصول خاص کدهای HTML و CSS پیروی می کنند و لذا صرف آشنایی با تکنیک های طراحی حرفه ای در فتوشاپ اگرچه به عنوان مقدمه اصلی کار لازم است اما بدون تسلط بر HTML و CSS کافی نیست، از طرفی شیوه هایی که برای تبدیل و به عبارتی ترجمه قالب ها استفاده می شود بیشتر اختیاری و سلیقه ای است و روش مشترکی بین طراحان و برنامه نویسان وب وجود ندارد، به هر صورت دانستن نکات ضروری در این خصوص لازمه شروع کار است که در این مطلب به آموزش آنها در حد امکان خواهیم پرداخت.
طراحی طرح اولیه قالب در برنامه فتوشاپ
برنامه فتوشاپ ابزاری سودمند و کاربردی در طراحی قالب های وب است، البته از دیگر برنامه های گرافیکی نظیر CorelDRAW شرکت کُرل هم می توانیم استفاده کنیم اما گستردگی و قدرتمندی فتوشاپ را به حق هیچ برنامه ی مشابه ای ندارد، به هر صورت در این آموزش مبنا را فتوشاپ قرار داده ایم.
برای ایجاد قالب وب بهتر است ابتدا طرح و اسکلت بندی ذهنی را روی کاغذ ترسیم کنیم تا چارچوب کار به صورت عینی در اختیارمان باشد، به طور مثال ممکن است بخواهیم قالب متشکل از عناصر هِدر (سربرگ)، منوها، باکس های کناری (برای قالب یک طرفه یا دوطرفه)، قسمت مربوط به محتوا و مطالب، فوتر و اطلاعات پائین صفحه باشد، بدین منظور برنامه فتوشاپ را اجرا کرده و مراحل زیر را انجام می دهیم:
- ابتدا از منوی File لایه جدید با پهنای پیکسلی دلخواه انتخاب می کنیم به طور مثال بین 860 تا 980 پیکسل.
عرض لایه در متدهای قدیمی بر اساس اندازه صفحه نمایش اکثریت کاربران تعیین می شد اما در شیوه های جدید با توجه به تنوع دستگاه هایی که کاربران برای مشاهده صفحات وب از آنها استفاده می کنند این مقدار میزان ثابتی نیست و معمولا با توجه به اندازه صفحه نمایش به صورت هوشمندانه ای متغیر خواهد بود، با آگاهی از این نکته فعلا برای شروع مقدار 860 تا 980 پیکسل را انتخاب می کنیم.
- ارتفاع لایه نیز به دلیل متغیر بودن آن در صفحات وب مقادیر ثابتی نیست و در ترسیم طرح اولیه قالب مقدار حداقلی (به فرض 800 پیکسل) برای آن در نظر می گیریم تا بتوانیم نمای کلی کارمان را به درستی در فتوشاپ مشاهده کنیم.
- پس از تعیین عرض و ارتفاع دلخواه در فتوشاپ لایه ی جدید را با پس زمینه شفاف یا به رنگ سفید می سازیم.
- در نهایت با ابزارهای ترسیم اشکال (در قسمت نوار ابزارها)، عناصری که پیشتر گفتیم یعنی هدر، منو، باکس ها و فوتر را روی لایه مورد نظر می کشیم.
تصویر زیر کامل شده گام اول ما را به صورت فرضی نمایش می دهد:
نکته: همان طور که اشاره شد امروزه در طراحی قالب های حرفه ای وب معمولا از متدهای پیشرفته مانند حالت واکنش گرا (Responsive) و مقدار عرض غیر ثابت (به طور مثال به صورت درصدی) استفاده می شود، آشنایی با این متدها نیاز به طی مراحلی دارد که در روند استاندارد از طراحی قالب های با عرض پیکسلی ثابت شروع و در گام های بعد می توانیم این قالب های ثابت را به حالت واکنش گرا تبدیل کنیم، در این آموزش سعی کرده ایم تا در عین آشنایی با شیوه قدیمی و مقداردهی ثابت از کدنویسی واکنش گرا نیز استفاده کنیم.
کدنویسی چارچوب قالب با HTML و CSS
پس از ترسیم طرح ذهنی قالب در برنامه فتوشاپ باید هر قسمت را به صورت مجزا تجزیه و به فایل های کوچکتر قابل استفاده در صفحات وب تبدیل کنیم اما قبل از این کار ستون بندی و چارچوب قالب را با کدهای HTML و CSS پیاده سازی می کنیم تا جزئیات فنی و کدنویسی هر قسمت را در اختیار داشته باشیم، بدین منظور ویرایشگر HTML خود را به کار می گیریم (برنامه های زیادی برای کدنویسی HTML و CSS وجود دارند از جمله Adobe Dreamweaver، PhpStorm و...)، ابتدا تگ body و بلاک اصلی را کدنویسی می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | انتقال قالب از فتوشاپ به HTML - تگ های اصلی</title>
<!-- Webgoo.ir -->
<style>
body {
font-family: Tahoma, Geneva, sans-serif;
text-align: justify;
font-size: 12px;
direction: rtl;
background: #2C376F;
}
.main-block {
width: 960px;
height: auto;
margin-left: auto;
margin-right: auto;
padding: 8px;
background: #FFFFFF;
text-align: center;
}
</style>
</head>
<body>
<div class="main-block">
بلاک اصلی قالب با کدهای HTML و استایل CSS
</div>
</body>
</html>- برای تگ body می توانیم حاشیه ها را صفر قرار دهیم تا تمام فضای خالی مرورگر پوشش داده شود (مرورگرها به صورت پیش فرض مقداری فضای خالی در حاشیه صفحه نمایش در نظر می گیرند)، در صورت نیاز برای این منظور خاصیت های زیر را به سلکتور body اضافه می کنیم:
margin: 0;
padding: 0;- همانطور که در کد بالا مشخص است مقادیر عرض به صورت پیکسلی ثابت (width: 960px) و ارتفاع به صورت خودکار (height: auto) تعریف شده است که این کار به دلیل ثابت نبودن محتوای صفحات وب است (البته در صفحات استاتیک که محتوای از قبل تعیین شده ای دارند می توانیم مقادیر ثابت متناسب با محتوا برای ارتفاع در نظر بگیریم).
ایجاد بلاک های میانی با HTML و CSS
اکنون که چارچوب کار را ساختیم باید بلاک های میانی را با تگ های HTML کدنویسی و با خواص CSS استایل دهی کنیم، منظور از بلاک های میانی پوشش های دربرگیرنده قسمت های اصلی قالب شامل بلاک سربرگ، بلاک منو، باکس ها، فوتر و سایر قسمت های اصلی قالب هستند که محتوای سطح پائین تری (فرزند) را در خود جای می دهند، در واقع قالب های وب عموما متشکل از چندین بلاک در سطح های مختلف و تو در تو (والد و فرزند) هستند که به صورت منظم و بر اساس هدف طراح در کنار هم قرار می گیرند، با این توضیح کدی که در بالا نوشتیم را به شکل زیر توسعه می دهیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | انتقال قالب از فتوشاپ به HTML - بلاک های میانی</title>
<!-- Webgoo.ir -->
<style>
body {
font-family: Tahoma, Geneva, sans-serif;
text-align: justify;
font-size: 12px;
direction: rtl;
}
div {
border-radius: 8px;
}
#main-block {
width: 960px;
height: auto;
margin-left: auto;
margin-right: auto;
padding: 8px;
background: #FFFFFF;
border: #CCC 1px solid;
text-align: center;
}
#header {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
height: 150px;
border: #CCC 1px solid;
text-align: center;
}
#top-menu {
display: block;
width: 100%;
height: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
border: #CCC 1px solid;
text-align: center;
}
#side-left, #side-right, #side-center {
display: inline-block;
width: 15%;
height: auto;
min-height: 150px;
margin: 8px auto auto 5px;
border: #CCC 1px solid;
text-align: center;
vertical-align: top;
}
#side-left {
margin: 8px auto auto auto;
}
#side-center {
width: 66%;
}
#footer {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
height: 100px;
border: #CCC 1px solid;
text-align: center;
}
.clear {
height: 8px;
clear: both;
}
/* تبدیل قالب پیکسلی ثابت به واکنش گرا */
@media screen and (max-width: 1010px) {
#main-block {
width: 90%;
}
#side-center {
width: 60%;
}
}
</style>
</head>
<body>
<div id="main-block">
<div id="header">Header</div>
<div id="top-menu">Menu</div>
<div id="side-right">Right</div>
<div id="side-center">Center</div>
<div id="side-left">Left</div>
<div class="clear"></div>
<div id="footer">Footer</div>
</div>
<hr>
معمولا قالب های وب متشکل از چندین لایه مختلف با سطح های متفاوت هستند، در هنگام طراحی و فرمت بندی ابتدا بلاک های با سطح بالاتر را تعریف کرده و سپس اجزای داخلی آنها را کدنویسی می کنیم.
</body>
</html>توضیح:
- در نمونه کد بالا بلاک های تو در تو تعریف و آنها را در بلاک اصلی (main-block) تنظیم کرده ایم.
- برای کنار هم قرار دادن چند بلاک مختلف در یک خط می توانیم از خاصیت float یا display با مقادیر inline-block استفاده کنیم.
- قسمت مربوط به media screen و تبدیل مقداردهی پیکسلی ثابت به درصدی برای ایجاد حالت واکنش گرا (Responsive) است، با در نظر گرفتن این حالت مرورگر به صورت خودکار اندازه عناصر مد نظرمان را برای مواقعی که عرض صفحه نمایش (صفحه مرورگر) از میزان 1010 پیکسل کمتر شود از پیکسلی به درصدی تبدیل می کند!، این تنظیمات می تواند شامل تمام خاصیت های متداول CSS باشد و محدود به عرض و ارتفاع نیست.
- در این نمونه کد سعی کرده ایم به صورت ساده ساختار قالب های وب را پیاده سازی کنیم، قاعدتا ایجاد جلوه های زیباتر و رعایت جزئیات بیشتر نیازمند تمرین و تکرار و تسلط نسبی بر HTML و CSS است.
ایجاد باکس های داینامیک و واکنش گرا با HTML و CSS
قاعدتا طراحی و کدنویسی قالب های وب صرفا به بخش چارچوب اصلی و بلاک های میانی ختم نمی شود، شاید زمانبرترین قسمت کار ایجاد باکس های داینامیک و واکنش گرا (سطح سوم) داخل بلاک های میانی (سطح دوم) باشد، هرچند با وجود خاصیت های فراوان CSS امروزه طراحان کمتر از تصاویر در قالب های وب بخصوص در پروژه های زمانبر استفاده می کنند اما عناصر گرافیکی جزء جدایی ناپذیر در بحث طراحی قالب هستند و برای حرفه ای بودن باید با این تکنیک ها نیز آشنا باشیم، در هر صورت در ادامه نحوه ایجاد باکس های داینامیک و واکنش گرا سطح سوم را با تکیه بر استفاده از عناصر گرافیکی (تصاویر) پی خواهیم گرفت.
همان طور که اشاره شد قالب های وب عموما از مجموعه ای بلاک و لایه تو در تو در سطوح مختلف تشکیل شده اند، سطح اول بلاک اصلی، سطح دوم بلاک های میانی و بخش های مروبط به دسته بندی امکانات قالب (سربرگ، منو، سایدبار، محتوا و...) و در نهایت درون هر قسمت میانی می توانیم لایه سطح سوم را به صورت داینامیک و واکنش گرا تعریف کنیم، منظور از داینامیک و واکنش گرا این است که با تغییر عرض صفحه مرورگر شکل قالب نیز متناسب با آن تغییر کند و به اصطلاح Responsive باشد، در نمونه کدنویسی زیر برای سایدبار قالب قسمت تیتر واکنش گرا در نظر گرفته ایم:
/* ایجاد تیتر داینامیک و واکنش گرا برای سایدبار */
.side-titr-wrapper {
position: relative;
height: 24px;
width: 100%;
}
.side-titr-left, .side-titr-right, .side-titr-center {
height: 24px;
background: #CCC;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.side-titr-left, .side-titr-right {
position: absolute;
width: 24px;
top: 0;
}
.side-titr-left {
left: 0;
background: url(side-titr-left.png) no-repeat;
}
.side-titr-right {
right: 0;
background: url(side-titr-right.png) no-repeat;
}
.side-titr-center {
width: 100%;
background: url(side-titr-center.png) repeat-x;
}<div id="side-right">
<div class="side-titr-wrapper">
<div class="side-titr-right"></div><div class="side-titr-center">Title</div><div class="side-titr-left"></div>
</div>
</div>- برای ایجاد سرتیتر واکنش گرا در مجموع از چهار بلاک div درون بلاک والد (side-right) استفاده کرده ایم.
- بلاک اول را side-titr-wrapper نامگذاری کرده ایم، منظور از Wrapper یعنی لفاف یا پوششی که مجموعه بلاک های سطح پائین تری را در خود جای می دهد، استفاده از لفاف در اینجا ضروری است چرا که برای کنار هم قرار دادن مقادیر پیکسلی و درصدی ناچار به استفاده از خاصیت Position در CSS هستیم.
- در درون بلاک side-titr-wrapper سه بلاک با نام های side-titr-left، side-titr-right و side-titr-center استفاده شده، این کار به جهت متغیر بودن عرض تیتر در حالت واکنش گرا است و از طرفی اگر بخواهیم پس زمینه گوشه های تیتر به فرض با تصویر گرافیکی خاصی باشند قاعدتا باید از فایل ثابتی استفاده کنیم، به این دلیل مقدار عرض دو بلاک چپ و راست به صورت پیکسلی ثابت (24 پیکسل) و مقدار عرض بلاک میانی به صورت درصدی مقدار دهی و پس زمینه آنها نیز متناسب با همین حالت طراحی شده است (اندازه های ثابت می توانند بسته به نیاز کمتر یا بیشتر از 24 پیکسل در نظر گرفته شوند).
- برای در کنار هم قرار دادن سه بلاک left، right و center در قسمت تیتر و در عین حال حفظ حالت واکنش گرا ناچاریم از تگ والد به عنوان لفاف (Wrapper) استفاده کنیم، در این حالت تگ والد را با خاصیت position و به صورت relative مقداردهی می کنیم.
- بلاک های left و right تیتر را با عرض 24 پیکسل و خاصیت position به صورت absolute مقداردهی می کنیم، در نظر گرفتن مقادیر absolute برای این بلاک ها باعث شناور شدن آنها در بلاک والد خود (بلاک لفاف) خواهد شد و در این حالت می توانیم با در نظر گرفتن خاصیت left و right یا top عنصر را به حاشیه ها هدایت کنیم.
- عرض بلاک center به جهت متغییر بودن قسمت تیتر در حالت واکنش گرا مقدار ثابتی ندارد و به صورت درصدی مقداردهی می شود.
- تعریف پس زمینه این بلاک ها متناسب با عرض و موقعیت قرارگیری متفاوت خواهد بود، برای بلاک left و right پس زمینه بدون تکرار است اما برای بلاک center پس زمینه در راستای محور X ها تکرار می شود.
در ادامه نحوه تجزیه فایل های تصویری استفاده شده در کدهای بالا را بررسی می کنیم.
برش عناصر در فتوشاپ و ذخیره به صورت فایل های مجزا
برای استفاده از تصاویر گرافیکی در قالب های وب ناچاریم آنها را به فایل های کوچکتر تجزیه کنیم، این کار به دلایل مختلف از جمله نیازهای فنی (کد محوری صفحات وب) و همچنین اهمیت بحث سرعت بارگذاری قالب ها است که در حالت بهینه باید با حداقل تصاویر حداکثر بازخورد را دریافت کنیم، به هر صورت با داشتن چارچوب کدنویسی شده قالب و اندازه ها، نحوه تکرار پس زمینه و مواردی از این دست برش عناصر در فتوشاپ و ذخیره به صورت فایل های مجزا کار چندانی دشواری نیست، به صورت مثال برای برش قسمت تیتر در باکس های قالب می توانیم مانند تصویر نمونه زیر عمل کنیم:
در این تصویر ابتدا در یک لایه با عرض دلخواه و ارتفاع 24 پیکسل شکل نهایی قسمت تیتر را با ابزارهای موجود در برنامه فتوشاپ (Blending Options) ترسیم می کنیم، در ادامه سه لایه با عرض و ارتفاع 24 پیکسل ایجاد می کنیم که برای اختصاص پس زمینه قسمت چپ، راست و میاتی بلاک تیتر کاربرد دارد، در نهایت خروجی این سه لایه را با فرمت jpg یا png به صورت فایل های مجزا ذخیره می کنیم تا از آنها در استایل نویسی CSS برای قسمت پس زمینه هدر استفاده کنیم، به فرض:
.side-titr-right {
right: 0;
background: url(side-titr-right.png) no-repeat;
}نحوه ساخت باکس گوشه گرد در فتوشاپ و CSS
پیش نمایش نهایی و آنلاین قالب
قالب های وب می توانند بسته به نیاز یا سلیقه طراح شکل ظاهری و امکانات متفاوتی داشته باشند که قاعدتا طرح همه این موارد در یک مطلب شدنی نیست، در این آموزش سعی شد تا حد امکان با پرهیز از پیچیده شدن مطلب اصول کلی کار برایمان روشن شود و به همین دلیل کدنویسی و امکانات نمونه قالب را در حد اولیه و حداقلی در نظر گرفتیم، به هر صورت برای جمع بندی مبحث و بررسی بیشتر، پیش نمایش نهایی و آنلاین قالب را در ادامه درج می کنیم که شامل تغییرات جزئی و افزودن چند قسمت صرفا جهت نمونه و جنبه آموزشی آن است:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | انتقال قالب از فتوشاپ به HTML - نمونه نهایی</title>
<!-- Webgoo.ir -->
<style>
body {
font-family: Tahoma, Geneva, sans-serif;
text-align: justify;
font-size: 12px;
direction: rtl;
}
a, a:hover {
text-decoration: none;
}
div {
border-radius: 8px;
}
#main-block {
width: 960px;
height: auto;
margin-left: auto;
margin-right: auto;
padding: 8px;
background: #F0F0F0;
border: #CCC 1px solid;
text-align: center;
}
#header {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
height: 150px;
background: #FFFFFF;
border: #CCC 1px solid;
text-align: center;
}
#top-menu {
display: block;
width: 100%;
height: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
background: #FFFFFF;
border: #CCC 1px solid;
text-align: center;
}
#side-left, #side-right, #side-center {
display: inline-block;
width: 15%;
height: auto;
min-height: 150px;
margin: 8px auto auto 5px;
background: #FFFFFF;
border: #CCC 1px solid;
text-align: center;
vertical-align: top;
}
#side-left {
margin: 8px auto auto auto;
}
#side-center {
width: 66%;
}
#footer {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
height: 100px;
background: #FFFFFF;
border: #CCC 1px solid;
text-align: center;
color: #999999;
}
.clear {
height: 8px;
clear: both;
}
.ltr {
direction: ltr;
}
/* امکانات قسمت سربرگ قالب */
.header-logo {
display: inline-block;
position: relative;
width: 20%;
height: 86%;
border: 1px dashed #CCCCCC;
text-align: center;
vertical-align: top;
margin: 1%;
}
.header-ads {
display: inline-block;
position: relative;
width: 30%;
height: 86%;
border: 1px dashed #CCCCCC;
text-align: center;
vertical-align: top;
margin: 1%;
}
.header-search {
display: inline-block;
position: relative;
width: 30%;
height: 86%;
border: 1px dashed #CCCCCC;
text-align: center;
vertical-align: top;
margin: 1%;
}
.input-search {
width: 100%;
}
.centered {
position: absolute;
width: 50%;
top: 40%;
left: 25%;
text-align: center;
}
/* ایجاد تیتر داینامیک و واکنش گرا برای سایدبار */
.side-titr-wrapper {
position: relative;
height: 24px;
width: 100%;
}
.side-titr-left, .side-titr-right, .side-titr-center {
height: 24px;
background: #CCC;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.side-titr-left, .side-titr-right {
position: absolute;
width: 24px;
top: 0;
}
.side-titr-left {
left: 0;
background: url(side-titr-left.png) no-repeat;
}
.side-titr-right {
right: 0;
background: url(side-titr-right.png) no-repeat;
}
.side-titr-center {
width: 100%;
background: url(side-titr-center.png) repeat-x;
}
/* سایر تنظیمات قسمت سایدبار */
.side-content-justify {
text-align: justify;
padding: 4px;
line-height: 22px;
color: #333;
}
/* تبدیل قالب پیکسلی ثابت به واکنش گرا */
@media screen and (max-width: 1010px) {
#main-block {
width: 90%;
}
#side-center {
width: 60%;
}
}
</style>
</head>
<body>
<div id="main-block">
<div id="header">
<div class="header-logo">
<div class="centered">
Logo
</div>
</div>
<div class="header-ads">
<div class="centered">
Ads
</div>
</div>
<div class="header-search">
<div class="centered">
<label for="search">جستجو:</label>
<input name="search" id="search" class="input-search" type="text" placeholder="جستجو...">
</div>
</div>
</div>
<div id="top-menu">
<a href="#" title="Link 1">Link 1</a> | <a href="#" title="Link 2">Link 2</a> | <a href="#" title="Link 3">Link 3</a>
</div>
<div id="side-right">
<div class="side-titr-wrapper">
<div class="side-titr-right"></div><div class="side-titr-center">Title</div><div class="side-titr-left"></div>
</div>
</div>
<div id="side-center">
<div class="side-titr-wrapper">
<div class="side-titr-right"></div><div class="side-titr-center">Title</div><div class="side-titr-left"></div>
</div>
<div class="side-content-justify">
طراحی قالب های وب بیش از اینکه متکی بر برنامه های گرافیکی نظیر فتوشاپ باشد، به تسلط بر کدنویسی HTML و استایل نویسی CSS نیاز دارد.
</div>
</div>
<div id="side-left">
<div class="side-titr-wrapper">
<div class="side-titr-right"></div><div class="side-titr-center">Title</div><div class="side-titr-left"></div>
</div>
</div>
<div class="clear"></div>
<div id="footer">
<a href="#" title="Link 1">Link 1</a> | <a href="#" title="Link 2">Link 2</a> | <a href="#" title="Link 3">Link 3</a>
<br>
<br>
کلیه حقوق این سایت محفوظ می باشد.
<br>
<br>
<div class="ltr">
©Copyright <a href="https://webgoo.ir" title="Webgoo">Webgoo.ir</a>
</div>
</div>
</div>
<hr>
- امکانات قالب صرفا جنبه ظاهری و تست دارد!
<br><br>
- با تغییر اندازه پنجره مرورگر می توانیم حالت واکنش گرا (Responsive) قالب را بررسی کنیم.
</body>
</html>نکات کلی در انتقال قالب از فتوشاپ به کد HTML و CSS
و در پایان چند نکته در خصوص انتقال قالب از برنامه فتوشاپ به کد HTML و CSS:
- تسلط بر CSS لازمه طراحی وب و انتقال قالب به صورت صحیح از فتوشاپ به صورت کد HTML است.
- برای شروع بهتر است با قالب های ساده و تک ستونه کار کنیم.
- خاصیت های مختلف CSS را با آزمون و خطا امتحان کنیم تا مهارتهایمان در این خصوص به تدریج افزایش پیدا کند.
- از نوشته های راهنما در کدنویسی خود استفاده کنیم، این کار موجب قابل فهم تر شدن سورس کدها شده و در هنگام اعمال تغییرات بعدی و توسعه برنامه کاربرد فراوان دارد.
- قالب های طراحی شده خود را حتی المقدور با مرورگرهای مختلف تست و سازگار کنیم، مرورگرهای وب برخی خاصیت ها را به شکل واحد پردازش نمی کنند!
- پس از تسلط نسبی در طراحی قالب وب، می توانیم قبل از ایجاد طرح اولیه در برنامه فتوشاپ ابتدا کدنویسی کار را انجام دهیم، سپس المان های مورد نیاز را مورد به مورد طراحی کرده و خروجی بگیریم، این شیوه باعث افزایش سرعت کار می شود.
- طراحی وب تا حدود زیادی کاری سلیقه ای است، سعی کنیم شیوه مورد علاقه خودمان را پیدا کرده و با تمرین و تکرار آن را توسعه دهیم، الگوبرداری از طرح های موجود نیز می تواند در خلق ایده های جدید راهگشا باشد.
دسته بندی: مهارتهای وب » طراحی وب
مطالب بیشتر:آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
طراحی قالب سه بعدی وب با فتوشاپ و CSS
چگونه قالب های دو طرفه برای سایت یا وبلاگ خود طراحی کنیم؟
زیبا سازی فرم های وب با CSS
طراحی و کدنویسی هدر قالب با فتوشاپ، HTML و CSS
دیدگاه
۶۳ دیدگاه برای این مطلب ارسال شده است. چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.زهرا سادات هزاوه
۲۲:۱۰ ۱۳۹۸/۰۹/۲۳
سلام ممنون از اموزش هاتون
می خواستم یه سوال بپرسم من یه سایت با فوتوشاپ طراحی کردم حالا می خوام به HTML لینکش کنم. میشه بگید کدش چیه؟
می خواستم یه سوال بپرسم من یه سایت با فوتوشاپ طراحی کردم حالا می خوام به HTML لینکش کنم. میشه بگید کدش چیه؟
منظورتان از لینک به HTML مشخص نیست؟! بعد از مرحله طراحی باید فایل را به کدهای HTML تبدیل کنید که روند کار در این آموزش توضیح داده شده است.
amin
۱۹:۲۶ ۱۳۹۸/۰۲/۰۹
سلام استاد. ممنون از توضیحاتتون خیلی عالی بود.
استاد با توجه به اینکه تازه شروع به یادگیری کردم یه سوال داشتم ازتون؛ با وجود اینکه سه تا کلاس header-search, header-ads-header-logo به ظاهر فقط در width باهم فرق دارن، وقتی به جای این سه کلاس از یک کلاس استفاده میکنیم، جواب یکسانی نمیگیریم، آیا جز کلاسهای آماده هستند یا دلیل دیگری دارد؟
استاد با توجه به اینکه تازه شروع به یادگیری کردم یه سوال داشتم ازتون؛ با وجود اینکه سه تا کلاس header-search, header-ads-header-logo به ظاهر فقط در width باهم فرق دارن، وقتی به جای این سه کلاس از یک کلاس استفاده میکنیم، جواب یکسانی نمیگیریم، آیا جز کلاسهای آماده هستند یا دلیل دیگری دارد؟
خیر، کلاس ها به صورتی دلخواه و فرضی تعریف شده اند، در صورتی که به صورت صحیح در قسمت CSS و HTML عناوین را تغییر دهید نباید مشکلی بروز کند (تست نشده)، در صورت تمایل نمونه فایلتان را به آدرس ایمیل ما (موجود در بخش تماس) ارسال کنید تا بررسی کنیم.
saeid abdollahi
۱۹:۰۶ ۱۳۹۷/۰۸/۲۶
سلام خسته نباشید میخواستم بپرسم که ایا کلاس اموزش سایت نویسی 0 تا 100 دارین برای ثبت نام یا خیر
خیر، در حال حاضر آموزش ها صرفا از طریق سایت منتشر می شوند.
محمد
۰۰:۲۸ ۱۳۹۷/۰۶/۱۷
سلام من با html و css قالب و شکل سایت رو ساختم روی public_html اپلود کردم ولی وقتی دامنه رو سرچ میکنم صفحم بالا نمیاد چیکارر باید کنم؟؟!
اگر منظورتان در لیست موتورهای جستجو مانند گوگل است، بهتر است سایتتان را در ابزار وبمستر گوگل ثبت کرده و مدتی صبر نمائید، همچنین باید صفحات سایت دارای محتوای متنی کافی و حتی الامکان به روز باشند، توصیه می کنیم در خصوص دانش بهینه سازی صفحات وب برای موتورهای جستجو (SEO) مطالعه داشته باشید.
رضا
۱۸:۵۷ ۱۳۹۵/۱۲/۲۱
سلام
خدا قوت
تشکر از آموزشتون. عالی بود
یه مشکلی من دارم اینه که هروقت اندازه سایت رو کوچک می کنم سایدبار سمت راست میاد پایینتر. دلیلش چیه؟
مرسی
خدا قوت
تشکر از آموزشتون. عالی بود
یه مشکلی من دارم اینه که هروقت اندازه سایت رو کوچک می کنم سایدبار سمت راست میاد پایینتر. دلیلش چیه؟
مرسی
بدون تست سورس کدها نمی توان نظر خاصی ارائه کرد، باید کدنویسی قابل سایت بررسی شود!
محسن(مبتدی)
۱۸:۳۹ ۱۳۹۵/۰۷/۲۱
سلام خسته نباشد
آقای مهندس من بعضی از کدهای شما رو داخل دریم اور کپی میکنم ولی قسمت خروجی هیچی نشون نمیده نه بلاکها و نه افکتها این فقط هم به این برنامه مربوط نمیشه همین کدها رو هم به شکل فایل notepad در آوردم ولی اونجا هم خروجی هیچی نشون نداد!
آقای مهندس من بعضی از کدهای شما رو داخل دریم اور کپی میکنم ولی قسمت خروجی هیچی نشون نمیده نه بلاکها و نه افکتها این فقط هم به این برنامه مربوط نمیشه همین کدها رو هم به شکل فایل notepad در آوردم ولی اونجا هم خروجی هیچی نشون نداد!
کدها را درون یک فایل Notepad قرار داده و با فرمت html ذخیره نمائید، اگر این فایل را با یک مرورگر مانند اینترنت اکسپلورر فراخوانی نمائید، مشاهده می کنید که خروجی نمایش داده خواهد شد!
مطهره
۱۵:۰۵ ۱۳۹۴/۰۹/۳۰
سلام استاد
واقعا خسته نباشید عرض میکنم. سایت پرمحتوا و عالی ای دارید .
من که خیلی ازش استفاده کردم ببخشید استاد چطوری تصاویری رو که برس داد استفاده کنم؟ یعنی نمی دونم چطوری ادرس عکس رو تو قسمت url بیارم
واقعا خسته نباشید عرض میکنم. سایت پرمحتوا و عالی ای دارید .
من که خیلی ازش استفاده کردم ببخشید استاد چطوری تصاویری رو که برس داد استفاده کنم؟ یعنی نمی دونم چطوری ادرس عکس رو تو قسمت url بیارم
سلام
دقیقا متوجه منظورتان نشدیم، اما اگر منظور کپی آدرس URL تصاویر وب است، معمولا با کلیک راست روی تصویر مورد نظر و انتخاب مواردی مانند View Image Info (در مرورگر فایرفاکس) می توانید آدرس کامل فایل را مشاهد و کپی کنید (آدرس تصاویر به پسوندی مانند jpg، png، gif و... ختم می شود)!
دقیقا متوجه منظورتان نشدیم، اما اگر منظور کپی آدرس URL تصاویر وب است، معمولا با کلیک راست روی تصویر مورد نظر و انتخاب مواردی مانند View Image Info (در مرورگر فایرفاکس) می توانید آدرس کامل فایل را مشاهد و کپی کنید (آدرس تصاویر به پسوندی مانند jpg، png، gif و... ختم می شود)!
داوود
۱۳:۵۰ ۱۳۹۴/۰۹/۱۴
سلام آقای مهندس عزیز؛
وقتتون بخیر و خوشی. استاد من چون دلم میخواد قبل از اینکه درس رو بخونم یه نیم نگاهی به پیش نمایش داشته باشم، طبق روال عادت همیشه پیش نمایش نهایی طرح رو قبل از اینکه درس رو بخونم دیدم. ترجیح دادم قبل از اینکه درس رو بخونم، یه قالب مشابه قالب شما طراحی کنم. کار نهایی و طراحی شده رو تو اینجا قرار میدم، شاید برای یادگیری برخی از دوستان مثمر ثمر واقع بشه. اگه هم ایرادی داره ممنون میشم و منت میذارید اگه یادآورد بشین. متشکرم استاد.
کد HTML :
وقتتون بخیر و خوشی. استاد من چون دلم میخواد قبل از اینکه درس رو بخونم یه نیم نگاهی به پیش نمایش داشته باشم، طبق روال عادت همیشه پیش نمایش نهایی طرح رو قبل از اینکه درس رو بخونم دیدم. ترجیح دادم قبل از اینکه درس رو بخونم، یه قالب مشابه قالب شما طراحی کنم. کار نهایی و طراحی شده رو تو اینجا قرار میدم، شاید برای یادگیری برخی از دوستان مثمر ثمر واقع بشه. اگه هم ایرادی داره ممنون میشم و منت میذارید اگه یادآورد بشین. متشکرم استاد.
کد HTML :
<body>
<div class="container">
<div class="header">هدر</div>
<div class="top-menu">منوی بالا</div>
<div class="column left">
<div class="titr">تیتر</div>
<div class="content">محتوا</div>
<div class="bottom">پائین</div>
</div>
<div class="column middle">middle</div>
<div class="column right">
<div class="titr">تیتر</div>
<div class="content">محتوا</div>
<div class="bottom">پائین</div>
</div>
<div class="clear"></div>
<div class="footer">فوتر و کپی رایت</div>
</div>
</body>{
margin: 0;
padding: 0;
}
body {
margin: 5px;
padding: 0px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
text-align: center;
}
.container {
width: 900px;
height: auto;
margin: 0 auto;
}
.header {
border: 2px solid grey;
border-radius: 5px;
background-color: gainsboro;
min-height: 140px;
margin: 10px 0;
}
.top-menu {
border: 2px solid grey;
border-radius: 5px;
background-color: gainsboro;
min-height: 20px;
margin: 10px 0;
}
.column {
border: 2px solid grey;
border-radius: 5px;
background-color: gainsboro;
min-height: 20px;
margin: 10px 0px;
display: block;
float: left;
width: 183px;
min-height: 160px;
}
.left {
background-color: darkorange
}
.right {
background-color: darkorange
}
.middle {
width: 500px;
margin: 10px 11px;
}
.titr {
width: auto;
height: 30px;
background-color: darkseagreen;
color: blackl
}
.content {
width: auto;
height: 100px;
background-color: deepskyblue;
color: blackl
}
.bottom {
width: auto;
height: 30px;
background-color: darkseagreen;
color: blackl
}
.clear {
clear: both;
}
.footer {
border: 2px solid grey;
border-radius: 5px;
min-height: 90px;
background-color: gainsboro;
}ممنون از به اشتراک گذاری کد، برای رنگ ها سعی کنید از کدهای HEX استفاده کنید، بین برنامه های مختلف مشترک و طیف وسیع تری را شامل می شوند!
مهناز
۱۲:۳۴ ۱۳۹۴/۰۵/۲۶
سلام من میخوام عرض وبلاگمو بزرگ کنم.
میشه دقیق راهنمایی کنید کجا و چطور این کار رو انجام بدم؟
میشه دقیق راهنمایی کنید کجا و چطور این کار رو انجام بدم؟
باید با HTML و CSS آشنایی داشته باشید تا بتوانید کد قالب وبلاگتان را ویرایش کنید، متاسفانه هیچ توضیح کوتاهی برای این مورد وجود ندارد!
sara
۲۳:۳۱ ۱۳۹۴/۰۱/۲۸
سلام. بسیار عالی بود. ممنون
مسعود
۰۹:۳۵ ۱۳۹۳/۱۱/۰۸
با سلام
مرسی از آموزش های عالی تون
1 سوالی داشتم
اگه میزان متنی که مثلا در بخش محتوای سایت (side-center) میخواهیم بنویسیم از عرض تعریف شدش که حدودا 500 پیکسله بیشتر باشه (از <br> استفاده نشه) اونوقت از کادر تعریف شده میزنه بیرون!!!
دستوری هست که بشه متن رو مجاب کرد از قالبش نزنه بیرون؟
ممنون
مرسی از آموزش های عالی تون
1 سوالی داشتم
اگه میزان متنی که مثلا در بخش محتوای سایت (side-center) میخواهیم بنویسیم از عرض تعریف شدش که حدودا 500 پیکسله بیشتر باشه (از <br> استفاده نشه) اونوقت از کادر تعریف شده میزنه بیرون!!!
دستوری هست که بشه متن رو مجاب کرد از قالبش نزنه بیرون؟
ممنون
شکسته شدن متن نیازی به تگ br ندارد، در حالت عادی مرورگر از فاصله بین کلمات استفاده کرده و آنها را در خط جدید نمایش می دهد، مگر اینکه عبارت شما بدون فاصله باشد که در این صورت می توانید از خاصیت های زیر در CSS استفاده کنید:
word-wrap: break-word;علی
۱۸:۳۸ ۱۳۹۳/۱۰/۰۲
چه طوری تیکه های عکس رو داخل Html بذاریم؟
هر چند سوالتان واضح نیست، اما بر اساس برداشت ما از سوال، تیکه های عکسی که در وب در کنار هم مشاهده می کنید در واقع بلاک های div یا سایر تگ هایی هستند که به کمک استایل CSS در کنار هم چینش شده و پس زمینه آنها برش زده یک تصویر است (هر بلاک بسته به نیاز و اندازه یک تصویر با ارتفاع و عرض مشخص را به عنوان پس زمینه به خود می گیرد) و از کنار هم قرار گرفتن این برش ها، تصویر کامل شکل می گیرد.
۲۲:۰۲ ۱۳۹۳/۰۸/۰۷
خیلی کامل و دقیق بود متشکرم همینطور با انرژی ادامه بدید
۱۲:۰۱ ۱۳۹۳/۰۶/۰۸
سلام راهی برای تبدیل کد جاوا به HTML یا CSS هست ؟
سوالتان مبهم است!
کد جاوا اسکریپت با HTML و CSS کاملا متفاوت است و هر کدام برای هدف خاصی استفاده می شوند، نتیجه در اغلب موارد قابل تبدیل نیست.
کد جاوا اسکریپت با HTML و CSS کاملا متفاوت است و هر کدام برای هدف خاصی استفاده می شوند، نتیجه در اغلب موارد قابل تبدیل نیست.
۱۴:۳۰ ۱۳۹۳/۰۳/۰۴
السلام
خدا قوت! من که پاک گیج شده بودم! اما آموزش شما خیلی کمک کرد که راه بیفتم! واقعا یه همچین آموزش های رایگانی کم پیدا میشه...
اجر مادی که نداره، اما اجر معنویش حتما محفوظه!!
یا علی
خدا قوت! من که پاک گیج شده بودم! اما آموزش شما خیلی کمک کرد که راه بیفتم! واقعا یه همچین آموزش های رایگانی کم پیدا میشه...
اجر مادی که نداره، اما اجر معنویش حتما محفوظه!!
یا علی
صفحه 1 از 5 محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.