parsgreen.com
article

چگونه برای سایت یا وبلاگ خود قالب طراحی کنیم؟

web-design

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

آشنایی با تگ های اختصاصی قالب


قبل از اینکه بخواهید قالبتان را خودتان طراحی و ایجاد کنید باید به تگ های اختصاصی و خروجی کدهای خود اشراف داشته باشید، چرا که معمولا سیستم های مدیریت محتوا یا وبلاگ ها، برای نمایش امکانات و بخش های مختلف، از کلمات مشخصی به صورت تگ در قالب ها استفاده می کنند، به طور مثال اگر برای سیستم وبلاگی خاصی قالب طراحی می کنید باید بدانید که تگ های اختصاصی آن چیست، به فرض ممکن است تگی با نام <-PostContent-> در آن سیستم سازنده بلاک های مطالب باشد و برای نظرات عناصری دیگر مانند <BlogComment> استفاده شود و... خوشبختانه اکثر سیستم های ایجاد و مدیریت وبلاگ راهنمای خوبی در این مورد در اختیار طراحان قرار می دهند که با مراجعه به آدرس آنها یا در بخش ویرایش قالب در دسترس است.

تسلط بر html و css


گام بعدی در طراحی قالب، تسلط نسبی بر html و css است؛ html به عنوان زبان پایه وب و css برای استایل نویسی و شکل دهی ظاهر صفحات از اهمیت زیادی در طراحی قالب برخوردارند؛ شاید گمان کنید یادگیری آنها زمان زیادی می برد که البته تا حدود زیادی حق با شماست، دانش وب جزئیات زیادی دارد، ولی اگر اندک اندک ولی پیوسته پیش بروید و مباحث را از ابتدا و کدهای کوچک تر بیاموزید، خواهید دید که رفته رفته مهارتتان بیشتر می شود، بهتر است ابتدا از پروژه های کوچک و آزمایشی شروع کنید؛ اما چرا باید html و css را یاد بگیرید؟ پاسخ روشن است، مترجم ایده های ما در طراحی وب این دو زبان برنامه نویسی هستند (هرچند css یک زبان کمکی محسوب می شود)، یعنی به فرض وقتی قالبی را در فتوشاپ اسکلت بندی می کنید، نهایتا باید آن را در بلاک ها و لایه های html تعریف و به قطعات کوچکتر تقسیم کنید و با استایل های css شکل دهید؛ چرا که مرورگرها تنها از قواعد خاصی در چارچوب استاندارد وب پیروی می کنند.

استفاده از نرم افزارها


برای طراحی قالب، نرم افزارهای زیادی ارائه شده است که در زمینه قالب های آماده برنامه Artisteer و در زمینه کدنویسی پیشرفته برنامه Adobe Dreamweaver از جمله بهترین و معروف ترین ها هستند.

رعایت استاندارد کدنویسی


کدهای خود را همواره استاندارد سازی کنید، با استفاده از ابزار های سنجش اعتبار در نرم افزارهایی مانند دریم ویور (Dreamweaver) یا سایت هایی مثل validator.w3.org از استاندارد بودن کدهای خود اطمینان حاصل نمائید و در حد امکان از اصول آنها پیروی کنید.

یادگیری فتوشاپ و تکنیک های طراحی


