طراحی یک وب سایت ساده با CSS,HTML

[Saber Mogaddas]

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



شروع کار:

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

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

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

خوب پس اولین کار طراحی در محیط گرافیکی و دومین کار برش تصاویر..

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

نکات ضروری :

1- تکه های برش داده شده را با پسوند png 24 ذخیره می کنیم.

2- اندازه ای که من در فتوشاپ در نظر گرفتم 1000px در عرض و برای طول هم کمی بیشتر چون در دفرم شدن تاثیری ندارد 1500px در نظر گرفته ام.

3- در زمان طراحی شاید ایده های جدیدی داشته باشیم که در پست های آینده آن ها را پیاده سازی می کنیم.

4- ابزار برش در فتوشاپ Slice Tool هست.

5- برای ذخیره قسمت برش داده نیز می توانید از کلید میانبر alt+ctrl+shift+S استفاده کنید.



لینک اصلاح شده (http://www.4shared.com/zip/0XJ4pBRz/Farame-1.html)برای 4shared
لینک اصلاح شده دوم (http://www.mediafire.com/?v9tlcd4fo3d147z)
(http://uploadfa.net/uploads/13458849521.zip)


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

موفق باشید..

[Saber Mogaddas]

در این قسمت آموزش می خواهیم چهارچوب ، header و منو سایت رو پیاده سازی کنیم

ابتدای کار باید یک فایل html و یک فایل style sheet داشته باشیم ، که برای ساخت این دو فایل میتونیم از notepad و یا visual studio و .. استفاده کنید با هر برنامه ای که راحت هستید این کار رو انجام بدید.

فایل html همان صفحه وب ما هست که کد های html و تگ ها در آن جای می گیرد و برای استایل دادن به این تگ ها از فایل css که به فایل html ما اشاره می کند استفاده می کنیم ، استفاده از فایل با پسوند css در طراحی به نام استایل دادن به صورت embedded یا external معروف است.روش های دگری برای استایل دادن وجود داره (inline,internal) :
استایل دادن به تگ 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" />



اولین کاری که من بعد از ایجاد این دو فایل انجام دادم اضافه کردن css reset ساده زیر به فایل css هست که margin,padding پش فرض تمامی تگ ها رو برابر با صفر می کنه.


* {
margin:0;
padding:0;
}



با توجه به طرح و تگ های که استفاده میشه من این css reset رو احتیاج دونستم.

البته css reset ها کاملتری هم وجو داره که می تونید از طریق موتور جستجوی گوگل پیدا کنید.

خوب برای طراحی قالب ابتدا یک نظری به طرح قالب می ندازیم .بله ما باید رنگ پس زمینه رو برابر با سفید میکنیم و قسمت آبی لایت بالا رو نیز توسط یه تگ دیو پیاده سازی می کنیم و در نهایت یک wrapper که به عرض 1000px که باید در وسط صفحه ما قرار بگیره ..

برای شروع مقدار فونت های پیش فرض و سایز فونت رو در استایل تگ body تنظیم می کنیم.همچینین باید پس زمینه سفید رو نیز به تگ body اعمال کنیم:


body
{
background-color: #fff;
font-family: Tahoma;
font-size: 12px;
}



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

استایل های این دو تگ به صورت زیر خواهد بود :


#Head-Bg {
background-image: url('Images/header.png');
background-repeat: repeat-x;
min-height: 600px;
}
#Wraper {
width: 1000px;
margin:auto;
min-height:100px;
overflow: hidden;

}




<div id="Head-Bg">
<div id="Wraper">

</div>
</div>

خو حالا ما می تونیم داخل تگ اصلی wrapper محتوای سایت رو تقسیم بندی کنیم همانطور که می دانیم ابتدا باید Header سایت رو پیاده کنیم توسط یک تگ دیو با طول و عرض ثابت به صورت سلیقه ای :



<div id="Head-Bg">
<div id="Wraper">
<div id="Header-Wraper">
</div>
</div>
</div>



داخل header ما دو تصویر (وب سایت) و (من) رو داریم برای اینکه این دو تصویر در وسط header قرار بگیره ابتدا به وسیله یک تگ دیو با عرض لازم و به طول header و margin:0 auto ایجاد میکنیم حال دو تگ دیو دیگر نیز برای لگو ها تشکیل میدهیم و توسط margin و float به صورت منظم تصویر های خود رو جایگزاری می کنیم.

بعد از header سایت نوبت منو سایت میرسه که تشکیل شده از جعبه جستجو و لیستی از منو:

اول کار یک دیو wrapper برای کل سطر منو با استایل عرض به طول wrapper اصلی و طول به صورت سلیقه ای و با دستور float زیر header قرار میدهیم. برای لست منو و قسمت جستجو نیز به اندازه ی لازم و به طول wrapper منو دیو اصلی ایجاد میکنیم با این کار ما قسمت منو و جستجو رو تفکیک می کنیم.برای دیو اصلی لیست منو float:right و برای جستجو float:left میدهیم توجه کنید که جمع عرض این دو دیو اصلی باید کمتر از مقدار عرض دیو اصلی منو باشد.

لازم به ذکر هست که سعی کنید یک پوشه به اسم images و .. ایجاد کنید و تمامی عکس های استفاده شده برای این طراحی رو در ان پوشه قرار دهید تا هم کار شما نظم داشته باشد و هم دسترسی به فایل های پروژه راحتر باشد.

خوب سریعا ul و li های مربوط به منو رو تشکیل می دهیم و توسط select های css در جای خود قرار میدهیم و مقدار hover آنها را تنظیم می کنیم ، به نظرم با نگاه کردن به استایل های منو متوجه موضوع خواهید شد و نیاز به توضیح نمی بینم در هر صورت اگه قسمتی رو متوجه نشدید می توانید بپرسید ..

برای پس زمینه های li من از دو تصویر جداگانه استفاده کردم ، البته بهتر بود که توسط css sprite این کارو توسط یک تصویر می کردیم ولی این موضوع رو بزارید به حساب کمبود وقت و مقداری هم تنبلی بنده..

برای اینکه از یه تصویر استفاده کنیم می تونیم این دو تصویر رو با هم برش داده (در کنار هم ) و تو selecthover با استایل background-position مکان Hover تصویر رو معیین کنید دوستانی که نیاز به آموزش این نحوه دارند می تونن درخواست بدن تا همین منو رو به اون شکل نیز طراحی کنیم.

اگه توجه کنید من ترجیح دادم به جای select های پیچیده برای یافتن li اول برای تغییر استایل برای home از یه دیو جداگانه بیرون از تگ ul استفاده کنم و این روش کاملا سلیقه ای هست.

قسمت جستجو :

یک دیو کلی برای تکست باکس که تشکیل شده از 3 دیو داخلی که دیو سمت چپ و راست برای تصوریرهای radius دار و قسمت وسط نیز برای تصویر کل جستجو که به اندازه 1px بود و با دادن background-reapet این یک پیکسل رو تکرار کردم، دکمه جستجو از روش css sprite که در منو استفاده نکردیم پیاده سازی شده یک تصویر که شامل شکل اصلی و hover دکمه هست و برای یه دیو اختصاص دادیم و در نهایت با background-position همانطور که در بالا توضیح داده شد تصویر رو جابجا و تنظیم کردیم.

و بوسیله کد جاوااسکریپت برای جستجو خاصیت onfocus و onblur رو پیاده سازی کردیم به صورت زیر :



value="جستجو.." onfocus="if(this.value == 'جستجو..') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'جستجو..'; }"


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



89543



موفق باشید..

[Saber Mogaddas]

قسمت سوم آموزش :

امروز می خواهیم قسمت بنر موجود در طرحمون رو طراحی و برنامه نویسی کنیم.

با توجه به اطلاعاتی که در دو آموزش قبلی کسب کرده اید بنر سایت رو نیز مانند header سایت قرار می دهیم .معمولا این قسمت از سایت رو به صورت یک اسلایدر در نظر می گرند تا با تغییر اسلاید ها اعلانات و یا فعالیت های سایت رو نمایش بدهد ، به دلیل اینکه عنوان آموزش ما طراحی وب با css , html هست من این کار رو یعنی متحرک سازی Animation دادن به تگ هارو توسط jquery به بعد از اتمام این طراحی موکول می کنم.


89572

خوب برای طراحی قسمت بنر یک دیو wrap کلی به عرض 1000px و به طول بنر انتخابی ایجاد می کنیم (که در اینجا طول بنر ما 522px می باشد) تا اگه در آینده نیاز به تغییر این قسمت شد فقط در داخل این تگ تغییرات ایجاد شود و قسمت های دیگه سایت رو به هم نزنیم، بعد یک دیو برای تصویر سیب و در داخل این دیو یک دیو برای تصویر ساعت تشکیل خواهیم داد.که هر دوی این دیو ها باید از سمت راست و چپ خاصیت margin:auto داشته باشند.

خوب من می خوام کارم رو یکم سختر و با کیفیت تر کنم.همانطور که مشاهد می کنید تصویر سیب عکسی با کیفیت بالا می باشد و درست نیست که من این عکس رو به صورت یک تیکه قرار بدم و نمی خوام کیفیت تصویر رو بخاطر حجم کم پایین بیارم ، من این تصویر رو به 5 تیکه تقسیم می کنم و با استفاده از دیو این تصاویر رو در کنار هم قرار می دهم برای اینکار ابتدا یک دیو به طول وعرض سیب ، با استایل زیر ایجاد می کنم :

#Banner-Wraper {
width: 1000px;
height: 522px;
float: right;
}
#App-Wraper {
width: 482px;
height: 522px;
margin: auto;
}
#App-Top {
width: 482px;
height: 204px;
float: right;
background-image: url('Images/App-Logo_1.png');
background-repeat: no-repeat;
}
#App-Bottom {
width: 482px;
height:318px;
float: right;
}
.App-B-R,.App-B-L {
width:130px;
height: 318px;
float: right;
background-image: url('Images/App-Logo_3.png');
background-repeat: no-repeat;
}
.App-B-L {
width:142px;
background-image: url('Images/App-Logo_2.png');
background-repeat: no-repeat;
float: none;
}
#App-B-C-Top {
width:210px;
height: 213px;
float: right;
background-image: url('Images/App-Logo_5.png');
background-repeat: no-repeat;
}
#App-B-C-Bottom {
width:210px;
height: 105px;
float: right;
background-image: url('Images/App-Logo_4.png');
background-repeat: no-repeat;
}
#Clock-Bg {
width: 210px;
height: 213px;
background-image: url('Images/W-Logo.png');
background-repeat: no-repeat;
}





