فایلار
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages
اطلاعات بیشتر

کارآموزی طراحی یک وب سایت شخصی با امکانات متداول و معمول

کارآموزی طراحی یک وب سایت شخصی با امکانات متداول و معمول

دسته بندیکامپیوتر و IT
فرمت فایلdoc
حجم فایل۱٫۰۱۱ مگا بایت
تعداد صفحات۴۷
برای دانلود فایل روی دکمه زیر کلیک کنید
دریافت فایل

فهرست مطالب

عنوان صفحه

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

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

مقدمه ۲

عناصر ۳

فرمهاforms 6

پس زمینه ۷

اسکریپت ۱۲

VB SCRIP 13

JAVA SCRIPT 13

FLASH 14

VECTOR تصاویر ۱۴

تصاویر برداری ۱۹

کد نویسی آسان ۲۰

شبیه سازی موبایل ۲۰

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

ASP 24

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

آموزش ASP 35

منابع ۴۱

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

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

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

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

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

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

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

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

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

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

  • · عناصر ( Elements )
    یک متن و یا فایل اچتمل از عناصر یا element ها تشکیل میشود و برای ایجاد عناصر از تگ ها یا tags استفاده میشود. در این فصل با عناصر و تگ ها آشنا خواهید شد.
  • · تگ های اصلی ( Basic Tags )
    تگ ها ( tags ) اجزا تشکیل دهنده عناصر یا elements های اچتمل هستند و یکی از بهترین روش های یادگیری اچتمل دیدن مثالها و تغییر آنها میباشد. در این فصل با تگ های پایه و مهم آشنا شده و با کمک ادیتور اختصاصی ما و با امکانات فارسی نویسی آن به صورت آنلاین میتوانید به مطالعه و یادگیری مثالها بپردازید.
  • فــارسی نویسی
    در این درس با فارسی نویسی، فارسی سازی و استاندارد یونیکد و نحوه استفاده از ادیتور آنلاین و فارسی این سایت آشنا خواهید شد.
  • فرمت دهی ( Formatting )
    وظیفه گروهی از تگ های اچتمل فرمت دهی و تعیین شکل نمایش متون ( مثلا توپر و bold بودن و یا ایتالیک بودن ) میباشد و در این درس با این گروه ازتگهایformating آشنا خواهید شد. همچنین یاد خواهید گرفت که چگونه source یا اصل کدهای اچتمل یک صفحه یا page را ببینید.
  • نهادها ( Entities )
    گروهی از نویسه های ( Character ) اچتمل مانند (<) و یا (>) دارای معنی خاصی ( مثلا نویسه < شروع یک تگ را نشان میدهد. ) در استاندارد اچتمل بوده و برای نمایش آنها در صفحاتتان مستقیما قابل مصرف نمیباشند. در این فصل با این نویسه ها آشنا شده و با کمک Character Entities چگونگی استفاده از این گروه از نویسه ها را فرا خواهید گرفت.
  • پیوندها ( Links )

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

  • جداول ( Tables)

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

  • فریمها ( Frames )

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

  • فهرستها ( Lists )

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

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

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

  • FAQ HTML

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

  • فرمها ( Forms )

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

  • تصاویر ( Images ) :در این درس با عنصر img و چگونگی نمایش تصاویر و همچنین تنظیم محل آنها آشنا خواهید شد.
  • پس زمینه ( Background )

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

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

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

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

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

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

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

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

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

عمل و عکس العمل :

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

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

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

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

رنگ های گرم تشکیل شده اند از : زرد ، نارنجی ، قهوه ای ، زرد-سبز و نارنجی- قرمز . یعنی رنگ هایی که با پاییز در تعامل هستند . بطور کلی رنگ های گرم گرایش به هیجان و تکاپو دارند . بسیاری از مردم مقدار کم از این رنگ ها را می پسندند . بنفش و سبز رنگ های واسط هستند که نه گرم و نه سردند و وابسته به میزان رنگ قرمز یا زردی هستند که در رابطه با رنگ آبی در آنها بکار رفته است . اگر رنگ آبی آن کم تر باشد بیشتر شبیه رنگ های گرم بنظر میرسد .

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

اسکریپت چیست :

اسکریپت

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

VB Script

این زبان نمونه کوچک شده زبان VB است و کسانی که با ویژوال بیسیک کار کرده اند در یاد گیری این زبان بیشتر راه را پیموده اند و کافیست تفاوت های آن را با ویژوال بیسیک یاد گیرند . این زبان برای افزودن افکت به صفحات وب نیز کاربرد دارد . ولی کاربرد برتر آن در نوشتن برنامه های سمت سرور است که بر اساس تکنولوژی ASP صورت میگیرد . این زبان به عنوان زبان پیش فرض برای نوشتن صفحات ASP است . یاد گیری این زبان برای کسانی که تا کنون برنامه نویسی نکرده اند بسیار آسان است و شروع بسیار خوبی برای ورود به دنیای برنامه نویسی است .

JAVA Script

این زبان ساختاری شبیه زبان C دارد و بیشتر برای ایجاد افکت بر روی کامپیوتر کاربر استفاده میشود (Client-side) .احتمالا تا کنون سایت هایی را دیده اید که در آن کلمه خاصی دنبال موس میدود . یا هنگام وارد شدن به آن سایت مرورگر شما در صفحه ویندوزتان میلرزد . این قبیل کد ها که فقط روی سیستم کاربر اجرا میشوند و نیازی به پردازش توسط سرور ندارند را کد های سمت کاربر (کلاینت ساید) میگویند . البته این زبان نیز قابلیت های استفاده به صورت server-side را داراست . اما چون استفاده از زبان VBS آسانتر است معمولا از VBS برای نوشتن برنامه های سرور-ساید استفاده میشود . یکی از تفاوت های این دو زبان در طرز نوشتن حروف است . در VBS تفاوتی ندارد که دستورات را با حروف کوچک یا بزرگ بنویسید ، اما در JavaScript اگر دستوری که با حروف کوچک است با حروف بزرگ بنویسید با Error در صفحات خود مواجه میشوید.برای دیدن قدرت زبان JavaScript میتوانید از سایت AnfyTeam دیدن کنید . این سایت همچنین امکان دانلود برنامه ای برای ساخت افکت های جاوا اسکریپت خود را در اختیارتان میگذارد .

رایگان اطلاعات بیشتر
سبد آیتم حذف شد برگرداندن محصول حذف شده
  • سبد خالی از محصول می باشد.