راهنمایی و آموزش مرجع و آسان طراحی وبسایت

وضعیت
موضوع بسته شده است.

DaRiOuShJh

Member
دوستان با توجه به تقاضا های شما دوستان این آموزشه کوچیک و ساده رو نوشتم اگر طرفدار داشت کاملترش هم میکنم
سوالاتتون رو همینجا بپرسید
N_aggressive%20(45).gif


1.

قالب چیست؟

به مجوعه کدها، عکس ها و ... ای که شامل یک سند html و ... میگن قالب یا template
حالا شما میری و مثلا تو سایت های مختلف قالب های مختلف رو میبینی و چند تایی که خوشت میاد رو میگیری و دانلود میکنی رو کامپیوترت

قالب از کجا بیاری؟

سایت به این منظوره زیاده تو نت!
تنها کافیه که این عبارت رو کامل و به همین صورت جستجو کنی در گوگل (شامله دو ")

"free website template"

2.

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

2.1 یک سند html به نامه index.htm
2.2 یک directory یا folder به نامه images
2.3 عکس های یه کار رفته در قالب در فولدره images و در موارده لزوم فایل های js و ...
2.4 style.css
2.5 در بعضی موارد فایل های سورس یا استفاده یه شده شامله:
psd
swf
fla
swi
txt
font
و...

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

----------------------------

2.1 این سند فایله اصلیه قالب حساب میشه و باید تمامه تغییرات در اون داده بشه
تمامی کدها و ... در این سند قرار دارند
معمولا شامله لینک های خالی ای هم به about, home, contact us و ... میشه که شما بعد از انجامه تغییراتی که دوست داشتید و ایجاده صفحاته این قسمت ها میتونید این قسمت ها رو به صفحات مذکور link کنید

2.2 و 2.3 شامله object ها و عکس های استفاده شده در سنده index.htm میشه
تمامیه این موراد باید با همین نام و در همین فولدر آپود بشن تا مشکلی پیش نیاد
اگر هم خواستید در عکس ها تغییری بدید یا باید با همون اسم و همون سایز (دقیقا مشابه) save کنید یا اینکه به برنامه نویسی و زبان های html و css اشناییه لازم رو داشته باشید

2.4 شامله کدهای style و طرزه قرارگیریه object ها در سنده index.htm میشه
در مواردی کدهای اضافی ای هم برایه قسمت هایی که هنوز استفاده نشدند و ممکنه در آینده اضافه بشن هم هست
اگر به css آشنایی ندارید دست کاری ممنوع!

2.5 این فایل ها در بعضی قالب ها پیدا میشن
در این موارد از این برنامه ها استفاده کنید

psd --> photoshop
fla --> Marcomedia Flash
swi --> Swish

و ...

3.

در ویرایشه سند html یا هر سنده دیگری یادتون باشه که حتما قبل از اعماله تغییرات و در مواقعی خراب کاری!!! یک copy از فایله مذکور گرفته باشید

فونت های استاندارد و تعریف شده و شامله ساپورته فارسی از این قرارند:

tahoma
times new roman
arial
comic sans MS

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

تذکر: اگر تمایل به استفاده از فونت های دیگری در صفحات دارید به شما پیشنهاد میکنم که آنها را به گرافیک ویا عکس تبدیل کنید
مثلا به فایلهای فلش .swf یا عکس هایی با پسوند .jpg و .gif

4.

همانطور که قبلا هم اشاره شد باید برای درست کردنه صفحات دیگر به جز صفحه اصلی، سند هایه دیگری بسازید
راحت ترین کار در هنگام استفاده از قالب ها گرفتنه copy از خوده سند index.htm در کناره آن و تغییره نام آنها مثلا به این موارد میباشد

contactus.htm
aboutus.htm
links.htm
products.htm
و...

اگر هم عکسی یا مطالبی برایه این قسمت ها و صفحات در نظر دارید تو یه هر قسمت قرار میدید

و در انتها کلیه فایل ها رو آپلود میکنید
N_aggressive%20(18).gif


به همین سادگی میتونید صاحبه یک وبسایت بشید

DARIO
53.gif
U
SHJH
 

DaRiOuShJh

Member
آشنایی تصیوری با یک صفحه

djh_htmlsample.gif
با عرض سلام و خسته نباشید خدمته شما دوسته عزیز
میخوایم با هم به زبونه خیلی ساده و راحت با کدهای پایه و ترکیبیه زبونه HTML و مقداری هم زبون های CSS و JavaScript آشنا بشیم
.: مقدمه:
همونطور که میدونید زبونه قدیمی و پایه برنامه نویسی تحته وب HTML هست که خود شامله چند تایی کدهایه اصلی و همینطور متغیر های وابسته یه این کدها میشه هست، بعدها زبان هایه دیگه ای برایه کاملتر کردنه این زبون وارده کدنویسیه تحته وب شدن که با ادغام و استفاده از همون کدهایه فرعیه قبل، امکاناته بیشتری رو به طراحان دادند
ما اینجا میخوایم با کمکه عکس با کدهایی که معمولا در یک صفحه ممکنه مواجه بشیم آشنایی پیدا کنیم
تذکر: من اینجا به طور خلاصه هر قسمت رو توضیح میدم، پیدا کردنه اطلاعات کاملتر و جامع تر و همینطور آنایی کامل با کدها و متغیرهای هر کدوم بر عهده یه خودتون هست
من برایه راحت تر شدنه تفکیکه هر قسمت، قسمت هایه مختلف مربوط به گروه کدها رو های لایت کردم
.: توضیحاته قسمتها:
1. نوعه سنده شما رو مشخص میکنه، متغیر هایه مختلفی رو میگیره (از این قسمت میتونید سمتی رو که میخواید اسکرول بار به نمایش در بیاد با تغییره به این کد تعریف کنید:)
<html dir="rtl" lang="fa">
2. دستوراتی هستند که به صورته comment و فقط در source یا همون منبعه صفحات به نمایش در میان، در مرورگر نشون داده نمیشند
3. هر سنده HTML از دوقسمته اصلی تشکیل میشه
HEAD که شامله اطلاعاته معرفی سند به مرورگر و نوعه محتوا و ... میشه (در محتوایه صفحات نقشه چندانی نداره)
BODY که بدنه یه سند هست؛ یعنی کلیه مطالبی که قراره در صفحه نشون داده بشه در این قسمت قرار میگیرن؛ در آینده بیشتر آشنا میشیم با این قسمت...
4. META TAG ها تقریبا اولین پله ارتباطی بینه مرورگر یا همون browser و سنده شما هستند، علاوه بر این نقشه مهمی رو در index شدنه صفحات شما در موتورهای جستجو و همینطور Rnking صفحه و زیر شاخه بندی و ... سایت دارن پس به اونها خیلی توجه داشته باشید و کامل پر کنیدشون
4.1 خطه 8: در این قسمت شما کلماته کلیدیتون رو با توجه به محتوایه سایت و صفحتون میزارید به جایه عبارته keywords!!!
معمولا شامله چند مورد میشه که هر مورد رو با ویرگول و فاصله جدا میکنید
4.2 خطه 9: توضیحی مختصر و کوتاه از سایتتون و محتواش به جایه عبارته Description!!!
4.3 خطه 10: به مرورگر میگه که باید کدها و نوشته ها چون فارسی هستند یونیکد بشه تا عجق مجق نشون نده
4.4 خطه 11: ماننده خطه 14 میگه که مطالب و زبونه سایت فارسی هست
4.5 خطه 12 و خطه 15: سایته شما رو در شاخه یه عمومی دسته بندی میکنه، اگه خواستید تغییر بدید
4.6 خطه 13: موضوعه سایته شما
4.7 خطه 16: به مرورگر میگه که برایه عکس های صفحه image toolbar رو نیاره
5. کده الصاقه فایله CSS خارجی external در صفحه (در سایت هایه پر صفحه و انجمن ها خیلی میتونه در حجم و سرعته بالا اومدنه load صفحه تاثیر گزار باشه)
6. یه نمونه کده جاوا اسکریپت که یه صورته inline در صفحه قرار گرفته و کارش اینه که نزاره مرورگر اگه مشکلی در کدهایه جاوااسکریپته صفحه دید به کاربر بگه
7. ماننده مورد 5 یک کده CSS ولی ایندفه به صورته inline
با این کد عکسه شما در پشته صفحه در وسط و به صورت چفت شده fix نشون داده میشه
8. در این قسمت هم متنی رو که در بالایه پنجره یه مرورگر نشون داده میشه میدید (میتوه نامه سایت، نامه صفحه و ... باشه)
9. </head> یعنی به پایانه قسمته HEAD سند رسیدیم
10. از اینجا به بعد با کدی که گزاشته شده وارده قسمته بدنه یا BODY سند میشیم
11. این کد همون کده <body> هست ولی چند تا متغیر هم بهش اضافه کردیم
11.1 ثابت شدنه بک گراند در صورته وجوده عکس
11.2 فاصله از بالا و سمته چپه صفحه صفر پیکسل باشه
11.3 رنگه زمینه یه صفحه مشکی باشه (000000 در کدهای RGB یعنی red green blue به معنیه کم رنگ بودن و عدمه رنگ داشتنه هر 3 رنگه قرمز، سبز، و آبی هست که معادله مشکی هست، در نقطه یه مقابل FFFFFF نشانگره پر رنگ بودنه هر سه رنگ در نتیجه سفید بودنه رنگ میشه، به همین تریب با مقادیره مختلف میشه رنگ هایه مختلف رو به درست آورد)
12. کده الصاقه سنده جاوا اسکریپته خارجی (ماننده مورد 5)
13. نمونه ای از استفاده از کدهای div, table,td,tr و همنطور کده IFRAME که امکانه لود شدنه صفحه ای دیگر در صفحه یه شما رو میده و متغیرهای یه هر کدوم (برایه مشاهده یه کده کامل به فایله ضمیمه مراجعه کنید)
14. نمونه ای از EMBED کردن آبجکت ها
در این مورد فایله مورده نظر یک فایله فلش هست که تنظیماته خودش رو داره (سادن نیازی به توضیح نمیبین
15. این هم کده img که مخصوصه وارد کردنه فایل های عکس image به سند و نمایشه اونهاس border به معنیه حاشیه، لبه ای برایه عکسه شما درست میکنه که با 0 گزاشتنه مقدار نمایش داده نمیشه
16. در این قسمت قسمته بدنه هم به پایان رسیده
17. پایانه سنده HTML و والسلام!!!

--------------------------------------------------------------------------------
امیدوارم این آموزش به کاره شما اومده باشه
موفق و موید باشید...:12:
.: DaRiOuShJh :.
اینم لینکه دانلوده آموزش + عکس + فایله نمونه (106 کیلوبایت)
http://www5.webng.com/darioushjh/designes/htmllearning/djh_html_learning.zip
 

DaRiOuShJh

Member
از مدیرانه محترم میخواستم بپرسم امکانه مهم کردنه این 3 تاپیک هست آیا یا نه؟
چون من تالاره وبه اونجا رئ میچرخوندم و مهم بودنه این 3 تاپیک به خیلی ها کمک میکرد
حالا که به دلایلی دیگه اونجا نمیرم میخواستم بدونم میشه اینجا مهم کنید که ادامه بدم یا نه
 

radan

New Member
سلام به همه دوستان
درمورد قرار گرفتن عکس درtable سوال داشتم .آیا دستوری هست که عکس دلخواه را دقیقادر یک سلول از یک Table قرار بدیم و اصطلاحا stretch بشه?(کاملا در اون قرار بگیره )
 
سلام

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

ولی من یه سوال داشتم ازت هر کاری میکنم اینو نمینویسه چیکار کنم ؟

<?php
echo "dariush is banned from .....ok
?>
looooooooooooooooll
قربونت یه راهنمائی کن :eek: دلم برات تنگ میشه یه جوری برگرد
 

DaRiOuShJh

Member
سلام

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

ولی من یه سوال داشتم ازت هر کاری میکنم اینو نمینویسه چیکار کنم ؟

<?php
echo "dariush is banned from .....ok
?>
looooooooooooooooll
قربونت یه راهنمائی کن :eek: دلم برات تنگ میشه یه جوری برگرد

:)به به به!
والا خودمم گم شدم تو این همه فروم و تالار و ....:eek::razz:
خواهش و ممنون
امیدوارم همینجا ها باشم هی!
 

mohsen_blid

Active Member
منتظرم یه اموزش کلی بزاری و حتما ان را به صورت پی دی اف قرار بدی تا دیگه از این جور مشکلات نداشته باشیم و منبع کامل باشه
 

DaRiOuShJh

Member
منتظرم یه اموزش کلی بزاری و حتما ان را به صورت پی دی اف قرار بدی تا دیگه از این جور مشکلات نداشته باشیم و منبع کامل باشه


ببخشید متوجه نشدم:eek:
این هم کامله در حده خودش و هم قابله دانلود

شما چیزه خاصی مده نظرته؟:wink:
 

Y.FASHiST

Member
سلام بر بچه های مبحث فوق العاده . حالا من یه سوال دارم
ا من با فتوشاپ یه صفحه رو طراحی کردم . حالا همون خروجی html رو تو FrontPage آوردم عکس زیاد داره تو این صفحه .
حالا میخوام هم سرعت لود شدن صفحه بره بالا هم سورسش کم شه این جوری سورسش خیلی طولانیه .
لطفاٌ راهنمایی کنین
 
آخرین ویرایش:

DaRiOuShJh

Member
دوسته عزیز خوش اومدی
اولین نکته ای که باید اشاره کنم اینه که من به شخصه بریدنه قتوشاپ رو قبول ندارم و خودم بنا به نیازهام میبرم و تو صفحه قرار میدم که این خودش آشنایی با css و html در حده نسبتا خوب لازم داره
فتوشاپ کله عکس ها رو با همون کیفیت و همون اندازه ها میاره تو صفحه
بهترین کار اینه که شما با کمکه rulers یا ctrl + r قسمت بندی کنید با توجه به کدهاتون و ببرید:wink:

اینطوری هم رو حجمه عکسها بیشتر میتونید مانور بدید هم تعدادشون
 

Y.FASHiST

Member
ممنونم دوست عزیز ولی من می خوام کد سورس صفحه من کم بشه این جوری خیلی زیاده
 

DaRiOuShJh

Member
یعنی یه طورایی میخوای فقط کدها کم بشه؟
درسته؟
کد ها نمیخوای تغییر کنه؟
 

springbox

New Member
سلام بچه ها
کسی میتونه به من بگه چه جوری می تونم قالبی رو که با trendy flash طراحی کردم تو فضای خودم بارگذاری کنم
ممنون
 

RoOHTASViR

New Member
بسيار تشكر آقاي داريوش عزيز با اين آموزش جالبتون
فقط جيزيكه بسيار براي ما مبتدي ها مهمه اينكه بدونيم قالبي رو كه در يك سرور آپلود كرديم چطوري روي يه هاست مجاني و يا پولي قرار بديم
اگه مي شه يه هاست مجاني رهنمائي كنيد و طريق قرار دادن سايت نه وبلاگ، رو بما ياد بديد
خيلي خيلي ممنون آقاي داريوش
و خيلي خيلي مهمه
تشكر
و همچنان منتظر جوابم
 

kamran-h

Active Member
سلام دوست عزيز ( 1q1q1q) به انجمن مجيد آنلاين خوش آمديد. ازاين به بعد براي تشكر كردن از كليد تشكر در پايين هر پست استفاده كنيد.:rose:
 

0001

New Member
مطابق قوانین انجمن، تبلیغات ممنوع است.
حسین سعیدی
 
آخرین ویرایش توسط مدیر:

k.i.m.i.a

New Member
اگر ممكنه يك بخش آموزشي در مورد طراحي وبلاگ در بلاگفا هم بگذاريد شامل :
كدهاي امار بازديد كنندگان- لينك - عكس و ...
آخه ما تازه واردها هم دل داريم.ممكنه يك روز طراحان خوبي از بين ماها تحويل جامعه بديد.ثواب داره.
ممنون
 
وضعیت
موضوع بسته شده است.

جدیدترین ارسال ها

بالا