<div id="Banner-Wraper"><!--\\دیو اصلی برای کل بنر-->
<div id="App-Wraper"><!--\\دیو اصلی برای تصویر سیب-->
<div id="App-Top"></div><!--\\قسمت بالای سیب-->
<div id="App-Bottom"><!--\\دیو اصلی برای 4 تیکه پایین سیب-->
<div class="App-B-R"></div><!--\\تکه پایین سمت راست -->
<div id="App-B-C-Top"><!--\\تکه پایین وسط بالا-->
<div id="Clock-Bg"></div><!--\\تکه تصویر عکس-->
</div>
<div id="App-B-C-Bottom"></div><!--\\تکه پایین وسط پایین-->
<div class="App-B-L"></div><!--\\تکه پایین سمت چپ-->
</div>
</div>
</div>



Margin:auto برای وسط چین کردن تگ اصلی سیب در داخل دیو اصلی استفاده شده .

و نسبت به اندازه ی تکه ها دیو های خودم رو توسط float در داخل این دیو قرار میدم و به پس زمینه هر دیو عکس پس زمینه اون قسمت از تصویر سیب رو میدهم ، اگر توجه کنید من قسمت بالای سیب رو یک دیو در نظر گرفتم و چون قسمت پایین دارای 4 دیو بود این 4 دیو رو در داخل یک دیو اصلی قرار دادم تا بهتر قابل کنترل باشد، و اندازه دیو وسطی رو طوری برش دادم که دقیقا هم اندازه با تصویر ساعت باشه ، حالا هم می تونیم به صورت یک تگ img تصویر ساعت رو داخل این دیو قرار بدیم و یا اینکه یک دیو در داخل همین دیو وسط ایجاد کنیم و به پس زمینه اون توسط background-img تصویر ساعت رو الحاق کنیم.
کم کم وب سایتمون داره شکل زیبایی به خودش میگیره..

89573

فایل این قسمت رو دانلود و بررسی کنید..

89575

موفق باشید..

[Saber Mogaddas]

