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

از دانشنامه جوملا فارسی - مامبو فارسی
پرش به: ناوبری، جستجو
Under Construction.png


توجه : این مقاله در حال تکمیل است، لطفاً بعداً برای مطالعه کل آموزش مراجعه نمایید. از ویرایش جزئی در این آموزش خودداری کنید.

مقدمه

بمنظور طراحی قالب مامبو/جوملا شما باید با موارد زیر آشنایی نسبی داشته باشید.


  1. آشنایی با سیستم عامل ویندوز
  2. آشنایی با اصول ابتدایی طراحی قالب
  3. آشنایی با نرم‌افزارهای گرافیکی و طراحی همچون فوتوشاپ
  4. آشنایی با نرم‌افزار Microsoft Expression Web 2 و یا Adobe Dreamweaver CS4
  5. آشنایی با تگ‌های HTML و همچنین CSS
  6. بررسی قالبهای سایت‌های مختلف (از نظر نوع چیدمان و نوع کدنویسی قالب و ... .)
  7. آشنایی با خواص قالب مامبو/جوملا

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


این قالب شامل یک سه سطر خواهد بود که سرصفحه و یا هدر (Header)، میانه صفحه(Main) و انتهای صفحه و یا فوتر (Footer) آنرا تشکیل خواهند داد. همچنین سطر میانه صفحه، دارای سه ستون می‌باشد که دو ستون کناره آن مربوط به ماژول‌ها و ستون میانه آن‌ها مربوط به عمده محتوا و یا بادی (Body) خواهد بود.

طرح کلی سایت به شکل زیر خواهد بود :

01.Template Design Learn.png

در این تصویر رنگ آبی معرف سرصفحه، رنگ زرد معرف انتهای صفحه، رنگ سفید معرف ستون عمده محتوا و رنگ‌های سبز و قرمز نیز معرف ستون ماژول‌ها می‌باشد.

دقت کنید که این تنها یک طرح جهت توضیح می‌باشد و شما می‌توانید هر سطر و ستون بندی خاصی را مد نظر خود داشته باشید و در اینباره هیچ محدودیتی نخواهید داشت.

حال طرحی همچون طرح زیر را در فوتشاپ ایجاد می‌کنیم:

02.Template Design Learn.png

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

پانوشت : این طرح مدت‌ها طرح وبسایت مرحوم شیخ، علی صفایی حائری (عین صاد) بوده است که می‌توانید برای وبسایت خود نیز استفاده نمایید.

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

هنگام این عمل باید به موارد مهمی توجه کنیم:

  1. باید بدرستی و با دقت تصاویر تشکیل دهنده قالب را جدا و تکه تکه کنیم.
  2. تصاویری که امکان تکرار و استفاده چندین‌باره دارند را دسته بندی کنیم.
  3. تصاویری که می‌توان با استفاده از یک پیکسل و تکرار در صفحه استفاده کرد را با کمترین حجم و کیفیت بالا استخراج کنیم.
  4. قسمت‌هایی که می‌توان با استفاده از کد رنگ بوجود آورد را مشخص کنید.
  5. برای قالب خود برنامه داشته باشید.
  6. از همین حالا به فکر نامگذاری صحیح برای کلاس‌ها و آیدی‌های تگ‌های HTML خود باشید.

برای درک بهتر و عمومی بودن آموزش سعی می‌کنیم در نرم‌افزار Microsoft Expression Web 2 قالب را به HTML تبدیل کنیم. چرا که اکثریت با این نرم‌افزار آشنایی بیشتری دارند! اما پیشنهاد می‌کنم پس از آشنایی با اصول طراحی وب و یادگیری کامل تبدیل طرح به HTML از نرم‌افزار Adobe Dreamweaver CS4 برای اینکار بهره ببرید.


در ابتدا لازم است تا شما یک پوشه مخصوص وب ایجاد کنید. در Microsoft Expression Web 2 شما با استفاده از مراحل ذیل می‌توانید یک پوشه وب ایجاد کنید.

1) یک پوشه با نام www در یک درایو خود ایجاد کنید.

2) نرم‌افزار Microsoft Expression Web 2 را اجرا کنید.

3) از منوی File گزینه New یافته و سپس برروی Web Site کلیک کنید. همچون تصویر زیر:

03.Template Design Learn.png

4) به تصویر زیر نگاه کنید، در این تصویر گزینه Empty Web Site با رنگ آبی انتخاب شده است، با استفاده از Browse پوشه www که ایجاد نمودید را معرفی کنید و بر روی OK کلیک کنید.

04.Template Design Learn.png

5) حال زمان آنست که یک صفحه HTML ایجاد کنید.

به این منظور شما باید همچون تصویر ذیل بر روی گزینه Page کلیک کنید.

05.Template Design Learn.png

یک فایل HTML خام با کد زیر ایجاد می‌شود:


<source lang="php">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head> <meta content="text/html; charset=windows-1256" http-equiv="Content-Type" /> <title>Untitled 1</title> </head>

<body>

</body>

</html>

</source>


کد زیر را با کد بالا جایگزین کنید:


<source lang="php">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta content="fa" http-equiv="Content-Language" /> <title>Untitled 1</title> </head>

<body>

</body>

</html>

</source>


در کد دوم، تغییرات مهمی انجام شده است که برای سایت‌هایی که برای زبان فارسی هستند، بسیار مهم می‌باشند.


--پسرمهربون ‏۲۲ سپتامبر ۲۰۰۹، ساعت ۱۳:۵۷ (UTC)

8.pngاستفاده از مطالب دانشنامه جوملا فارسی - مامبو فارسی با ذکر منبع ( دانشنامه جوملا فارسی ) و لینک مستقیم به http://docs.joomlafarsi.com بلامانع است.