گزارش کاراموزی طراحی یک وب سایت شخصی با امکانات متداول و معمول در 39 صفحه ورد قابل ویرایش

فهرست مطالب

عنوان صفحه

تاریخچه طراحی وب 1

طراحی صفحات وب 2

مقدمه 2

عناصر 3

فرمهاforms 6

پس زمینه 7

اسکریپت 12

VB SCRIP 13

JAVA SCRIPT 13

FLASH 14

VECTOR تصاویر 14

تصاویر برداری 19

کد نویسی آسان 20

شبیه سازی موبایل 20

AJAX طراحی برنامه های کاربردی تحت وب 21

ASP 24

اسجاد کردن اولین صفحه ASP 29

آموزش ASP 35

منابع 41



تاریخچه طراحی وب

تیم برنزر لی، مخترع وب، با برپایی یک سایت وب در اوت ????، نام خود را به عنوان نخستین سازنده? وب در تاریخ نگاشت. او در نخستین وب‌سایتش، از ابرمتن و پیوندی برای ایمیل (پست الکترونیک) استفاده کرده بود.

در آغاز، سایتهای وب با کُدهای ساده «اچ تی ام ال» نوشته می‌شدند، گونه‌ای از زبان کُدنویسی که ساختار ساده‌ای به وب‌گاه‌ها می‌داد، شامل سرتیتر و پاراگراف، و توانایی پیوند دادن به صفحه‌های وب دیگر، با اَبَرمتن. در مقایسه با روش های دیگر، این راه تازه و متفاوتی بود که کاربران به سادگی می‌توانستند با یک مرورگر، صفحه‌های پیوند خورده را باز کنند.

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



طراحی صفحات وب

اچ تی ام ال و طراحی صفحات وب :

یادگیری زبان HTML بسیار ساده است.در این درسها یاد خواهید گرفت که چگونه با کمک HTML صفحاتتان را ساخته و وب سایت شخصی فارسی و یا وبلاگتان را راه اندازی کنید. مبنای این دروس نسخه 4 استاندارد اچتمل بوده و نکته بسیار مهم این نسخه جداسازی فرمت بندی و انتقال آن به style sheet ها میباشد. لازم به توضیح است که که تاکید دروس و مقالات این راهنما بر فارسی نویسی مطابق استاندارد یونیکد بوده و اولین مجموعه دروس آموزشی ما شامل آموزش مقدماتی HTML بهمراه مثالهای متعدد فارسی نویسی خواهد بود. ادامه این بخش به شرح سرفصل مطالب ارائه شده خواهد پرداخت:

سرفصل مطالب کلاس اچتمل مقدماتی :

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

HTML & WWW
در این درس با مفاهیم وب ( تار عنکبوت جهانی یا World Wide Web ) ، اینترنت، مرورگرها و استانداردهای وب آشنا خواهید شد. همچنین با تفاوتهای مرورگرهای وب ( Web Browsers ) و سرویس دهنده های وب ( Web Servers ) آشنا خواهید شد.

· عنصار اصلی
یک متن و یا فایل اچتمل از عناصر یا element ها تشکیل میشود و برای ایجاد عناصر از تگ ها یا tags استفاده میشود. در این فصل با عناصر و تگ ها آشنا خواهید شد.
· تگ های اصلی
تگ ها ( tags ) اجزا تشکیل دهنده عناصر یا elements های اچتمل هستند و یکی از بهترین روش های یادگیری اچتمل دیدن مثالها و تغییر آنها میباشد. در این فصل با تگ های پایه و مهم آشنا شده و با کمک ادیتور اختصاصی ما و با امکانات فارسی نویسی آن به صورت آنلاین میتوانید به مطالعه و یادگیری مثالها بپردازید.
فارسی نویسی
در این درس با فارسی نویسی، فارسی سازی و استاندارد یونیکد و نحوه استفاده از ادیتور آنلاین و فارسی این سایت آشنا خواهید شد.



فرمت دهی
وظیفه گروهی از تگ های اچتمل فرمت دهی و تعیین شکل نمایش متون ( مثلا توپر و bold بودن و یا ایتالیک بودن ) میباشد و در این درس با این گروه ازتگهایformating آشنا خواهید شد. همچنین یاد خواهید گرفت که چگونه source یا اصل کدهای اچتمل یک صفحه یا page را ببینید.