حال نوبت میرسه به قسمت راحتر ، توجه کنید که هر جا باکس و یا تصویر تکراری وجود داشته باشه خاصیت کلاس خودشو نشون میده ، یعنی چی ؟

یعنی کافیست فقط یکی از باکس ها رو طراحی کنیم و و با عمل copy&paste این باکس هارو در کنار هم قرار بدیم.

شروع به طراحی باکس ها

نحوه برش قسمت های radius دار برای برش این قسمت ها می تونیم از سمت بالا باکس تا جایی که radius آن تمام می شود برش دهیم یا همین کار از قسمت پایین و یا از سمت چپ و راست و یا اگه بخواهیم ریزتر کار کنیم فقط مربعی از گوشه radius دار برش می دهیم ، تو این مثال برش کامل از سمت راست و چپ بیشتر از روش های دیگه برای ما کاربرد خواهد داشت چرا؟

چون اگه توجه کنید ما در قسمت بالای سایت یک قسمت سفید رنگ نیز برای عنوان باکس داریم و نتیجتا ما به کل طول باکس به صورت آزاد نیاز داریم.

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

یک دیو کلی برای قسمت باکس ها ایجاد می کنیم من می خواهم ارتفاع این دیو متغییر باشه یعنی نسبت به محتواش تغییر ارتفاع بدهد چون احتمال داره تو آینده بخوام 2 تا باکس دیگه به این قسمت اضافه کنم برای اینکار من از استایل زیر برای دیو اصلی محتوا استفاده می کنم :


#Content-Wraper {
width: 950px;
min-height: 600px;
overflow: hidden;
float: right;
}



برای ایجاد باکس ها کلا از خاصیت کلاس استفاده خواهیم کرد چون ما یک باکس ایجاد می کنیم و توسط Copy&Paste چهاراز این باکس ایجاد خواهیم کرد و چون id منحصر به فرد یک تگ هست و نمی تونیم از دو نام id مشابه در یک صفحه وب ایجاد کنیم از کلاس که برای اینکار استفاده میشود به صورت استاندارد استفاده می کنیم.

یک دیو اصلی که محتوای باکس داخل آن می باشد ایجاد می کنیم، و داخل این دیو را به سه قسمت توسط دیو جدا می کنیم.

1 : نیز از سه دیو تشکیل می شود که با لا و پایین برای تصویر های گوشه دار و وسط نیز همرنگ با رنگ باکس تنظیم خواهد شد.

1- قسمت اول(سمت راست ، بالا گوشه ) : در این قسمت تصویر گوشه radius دار قرار خواد گرفت و طول و عرض تصویر را خواهد داشت.

2- قسمت دوم (سمت راست ، پایین گوشه ) : در این قسمت تصویر گوشه radius دار قرار خواد گرفت و طول و عرض تصویر را خواهد داشت.

3- قسمت سوم(وسط) :برای پیدا کردن طول وسط ، طول باکس منهای قسمت اول و قسمت دوم خواهد شد.عرض این دیو نیز هم عرض با دیو قسمت اول و دوم خواهد بود.

2 : از یک دیو اصلی که داخل آن به دو قسمت عنوان و محتوا تقسیم خواهد شد .

3: این قسمت نیز دقیقا مثل روش شماره یک خواهد بود با این تفاوت که استایل های مربوط به دیو های قسمت اول و دوم مقداری متفاوت خواهد بود.


<div class="Box-Wraper">
<div class="Box-R-Side">
<div class="B-R-T"></div>
<div class="B-R-C"></div>
<div class="B-R-B"></div>
</div>
<div class="Box-Center">
<div class="Box-Title"></div>
<div class="Box-Content"></div>
</div>
<div class="Box-L-Side">
<div class="B-L-T"></div>
<div class="B-L-C"></div>
<div class="B-L-B"></div>
</div>
</div>


تنظیم گوشه های radiusدار با روش css sprit :

ما یک تصویر داریم که چهار گوشه باکس مارو در خودش جای داده پس همه دیو ها دارای یک تصویر برای پس زمینه و طول و عرض یکسان می باشند.در این مواقع برای اینکه کدهای css بهینه شوند همه کلاس ها را کنار هم می نویسم و با علامت کاما (،) جدا می کنیم:


.B-R-T,.B-R-B,.B-L-T,.B-L-B{
width: 5px;
height: 6px;
float: right;
background-image: url('Images/Box-Corner.png');
background-repeat: no-repeat;
background-position:-9px 0px;
}



دستورات موجود در این select باری همه کلاس ها اعمال خواهد شد و برای اینکه background-positon هر گوشه رو تغییر بدیم به صورت زیر جداگانه کلاس ها رو select می کنیم و فقط خاصیت background-position رو برای ان ها تغییر می دهیم:


.B-R-B {
background-position:-9px bottom;
}
.B-L-T {
background-position: 0px -1px;
}
.B-L-B {
background-position:-1px -11px;
}



و در نهایت همانطور که توضیح دادم با عمل copy&paste دیو اصلی باکس رو تکثیر می کنیم چون ما ارتفاع دیو اصلی رو متغییر کردیم حال می توانیم هر مقدار باکس که می خواهیم اضافه کنیم و این باکس ها به طور خودکار دوتا دوتا زیر هم جای خواهند گرفت.

برای وسط قرار گرفتن دیو عنوان از margin:auto استفاده شده چون شکل باکس ها دودر میان برعکس خواهند شد کافی هست مکان دیو عنوان رو با مکان دیو محتوا جابجا کنید.چون متن در داخل عنوان باید در وسط دیو قرار بگیرد از خاصیت :


text-align: center;



برای دیو عنوان استفاده می کنیم.

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

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

نتیجه این آموزش :


89586



فایل تکمیل شده تا این قسمت رو دانلود کنید ..



89587




موفق باشید..

[Saber Mogaddas]

سلام و خسته نباشد به دوستان عزیز

امروز فوتر سایت رو پیاده سازی می کنیم ، همانطور که از طرح psd قابل مشاهده هست پس زمینه ما از سه تکه سمت راست ، وسط ، چپ تشکیل شده برای اینکار فکر کنم دیگخ خبره شدید:


1- یک دیو اصلی برای footer



