آموزش طراحی قالب html و css جلسه ۱

0 دیدگاه 2,291 آموزش HTML5 و CSS3, آموزش طراحی قالب html و css

آموزش طراحی قالب html و css

فهرست موضوعات در این آموزش

سلام ,

درخدمت شما کاربران وبسایت پاسخ وردپرس هستم با جلسه اول آموزش طراحی قالب html و css

آموزش طراحی قالب html و css جلسه اول

خوب بریم سراغ طراحی قالب خود برای مرحله اول یه تعداد کد ریست قرار میدیم داخل قالب css

مرحله اول ساخت فایل های مورد نیاز برای قالب html به صورت زیر عمل کنید

دقت داشته باشید باید فایل های زیر را داشته باشید :

یک پوشه بنام rootfile
داخل پوشه یک پوشه css برای فایل های css
یک پوشه fonts برای فونت ها
یک پوشه images برای تصویر
یک فایل بنام style.css
یک فایل بنام index.html

کد html زیر را داخل فایل index.html قرار دهید

<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Start theme html and css</title>
    <link rel="stylesheet" href="css/Reset.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Start theme html and css</title>

</head>

<body>

</body>

</html>

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

آموزش نمایش جدید ترین مطالب در سایدبار

یک آموزش جذاب دیگه!

کد های زیر را کپی کنید .

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body{
	background: #fcfcfc;
}

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: ;

padding: ;

border: ;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: ;

}

body{

background: #fcfcfc;

}

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

آموزش ساخت منوی آبشاری در html و css قسمت دوم

یک آموزش جذاب دیگه!

دانلود فونت یکان

برای این که ما بتوانیم از این فونت استفاده نمایم باید فونت های مورد نظر داخل فایل style.css فراخوانی کنیم ما توی جلسات قبلی به طور کامل آموزش استفاده از فونت خدمت شما آموزش دادیم
برای فرخوانی فونت ها کد های زیر داخل فایل style.css قرار دهید.

@font-face {
    font-family: 'BYekan';
    src: url('fonts/BYekan.eot?#') format('eot'),
    url('fonts/BYekan.woff') format('woff'),
    url('fonts/BYekan.ttf') format('truetype');
}

@font-face {

font-family: 'BYekan';

src: url('fonts/BYekan.eot?#') format('eot'),

url('fonts/BYekan.woff') format('woff'),

url('fonts/BYekan.ttf') format('truetype');

}

خوب دوستان عزیز این جلسه از آموزش طراحی قالب html و css به پایان رسید امید وارم که مفید بوده باشه اگه این آموزش را دوست داشتید به دوستان خود به اشتراک بزارید
تا یکی دیگه از آموزش های وب سایت پاسخ وردپرس خدا نگهدار

از ۱ تا ۵ امتیاز بدید.

آموزش طراحی قالب html و css جلسه ۱