آموزش مرحله به مرحله نحوه تبدیل عکس به HTML و CSS

آموزش امروز نحوه ی تبدیل یک عکس به صفحه HTML است.برای مثال ممکن است شما در نرم‌افزار فتوشاپ یک وبسایت طراحی کرده باشید،اینجا یک سوال پیش می آید که چطور میتونیم یک طراحی,یک فایلPSD, عکس و … را به کد‌هایHTML وCSS تبدیل کنیم و البته جواب این سوال اینست که برای هر طراحی و هر وبسایتی شیوه ی تبدیل متفاوتی وجود دارد و هیچ دو سایتی را با شیوای کاملا یکسان نمی‌شه تبدیل کرد.

ما در این پست سعی‌ داریم ایده‌ای راجب تبدیل عکس به HTMLو CSS بدهیم پس یک طراحی بسیار ساده از وبسایت پیشگام وب را مرحله به مرحله به کد HTMLو CSS تبدیل می‌کنیم که میتواند تمرین بسیار خوبی‌ برای کسانی‌ که در ابتدای راه هستند باشد.

قبل از هرچیزی لازم میدونم توضیح کوتاه و مختصری راجب تفاوت بین HTML و CSS بدهم.

فرض کنید می‌خواهیم یک ساختمان بسازیم،در ابتدا ساختار و اسکلت بندی ساختمان را مشخص می‌کنیم و بعد روی آن هر نمایی رو که بخواهیم پیاده سازی می‌کنیم از رنگبندی، سنگ مورد استفاده و … . در واقع HTML ساختار و اسکلت بندی سایت ما هست و CSS همان نما که روی ساختمان پیاده سازی می‌کنیم.میتوانیم از نظر رنگ،نوع سایز و فونت ها، نحوه ی نمایش اشکال و … از CSS برای جلوه دادن به HTML استفاده کنیم.

حالا میریم سراغ مبحث اصلی‌ یعنی‌ تبدیل عکس به کد‌های HTMLو CSS.

من برای این آموزش از یک طراحی بسیار بسیار ساده استفاده کردم.میتونین عکس و سورس کود HTML و CSS رو در انتهای همین پست به صورت کامل دانلود کرده در اختیار داشته باشید.

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

برای ساختن وبسیت ابتدا یک پوشه به نام “Mihanhosting” درست می‌کنیم.یک به پوشه به نام “css” و یک پوشه به نام “images” درون پوشه اصلی‌ درست می‌کنیم.

مرحله بعد باز کردن یک برنامه text editor (ویرایشگر متن) مانند notepad,wordpad,text edit, sublime tetو … است.من از برنامه sublime text استفاده کردم که ازین لینک میتوانید آن را دانلود کنید.

دو فایل مجزا در sublime به نام‌های index.html و main.css درست می‌کنیم.صفحه اصلی‌ کد‌های html فایل index.html و main.css کد حای مربوط به css خواهد بود.

فایل index.html را باز کرده پس از تعریف ساختار کلی‌، لینک صفحه main.css واقع در پوشه css را برای آن تعریف می‌کنیم.
1
2
3
4
5
6
7

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>تجربه ساخت اولین وبسایت</title>
<link rel=”stylesheet” type=”text/css” href=”css/main.css” />
</head>

برای هرکدام از بخش‌های مشخص شده در کد 2 یک div با id مربوط به آن تعریف می‌کنیم و سپس نوبت style دادن به آن است.

همانطور که در تصویر مشاهده می‌کنیم هدر و فوتر به عرض صفحه هستند اما بخش content و محتوا در وسط صفحه با عرض ۸۰۰px قرار گرفته است.

برای اینکه کلیت صفحه را در وسط صفحه داشته باشیم از یک page-wrap استفاده می‌کنیم به این شکل که بخش میانی صفحه را در بر بگیرد و ما محتویات را درون آن قرار بدهیم.

پس کد ما به این شکل در میاید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!– END main-content –>
</div>

<!– END page-wrap –>

قسمت Nav یا منو ی ما همانطور که در تصویر مشاهده می‌کنید سایه اندکی‌ دارد،عرض آن به عرض صفحه است اما محتویات آن مانند قبل داخل page-wrap قرار گرفته است.برای اینکه شباهت HTML با عکس ما بیشتر شود یک نوار خیلی‌ باریک از عکس-قسمت هدر- مانند شکل ۳ جدا کرده، نام آن headerb-bg.png می‌‌گذریم و چون می‌خواهیم عرض آن کامل صفحه را در بر بگیرد قسمت style را به شکل زیر تعریف می‌کنیم.
1
2
3
4
5

body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
background: url(../images/headerb-bg.png) repeat-x top #f5ecd4;
}

نوبت به ساختن منو می‌رسد.در فایل HTML یک لیست تشکیل میدهیم و در قسمت css آن li هارا به صورت inline-block تعریف کرده تا کنار هم قرار بگیرند،رنگ و فونت آنها را مشخص می‌کنیم.

کد html
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<li><a href=”#”>درباره ما</a></li>

<li><a href=”#”>گالری عکس</a></li>

</ul>

کد CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

ul#nav {
height: 70px;
list-style: none;
padding-left: 125px;

}
ul#nav li {
display: inline;
font-size: 1.3em;
float: right;
}
ul#nav li a {
display: block;
width: 113px;
float: left;
margin: 8px auto 0 auto;
color: white;
padding-top: 2px;
font-weight: bold;
text-decoration: none;
}
ul#nav li a:hover, ul#nav li a:active {
color: yellow;
}

همانطور که قبلا توضیح دادم محتویات سایت داخل یک page-wrap قرار میگیرند.تنظیمات مربوط به page-wrap در css را میتوانید در زیر مشاهده کنید.
1
2
3
4

<div#page-wrap {
width:800px;
margin: 0 auto;
}

در قسمت هدر یک متن با عنوان “ساخت وبسایت با پیشگام وب” وجود دارد.با تعریف یک h1 در div با id هدر این نوشته را مشخص می‌کنیم.

اکنون بخش مربوط به هدر و nav ما آماده است.به سراغ فوتر می‌رویم،مانند هدر یک div با عرض صفحه به رنگ زرد مشابه هدر و یک منو با آیتم‌های “Home”،”About”،”Contact” و “Gallery” و یک نوشته با متن “wiki.mihanhosting.ir”. برای ساخت این قسمت یک div با id فوتر تعریف می‌کنیم.درون آن یک لیست تعریف کرده همانند لیستی که در هدر داشتیم چینش آن را افقی می‌کنیم.یک پاراگراف (p) برای متن در نظر گرفته، کد HTML مربوط به فوتر به این شکل خواهد بود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<ul>

<li><a href=”#”>About |</a></li>

<li><a href=”#”>Gallery |</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

wiki.mihanhosting.ir
</div>

به تنظیمات css می‌پردازیم، رنگ آن زرد، چینش کلمات وسط،لیست به صورت افقی است و فاصله متن از بالا و پایین فوتر باید مشخص شود.کد مربوط به CSS فوتر به این شکل خواهد بود:
1
2
3
4
5
6
7
8
9

div#footer {
background: #f5d329;
color: white;
padding: 10px 0 10px 0;
text-align: center;
}div#footer ul li {
display: inline;
text-align: center;
}

نوبت به ساخت قسمت میانی یا همانmain-content خواهد بود،همان طور که در تصویر مشخص است، از دو ستون تشکیل شده و متن در آن قرار می‌گیرد.این متن‌ها دارای هدینگ به عنوان سرتیتر،تنظیمات مربوط به پاراگراف(p) هستند. یک div با نام main-content ساخته، دو ستون left-col و right-col را تعریف می‌کنیم که هر کدام دارای p و h1 هستند.قسمت‌های مربوط به HTML و CSS را در زیر مشاهده می‌کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<h1>MihanHosting</h1>

</div>

<!– END left-col –>

<h2>MihanHosting</h2>

</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

div#main-content {
padding-bottom: 50px;
}
div#main-content div#left-col {
float: left;
width: 510px;
}
div#main-content div#right-col {
float: right;
width: 260px;
padding-top: 15px;
}
div#main-content div#right-col p {
font-size: 1.1em;
}

چون دو دیو left-col و right-col کنار هم قرار گرفته اند در css از float:right استفاده کردیم که باعث میشود دیو مربوط به -right-col در سمت راست left-col قرار بگیرد.

دیگر تنظیمات مربوط به سایز، فونت، عرض ستون‌ها و فاصله متن از ستون هست.

اکنون با ذخیره فایل و گرفتن view میتوانید مشاهده کنید که صفحهٔ HTML پیاده سازی شده همانند تصویر و عکس می‌باشد.

این تمرین بسیار ساده برای شروع کار بود و البته همانطور که در ابتدای پست گفتم راه‌های بسیاری برای تبدیل عکس به HTML وجود دارد.با تمرین مداوم و از عکس های ساده به پیشرفته میتوانید توانایی تحلیل و تبدیل عکس به HTML و CSS را در خود افزایش دهید.

کد نهائی به شکل زیر خواهد بود .

کد html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199

<!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>
<link rel=”stylesheet” type=”text/css” href=”css/main.css” />
</head>

<body>

<h1>تجربه ساخت وبسایت با پیشگام وب</h1>

</div>

<li><a href=”#”>درباره ما</a></li>

<li><a href=”#”>گالری عکس</a></li>

</ul>

<h1>MihanHosting</h1>

Lorem ipsum dolor sit
<!– END left-col –>

<h2>MihanHosting</h2>

</div>

</div>

<!– END main-content –>

</div>

<!– END page-wrap –>

<ul>

<li><a href=”#”>About |</a></li>

<li><a href=”#”>Gallery |</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

wiki.mihanhosting.ir

</div>

</body>

</html>

[/php[

کد CSS:

* {
margin: 0;
padding: 0;
}

body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
background: url(../images/headerb-bg.png) repeat-x top #f5ecd4;
}

p {
font-size: 1.3em;
line-height: 1.4em;
margin-bottom: 0.8em;
}

a { color: #540000; text-decoration: none; }
a:hover, a:active { text-decoration: underline; }

h1 { font-size: 3.0em; margin-bottom: 0.8em; }
h2 { font-size: 1.5em; text-transform: uppercase; margin-bottom: 0.8em; }
.clear { clear: both; }

div#page-wrap {
width:800px;
margin: 0 auto;
}
div#page-wrap #header h1{
text-align: center;
margin-top: 80px;

}

ul#nav {
height: 70px;
list-style: none;
padding-left: 125px;

div#main-content {
padding-bottom: 50px;
}
div#main-content div#left-col {
float: left;
width: 510px;
}

div#main-content div#right-col {
float: right;
width: 260px;
padding-top: 15px;
}
div#main-content div#right-col p {
font-size: 1.1em;
}
div#footer {
background: #f5d329;
color: white;
padding: 10px 0 10px 0;
text-align: center;
}div#footer ul li {
display: inline;
text-align: center;
}