طراحی سایت
ساناتک
دوشنبه 28 تير 1395
1
ادامه مثال طراحی سایت گروه غواصی خوشامدگویی به بازدید کنندگان

خوشامدگویی به بازدید کنندگان جدید سایت

زیر عنوانی در خصوص خوشامدگویی به بازدیدکنندگان جدید، و پاراگرافی در توضیح آن قرار می دهیم:

<body>
<h1>BubbleUnder.com</h1>
<p>Diving club for the south-west UK - let's make a splash!</p>
<h2>Welcome to our super-dooper Scuba site</h2>
<p>Glad you could drop in and share some air with us! You've
passed your underwater navigation skills and successfully
found your way to the start point - or in this case, our
home page.</p>
</body>

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

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

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

سایت درباره چه موضوعی است؟

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

  1. در زیر اطلاعات و عنوان های اضافه شده یک عنوان جدید اضافه می کنیم اما این بار عنوانی با اهمیت و اندازه عنوان سوم که کوچکتر و نسبت به بقیه کم اهمیت تر است: "About Us".
  2. سپس یادداشت زیر را به عنوان پاراگراف در زیر عنوان خود اضافه می کنیم.

Bubble Under is a group of diving enthusiasts based in the
south-west UK who meet up for diving trips in the summer
months when the weather is good and the bacon rolls are
flowing. We arrange weekends away as small groups to cut
the costs of accommodation and travel, and to ensure that
everyone gets a trustworthy dive buddy.
Although we’re based in the south-west, we don’t stay on our
own turf: past diving weekends have included trips up to
Scapa Flow in Scotland and to Malta’s numerous wreck sites.
When we’re not diving, we often meet up in a local pub to
talk about our recent adventures (any excuse, eh?).

به زحمت نینداختن بازدید کنندگان سایت

اگر می خواهید کمتر درگیر این متن شوید می توانید فقط بخشی از آن را تایپ کنید یا اینکه آن را با استفاده از کپی-پیست نمودن به سایت خود اضافه کنید، لازم به ذکر است که ما برای نزدیک بودن اطلاعات تماس به مقادیر واقعی مثال هایی نزدیک به واقعیت برای شما به نمایش گذاشتیم.

  1. در گام بعدی بخشی با عنوان "Contact Us" به پروژه خود اضافه می کنیم.
  2. در آخر هم اطلاعات تماس را مانند مثال زیر به این عنوان نوع سوم اختصاص می دهیم:

To find out more, contact Club Secretary Bob Dobalina on
01793 641207 or email bob@bubbleunder.com.

خوب تا اینجا باید صفحه طراحی شده ما کامل شده باشد، توجه داشته باشید که از سه نوع عنوان متفاوت استفاده کردیم تا اهمیت اطلاعات و عنوان ها در سایت ما مشخص باشد، قسمت هایی که تا اینجا نوشتیم تقریباً باید به شکل زیر باشد:

<h1>BubbleUnder.com</h1>
<p>Diving club for the south-west UK - let's make a splash!</p>
<h2>Welcome to our super-dooper Scuba site</h2>
<p>Glad you could drop in and share some air with us! You've
passed your underwater navigation skills and successfully
found your way to the start point - or in this case, our home
page.</p>
<h3>About Us</h3>
<p>Bubble Under is a group of diving enthusiasts based in the
south-west UK who meet up for diving trips in the summer
months when the weather is good and the bacon rolls are
flowing. We arrange weekends away as small groups to cut the
costs of accommodation and travel and to ensure that everyone
gets a trustworthy dive buddy.</p>
<p>Although we're based in the south-west, we don't stay on our
own turf: past diving weekends away have included trips up to
Scapa Flow in Scotland and to Malta's numerous wreck
sites.</p>
<p>When we're not diving, we often meet up in a local pub
to talk about our recent adventures (any excuse, eh?).</p>
<h3>Contact Us</h3>
<p>To find out more, contact Club Secretary Bob Dobalina on
01793 641207 or email bob@bubbleunder.com.</p>

لینک ایمیلِ ما از تگِ a استفاده می کند؛ که برای مشخص کردن لینک ها برای وبسایت به کار برده می شود (در ادامه همین فصل بیشتر در این باره توضیح می دهیم). بخشِ "mailto:" هم مشخص می کند که وب باید با لینک نوشته شده مانند یک ایمیل برخورد کند و کاربر سایت با کلیک کردن بر روی آن وارد برنامه فرستنده ایمیل موجود در سیستم خود وارد می شود که مقصد ایمیلش هم با ایمیل ما پر شده است.

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

صفحه وب اجرا شده

عکس 2.15: نمایش فایل نهاییِ index.html پس از اعمال تغییرات بالا.

تعداد بازدید: 271
مطالب دیگر آموزش طراحی سایت
روش های انتخاب تگ با استفاده از classوضعیت های گوناگون یک لینک در یک صفحه وبstyle دهی گروهی به چندین تگانتخاب زمینه کاری در CSS با خصوصیت idکاربرد دستور em و italics در CSS
 
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید