i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت متفاوت و کاملتر خواهد بود، این فرآیند زمانبر است و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی نمایش و به تناوب به روزرسانی می شود.
آگهی
article

نحوه درج تصویر در وبلاگ و سایت

web-blog-image

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

شیوه های درج تصویر در وبلاگ و سایت


در مورد قرار دادن تصاویر در وبلاگ و سایت باید بین دو مورد تفکیک قائل شویم:
- حالت اول زمانی است که تصویر مورد نظرمان در صفحه ای دیگر در فضای وب و به صورت آنلاین قرار دارد، به طور مثال تصویری که در مطالب وبلاگ یا سایت دیگری درج شده است.
- حالت دوم زمانی است که تصویر بر روی هارددیسک کامپیوتر، حافظه گوشی تلفن همراه یا بر روی ابزارهای جانبی مانند فلش مموری ها وجود دارد و هنوز در فضای وب قرار نگرفته است.
در ادامه به صورت موردی هر کدام از این دو حالت را بررسی می کنیم.

کپی و درج تصویر از صفحه وب در وبلاگ و سایت


تصاویر در وب تنها در صورتی قابل روئیت هستند که بر روی یک سرور آنلاین آپلود شده و در دسترس باشند، به همین دلیل روش کپی تصاویر از صفحات دیگر معمولا توصیه نمی شود چرا که ممکن است آن فایل بعدا توسط مدیر سایت یا وبلاگ اصلی حذف گردد و در نتیجه منبع تصویر از دست رفته و کپی آن در سایت یا وبلاگمان نیز نمایش داده نشود، از طرفی برخی تصاویر دارای حقوق مولف (Copyright) هستند که اصول و اخلاق حرفه ای حکم می کند تا حد امکان سعی کنیم محتوایی جدید ساخته و از کپی برداری صرف اجتناب نمائیم، به هر صورت محض اطلاع بیشتر این شیوه را در ادامه آموزش می دهیم.
اکثر کاربران تصاویر را به صورت مستقیم از صفحه مبداء کپی (Copy) و در محیط ویرایشگر ارسال مطالب درج (Paste) می کنند، این شیوه اگرچه کاربردی است اما روش بهینه نیست و بهتر است درج تصویر به صورت کپی آدرس URL عکس و تنظیم آن در قسمت ویرایشگر ارسال مطالب باشد، همانطور که پیش تر گفتیم هر تصویری که در وب می بینیم بر روی سرور آنلاین قرار دارد و آدرس کامل آن معمولا با کلیک راست بر روی عکس و مشاهده Image Info بدست می آید، به طور مثال آدرس URL یک عکس فرضی ممکن است به صورت زیر باشد:
http://yoursite.com/image/example.jpg
این آدرس در ابتدا با نام و پسوند یک سایت شروع شده و در انتها به یک فرمت مربوط به فایل های تصویری (به فرض jpg، gif، png و...) ختم می شود، این قانون در مورد اکثر تصاویر موجود در وب صدق می کند (به جزء برخی موارد که به صورت کد شده هستند)، پس از به دست آوردن آدرس URL مستقیم عکس در قسمتی از ویرایشگر ارسال مطلب که مایل هستیم کلیک کرده و آیکن ورود تصویر (معمولا به شکل یک منظره کوچک) را انتخاب می کنیم:
web-blog-insert-image
در این قسمت معمولا پنجره کوچکی جهت اعمال تنظیمات تصویر نمایش داده می شود که در فیلد URL آن آدرس کامل تصویر و در قسمت Description و Title توضیحات و عنوان تصویر را درج می کنیم (شکل و نحوه این تنظیمات ممکن است در سرویس ها و برنامه های مختلف اندکی متفاوت باشد)، در گام آخر موارد درج شده را با زدن دکمه مربوطه تایید می کنیم، اگر همه چیز را درست انجام داده باشیم تصویر مورد نظر در ویرایشگر ارسال مطلب مشاهده خواهد شد.
نکته: برای اطمینان از صحیح بودن آدرس URL تصویر، اگر آن را به صورت مستقیم در نوار آدرس مرورگر وارد کرده و دکمه Inter یا Go را بزنیم تصویر از روی سرور میزبان بارگذاری شده و در صفحه مرورگر نمایش داده خواهد شد، اگر این اتفاق رخ ندهد به احتمال زیاد آدرس URL صحیح نیست.

