تبلیغات
p5soft | دانلود نرم افزار,طراحی سایت,طراحی قالب وبلاگ
پرواز تفریحی پاراگلایدر
پرواز تفریحی پاراگلایدر پرواز تفریحی پاراگلایدر

دوشنبه 6 آبان 1392

آموزش طراحی سایت قسمت هفتم

نویسنده: امیر حسینی   


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

design-web-00.jpg

عنصر  blockquote:

این تگ ، یک تگ container (که در جلسات قبل توضیح داده شده) است و طبق گفته کتاب این تگ  برای نمایش یک گفته شخصی استفاده می شود.
 ولی در کتاب های دیگر به تگ های  Quotes  اشارات متنوعی شده است.  Quotes به معنی نشان یا نقل قول است و کلا" این تگها برای جلب توجه بیشتر استفاده می شود در واقع یک شهادت ویا سفارش و یا کامنت است.

تگ های  Quotesبه 3 بخش زیر تقسیم می شود :


1.    <blockqoute>< /blockqoute>
2.    <q>< /q>
3.    <cite>< /cite>

q :

این تگ ، یک تگ container  و inline  است  و برای نقل و قول برای یک یا دو کلمه استفاده می شود.
یادآوری :  تگ های block  کل سطر را می پوشاند و تگ های inline  تنها دور عنصر را می گیرند .

<p>
I'm said <q>font</q>but my friend said <q> font face </q>
</p>
cite  :
این تگ ، یک تگ container  و inline  است  و برای نام نویسنده و یا نویسنده کامنت استفاده می شود
<p>
 but then <cite> ali</cite>said <q> no think these font work betfer </q>
<p>
blockquote  :

این تگ ، یک تگ container  و block  است  و برای اشاره به مقاله قبلی یا اشاره به یک مرجع خاص  معمولا برای یک جمله استفاده می شود.

تگ های   strong و  em :

این تگ ها ، تگ های container  و inline  هستند و برای برجسته سازی و اهمیت کلمات استفاده می شوند. و اما در ظاهر ، تگ strong کلمه را bold  و  تگem   کلمه را italic می کند.

این نکته را اضافه کنم که  این تگ ها برای موتورهای جستجو از اهمیت خاصی برخوردار است .

    <p>
        this is a <strong>bold text</strong> this is a <em>italic text</em>
    </p>
خط فاصله بین متون p :

فرض کنید می خواهیم در یک پاراگراف به خط جدیدی برویم . برای این کار از تگ <br /> استفاده می کنیم.
این تگ ، یک تگ empty  است  و در ساختار xhtml  به صورت <br />  نوشته می شود .
نکته مهم : از br اضافی پرهیز کنید 

<p>
        this is a test
        <br />
        this line show after break
</p>

تعریف تگ های خاص:

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

<abbr>

برای توصیف یک عبارت اختصار به کار می رود

<p>
The<abbr titile="search engine optimization">seo</abbr> is good for your site 
<p>  

<acronym>  

برای توصیف نامها ی محاوره ای اختصار

<p>
    Can I get this <acronym title="as soon as possible">AsAp </acronym>
<p>

<address>

 برای نوشتن اطلاعات تماس

<address>
Behzad alibeigi
<br/>
<a href =mailto:.. >email</a><br/>
Phone :...
</address>

<dfn>

برای معنای کلمات استفاده می شود و یا توصیف یک کلمه و یا مثلا جایی که می خواهیم اطلاعات بیشتری در اختیار کاربر قرار دهیم .

<p>
The <dfn title="microsaft web browser">Internet explorer </dfn> is the most popular browser used undermater.
<p>

همانطوری که از مثال های بالا مشخص است این 4 تگ container  و  inline  هستند.
برای دیدن یک مثال دیگر بهتر است به وب سایت وبسکالا برویم و سورس آن را ببینیم :

design-web-50.jpg
 در این مثال می توانید نحوه ی استفاده از این تگ ها را در عمل ببینید.

تگ های  ناشناخته تری هم وجود دارند مانند kdb , samp , var  که بهتراست در اینترنت کمی راجع به آنها تحقیق کنید و اگر سوالی در این مورد داشتید با من مطرح کنید .

فصل سوم

Adding some style


همان طوری که قبلا اشاره کردیم لایه دوم وب  ، لایه ظاهر آن است که با  CSS اعمال می شود.
در گذشته  برای اضافه کردن ظاهر به سایت  از ترکیب دستورات CSS وHtml استفاده می شد ولی امروزه برای این کار می بایست فقط از css استفاده کرد تا وب سایتی استاندارد داشته باشیم.
CSS یا همان (Cascading style sheets) زبانی است که برای تغییر ظاهر عناصر صفحات استفاده می شود.  که می تواند شامل رنگ ، سایز ویا موقعیت عناصر باشد .