نهادها
گروهی از نویسه های ( Character ) اچتمل مانند (<) و یا (>) دارای معنی خاصی ( مثلا نویسه < شروع یک تگ را نشان میدهد. ) در استاندارد اچتمل بوده و برای نمایش آنها در صفحاتتان مستقیما قابل مصرف نمیباشند. در این فصل با این نویسه ها آشنا شده و با کمک Character Entities چگونگی استفاده از این گروه از نویسه ها را فرا خواهید گرفت.
پیوندها

در این درس با پیوندها ( Links ) ، شناسه های مرتبط مخصوصا href و نحوه به کار گیری آنها آشنا خواهید شد.

جداول ها

در این درس با مفاهیم جدول ( Table ) ، ردیف یا row ، سلولها یا خانه ها، مرز یا border در جداول و عناصر مرتبط مخصوصا TABLE ، TD , TR آشنا خواهید شد.

فریم ها

در این درس با مفاهیم فریم ( Frame ) و عناصر مربوطه مخصوصا Frame و Frameset آشنا خواهید شد.

فهرست ها

این درس شما را با نحوه نمایش فهرستها ( List ) ، انواع فهرستها و تگ های مربوطه آشنا خواهد ساخت.


مثالهای اچتلمن

با استفاده از دهها مثال موجود در این سایت و با کمک ادیتور HTML ما براحتی قادر به نوشتن کدهای HTML و دیدن نتایچ در مرورگرتان خواهید بود، آزمایش کنید

FAQ HTML

این صفحه به بیشترین سؤالات پرسیده شده در مورد اچتمل ( Frequently Asked Questions ) و مخصوصا مشکلات مربوط به فارسی نویسی و پاسخهای آنها اختصاص دارد.

فرمها

از طریق استفاده از تگ های فرم ( form ) قادر به دریافت اطلاعات از بازدیدکنندگان صفحاتتان و یا تبادل اطلاعات بین صفحات مختلف خواهید شد. با کمک این گروه از تگ ها قادر به نمایش باکسهای ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، رادیو باتونها (radio-buttons) و ... شده و همچنین امکان گذاشتن دکمه های ارسال (submit button) و یا حذف (reset) را خواهید داشت. این فصل با شرح تگ های form و input و ... به چگونگی ایجاد ارتباط با بازدیدکنندگان و گرفتن اطلاعات از آنها خواهد پرداخت.

در این درس با چگونگی نمایش تصاویر و یا تعیین رنگ پس زمینه آشنا خواهید شد.

اهمیت رنگ در طراحی صفحات وب :

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


رنگ ها و معانی آنها :



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

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

آموزش ASP :

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

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

آشنایی با اسکریپتهای ASP

برای شروع، آخرین مثال جلسه قبل را دوباره تکرار می کنیم. این یک صفحه یا اسکریپت یا کد ASP است که عبارت Good Evening را در صورتی که زمان بعد از ظهر باشد چاپ می کند و در صورتی که قبل از ظهر باشد عبارت Good Morning را چاپ می کند:

<% @ Language="VBScript" %>

<% Option Explicit %>





The current time is <% = Time ( ) %>

<%

If Datepart("h",time()) >= 12 then

'After noon

Response.Write "Good Evening"

Else

'Before noon

Response.Write "Good Morning"

End If

%>





تجزیه و تحلیل: اولین چیزی که مورد بررسی قرار میدهیم Tag های <% و %> می باشد. شما باید قبلا با Tag های HTML آشنا شده باشید. برای مثال شما می دانید که متون بین و به صورت حروف توپر نمایش داده می شوند؛ این Tag ها نیز شبیه آنها هستند. متنی که بین دو عبارت <% و %> ظاهر می گردد به عنوان کدهای ASP در نظر گرفته می شود. به این خاطر است که سرویس دهنده، قبل از فرستادن صفحه برای مرورگر وب، آنها را مورد پردازش قرار می دهد. برای مثال، در خطوط 7 تا 15 شما Tag های باز و بسته را مشاهده می کنید. آنها به این معنی هستند که خطوط بین 8 تا 14 کدهای ASP می باشند. حالا سعی کنید خطوط 7 تا 15 را از داخل اسکریپت خارج کرده و این صفحه را از طریق مرورگر وب مشاهده نمایید، مطمئنا چیزی شبیه به خروجی زیر را خواهید دید؛ چه اتفاقی افتاده است؟