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

واضح آرشیو وب فارسی:سایت ریسک: DaRiOuShJh19-02-2008, 01:05 PMدوستان با توجه به تقاضا های شما دوستان این آموزشه کوچیک و ساده رو نوشتم اگر طرفدار داشت کاملترش هم میکنم سوالاتتون رو همینجا بپرسید:46: 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 و... اگر هم عکسی یا مطالبی برایه این قسمت ها و صفحات در نظر دارید تو یه هر قسمت قرار میدید و در انتها کلیه فایل ها رو آپلود میکنید:12: به همین سادگی میتونید صاحبه یک وبسایت بشید DARIOhttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/53.gifUSHJH DaRiOuShJh19-02-2008, 01:09 PMhttp://www5.webng.com/darioushjh/designes/htmllearning/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 کیلوبایت) !!!! برای مشاهده محتوا ، لطفا ثبت نام کنید / وارد شوید !!!! Amin eHelp19-02-2008, 01:21 PMسلام داریوش جان. مرسی دستت درد نکنه. آره حتما لازم می شه. DaRiOuShJh19-02-2008, 04:02 PMامین جان مرسی از پشتیبانیت:12: بازم مثله همیشه:10::11: والا دیگه من خسته شدم اینقد این موارده پایه رو توضیح دادم امیدورام دوستان یه نگاهی به اینجا بزنن چون در صورته پرسیدن این موضوعات به شخصه دیگه با تمامه علاقه ای که به دوستان دارم و احترامی که بهشون میزارم جواب نمیدم tabriz-info20-02-2008, 08:39 AMموافقم بهتره لینکشو همیشه داشته باشی تا وقتی اینجور سوالا پیش میاد برای بار 100 توضیح داده نشه DaRiOuShJh21-02-2008, 10:09 PMدر پسته دو آموزشه کامل + عکس رو گزاشتم لطفا یکی از دوستانه رهگزر که از اینورا رد شد!!! این تاپیک رو استیکی کنه نره پایین!!! Oracle_Eldorado21-02-2008, 10:51 PMعالی بود داریوش جان . ممنون و دستت درد نکنه . majid-ar22-02-2008, 02:12 AMایول داریوش جون. کارت خیلی خوبه. http://majid-ar.parsaspace.ir/img/tak/majid-ar.GIF DaRiOuShJh23-02-2008, 12:57 AMخواهش میکنم دوستان:12: کوچولو بیا بالا دلم برات تنگ شده بود... DaRiOuShJh10-04-2008, 04:24 PMمحسن جان امکانش هست این تاپیک هم استیکی بشه تا موضوعاته مرتبط هم اینجا قرار بگیره گه امکانش هم باشه پست هایه اضافی پاک بشن خیلی خوب میشه ممنون:12: Mr.K210-04-2008, 04:31 PMداریوش جان ممنون ... اره خوبه که اینجا بچسبه و بشه مرجع.. yasser168011-04-2008, 03:55 AMعالیه ای کاش آموزش ساخت قالب وبلاگ هم دوستان بزارن. DaRiOuShJh11-04-2008, 01:39 PMداریوش جان ممنون ... اره خوبه که اینجا بچسبه و بشه مرجع.. :20:مرسی دلمون برایه محتی جان تنگیده نمیدونم کجانhttp://www.pic4ever.com/images/89.gif عالیه ای کاش آموزش ساخت قالب وبلاگ هم دوستان بزارن. :10:خواهش دوسته عزیز متاسفانه من اصلا با وبلاگ ها آشنایی ندارم و خضپصومته شخصی هم دارم محمد جان فک کنم یه تاپیک در این ضمینه زده بودن reza 9021-04-2008, 03:48 PMخوب بود خسته نباشی DaRiOuShJh23-04-2008, 04:50 PMمحتی جان به نظرت این اینجا باشه بهتره یا استاتیک؟ البته چون مقدماتی هست میتونه اینجا هم باشه؟!!×؟ سایت ما را در گوگل محبوب کنید با کلیک روی دکمه ای که در سمت چپ این منو با عنوان +1 قرار داده شده شما به این سایت مهر تأیید میزنید و به دوستانتان در صفحه جستجوی گوگل دیدن این سایت را پیشنهاد میکنید که این امر خود باعث افزایش رتبه سایت در گوگل میشود

این صفحه را در گوگل محبوب کنید

[ارسال شده از: سایت ریسک]

[مشاهده در: www.ri3k.eu]

[تعداد بازديد از اين مطلب: 255]