برای اعمال css 3 روش وجود دارد:

•    Inline
•    Embedded
•    External

: inline

در این روش از خصوصیت  style  داخل  تگ های html  استفاده می کنیم بدین صورت :

   <p style="color:Red;font-weight: bold;">
    this is a test
   </p>
خصوصیت  style  می تواند شامل چندین اعلان باشد . اعلان ها با ; از اعلان کناری جدا می شود. به مثال بالا دقت کنید :  اعلان رنگ و نوع فونت با ; از هم جدا شده اند
هر اعلان شامل یک property و یک value است .

design-web-51.jpg 
عنصر span :

یک تگ inline است و تگ جادویی دوم بعد از div برای من به حساب می آید span موارد استفاده زیادی دارد که یک نمونه از آن  که مربوط به همین  بحث  inline style است  در مثال زیر آورده شده است:
 
design-web-52.jpg

همان طوری که در مثال مشاهده می نمایید برای استایل متفاوت یک و یا چند کلمه و پاراگراف از این تگ استفاده می کنیم.
مورد استفاده دیگر span مربوط به طراحی های پیچیده با تعداد تگ div  زیاد است که در دوره های بعدی توضیح خواهیم داد.
روش های embedded , external  در جلسه بعدی تشریح می شوند  و خواهیم گفت که کدام روش مناسب تر است .


نظرات() 
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت PC با موبایل از طریق usb
اتصال مستقیم تبلت به اینترنت adsl
دفترچه راهنمای فارسی گوشی هوشمند سامسونگ
راهنمای کامل فعال سازی اینترنت ایرانسل (GPRS و EDGE)، بسته های افزایشی و تعرفه‌های مربوطه
ساخت کاربر VIP برای سایت های وردپرسی
/طرح-لایه-باز-اسلایدر-سری-اول.
دریافت کد « ما را حمایت کنید 2 »
دانلود قالب گالری عکس
اسلاید شوی حرفه ای
کد اسلاید شو برای وبلاگ
قالب های حرفه ای وبلاگ همراه با اسلایدشو
ابزار نمایش اسلایدر تصاویر
ابزار اسلایدر عکس برای نمایش چندین تصویر در وبلاگ
قالب همراه با اسلاید شو
کد عضویت کاربر
دانلود اسکریپت مدیریت کاربران AuthManager نسخه ۳
عوامل موثر در افزایش رنکینگ سایت در گوگل
نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip نمایش کد
اسلایدشو با قابلیت پیش نمایش فریم ها- کد جاوا
فیلم فارسی آموزش جاوا اسکریپت (JavaScript) – بخش اول
آموزش ساخت تاریخ و روز با جاوا
کد جاوا اسکریپت تغیر رنگ پس زمینه با کلیک بر روی یک دکمه/لینک
آموزش انتقال بازدید کننده از دامنه قدیمی به دامنه جدید سایت یا وبلاگ
پیش فرض چگونه جاوا اسکریپت را بر روی مرورگر فعال کنیم؟ (+آموزش تصویری)
دانلود کتاب آموزش جاوا اسکریپت صورت کامل
اسکریپت پرداخت آنلاین بانک پارسـیان
اسکریپت سئو سایت در موتور های جستجوگر seo paneL
مراقب لیست سیاه متور های جستجوگر باشید!!
افزونه رمز گذاری روی لینک های دانلود مخصوص vip کردن سایت+آموزش استفاده
25 افزونه کاربردی برای مرورگر کروم
25 افزونه کاربردی برای مرورگر کروم- part2
بازاریابی شبکه های اجتماعی
کلمات کلیدی مطلب : آموزش - تنظیمات - فیس بوک - امنیت فیس بوک - facebook -
آموزش کامل تنظیمات فیس‌بوک(قسمت اول)
5 اشتباه در رایج در شبکه های اجتماعی
ابزارهای بازاریابی شبکه های اجتماعی - نبض وب سایت تان را در دست بگیرید
5 راه برای فروش توسط شبکه های اجتماعی
سوالات و مشکلات سری d سامسونگ
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
ستون های چندگانه در Css3
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
مرجع کامل دستورات CSS2
آموزش ساختن منوی بازشو توسط CSS
آموزش ساخت منوی عمودی ساده با CSS
آموزش ساخت منوی افقی ساده با CSS
آموزش هک کردن فیس بوک
آموزش هک و جلوگیری از هک شدن مودم ADSL

آمار وبلاگ

  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
  • P5design & PARAPINK5 Sales, I.R.I., Inc. All information applies to I.R. vehicles only
    tell number : 09365995390 | 09122061238 | 09022061238
    www.p5bisim.com