آموزش طراحی قالب سایت جوملا بدون داشتن علم برنامه نویسی - به زبان ساده و گویا

[elder 14]

با سلام و درود به دوستان عزیز جوملایی

در این تایپیک سعی میشود تا روش طراحی قالب جوملا به شیوه ساده بدون دانش برنامه نویسی و مهارت در زبان های php - css بصورت گام به گام و به روش ساده بیان شود .

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

دموی قالب مورد نظر

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

نرم افزارهای مورد نیاز :

Adobe Photoshop CS5

artisster 3.1 یا artisster4

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

=========================================================================================================================

پینوشت :

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

[elder 14]

درس اول :

با سلام و درود

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

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

در این آموزش از مرورگر فایر فاکس + نرم افزار فتوشاپ + نرم افزار آرتیستر + notepad++ استفاده می کنیم.

ابتدا نرم افزارهای فوق را بروی سیستم خود نصب نمایید .

افزونه https://addons.mozilla.org/en-US/firefox/addon/colorzilla/ را بروی فایر فاکس نصب نمایید و دوباره فایر فاکس را راه انداری نمایید . این افزونه کمک بسیاری برای طراحی قالب سایت به شما می کند . با این افزونه شما می توانید رنگ های به کار گرفته شده در سایتها را کدبرداری کنید .

جهت تایپ و نگارش فارسی در نرم افزار فتوشاپ نیاز به فونت های با فرمت b یا mrt هستیم . مثال فونت B Nazanin یا MRT_slim برای دانلود فونت های زیر از جستجو گوگل استفاده نمایید . وبسایتهای زیادی این فونت ها را برای دانلود قرار داده اند . معمولا Adobe Photoshop CS5 امکان تایپ فارسی را دارد اگر نداشت از نمونه افزارهای کمکی تایپ در فتوشاپ یا برنامه های گرافیکی مانند LeoMoon Persian TTT استفاده کنید .

1. فولدری به نام Alliance ایجاد نمایید .

اکنون نرم افزار فتوشاپ را باز کنید => مانند تصویر زیر یک صفحه جدید ایجاد نمایید .

گزینه file و بعد گزینه new یا دکمه ctrl+N را بزنید .

یک صفحه با ابعاد 470 * 90 با نام logo با رزولویشن 72 ایجاد نمایید .

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

بروي آيکون درج متن مانند تصوير کليک کنيد و تنظيمات زير را مانند تصوير تغيير دهيد

حالا بروی صفحه سفیدی که ایجاد کردیم کلیک میکنیم و کلمه آلیانس رو بصورت فارسی تایپ می کنیم . در صورت عدم تایپ فارسی از نرم افزار LeoMoon Persian یا فارسی نویس مریم استفاده نمایید به این صورت که کلمه یا متن مورد نظر را در نرم افزار مربوط تایپ کرده و کپی کرده و بعد در فتوشاپ زمانیکه با ابزار درج متن کلیک میکنیم روی صفحه paste می کنیم .کد رنگ فونت رو هم 262626 قرار می دهیم و تصویر زیر ایجاد خواهد شد .

ادامه دارد

ویرایش شده در آبان 91 توسط elder

[elder 14]

اکنون نیاز داریم تا ابزار خط کش رو فعال کنیم

مانند تصویر زیر بروی گزینه View کلیک کنید در قسمت زیر منوی باز شده بروی گزینه Rulers کلیک کنید یا اینکه Ctrl +R را بزنید .

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

خوب اکنون لازم است یک خط نشانه یا گاید ایجاد نماییم . مانند تصویر بروی View کلیک نمایید در زیر منوی باز شده بروی گزینه New Guide کلیک کرده و مانند تصویر تنظیمات را اعمال نمایید .

اکنون یک خط نشانه ایجاد کرده ایم .

حالا لایه متن آلیانس رو در پنجره Layers انتخاب می کنیم . پنجره مذکور معمولا در سمت راست تصویر مانند تصویر زیر قرار دارد . توجه( در فتوشاپ برای هر طرح و متن باید لایه مجزا ایجاد کرد تا بتوان تا خروجی نهایی تغییرات را دربخش های مختلف آن انجام دهیم به این شیوه طرح لایه باز گفته می شود که با فرمت PSD ذخیره میشود . پس شما هر زمان خواستید طرح فتوشاپ خود را موقت ذخیره کنید از طریق گزینه save as خروجی psd بگیرید تا بتوانید در تمام جزییات تغییرات دلخواه را انجام دهید )