2- ایجاد سه دیو در داخل دیو اصلی که یکی برای سمت راست که پسزمینه گوشه راست تو اون میشینه و یکی برای وسط که محتوای فوتر داخل اون قرار می گیره و نهایتا گوشه سمت چپ حاوی پس زمینه سمت چپ.



3- استایل دادن به دیو های و جایگزاری آنها پشت سر هم با دستور float:right .


تو کد نویسی همیشه توجه کنید تا به بهینه ترین و کوتاهترین صورت ممکن کد هاتون رو بنویسید.برای مثال چون دیو های داخلی سمت راست و چپ با استایل های مساوی هستند و به غیر از background-image در همه استایل ها با هم یکسان بودند من به این صورت کدهامو بهینه کردم :


.Footer-R-Side,.Footer-L-Side {
width: 9px;
height: 58px;
float: right;
background-image: url('Images/Footer-R-Side.png');
background-repeat: no-repeat;
}
.Footer-L-Side {
background-image: url('Images/Footer-L-Side.png');
}



در داخل فوتر ما دو آرم استانداردهای طراحی وب رو برای css,Xhtml داریم ، و طبق معمول یک نوشته به عنوان کپی رایت محفوظ ، پس دیو وسط ما به دو قسمت بالا و پایین جدا میشه که در دیو بالای آرم ها و در دیو پایین نوشته مورد نظر .

این دیو هارو به این صورت داخل footer-Center پیاده سازی می کنیم :



<div id="Footer-Wraper">
<div class="Footer-R-Side"></div>
<div id="Footer-Center">
<div id="Footer-T">
<a href="http://validator.w3.org/check?uri=referer"><span class="Logo-W3C"></span></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><span class="Logo-W3C1"></span></a>
</div>
<div id="Footer-B">
تمام حقوق مادی و معنوی این سایت متعلق به آقای من می باشد.
</div>
</div>
<div class="Footer-L-Side"></div>
</div>



و استایل های اون رو نیز میدیم و فوتر ما تکمیل میشه :


#Footer-Wraper {
height: 58px;
margin: 10px auto auto;
width: 914px;
}
.Footer-R-Side,.Footer-L-Side {
width: 9px;
height: 58px;
float: right;
background-image: url('Images/Footer-R-Side.png');
background-repeat: no-repeat;
}
.Footer-L-Side {
background-image: url('Images/Footer-L-Side.png');
}
#Footer-Center {
width: 895px;
height: 58px;
float: right;
background-image: url('Images/Footer-Center.png');
background-repeat: repeat-x;
}
#Footer-T {
height: 22px;
margin: 8px auto 7px;
width: 158px;
}
#Footer-B {
width: 500px;
height: 20px;
margin: auto;
text-align: center;
direction: rtl;
color: #5a5a5a;
}
.Logo-W3C,.Logo-W3C1 {
width: 74px;
height: 21px;
float: right;
background-image: url('Images/W3C-XHTML.png');
background-repeat: no-repeat;
}
.Logo-W3C1 {
background-image: url('Images/W3C-CSS.png');
margin-right: 9px;
}



خوب حال می خواهیم استاندارد w3c رو برای کدهای css , XHtml بگیریم :

برای گرفتن استاندارد css وارد این لینک (http://jigsaw.w3.org/css-validator/) شوید.در صفحه اصلی سه روش برای دادن کد css به سایت می باشد .

روش اول By Url که لینک فایل css رو وارد می کنیم و چک می کنیم

روش دوم By file Upload هست که می تونید فایل css رو آپلود کنید.

روش سوم By direct Input هست که می تونیم استایل ها رو به طور مستقیم اونجا copy&paste می کنیم.

روش دو و سه برای localhost گزینه خوبی هست ، من روش سه رو ترجیح میدم و کد های css ای که تابحال برای این پروژه نوشته ایم رو اونجا کپی می کنیم و check می کنیم .

همانطور که مشاهده می کنید :
Congratulations! No Error Found.

توجه کنید وقتی که چند بار فایل های css تون رو check کردید و error های اون رو طبق توضیحات این سایت رفع کردید با استانداردهای طراحی در مورد css آشنا خواهدی شد و نیازی به check کردن نخواهید داشت .

خوب حالا لینک مرتبط به لگوی استاندارد css رو کسب کردید و می تونید لینک refrence رو بردارید و لگوی داخل فوتر رو توسط تگ a جایگزاری کنید.چون من قبلا از تگ دیو برای این لوگو استفاده کردم و از اونجا که بودن تگ دیو در داخل تگ a خلاف استاندارد هست من این تگ دیو رو به span تغییر نام میدم.

به صورت زیر :



<a href="http://validator.w3.org/check?uri=referer"><span class="Logo-W3C"></span></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><span class="Logo-W3C1"></span></a>



برای گرفتن استاندارد xhtml نیز به روش css توسط این لینک (http://validator.w3.org/) عمل خواهیم کرد.
This document was successfully checked as XHTML 1.0 Transitional!


اگه خطایی داشتید خطاهای شما در زیر لیست خواهد شد و راه حل ها نیز گفته می شود که با رفع خطا ها بار دیگر چک کنید تا در نهایت به کد استاندارد xhtml برسید.

لازم به ذکر هست که بگم داشتن این استادارد ها در صفحه وب باعث محبوب شدن سایت ما برای موتورهای جستجو از قبیل گوگل خواهد بود.اگه می خواهید در مورد این استانداردهای بیشتر بدانید این مقاله (http://www.pars-click.com/ArticleDetail.aspx?id=20)را مطالعه کنید.

قالب ما توسط Css,html و استانداردهای Css,xhtml کامل شده و به اتمام رسید.امیدوارم که همه دوستان به کد نویسی استاندارد طراحی وب اشنایی پیدا کرده باشند.

این قالب به تنهایی زیباست ولی اگه مقداری انیمیشن بدیم و زیباترش کنیم منحصر به فر خواهد شد.من طبق آمار سوالات شما و مشکلات شما تصمیم دارم مقداری انیمیشن و پلاگین جدید برای باکس ها ایجاد کنم برای مثال از jquery tab برای یک باکس و یا news ticker برای باکس دیگه و اگه مشتاق باشید drag&drap برای باکس ها ، اسلایدر و ..استفاده کنم.

و به تدریج این قسمت هارو با پلاگین های جدید بروز خواهم کرد.

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

تصویر نهایی


89794


فایل تمام شده این پروژه رو می تونید دانلود کنید.



89795



موفق باشید.

[f.gh1372]

سلام
اگر میشه لینک دانلود پست اول را اصلاح کنید . دانلود نمیشه . ممنون

[Saber Mogaddas]

لینک پست اول اصلاح شد..


موفق باشید..

[esmaeilbf]

لینک اول نیاز به لاگین داره لینک دومم خرابه
یه جای دیگه up کنید

[Saber Mogaddas]

سلام
متاسفانه من نتونستم از بین فایل آپلود های فارسی یک سایت معتبر پیدا کنم !
برای همین تو shared آپلود کردم برای دوستانی که عضو هستن ، لینک دوم اصلاح شد..
موفق باشید..

[esmaeilbf]

مثلا شما از این کد استفاده کردین #Head-Bg {
background-image: url('Images/header.png');
background-repeat: repeat-x;
min-height: 600px;
}

و به یک عکس لینک دادین چطوری این قسمت رو از فایل psd بیرون بیاریم و بهش لینک بدیم؟؟؟

[t0r1st]

دوست عزیز لینک پارت 3 و 4 دانلود نمی شود
اصلاح کنید
باتشکر از آموزش عالیتون
یا علی مدد

[Saber Mogaddas]

دوست عزیز لینک پارت 3 و 4 دانلود نمی شود
اصلاح کنید

سلام
برای من مشکلی نداره با مرورگرهای دیگه امتحان کنید/درسته..
موفق باشید..

[t0r1st]

باتشکر حق با شما بود با کروم مشکلی نبود بی صبرانه منتظر آموشهای بعدی شما هست
یاعلی مدد

[Saber Mogaddas]

مثلا شما از این کد استفاده کردین #Head-Bg {
background-image: url('Images/header.png');
background-repeat: repeat-x;
min-height: 600px;
}

و به یک عکس لینک دادین چطوری این قسمت رو از فایل psd بیرون بیاریم و بهش لینک بدیم؟؟؟
سلام
همانطور که از مرحله به مرحله بودن این سایت می فهمیم که مرحله اول طراحی سایت تو یک محیط گرافیکی انجام می پذیره . من photo shop رو به عنوان محیط گرافیکی انتخاب کردم ( چون اغلب کاربران با اون بیشتر از محیط های دیگه آشنایی دارند و همچنین این نرمافزار کاربردی تر هست ) .همانطور که تو قسمت اول توضیح دادم من سایتم رو تو این محیط به صورت لایه لایه یا همان (لایه باز) طراحی کردم.منظور از لایه باز بودن یک طرح یعنی برای هر شی یک لایه ایجاد شده و کل طرح مجموعی از لایه ها هست که در رو یا زیر هم قرار گرفته اند.چرا این روش؟ شما فرض کنید یک طرحی زدید که یک پس زمینه و یک گل روی آن قرار داده اید، بنا به سلیقه خودتون می خواهید روی این گل تنظیمات و مانور انجا بدید با روش لایه باز کافی هست لایه مربوط به گل رو انتخاب و فقط اون لایه رو حرکت داده و یا روی آن افکت ماسک و استایل های گوناگون اعمال کنید خوب به نظرم این مقدمه برای توضیح مثال کافی باشه :
این کد که شما قرار دادید مربوط میشه به پس زمینه آبی روشنی که در قسمت بالای سایت قرار گرفته..همانطور که در هدف ما وجود داره ما می خواهیم تا حد کافی از حجم سایتمون کاسته بشه.برای اینکار من بنا به تجربیاتم لایه مربوط به این تصویر رو انتخاب کرده و توسط ابزار Slice Tool از قسمت عرز 1px و به ارتفاع تصویر پس زمینه برش دادم که این تصویر رو می تونید تو پوشه images مشاهده کنید و بعد از برش توسط کلید های میانبر alt+ctrl+shift+s با فرمت png ذخیره کردم و با ضمیمه کردن در پروژم و ایجاد دیوی با شناسه head-bg با استایل زیر :

background-image: url('Images/header.png'); background-repeat: repeat-x;
min-height: 600px;


این تصویر رو به پس زمینه این دیو الحاق کردم چون گرادیانت تصویر من به صورت عمودی بود من نیز برش رو به صورت عمودی انجام دادم پس در نظر بگیرید برش باید به صورت انجام گیرد در نظر داریم آن تصویر به آن صورت برای ما نمایش داده شود..
خوب حال با دستور :

background-image: url('Images/header.png');

تصویر رو به پس زمینه لحاظ و توسط دستور :

background-repeat: repeat-x;

تصویری که دارای عرض 1px میباسد را موازی با محور x ها امتداد دادم تا تصویر پسز زمینه گرادینت دار من کل دیوم رو پوشش بده..
موفق باشید.

[ali200reza]

با تشکر از دوست عزیز
میشه لطفا اسم ابزار یا فیلتری که تو فوتوشاپ رنگ رو از قسمتی به قسمت دیگه کم و زیاد می کنه رو بگید.
در واقع همین چیزی که برا عکس header.png برای از پایین تا بالا استفاده کرده اید.
با تشکر مجدد

[hesamsalehnamadi]

مدیر گرامی ، آموزشت خیلی عالیه .. مرسی واقعا و فقط یه سوال ؟

تو فوتوشاپ اندازه طرح و dpi رو چه جوری تنظیم میکنید.... یعنی چند در چند و چه dpi ... باز هم مرسی... لیاقت :)

[Saber Mogaddas]

با تشکر از دوست عزیز
میشه لطفا اسم ابزار یا فیلتری که تو فوتوشاپ رنگ رو از قسمتی به قسمت دیگه کم و زیاد می کنه رو بگید.
در واقع همین چیزی که برا عکس header.png برای از پایین تا بالا استفاده کرده اید.
با تشکر مجدد
سلام
header سایت یک گرادیانت ساده هست که از رنگ روشن شروع و تا سفید امتداد داده شده ، برای دسترسی به این قابلیت کافی رویه لایه مورد نظر راست کلیک کنید و گزینه blending Option انتخاب کنید و از منو سمت چپ گزینه Gradient Overlay رو انتخاب کنید و تنظیمات لازم رو برای لایه مورد نظر اعمال کنید.


مدیر گرامی ، آموزشت خیلی عالیه .. مرسی واقعا و فقط یه سوال ؟

تو فوتوشاپ اندازه طرح و dpi رو چه جوری تنظیم میکنید.... یعنی چند در چند و چه dpi ... باز هم مرسی... لیاقت :)
سلام حسام جان
برای کاراهایی که نیاز به ظرافت داری 980px عرض و ارتفاع مهم نیست ولی بهتره که زیاد بگیری که در انتهای کار کمبود فضا نداشته باشید تا دوباره لایه هارو به یک میز کار دیگه کپی کنی.(maximum عرض باید 1007px هست از این بیشتر تو رزولوشن های مختلف مشکل ایجاد می کنه).
رزولوشن رو نیز 100 px/inch بگیر.

موفق باشید.

[ali200reza]

با تشکر مجدد از استاد
دو تا سوال
اول اینکه این چیزی که برای لایه هدر فرمودی با اون ابزاری که تو فتوشاپ معرفی کردی (gradient overlay ) تنظیمات رو انجام میدم ولی رو لایه اعمال نمی شه حتی به عنوان یه استایل جدید هم ذخیره کردم.نمی دونم کجاش گیر داره.با فتو شاپ هم کم و بیش اشنا هستم و بحث انتخاب بودن لایه اینا نیست.
بعد هم در مورد کار با div ها کلا می خوام بدونم رو چه اصولی چیدمانش انجام میشه یعنی طول و عرض و بقیه خاصیت هاش.
یعنی اگه یه صفحه رو فرض کنیم باید به اندازه تعداد سطر ها div درست کنیم با اندازه دلخواهمون و بیایم داخل اونا ستونها رو مشخص کنیم؟
ان شالله که تونستم خوب توضیح بدم.
با تشکر

[samaneh_62]

سلام
ممنون از آموزش سودمندتون
یه سوال داشتم :
چرا محتوای باکس های آبی به طور اتوماتیک داخل باکس قرار نمی گیرن و از حاشیش بیرون میزنن؟
ممنون میشم اگه زودتر پاسخم رو بدین

[Joyebright]

آموزشت خوب بود دوسته من فقط یه سوالی دارم اونم اینه که دقیقا بهم بگو wrapper چیه چون کاملا ٌ با طراحی وب آشنا هستم اما دقیقا نمی دونم wrapper چیه!

[Saber Mogaddas]

سلام


سلام
ممنون از آموزش سودمندتون
یه سوال داشتم :
چرا محتوای باکس های آبی به طور اتوماتیک داخل باکس قرار نمی گیرن و از حاشیش بیرون میزنن؟
ممنون میشم اگه زودتر پاسخم رو بدین
تو این اموزش محتوای باکس ها تنظیم نشده ، ولی بعد از این آموزش شما قادر خواهید بود محتوای باکس ها رو تنظیم کنید ، برای مثال می تونید داخل باکس از تگ p یا span استفاده کنید و بوسیله استایل های float و margin جابجاش کنید.
در هر صورت من تو آینده خیلی نزدیک آموزش طراحی responsive رو روی همین پروژه اعمال خواهم کرد که این جزئیات رو نیز کامل خواهم کرد.



آموزشت خوب بود دوسته من فقط یه سوالی دارم اونم اینه که دقیقا بهم بگو wrapper چیه چون کاملا ٌ با طراحی وب آشنا هستم اما دقیقا نمی دونم wrapper چیه!

دوست عزیز منظور از wraper دیو اصلی هست.

موفق باشید.

[esmaeilbf]

آموزشت خوب بود دوسته من فقط یه سوالی دارم اونم اینه که دقیقا بهم بگو wrapper چیه چون کاملا ٌ با طراحی وب آشنا هستم اما دقیقا نمی دونم wrapper چیه!
درواقع قسمتی از فضای بروزر هستش که برای سایتمون در نظر گرفتیم شما یه صفحه کاغذ رو فرض کن ، میخوایم داخلش هدر فوتر بدنه و اجزای سایت رو بکشیم . ابعاد و اون فضایی که کاغذ داره همون wrapperهست.

[samaneh_62]

سلام
چطور عکس هدر رو مستقل از صفحه نمایش کنم یعنی تو کامپیوتر دیگه ، هدر بزرگتر یا کوچکتر نشه ( منظورن فقط عکس قسمت هدر هست).
سپاس گزارم.

[marjan_gh]

با تشکر از آموزشتون
ای کاش درون این بخشهای اچ تی ام ال یکم سروری هم کار می کردید فک کنم دیگه بیچاره شدم اینقدر تو نت بابت این مسئله سرچ کردم و نتونستم چیزی پیدا کنم و مشکلم همچنان ادامه داره
می شه بگین اگه قرار باشه پستهای سایتتون به صورت پویا باشه یعنی از دیتابیس بگیره باید چه جوری بهش استایل بدیم؟
من واقعا گیر کردم
تو رو خدا کمکم کنید

[s18504k]

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

[Saber Mogaddas]

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

[caspianhero]

با تشکر از مدیرعزیز بخش
لطفا در اینده یک سایت در قالب css3 و html5 درست کنید تا حسابی مبحث تکمیل بشه:لبخند:
سپاس

[chahabi]

سلام و خسته نباشید

آموزشتون خوب بود و تلاشتون برای کمک به دیگران قابل ستایش

یه سوال داشتم . میخوام بدونم با css 3 و html 5 میشه دقیقا همچین چیزی طراحی کرد ولی بدون استفاده از عکس ها و نرم افزار های گرافیکی؟؟
من فتوشاپ زیاد وارد نیستم و بخاطر همین این اموزش یه خورده اذیتم کرد از ساعت 11 شب تا الان (2:45 ) کار کردم و تموم شد.
ولی خیلی چیز های جدیدی توی این اموزش یاد گرفتم

خدا قوت

[h.torabi]

سلام اگر بخایم تمام اجزای سایت رو در فتو شاب طراحی کنیم (همه قسمت های سایت) که سایتمان گرافیکی بشه
باعث کاهش سرعت سایت نمیشه؟

لطفا جواب بدید خیلی خیلی مهم هست:قلب::قلب::قلب::قلب::قلب:.... ............................

[Saber Mogaddas]

سلام اگر بخایم تمام اجزای سایت رو در فتو شاب طراحی کنیم (همه قسمت های سایت) که سایتمان گرافیکی بشه
باعث کاهش سرعت سایت نمیشه؟

