X
تبلیغات
info@ParsianPortal.com Template Designing HTML contact: morteza.khaky@gmail.com Learn how to create Blogfa templates Author: Morteza Khaky Part one WwW.MihanDownload.CoM Template designing | Part one | HTML Page مقدمه: این نوشتار حاصل چندین سال تجربه و مطالعاتی بسیار در زمینه طراحی قالب هاي وب به زبانهاي مختلف است انتهاي این آموزش، خواهید توانست قالبی دلخواه براي وبسایت یا وبلاگ خود طراحی نموده یا ترجمه کنید وجه تمایز عمده ي این نوشتار با سایر مقالات آموزشی طراحی قالب، کاربردي بودن آن است. تمام تلاش بر آن بوده است تا مخاطب بتواند با صرف زمانی کوتاه، مطالبی را در حد رفع نیاز خود فرا گیرد و حتی با تلاش بیشتر بتواند بصورت حرفه اي به آن بپردازد. اصولی که در زمینه کد نویسی براي طراحی وبلاگ یا وبسایت به کار می رود یکسان است اما تفاوت هایی دیده میشود که به تفضیل در مورد آنها بحث خواهد شد. در طول کار فرض بر این است طراحی قالب وبلاگ، براي سرور محبوب بلاگفا انجام می شود. امید است با مطالعۀ این آموزش بتوانید مطالب مفیدي را به دانسته هاي خود اضافه کنید. در صورت بروز هرگونه مشکل یا سوالی، می توانید از طریق ایمیل با من مکاتبه کنید. مرتضی خاکی morteza.khaky@gmail.com 1 WwW.MihanDownload.CoM Template designing | Part one | HTML Page * شناخت صفحات وب و مرورگر ها: زمانی که شما یک صفحه اینترنت را با مرورگري دلخواه (اینترنت اکسپلورر، فایرفاکس، اپرا و... ) باز کرده و مشاهده می کنید، جلوه اي گرافیکی نمایان می شود بدون توجه به چیزي که در وراي این صفحه تلاش میکند جلوه اي منظم و جذاب نمایان شود. در واقع هر مرورگر اینترنت را می توان یک مبدل کد ها و زبانهاي برنامه نویسی خاص به گرافیک دانست. و در طی سالیان اخیر (html, CSS, Java, PHP …) زبانهاي مختلفی براي کدنویسی صفحات وب ایجاد شده اند تلاشهایی براي هماهنگ سازي و استاندارد کردن آنها شده است. همچنین فعالیت هایی به منظور هماهنگی مبدل هاي وب (مرورگر ها) انجام شده است که تا حدي موفقیت آمیز بوده است اما در برخی مواقع مارا دچار مشکل هاي آنرا تست می کنید و نتیجه opera طراحی می کنید و با مرورگر html جدي می کند. فرض کنید قالبی را به زبان Internet دلخواهی می گیرید. اما زمانی که این قالب را روي وبسایت خود آپلود می کنید کاربري با مرورگر آنرا مشاهده می کند و شاهد به هم ریختگی آن می شود. علت بروز این مساله تعریف متفاوت این مرورگر explorer است. براي مقابله با این مشکل راه هاي زیادي وجود دارد. در درجه اول (Tags) ها از فاصله ها در برخی تگ ها تست کنید. به عبارت فنی قالب خود را براي Internet Explorer پیشنهاد می شود در طول ساخت آنرا با مرورگر این مرورگر بسازید. به احتمال زیاد با این قالب با دیگر مرورگرها هماهنگ خواهد بود. راه حل دوم درج برخی کد ها در بود Internet Explorer هک می کنند تا در صورتی که مرورگر مخاطب IE قالب است که به اصطلاح قالب را براي آنرا به صورت دیگري که دلخواه ما است نمایش دهد و ... فرا خواهید گرفت JavaScript را خواهید آموخت و نیز نکاتی را درمورد Css و Html در این سري مقالات زبانهاي زیرا براي طراحی یک قالب خوب در سرور بلاگفا این سه زبان را به کار خواهیم گرفت. 2 WwW.MihanDownload.CoM Template designing | Part one | HTML Page (Hyper Text Markup Language) HTML * عمده صفحاتی که در وب مشاهده می کنید به این زبان طراحی شده است. حال نمونه ساده اي از این زبان را مشاهده می کنیم: morteza khaky Hello world! باز کنید و کدهاي فوق را در آن کپی کنید. Notepad براي مشاهده نتیجه کار خود یک Start menu > All Program > accessories > notepad notepad ذخیره کنید. (براي این منظور در UTF-8 Encoding و با htm یا html حال فایل ایجاد شده را با پسوند را انتخاب کنید. محلی براي ذخیره انتخاب کنید. در پائین کادر محاوره اي باز شده سه فیلد Save as رفته و File به بنویسید و در فیلد سوم index.htm و یا index.html مشاهده خواهید کرد. در فیلد اول نام فایل مورد نظر را را انتخاب کرده و سپس ذخیره کنید.) سپس به محلی که فایل را ذخیره کرده اید رفته و آنرا باز UTF- اینکودینگ 8 کنید. نامگذاري می کنند. index نکته: معمولا صفحه اول وبسایت را TAG * می بینید. هر تگ به صورت زیر شروع شده و پایان HTML تگ ها یا برچسب ها المانهایی هستند که آنها را به وفور در می یابد: Statements (
و برخی دیگر اختیاري است (مانند ( نکته: وجود برخی از تگ ها در کد الزامی است (مثل تگ 3 WwW.MihanDownload.CoM Template designing | Part one | HTML Page به جز موارد معدودي که ایرادي ایجاد ( ) نکته: تمامی تگ ها می بایست حتما در جایی بسته شوند (
نمی کنند (مانند است. این برچسب به مرورگر شما می فهماند که این آغاز یک ، شما HTML در فایل (Tag) اولین برچسب است.این برچسب به فایل شما می فهماند که این انتهاي است، آخرین برچسب در فایل شما HTML فایل است. HTML یک فایل است. متنی که در مرورگر نشان داده خواهد شد ، متنی است که بین برچسب * بررسی چند تگ متنی:

Morteza Khaky

Morteza Khaky

Morteza Khaky

Result Morteza Khaky Morteza Khaky

Morteza Khaky

Morteza Khaky

Morteza Khaky

Morteza Khaky
Morteza Khaky
Morteza Khaky
Morteza Khaky
تعریف کرد. CSS توضیح: می توان اندازه این سرتیتر ها را در

This is Html tutorial. Enjoy it.

Result This is Html tutorial. Enjoy it.

This is Html tutorial.

Enjoy it.

This is Html tutorial. Enjoy it.
شما را از هر جا که قرار دارید به یک خط پایین تر می برد.
در پاراگراف بندي و ایجاد خطوط خالی 4 WwW.MihanDownload.CoM Template designing | Part one | HTML Page * تشریح سورس یک قالب وبلاگ بلاگفا: CSS نمونۀ زیر یک کد قالب وبلاگ براي بلاگفا است که براي کوتاهی و خلاصه شدن، قسمت عمده اي از کد که به زبان بوده است را در یک ارجاع اکسترنال به صفحۀ دیگري واگذار کرده ام. توجه کنید توضیحات می توانند به صورت کامنت است در داخل سورس باشند؛ یعنی شما می توانید مانند هرزبان کنید نوشتن کامنت ها در زبانهاي مختلف برنامه نویسی متفاوت است. براي نمونه: : Html در /* comments */ : CSS در اگر براي بلاگفا کد نویسی می کنید، خواهید توانست با مبدل هاي آنلاین موجود در اینترنت، قالب خود را بصورت رایگان به پرشین بلاگ تنبدیل کنید و به عکس. براي مشاهده توضیحات هر قسمت، اشاره گر موس خود را روي علامت نگه دارید. اگر علامتی مشاهده نمی کنید را مشاهده می کنید، کامنت ها را فعال کنید. PDF در قسمت تنظیمات برنامه اي که با آن این فایل می توانید این کد را در وبلاگ خود امتحان کنید یا اینکه حاصل را در این آدرس مشاهده نمائید: www.m-khaky.blogfa.com 5 برنامه نویسی دیگري داخل سورس برنامه توضیحاتی ارائه کنید که براي خوانایی برنامه باشد و اجرا نشو WwW.MihanDownload.CoM Template designing | Part one | HTML Page 6 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> آموزش طراحی وبسایت a:visited {font-size:8pt}#postdesc a:hover {font-size:8pt} #postdesc{font-size:7pt;color:#6F785E;direction:rtl;margin-bottom:20px}#postdesc a, #postdesc bottom:15px} #mbody{text-align:center;color:#D2B077;direction:rtl;margin-bottom:15px;padding- #title{height: 43px;color:#E8B33C} 8pt;color:#AA7E33;line-height: 1.5em;padding-right:10px} div#navigation{float:right;width:185px;text-align:center;font-family: Tahoma; font-size: 8pt;color:#E3C591} WwW.MihanDownload.CoM Template designing | Part one | HTML Page ,width=500px,height=500px')\" >" + strResult + " " ; document.write ( strResult ) ; } function OpenLD() { window.open('/links','blogfa_ld','status=yes,scrollbars=yes,toolbar=no,menubar=no,loc ation=no ,width=500px,height=500px'); return true; }

آموزش طراحی وبسایت









10 WwW.MihanDownload.CoM Template designing | Part one | HTML Page
پیوندها
آمار وبلاگ
12 WwW.MihanDownload.CoM Template designing | Part one | HTML Page
طراح
14 WwW.MihanDownload.CoM Template designing | Part one | HTML Page ( blogfa.com : بررسی بلاك هاي بلاگفا (منبع کدهاي عمومی قالب قرار دهید. توجه داشته باشید که بلاگفا نسبت به کوچکی و بزرگی حروف انگلیسی HTML این تگها را میتوانید در هر جایی از کد حساس است و بنابراین هنگام استفاده از آنها در نحوه تایپ آنها دقت کنید. کد توضیح demo.blogfa.com کد معرفی کننده نام کاربري وبلاگ. بطور مثال اگر آدرس وبلاگ میباشد. demo باشد ، نام کاربري آن m-khaky http://demo.blogfa.com آدرس اینترنتی وبلاگ .مانند http://m-khaky.blogfa.com میباشد. RSS وبلاگ که بصورت XML نام صفحه نمایش دهنده محتواي rss.aspx مانند /rss نام مدیر و نویسنده اصلی وبلاگ . مانند علیرضا آدرس ایمیل نویسنده وبلاگ . توجه کنید که این با آدرس ایمیل خصوصی نویسنده وبلاگ demo@yahoo.com متفاوت هست. مانند توضیحات وبلاگ که معمولا معرفی کننده نویسنده و یا نوع مطالب وبلاگ است . عنوان وبلاگ . مانند وبلاگ آزمایشی آموزش طراحی وبسایت archive.aspx نام صفحه آرشیو وبلاگ. مانند /archive فاصله زمانی از وقت گرینویچ. یکی از کاربردهاي تنظیم تاریخ و زمان درج نظرات خوانندگان است 12600 و اسکریپتهاي خاص کاربر مانند اسکریپت ابزارهاي آمار بازدیدکننده که HTML کدهاي در بخش تنظیمات وبلاگ وارد شده است بلاك تعیین کننده جایگاه و نحوه بلاکها میتوانند شامل مجموعه از کدهاي عمومی یا اختصاصی همان بلاك باشند .بلاك پایان می یابد.کدهاي که تنها در این شروع و توسط کد نمایش مطالب وبلاگ است.این بلاك توسط کد بلاك قابل استفاده هستند به شرح زیر میباشد. 15 WwW.MihanDownload.CoM Template designing | Part one | HTML Page BLOGFA کد توضیح کدهاي استفاده شده در بلاك عنوان مطلب ارسال شده <-PostTitle-> متن کامل مطلب ارسال شده <-PostContent->
برچسب‌ها: <-TagName->
تاریخ ارسال یا تنظیم مطلب ( شکل و شیوه نمایش تاریخ در تنظیمات وبلاگ قابل تغییر است) <-PostDate-> زمان ارسال یا تنظیم مطلب ( شکل و شیوه نمایش زمان در تنظیمات وبلاگ قابل تغییر است) <-PostTime-> شماره شناسایی و مشخص هر مطلب <-PostId-> نام صفحه (لینک) هر مطلب که شامل اسم صفحه آرشیو ماه یا هفته و شماره شناسایی مطلب میباشد. <-PostLink-> کد یا شماره موضوع مطلب ارسال شده <-PostCategoryId->> عنوان موضوع مطلب ارسال شده <-PostCategory-> کد یا شماره نویسنده مطلب ارسال شده <-PostAuthorId-> عنوان نویسنده مطلب ارسال شده <-PostAuthor-> ایمیل نویسنده مطلب ارسال شده <-PostAuthorEmail-> لینک به صفحه آخرین مطالب نوشته شده توسط نویسنده مطلب <-PostAuthorLink-> بلاك این بلاك مشخص کننده شیوه نمایش تعداد یا متن توضیح نظرات هر مطلب ارسالی است.توجه کنید که استفاده از این بلاك تنها در مجاز و قابل استفاده هست .این میتوانید از اکثر کدهاي عمومی و یا کدهاي قابل استفاده در بلاك بلاك نیز استفاده کنید.همچنین محتواي این بلاك تنها در مواقعی نمایش داده خواهد شد که امکان درج نظر براي مطلب توسط خوانندگان باشد. (post) بلاك این بلاك براي نمایش لینک ادامه مطلب یا متن کامل براي مطالب و پستهایی میباشد که داراي ادامه مطلب هستند. در صورتی که مطالبی داراي ادامه مطالب باشد محتوایت این بلاك نمایش داده خواهد شد. توجه کنید که استفاده از این بلاك تنها در بلاك مجاز و قابل استفاده هست.در این میتوانید از اکثر کدهاي عمومی و یا کدهاي قابل استفاده در بلاك نیز استفاده کنید. بلاك این بلاك مشخص کننده جایگاه آرشیو مطالب ماهانه یا هفتگی است.محتواي درون این بلاك به تعداد ماهها یا هفته هاي مطالب آرشیو شده تکرار میشود. همچنین شما میتواند تعیین کنید که تنها چند ماه یا هفته آخر نمایش داده شود. این کار نیز با تعیین خواصی براي این بلاك انجام شدنی است. براي نمونه اگر شما بلاك را به شکل زیر تعریف کنید . دیگر صفحات< " <-TagName->
لینک کامل مطلب : http://m-khaky.blogfa.com<-PostLink->
آرشیو مطالب :
<-ArchiveTitle->
بیان خواهد شد. CSS در آموزش بعدي، مطالبی پیرامون موفق و پیروز باشید. morteza.khaky@gmail.com morteza-khaky.persiangig.com 22 WwW.MihanDownload.CoM