ویرایش شده در آبان 91 توسط elder

[elder 14]

خوب بعد از انتخاب لایه متن آلیانس دکمه های Ctrl+Tرو همزمان میزنیم . و مانند تصویر تغییرات را اعمال می نماییم .

حالا اگر می خواهید لوگو با پس زمینه رنگی که اینجا سفید است ذخیره شود که از طریق گزینه File بروی گزینه Save as کلیک کرده و با فرمت jpg ذخیره کنید . اما اگر می خواهید بکگراند رو حذف کنید و بصورت ترانسپرنت شفاف ذخیره کنید ابتدا از قسمت پنجره لایه ها بروی لایه background کلیک کرده و یا لایه را کلیک راست کرده و حذف کنید یا بروی چشم داخل باکس لایه فوق کلیک کنید تا لایه خاموش شود و در انتها از گزینه File و گزینه Save sa خروجی با فرمت png بگیرید .

توصیه میشود طراحی خود را بصورت لایه بازهم ذخیره کنید ( فرمت psd)

ویرایش شده در آبان 91 توسط elder

[elder 14]

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

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

خوب یک پروژه جدید ایجاد می کنیم (پیش فرض دارد) . از منوی Home بروی گزینه تنظیمات Options کلیک می کنیم . در پنجره باز شده در قسمت General شما می توانید قالب را راست چین کرده و نسخه موبایل را بله و favicon رو نیز انتخاب نمایید . در قسمت css Options شما می توانید تنظیمات اضافی و یا دستورات جدید css قالب را تغییر یا اضافه نمایید که این تغییرات معمولا در ورژن های قبلی آرتیستر جهت راست چین کردن قالب بیشتر استفاده می گردید . در قسمت Description شما می توانید مشخصات طراح و قالب مربوطه را وارد نمایید . در قسمت Footnote مشخص می کنید تا در فوتر قالب نام طراح و نرم افزار آرتیستر نمایش داده شود یا خیر . که ما اولی را تیک و دومی را تیکش رو بر میداریم تا فقط نام طراح مشاهده شود . تنظیمات را تایید کنید .

مرحله بعد : از منوی بالا گزینه Colors&Font رو انتخاب کنید .

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

حالا در نرم افزار آرتیستر در قسمت Paint رنگ اول سمت چپ را سفید fffffff رنگ وسط را مشکی 000000 و رنگ سمت راست De7d61 قرار می دهیم .

در قسمت fonts گزینه Font sets رو انتخاب نمایید و در زیر منوی باز شد تنظیمات فونت را روی Formal که فونت های arial و Tahoma را شامل میشود قرار دهید .

از منوی بالا گزینه Layout را انتخاب نمایید . در قسمت sheet width عرض صفحه را روی 1000 پیکسل قرار دهید . در قسمت Columns عرض Columns Width را 275 پیکسل قرار دهید .

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

ویرایش شده در آبان 91 توسط elder

[ابوالفضل طالبی 279]

برای آموزشهای خوب و زیبای شما 2000 امتیاز تعلق گرفت

موفق و پیروز باشید

[elder 14]

خوب بریم سراغ ادامه آموزش . از منوی بالا گزینه Header را انتخاب نمایید . در ابزارهای پنجره باز شده در قسمت Layout مقدار ارتفاع هدر Height را 160 پیکسل قرار دهید .حالا در قسمت هدر صفحه قالب بروی متن Enter Site Titel کلیک کرده و دکمه delete را بزنید و حذفش کنید .بروی باکس جستجو هم کلیک کرده و آن را حذف کنید ( بدلیل اینکه می خواهیم مانند قالب نمونه طراحی کنیم آن را حذف می کنیم اما در صورت تمایل میتوانید آن را کشیده و در قسمت مورد علاقه خود در سمت چپ هدر قرار دهید ) . اکنون از تنظیمات هدر در قسمت insert بروی گزینه image کلیک کرده و تصویر لوگویی که در درس اول ساختیم را انتخاب و وارد هدر می کنیم . خوب اکنون در همان تنظیمات هدر در قسمت انتهایی یعنی ویرایش تصویر بروی گزینه position کلیک کرده و گزینه Align Right رو انتخاب می کنیم تا لوگو در سمت راست هدر قرار گیرد . خوب کار هدر قالب تمام شد .