درج تصویر در وبلاگ و سایت از حافظه های شخصی


شیوه دیگر درج و نمایش تصویر در فضای وب آپلود آن از هارددیسک کامپیوتر، تلفن همراه، فلش مموری ها و در کل حافظه های شخصی بر روی فضای ذخیره سازی سرورهای آنلاین است، این روش درج و انتشار تصاویر در وبلاگ و سایت با شیوه ای که در بالا توضیح داده شد در چند گام اولیه فرق می کند، تفاوت این روش با شیوه کپی تصویر در این است که در اینجا باید عکس خود را ابتدا در وب بر روی سروری آنلاین آپلود کنیم، یعنی ابتدا فایل را به یک کامپیوتر متصل به شبکه جهانی انتقال دهیم که به این کار در اصطلاح آپلود می گویند (نقطه مقابل دانلود)، آپلود معمولا از دو طریق امکانپذیر است:
- استفاده از سرور و فضای خریداری شده (هاست):
با جستجو در موتورهای جستجو به شرکت های معتبر و ترجیحا خوشنام ارائه دهنده خدمات میزبانی وب مراجعه کرده و پس از ثبت نام بر اساس میزان فضای مورد نیاز یکی از پلان های ارائه شده را انتخاب و برای یک سال یا بیشتر خریداری می کنیم، در این شیوه معمولا باید یک دامنه (آدرس اینترنتی) شخصی نیز خریداری و به هاست خود متصل نمائیم، به طور مثال برای ثبت دامنه های با پسوند ir باید به آدرس زیر مراجعه کنیم:
nic.ir
این شیوه عموما مورد استفاده صاحبان سایت ها و وبلاگ نویسانی که می خواهند وبلاگی با آدرس مستقل داشته باشند قرار می گیرد.
- استفاده از سرویس های رایگان میزبان فایل (سایت های ارائه دهنده خدمات آپلود رایگان فایل):
با جستجوی عبارتی چون "میزبانی فایل وبلاگ"، "آپلود رایگان"، فضای رایگان آپلود" و... در موتورهای جستجو و پس از تحقیق و بررسی کافی یکی از سایت های معتبر ارائه دهنده خدمات میزبانی رایگان فایل را انتخاب و در صورت نیاز ثبت نام می کنیم، این شیوه اغلب مورد استفاده وبلاگ نویسان قرار می گیرد و متاسفانه با توجه به کیفیت پائین سرویس دهی سایت های میزبان شاهد مشکلات زیادی در این زمینه هستیم.
در هر دو شیوه فوق فایل مورد نظر باید ابتدا به سرور منتقل شود و سپس آدرس URL کامل آن در اختیارمان قرار گیرد، این آدرس در هاست شخصی با دنبال کردن دایرکتوری فایل و در سرویس دهنده های رایگان معمولا توسط خود سرویس دهنده قابل دریافت است، مثال:
http://yoursite.com/user/image/example.jpg
تصویری که در مسیر دایرکتوری user/image با نام example.jpg آپلود شده است.
از این مرحله به بعد شبیه آنچه پیشتر گفتیم می باشد، یعنی در قسمت ویرایشگر مطلب کلیک، آیکن مربوط به ورود تصویر را انتخاب و در نهایت پس از انجام تنظیمات لازم دکمه تائید را فشار می دهیم.

کد HTML درج تصویر در وبلاگ و سایت


برای آنهایی که همیشه دوست دارند سر از زیر و بم مسائل در آورند معمولا تکیه صرف بر امکانات اولیه ویرایشگر مطلب سیستم مدیریت سایت و وبلاگ قانع کننده نیست، از طرفی گاهی نیاز به اعمال تنظیمات بیشتر و رفع ایرادات سبب می شود که دست به ویرایش سورس کدهای HTML بزنیم، چرا که تصاویر درج شده در محیط ویرایشگر مطلب نهایتا به صورت کد در صفحات وب منتشر می شوند.
در HTML از تگ img برای درج تصویر استفاده می شود، تگ img معمولا با عناصر src، alt، title، width، height و border همراهی می کند، مثال زیر نمونه کد تصویری با ابعاد 200 در 200 پیکسل را با حاشیه صفر نشان می دهد:
<img src="http://yoursite.come/image/example.jpg" alt="Image" title="Image" width="200" height="200" border="0">
نکته: از حاشیه صفر برای تصاویری که لینک شده اند استفاده می کنیم تا نوار آبی رنگ دور عکس حذف گردد، البته در نسخه HTML5 باید از CSS برای این منظور استفاده شود.

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