پس از تسلط نسبی در امر کدنویسی، بهتر است کمی تکنیک های طراحی را هم بیاموزید، البته نیازی نیست یک فتوشاپ کار حرفه ای باشید، همین که بتوانید نیازهایتان را مرتفع کنید کافی است، استفاده از سورس ها و فایل های آماده وب نیز ایده های خوبی در اختیارمان می گذارد، هر چند تقلید صرف را توصیه نمی کنیم.
همیشه از گام های کوچکتر شروع کنید تا آهسته و پیوسته به یک طراح وب حرفه ای تبدیل شوید!
sectionدسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
» طراحی باکس جستجو با فتوشاپ و CSS
» طراحی هدر قالب سایت و وبلاگ با فتوشاپ و css
» زیبا سازی فرم های وب با css
» نحوه ساخت باکس گوشه گرد در فتوشاپ و css
» چگونه قالب های دو طرفه برای سایت یا وبلاگ خود طراحی کنیم؟
commentنظرات (۱۳۱ یادداشت برای این مطلب ارسال شده است)
نویسنده: گلناز
زمان: ۰۹:۳۸:۴۰ - تاریخ: ۱۳۹۱/۰۶/۱۴
ای بابا خیلی گیج کننده بود واسه منکه مبتدی هستم
پاسخ: 
واقعیت این است که طراحی قالب وب، ماهیتا کمی پیچیده است، چون جزئیات زیادی دارد و باید کم کم شروع کنید، به هر صورت اگر در بخش خاصی مشکل دارید، می تواند مطرح کنید تا بیشتر راهنمایی کنیم.
نویسنده: آنارام
زمان: ۰۸:۵۰:۲۲ - تاریخ: ۱۳۹۱/۰۷/۰۵
سلام و صد درود به وبگو
ممنونم از آموزش های خوب شما
من امروز به اتفاقی سایت شما را پیدا کردم و خوشحال میشم شما رو اد کنم
مشکلی که من در وبلاگم دارم و خوشحال میشم منو راهنمایی کنید اینکه کسی نمیتونه تو وبلاگم عضو بشه نمیدونم چطور این مشکل رو حل کنم
البته من هنوز مطالب آموزشی شما رو کامل نخوندم
براتون آرزوی موفقیت و شادکامی دارم
پاسخ: 
سلام
ممنون از نظر لطف شما.
در مورد مشکلی که مطرح کردید لطفا کمی بیشتر توضیح دهید، سرویس دهنده شما خدمات عضویت را ارائه می دهد یا از ابزاهای وبلاگ نویسی جهت عضوگیری استفاده می کنید؟
نویسنده: هژیر
زمان: ۱۷:۰۷:۵۴ - تاریخ: ۱۳۹۱/۰۷/۲۴
سلام
واقعا از مطالبتون استفاده کردم
موفق باشید
نویسنده: سارا
زمان: ۱۶:۲۴:۲۱ - تاریخ: ۱۳۹۱/۰۸/۱۴
سلام میشه کمی بیشتر در مورد طراحی وبلاگ توضیح بدی من که تازه با وبلاگ اشنا شدم چیز از این نفهمیدم
پاسخ: 
سلام
باید کمی بیشتر در دنیای وب تجربه کسب کنید تا بتوانید قالب وبلاگ طراحی کنید، طراحی وب یک کار تقریبا تخصصی است و نیاز به تجربه اولیه در زمینه مدیریت وبلاگ، آشنایی با html و css و... دارد.
نویسنده: niloufar
زمان: ۱۸:۰۵:۰۵ - تاریخ: ۱۳۹۱/۰۸/۲۴
سلامممممممممم
من هنوز مطلب رو نخوندم
اما اگه ميشه بگيد كجا بايد آموزش اين كارا رو ببينم
ممنون ميشم
من معماري خوندم طراحيم عاليه فقط كمك مي خوام
ممنون فعلا
پاسخ: 
سلام
برای آموزش طراحی قالب، منابع زیادی در وب و همچنین به صورت کتاب وجود دارد، کافی است کمی جستجو کنید.
نویسنده: رضوانه
زمان: ۱۵:۴۵:۰۶ - تاریخ: ۱۳۹۱/۰۸/۲۶
ای بابا شما که توی همه اموزش هاتون گفتین که باید برنامه نویسی رو به صورت حرفه ای بلد باشی. برای من که یه مقدار با فتوشاپ و برنامه نویسی اشنایی دارم یه اموزشی بدین تا استفاده کنم.
ممنون.
پاسخ: 
برنامه نویسی و به خصوص برنامه نویسی وب یک تخصص مبتنی بر مهارتهای پایه است، یعنی نمی توانید بدون گذراندن مراحل و آموزش های مقدماتی و کسب تجربه، کارهای حرفه ای انجام دهید و به طور مثال قالب طراحی کنید، لذا بسته به سطح آشنایی و مهارت، می توانید ابتدا از آموزش های مقدماتی شروع کنید، سپس به موارد کاربردی بپردازید.
نویسنده: mehrdad
زمان: ۱۵:۵۰:۰۳ - تاریخ: ۱۳۹۱/۰۹/۲۸
با سلام. مطالب رو خوندم توضیحی آنچنانی درباره طراحی قالب نداده بودید با این وجود ازتون ممنون راستی یه سوال برام پیش اومده اونم در قسمت هدر هستش مشکلی با تصویرش ندارم مشکل من بیشتر با اسمیه که براش گذاشتم به صورت معمولی نوشته شده و من می خوام اون رو تغییر بدم (مثلا یه حالتی مثل سه بعدی) لطفا راهنمایم کنید
پاسخ: 
سلام
البته این مطلب تنها با هدف ارائه کلیات و اینکه از کجا شروع کنید نوشته شده، طراحی قالب یک هنر و تخصص است و نمی توان آن را در قالب یک مطلب خلاصه کرد، باید وقت بگذارید، تمرین داشته باشید و تجربه کسب کنید. در مورد مشکلی که مطرح کرده اید، اعمال تغییرات ظاهری در قالب وبلاگ با CSS امکان پذیر است، یعنی تگ html مربوط به تیتر را باید پیدا کنید و با نمونه کد زیر به آن استایل بدهید:
http://cssdeck.com/labs/3d-css-text-that-you-must-see
نویسنده: ساحل
زمان: ۱۱:۲۵:۰۰ - تاریخ: ۱۳۹۱/۱۰/۱۷
سلام من ساحلم 12سالمه
ما يه مسابقه وبلاگ نويسي تو مدرسمون داريم من هم چون هميشه آنلاينم گفتم شركت كنم
خلاصه حالا كه وبلاگم رو ساختم نميدونم چطوري تزيينش كنم و عكساي متحرك بذارم
فايل رو پر كردم اما درباره ي من اصلا روي صفحه نمياد
تو رو خدا هرچي در مورد تزيين و اينا ميدوني بهم بگو
ممنون ميشم
پاسخ: 
سلام
امیدواریم که در تمام مسابقات زندگی نفر اول شوید. :-)
اما اینکه قسمت درباره من نشان داده نمی شود به احتمال زیاد ایراد از قالب فعلی وبلاگ است، برای اطمینان از قسمت انتخاب قالب، یک مورد دیگر را انتخاب کنید، درباره تزئین، سایت های زیادی در وب وجود دارد که تصاویر متحرک را در اختیار وبلاگ نویسان قرار می دهند (چه به صورت کد جاوا اسکریپت که باید آن را در قسمت کدهای اختصاصی کاربر یا در بین کدهای html قالب وبلاگ قرار دهید و چه به صورت تصویر معمولی که می توانید آن را کپی کرده و در قسمت مطالب وبلاگ قرار دهید)، کافی است عبارت "تصاویر متحرک برای وبلاگ" را در موتورهای جستجو (مانند گوگل) جستجو کنید.
اگر مشکل دیگری بود لطفا آدرس وبلاگ را درج کنید تا بهتر راهنمایی کنیم.
نویسنده: ساحل
زمان: ۱۵:۰۸:۰۱ - تاریخ: ۱۳۹۱/۱۰/۱۷
ممنون
ولي يه سوال ميتونم خودم از عكسايي که روي كامپيوتر دارم روي صفحه وبلاگم كپي كنم؟؟؟؟؟؟؟؟؟
پاسخ: 
به طور مستقیم خیر، چون تصاویر در وب از روی سرورها نشان داده می شوند نه از روی کامپیوتر های شخصی، لذا باید آنها را در یک سرویس دهنده آپلود فایل، آپلود کنید، برای اطلاعات بیشتر این آموزش را مطالعه نمائید:
آموزش نحوه درج تصویر در وبلاگ
نویسنده: ساحل
زمان: ۱۷:۴۵:۲۸ - تاریخ: ۱۳۹۱/۱۰/۱۸
وااااااااااااااااااااااااااااااي
ازتون ممنونم خيلييييييييييييي بهم كمك كردين
ممنون
نویسنده: ساحل
زمان: ۱۹:۱۸:۱۷ - تاریخ: ۱۳۹۱/۱۰/۱۸
خب حالا من ي مشكل دارم!!!!!!!!!!!
ميخوام در مورد البرت انيشتين و پروين اعتصامي بنويسم،
مطلب رو كه ميذارم مياد قبل از ولكام ، و ولكام مياد بعد از اون
بايد چيكار كنم
پاسخ: 
برای اینکه یک مطلب همیشه در ابتدای سایر مطالب قرار گیرد سرویس دهنده وبلاگ باید امکان "پست ثابت" داشته باشد، اگر در پنل وبلاگ چنین قابلیتی وجود دارد، از آن استفاده کنید.
نویسنده: ساحل
زمان: ۱۶:۱۶:۳۶ - تاریخ: ۱۳۹۱/۱۰/۱۹
ممنون
يكم واضح تر بگيد سرويس دهنده وبلاگ و پنل چيه؟؟؟؟؟
پاسخ: 
سرویس دهنده همان سایتی است که وبلاگ را در آن ایجاد می کنید، مانند بلاگفا، پرشین بلاگ، میهن بلاگ و... و پنل همان جایی است که وبلاگ را مدیریت می کنید به طور مثال مطلب جدید درج می کنید، نظرات را مدیریت می کنید و...
نویسنده: roya
زمان: ۱۰:۵۷:۵۱ - تاریخ: ۱۳۹۱/۱۰/۲۷
سلام . من خیلی علاقه به برنامه نویسی دارم و حتی دوست دارم که یه قالب هم درست کنم اما چیزی از برنامه نویسی سر در نیارم لطفا راهنماییم کنید که باید برای مطالب ابتدایی چه چیزهایی را آموزش ببینم. ممنون
پاسخ: 
سلام
در مطلب فوق کارهایی که باید انجام دهید توضیح داده شده است، اما جهت یادآوری و جمع بندی:
- تسلط بر html و سپس css.
- آشنایی با جاوا اسکریپت.
- تسلط نسبی بر فتوشاپ.
- آشنایی با تگ های اختصاصی سرویس دهنده وبلاگ برای طراحی قالب.
این چند مورد برای طراحی قالب وبلاگ کفایت می کنند.
نویسنده: roya
زمان: ۱۱:۴۳:۲۷ - تاریخ: ۱۳۹۱/۱۰/۲۸
مرسی از محبتت.
نویسنده: masumeh
زمان: ۱۹:۵۵:۴۷ - تاریخ: ۱۳۹۱/۱۲/۰۲
سلام من میخوام یه سایتی طراحی کنم البته برای پروژه ام. نمیدونم از کجا شروع کنم. منظورم اینه که یه سایتی باشه که از اول اولش بتونه بهم کمک کنه. سایتتون خیلی خوبه ولی نمونه پروژه نداره
پاسخ: 
سلام
در این مورد ابتدا باید با اصول و برنامه نویسی وب حداقل در حد مقدماتی آشنا باشید، از طرفی طراحی سایت یک مفهوم گسترده است و از کدنویسی صفحات استاتیک html تا طراحی سیستم های داینامیک پیشرفته مدیریت محتوا را در برمی گیرد.
paged صفحه 1 از 9




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

3 × 8
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...