آگاهی از تکنولوژی های بکار رفته در هر صفحه وب بدون هیچ تخصصی
بدون هیچ وقت تلف کردن و دانش خاصی از سیستم های مدیریت محتوا و تکنولوژی های استفاده شده در یک وب سایت اطلاع پیدا کنید...
۲۴ ابزار مفید برای انتخاب و یا بررسی دامنه وب سایت
انتخاب یک دامین خوب آسان نیست، اما با ابزار های آنلاینی که در این پست به شما معرفی می شود می توانید خودتون از عهده انتخاب و مدیریت یک دامنه بر آیید...
چگونه از خوانده شدن ایمیل های مهمی که می فرستیم باخبر شویم
ممکن است برای هر فردی موقعیت هایی بوجود بیاد تا ایمیل های خاص و مهمی رو بفرسته و هر لحظه منتظر خونده شدن آن توسط طرف مقابل یعنی گیرنده و جوابش باشه، مثلا: پروپوزال های دانشجویی رو واسه اساتید فرستادن و ... برای اینکه بفهمیم نامه هایمان خونده شده یا نه با ما همراه باشید ...
منابع آزمون کارشناسی ارشد ۶ گرایش مهندسی برق + ۴ گرایش مهندسی فناوری اطلاعات
مخابرات، الکترونیک، قدرت، کنترل، مکاترونیک و بیوالکترونیک از گرایش های برق و تجارت الکترونیک، امنیت اطلاعات، شبکه های کامپیوتری و مهندسی فناوری اطلاعات از گرایش های آی تی
جلوه گوشه گرد div ها در طراحی صفحه وب
نحوه طراحی وب، استفاده به جا از تصاویر و جلوه های ویژه عامل مهمی در جلب توجه بازدید کننده و حفظ آن است. اگر کاربر وب از جلوه بصری بکار رفته و محتوا راضی باشد حتما باز هم سراغ آن صفحه وب خواهد رفت. با ما همراه باشید ...
ثبت سایت در موتور های جستجو
اکثر ترافیک وب سایت ها از دل جستجو های اینترنتی بدست می آید، بنابراین ثبت درست آدرس صفحه وب در موتور های جستجو ضروری می باشد.
چشم انداز فناوری اطلاعات: سبکی نو از علم و فناوری

جلوه گوشه گرد div ها در طراحی صفحه وب

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

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

۱. اولین روش استفاده از تصویری ثابت با قابلیت افزودن نوشته داخل آن مثل یک جعبه ( این تصویر) است، اولین روش نقص های زیادی دارد، باید حواسمان به طول و عرض تصویر با گوشه گرد بک گراند شده باشد، نباید تعداد کلماتی که اضافه می کنیم از حدی فراتر رود، در ضمن کد های بکار رفته احتمالا در همه مرورگر ها نمایش یکسانی نخواهد داشت. یعنی این کد ها:


<div style= background-image: url('/rounded_fixed.gif'); width: 228px; height: 160px; padding: 10px; >
Some content. Some content. Some content.
Some content. Some content. Some content.
Some content. Some content. Some content.
</div>

توضیح اینکه باید آدرس تصویر را مشخص کرد و به تنظیمات طول و عرض هم توجه داشت. بجای some content باید متن یا کد دلخواه رو نوشت.

۲. استفاده از تصویر تنها در بالا و پایین جعبه دایو و افزودن نوشته و یا کد وسط آن و border بندی حاشیه راست و چپ متناظر با تصویر بالا و پایین.
کد ها بصورت زیر هستند:


<div style= width: 248px; >
<div style= background-image: url('/rounded_top.gif'); height: 20px; ></div>
<div style= border-left: 2px solid #B5B5B5; border-right: 2px solid #B5B5B5; padding: 10px; >
Some content. Some content. Some content.
Some content. Some content. Some content.
Some content. Some content. Some content.
</div>
<div style= background-image: url('/rounded_bottom.gif'); height: 20px; ></div>
</div>

البته می شود برای محتوای جعبه رنگ پس زمینه هم تعیین کرد. رنگ پس زمینه مطابق با تصاویری که من مشخص کردم #F8F8F8 هست و با افزودن کد background-color: #F8F8F8 می شه اینکارو کرد.

