محبوبترینها
از کجا بفهمیم قاشق چنگال اصل است | قاشق چنگال تقلبی نخرید!
با چاپ روی وسایل یک کسب و کار پرسود بسازید
قیمت دیگ بخار و تولیدکننده اصلی دیگ بخار
معروف‌ترین هدیه و سوغاتی یزد مشخص شد!
آشنایی با انواع دوربین مداربسته ضد آب
پرداخت اینترنتی قبوض ساختمان (پرداخت قبض گاز، برق و آب)
بهترین دوره آموزش سئو محتوا در سال 1403 با نام طوفان ۱۴۰۳ در فروردین ماه شروع می شود
یک صرافی ارز دیجیتال چه امکاناتی باید داشته باشد؟
تعمیرگاه مجاز تعمیر ماشین لباسشویی در شرق تهران
تعمیرگاه مجاز تعمیر ماشین لباسشویی در شرق تهران
جراحی و درمان ریشه دندان عفونی با خانم دکتر صفوراامامی
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1799198096
بفرمایید کمی Css!(طراحی قالب بر پایه ی سی اس اس) -
واضح آرشیو وب فارسی:سایت ریسک: بفرمایید کمی Css!(طراحی قالب بر پایه ی سی اس اس) Webber 16 خرداد 1387, 12:29با عرض سلام خدمت همه ی دوستان همانطور که می دونید طراحی صفحات وب با استفاده از جدول(Table Basesd) کم کم جایش را به طراحی بر پایه ی css یا CSS Based می دهد.احتمالا بسیاری از دوستان مایلند با این روش کار کنند یا آشنایی نسبی با آن را بدست آورند.بسیاری هم فکر می کنند که این روش خیلی(شاید هم خیلی خیلی ) سخت باشد.چند وقت پیش یکی از دوستان همینجا مشکل با جدول داشتند ولی با استفاده از چند خط CSS به جای جدول مشکلشان به راحتی حل شد.پس اصلا نگران سختی CSS نباشید،چون خیلی زود باهاش دوست خواهید شد.در ضمن این روزها CSS تبدیل شده به آش خاله یا چیزی تو مایه های شتر که در خونه ی هر طراح وبی می خوابه.به هر حال این مبحث یک آموزش قدم به قدم، نه مرحله ای،جالب است با موضوع: طراحی یک قالب بر اساس CSS اگر از این موضوع استقبال شه،حتما هر هفته یک قدم دیگر بر می داریم تا آخر. حالا طراحی یک قالب صفحه ی وب بر اساس CSS - قدم اول همانطور که قبلا هم اشاره شد این شروع یک مقاله ی قدم به قدم در مورد ساخت قالب بر پایه ی CSS می باشد.این مقاله از چند بخش مختلف تشکیل شده است. بخش اول چگونگی ساخت دکمه های ناوبری(Navigation Buttons) در *Photoshop CS را شامل می شود.دومین بخش هم چگونگی ساخت پس زمینه(Background)،بعد بحث روی سرصفحه(Header) و شکل بندی(Layout) صفحه ی وب و در آخر هم که اجرا روی CSS و XHTML می باشد. حالا شاید این سوال برای شما پیش بیاید که چرا ما در اول بسم الله،با ساخت دکمه های ناوبری شروع کردیم.اما منظور ما ابتدا این بود که با این کار یک آموزش کوچولو در مورد ساخت این دکمه ها بدهیم.ولی یک مرتبه فکری به سرم زد و آن اینکه چرا این مبحث را کاملتر نکنیم. ساختن یک دکمه ی ناوبری با بخش شیشه ای انحنا دار یک صفحه ی RGB باز کنید.با سایز 172 * 22px و پس زمینه ی سفید.یک لایه ی جدید ایجاد کنید و نامش را button بگذارید،سپس آن را با رنگ ececec# پر کنید.حالا یک لایه ی جدید با نام highlight بسازید.یک خط سفید با پهنای 1px در طرف بالا و چپ بکشید(با استفاده از ابزار pencil و طول 1px).یک محو شدگی تدریجی در گوشه ی چپ پایین با استفاده از ابزار Erase ایجاد کنید.(brush,20px,50% opacity). حالا یک لایه ی جدید بسازید(با نام bullet).با استفاده از ابزار Pencil چند مربع کوچک 1px ی رسم کنید(1px, #727272).البته می توانید با خلاقیت خود یک شکل زیباتری به آن بخشید. حالا با کشیدن یک مسیر(d 6d 6d 6#)بویسله ی ابزار Pen ،یک افکت شیشه ای اریب(Glassy Bevel Effect) ایجاد نمایید. تبریک می گم.شما دکمه ی خود را ساختید! ساختن افکتی که جایگزین دکمه ی اصلی هنگام نشانه روی توسط موس شود(Creating the rollover effect) برای ایجاد این افکت از صفحه ی بالا یک کپی(Duplicate) ایجاد کنید(برای این کار روی نوار عنوان صفحه راست کلیک کنید و Duplicate... را انتخاب نمایید).روی لایه ها راست کلیک کنید و مقدار Color Overlay را برای هر کدام به صورت زیر تغییر دهید: پس زمــینه ی دکـــــمه:#bfe3ff افکت شیشه ای اریب:#a 5d 1f3 مربع های پیکـــسلی:#e4001b *همانطور که می بینید،برای انجام اولین قدم باید اطلاعات پایه ای از PS داشته باشید. خوب این اولین قدم بود.امیدوارم استفاده کرده باشید.اگر مشکلی بود لطفا همین جا بفرمایید.منتظر نظرات همه هستم. موفق باشید Webber 18 خرداد 1387, 16:19سلام با توجه به استقبال زیاد دوستان تصمیم گرفتم،قسمت دوم مقاله را زودتر ترجمه کنم.امیدوارم مورد استفاده قرار گیرد. امروز قدم دوم را در مورد ساخت قالب بر پایه ی CSS بر می داریم.بخش امروز مربوط می شود به چگونگی انتخاب یک طرح رنگی خوب و جالب و ساختن یک الگوی پس زمینه(Background Pattern) خوب برای صفحه ی وبمان. چنانچه همه ی شما می دانید،قصد اولیه ی من دادن یک یادگیری کوتاه در مورد نحوه ی ساختن یک دکمه ی شیشه ای بود تا شما بتوانید تا شما بتوانید از راحتترین راه این کار را انجام دهید(البته راه های راحتتر از این هم هست که احتمالا در آخر به آن می پردازیم).می تواند برای شما کمی عجیب باشد که چرا ما قبل از ساختن دکمه و پس زمینه و ...،در دومین بخش از این سری مقالات،در مورد انتخاب طرح رنگی(Color Scheme) وبسایت فکر می کنیم.این در واقع باید اولین قدم ما باشد.بعد از آن می توانیم دکمه ها و بقیه ی اجزای گرافیکی را بسازیم. انتخاب طرح رنگی خود بهرحال شاید یک پس زمینه ی ذهنی در مورد موضوع امروز دارید.انتخاب رنگ های صحیح برای وبلاگ خود،یک مسئله ی شخصی است و می تواند بازتاب این باشد که شما چگونه انسانی هستید و چه افکاری دارید؟؟ در واقع توضیح دادن به شما که چگونه انتخاب کنید،معمولا غیر ممکن است.با این حال چند نکته است که من سعی می کنم همیشه به آنها عمل کنم: لا اقل از یک رنگ contrast یا highligh برای دادن تایید و اهمیت به صفحه ی خود بهره ببرید.از آن رنگ برای لینک های متنی خود استفاده کنید.بدین گونه آنها خیلی قابل رویت تر می شوند. مطمئن شوید که از رنگ های گوناگون و زیاد در صفحه ی خود استفاده نمی کنید.وگرنه در پایان با یک طرح بندی نامنظم و زشت روبرو خواهید بود.من در بیشترین حالت،از 3 رنگ استفاده می کنم.2 واحد رنگ تیز و نافذ(subtle) و یک رنگ هم برای تاکید(highlight). از این دو رنگ من از بین تاریکترین و روشنترین شون استفاده می کنم.اگر شما کمتر از 3 رنگ استفاده می کنید،احتمالا نگاه کردن به آن زودتر خسته کننده می شود.گرچه اگر درست و به اندازه ی کافی از اختلاف رنگ ها استفاده کرده باشید،می توانید نتیجه ی دلچسب تری هم بگیرید.این می تواند درست عمل کند،اگر شما به دنبال ساده سازی هستید. می توانید در PS به (Hue/Saturation (control+u بروید و اختلاف رنگ های مورد نظر خودتان را مشاهده کنید.در حقیقت تمام مثالهای بالا از این راه ایجاد شده اند.شروع کنید و با استفاده از این راه به 3 دیگر دست یابید. اگر باز هم در مورد رنگ ها و مفهومشان مشکلی دارید،توصیه می کنم به ایـــــن ()لینک بروید. وقت آن رسیده که تعدادی از الگو ها را رسم کنیم حالا زمان طراحی پیکسلی است!با یک صفحه به اندازه ی 30*30px شروع کنید،RGB و رنگ پس زمینه انتخاب شما.تعدادی نقطه ی پیکسلی با استفاده از ابزار pencil در PS رسم کنید.در اینجا تعدادی مثال می اوریم که شما می توانید از آنها شروع کنید. این نمونه های بزرگنمایی شده،در حقیقت الگوهای اصلی ما هستند.از طرف راست بریده شده اند و وقتی کنار هم قرار می گیرند و تکرار می شوند،یک طرح یکپارچه می سازند.گاهی اوقات سخت ترین بخش محاسبه ی طرف راست الگو برای چیدن است تا هنگامی که کنار هم قرار می گیرند،طرحی یکپارچه و درست نمایش یابد.یک راه برای انجام راحتتر این کار این است که از rectangle Selection tool استفاده کنیم و یک مربع بکشیم.(برای کشیدن مربع کلید shift را پایین نگه می داریم)از گوشه ی بالا چپ به گوشه ی پایین راست الگو.حالا به منوی image بروید و crop را انتخاب کنید.بعد به منوی edit بروید و Define pattern را انتخاب نمایید و یک نام برایش بگذارید.حالا شما نیاز دارید که الگوی خود را امتحان کنید.یک صفحه ی جدید 300*300 پیکسل باز کنید و تمام صفحه را انتخاب کنید.حالا از منوی edit گزینه ی fill را انتخاب کنید.در لیست use گزینه ی pattern را انتخاب کنید و در پایین الگوی خود را انتخاب نمایید.حالا Ok را کلیک کنید و نتیجه را ببینید. بخش بعدی در مورد استخوان بندی(framework) و طرح بندی (layout) خواهد بود.بر روی چگونگی ساخت یک هدر و عنوان زیبا و جذاب تمرکز خواهیم کرد. امیدوارم از این بخش لذت برده باشید ;) Webber 02 تير 1387, 11:49سلام دوستان باید ببخشید چون من قول داده بودم حداکثر هفته ای یه مبحث جدید بذارم ولی نشد از امروز سعی می کنم این طوری بشه. این قدم 3 است که برمی داریم.البته در منبع بحث سوم رو skip کردیم و به سراغ 4می رفتیم چون کلا زیاد به درد بخور نبود و من هم چیز زیادی ازش نفهمیدم!به جاش در آخر یه مبحث به درد بخور می ذاریم.البته من این ها را فقط برای خودم نمی ذارم و امیدوارم دوستانمون هم استفاده کنند.به هر حال میریم سراغ بخش سوم: ---------- امروز به سراغ بخش سوم مباحث آموزش CSS می رویم.بخش های قبلی در بالا در دسترس هستند.در این قدم ما بر روی تکه تکه(slicing) و قرار دادن بخش های مختلف در DIV متمرکز خواهیم شد. حالا سوالی که به پاسخ آن نیاز داریم،این است که بخش های مختلف طراحی ما شامل چه بخش هایی می باشد؟تفاوت اجزای صفحه در چیست؟اگر شما یک طراح وب باشید،پاسخ برای شما راحتتر خواهد بود چرا که شما در مورد قدمی بعدی که تقسیم کردن در داخل Div های جداست( البته بدون جدول) فکر می کنید.با CSS و XHTML می نه تنها صفحات سبک ایجاد می کنیم بلکه صفحات ما بسیار انعطاف پذیرتر(flexible) و در دسترس تر(accessible) خواهند بود. چگونه نواحی(areas) و اجزا(components) ی صفحه یا هر چیزی که شما اسمش رو می گزارید را تشخیص دهیم؟ 1.چپ(the left) 2.محتویات(the content) 3.سرصفحه(the header) ایجاد gifs و jpgs ایــــنجا ()عناصر مختلفی وجود دارد که شما نیاز دارید آن ها را به صورت JPG یا GIF در آورید: 1. header 2. bg_navbutton 3. bg_navbutton_over 4. bullet_extlink 5. bullet_title بسیار خوب،احتمالا شما فکر می کنید،"پس زمینه چه خواهد شد؟"شما درست فکر می کنید،اینجا لیست نشده است چون به کمی توضیح نیاز دارد.ما یک راه حل تر و تمیز و هوشمندانه (smart solution)می خواهیم تا اگر صفحه ی مرورگر بزرگتر شد،محتویات صفحه در مرکز قرار گیرند.شما باید پس زمینه ای مثل ایـــن () ایجاد کنید.این 1600px عرض و 5px ارتفاع دارد. پیاده سازی پس زمینه در صفحه با استفاده از CSS این کدی است که ما بدان نیاز داریم تا تصویر پس زمینه را به صفحه اعمال کند،آن هم در مرکز: body { background: #F7F7F6 url(images/background.gif) repeat-y 50% 0; background-attachment: fixed; } پس زمینه ی ما،5px ارتفاع دارد که به صورت عمودی تکرار می شود(repeat-y) و تکرار از بالای(0) پنجره ی مرورگر به صورت افقی شروع می شود و طوری که مرکز تصویر در مرکز صفحه(50%) قرار گیرد.Background-attachment: fixed به این معنی است که تصویر پس زمینه به همراه پیمایش(scroll) محتویات صفحه،پیمایش نشود.ما از تگ body به عنوان انتخابگر(selector) استفاده کردیم(به این معنی که کد CSS ما بر روی محتویات این تگ اعمال می شود یعنی کل صفحه). می توانید نتیجه را ایــــنجا () مشاهده نمایید. اضافه کردن اولین طرح بندی مان با استفاده ازDIV حالا ما می خواهیم اولین طرح بندی را با استفاده از ظرف (DIV(Div container اضافه کنیم(البت با اجازه ی شما):سرصفحه ی ما،سمت چپ(قسمتی که منو قرار می گیرد) و بخش محتویات. این CSS برای سر صفحه ی ماست: #header { text-align: center; } حالا ما از یک انتخابگر id برای ایجاد div محتوی header استفاده می کنیم.یک انتخابگر id همیشه فقط بر روی یک عنصر صفحه اعمال می شود.یک صفت(attribute) باید در داخل یک صفحه ی وب منحصر به فرد باشد(مثلا در داخل یک صفحه نمی شود دو تگ div،دارای یک id باشند).سرصفحه ی ما نیاز دارد که در مرکز قرار گیرد.به همین خاطر از text-align: center استفاده کردیم.این خط به کد ما در body اضافه می شود: <div id="header"><img src="images/header.jpg" alt="My blog" width="692" height="90" /></div> شما خواهید دید هنگامی که ما تصویر header را اضافه می کنیم،کاملا به بالای صفحه نمی چسبد و کمی فاصله دارد. به خاطر همین ما "margin: 0" , "padding: 0" را به انتخابگر تگ body اضافه می کنیم: body { background: #F7F7F6 url(images/background.gif) repeat-y 50% 0; background-attachment: fixed; margin: 0; padding: 0; } نتیجه را می توانید ایـــنجا () مشاهده کنید. اگر با CSS آشنایی ندارید و کدها برای شما تازگی دارد ، ایـــــن مقدمه ی کامل برای CSS می تواند ،فهم خوبی نسبت به کد ها به شما بدهد. --- می بخشید که کد ها به هم ریخته شده،به امید روزی که تمام سایت ها،با تمام مرورگرها سازگار شوند.:sad: --- موفق باشید (; Webber 08 تير 1387, 17:49عرض سلام و ادب خدمت همه ی دوستان خوشحالم که اینبار تونستم به قولم عمل کنم.بخش چهارم این سری مقالات آموزش طراحی قالب بر پایه ی CSS تقدیم شما: ------- در بخش قبلی(در بالا) یک کد CSS اولیه را تکمیل کردیم.در این بخش از مباحث خواهیم دید که چگونه منوی ناوبری(navigation) را در سمت چپ قرار می دهیم . هنگام ایجاد صفحات وب،ما همیشه می دانیم که باید صفحات در دسترس و قابل قبولی ایجاد کنیم.در قدم قبلی کسی به ما تذکر داد که استفاده از عنصر h1 برای سرصفحه ی اصلی می تواند بهتر باشد چون این کد معنادار تر است و سایت ما را برای موتورهای جستجو و همچنین مردمی که مخالف CSS هستند،در دسترس تر(accessible) می سازد.بدون شک این برای چشم انداز،بیش از حد مهم است.به همین خاطر ما کد خود را برای این راه،تغییر دادیم. تکنیک جایگزینی تصویر صفحه ی وب میزان شده () این تکنیک در واقع،تکنیک جایگزینی تصویر(image replacement technique) ()نامیده می شود.در این روش ما از متن به جای تصویر واقعی در کد HTML خود استفاده می کنیم.تصویر پس زمینه ("(background: url(images/header.jpg") در مرورگرهایی که CSS را پشتیبانی می کنند،نمایش داده خواهد شد و متن پنهان خواهد بود(text-indent: -9999px").چون که کد CSS ما،متن را بیرون از فضای قابل رویت قرار می دهد.اما در عوض در مرورگرهای قدیمی یا در صفحه خوان ها(screen readers که مردم نابینا استفاده می کنند) شما خواهید توانست متن سرصفحه را مشاهده کنید.از این راه ما می توانید کد و سایت خود را بسیار بیشتر در دسترس کنیم. h1 { width: 692px; height: 90px; text-indent: -9999px; background: url(images/header.jpg); margin: 0; padding: 0; } عرض(width) و ارتفاع(height) برای تعیین فضا برای عکس پس زمینه ی ما واجب هستند(احتمالا همانطور که می دانید دادن پس زمینه به یک تگ مثلا div ،تاثیری در تغییر اندازه آن تگ ندارد،بر عکس قرار دادن مستقیم عکس با Img) .خصوصیت های "padding:0" و "margin:0" مورد نیاز ما هستند برای اینکه مطمئن شویم تصویر ما به صورت مطلوب و دلپذیر در بالای صفحه قرار می گیرد.به علاوه،من "text-align: center" را به انتخابگر تگ body منتقل کردم،چون محتویات صفحه ی ما باید در وسط صفحه قرار گیرند.به هر حال،محتویاتی که در داخل container قرار می گیرند نباید در مرکز موقعیت دهی شوند بنابراین ما "text-align: left" را اینجا اضافه می کنیم.ظرف (container) ما "margin: 0px auto" دارد که این هم باعث خواهد شد در بالا ترین(0px) نقطه ظاهر شود و در مرکز(auto). راهنمایی:ترتیب مقادیر خصوصیت margin margin: top right bottom left ----- راهنمایی:چه موقع از انتخابگر id و چه موقع از انتخابگر کلاس و چه موقع از انتخابگر مفهومی استفاده کنیم؟ *اگر بخواهیم یک سبک(قطعه کد CSS) را به دو یا بیشتر تگ اختصاص دهیم،باید از انتخابگر کلاس استفاده کنیم. *اگر بخواهیم یک سبک را به تعدادی تگ یکسان اختصاص دهیم،به گونه ای که تمام آن ها تحت تاثیر قرار گیرند.مثلا تمام لینک های داخل یک div. از این نوع انتخابگر استفاده می کنیم.(مفهومی) *اگر بخواهیم یک سبک را به یک تگ خاص در صفحه اختصاص دهیم،از این نوع انتخابگر استفاده می کنیم.چون صفت id را نمی توان برای بیش از یک تگ بکار برد و منحصر به فرد است. تکمیل کردن بخش ناوبری(Implementing the navigation) برای قرار دادن دکمه های بخش ناوبری(که هدایت بازدید کننده در سایت را بر عهده دارند) در سمت چپ،ابتدا یک ظرف با id برای نگهداری محتویات در چپ ایجاد می کنیم: #left { width: 178px; } عجالتا تنها چیزی که ما برای تعریف نیاز داریم عرض آن هست.در داخل این نگهدارنده ی چپ(left container) ما یک div با برای نگهداری منوی ناوبری داریم که چون در صفحه فقط یک منوی ناوبری وجود دارد از انتخابگر id استفاده و آن را navcontainer نامیده ایم.بهترین راه برای ایجاد یک منوی ناوبری بوسیله ی CSS،استفاده از لیست های HTML و ایجاد سبک های CSS برای تغییر ساختار آن ها است.همچنین از "#" به عنوان لینک های مصنوعی استفاده شده است. <div id="navcontainer"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About me</a></li> <li><a href="#">Contact me</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Photo roll</a></li> </ul> </div> این یک لیست ساده را ایجاد می کند.از آنجایی که ما به جای گلوله های لیست ،دکمه های زیبا و دلپسند می خواهیم،ما این گلوله ها را با CSS خودمان حذف خواهیم کرد و به جای آنها از تصاویر پس زمینه استفاده خواهیم کرد.این کد CSS ماست: #navcontainer { width: 178px; } #navcontainer ul { margin: 0; padding: 0; list-style-type: none; font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif; text-indent: 20px; letter-spacing: 1px; border-bottom: 1px solid #fff; } بخش اول از کد،عرض نگهدارنده ی منوی ناوبری را مشخص می کند.بخش دوم،تگ ul را در داخل navcontainer برای ما معین می کند."margin:0" و "padding:0" ما را مطمئن می سازد که هیچ فاصله ای بین و اطراف دکمه ها نخواهد بود و فاصله ها را از اطراف حذف می کند."list-style-type: none" هم گلوله های استاندارد لیست های HTML را حذف می کند.بعد ما خصوصیات متن منوی ناوبری را داریم و آخرین خط کد،یک خط سفید در پایین منوی ما ایجاد می کند تا پایان زیبایی به آن بدهیم.:) #navcontainer a { display: block; width: 178px; height: 22px; } این کد،تگ "a" یا تگ لینک را در داخل نگهدارنده ی "navcontainer" معین می کند که بر تمام دکمه های ناوبری ما تاثیر می گذارد(یک انتخابگر مفهومی).ابتدا ما "display: block" را داریم.Display تعیین می کند که چگونه یک عنصر نمایش یابد.در اینجا مقدار "block" تعیین شده است که برای تبدیل لینک های ما به بلاک های واقعی یا دکمه های واقعی،مورد نیاز هستند.پایین تر از ان نیز ما عرض و ارتفاع هر دکمه را تعیین کرده ایم.برای رسیدن به حالت Rollover(حالتی که با رفتن موس روی یک دکمه،رنگش تغییر کند) می توان عناصر داخل یک لیست را با استفاده از display: block به بلاک تبدیل کرد و با استفاده از کلاس کاذب a:hover رنگ یا تصویر پس زمینه ی دکمه را عوض کرد.کدی که به نظر می آید این گونه است: #navcontainer a:link, #navcontainer a:visited { background: url(images/bg_navbutton.gif); color: #5C604D; text-decoration: none; } #navcontainer a:hover { background: url(images/bg_navbutton_over.gif); color: #A 5003B; text-decoration: none; } color رنگ متن دکمه را تعیین می کند و "text-decoration: none" خط پیش فرضی که زیر لینک ها قرار می گیرد،پاک می کند. همیشه لازم است که شما ناوبری خود را تمیز و ساده ایجاد کنید.برای همین یک کد اضافی اضافه می کنیم تا دکمه ای را که لینک صفحه ی فعلی را دارد،متفاوت از بقیه نمایش یابد تا کاربر بداند در کدام صفحه است.من آن را "current" نامیدم و کد CSS آن به این صورت است: #navcontainer li a#current { background: url(images/bg_navbutton_over.gif); color: #A 5003B; text-decoration: none; } این سبک،تگ لینکی را که در دارای آی دی "current" است و در داخل تگ li قرار دارد را مشخص می کند.خصوصیات و مقادیر همانی هستند که برای حالت hover استفاده کردیم.حالا تنها چیزی که نیاز داریم اضافه کردن آی دی current به کد HTML مان است: <div id="navcontainer"> <ul> <li><a href="#" id="current">Home</a></li> <li><a href="#">About me</a></li> <li><a href="#">Contact me</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Photo roll</a></li> </ul> </div> مشاهده ی نتیجه ی نهایی () تعداد زیادی از آموزش های منوی ناوبری CSS و مقالات در این باره را می توانید در آدرس های زیر پیدا کنید: 1.یک لیست () 2.لیست های تودرتو () 3.لیست های بر پایه ی CSS () ------- امیدوارم استفاده ی لازم را بکنید :wink: ... موفق باشید farik 08 تير 1387, 19:01با سلام...متشكرم..ادامه بديد مفيده..كمك خواستين در خدمت هستيم.... Webber 11 تير 1387, 13:42با سلام خدمت همه ی دوستان عزیز اینبار با بخش 5م در خدمت شما هستیم.از جناب farik عزیز هم تشکر می کنم.شما و دیگر دوستان لطف دارید، اگر مشکلی پیش آمد حتما مزاحم شما و سایر اساتید اینجا خواهیم شد حالا به همراه شما می ریم سراغ ترجمه ی این بخش(5م):): ------- در این بخش ما می خواهیم بخش محتویات را به صفحه ی خود اضافه کنیم.هفته ی بعد(همون بخش بعد:)) بخش لینک های مورد علاقه(favorite links) را زیر منوی ناویری اضافه خواهیم کرد،همچنین چگونگی ایجاد یک پایین صفحه(footer) را توضیح خواهم داد. ابتدا ما یک انتخابگر id جدید را به سبک های خود اضافه می کنیم و به آن عرض 514px می دهیم(عرض بخش ناوبری-عرض صفحه ی اصلی | 692px - 178px): #content { width: 514px; float: left; } برای آنکه منوی ناوبری ما در سمت چپ شناور باشد،ما نیاز داریم که "float: left" را به آی دی "left" مان اضافه کنیم.همچنین برای آنکه نگهدارنده ی "content" در داخل نگهدارنده ی اصلی و در سمت چپ شناور باشد،"float: left" را به انتخابگر آن نیز اضافه می کنیم: #left { width: 178px; float: left; } و این را به کد XHTML خود اضافه می کنیم: <div id="content">this is the right</div> اگر شما به مطالب بالا پی نبرده اید،من مطمئن هستم که این منابع برای شما بسیار کمک کننده خواهند بود: اطلاعات بیشتر در مورد مقدمات Float () آموزش Float () حالا،محتویات ما،به منوی ناوبری در سمت چپ چسبیده است.البته ما کمی فضا بین این دو کم داریم بنابراین ما تعدادی "padding" به سبک نگهدارنده ی "content" اضافه می کنیم: #content { width: 479px; float: left; padding-top: 15px; padding-right: 0; padding-bottom: 10px; padding-left: 20px; } یا می توانیم این کد را کوتاه تر کنیم: #content { width: 479px; float: left; padding: 15px 0 10px 20px; } راهنمایی: padding:فاصله ی بین لبه ی یک نگهدارنده با محتویات داخل خود. margin :فاصله ی بین لبه ی یک نگهدارنده با اطراف خود. مقدار اول،padding بالا را تعیین می کند،دومی برای راست،سومی برای پایین و چهارمی برای چپ.اگر ما padding را اضافه کنیم،نیاز خواهیم داشت که عرض نگهدارنده ی خود را تغییر دهیم.چون عرض واقعی آن با 20px padding افزایش یافته است.(20px left, 0 for the right).ما نیاز داریم که این را به 494px تغییر دهیم.اما چون ما در سمت راست مقدار کمی فاصله می خواهیم (تا متن به لبه ی سمت را نچسبد) ما آن را 15px کم کردیم و به جایش از 479px استفاده می کنیم. شما اگر ممکن است با من در مورد بخش گذشته بحث کنید و بگویید که "هی،شما چرا عرض نگهدارنده ی "content" را همان "494px" نکردید و از "padding-right: 15px" استفاده کنی�
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 608]
-
گوناگون
پربازدیدترینها