لطفا جواب بدید خیلی خیلی مهم هست:قلب::قلب::قلب::قلب::قلب:.... ............................
سلام
مسلما اینطور خواهد بود بخاطر همین سعی می کنیم تا حد امکان از رنگ ها تو استایل های css استفاده کنیم و فقط تو قسمتهایی که نمیشه با رنگ و یا استایل ایجاد کرد از تصاویر استفاده کنیم، البته استفاده کردن از تصویر نیز روش های بخصوصی داره که مهمترین این روش ها استفاده از css sprite هست و یا روشی که تو قرار دادن سیب و ساعت تو این آموزش استفاده شده.
موفق باشید.

[MsMahtab]

بسیار عاااااااالی بود ممنونم
:لبخند:

[ahkh4000]

سلام
خیلی جامع و کامل بود
ممنون

[mahsa fatemeh]

سلام
در آموزش هاتون چگونگی گذاشتن قالب آماده رو هم گفتین؟
یا اگه نه بلدین چه جوری قالب آماده برای وب سایت بزارم با پسوند css

[mosi2007]

سلام بابت اموزش ممنون
ولی من نتونستم با فتوشاپش کار کنم و تکه ها رو از هم جدا کنم وقتی ctrl+alt+shift+s
میزنم یه صفجه دیگه باز میشه وقتی سیو میکنم کلی فایل پی ان جی میسازه
مثلا همین Header.png که شما ساختید رو میشه توضیح بدید که چطوری با slice tools جداش کردید و بعدش اینکه اسمش رو خودتون دستی سیو کردید یا اینکه خود بخود با همون اسم لایه سیو میشه ؟

[Saber Mogaddas]

سلام بابت اموزش ممنون
ولی من نتونستم با فتوشاپش کار کنم و تکه ها رو از هم جدا کنم وقتی ctrl+alt+shift+s
میزنم یه صفجه دیگه باز میشه وقتی سیو میکنم کلی فایل پی ان جی میسازه
مثلا همین Header.png که شما ساختید رو میشه توضیح بدید که چطوری با slice tools جداش کردید و بعدش اینکه اسمش رو خودتون دستی سیو کردید یا اینکه خود بخود با همون اسم لایه سیو میشه ؟

سلام
دلیل اینکه تصویرها تو زمان تکه کردن به تصویر های متعددی ذخیره می شن اینه که شما تو ذخیره (ctrl+alt+shift+s) باید تکه ای که نیاز دارید رو انتخاب کنید برای این کارم کافیه تو صفحه save to web که توسط (ctrl+alt+shift+s) باز میشه تکه ای که توسط Slice Tools برش دادید رو انتخاب کنید اگه می خواهید چند تیکه رو همزمان انتخاب و ذخیره کنید دکمه ctrl رو پایین نگه دارید و تکه هایی که توسط Slice Tools برش دادید رو در صفحه save to web انتخاب و ذخیره کنید. در مورد نام این تکه ها هم نه من اسمشون رو تغییر دادم تا تو برنامه نویسی css راحتر بتونم تشخیص بدم که کدوم فایل مربوط به کدوم تکه هست.

موفق باشید..

[hadi7112000]

خیلی آموزش عالی بود

[fafa_eng]

سلام

من تازه میخام شروع ب یادگیری طراحی وب سایت کنم زیاد درباره اش اطلاعات ندارم

میشه راهنماییم کنید

چ چیزایی باید واسه شروع یاد بگیرم و بلد باشم ؟؟؟ ینی پیشنیازش واسه شروع چیه ؟؟؟

اینجا فهمیدم ک فتوشاپ باید بلد باشم و html

دیگه چی ؟؟؟

منبع و کتاب خوب هم واسه یادگیری هر کدوم از پیش نیازاش اگه سراغ دارید معرفی کنید خیلی ممنون میشم:لبخند:

راستی دانشجوی نرم افزار هم هستم ترم 3 :چشمک:

[haj.mamad]

سلام
من میخوام یه صفحه ایجاد کنم که توش کد بک گراند رو بزارم که صفحه دارای بک گراند باشه
*الان تو این صفحه هیچ کدی نیست
لطفا کدهای مربوط به درج بک گراند برای صفحه رو برام بزارید ( اگه میشه واسه فایل php اگرم نمیشه که همون html رو بزارید)
مرسی

[SONITAJ]

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

[mostafait]

دوست عزیز آیا میشه از چند زبان برنامه نویسی در وب سایت استاتیک استفاده کرد؟

میخوام یک وب سایت استاتیک طراحی کنم و میخواستم بدونم که اگر بعدها لازم بشه چیزی به این وب سایت اضافه کنم که لازم باشه از زبان های دیگه استفاده کنم میشه در این سایت استفاده کرد یا خیر؟

باتشکر از تاپیکتون!

[SONITAJ]

سلام آقای مقدس لطفا جواب من را هم بدید چند هفته است که منتظرم.

[adapb.ir]

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

[Arusha1988]

سلام
ممنون بابت آموزش خوبتان
من این قسمت کد را متوجه نشدم ،اندازهایی که به بک گراند پوزیشن دادید
امکانش هست کمی بیشتر توضیح بدید
ممنون

.B-R-B {
background-position:-9px bottom;
}
.B-L-T {
background-position: 0px -1px;
}
.B-L-B {
background-position:-1px -11px;
}

[uniprj]

با سلام
ببخشید من یک قسمت توی CSS گیر کردم اگر بتونین کمک کنین ممنون میشم
راستش میخوام یک سایت سه ستونه داشته باشم ولی برای قرار دادن این سه ستون در کتار هم مشکل دارم لطفا راهنمایی کنید
با تشکر
M-N

[designer joomir]

باتشکر از درج مطالب مفیدتون.لطفا از مطالب طراحی وببیشتر بگذارید

[imanpost]

بسیار عالی بود. من از این تاپیک استفاده کردم. انشالا مقالات بیشتر طراحی سایت ببینیم.

[esn100]

سلام

دوستان من یه سایتی طراحی کردم تو (دریم ویور ) و (اکسپرسیون وب مایکروسافت)

1 - نمی دونم اندازه صفحه طراحی رو چجوری و چه اندازه بسازم که تو رزولوشن های کامپیوتر های دیگه بهم نریزه

2 - چکار کنم تا طرحی که درست کردم وسط صفحه بیافته؟؟ یعنی وقتی preview می گیرم کل طرح می افته سمت چپ صفحه موزیلایا اینترنت اکسپلور