rounded upper

rounded lower

تصاویری که می شود در بالا و یا پایین جعبه افزود و برای دیدن دموی این طرح هم ساید بار پوسته اینجا را ببینید. (اگر الآن نمی بینید بخاطر تغییرات جدیدتر پوسته اینجاست، احتمالا)

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


<style type= text/css >
.round_corners .line_1,
.round_corners .line_2,
.round_corners .line_3,
.round_corners .line_4,
.round_corners .line_5 {
	line-height: 0px;
	font-size: 1px;
	overflow: hidden;
}
.round_corners .line_1 {
	margin-left: 6px;
	margin-right: 6px;
	background-color: black;
	height: 1px;
}
.round_corners .line_2 {
	margin-left: 4px;
	margin-right: 4px;
	border-left: 2px solid black;
	border-right: 2px solid black;
	height: 1px;
}
.round_corners .line_3 {
	margin-left: 3px;
	margin-right: 3px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	height: 1px;
}
.round_corners .line_4 {
	margin-left: 2px;
	margin-right: 2px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	height: 1px;
}
.round_corners .line_5 {
	margin-left: 1px;
	margin-right: 1px;
	border-left: 1px solid black;
	border-right: 1px solid black;
	height: 2px;
}
.round_corners .content {
	border-left: 1px solid black;
	border-right: 1px solid black;
	padding: 10px;
}
</style>

استایل در وردپرس و ویرایشگر پوسته فایل جداگانه ایست در سایر سیستم های مدیریت محتوا اگه به کد های کامل پوسته دسترسی دارید قبل از تگ پایانی استایل قرار دهید.

round corners scheme

تصویر مطمئنا همه چی را توضیح می دهد. در فایل استایل ما ۵ خط تعریف شده ولی تصویر ۶ خط را نشان می دهد عیبی ندارد بستگی به خودتان دارد می توانید این لاین ها را اضافه یا کم کنید.

لاین ها دارای رنگ می باشند با سلیقه خودتان می تونید پس زمینه و داخل هر لاین را رنگی کنید و پس زمینه داخل جعبه را هم مثل قسمت ۲ از همان روش استفاده کنید.

در نهایت هم کد های زیر را هر جایی که نیاز به دایوی با گوشه گرد داشتید قرار بدید.


<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>Content</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

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

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

من یک طراح وب نیستم و فقط بر حسب تجربه و جستجو هست که دستی در طراحی داریم پس این مقاله را از دید یک طراح واقعی نبینید.

آخرین ویرایش ۰۹ جولای ۲۰۱۱

  • Unknown Unknown

    روش‌هایی که شما معرفی کردید خوب بودند.
    ولی به نظر من بهتر هست که آدم از استانداردها استفاده کنه تا اینکه بخواد برای هر جوری شده برای همه‌ی مرورگرها سازگار باشه.
    آخرین استانداردی که هست برای CSS3 است که قرار شده از border-radius برای ایجاد گوشه استفاده بشه. در حال حاضر مرورگر اپرا و گوگل کروم از این دستور پشتیبانی می‌کنند.
    برای فایرفاکس و سافاری هم که همونطور که خودتون می‌دونید از -moz-border-radius و -webkit-border-radius استفاده می‌شه.
    راستی یه سایت جالب هم هست که به گفته‌ی خود طراح سایت برای ایجاد گوشه‌های گرد برای افراد تنبل هست :دی می‌تونید از اینجا سری بهش بزنید: http://border-radius.com

    • Unknown Unknown

      درود بر جناب معلمی
      آری گفته تان کاملا صادق است و من هم در آخرین گزینه این مطلب به استاندارد جدید css اشاره کردم.
      moz-border-radius استاندارد موزیلاست
      webkit-border-radius هم استاندارد کروم، اپرا و احیانا سافاری است
      اما چون در طراحی های خودم از این استایل ها تا به حال استفاده نکردم توضیح کاملی ندادم.

شما می‌توانید دیدگاه‌های این مطلب را دنبال کنید، بوسیله‌ی RSS 2.0 خوراک.