در پایان این آموزش بد نیست نکات زیر را نیز در خصوص درج تصویر در وبلاگ و سایت به خاطر داشته باشیم:
- از درج تصاویر خیلی حجیم (به طور مثال بیش از یک مگابایت) در وب خودداری کنیم، این نوع تصاویر علاوه بر اشغال میزان زیادی از فضای سرور، موجب بارگذاری طولانی مدت و به زحمت افتادن کاربران می شوند.
- از تصاویر خام که حجم و ابعاد پیکسلی بسیار زیادی دارند استفاده نکنیم، تصاویر گرفته شده با دوربین عکاسی یا تلفن همراه را ابتدا با برنامه های گرافیکی مانند فتوشاپ ویرایش کرده و از نظر حجم و ابعاد کاهش دهیم.
- از تغییر اندازه تصاویر پس از درج در محیط ویرایشگر مطلب اجتناب کنیم، این کار موجب می شود تا تصویر از فرم و ابعاد طبیعی خود خارج شود، از طرفی باعث کاهش رتبه وبلاگ یا سایتمان در موتورهای جستجو شده و در هنگام نمایش لیست جستجو یک فاکتور منفی خواهد بود.
- حتما برای تصاویر خود از تگ alt (متن جایگزین تصویر) و اندازه عرض و ارتفاع استفاده کنیم، اهمیت این کار در کمک به استاندارد شدن کدنویسی صفحه و بالا رفتن اعتبار وبلاگ و سایت نزد موتورهای جستجو نهفته است.
- از کپی تصاویر دیگران تا حد امکان پرهیز کنیم و در صورت کپی برداری حتما لینک و نام سایت یا وبلاگ منبع را ذکر نمائیم.
- از به کار بردن تصاویر بیش از اندازه در یک صفحه خودداری کنیم، اجتناب از این کار موجب بارگذاری سریع تر مطالبمان خواهد شد.
- تصاویر با پهنای پیکسلی بزرگتر از قالب خود در وبلاگ و سایت قرار ندهیم، عدم توجه به این مسئله ممکن است سبب نمایش به هم ریخته ظاهر قالب شود، البته استفاده از شیوه های نوین طراحی وب مانند قالب های واکنش گرا (Responsive) می تواند راه حل این مشکل باشد.
sectionدسته بندی: مهارتهای وب » وبلاگ نویسی
related مطالب بیشتر:
» آنچه برای شروع طراحی قالب یک وبلاگ باید بدانیم
» پاسخ به سوالات و حل مشکلات وبلاگ نویسان
» فوت و فن وبلاگ نویسی حرفه ای چیست؟!
» نحوه قرار دادن فاوآیکن (Favicon) در نوار آدرس سایت و وبلاگ
» چگونه از تمام امکانات وبلاگ خود استفاده کنیم؟
commentنظرات (۱۱۲ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: نازنین
زمان: ۰۳:۲۴:۲۷ - تاریخ: ۱۳۹۳/۰۳/۲۳
سلام. ممنونم از این همه آموزشه خوبتون.
من که خیلی استفاده کردم.
تشکر فراوووون
نویسنده: motahare
زمان: ۱۴:۵۸:۱۱ - تاریخ: ۱۳۹۳/۰۳/۲۶
سلام خسته نباشید من تمام مراحل رو انجام میدم ولی این خطا رو از من میگیره. امکان درج چنین پستی به دلیل وجود اسکریپ یا لینک غیرمجاز وجود ندارد. لطفا کمکم کنید
پاسخ: 
سلام
این خطا به دلیل محدودیت هایی است که سایت بلاگفا نسبت به برخی سایت های میزبان فایل اعمال کرده است! تنها راه حل استفاده از سرویس آپلودی است که بلاگفا با آن مشکلی نداشته باشد!
نویسنده: shantia
زمان: ۱۳:۰۷:۲۱ - تاریخ: ۱۳۹۳/۰۴/۲۷
سلام
ببخشید چگونه می توان اندازه ی عکس را در زمان درج، تغییر داد.
لطفا کمکم کنید.
پاسخ: 
سلام
توصیه می کنیم تصاویر قبل از آپلود با نرم افزارهایی مانند فتوشاپ به اندازه دلخواه تبدیل و سپس درج شوند، با این حال در هنگام درج تصویر، اگر بر روی آن کلیک کنید، چهار مربع کوچک در اطراف ظاهر می شوند که با کشیدن آنها به داخل یا خارج، اندازه تصویر تغییر خواهد کرد، همچنین در برخی سیستم های وبلاگی امکان کم و زیاد کردن اندازه به صورت مقدار دهی پیکسلی وجود دارد.
نویسنده: نازنین
زمان: ۲۳:۰۱:۰۹ - تاریخ: ۱۳۹۳/۰۴/۳۱
ای خدا من کلافه شدم میخوام سرمو بزنم تو دیوار هیچی از حرفات نفهمیدم لطفا تصویری بگید هر کاری می کنم نه مطلب درج میشه نه بلدم عکس بزارم وبلاگم تو بلاگفاست دیوونه شدم
پاسخ: 
لطفا کمی بیشتر اطلاعات عمومی وب خود را تقویت کنید، خیلی از مشکلات در زمینه وبلاگ به دلیل عدم آشنایی با مبانی وب است!
نویسنده: دختر محجبه...
زمان: ۱۲:۱۲:۲۰ - تاریخ: ۱۳۹۳/۰۵/۱۱
سلام ممنونم مطالب خوبی بود اما اگر ما عکس هایی در کامپیوتر یا همان صفحه ی دسکتاپ داشته باشیم چگونه میتوانیم آن را در وبلاگ قرار دهیم لطفا این مطلب رو هم بگذارید چون برای من خیلی واجب و ضروری است....
پاسخ: 
سلام
لطفا آموزش را مطالعه کنید:
"درج تصویر در وبلاگ از روی هارددیسک کامپیوتر" به عبارتی کافی است یک سرویس آپلود رایگان انتخاب و فایل ها را در آن آپلود کنید.
نویسنده: زهرا
زمان: ۱۵:۴۶:۳۸ - تاریخ: ۱۳۹۳/۰۵/۱۵
سلااااااااااااام تورو خدا به من کمک کنید بتونم عکس هایی رو که خودم گرفتم رو بزارم تو وبم اموزشش رو به ایمیلم بفرستید من فقط میتونم عکسایی که تو اینترنت هست رو بزارم
پاسخ: 
سلام
در آموزش حاضر به اندازه کافی گفته شده! لطفا اطلاعات عمومی وب خود را افزایش دهید.
نویسنده: مهسا
زمان: ۱۸:۱۴:۰۰ - تاریخ: ۱۳۹۳/۰۵/۲۳
سلام ببخشید من تازه یه وبلاگ تو میهن بلاگ درست کردم و تو هر سایتی رفتم متوجه نشدم که چه طوری باید تو وبلاگم عکس بذارم چون میهن بلاگ قسمت اپلود عکس و یا ... نداره
پاسخ: 
سلام
باید یک سرویس رایگان آپلود عکس پیدا کنید!
نویسنده: زهرا
زمان: ۱۷:۲۵:۴۶ - تاریخ: ۱۳۹۳/۰۶/۱۶
سلام من تازه وبلاگ درست كردم و كارهايي و كه شما هم گفتي انجام دادم تو ادرس تصوير ادرس چيو بدم يعني چي نمي فهمم لطفا برام توضيح بده
پاسخ: 
سلام
همان طور که در آموزش همراه با مثال گفته شده، منظور از آدرس تصویر، آدرس URL آن است که با درج آن در مرورگر، تصویر نمایش داده خواهد شد، لطفا در وب در این رابطه جستجو یا منبعی در رابطه با مبانی وب مطالعه کنید.
نویسنده: محمد صالح
زمان: ۲۱:۵۴:۵۸ - تاریخ: ۱۳۹۳/۰۶/۱۸
با سلام و خسته نباشید. می خواستم ببینم می تونیم مطالب قبلی وبلاگمون که فاقد عکس براشون عکس بذاریم اگه میشه لطفا توضیح دهید؟
پاسخ: 
سلام
از قسمت ویرایش مطالب گذشته می توانید مطلب مورد نظر را انتخاب و تصویر را در آن درج کرده و مجدد وبلاگ را به روزرسانی کنید.
نویسنده: sara
زمان: ۱۲:۵۴:۰۶ - تاریخ: ۱۳۹۳/۰۶/۲۲
من اصلا وقتی آدرس رو میدم به جای عکس تو جای تصویر علامت سوال آبی میاد نمیدونم چی کار کنم جواب رو به وبلاگم بفرستید .
پاسخ: 
یک نمونه آدرس جهت بررسی درج کنید، هچنین یک تصویر نمونه در وبلاگ خود قرار دهید.
نویسنده: mekk
زمان: ۱۰:۱۹:۱۴ - تاریخ: ۱۳۹۳/۰۶/۲۹
سلام
من هر عکسی میذارم میگه بدلیل لینک غیر مجاز مطلب ثبت نمیشه
چی کار کنم؟
پاسخ: 
سلام
این مشکل به بلاگفا مربوط است که آدرس تعداد زیادی از سایت های خدماتی وبلاگ نویسی را در سرویس خود مسدود کرده است! چاره ای نیست جزء اینکه سایتی پیدا کنید که بلاگفا با آن مشکلی نداشته باشد!
نکته: با توجه به اینکه بلاگفا هر روز به لیست ممنوعیت خود اضافه می کند، این مشکل ممکن است حتی نسبت به کدهای قبلا درج شده نیز به وجود بیاید.
نویسنده: er13
زمان: ۱۳:۲۶:۳۸ - تاریخ: ۱۳۹۳/۰۷/۲۷
سلام من هرچه قدر هرجوری میکنم نمیشه
پاسخ: 
سلام
به نظر ایراد از سرورهای نمایش تصویر پرشین بلاگ است.
نویسنده: star
زمان: ۲۱:۲۰:۴۱ - تاریخ: ۱۳۹۳/۰۷/۲۷
سلام
چرا برای من عکس نمیاد و یه لینک میاد که باید روی آن کلیک کرد تا عکس بیاد . چجوری خود عکسه میاد ؟
پاسخ: 
سلام
قاعدتا ایرادی وجود دارد، آدرس صفحه مربوطه را جهت بررسی درج کنید.
نویسنده: اميررمضاني
زمان: ۱۵:۰۷:۵۴ - تاریخ: ۱۳۹۳/۰۸/۰۷
سلام ميخاستم بپرسم چرا واسه مطالب قبلي وبلاگ که عکس مطلب نداره نميشه عکس مطلب گذاشت ولي براي مطالب جديد که ارسال ميکنم به راحتي ميشه عکس مطلب گذاشت؟
پاسخ: 
سلام
به نظر سرویس وبلاگی شما استاندارد نیست و مشکلات اینچنین در آن وجود دارد! باید با پشتیبانی سرویس مذکور مسئله را مطرح کنید.
نویسنده: مهدیس
زمان: ۰۸:۲۸:۱۱ - تاریخ: ۱۳۹۳/۰۹/۰۱
سلام من تا یک ماه پیش هر تصویری رو تو وبلاگم میذاشتم ولی تازگی تصاویر و ثبت نمیکنه و مینویسه امکان درج به دلیل اسکریپ غیر مجاز وجود ندارد...
میشه راهنماییم کنین ممنون
پاسخ: 
سلام
این مشکلات ناشی از مسدود شدن آدرس اکثر سایت های آپلود در بلاگفا است، متاسفانه مدتها است این سرویس با اعمال محدودیت های بیش از حد باعث بروز این نوع مشکلات شده و برای رفع آن باید سایتی پیدا کنید که بلاگفا با آدرس آن مشکلی نداشته باشد (فایل ها را در آن آپلود کنید)! راه حل دیگر این است که به کلی قید چنین سرویس پر دردسری را بزنید!
paged صفحه 4 از 8
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




8 × 5
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آگهی
سفارش آگهی
Webgoo.ir

آگهی متنی و بنر