روش های متداول ساخت صفحات وب

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

روش ساخت صفحات وب

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

 
طراحی سایت با استفاده از قلب های آماده
ابتدا نیاز است که با قالب سایت و مفهوم آن آشنا شوید. قالب های آماده ، ساختاری ثابت دارند و به واسطه ی بخش هایی مثل تنظیمات تم ، سفارشی یا شخصی سازی می شوند. طراحی قالب های مختلف می تواند در فرمت های مختلفی نظیر فوتوشاپ یا HTML صورت گیرد.
در اغلب اوقات ، افراد سعی دارند که در قالب های آماده رایگان یا غیررایگان ، تغییراتی را بنا بر نیاز های خود اعمال کنند. خوش بختانه این تم ها را می توان در ادیتور هایی نظیر GoLive, FrontPageو Dreamweaver سفارشی سازی ( شخصی سازی ) کرد.
قالب های آماده ، برای کسانی که طراحی سایت را به تازگی شروع کرده اند ، سکوی پرتاب است و می توانند از آن ایده بگیرند. به علاوه خیلی از افرادی که اقدام به طراحی سایت می کنند ، اطلاعاتی درباره ی کد نویسی و روش های رایج طراحی سایت ندارند ؛ بنابراین استفاده از این قالب ها این امکان را فراهم کرده است که بتوان بدون نیاز به دانش مرتبط با طراحی سایت ، سایت خود را راه اندازی کنند.

آموزش سی اس اس

آموزش سی اس اس

در قسمت اول با استفاده از CSS یک قالب دو ستونی کلاسیک با navigation سمت چپ ایجاد کردیم که تنها چند نوع تگ HTML داشت. قسمت اول کد صفحه را ارائه کرده و توضیح می‌داد که قرار است از چه تگ‌های HTML استفاده کنیم.
همانطور که می‌دانید، تمام محتوایی (متن، عکس، فلش، و غیره) که کاربر هنگام مشاهده یک صفحه وب می‌بیند با HTML مشخص شده و بین تگ‌های <body> و </body> قرار دارد.
در این مورد داریم:

<body>
<div id=”navigation”>
<h2>The Main navigation</h2>
</div>
<div id=”centerDoc”>
<h1>The Main Heading</h1>
<p>
</p>
</div>
</body>

توجه :
شما باید صفحه ‌HTML ساده خودتان را ایجاد کنید به طوری که بتوانید با من همراهی کرده و گام به گام صفحه را ایجاد کنید.

در کد بالا دو بخش اصلی مشاهده می‌کنیم که هر کدام در داخل تگ‌های <div> محصور شده‌اند. همانطور که در قسمت اول این آموزش یاد گرفتیم، تگ‌های <div> برای این طراحی شده‌اند تا برای ایجاد یک «قسمت» در سند یا به عبارت دیگر، یک ظرف مورد استفاده قرار بگیرند.
دو لفاف مانند آنچه گفتیم ایجاد کرده و هر یک از آن‌ها را با یک ID (یا شناسه) منحصر به فرد نامگذاری می‌کنیم:

<div id=”navigation”>

<div id=”centerDoc”>

متوجه خواهید شد که کل محتویات صفحه در یکی از این دو قسمت عمده صفحه قرار گرفته است. بنابراین سوال اول این است: قواعد ID در صفحات HTML چیست و چرا از آنها استفاده کرده و به هر یک از عناصر صفحه مانند DIV‌ها یکی از آن‌ها را اختصاص می‌دهیم؟
اول از همه، می‌توانید به هر تگ HTML‌ی یک ID اختصاص دهید. بنابراین می‌توانم به یک تگ <p> هم یک ID اختصاص بدهم.  ادامه مطلب ...

آموزش سی اس اس

آموزش سی اس اس

در قسمت اول با استفاده از CSS یک قالب دو ستونی کلاسیک با navigation سمت چپ ایجاد کردیم که تنها چند نوع تگ HTML داشت. قسمت اول کد صفحه را ارائه کرده و توضیح می‌داد که قرار است از چه تگ‌های HTML استفاده کنیم.
همانطور که می‌دانید، تمام محتوایی (متن، عکس، فلش، و غیره) که کاربر هنگام مشاهده یک صفحه وب می‌بیند با HTML مشخص شده و بین تگ‌های <body> و </body> قرار دارد.
در این مورد داریم:

<body>
<div id=”navigation”>
<h2>The Main navigation</h2>
</div>
<div id=”centerDoc”>
<h1>The Main Heading</h1>
<p>
</p>
</div>
</body>

توجه :
شما باید صفحه ‌HTML ساده خودتان را ایجاد کنید به طوری که بتوانید با من همراهی کرده و گام به گام صفحه را ایجاد کنید.

در کد بالا دو بخش اصلی مشاهده می‌کنیم که هر کدام در داخل تگ‌های <div> محصور شده‌اند. همانطور که در قسمت اول این آموزش یاد گرفتیم، تگ‌های <div> برای این طراحی شده‌اند تا برای ایجاد یک «قسمت» در سند یا به عبارت دیگر، یک ظرف مورد استفاده قرار بگیرند.
دو لفاف مانند آنچه گفتیم ایجاد کرده و هر یک از آن‌ها را با یک ID (یا شناسه) منحصر به فرد نامگذاری می‌کنیم:

<div id=”navigation”>

<div id=”centerDoc”>

متوجه خواهید شد که کل محتویات صفحه در یکی از این دو قسمت عمده صفحه قرار گرفته است. بنابراین سوال اول این است: قواعد ID در صفحات HTML چیست و چرا از آنها استفاده کرده و به هر یک از عناصر صفحه مانند DIV‌ها یکی از آن‌ها را اختصاص می‌دهیم؟
اول از همه، می‌توانید به هر تگ HTML‌ی یک ID اختصاص دهید. بنابراین می‌توانم به یک تگ <p> هم یک ID اختصاص بدهم.  ادامه مطلب ...

انواع قالب های وب سایت

 

ادامه مطلب ...

قالب وب سایت

قالب وب سایت

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

قالب یا تم چیست؟

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