حال می رویم سراغ مقدار دهی به منوی بالای قالب .

از منوی بالا گزینه Menu را انتخاب نمایید . در قسمت Position گزینه دوم بخش Inside Sheet را انتخاب نمایید تا منو کاملا چسبیده به زیر هدر قرار گیرد

در همان بخش Layout مقدار Length را روی Page Width قرار دهید .

در قسمت Menu Area مانند تصویر حاشیه منو (Border) را انتخاب نمایید .برای بدست آوردن کد رنگ خط حاشیه مانند درس قبل از ابزار Color Zilla استفاده می کنیم . کد رنگ Dfdfdf می باشد . بنابراین رنگ حاشیه منو و آیتم منو را dfdfdf قرار می دهیم .

در قسمت Item نوع Shape را classic انتخاب می نماییم ( امکان دارد رنگ Menu Area تغییر کند که در قسمت منو Menu Area رنگ رو روی سفید یا شفاف قرار میدهیم .

درقسمت Item برروی Size کلیک کرده و More Sizes را انتخاب نمایید . در پنجره باز شده مقدار Horizontal Padding را 40 پیکسل و مقدار Vertical Padding را 40 پیکسل قرار دهید.

در همان قسمت Item مقدار Align را مرکز منو قرار می دهیم . ( البته می توانید سمت راست را نیز انتخاب نمایید ) .

مقدار Separator را مانند تصویر و رنگ آن را dfdfdf قرار می دهیم .

مقدار font

Font Family = Tahoma

Size=16 pix

Style=Bold

در قسمت اکتیو منو Active رنگ منو را De7d61 قرار می دهیم .رنگ فونت منو را هم سفید fffffff قرار می دهیم .

در قسمت Passive رنگ منو را شفاف یا سفید قرار می دهیم . رنگ فونت را هم مشکی 000 قرار می دهیم .

در قسمت Hovered رنگ منو همان رنگ منوی اکتیو و رنگ متن هم سفید قرار میدهیم .

حال اگر از قسمت فایل > preview In browser > اینترنت ایکسپلورر یا فایرفاکس ، یک نمایش خروجی بگیریم و با دمو مقایسه کنیم می بینیم تقریبا قالب داره یک شکل میشود با دموی نمونه.

تنظیمات زیر منو :

مانند مسیر و دستور زیر اجرا کنید

Levels>one column> Multilevel

تنظیمات Sub Menu Area

Top Margin=1 pix

Padding=20 pix

color= DB7357

Border= No Border

تنظیمات Subitem

مقدار Horizontal Padding را 10 پیکسل و مقدار Vertical Padding را 6 پیکسل

Border = 0 pix

Size Text= 16 pix

در قسمت Hovered فقط کافیست رنگ متن را مشکی 000 قرار دهید .

ویرایش شده در آذر 91 توسط elder

[elder 14]

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

حالا طبق دستورات زیر اقدام نمایید .

Shape=>Margin=> 10 pix

Shape=>Text Padding=> 10 pix

Content Styling=>Margin=>10 pix

Content Stylist=> Padding=> 20 pix

Content Stylist=> Spacing => 15 pix

radius=> 0

Border=1pix

خوب تنظیمات headings را به این صورت انجام دهید . اولا چون ما میخواهیم فارسی نگارش کنیم پس فرمت فونت family Font را Tahoma قرار میدهیم . البته این مقدار سلیقه ایی می باشد و میتوانید طبق سلیقه انتخاب نمایید برای رنگ هم شما 6 گزینه هدینگ دارید و در پالت رنگ ها در ردیف اول هم 6 رنگ از مشکی تا طوسی روشن دارید به ترتیب انتخاب کنید . یعنی هدینگ اول مشکی و هدینگ آخر ششمین رنگ بالای پالت رنگ ها .

در قسمت Text رنگ فونت را 4f4a43 قرار می دهیم . font family را Tahoma و سایز فونت را 13 قرار می دهیم .

Hayper Link=

Active Link

Color=De7d61

Font Family=impact

Size=20

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

Visit Link

Color=9C9C9C

Font Family=Impact

Size=20

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

Hovered Link

Color=000

Font Family=Impact

Size=20

دقت داشته باشید این نوع فونت و سایز در نگارش فارسی بزرگ خواهد شد و زیبا نیست اما بدلیل مشابه سازی مانند قالب نمونه بیان شد لذا در صورت علاقه برای استفاده از این قالب می توانید تنظیمات خود را اعمال نمایید .

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

Table

در تنظیمات جدول ما ضخامت حاشیه (Border) را 0 قرار میدهیم . اما شما قادر خواهید بود در مطالبی که در سایت ایجاد می نمایید نمایش حاشیه و ضخامت آن را مشخص نمایید . اما توجه کنید اگر ضخامت را در قالب مشخص کنید اگر در مطالب خود جدول داشته باشید و نخواهید حاشیه نمایش داده شود نمی توانید ! و خطوط جداول نشان داده خواهد شد .

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

ویرایش شده در آذر 91 توسط elder

[elder 14]

تنظیمات نقل قول:

Quote

Margin=25

Padding=15

Color=e5e5e5

font family=Tahoma

size=13

Style=Regular

ادامه دارد....

[nasa1797 10]

چرا عکساشو برداشتیننننننننننننن؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟:hooom::hooom:

[mehdi_danesh 10]

ممنونم نمیدونستم

ویرایش شده در شهریور 92 توسط mehdi_danesh

[mortaza_max 13]

آقا مهدی تو پستها که تبلیغ نمیکنن. تو امضات بکن. بدو بیا ویرایشش کن تا اخراج نشدیییی

[mrsh 10]

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

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

استان فارس-داراب

[afgm 10]

عکس ها که پریده ! ولی آموزش فوق العاده بود !

واقعاً عجب حوصله ای داشتی این آموزش رو تهیه کردی و قرار دادی !

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

دمت گرم !

[fallahi 10]

به نظر من یه سر به این آموزش بزن

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

در صورت تکرار تبلیغات برخورد خواهد شد

ویرایش شده در بهمن 92 توسط amirparvaneh

[pcbrain 10]

با سلام

من امو زش جوملا را دارم

هرکسی نیاز داره بگه براش بزارم/

خیلی راحته

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

باسلام

من به تازيگي يک سايت در زمينه خريد بازي

وخريد بازي کامپيوتر زدم.من تمامي بازي هاي کامپيوتري اورجينال

را تهيه کردم وبه صورت

خريد اينترنتي بازي وخريد پستي بازي دارم ارائه ميکنم.

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

راستي کسايي که ذکر کنند از بچه هاي انجمن هستند 20 درصد تخفيف دارند

ویرایش شده در اسفند 92 توسط reza.sh

[blazhel 16]

دوستان عزیز لطفا از قرار دادن لینک سایت ها وتبلیغات جدا خوداری کنید در صورت تکرار برخورد خواهد شد

[mffh 10]

شارژ ایرانسل ,همراه اول , تالیا, رایتل در شارژ گوگل-----------------

ویرایش شده در خرداد 93 توسط majid.fathi
تبلیغات

[msk1366 10]

واقعا آموزش کاربردی و خوبی بود.

استفاده کردم ، فقط اگه میشه اون عکس هایی که پاک شدن رو دوباره بذار

بازم ممنونم

[xboby 26]

سلام،

چطور .

افزونه Not Found را روی فایر فاکس نصب کنم؟

متشکرم

[Masood Ashoori 232]

سلام،

چطور .

افزونه Not Found را روی فایر فاکس نصب کنم؟

متشکرم

: You have been blocked

[joomlaking13 10]

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

[joomlaking13 10]

یا الله ... صاب خونه ...

کسی نیس جواب بده.بعداز چند روز کسی جواب منو نداد.بدترین حالت برای یک پرسشگر نبودن یک مسئول پاسخگوست،مخصوصأ اگر اولین پرسش باشه.[ghahghah]

[CO-2014 23]

درود

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

در مورد آموزش مربوطه :

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

موفق باشید.

[alirezazare 54]

یا الله ... صاب خونه ...

کسی نیس جواب بده.بعداز چند روز کسی جواب منو نداد.بدترین حالت برای یک پرسشگر نبودن یک مسئول پاسخگوست،مخصوصأ اگر اولین پرسش باشه.[ghahghah]

سلام دوست عزیز

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

انشالله این اموزش بتونه کمکتون کنه

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