طراحی وب سایت

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

 

design-web-00.jpg

 

عنصر  blockquote:

 

 

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

 ولي در کتاب هاي ديگر به تگ هاي  Quotes  اشارات متنوعي شده است.  Quotes به معني نشان يا نقل قول است و کلا" اين تگها براي جلب توجه بيشتر استفاده مي شود در واقع يک شهادت ويا سفارش و يا کامنت است.

 

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

 

 

    1.    <blockqoute>< /blockqoute>

    2.    <q>< /q>

    3.    <cite>< /cite>

 

 

اين تگ ، يک تگ 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>

 

تگ هاي   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 =contact.. >email</a><br/>

    Phone :...

    </address>

 

 

<dfn>

 

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

 

    <p>

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

    <p>

 

 

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

براي ديدن يک مثال ديگر بهتر است به وب سايت وبسکالا برويم و سورس آن را ببينيم 

 

Adding some style

 

همان طوري که قبلا اشاره کرديم لايه دوم وب  ، لايه ظاهر آن است که با  CSS اعمال مي شود.

در گذشته  براي اضافه کردن ظاهر به سايت  از ترکيب دستورات CSS وHtml استفاده مي شد ولي امروزه براي اين کار مي بايست فقط از css استفاده کرد تا وب سايتي استاندارد داشته باشيم.

CSS يا همان (Cascading style sheets) زباني است که براي تغيير ظاهر عناصر صفحات استفاده مي شود.  که مي تواند شامل رنگ ، سايز ويا موقعيت عناصر باشد .

 

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

 

    •    Inline

    •    Embedded

    •    Exteal

 

 

: 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 است  در مثال زير آورده شده است:

 

همان طوري که در مثال مشاهده مي نماييد براي استايل متفاوت يک و يا چند کلمه و پاراگراف از اين تگ استفاده مي کنيم.

مورد استفاده ديگر span مربوط به طراحي هاي پيچيده با تعداد تگ div  زياد است که در دوره هاي بعدي توضيح خواهيم داد.

روش هاي embedded , exteal  در جلسه بعدي تشريح مي شوند  و خواهيم گفت که کدام روش مناسب تر است .