من تو هر 2 برنامه این مشکلو دارم لطفا اگه کسی می دونه منو راهنمایی کنه خیلی خیلی فوریه

ممنون

[amir715]

با سلام
ببخشید من یک قسمت توی CSS گیر کردم اگر بتونین کمک کنین ممنون میشم
راستش میخوام یک سایت سه ستونه داشته باشم ولی برای قرار دادن این سه ستون در کتار هم مشکل دارم لطفا راهنمایی کنید
با تشکر
M-N
شما باید از چند لایه مخفی توی سایتت استفاده کنی و همینطور فکر کنم این دو تا کد در کنار هم براتون کاربردی باشه :
margin-right:auto
margin-left:auto
:لبخند:

[golish]

سلام من توی سایتم میخوام این امکانو بذذارم که مدیر سایت بتونه فایل هایی رو آپلود کنه و کاربرا بتونن اونارو دانلود کنن...
میشه کمکم کنیدد لطفا:افسرده:

[HCSH90]

#Head-Bg {
background-image: url('Images/header.png');
background-repeat: repeat-x;
min-height: 600px;
}





سلام. با تشکر از آموزش خوبتون...سوالی داشتم.ممنون میشم راهنمایی کنید.

من کد بالا رو بصورت زیر وارد میکنم ولی عکس پس زمینه قرار نمیگیره و هیچ تغییری اتفاق نمی افته:


#main{
background-image:url('images/header_slice.png');
background-repeat:repeat-x;
}

[fikhllhkif]

سایتی که ایجاد کردید در عین سادگی خیلی زیبا بود ...... آموزشتون خوب بود بیشتر از این جهت که مرحله به مرحله بود و در هر مرحله فایل ها رو برای دانلود گذاشته بودید.

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

[amoor1363]

میشه لطف کنید و مراحل همین طراحی سایت رو ادامه بدید برای پویا سازی همین سایت با کد های php و استفاده از یک سیستم مدیریت محتوا مثل wordpress تا انتهای کار
با تشکر فراوان

[masato]

میشه لطف کنید و مراحل همین طراحی سایت رو ادامه بدید برای پویا سازی همین سایت با کد های php و استفاده از یک سیستم مدیریت محتوا مثل wordpress تا انتهای کار
با تشکر فراوان
سلام
اگه شما با PHP و HTML ,CSS آشنایی داشته باشید آموزشهای زیادی وجود دارد کافی یه سرچ بکنی(آموزش طراحی قالب وردپرس)
موفق باشید

[designer joomir]

باتشکر از درج مطالب مفیدتون.

3 روش آموزش طراحی سایت
اینجا آدرس ادامه مبحث مطلب است:
http://sitedesign.joomir.com/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA/item/688-3-%D8%B1%D9%88%D8%B4-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA.html

[overgod]

ممنون آموزش html 5 رو هم بزارید








------------+
طراحی سایت (http://www.webtarah.com)

[alis184]

سلام
مرسی عالی بود

[MiladParvane]

دوست عزیز سلام من یه وب سایت دارم طراحی میکنم یه منوبار دارم بالای صفحه که پایینش اسلایدر دارم position دیو اسلایدر Relative هستش و position دیوی که قراره به صورت شناور روی اسلایدر نمایش داده بشه باید absolout باشه وقتی absolout هست دیو داخل تگ li خودش میوفته کد پروژه منه

<ul>
<li><a>صفحه نخست</a></li>
<li id="x"><a href="#">تست</a>
<div id="xPanel">

</div>
</li>

[MHudson]

سلام من یه وب با CSS و HTML طراحی کردم نمیدونم چیکار کنم ک اگر پست ها به 5 تا رسید یه صفحه اضافه کنه
منظورم صفحه بندی سایته

اگه کمکم کنید ممنونتون میشم

[oxin50]

بابت این اموزش ممنون عزیز اگر بشه فیلم اموزشی هم بزارید عالیه

[soft_ware]

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

[amir2225]

بسیار مفید بود متشکر

[taha_seven]

سلام چطوری میشه آهنگ و ساعت وب سایت که رو سیب هست شروع به کار کرد لطفا تگ های اینو هم اضافه کنید !!

[sustain]

سلام
ممنون از آموزش های مفیدتون... یه سوال داشتم:
من توی dreamweaver یک صفحه طراحی کردم با html اما با هر مرورگری که امتحان میکنم که به اصطلاح خروجی کارمو ببینم به اندازه ی کل صفحه باز نمیکنه... یعنی کوچک تر از اندازه مرورگر نشون میده.... باید چیکار کنم ؟ لطفا راهنماییم کنید

[taha_seven]

آقا تو را خدا جواب بدین لطفا الان اگه بخوایم این سایت رو دوزبانه کنیم چی میشه چطوری باید بکنیم ؟؟ اگه میشه جواب بدین یااگه میشه این رو دوزبانه بزارین واسه دانلود لطفا شدیدا نیازش دارم

[بهزاد علی محمدزاده]

سلام , دوستانی که سوال دارند لطف کنند و یه تاپیک براش ایجاد کنند در همین تالار طراحی وب تا به سوالشون پاسخ داده بشه. اینجا تاپیکی هست که ایجاد شده بود برای یه آموزش و سوالات و در تالار مطرح کنید.

[sabagch]

سلام. توی فایل css اولین استایلی که تعریف کردید * است. این یعنی Padding و margin همه تگ ها؟؟

[Saber Mogaddas]

سلام. توی فایل css اولین استایلی که تعریف کردید * است. این یعنی Padding و margin همه تگ ها؟؟

با سلام و خسته نباشید
کاراکتر * در استایل دهی به معنای تمامی تگ های html هست که گاهی بعنوان پیش فرض استایل می گیرند که توسط این تکه کد margin , padding پیش فرض تمامی تگ ها رو 0 در نظر می گیریم..
ساده ترین نوع css reset نیز نام دارد برای اطلاعات بیشتر در مورد css reset می تونید تو گوگل جستجو کنید..که وب سایت های بزرگی مثل یاهو ، گوگل نیز css reset های اختصاصی بطور استاندارد ارائه دادن...شما نیز می تونید برای خود نسبت به نیازتون css reset اختصاصی خود را داشته باشید.
موفق باشید.

[Arash Asadi]

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