آموزش طراحی قالب بلاگفا – درسنامه شماره 2

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

 در این درس نامه خواهیم گفت که

             ما به چه چیزهایی نیاز داریم  .

همانطور که در درس قبل ذکر شد ما برای طراحی قالب بلاگفا باید با HTML و CSS کد نویسی کنیم . برای اینکار به ویرایشگر کد های HTML نیاز داریم .

 HTML می تواند با استفاده از ویرایشگرهای متفاوتی مانند Dream Weaver و یا Visual Studio نوشته یا ویرایش شود . البته ما در این آموزش ها از یک ویرایشگر متن ساده مانند نوت پد ویندوز (Notepad) و یا Notepad++ برای ویرایش اسناد HTML استفاده می کنیم . زیرا معتقدیم که استفاده از یک ویرایش گر ساده بهترین روش برای یادگیری HTML است .البته Notepad++ علاوه بر سادگی امکانات بیشتری نسبت به نوت پد ویندوز دارد و توصیه می کنیم از این ویرایشگر استفاده کنید . برای دانلود این نرم افزار از لینک های زیر استفاده کنید .

دریافت بسته نصبی از اینجا

دریافت بسته پرتابل از اینجا

برای دیدن تصاویر در اندازه واقعی بر روی آن کلیک کنید

روند آموزش

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

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

 آموزش های بیشتر :

معرفی HTML - به زبان انگلیسی

 ویرایش HTML - به زبان انگلیسی

 

آموزش طراحی قالب بلاگفا - درسنامه شماره 1

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

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

در صورتی که در فرآیند آموزش سوالی داشتید می توانید ، از طریق نظرات با ما در میان بگذارید .

صفحات وب

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

شما برای دیدن کد هایی که در پشت صفحاتی که شما مشاهده می کنید ، کافیست در صفحه مورد نظر راست کلیک کرده و گزینه view page source کلیک کنید ( توجه شود این گزینه برای مروگر فایرفاکس است و در دیگر مرورگر ها ممکن است اندکی متفاوت باشد مثلا در اینترنت اکسپلورر باید گزینه page source را بزنیم ) تا کد های آن صفحه از وب را برای شما نمایش دهد .

نمونه نمای گرافیکی یک وبسایت

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

برای کد نویسی صفحات وب زبان های مختلف برنامه نویسی مانند PHP , ASP , HTML , Java  و ... ایجاد شده است . ما به جزییات این زبان ها کاری نداریم فقط  از HTML و CSS برای طراحی قالب خود بهره می گیریم و اندکی هم با Javascript آشنا خواهیم شد ، تا بتوانیم قالب خود را به آسانی طراحی کنیم .

HTML چیست ؟

HTML  مخفف Hyper Text Markup Language است . HTML یک زبان برنامه نویسی نیست بلکه زبان نشانه گداری است و شما می توانید در بیشتر صفحات وب آنرا مشاهده کنید . این زبان با تگ هایی به توصیف اشیا در یک صفحه وب می پردازد .

برای یافتن توضیحات بیشتر به لینک های زیر مراجعه کنید .

مجموعه آموزشی HTML از وبسایت معتبر w3schools - زبان انگلیسی

معرفی HTML از  w3schools - انگلیسی

معرفی HTML - ترجمه فارسی لینک بالا

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

پایان درسنامه اول

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

آموزش طراحی قالب بلاگفا2

زمانی که شما یک صفحه اینترنت را با مرورگري دلخواه (اینترنت اکسپلورر، فایرفاکس، اپرا و... ) باز کرده و مشاهدهمی کنید، در واقع تبدیل شده کد هایی را می بینید که در پس این صفحه وجود دارد . این کد ها به زبان HTML نگارش یافته اند . پس برای اینکه ما بتوانیم در قالب ها تغییراتی ایجاد کنیم و یا قالب هایی بسازیم باید حداقل اطلاعاتی در مورد این مسئله داشته باشیم . آموزش HTML در این جا و زمان کم نمیشه ولی شما میتونید با دنبال کردن آموزش های این سایت به اطلاعات لازم برای دنبال کردن این آموزش ها برسید .

علاوه بر این لینک این آموزش ها در جعبه سمت چپ و زیر درباره وجود دارد .

دومین مسیله هم اینکه ما برای اعمال تغییرات از قالب کوهستان که در قالب های خود بلاگفا قرار دارد استفاده می کنیم .

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

پایان درسنامه دوم

آموزش طراحی قالب بلاگفا1

درسنامه اول : ما به چه چیز هایی نیاز داریم .

ما به یک وبلاگ نیاز داریم که بتونیم تغییرات و کد هایی که در طول آموزش و به مرور می نویسیم رو در اون تست کنیم من برای این کار یک وبلاگ جدید ایجاد کردم و تغییرات ور در اون اعمال می کنم و وقتی به نتیجه دلخواه رسیدم اونو رو به همین وبلاگ منتقل کنم .

http://blog4test.blogfa.com/ این وبلاگی هست که از این به بعد تغییرات در اون اعمال میکنم .

دوم ما به یک ویرایشگر ساده متن نیاز داریم تا بتونیم کد ها رو در اون ایجاد و ویرایش کنیم برای این کار میتونیم از notepad خود ویندوز استفاده کنیم ولی پیشنهاد من استفاده از++ notepad است که میتونید از لینک های زیر دریافت کنید .

دریافت بسته نصبی از اینجا

دریافت بسته پرتابل از اینجا

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

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

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

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

روند آموزش :

1 - بررسی کدهای مربوط به قالب های بلاگفا

------- کد های یک قالب از قالب ها رو بررسی میکنیم .  کد های اصلی در همه قالب ها یکسانند

2 - سازگار کردن یک قالب خاص با نیازهای خودمون

------- یکی از راحت ترین کارها برای اینکه بتونیم یک قالب آماده را با تغییر جزئیات مطابق سلیقه خودمون در بیاریم . اکثر وبسایت های ارایه دهنده قالب تنها چند قالب محدود رو طراحی میکنند و با تغییر دادن اون تعداد زیادی قالب دیگه از توش در میارن .

3 - تبدیل قالب طراحی شده در فتوشاپ به قالب وبلاگ

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

4 - نصب قالب طراحی شده در وبلاگ

--------- مرحله آخر هم اینه که ما قالب خودمون رو که طراحی کردیم رو در وبلاگمون قرار میدیم

با ما همراه باشید از شنبه 9 اردیبهشت .

ادامه نوشته