آموزش برنامه نویسی وب و مهارتهای مرتبط
یکشنبه ۱۵ مهر ۱۴۰۳
Sunday, October 6, 2024 GMT +3:30
Sunday, October 6, 2024 GMT +3:30
دسته بندی
دسترسی سریع
آنچه برای شروع طراحی قالب یک وبلاگ باید بدانیم
قالب وبلاگ چیست؟
آیا هر سرویس وبلاگی، اصول طراحی قالب مخصوص به خود دارد؟
تگ های اختصاصی قالب ها را کجا پیدا کنیم؟
آیا یادگیری HTML و CSS برای طراحی قالب ضروری است؟
از چه برنامه ای برای کدنویسی و طراحی قالب وب استفاده کنیم؟
برای یک طراح وب شدن چقدر زمان مورد نیاز است؟
از چه منبعی برای یادگیری دانش طراحی وب استفاده کنیم؟
قالب وبلاگ چیست؟
آیا هر سرویس وبلاگی، اصول طراحی قالب مخصوص به خود دارد؟
تگ های اختصاصی قالب ها را کجا پیدا کنیم؟
آیا یادگیری HTML و CSS برای طراحی قالب ضروری است؟
از چه برنامه ای برای کدنویسی و طراحی قالب وب استفاده کنیم؟
برای یک طراح وب شدن چقدر زمان مورد نیاز است؟
از چه منبعی برای یادگیری دانش طراحی وب استفاده کنیم؟
آنچه برای شروع طراحی قالب یک وبلاگ باید بدانیم
تجربه نشان داده اغلب وبلاگ نویسان حرفه ای پس از سپری شدن مدت زمانی از فعالیتشان در این حوزه، به فکر ایجاد تغییرات سفارشی در قالب وبلاگشان یا حتی طراحی قالب اختصاصی می افتند، در این بین برخی ترجیح می دهند کار طراحی را به دیگران واگذار و برخی نیز دست به کار شده و مشقت راه یادگیری را به جان می خرند تا پس از فراگیری آموزش های مربوط به CSS ، HTML و... خودشان قالب طراحی کنند، در هر صورت چه یک وبلاگ نویس علاقمند باشیم و چه یک فرد حرفه ای، در آموزش پیش رو هدف این است تا نکات کلیدی که برای شروع طراحی قالب یک وبلاگ مورد نیاز است را به صورت خلاصه و تیتروار شرح دهیم، به این امید که مطالعه این مطلب برای طیف های مختلف وبلاگ نویسان و همچنین طراحان وب مفید واقع شود.
قالب وبلاگ چیست؟
بد نیست قبل از پرداختن به نکات فنی کار طراحی، تعریف ساده ای از قالب وبلاگ داشته باشیم، در این رابطه می توان گفت قالب یک وبلاگ در واقع پوسته ای است که برای نمایش محتوا و امکانات آن وبلاگ استفاده می شود، همان طور که در دنیای واقعی لوازم یک مغازه نیاز به قرارگیری در قفسه ها و ویترینی خاص دارند، در دنیای صفر و یک نیز در حوزه وبلاگ نویسی، مطالب و امکانات باید در ویترین خاصی جای گیرند که این ویترین با کمک ابزارهایی مانند کدهای HTML، استایل CSS و عناصر گرافیکی (مانند تصاویر و...) ساخته می شود که در مجموع به آن قالب می گوییم.
آیا هر سرویس وبلاگی، اصول طراحی قالب مخصوص به خود دارد؟
در پاسخ به این سوال می توان گفت که قسمت عمده کار طراحی قالب بین سرویس های وبلاگی مختلف مشترک است که همان بخش کدنویسی HTML و استایل CSS در کنار استفاده از گرافیک وب است، اما آنچه که باعث به اصطلاح سازگار و متمایز شدن قالب ها از هم (به فرض قالب میهن بلاگ، بلاگ اسکای، پرشین بلاگ و...) می شود در واقع استفاده از تگ های اختصاصی این سرویس ها در کنار کدنویسی HTML کار است، منظور از تگ اختصاصی عبارات کلیدی و منحصربفردی هستند (معمولا محصور شده با علامت <>، [] و...) که هر سرویس وبلاگی برای ترجمه امکانات خاص خود به خروجی HTML از آنها استفاده می کند، این کدها عموما سلیقه ای هستند و از این رو بین سرویس های مختلف رویه یکسانی وجود ندارد، مثال ساده زیر تگ اختصاصی مربوط به نمایش عنوان نویسنده مطلب را بین چند سرویس وبلاگی مختلف نمایش می دهد:
نویسنده مطلب در پرشین بلاگ:
<-PostAuthor-><BlogSky:Post AuthorName />[cb:post_author_name]تگ های اختصاصی قالب ها را کجا پیدا کنیم؟
در پاسخ باید گفت که اغلب سرویس های وبلاگی، در بخش ویرایش کد قالب یا راهنمای ویرایش قالب، به لیست تگ های اختصاصی سرویس خود اشاره کرده اند، کافی است کمی در محیط آن سرویس یا در وب جستجو کنید، همچنین می توانید از نمونه سورس کد قالب های پیش فرض آن سرویس استفاده و با کارکرد هر تگ اختصاصی و نحوه استفاده از آنها بیشتر آشنا شوید.
آیا یادگیری HTML و CSS برای طراحی قالب ضروری است؟
شاید اغلب کسانی که مشتاق وبلاگ و وبلاگ نویسی هستند از شنیدن عبارت کدهای HTML و CSS، پیچیدگی و سختی کار را برداشت و گاها از طی ادامه مسیر منصرف شوند، هرچند این موضوع تا حدودی نیز درست است اما آنطور نیست که نتوانیم از عهده اش بربیاییم! باید توجه کنیم که طراحی قالب وبلاگ بدون آشنایی با کدهای HTML و استایل CSS عملا متصور نیست (حتی اگر از برنامه های آماده استفاده کنیم)، یادگیری این مهارت ها نیز آنطور که از دور سخت به نظر می رسد، پیچیده و مبهم نیست، آموزش های زیادی در وب و حتی به صورت کتاب وجود دارند که به راحتی شما را با دنیای تگ ها و استایل نویسی آشنا می کنند، طوری که پس از مدتی، کدنویسی وب جزء سرگرمی هایتان خواهد شد!
از چه برنامه ای برای کدنویسی و طراحی قالب وب استفاده کنیم؟
اصولا نوشتن کدهای HTML و CSS با هر ابزاری که قابلیت تایپ در آن باشد (مانند Notepad ساده) امکانپذیر است، اما در دنیای حرفه ای بهتر است از یک نرم افزار تخصصی کمک بگیرید تا هم سرعت کار افزایش، دقت کدنویسی مضاعف و هم لذت کارتان را حس کنید، در این خصوص می توان از بین نرم افزارهای تجاری (که به لطف هکرهای مثبت! به صورت رایگان در اختیار ما قرار می گیرند)، Adobe Dreamweaver را نام برد و از بین نرم افزارهای متن باز می توان به Eclipses و NetBeans IDE اشاره کرد، در کنار این برنامه ها بهتر است جایی نیز برای برنامه به ظاهر ساده اما واقعا کارآمد ++Notepad قائل شویم که در شرایط های مختلف می تواند دستیار خوبی برایمان باشد!
برای یک طراح وب شدن چقدر زمان مورد نیاز است؟
این سوالی است که اغلب علاقمندان به فراگیری این مهارت مطرح می کنند، واقعیت این است که هیچ پاسخ روشنی برای آن وجود ندارد! اگر استعداد، علاقه و پشتکار لازم را داشته باشید خیلی زود این مسیر را طی خواهید کرد اما اگر سطحی به موضوع نگاه کنید و وقت کافی صرف نکنید، مطمئنا فرآیند تبدیل شدن به یک فرد حرفه ای به همان نسبت طولانی تر خواهد شد، اگر بخواهیم با عدد و ارقام صحبت کنیم شاید برای فردی که هیچ زمینه قبلی در این رابطه نداشته، مدت 2 سال تا سطح قابل قبول، زمان مناسبی باشد!
از چه منبعی برای یادگیری دانش طراحی وب استفاده کنیم؟
پاسخ این سوال کمی به سلیقه شما بستگی دارد، برخی با یادگیری از طریق کتاب میانه خوبی دارند، برخی به صورت ویدئو و عده ای نیز وب را ترجیح می دهند، به هر حال امروزه در زمینه یادگیری CSS، HTML و در کل طراحی وب، سایت های زیادی (چه به زبان فارسی و چه انگلیسی) مشغول فعالیت هستند که در بهترین حالت می توانید ترکیبی از چند سایت را هم زمان داشته باشید، همچنین کتاب های تالیفی یا ترجمه شده خوبی در این زمینه وجود دارد که برای اطلاعات بیشتر کافی است سری به کتاب فروشی ها بزنید!
در پایان این مطلب باید یادآور شویم که فراگیری طراحی یا برنامه نویسی وب باید به صورت تدریجی و پلکانی صورت گیرد، بدین معنی که هیچ گاه بدون مطالعه و تمرین کافی در مباحث مقدماتی، به مباحث پیشرفته تر رجوع نکنید، در غیر این صورت ممکن است موجبات دلسردی شما فراهم شده و از ادامه مسیر منصرف گردید، اگر با حوصله پیش بروید بعد از مدتی آنقدر مسلط خواهید شد که هر نوع طرحی را به راحتی کدنویسی کنید!
دسته بندی: مهارتهای وب » وبلاگ نویسی
« بعدی
مطالب بیشتر:نحوه قرار دادن فاوآیکن (Favicon) در نوار آدرس سایت و وبلاگ
محافظت از مطالب وبلاگ در مقابل کپی غیر مجاز!
اشتباهات رایج در وبلاگ نویسی غیر حرفه ای!
نحوه قرار دادن کلیپ فلش در سایت و وبلاگ
پاسخ به سوالات و حل مشکلات وبلاگ نویسان
دیدگاه
۷۵ دیدگاه برای این مطلب ارسال شده است. دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.پـــرتو
۱۸:۱۷ ۱۴۰۱/۰۱/۱۰
اما واسه ی من اکثره رنگ متن پستام مشکی هستش می تونید خودتون مشاهده کنید
وبلاگ اول:
وبلاگ اول:
parto-afshar1372.blogfa.comshabemahtabi1372.blogfa.comایراد از خود قالب است، خط 162 این قسمت:
*{font-family:B Mahsa;direction:rtl;color:#000000}*{font-family:B Mahsa;direction:rtl;}body{
background: #0B4D8A;
}body{
background: #0B4D8A;
background-image: url("http://example.com/image/bg.png");
background-size: cover;
}http://example.com/image/bg.pngپرتو
۱۱:۳۱ ۱۴۰۱/۰۱/۱۲
وای خیلی ممنونم ازتون ممنون از جوابتون بابت ایمیل ببخشید متوجه جوابتون نشدم
پـــرتو
۱۶:۳۲ ۱۴۰۱/۰۱/۱۳
سلام جناب خسته نباشید شرمنده مزاحم میشم عه جناب یک نفر هعی میاد توی وبم و کامنتای توهین آمیز می نویسه می خاستم بدونم چطوری کامنتشو بلاک کنم آیا راهی هست که بشه بلاکش کرد؟ چون توی بلاگفا نمیشه بلاک کرد یعنی گزینه بلاک نداره من باید چیکار کنم؟ فقط تنها راه اینه که ایپیشو پیدا کنم و باید توی سایت وبگذر آمارگیر بسازم تا ایپیش پیدا شه و بشه بلاکش کرد ولی الان توی وبگذر نمیشه اکانت ساخت پس من چیکار کنم؟ میشه آدرس آمارگیری مشابه به سایت وبگذر بهم بدین که بشه آیپیشو پیدا کرد یا نه؟ ممنون میشم راهنمایی بفرمایید
برای بدست آوردن IP در وبلاگ متاسفانه چاره ای جز استفاده از ابزارهای رایگان وجود ندارد مگر اینکه خود بلاگفا آی پی ارسال کننده نظر را نمایش دهد، متاسفانه چند سایتی که در این زمینه فعال بودند هم (مثل پرشین استت) از کار افتاده اند، در هر صورت اگر موردی پیدا نکردید نهایتا می توانید در بخش برنامه نویسی درخواست برنامک اختصاصی جهت ثبت IP و زمان بازدیدکننده ها را ثبت و پیگیری کنید.
بعد از پیدا کردن آی پی با درج نمونه کد زیر در انتهای قالب می توانید یک آی پی خاص را به صفحه دیگری به طور مثال سایت گوگل ارجاع دهید که در واقع نقش بلاک کردن را ایفا می کند:
بعد از پیدا کردن آی پی با درج نمونه کد زیر در انتهای قالب می توانید یک آی پی خاص را به صفحه دیگری به طور مثال سایت گوگل ارجاع دهید که در واقع نقش بلاک کردن را ایفا می کند:
<script>
var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status === 200) {
callback(null, xhr.response);
} else {
callback(status, xhr.response);
}
};
xhr.send();
};
getJSON('https://api.db-ip.com/v2/free/self', function(err, data) {
if (err !== null) {
//alert('Something went wrong: ' + err);
} else {
if(data.ipAddress == '111.222.333.444'){
window.location.href = 'https://google.com';
}
}
});
</script>پرتو
۱۲:۳۰ ۱۴۰۱/۰۱/۱۴
خیلی ممنونم جناب از راهنماییتون فقط یه سوال ای پی مورد نظر رو چطوری پیدا کنم؟ راستش تو نت سرچ هم کردم ولی چیزی سر در نیاوردم ممنون میشم در این مورد هم راهنمایی بفرمایید راستش منظورتون رو از این جمله: "می توانید در بخش برنامه نویسی درخواست برنامک اختصاصی جهت ثبت IP و زمان بازدیدکننده ها را ثبت و پیگیری کنید." رو متوجه نشدم
برای بدست آوردن آی پی بازدیدکننده وبلاگ یا باید از ابزارهایی مثل آمارگیر سایت وبگذر یا پرشین استت استفاده کنیم که متاسفانه این سایت ها فعلا سرویس دهی مناسبی ندارند یا بعضا دیگر خدمات ارائه نمی کنند، یا اینکه خود بلاگفا اطلاعات آی پی بازدید کننده را نمایش دهد که در حال حاضر این امکان را ارائه نمی کند، به نظر یک راه حل رفع مشکل نوشتن ابزار اختصاصی برای به دست آوردن آی پی و زمان بازدید هر بازدیدکننده است که اگر تمایل داشتید می توانید به صورت سفارش در قسمت برنامه نویسی درخواستتان را ثبت کنید تا شرایط و هزینه کار برآورد شود، متاسفانه امکان حل این مشکل به شکل رایگان ممکن نیست چون نوشتن این برنامه زمانبر است و طوری نیست که صرفا یک کد باشد و بتوانید از آن مستقیما استفاده کنید.
پـــرتو
۱۶:۴۰ ۱۴۰۱/۰۱/۱۴
چقدر میشه هزینه ؟ راهه دیگه ای وجود نداره؟ نمیشه از طریق خود لپتاپ آی پی رو بدست آورد؟ و بازم سوال :/ این رنگ متن درست شد فقط رنگ لینک ها آبی میشه باید برای عوض کردن رنگ آبی چیکار کرد؟ منتظر جوابتون هستم :)
در مورد آی پی و هزینه لطفا از بخش برنامه نویسی پیگیری کنید، جز مواردی که گفتیم راه دیگری نیست، با لپ تاپ فقط می توانید آی پی دستگاه خودتان را پیدا کنید، برای تغییر رنگ لینک های قالب کد زیر را قبل از بسته شدن تگ head قرار دهید:
<style>
a {
color: #ffcc00;
}
a:hover {
color: #ffcccc;
}
</style>پـــرتو
۱۸:۱۹ ۱۴۰۱/۰۱/۱۴
وای مچکرم خیلی خیلی تشکر می کنم ، ممنونم از لطف شما انشاالله از طریق ایمیل حتما پیگیری می کنم :)
پـــرتو
۱۵:۳۶ ۱۴۰۱/۰۲/۰۳
جناب سلام خسته نباشید جناب یادتونه بهم کد پس زمینه ی عکس دادین عه جناب کار نمی کنه ، نمی دونم دقیقا واسه چی ؟ برای هر دو جا هم یعنی هر دو جای بکگراند هم گذاشتم ولی کار نکرد نمی دونم مشکل دقیقا از چیه مشکل دقیقا از فرمته عکسه؟ فرمته عکس دقیقا باید چی باشه؟ اصن فکنم ربطی ام به فرمت عکس نداشته باشه کلا پس زمینه ی عکس دارش کار نکرد
و دیگه اینکه برای گرد کردن گوشه های پست ها باید چیکار کنم؟ ممنون میشم راستش می دونم که برای گرد کردن پست ها از چه کدی می شه استفاده کرد ولی دقیقا نمی دونم کجا و چی باید بزارم ممنون میشم راهنمایی بفرمایید منتظر پاسخ شما هستم
و دیگه اینکه برای گرد کردن گوشه های پست ها باید چیکار کنم؟ ممنون میشم راستش می دونم که برای گرد کردن پست ها از چه کدی می شه استفاده کرد ولی دقیقا نمی دونم کجا و چی باید بزارم ممنون میشم راهنمایی بفرمایید منتظر پاسخ شما هستم
لطفا کد پس زمینه را در قالبتان اعمال کنید تا علت مشکل قابل بررسی باشد، در مورد گرد کردن گوشه های پست ها آخرین کد قالب را به ایمیل ما ارسال و پاسخ را از همان طریق پیگیر باشید.
پـــرتو
۰۰:۰۶ ۱۴۰۱/۰۲/۰۴
چشم حتما فردا انشاالله
پـــرتو
۲۰:۴۹ ۱۴۰۱/۰۲/۰۵
سلام خسته نباشید برایتان ایمیل فرستادم
به زودی بررسی و نتیجه را از طریق ایمیل اطلاع رسانی می کنیم.
پرتو
۱۴:۵۵ ۱۴۰۱/۰۲/۱۸
سلام خسته نباشید شرمنده مزاحم میشم عه ببخشید قالبم یکی دو تا ایراد کوچیک داره که اگه میشه لطفا بهم بگید چطوری برطرفش کنم خب بریم سراغ ایرادات یک اینکه طول همون منویی که برام ساخته بودین یکم کوچیکه میخام طولش تا اون یکی ستون باشه یعنی تا ستون سمت راستی و دیگه اینکه ستون سمت راست و ستون سمت چپ بینشون خیلی فاصلس ممنون میشم بهم بگین برای رفع این مشکل چیکار کنم منظورم اینکه میخام فاصلشون کمتر بشه ممنون میشم راهنماییم کنید فقط میدونم قسمت padding رو باید تغییر داد درسته ، نمیدونم دقیقا کدوم padding منتظر پاسختون هستم
لطفا کد قالب را به آدرس ایمیل ما ارسال کنید تا تغییرات مد نظر اعمال شوند.
پرتو
۱۱:۳۳ ۱۴۰۱/۰۲/۱۹
چشم حتما در اولین فرصت بهتون ایمیل میکنم
پـــرتو
۰۰:۱۰ ۱۴۰۱/۰۲/۳۰
سلام خسته نباشید شرمنده مزاحم میشم برای فاصله دادن بین هر پست باید از چه کدی استفاده کرد؟ یعنی می خاستم اگه میشه بین پست ها فاصله ایجاد شه ممنون میشم جواب بدین منتظر پاسخ شما هستم
بخش مطالب در قالب های بلاگفا با محتوای تگ اختصاصی BLOGFA ایجاد می شوند، یعنی به تعداد هر پست محتوای داخل این تگ پشت سر هم تکرار می شود، با این توضیح برای ایجاد فاصله بین پست ها می توانید قبل از بسته شده تگ BLOGFA یک br اضافه کنید، به فرض:
نکته: طبق بررسی ما تگ BLOGFA در نمونه کد قالب قبلی شما در حوالی خط 261 قرار دارد.
...</center></div><br /></BLOGFA>نکته: طبق بررسی ما تگ BLOGFA در نمونه کد قالب قبلی شما در حوالی خط 261 قرار دارد.
پرتو
۱۲:۵۵ ۱۴۰۱/۰۳/۰۱
اوکی ممنونم از جوابتون
پـــرتو
۱۶:۴۵ ۱۴۰۱/۰۳/۰۲
سلام خسته نباشید ببخشید میشه راجع به این کدی که گذاشتین بیشتر توضیح بدین دقیقا باید همینو بزارم و دقیقا کجا باید بزارم اخه هر کار می کنم نمیشه میشه کاملتر توضیح بدین ممنون میشم مثلا قبل از بلاگفا باید گذاشت یا بعد از بلاگفا و خط 261 بلاگفا تازه شروع شده و بسته نشده میشه کاملتر توضیح بدین ممنونتون میشم و اینکه اگر بخام کنار عنوان پست ها عکس (یا آیکون) باشه باید چیکار کنم ممنون میشم جواب این دو تا سوال رو بدین منتظر پاسختون هستم اگرم نمی تونید اینجا پاسخ بدین به ایمیلم پاسخ بدین اشکال نداره ممنونم
در انتهای خط 261 کدها به این شکل بسته می شوند:
در مورد درج آیکن یا باید از تگ img در HTML استفاده کنید یا از خاصیت background در CSS که توضیح هر کدام در سایت وجود دارد و با جستجوی img یا background در دسترس است.
</center></div></BLOGFA></center></div><br /></BLOGFA>در مورد درج آیکن یا باید از تگ img در HTML استفاده کنید یا از خاصیت background در CSS که توضیح هر کدام در سایت وجود دارد و با جستجوی img یا background در دسترس است.
پـــرتو
۱۸:۴۸ ۱۴۰۱/۰۳/۰۴
سلام خسته نباشید شرمنده مزاحم میشم اون کد درست شد ولی برای این کد که داده بودین:
منظورم اینک من اگر بخوام ستون سمت راست یکم بره سمت چپ باید چیکار کنم یعنی ستون سمت راست جابجا بشه امیدوارم منظورم رو رسونده باشم منتظر پاسختون هستم
<style>
#sidebar {
margin-right: 80px;
margin-top: -10px;
}
</style>منظورم اینک من اگر بخوام ستون سمت راست یکم بره سمت چپ باید چیکار کنم یعنی ستون سمت راست جابجا بشه امیدوارم منظورم رو رسونده باشم منتظر پاسختون هستم
صفحه 3 از 5آخرین دیدگاه ها
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.سیدعباسی
با سلام من میخوام از متن زیر لینکش رو دربیارم و در آخر مقدار 3088 رو بصورت خروجی نهایی داشته باشم با...۱۴۰۳/۰۷/۰۷
مجتبی
سلام وقت بخیر میخوام یک روز به تاریخ دریافتی اضافه شه ممنون میشم راهنمایی کنید۱۴۰۳/۰۶/۲۰
پرتو
سلام خوبید؟ خسته نباشیذ ببخشید مزاحم شدم می خواستم بگم من به شما ایمیل زدم ولی هنوز شما جواب ندادین می تونم بپرسم چرا سوال...۱۴۰۳/۰۶/۱۵
در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.