طریقه ی قرار دادن متن در اطراف تصاویر
چگونه میتوان واژه ها را در اطراف تصویر قرار داد؟
شاید یکی از اولین چیزهایی که میخواهید در طراحی سایت از آن استفاده کنید ، تصاویر باشد. اما نه فقط یک تصویر ساده ای که در جای خود محصور شده است. بلکه می خواهید ایده های خلاقانه خود در طراحی سایت بکار ببرید و متون سایت را در اطراف تصاویر قرار دهید. در صورتی که می خواهید طریقه ی قرار دادن متن در اطراف تصاویر با استفاده از html را یاد بگیرید ، به خواندن این مطلب ادامه دهید.
همچنین اگر قصد دارید از کد css برای قرار دادن متن در اطراف تصاویر استفاده کنید ، لازمه است که مقاله ی چیدمان مکان عکس در کنار مطلب توسط css را مطالعه فرمایید.
اما چگونه میتوان توسط html تصاویر و کلمات را در کنار یکدیگر به کار برد؟
کد قرار دادن متن در اطراف تصاویر
نحوه ی چینش متون در اطراف تصویر
شما میتوانید با استفاده از خصوصیت ALIGN تصاویر را در صفحه قرار دهید و این خصوصیت دارای چهار مقدار TOP,LEFT,RIGHTو Bottom میباشد. مقدار انتخابی شما برای این خصوصیت تعیین خواهد کرد که متن مجاور در اطراف تصویر چگونه قرار گیرد. اگر تصویر داخل یک تگ<p> یا <h1> قرار داده شده باشد و خاصیت ALIGN تنظیم نشده باشد, مقدار پیشفرض Bottom میباشد.
در صورتی که از کد html زیر استفاده کنید و خاصیت ALIGN آن را top قرار دهید ، خط اول متن در بالای تصویر قرار خواهد گرفت و بقیه ی متن در زیر تصویر قرار میگیرد. که باعث ایجاد یک فضای سفید بزرگ در کنار تصویر میشود.
<p> <img SRC= " img/apple_brand.jpg " ALIGN="top" /> This text appears to the left of the image. This text appears to the left of the image. This text appears to the left of </p>
قرار دادن متن در سمت راست تصویر
حال اگر به جای مقدار top از مقدار right یا left استفاده کنید این مشکل نیز حل میشود. اگر طبق کد زیر مقدار ALIGN را left قرار دهید متن به صورت منظم در سمت راست تصویر قرار میگیرد.
<p> <img SRC= " img/apple_brand.jpg " ALIGN="left" /> This text appears to the left of the image. This text appears to the left of the image. This text appears to the left of </p>
چینش متون در اطراف تصاویر
قرار دادن متن در سمت چپ تصویر
و اگر مقدار ALIGN را right قرار دهید متن به صورت منظم در سمت چپ تصویر قرار میگیرد.
<p> <img SRC= " img/apple_brand.jpg " ALIGN="right" /> This text appears to the left of the image. This text appears to the left of the image. This text appears to the left of </p>
طریقه ی قرار دادن متن در اطراف تصاویر
قرار دادن متن در اطراف تصویر
شما حتی میتوانید یک متن را در کنار یک تصویر در سمت چپ صفحه قرار دهید و سپس متن را در اطراف تصویر دیگری در سمت راست صفحه نیز قرار دهید. به کدهای زیر توجه کنید
<img src="apple_brand.jpg" ALIGN="left"> This text appears to the right of the image <br CLEAR="left"> <img src="apple_brand.jpg" ALIGN="right">
در این مثال از تگ br با خصوصیت clear استفاده شده است ، برای این که خصوصیت” ALIGN=”left متن قبلی پاک شود و تنظیمات تصویر سمت راست اعمال گردد. درکد اول تصویر سمت چپ قرار میگیرد و متن به صورت منظم در سمت راست تصویر قرار میگیرد سپس در کد دوم تنظیمات تصویر اول متوقف میشود و با کد سوم تصویر در سمت راست قرار میگیرد و متن از بالای تصویر شروع میشود و به صورت منظم در سمت چپ تصویر قرار میگیرد.
تا اینجا نحوه ی قرار دادن متن در اطراف تصاویر توضیح داده شد. اما اگر دقت کرده باشید با اجرای کدهای زیر ، متن در اطراف تصویر قرار میگیرد اما ظرافت کافی را ندارد و متن بیش از اندازه به تصویر نزدیک شده است برای ایجاد فاصله بین متن و تصویر میتوان از دو خصوصیت HSPACE وVSPACE استفاده کرد . HSPACEیک بافر در سمت راست و چپ تصویر ایجاد میکند در حالیکه VSPACE یک بافر در بالا و پایین تصویر ایجاد میکند. کد زیر یک بافر به اندازهی 50 پیکسل در اطراف تصویر تولید می نماید.
<img src="apple_brand.jpg" ALIGN="right" HSPACE = "50" VSPACE = "50>
مشکل استفاده از HSPACE این است که یک بافر در هر دو طرف تصاویر قرار میدهد و اگر بخواهیم تصویر در حاشیه قرار داده شود و با حاشیه ی سمت چپ صفحه و یا سمت راست صفحه فاصله نداشته باشد با مشکل روبرو میشویم.
برای مطالعه ی آموزشهای بیشتر در مورد کدنویسی و چگونگی طراحی سایت میتوانید به وب یار مراجعه فرمایید.
تنها استفاده از پست ها و صفحه ها برای ساخت هر وبسایتی با وردپرس کافی نیست. Toolset که یکی از افزونه های نمایش تمامی توابع وردپرسی است به شما این امکان را می دهد که وبسایت های رتبه بندی کننده، وبسایت های راهنما، وبسایت های دارای عضویت اشتراکی و یا وبسایت های فروشگاهی منحصر به فرد بسازید. Toolset چیست؟ مجموعه ای از افزونه هایی است که برای گسترش وردپرس استفاده می شود. Toolset به آن ها که برنامه نویسی نمی دانند کمک می کند سایت های وردپرسی بسازند. این گفته به نظر یک شعار است اما آن ها که تجربه حداقل یک بار استفاده از Toolset را دارند نظرشان متفاوت است. با Toolset چه می توان کرد؟ 1) نوع محتوایی که میخواهید در سایت قرار دهید را خودتان تعیین کنید سایت های مختلف به نوع محتوای متفاوت نیاز دارند؛ Toolset به شما این امکان را می دهد که دقیقاً همان نوع محتوایی را که میخواهید، به کار ببرید و بین آن ها ارتباط ایجاد نمایید. 2) قالب (Template) و View اختصاصی طراحی کنید افزونه نمایش تمامی توابع وردپرسی Toolset کار طراحی قالب ها، آرشیوها و لیست ها را برای انواع محتوا، آسان کرده است. شما می توانید با HTML و یا با استفاده از صفحه ساز های خودکار، قالب های خود را طراحی کنید. تقریباً در […]
افزونه چت واتساپ whats app وردپرس افزونه چت واتساپ whats app وردپرس به شما این امکان را می دهد که تجربیات لذت‌بخش چت کردن در واتساپ را در سایت خود پیاده‌سازی کنید. استفاده از این افزونه یکی از بهترین روش‌های ارتباطی و ارتباط با مشتری است که به طور مستقیم کاربران سایت را پشتیبانی کرده و همچنین در ذهن مشتری ایجاد اعتماد و وفاداری نمایید. موقعیت های مختلف نمایش افزونه چت واتساپ با تیم پشتیبانی شما میتوانید در موقعیت مختلف سایت وردپرسی خود، از پشتیبان های آنلاین استفاده کنید. نمايش در ويجت های قالب: نمايش در صفحات محصول ساخته‌شده در ووکامرس: دکمه‌های سفارشی و شورت کدها: امکانات بی نظير افزونه چت واتساپ whats app وردپرس افزونه چت واتساپ حساب‌های چندگانه را پشتیبانی میکند: به شما اجازه می دهد که تلفن واتساپ تمام کارمندان خود را بصورت شکیل و در یک باکس درکنار هم بگذارید. کارمندان شما با هر پست یا سمتی که در شرکت شما دارند برای بازدیدکنندگان وبسایت قابل مشاهده هستند و مشتری با هر شخص یا بخشی که مایل است می‌تواند در واتساپ چت و گفتگو نماید. بازدیدکنندگان با تنظیمات سفارشی شما می‌توانند متوجه شوند که چه شخصی آنلاین و چه کسانی آفلاین هستند. حتی می‌توانند با برنامه‌ریزی شما در این پلاگین ببینند که مثلاً بخش پشتیبانی شما چه روزهایی و در چه ساعاتی […]
دانلود مگا منو سریع و سبک mega menu یک منو وردپرس مگا است که اجازه می دهد تا شما به راحتی منو را در پروژه تم خود را ادغام کنید. این افزونه به شما امکان می دهد منوهای مگا، منوهای زبانه و منوهای کاروئلاست را به صورت ساده و بومی تبدیل کنید و منوی موجود خود را به یک ابزار قدرتمند تبدیل کنید. سیاراین وردپرس مگا منو یک منو پاسخگو است، به این معنی که طرح مناسب تمام اندازه صفحه نمایش است. با این وجود، تفاوت با سایر گزینه ها این است که رویدادهای صفحه لمسی بطور بومی فعال شده و تجربه کاربر را در صفحه نمایش لمسی بطور قابل توجهی بهبود می بخشد. چیدمانما همچنین باید انواع طرح های در دسترس را که این منو مگا وردپرس را بر جایگزین های دیگر برجسته می کنند ذکر می کنیم. این اولین مگا منو است که همه در یک راه حل است، به عنوان شما می توانید یک منوی افقی یا عمودی را در دستگاه های دسکتاپ و منوی کشویی یا غیرفعال در تلفن همراه ایجاد کنید. کشیدن و رها کردنپنل مدیریت کشیدن و رها کردن یکی دیگر از ویژگی های کلیدی است که این مگامنای را برجسته می کند. از پانل مدیریت منو بومی می توانید تمام محتوای مگامنام خود را با استفاده از یک رابط کشیدن و رها کردن […]
استایل و زیبا سازی سبد فروش edd وردپرس به وسیله فایل زیر میتوانید افزونه قدرتمند easy download digital را زیبا کنین و استایل زیبایی به اون بدین و فروشتون را چند برابر کنین: فرم ارسال آسان دیجیتال فرم پرداخت بسیار آسان است! کنترل کامل از یک ظاهر طراحی شده با گزینه های مختلف و پیش نمایش زنده زمانی که شما را تغییر دهید. این افزونه نیاز به پلاگین دانلود Easy Digital Downloads دارد. Easy Digital Downloads یک راه حل کامل تجارت الکترونیک برای فروش محصولات دیجیتال در وردپرس است. شروع : این 6 مرحله ساده را برای ساخت فرم های زیبا دنبال کنید. مرحله # 1: → نصب / فعال کردن دانلود آسان دیجیتال. دریافت آسان دیجیتال دانلود مرحله 2: → ایجاد دانلودها و انتشار آنها. مرحله 3: → یک صفحه ایجاد کنید که در آن می توانید از کد کوتاه استفاده کنید [download number = “12” column = “4”]. مرحله 4: → به صفحه پرداخت که میخواهید سبک بروید بروید. مرحله 5: → حالا، این صفحه را مشاهده کنید و روی لینک «سفارشی کردن» در نوار مدیریت WordPress در بالای صفحه کلیک کنید. مرحله 6: → مشاهده و باز کردن Checkout Styler برای پانل EDD و سفارشی کردن صفحه پرداخت خود را. این همه! تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
طراحی ست اداری شرکت بازرگانی ایراکو طراحی ست اداری،طراحی سربرگ،طراحی کارت ویزیت،طراحی پاکت نامه، شرکت بازرگانی ایراکو توسط تیم طراح گرافیک وب یار انجام شده است. طراحی ست اداری شرکت بازرگانی ایراکو با رنگ بندی قرمز و مشکی و طرحی ساده و سنگین مناسب برای شرکت بازرگانی فعال در زمینه صادرات و واردات و گمرک و همکاری با عراق میباشد. طراحی ست اداری با تصاویر مرتبط به معرفی خود پرداخته و آدرس و شماره تلفن خود را درج نموده است. سفارش طراحی ست اداری،شامل طراحی کارت ویزیت،طراحی پاکت نامه،طراحی سربرگ،طراحی آرم و لوگو اختصاصی با طرح سفارشی شما صورت میگیرد. شما میتوانید سفارش طراحی ست اداری خود را به تیم و ب یار داده تا بار دیگر به صورت حرفه ای در میان رقبایتان بدرخشید. جهت سفارش ست اداری، شرکتی، صنعتی، خدماتی خود با ما در تماس باشید. طراحی ست اداری شرکت بازرگانی ایراکو5 (100%) 1 vote[s]
طراحی ست اداری شرکت آواسنگ طراحی ست اداری،طراحی سربرگ،طراحی کارت ویزیت،طراحی پاکت نامه، شرکت آواسنگ توسط تیم طراح گرافیک وب یار انجام شده است. طراحی ست اداری شرکت آواسنگ با رنگ بندی شکیل و طرحی ساده و سنگین مناسب برای شرکت صنعتی فعال در زمینه محصولات و صنعت سنگ میباشد. طراحی ست اداری با تصاویر مرتبط به معرفی خود پرداخته و آدرس و شماره تلفن خود را درج نموده است. سفارش طراحی ست اداری،شامل طراحی کارت ویزیت،طراحی پاکت نامه،طراحی سربرگ،طراحی آرم و لوگو اختصاصی با طرح سفارشی شما صورت میگیرد. شما میتوانید سفارش طراحی ست اداری خود را به تیم و ب یار داده تا بار دیگر به صورت حرفه ای در میان رقبایتان بدرخشید. جهت سفارش ست اداری، شرکتی، صنعتی، خدماتی خود با ما در تماس باشید. طراحی ست اداری شرکت آواسنگ5 (100%) 1 vote[s]