تاریخچه وب

سال 1989 را می توان مبدأ وب دانست، در ان سال ” تیم برنرزلی ” عضو انجمن اروپایی محققین فیزیک (CERN) ، پروژه ای را مطرح کرد که هدف آن به وجود آوردن شبکه ای از اسناد و فرامتن ، برای رد و بدل کردن اطلاعات بین اعضای انجمن بود.

درسال 1990 اولین نرم افزار وب با قابلیت نمایش  ، ویرایش و ارسال اسناد فرامتن به اعضاء از طریق اینترنت، تولید و بدین ترتیب وب پا به عرصه وجود گذاشت.

در سال 1991 مجلس ایلات متحده قانونی را مبتی بر تأسیس شبکه علمی-تحقیقاتی ملی
(National research and Educational Network – NREN) از تصویب گذراند، هدف از NREN برقراری شبکه های تحقیقاتی و علمی با ظرفیت و سرعت بالا و اجازه فعالیت های تجاری و تشویق آن در اینترنت بود.

در ژوئن 1993 ، مارک آندرسن و سایر محققین در NCSA یک مرورگر گرافیکی به نام MOSAIC 1.0 را عرضه کردند، که خیلی زود نسخه جدیدی از آن روی ویندوز مایکروسافت قرار گرفت.

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

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

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

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

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

تاریخچه اینترنت

وزارت دفاع ایالات متحده آمریکا در سال 1969 میلادی شبکه ای طراحی کرد تا کامپیوترهای مرکزهایی را که در زمینه مسائل دفاعی تحقیق می کردند به هم ارتباط دهد. این شبکه آرپانت نام داشت.

هدف شبکه آرپانت مبادله اطلاعات در زمینه تحقیقات دفاعی بود. اما کم کم کامپیوتر های دانشگاه های بزرگ ایالات متحده آمریکا به آن پیوسته و از آن برای مبادله اطلاعات تحقیقاتی در رشته های گوناگون علوم استفاده کردند. به تدریج شمار کامپیوتر هایی که از آمریکا و سایر کشورهای جهان به این شبکه پیوستند افزایش یافت. آرپانت در سال 1977 میلادی به اینترنت تغییر نام یافت و در حال حاضر میلیون ها کامپیوتر در این شبکه قرار گرفته اند.

تاریخچه اینترنت در ایران

در سال 1372 هجری شمسی ایران نیز به شبکه اینترنت پیوست. نخستین رایانه ای که در ایران به اینترنت متصل شد مرکز تحقیقات فیزیک نظری در ایران بود. در حال حاضر نیز این مرکز یکی از مرکزهای خدمات اینترنت در ایران است.

منظور از وب چيست؟

وب شبکه ای است متشکل از تمامی کامپيوترهای دنيا، شبکه ای از شبکه ها
اينترنت، وب، WWW ، web يا World Wide Web همگی يک چيزند

تمامی کامپيوترهای وب ميتوانند با هم ارتباط داشته باشند
کامپيوترهای موجود در وب با کمک استاندارد ارتباطی يا پروتوکل HTTP با هم ارتباط برقرار ميکنند

نحوه کارکرد وب چگونه است؟

اطلاعات وب داخل فايلهائی به نام Web Pages و يا صفحات وب قرار دارنداين فايلها يا صفحات روی Web Server يا کامپيوترهای سرويس دهنده وب ذخيره شده اند برای ديدن صفحات وب از نرم افزاری به نام مرورگر و يا Web Browser استفاده ميشود
دو مرورگر Internet Explorer و Netscape Navigator جزو معروفترين مرورگرها حساب ميشوند
مرورگر Internet Explorer متعلق به شرکت مايکروسافت و مرورگر Netscape Navigator متعلق به شرکت نت اسکيپ ميباشد

مرورگرها چگونه به خواندن صفحات وب ميپردازند؟

يک مرورگر با کمک يک Request درخواستی برای خواندن يک صفحه از وب سرور ميکند اين Request يا درخواست بر اساس استاندارد ارتباطی يا پروتوکل HTTP بوده و شامل آدرس صفحه مورد نظر ميباشد

آدرس يک صفحه وب چيزی شبيه http://www.internet.com/faq.html است. بخش //:http نوع پروتوکل و يا استاندارد ارتباطی را تعيين ميکند، www.internet.com نام دومين يا Domain است و faq.html نام صفحه ای است که بايد خوانده شود

مرورگرها چگونه صفحات وب را نمايش ميدهند؟

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

وظيفه اصلی تگ های اچتمل ( HTML tags ) بيان چگونگی نمايش اطلاعات ميباشديک تگ اچتمل چيزی شبيه <p> اين تگ پاراگراف است </p> است

چه کسانی استاندارد های وب را تعيين ميکند؟

تعيين استاندارد های وب ربطی به شرکتهای مايکروسافت و يا نت اسکيپ ندارد

World Wide Web Consortium يا W3C متولی تعيين استانداردهای وب استHTML, CSS and XML از مهمترين استانداردهای تصويب شده وب ميباشند.

آخرين استاندارد HTML استاندارد XHTML 1.0 ميباشد .

استانداردهای وب

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

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

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

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

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

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

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

در زير فهرستي از اين استانداردها قرار دارد.

1_ بارشدن صفحه در زمان استاندارد
2- امكان حركت راحت در كل سايت
3- امكان پيدا كردن سريع مطلب توسط كاربر
4- جلب توجه كاربر
5- ايجاد رغبت براي مراجعه كننده به سايت جهت بازگشت مجددد
6- دارا بودن رنكينگ بالا در موتورهاي جستجو گر
7- قابل استفاده بودن در كليه مرورگرها
8- رعايت استانداردهاي كدپيج فارسي و مشكل نداشتن با فونت

وب سایت ها چيستند و  چگونه کار می کنند ؟

یک “website” ، “Web site” یا “WWW site“( گاهی کمی کوتاه تر،  سایت) یک کلکسیونی از صفحات وب می باشد .  به زبانی دیگر  ،  مدارک “HTML/XHTML ”  قابل دسترس  توسط  “HTTP”  در اینترنت می باشد .  تمام سایت های عمومی در دسترس موجود  شامل  “World Wide Web (www) ” می باشند.  آن صفحات وب سایتها قابل دسترس به وسیله ی  “URL ”  می  باشند  و به همچنین صفحه اصلی سایت  (Homepage )  هم بر همان  سرور فیزیکی قرار دارد .  این “URL”ها از صفحات ،  آنان را به صورت سلسله مراتبی فرمان دهی و مرتب می کند.هرچند که “Hyperlink” های بین آنها کنترل می کندکه چگونه خواننده ساختمان کلی را بفهمدو چگونه رفت و آمد ها در بین قست های مختلف سایت جریان دارد.

وب سایت ها صفحات  نوشته و متحرک شده با “HTML” (Hyper Text Markup Language) است و به آن با نرم افزاری به نام “web browser” می توان دسترسی پیدا کرد وب سایتها از صفحات ثابت HTML یا صفحات قابل تغییر که از تکنولوژی مانند

“Active Server Pages” (ASP) یا “Java Server Pages” (JSP) استفاده مي كنند تشكيل شده اند.

یک وب سایت همچنین به برنامه ای به نام “HTTP Server” مثل “Apache”نیاز دارد که معمولترین برنامه وب سرور در اینترنت می باشد یا برنامه “Microsoft Internet Information Server ” (IIS).

اغلب وب سایت ها از اطلاعات طبقه بندی شده تشکیل شده اند.

“Plugins”هایی هم برای”Browser”ها موجود می باشد که به آنها اجازه می دهد تا چیزهای فعال مانند “Flash”, “Shockwave”,”Applet” نوشته شده توسط”Java Dynamic HTML”را نمایش دهد که آنها برای کاربر فعل و انفعالات را با به روز کردن صفحه، نمایش می دهد. ( به عنوان مثال صفحاتی که نیاز به بار گذاری و دوباره بارگذاری برا نشان دهنده تاثیر ندارند.)برای بازکننده صفحات مدرن بیشتر از “DOM” و “JavaScript” استفاده می شود.

بعضی (قسمتی) از وب سایت ها تیاز به تعهد پرداخت  پول با  مخارجی که باید  پرداخت بشود(ماهانه) یا ثبت نامهای رایگان دارند . به عنوان مثال خیلی از سایت های اینترنتی غیراخلاقی ، قسمتی از سایتهای اینترنتی، سایتهای بازی ، مسیج بوردها ،  سرویس دهندگان ای- میل و سایتایی که اطلاعاتی در مورد بازار سهام و زمان ارائه می دهند.

نگاهی کلی به وب سایت ها

یک وب سایت می تواند اغلب به صورت شخصی و مستقل ، بیزینس و شرکتی یا بر اساس یک موضوع و هدف مشخص دنبال کند.  این تعریف کاملا مبهم می باشد.

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

کاربران ميتوانند اطلاعات و محصولاتي را که در خور نيازشان ميباشد را پيدا کنند.

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

اکثراً رسانه ها تاثير گذار هستند و هدف آنها ايجاد علاقه کافي است تا اينکه که سرانجام بتواند تبادل مطلوب راانجام دهند.

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

مشاهدات بي عيب اينترنت مانند ثبت رويداد بر روي مرورگر وب ،دلالت بر درخواست کاربران و واکنش سرور دارد. به عبارت ديگر انجام يک داد و ستد و تبادل مي باشد.

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

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

تعداد بسیار زیاد مدل وب سایت وجود دارد که هر کدام تخصصی برای سرویس دادن کاری هستند. تعدادی از وب سایت ها شامل این تقسیم بندی میباشند:

. Archive Sites :  برای نگهداری کردن از فضا ها و اطلاعات الکترونیکی با  ارزش که قابل خراب شدن هستند استفاده می شود . دو مثال در این مورد می گویم “Internet Archive” که از سال 1996 از میلیاردها صفحات قدیمی و جدید  نگه- داری و آنها را بایگانی کرده است، و دیگری “Google Groups” که در اوایل سال 2005شروع به بایگانی کردن 845.000.000 پیغام پست شده”Usenet”در مورد  اخبار و بحثهای گروهی کرد.

.  Business sites : برای بهتر کردن امور تجاری و سرویسی.

.  Commerce Sites or eComerce Sites: برای فروش اجناس مانند “Amazon”

.  Community Sites: سایتی که اشخاص با علایق و سلایق مشابه با هم در ارتباط هستند، معمولا به وسیله “Chat” و “Message Board”ها.

.  Database : سایتی که استفاده اصلی آن جستجو و نمایش دادن اطلاعات ریز و جزئی مانند سایت “Internet Movie Database” یا “Political Gravyard”.

.  Development Sites : سایتی که هدف آن محیا کردن اطلاعات و منابع مرتبط به بهسازی نرم افزارها  و طراحی سایت ها می باشد.

. Directory Sites  : سایتی که دارای چیزهای مختلفی می باشد که موضوع و به موضوعهای مرتبط تقسیم می شود. مانند “Yahoo! Directory” ، “Google directory” و “Open Directory Project” .

.  Download Sites : محیطی برای دریافت فایل ها و اطلاعات الکترونیکی مانند نرم افزارها ، دموی بازیها و عکسهای کامپیوتری.

.  Game Site : سایتی که که در آن بازی و حتی محیط بازی وجود دارد که خیلی از مردم برای بازی به آنجا می روند، مثل “Zone.com” ، “Pogo.com” و “MMORPGs Planetarion” و “King Of Chaos” .

. News Site  : مشابه سایتهای اطلاعاتی ولی مختص به توزیع کردن اخبار و نظرات.

.  Porn : سایتی مربوط به مسائل جنسی و غیر اخلاقی که در آنها عکسها و ویدوهای غیر اخلاقی و جنسی به دید عموم گذاشته می شود.

. Search Engines  : سایتی که اطلاعات اساسی و اصلی را محیا می کند و برنامه ریزی شده است برای مدخل جستجو در دیگر سایتها. به عنوان یک مثال ساده “Google” و دیگری که بسیار معروف است “Yahoo!”

.  Shock Sites : شامل عکس ها و چیزهای دیگر که برای بعضی از تماشاگران زشت و بی ادبانه متهاجم می باشد.

.  Weblog (or Blog) : برای نوشتن مصالب آنلاین در اینترنت و پست کردن برنامه و خاطرات روزانه، که ممکن است که دارای اطاقهای گفتگو باشد.

.  Wiki : سایتی که کابران آن آنرا شاهکارانه ساخته اند.(مانند wikipedia)

خیلی از وب سایت ها مخلوطی از سبک ها می باشند. به عنوان مثال  یک سایت تجاری می تواند فعالیت تجارتی کند ولی علاوه بر آن می تواند می تواند حاوی اطلاعات ارزشمندی باشد مثل “White Papers” یا بعضی سایت ها مانند سایتهای جنسی (Porn) می توانند یک تجارت کوچک اینترنتی به وسیله فورش عضویت و اجازه ورد به سایت کنند.

خیلی از سایت های تجاری تصاویری بروشور مانند دارند، یعنی تبلیغاتی که می تواند دست به دست بچرخد. بعضی از وب سایتها به عنوان یک وسیله ارتباطی می توانند به وسیله “Webchat” بین مردم ارتباط برقرار کند.

وب سایتها وادار به محدودیت های معماری شده اند. سایت های بسیار وسیع مانند Microsoft , Yahoo! , Google و بسیاری سایت دیگر سرورهایی  را به خدمت گرفته اند و  تجهیزات را با بالانس مناسب بارگذاری می کند . همانند ” Cisco Content Services Switches” یا راه حل های “F5 BigIP”.

طراحي سايت به چه معنا مي‌باشد ؟

بعد از ثبت دامنه ( Domain )  و انتخاب ميزبان ( Host ) و اختصاص فضا ، نوبت به طراحي سايت مي‌رسد.
طراحي سايت مهيج ترين و خلاقانه ترين بخش اين كار است.

به طوري كلي دو نوع سايت وجود دارد : ثابت يا استاتيك (Static )  ، پويا يا  ديناميك ( Dynamic )

• سايت ثابت يا  (Static ) :

سايت استاتيك سايتي است كه ثابت است. عموما از سايت هاي استاتيك براي نمايش اطلاعاتي استفاده مي كنند كه تغيير نمي‌كنند و يا تغيير سايت در فاصله هاي زماني خيلي طولاني انجام مي‌گيرد. ( مثلا سالي يك بار ) براي درك بهتر تصور كنيد كه سايت استاتيك يك كاتالوگ الكترونيكي از يك شركت مي‌باشد كه مطالب ثابت و مشخصي را نشان مي‌دهد مثل محصولات و رزومه شركت. سايت استاتيك در واقع فايلي معمولي است كه هر بار به ازاي درخواستي كه كاربران ارائه مي دهند ، توسط سرور براي آنها ارسال مي گردد .

• سايت پويا يا  ديناميك ( Dynamic )

سايت ديناميك سايتي است كه قابليت تغيير  دارد. عموما از سايتهاي ديناميك براي نمايش اطلاعاتي استفاده مي‌كنند كه قرار است مدام تغيير كنند . مثلا در يك قسمت از وب سايت برنامه با پرسيدن نام و اسم عبور از كاربر اطلاعات خاصي ( مثلا مقاله هاي قابل دريافت ) را به كاربر نمايش مي‌دهد و يا در مثال قبلي اگر بخواهيم قيمت محصولي را كه هر روز تغيير مي‌كند نمايش بدهيم و هر هفته گزارشي از وضعيت تغيير قيمت محصول را به كاربرنمايش دهيم بايد از سايت ديناميك استفاده كنيم.ديناميك  بودن سايت مطلبي كاملا نسبي است و سايتهاي مختلف بر حسب نياز از درجات پويايي متفاوتي استفاده مي‌كنند

• ASP بر مبنای ISAPI بنا شده است . ASP یک DLL است بنام DLL که معمولا در دایرکتوری های سیستمی ویندوز یافت می شود . IIS فایل های ASP را به ASP.DLL راهنمایی می کند ، در اینجا موتور ASP فایل ها را پردازش می کند و سپس نتایج را برای کلاینت می فرستد. کلدفیوژن از پسوند CFM استفاده می کند . iis ازین پسوند برای تعیین مسیر درخواست هاو راهنمایی آنها به کلدفیوژن توسط ارتباط دهنده ISAPI استفاده می کند.
• ASP از کد های اسکریپتی سرور ساید مانند VBSCRIPT استفاده می کند و همچنین کد های کلاینت ساید جاوا اسکریپت .کلدفیوژن هم از فایل هی CFML برای عملیات سرور ساید و از جاوا اسکریپت جهت اعمال کلاینت ساید استفاده می کند . اما کلدفیوژن با asp فرق دارد . چون کلدفیوژن فقط یک DLL نیست که توسط IIS لود شود بلکه کلدفیوژن یک سرویس است که روی ویندوز اجرا میشود وشما می توانید آن را مانند هر سرویس دیگر (مثلا SQL ) بحالت START و STOP در آورید .
• پس نحوه کار ASP و Coldfusion با IIS یکسان است . نحوه برنامه نویسی در هر دو یکسان است ( استفاده همزمان سرور ساید و کلاینت ساید) و تفاوت آنها در پسوند فایل ها و زبان استفاده شده در اسکریپت نویسی آنهاست.

دات نت قدم بعدی ASP :

• NET برای کار با دات نت فریم ورک مایکروسافت طراحی شده . برخلاف ASP که یک زبان اینترپرتری (مفسری) است ،ASP.NET قبل از اجرا در همان لحظه درخواست به زبان MSIL (Microsoft Intermediate Language ) ترجمه می شود . کدهای ترجمه شده ASP.NET که معمولا کدVB.NET یا C# هستند در محیط CLR ترجمه می شود .  کلدفیوژن زبان کامپایلری است که در لحظه اجرا کد هایش به بایت کد جاوا تبدیل می شوندو کد تبدیل شده در محیطی بنام Java Virtual Machine اجرا می شود.
• NET از منابع و آبجکت ها و API های دات نت استفاده می کند که در CLR هستند . مدیریت حافظه و اجرا و همه چیز بعهده CLR می باشد . ASP.net بجای پردازش در یک فایل dll تنها، از CLR استفاده می کند اما کلدفیوژن بجای اینکه فقط در محیط دات نت مایکروسافت اجرا شود روی تمام محیط های J2EE اجرا میشود و از ابجکت ها و منابع و API های جاوا و J2EE که داخل java VM است استفاده می کند.  و مدیریت حافظه  و اجرا و بقیه بعهده VM است  .

طراحی و ارتقا و سايت :

مهمترين فاکتور ها در طراحي يک سايت Dynamic , محتوای سايت ، سرعت نمايش سايت و قابليت دسترسي کاربران به اطلاعات سايت است آمار بياتگر آنست که ٨٥٪ مراجعه به ساِيتهای اينترنتي از طريق موتورهای جستجو صورت می پذيرد سايتی گه در صفحات اول موتور سر چها يافت نشود مانند آنست که وجود خارجی ندارد لذا امروزه کد گزاری صفحات طراحي شده اهميت بسيار زيادی دارد موتور سرچها کد گزاری غير علمی را spam  تلقی کرده و ممکن است سايت را برای هميشه  از موتور سرچهاخارج نمايد

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

اگر کلمات iran tour ,iran visa, iran company , cheap carpet , iran industrial products , …. را در موتور سرچها يی مثل yahoo, google جستجو نماييد  از ميان صد ها هزار سايت ، سايت www.irantour.org در صفحه اول ظاهر خواهد شد.

در طراحي سايت اصطلاحاتي مرسوم است كه دانستن آن به شما كمك مي كند در زير فهرستي از اين اصطلاحات را تهيه كرده ايم.

1- Home Page
2- سايت (صفحه) استاتيك
3- سايت (صفحه) دايناميك
4- سايت (صفحه) برنامه نويسي شده
5- طراحي انيميشن Flash
6- طراحي لوگو
7- دوزبانه بودن
8- قالب يا Template

Home Page

به اولين صفحه نمايشي هر سايت معمولا Home Page مي گويند. اهميت اين صفحه از آنرو است كه اولين برخورد مخاطب شما با سايت شما از طريق اين صفحه انجام مي گيرد . از اينرو اين صفحه علاوه بر آنكه معرف سليقه شما مي باشد مانند ويترين موجب معرفي بيزينس شما و جلب مخاطب شما مي شود. از طرف ديگر فرم كلي اين صفحه معمولا بعنوان قالب صفحات ديگر استفاده مي شود و سرانجام اينكه اين صفحه از ديد موتورهاي جستجوگر مهمترين صفحه است و بايد به نوعي طراحي شود كه براي كلمات كليدي مربوط به كار شما در موتورهاي جستجو گر بيشترين امتياز ممكن را بياورد. از اينرو طراحي اين صفحه از بقيه صفحات سايت شما مهمتر ، دقيقتر و زمانبر تر است.

سايت (صفحه) استاتيك

در طراحي يك وب سايت به صفحه اي استاتيك گفته مي شود كه كليه اجزا آن صفحه به صورت ثابت باشند و به كارهايي كه مخاطب انجام مي دهد عكس العمل و پاسخ ندهد.

سايت (صفحه) دايناميك

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

سايت (صفحه) برنامه نويسي شده

در طراحي يك وب سايت به صفحه اي برنامه نويسي شده گفته مي شود كه به صورت برنامه (CGI‌يا PHP يا ASP) در سرور قرار گرفته باشد و خروجي هر صفحه در هربار توسط سرور و بنا به آن برنامه ايجاد شود. از اينرو خروجي صفحات كاملا به روز و مطابق نياز مراجعه كننده خواهد بود.

امروزه هيچ سايت معتبري در دنيا وجود ندارد كه تعداد از صفحات و يا تمامي صفحات آن حاصل برنامه نويسي نباشد.

طراحي انيميشن Flash

امكاني گرافيكي است كه موجب جذابيت بيشتر سايت مي گردد. بعضي از سايتها از اين امكان جهت نمايش تيزر و يا فيلم تبليغي در ابتداي سايت خود استفاده مي كنند و يا كل سايت خود را بر اساس آن ايجاد مي كنند كه علاوه بر هزينه بالا به علت حجم زياد معمولا باعث مي شود كه كاربر از سايت مايوس شود و همچنين از نظر موتورهاي جستجو گر از ارزش سايت كاسته مي شود.

طراحي لوگو

طراحي لوگوي مجموعه شما به صورت انيميشن و يا ثابت كه قابل استفاده در وب باشد را طراحي لوگو مي نامند

دوزبانه بودن

ايجاد سايت به گونه اي كه مخاطب بتواند زبان مورد نظر خود را انتخاب كند و مطالب سايت را در آن زبان ببيند ، طراحي سايت به صورت چندزبانه مي گويند.يعني بر اساس كشوري كه مخاطب از آن به سايت وصل شده است زبان سايت اتوماتيك تغيير مي كند.

قالب يا Template

صفحات يك سايت در قالبي كلي طراحي مي شود كه مطالب سايت در اين قالب و در صفحات مختلف جاي مي گيرد. به اين قالب كه طراحي كلي سايت را شامل مي شود Template مي گويند. 

چگونه ساخت يک وب سايت را آغاز کنیم

چگونه آغاز کردن ساخت يک وب سايت, جدا از مباحث نرم افزاري نياز به يکسري آگاهي در مورد خصوصيات خاص صفحه هات اينترنتي دارد که در زير به اختصار در مورد آن توضيح مي دهيم.

طراحي صنعتي

چگونه يك مشتري جنس مورد نظر خود را شناسايي و رديابي مي كند، و احتمالا پيشنهادات خوبي را براي فروش بر روي صفحه وب ارائه ميدهد؟ اين مبارزه طلبي طراحي صفحات تجاري وب مي باشد

بيشترين توليد كنندگان صنعتي با جديت به سمت مشتريانشان جهت گيري كرده و صفحات طراحي شده براي كمپانيهاي صنعتي، ميبايست تعصبات مشتري گرايانه قوي داشته باشند.

گرايش به مشتري در روشي كه صفحات صنعتي، مشتري را چه از لحاظ تصويري و چه از لحاظ تعاملي درگير مي كنند، ديده مي شود. صفحات صنعتي غالبا معموليتر از صفحات ديگر به نظر مي دهند.

صفحات صنعتي در كل داراي سه عنصر مي باشند

خصوصيات محصول: هر مشتري مي بايست بتواند يك محصول خاص را از ميان مجموعه اي از محصولات مشخص كند. اين كار مي تواند به صورت تصويري، با استفاده از يك ليست انتخابي يا با استفاده از يك برنامه جستجو انجام شود.

مشخصات محصول: بيشتر محصولات صنعتي همراه با اطلاعاتي عرضه مي شوند كه صفحه مشخصات ناميده مي شود يك صفحه مشخصات تركيبي از متن، تصوير و توصيفاتي در مورد كارايي محصول در يك ورق كاغذ مي باشد.

خصوصيات كارايي يا تصوير توصيف كننده ساختار كالا، اغلب عامل فروش يك محصول مي باشند.
البته با توجه به قابليتهاي وب، ايجاد صفحه مشخصات كالا در وب به روش سنتي، محدود كننده به نظر مي رسد. مشخصات كارايي كالا ميتواند به صورت سه بعدي و همراه با حركت ايجاد شود، همچنين خود محصول در حال انجام عمل، قابل نمايش باشد.

ارتباط با مشتري: ‏‏‏كارتهاي جالبي را كه در آنها از شما سئوال مي شود «آيا مايليد كه نمايندگي سرويسهاي مشتري در مورد كالايي خاص با شما تماس بگيرد؟» را بخاطر بياوريد. با استفاده از وب سئوالات تقريبا پس از پرسيده شدن جواب داده خواهند شد.

طراحي صفحات خرده فروشي

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

در اين نوع طراحي بايد مسائل زير را در نظر گرفت:
خصوصيات تصويري و سازماني فروشندگي خرده فروشيهاي موفق چيست؟
اجزا ساختاري خرده فروشي چيست؟
از چه خصوصيات وب ميتوان به گونه اي موثر در طراحي صفحات خرده فروشي سود جست؟

صفحات تجاري

صفحاتي كه براي مخاطبين تجاري طراحي مي شوند با صفحات خرده فروشي و صنعتي تفاوت دارند. به خاطر داشته باشيد كه هر شركت داراي زندگي و يك شخصيت وجودي در زمينه محصولات ويژه يا عمليات فروش خاصي مي باشد. يك شركت تلاش زيادي را صرف به تصوير كشيدن يك نماي حساب شده از خود ميكند. اين تلاش ممكن است شامل اسم،ارم شركت،رسم الخطي كه در مكاتبات شركت استفاده ميشود. رنگهاي مورد استفاده و اينكه دقيقا چه اسامي براي معرفي محصولاتشان مي كنند، باشد.
يك صفحه تجاري مي بايست منعكس كننده فرهنگ ان شركت باشد. اين بدان معني است كه صفحات وب يك بانك، اساسا با صفحات وب يك توليد كننده اسباب بازي متفاوت است.
قطعات اصلي پازل صفحه وب تجاري شامل اجزا زير ميباشد
نام شركت رسما چگونه استفاده ميشود؟ ايا به طور كامل نوشته ميشود يا مخفف؟ ايا نام، يك نام تجاري ثبت شده است؟

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

موسسات آموزشي

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

جنبه يكسان صفحات آموزشي، ترتيب عمليات داخل موسسات ميباشد. اين مسئله در تضاد كامل با صفحات توليد كنندگان و فروشندگان جز ميباشد. ترمهاي مدارس هميشه مدت ثابتي دارند. تاريخ شروع و خاتمه از قبل دقيقا مشخص شده اند تقاضانامه و عمليات ورود به موسسه همگي استاندارد شده ميباشند. گذراندن كل دوره تحصيلي اجباري است و معمولا ميبايست تحت مجموعه اي از مراحل مشخص گذرانده شوند. كارنامها مقدار پيشرفت محصل را مشخص ميكنند. دانش اموزان براساس پيشرفتشان طبقه بندي ميشوند، در حقيقت بر اساس وضعيت قبولي هر مقطع طبقه بندي ميشوند، اين صفحات به دليل كمبود آزادي عمل طراح، جز مشگل ترين صفحات از لحاظ طراحي ميباشد

صفحات مربوط به سرگرمي

در مقابل صفحات تجاري، صفحات مربوط به سرگرميها قرار دارند. درست است كه در اينجا هم ممكن است برخي محدوديتهاي تجاري اعمال شوند(سوني، ديسني و غيره )ولي اين صفحات در معموليترين و مورد قبولترين شكلشان داراي كمترين محدوديتهاي طراحي بوده و آزادي عمل زيادي براي طراح وجود دارد. مشتريان سرگرميها اغلب جز بي ثباترين و مشگلترين مشتريان براي شناسايي و رديابي ميباشند. موضوعي كه در سال گذشته مورد توجه ترين موضوعات بوده ممكن است ديگر موردتوجه نباشد.

صفحات وب سرگرمي داراي خصوصيات زير ميباشد؛كمترين ساختارو عمل-عكس العمل بيشتر
اعتماد بيشتر به تصوير نسبت به اطلاعات نوشتارياستفاده بيشتر از منابعي كه مشتريان بالقوه اين نوع صفحات وب مجبور به يادگيري آن هستند.

انجام محاسبات سطح بالا به منظور بهبود سرعت پردازنده، عمق نمايش و پهناي باند شبكه.
حداقل در حال حاضر، كمبود مهمي كه در مورد صفحات سرگرمي وجود دارد تفاوت كلي بين شمايل صفحات وب با شكل واقعي سرگرمي واقعي مورد توجهشان مثل فيلم، كتاب، بازي، ضبط صوت، كنسرت و نمايش زنده و چيزهاي ديگر را با صفحات وب مقايسه كنند، به سادگي به عدم واقعگرايي صفحات وب نسبت به رسانه اصلي پي ميبرند. براي موفقيت صفحات سرگرمي وب يا بايد واقعگرايانه صفحات وب با وسايل موجود در زندگي منطق شود و يا صفحات سرگرمي وبي طراحي شود كه هيچ مرجعي در دنياي واقعي براي مقايسه نداشته باشند

اهميت رنگ در طراحي وب

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

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

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

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

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

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

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

عمل و عكس العمل :

رنگ روي حس ما و ادراك ما و عكس العمل ما تاثير ميگذارد . يك بيننده با آگاهي از سايتتان وارد سايت شما شده است ، حال شما بايد او را همچنان سر شوق نگه داريد .شما 8 الي 10 ثانيه وقت داريد تا او را از لحاظ بصري جذب كنيد . با استفاده از رنگ شما ميتوانيد حس خوش آمد گويي و راحتي و اعتماد را به بيننده منتقل كنيد . اگر شما گرافيك هاي يك سايت را تغيير دهيد در اصل زبان گفتگوي تصويري آن را عوض كرده ايد و بدين سان است كه عكس العمل متفاوتي از بازديدكننده سايت سر ميزند.

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

سايت هايي كه اصطلاحا سايت هاي رنگين كماني هستند و از همه جور رنگ در هم استفاده كرده اند كمترين زمان بازديد توسط بيننده ها را دارند و بيننده خيلي سريع ازين سايت ها خارج ميشود . زيرا چشم براي

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

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

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

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

افزایش سرعت بارگزاری صفحات

افزایش سرعت بارگزاری صفحات یکی از مسائل مهم در طراحی صفحات وب می‌باشد. در صورتی که زمان بارگزاری یک صفحه وب طولانی باشد، معمولا” کاربران از مشاهده آن صفحه صرف نظر می‌کنند و دیگر به آن باز نمی‌گردند این به معنی از دست دادن کاربران سایت می‌باشد که برای مدیران یک سایت اصلا” خوشایند نیست. در ادامه ده روش موثر برای افزایش سرعت بارگزاری صفحات وب بیان می‌شود.

1. 1. استفاده از CSS برای ایجاد قالب و طرح صفحه به جای Table

CSS یا Cascading Style Sheetsها به دلایل زیر از Tableها سریعتر بارگذاری می‌شوند:

• مرورگرها قبل از نمایش محتویات یک جدول دو بار آن را مرور می‌کنند. یک بار برای مشخص شدن ساختار آن و یک بار هم برای تعیین محتویات آن.
• جداول (Tables) در یک مرحله بر روی صفحه به نمایش در می‌آیند. هیچ قسمتی از یک جدول بر روی صفحه ظاهر نمی‌شوند تا اینکه تمام جدول همراه با محتویات آن به طور کامل بارگذاری و پردازش شود.
• عمل موقعیت دهی و یا ایجاد یک فضای خاص در جداول معمولا” با استفاده از تصاویر کوچک خاصی (Spacer Images) صورت می‌پذیرد.
• بطور کلی CSS ها کد کمتری نسبت به جداول نیاز دارند.
• تمام کدهای مورد نیاز برای ایجاد طرح و نمای صفحه قابلیت جایگزین شدن با یک فایل CSS خارجی را دارند. که این فایل پس از یک بار فراخوانی در کامپیوتر کاربر ذخیره (cache) می‌شود. اما قالب‌های ایجاد شده با استفاده از جداول در هر صفحه HTML تکرار می‌شوند و با درخواست هر صفحه جدید دوباره باید بارگذاری (Download) شوند.
• با استفاده از CSS ها امکان تعیین ترتیب بارگذاری صفحه وجود دارد. یعنی می‌توان محتویات اصلی صفحه را قبل از بارگذاری تصاویر با حجم بالا به نمایش درآورد. این کار قطعا” کاربران سایت شما را خوشحال خواهد کرد.

برای آشنایی بیشتر با CSS و کارهای جالبی که می توان با آن در یک سایت انجام داد می توانید از آموزشهای خوب و مفید سایت HTML Dog استفاده کنید.

2. 2. از تصاویر برای نمایش متن استفاده نکنید

در اینجا نیز CSS به ما کمک خواهد کرد. در مواردی که کار را می توان با CSS بطور کامل انجام داد از تصاویر استفاده نکنید. به کد زیر دقت کنید:

a:link, a:visited, a:active {
width: 7em;
font: bold 0.8em Georgia;
text-decoration: none;
display: block;
margin-left: 0;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-left: 1px solid #6cf;
border-bottom: 1px solid #068;
border-right: 1px solid #068;
padding: 0.25em 0.5em 0.4em 0.75em;
border-top: 1px solid #6cf;
}

a:hover {
background: #28b;
padding: 0.35em 0.35em 0.25em 0.9em;
border-top: #069;
border-right: #6cf;
border-bottom: #6cf;
border-left: #069;
}

نتایج استفاده از کدهای بالا را در این صفحه مشاهده کنید. با استفاده از این کد می‌توانید یک کلید جذاب ایجاد کنید که با رفتن موس بر روی آن پایین می‌رود. اگر به نحوه ایجاد این گونه کلیدها علاقمند هستید می‌توانید مقالات بخش CSS سایت A List Apart را مطالعه کنید.

3. 3. فراخوانی تصاویر تزیینی بوسیله CSS

با CSS می‌توان تصاویر را بصورت قسمتی از یک زمینه (background) نمایش داد. بطور مثال یک تصویر 200×200 را می‌توان بصورت زیر نمایش داد:

<div class=”pretty-image”></div>

کد HTML

.pretty-image {
background: url(filename.gif);
width: 200px;
height: 200px
}

کد CSS

در ابتدا شاید این کار بی معنی به نظر برسد اما این کار سرعت بارگذاری و نمایش صفحات را افزایش می‌دهد. بطور کلی مرورگرها تصاویر زمینه را بعد از بقیه اجزا بارگذاری می‌کنند. با استفاده از این تکنیک متن درون صفحه فورا” به نمایش درآمده و کاربر می‌تواند آن را مشاهده و در بین آن گردش کند و در همین هنگام تصاویر با حجم زیاد بارگذاری می‌شوند.

در این روش نمی‌توان از خصوصیت ALT استفاده نمود اگر واقعا” می‌خواهید که از این خصوصیت استفاده کنید، کد HTML بالا را بصورت زیر تغییر دهید.

<img src=”spacer.gif” class=”pretty-image” alt=”description” />

در اینجا spacer.gif یک تصویر 1×1 پیکسل شفاف (transparent) است که 50 بایت حجم دارد. در این حالت ابتدا محتوای اصلی بارگذاری می‌شود و بعد از آن تصویر بزرگ و حجیم همراه با خصوصیت ALT بطور کامل بارگذاری می‌شود. دقت داشته باشید که این روش برای نمایش تصاویر تزئینی مناسب می‌باشد نه برای تصاویر حاوی اطلاعات. همچنین کاربرانی که CSS آنها غیر فعال است قادر به مشاهده تصویر (یا متن مربوط به ALT) نمی‌باشند.

4. 4. استفاده از انتخاب کننده‌های (selectors) مناسب

به کد نامناسب زیر توجه کنید:

<p class=”text”>This is a sentence</p>
<p class=”text”>This is another sentence</p>
<p class=”text”>This is yet another sentence</p>
<p class=”text”>This is one more sentence</p>

.text {
color: #03c;
font-size: 2em
}

به جای اختصاص دادن مقدار به هر پاراگراف، می‌توان همه را در یک تگ <div> قرار داده و مقدار را به آن اختصاص دهیم:

<div class=”text”>
<p>This is a sentence</p>
<p>This is another sentence</p>
<p>This is yet another sentence</p>
<p>This is one more sentence</p>
</div>

.text p {
color: #03c;
font-size: 2em
}

در ابتدا شاید این موضوع زیاد با اهمیت به نظر نرسد اما اگر شما بتوانید از آن بطور صحیح در تمام صفحه استفاده کنید به راحتی 20% از حجم فایل شما کم خواهد شد. همچنین شاید توجه کرده باشید که مقادیر مربوط به رنگها کوتاه‌تر از حالت عادی است. 03c# کوتاه شده مقدار 0033cc# است شما می‌توانید از این روش خلاصه کردن در هر جایی که مقادیر با این فرم قرار دارند استفاده کنید.

5. 5. استفاده از خلاصه نویسی خصوصیات در CSS

در زیر روش خلاصه نویسی بعضی المانهای CSS را مشاهده می‌کنید:

font: 1em/1.5em bold italic serif

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

Font

border: 1px black solid

border-width: 1px;
border-color: black;
border-style: solid

Border

background: #fff url(image.gif) no-repeat top left

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Background

margin: 2px 1px 3px 4px (top, right, bottom, left)

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-right: 4px

Margin

margin: 5em 1em 3em (top, left and right, bottom)

margin-top: 5em;
margin-bottom: 1em;
margin-right: 1em;
margin-right: 4em

Margin

margin: 5% 1% (top and bottom, left and right)

margin-top: 5%;
margin-bottom: 5%;
margin-right: 1%;
margin-right: 1%

Margin

این قوانین بطور عملی برای border و padding نیز قابل استفاده است.

6. 6. استفاده از فراخوانی نسبی

سعی کنید از آدرس دهی مطلق پرهیز کنید زیرا فضای بیشتری را اشغال می‌کند و تغییر دادن آنها در آینده مشکل است. یک مثال از فراخوانی مطلق بصورت زیر است:

<a href=”http://www.URL.com/filename.htm”>

که بهتر است به این صورت باشد:

<a href=”filename.htm”>.

اما اگر فایل‌ها در فهرست‌های مختلف باشند از خلاصه نویسی‌های زیر استفاده کنید:

دستور	فراخوانی
<a href=”/filename.html”>	http://www.URL.com/filename.html
a href=”/directory/filename.html”>	http://www.URL.com/directory/filename.html
<a href=”./”>	index.html در فهرست جاری
<a href=”../”>	index.html از یک فهرست بالاتر
<a href=”../filename.html”>	filename.html از یک فهرست بالاتر
<a href=”../../”>	index.html از دو فهرست بالاتر

7. 7. حذف تگ‌های غیر ضروری META و مقادیر درون آن

بسیاری از تگهای META غیر ضروری هستند و کار زیادی انجام نمی‌دهند. در صورت علاقه می‌توانید لیست تگهای META را در این آدرس مشاهده کنید. تگ‌های METAی با اهمیت برای موتورهای جستجو تگ‌های keywords و description هستند. البته استفاده نادرست و بیش از اندازه از آنها به تازگی باعث کاهش اهمیت آنها شده است. در هنگام استفاده از هرکدام از این تگ‌ها سعی کنید حجم محتوای آنها برای هر یک کمتر از 200 کاراکتر (حرف) باشد. هر مقداری بیش از این باعث افزایش حجم صفحه شما خواهد شد. متا تگ‌های طولانی برای موتورهای جستجو مناسب نیستند زیرا کلمات کلیدی شما را کم رنگ می‌کنند.

8. 8. انتقال JavaScript و CSS درون صفحه به فایلهای مستقل

برای استفاده از CSS که در فایل خارجی قرار دارد از کد زیر استفاده کنید:

<link type=”text/css” rel=”stylesheet” href=”filename.css” />

و برای استفاده از JavaScript که در فایل خارجی قرار دارد از کد زیر استفاده کنید:

<script language=”JavaScript” src=”filename.js” type=”text/javascript”></script>

هر فایل خارجی یک بار فراخوانی شده و بعد از آن در کامپیوتر کاربر (برای استفاده‌های بعدی) ذخیره می‌شود. بجای قرار دادن JavaScript و CSS در تک تک صفحات HTML آنها را برای یک بار در یک فایل خارجی قرار دهید و از آن درون صفحات استفاده کنید. فراموش نکنید که هیچ محدودیتی برای استفاده از این فایل‌های خارجی وجود ندارد. برای مثال بجای ساختن یک فایل CSS بزرگ، یک فایل برای قسمتهای یکسان در تمام صفحات و چند فایل هم برای قسمت‌هایی که در صفحات خاص استفاده می‌شوند بسازید.

9. 9. استفاده از / در انتهای آدرس فهرست‌ها:

بجای استفاده از این کد:

<a href=”http://www.URL.com/directoryname” >link</a>

از کد زیر استفاده کنید:

<a href=”http://www.URL.com/directoryname/”>link</a>

زیرا اگر از / در انتهای آدرس استفاده نکنید سرور متوجه نخواهد شد که اشاره به فایل شده یا فهرست. اما با اضافه کردن / سرور فورا” متوجه می‌شود که به یک فهرست اشاره شده و آنرا نمایش می‌دهد.

چطور یک قالب را فارسی کنیم؟

طراحی با استانداردهای وب یکی از بحثهای داغ طراحان و توسعه دهندگان حرفه ای است. و اکثر طراحان سعی در انطباق خود با این استانداردها دارند و هر روز به نتایج بهتری دست پیدا می کنند.

همچنین برنامه نویسان و توسعه دهندگان سیستمهای مدیریت محتوای تحت وب نیز تمرکز خود را بر روی استاندارد سازی قرار داده و از امتیازات برتر هر CMSی استاندارد بودن برنامه و تولید خروجی های استاندارد میباشد.

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

در اینجا به روند بومی سازی یا فارسی سازی قالب سیستم مدیریت بلاگ وردپرس می پردازیم که این مراحل برای هر قالب و CMS دیگری صدق می کند.

از کجا شروع کنیم ؟

تمامی قالبهای استاندارد اصل جدایی ظاهر از ساختار (و گاها رفتار) را رعایت می کنند. در نتیجه هر قالب دارای حداقل یک فایل شیوه نامه (Style Sheet) می باشد که عمده فعالیت ما بر روی این قسمت متمرکز می شود.
برای فارسی سازی بهتر است قالب را در محیطی تحت کنترل و با حداکثر امکانات نصب کنیم. منظور از امکانات محتوای مناسب و کافی برای آزمایش بخشهای مختلف قالب و امکانات آن می  باشد که در این مورد برای ورپرس باید وبلاگی با مثلا 20 مطلب ، 7 دسته بندی تو در تو ، چند صفحه و آرشیوماهانه برای 4 ماه داشته باشیم.

گام اول : جهت و چیدمان نوشته ها

اولین مسئله ای که در مورد قالبهای انگلیسی وجود دارد جهت یا Direction نوشته هاست.که در زبان انگلیسی از چپ به راست و در زبان فارسی از راست به چپ می باشد. از آنجایی که جهت و زبان پیش فرض مرورگرها برای نمایش صفحات انگلیسی LTR میباشد در قالبهای انگلیسی نیازی به تعریف جهت نوشته ها نیست که برای فارسی سازی باید به بخشهای مورد نظر این ویژگی را اختصاص دهیم.اما چطور و کجای صفحه ؟!
شاید ساده ترین راه اضافه کردن این ویژگی به body یا html به نظر بیاید ، ولی راه های بهتری هم هست !
تغییر جهت نوشته ها توسط عنصرbody نوار عمودی پیمایش (Scrollbar) را به سمت چپ می برد. ممکن است کل ساختار صفحه را به هم بریزد و از آنجایی که بالاترین عنصر از لحاظ نمودار درختی ساختار شیئی سند است تمامی عناصر دیگر صفحه این خاصیت را از body به ارث می برند و احتمالا همین موضوع مشکلات فراوانی ایجاد می کند ! بهترین راه تغییر جهت متن در بخشهای خاص دارای متن است. در وبلاگها معمولا دو بخش اصلی با متن زیاد وجود دارد : بخش محتوای اصلی یا بدنه مطالب و بخش نوار کناری وبلاگ. بهترین راه تغییر جهت متن به طور موضعی در این قسمتهاست.

برای پیدا کردن و هدف قرار دادن عنصر مورد نظر در شیوه نامه می توانید از نوار ابزار قدرتمند فایرفاکس با عنوان WebDeveloper Toolbar استفاده کنید !

در بعضی موراد برای قالبهای انگلیسی و برای بخش خاصی جهت چیدمان یا text-align تعریف شده که برای متن فارسی باید از چپ به راست تغییر کند. دقت کنید که این مورد هم مثل جهت متن باید در محل مناسب اعمال شود.

در نهایت بهتر است جهت و چیدمان عناصری مانند Code و Blockquote را چپ به راست بکنید تا در صورت نیاز به قرار دادن متن انگلیسی یا کد در صفحه مشکلی ایجاد نشود.

گام دوم : ساختار صفحه ، فواصل و کادرها

مرحله بعد پرداختن به ساختار کلی صفحه و فواصل است. معمولا در اکثر قالبها نیازی به تغییر ساختار و شکل کلی قالب و محل قرار گرفتن بلوکهای مختلف نیست. در مورد فواصل هم اغلب توسط دو ویژگی margin و padding برای فاصله گرفتن متن از کناره های کادر و جایگیری مناسب عناصر استفاده می شود که باید فواصل موثر در زیبایی و جهت زبان فارسی را شناسایی و تغییر دهیم.

مثلا به احتمال زیاد در اکثر قالبها متن اصلی را به اندازه 20px از سمت چپ و 10px از سمت راست فاصله می دهند که باید جای این مقادیر عوض شود.

نکته قابل توجه این است که لزومی به تغییر تمامی فواصل نیست و قطعا کار عاقلانه ای نخواهد بود اگر تمامی margin-leftها را به margin-right تغییر دهیم و …

گام سوم : اندازه و نوع فونتها

حال که جهت نوشته ها راست به چپ تنظیم شده و فواصل به درستی تعیین شده باید نوع و اندازه فونتهای فارسی را مشخص کنیم. معمولا خواناترین فونتها برای متنهای اصلی فونت Tahoma با اندازه ای در حدود 9px تا 11px و فونت Arial با اندازه ای بین 12px تا 14px می باشد که بسته به سلیقه شما و شکل کلی قالب این مورد را تعیین می کنید. در اینجا شما با تجربه وبگردی و طراحی خود باید بهترین و مناسبترین فونت را برای متنها و عنواین انتخاب کنید. مثلا می دانید که فونت Tahoma برای عنواین درشت و با اندازه بالای 12px ظاهر زیبایی ندارد و یا فونت Arial و Times برای متنهای معمولی و با اندازه کمتر از 14px مناسب و خوانا نیستند. همچنین برای متنهای توضیحی و فرعی مانند اطلاعات طمان ارسال مطلب ، نظرات و … بهتر است از اندازه فونت کوچکتری استفاده شود.

مرحله نهایی : بخشهای گرافیکی و ریزه کاری ها

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

مسئله بعدی درباره تصاویر گرافیکی پس زمینه محل قرار گیری آنهاست که اکثر در سمت چپ عنوان یا آیتم لیست قرار گرفته اند که باید به سمت راست منتقل شود.

نکات قابل توجه در فارسی سازی !

    ممکن است مواردی پیش بیاید که وضعیت قرارگیری یا شکل ضاهری یک عنصر و یک بخش خاص را نتوانید با انتخابگرهای موجود شیوه نامه کنترل کنید و شکل دهید. در این موارد حتی الامکان سعی کنید با استفاده از انتخابگرهای (Selector) حرفه ای و پیشرفته عنصر مورد نظر را هدف قرار دهید و نحوه نمایش آنرا کنترل کنید و تنها در صورتی که امکان کنترل نبود به ساختار قالب یک تگ div یا span با کلاس مورد نظر اضافه کنید و توسط شیوه نامه به آن شکل دهید. بهتر است تمامی مواردی که به شیوه نامه اضافه می کنید را در یک بخش جدا و ترجیحا در انتهای شیوه نامه قرار دهید و با استفاده از Commentها در CSS مشخص کنید که در آینده پیگیری و تغییر آن راحتتر باشد.

نکته آخر اینکه ممکن است لازم باشد متنها و پیغامهایی را درون فایلهای قالب ترجمه کنید. اولا اینکه مطمئن شوید از ویرایشگر متن استاندارد با پشتیبانی UTF-8 استفاده می کنید و دوما سعی کنید که ترجمه مناسبی از متنها ارائه کنید و از کلمات رسمی استفاده کنید.

در آخر سعی کنید قالب فارسی شده را با مروگرهای مختلفی مانند IE ، FireFox و Opera آزمایش کنید و مشکلات احتمالی پیگیری و رفع کنید. و به سلیقه خودتان در صورت نیاز تغییرا ت کوچکی در فواصل و اندازه ها اعمال کنید.

در پایان اگر درست کار کرده باشیم شکل و ظاهر کلی قالب اصلی با متن انگلیسی با قالب فارسی شده ما باید یکی باشد

تاريخچه

در سال 1992 در دانشگاه مينه سوتا سيستمی به نام web به وجود آمد که دارای دو ويژگی خاص بود.

1. Graphic, Multi Media
2. Hyper Text (فقط کليک کردن و در سايت حرکت کردن )

صفحات اين سيستم توسط برنامه ای به نام HTML ساخته شد.

همچنين برای رد و بدل کردن اطلاعات:

HTTP(Hyper Text Transfer Protocol)

HTML Web page

• HTML يک text عادی و در حقيقت زبانی برای مارک کردن فايلهای text به يکديگر می باشد که آن را با TAG مشخص کرده و به صورت <tag name> می نويسند.

HTML توسط Tim Berners-Lee  در خلال دهه 90 ميلادي همراه با گسترش وب، شکوفا شد. اين زبان توسط مرورگر Mosaic معروفيت خاصي پيدا کرد. در آن زمان HTML در چند مدل منتشر مي شد که آن بستگي داشت به سازنده فايل و انجمنهايي که در زمينه وب فعاليت داشتند.

در نوامبر 1995 نسخه HTML 2.0 گسترش يافت و بلافاصله در همان سال HTML 3.0 منتشر شد، ولي استقبالي از آن نشد. در سال 1996 انجمن W3C شروع به فعاليت بر روي نسخه اين زبان کرد که حاصل کار آنها در 14 ژانويه 1997 انتشار HTML 3.02 بود. اين نسخه توانست رضايت اکثريت را جلب کند چون هماهنگي بيشتري با مرورگرهاي مختلف در سيستمهاي عامل متفاوت داشت. در تمام نسخه هاي اين زبان ، سعي بر اين شده بود تا نظر کساني که در زمينه وب سرمايه گذاري کرده بودند جلب شود و برنامه هاي توليد شده براي وب بتوانند مدت طولاني تري قابل استفاده باشند. به همين منظور HTML براي اهداف گسترده تري ، در وب توسعه يافت تا در کليه سيستمهاي اطلاع رساني و الکترونيکي کوچک و بزرگ با بکار بردن گرافيک و رنگها، قابليت بهره برداري بيشتري داشته باشد.

در 18 دسامبر 1997 نسخه HTML 4.0 در وب منتشر شد و در همين بين شرکتهاي توليد کننده مرورگر وب يکسري مشخصات منحصر بخود را به اين نسخه اضافه کردند که قابل اجرا در مرورگرهاي ديگر نبود. بعضي از اين تغييرات در W3C  مورد تاييد قرار گرفت اما بعضي ديگر نه. با تغييرات HTML مرورگرها مجبور به تغيير شدند تا با تحولات جديد سازگار شوند.

در تاريخ 24 آوريل 1998 در اين نسخه تجديد نظر شد و حاصل آن پيدايش HTML 4.01 بود که با کمي تغيير و رفع يکسري مشکلات، در W3C برسميت شناخته شد و اين انجمن استفاده از آنرا به توسعه دهندگان و طراحان وب ، توصيه کرد.

بطور کل مجموعه HTML 4 با قابليت استفاده از embeded objects, frames, scripting, style sheets و با کارآيي بالاتر جدولها و فرمها به وب معرفي شد، همچنين در اين نسخه توجه زيادي به افراد با توانايي کم شده بود تا اين افراد هم بتوانند از محيط وب استفاده کنند. اما مهمترين قدمي که در اين نسخه برداشته شد، پشتيباني HTML از زبانهايي بود که از راست به چپ  نوشته ميشدند مانند زبان فارسي، که در اين نسخه با پذيرفتن استاندارد ISO 10646  به هدف بزرگ بين المللي شدن اين زبان نزديک شدند تا همه مردم دنيا در هر کجا و با هر زباني بتوانند اسناد HTML را منتقل کنند.

HTML 4.01 تفاوت کمي با نسخه اصلي خود يعني 4.0 دارد اما در عوض هماهنگي بيشتري با نسل جديد زبان وب يعني XHTML و نسل بعدي يعني XML دارد. در اصل XHTML اساس و مقدمه XML است که براي هماهنگي و سازگاري HTML با XML منتشر شده است.

HTML 4 زبان بسيار قوي است براي طراحان و سازندگان محصولات وب اما در آن توجهي به دستگاههاي اطلاع رساني و الکترونيکي کوچک با قدرت و حافظه کمتر نشده است. به همين منظورW3C در 26 ژانويه 2000   اقدام به معرفي XHTML 1.0 کرد و در 19 دسامبر همان سال آنرا به رسميت شناخت و تاکيد به استفاده از اين نسخه کرد تا با بکارگيري ويژگيهايي که دارد دامنه استفاده از زبان محبوب HTML را گسترش دهد و مقدمات معرفي XML را فراهم کند.

فرمت کلی يک فايل HTML

يک فايل HTML از دو بخش Body و Head ،تشکيل می شود. شکل ساده يک فايل HTML به صورت زير است.

<HTML>

<HEAD>
<TITLE> This is the title</TITLE>
<HEAD/>

<BODY>
This is the the body
<BODY/>

<HTML/>

تگ HEAD

در برچسب HEAD از برچسب به نامهای TITLE و BASE و META استفاده می شود.

<HEAD>

<TITLE> </TITLE>

<META > </META >

<BASE >

<HEAD/>

TITLE:
برای تعيين لقب صفحه (چيزی که در قسمت Status Bar ديده می شود).

META:
1- برای تعيين نام و منبعی که برنامه توسط آن نوشته شده.

2- بهنگام کردن صفحات web توسط اين برچسب انجام می شود.

3- انتقال به يک صفحه ديگر web در زمان معيين.

مثال برای حالت اول: در اين حالت برای وارد کردن آدرس web خودمان به موتورهای جستجو در web مثل yahoo) و google و …) از META استفاده می کنيم:

<META name=”keyword”{اجباری} content=”Hedayat, students,zahiri,yaghoubi,schoolnet”)>
<META name=”description”{اجباری} content=”This is Hedayat high school”>

تگ HEAD

در برچسب HEAD از برچسب به نامهای TITLE و BASE و META استفاده می شود.

<HEAD>

<TITLE> </TITLE>

<META > </META >

<BASE >

<HEAD/>

مثال برای حالت دوم و سوم:

<META name=”vali”{دلخواه} http_equiv=”refresh” content=”زمان بر حسب ثانيه”>

با اين برچسب صفحه web بعد از 1 دقيقه بهنگام (refresh) خواهد شد.

در مثال بالا اگر در قسمت content به صورت زير عمل کنيم صفحه web بعد از 60 ثانيه به www.schoolnet.ir خواهد رفت:

Content=”60; URL= http://www.schoolnet.ir”

BASE:

برای مشخص کردن مبدا آدرس دهی از صفحات web می باشد.

<BASE href=”آدرس”>

<BASE href=”http://www.schoolnet.ir/~zahiri/index.htm”>

نکته مهم: در برنامه نويسی HTML برچسب ها به دو صورت با پايان و بی پايان نوشته می شوند.

1. <TAG>…………………………………</TAG>  با پايان
2. <TAG> بی پايان

تگ BODY

قسمت دوم يک فايل HTML را Body تشکيل می دهد که دارای Attributeهای زير می باشد.

<BODY  bgcolor = “رنگ پس زمينه صفحه”
background = “آدرس عکسی که به عنوان پس زمينه در صفحه وب قرار می گيرد. “
topmargin = “يک فضای خالی بالای صفحه بر حسب پيکسل ايجاد ما کند”
leftmargin = “يک فضای خالی سمت چپ صفحه بر حسب پيکسل ايجاد ما کند”
text =”color” رنگ متن را مشخص می کند
link = “color”
alink = “color” (active link)
vlink = “color” (visited link)>

نکته مهم: در برنامه HTML و در نوشتن تگها بزرگ و يا کوچک نوشتن حروف هيچ تاثيری ندارد.

Font:
با اين برچسب می توانيم مشخصات متن را به دلخواه خود درآوريم و فرمت کلی آن به صورت زير است.

<FONT> ……..</FONT>

اين تگ دارای Attributeهای زير می باشد:

1 -color: رنگ متن

2-size: اندازه متن

3-face: نوع متن

مثال: می خواهيم کلمه Schoolnet را با فونت نازنين و با اندازه normal و رنگ آبی بنويسيم.

<HTML>

<HEAD>
</HEAD>

<BODY>
<FONT size = “3” color =”blue”> Schoolnet </FONT>
</BODY>

</HTML>

نکته: اگر بخواهيم اندازه را نسبی مشخص کنيم يعنی نسبت به آنچه که قبلا بوده به صورت زير عمل می کنيم:                                                                                                                        Size = +2 

BOLD:
اول و آخر متن مورد نظر قرار گرفته و آنرا Bold می کند.

<B> text … </B>

ITALIC:
اول و آخر متن مورد نظر قرار گرفته و آنرا Italic می کند.

<I> text … </I>

UNDERLINE:
اول و آخر متن مورد نظر قرار گرفته و آنرا Underline می کند.

<U> text … </U>

ANCHOR:
در HTML بوسيله تگ <a> … </a> می توانيم يک متن يا عکس را به صفحه ای ديگر پيوند دهيم (Hyper link).مهمترين Attribute در اين تگ، href می باشد.

فرمت کلی اين تگ به صورت زير است.

<a href = “URL”> text/image </a>

مثال: در جمله click here to go to zahiri home  page کلمه zahiri را به آدرس index.html لينک کنيم:

<BODY>

<p>
click here to go to
<a href =”http://www.schoolnet.ir”> schoolnet </a>
home page
</p>

</BODY>

تگهايی که به وسيله آنها متن را فرم بندی می کنيم:

PARAGRAPH
<P> … </P>: در اين تگ همه موضوعات آن در يک خط نوشته شده يا يک پاراگراف ايجاد می شود که در صورت بوجود آمدن پاراگراف در زير خط اول، خط دوم را با فاصله زياد می نويسد.برای حل اين مشکل از تگ <BR> استفاده می کنيم.
تگ <P> دارای يک Attribute است:

<A align=”left/center/right”>

BREAK
<BR>: اين تگ از تگهايی است که پايان ندارد و آن را هر کجا که قرار دهيم کلمه بعدی را در يک خط پائين تر ولی با کمتر می نويسد.

NO BREAK
<NOBR> … </NOBR>: اگر بخواهيم در آخر خط شکستگی نداشته باشيم بين دو بخشی که شکسته می شود از اين تگ استفاده می کنيم.

مثال: <NOBR>a2</NOBR>

a, 2 را هرگز از هم جدا نمی کند

HEADING

در HTML دارای شش نوع HEADING هستيم.
<H1> … </H1> بزرگترين
<H2> … </H2>
.
.
<H6> … </H6> کوچکترين

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

مثال:

<H2 align=”center”> vali </H2>

HR
تگ <HR> برای ما تک خط افقی سه بعدی ايجاد می کند و دارای Attributeهای زير می باشد.

<HR align=”left/center/right” width=”طول خط بر حسب پيکسل يا درصد”
size=”ضخامت خط بر حسب پيکسل”
noshade: با نوشتن اين کلمه خط سه بعدی نمی شود .
color=”رنگ خط”>

PRE
در HTML هر چيزی را که بين تگ <PRE> … </PRE> به هر صورتی که بنويسيم با همان شکل در صفحه وب نشان می دهد.
مثال:

<PRE> Vali
Ali …
Reza a b cd
</PRE>

DIV:
برای ما يک بلوک در متن ايجاد می کند.

مثال:

<DIV style=”color: red”> … … </DIV>

استفاده ديگر برای تعيين Direction می باشد که سمت نوشتن را از راست به چپ يا چپ به راست می کند.

<DIV dir=”rtl/ltr”> … … </DIV>
rtl= right to left
ltr= left to right

از Attributeهای اين تگ خاصيت align می باشد:

<DIV align=”left/center/right”> … … </DIV>

در قديم از تگهای ديگری نيز برای ويرايش متن استفاده می کردند که اکنون بيشتر آنها منسوخ شده اند واستفاده ای ندارند.
در زير به برخی از آنها اشاره می کنيم:
<em> … </em>: دقيقا کار تگ <I> … </I> را می کند ولی نشان می دهد که از نظر منطقی تاکيدی روی متن می باشد.
<strong> … </strong>: دقيقا کار تگ <B> … </B> را انجام می دهد.
<cite> … </cite>: برای نوشتن اسم مقاله يا کتاب ( آنرا italic می کند)
<code> … </code>: برای نوشتن قطعه برنامه از آن استفاده می شود. (با خط Mono Scape )
<kbd> … </kbd>: ورودی های برنامه را با اين تگ می نوشته اند.(M.S)
<samp> … </samp>: برای نوشتن مثال از اين تگ استفاده می شده.(M.S)
<var> … </var>:متغييرها را Italic می کند.
<tt> … </tt>: متن را Mono Scape می کند.( يک نوع Font است.)
<strike> … </strike>: يک خط وسط متن داخل خود می کشد.

<STRIKE> abc </STRIKE>

<blockquote> … </blockquote>:
<big> … </big>: متن که بين آن باشد يک فونت درشتتر می نويسد.
<small> … </small>: متن که بين آن باشد يک فونت کوچکتر می نويسد.

برای درست کردن توان و انديس دو تگ داريم.
مثال: برای توشتن و از دو تگ زير استفاده می کنيم.

a<SUB> 1 </SUB>
a<SUP> 20 </SUP>

<blink> … </blink>: اين تگ فقط در NetScape کار می کند. متن يا عکس که داخل اين تگ قرار می گيرد در صفحه چشمک می زند.

قرار دادن يک تصوير بر روی صفحه:

Image
<IMG>: برای قرار دادن يک تصوير در web از اين تگ استفاده می کنيم.
به چند دليل نبايد از تگ image زياد استفاده کرد.

1- به علت زياد شدن تعداد عکسها صفحه دير load می شود.
2- ايجاد مشکل در Search Engine.
3- عدم قابل استفاده بودن برای همه)عدم سرعت کافی، هزينه دار بودن برای user و( …

طرز قرار دادن عکس:

<IMG src=”آدرس فايل تصوير را در اين قسمت می نويسيم”
align=”left/middle/right/top/bottom”
height=”ارتفاع عکس بر حسب پيکسل”
width=”طول عکس بر حسب پيکسل”
alt=” “

هر چيزی که در اين قسمت بنويسيم قبل از loadشدن تصوير و يا بعد از کامل شدن صفحه اگر موس را روی عکس ببريم اين متن ديده خواهد شد.(در يک مستطيل زرد رنگ)”

border=”ضخامت جدول دور عکس را بر حسب پيکسل نشان می دهد”
hspace=”فاصله عمودی دور تصوير بر حسب پيکسل”
vspace=”فاصله افقی دور تصوير بر حسب پيکسل”>

مثال

:<img border=”3″ src=”../Zahiri/email/zahiri.jpg” width=”111″ height=”137″ align=”center” hscape=”10″ vscape=”10″ alt=”This is Zahiri’s picture”>

.سوال: برای لينک کردن يک عکس چه کاری را بايد انجام دهيم؟
جواب:

<A href=”URL” ><IMG src=”URL”></a>

آشنايي با Image map:

در بسياری از مواقع در يک صفحه وب مجبوريم قسمتی از يک عکس را به صفحه ای لينک کنيم. برای اين کار در html از Image Map استفاده می کنيم.
مثال: می خواهيم در t1.gif در منطقه يکی دايره و ديگری چهارگوش را به صفحه ای ديگر لينک کنيم:

<MAP name=”Zahiri” >
<AREA shape=”circle” coord=”50,50,30″ href=”1.htm”>
<AREA shape=”rect” cords-“100,70,130,100″  href=”2.htm”>
</MAP>
…
<IMG src=”t1.gif”  usemap=”#Zahiri”>

در Image Map يک سری ناحيه به وسيله <AREA> تعريف می کنيم و می گوييم که بايد لينک شود و سپس آنرا وارد يک Image می کنيم.
يک نوع ديگر برای تعيين Area وجود دارد که روش چند ضلعی است:

<AREA shape=”poly” coord=”x1,y1,x2,y2,…” href=”3.htm”>

اگر در<AREA>، نوع Shape را تعريف نکنيم مقدار default آن يعنی rect در آن قرار می گيرد.

interlink(لينک داخلی)

برای درست کردن لينکهای داخلی دو روش داريم.
1 – ايجاد flag با استفاده از تگ <A>
2- اسم گذاری عناصر موجود در صفحه با استفازه از headingها

مثال: می خواهيم جمله go to Hamed در بالای صفحه مقابل را به کلمه Hamed در وسط صفحه لينک کنيم.

روش1   flag :

<HTML>
<BODY>
<A href=”#2”> go to Hamed</A>
…
<A name=”2”> Hamed </A>
…
</BODY>
</HTML>

روش2 : اسم گذاری

<HTML>
<BODY>
<A href=”vali”> go to middle </a>
…
<H2 id=”vali”> middle </H2>
</BODY>
</HTML>

در حالت اول می توانيم middle را به بالای صفحه لينک کنيم ولی در حالت دوم اين امر امکان پذير نيست برای اين کار در حالت اول:

<A name=”vali”  href=”آدرس صفحه”> middle </A>

طرز ايجاد ليست در HTML

برای ايجاد ليست در html دو روش داريم:
1-   (Ordered list) ليست منظم
2-  (Unordered list) ليست نامنظم

 1-  Ordered List
برای درست کردن يک ليست منظم به روش زير عمل می کنيم.

<OL>
<LH> vali </LH>
<LI> V </LI>
<LI> A </LI>
<LI> L </LI>
<LI> I </LI>
</OL>

تگ <OL> دارای سه Attribute می باشد:
1-  Compact ليست را فشرده تر نشان می دهد
2-   Type:”A/a/I/i”در حالت عادی شماره ها عدد می باشد اما می تواند حروف الفبا يا حروف يونانی باشد.
A: حروف الفبای انگليسی بزرگ
a: حروف الفبای انگليسی کوچک
I: اعداد يونانی با تايپ بزرگ
i: اعداد يونانی با تايپ کوچک
اگر اين Attribute را ننويسيم ليست را با اعداد انگليسی می نويسد.

3-start=” “

از هر عدد يا حرفی که داخل آن قرار بدهيم از همانجا شروع به شماره گذاری می کند.
2- Unordered List
برای درست کردن يک ليست نامرتب (بدون شماره گذاری) از اين تگ استفاده می کنيم.

<UL>
<LH> … … </LH>
<LH> … … </LH>
…
<LH> … … </LH>
</UL>

اين تگ دارای يک Attribute است که برای تعيين نوع شکلی که در ابتدای هر خط قرار می گيرد از آن استفاده می کنيم.

<UL type=”circle/disc/square” >
…
</UL>

نکته: اگر بخواهيم عکس خاصی را در UL قرار دهيم:

<UL>
<IMG src=”آدرس فايل”><br>
… …
جدولها:
<table> … </table>: هر جدول از سطر و ستون تشکيل می شود.
به طور دقيقتر هد حدول n سطر دارد که هر سطر در داخل خود m سلول خواهد داشت.
سطرها را با <tr> … </tr> هر سلول را با <td> … </td> مشخص می کنيم.
مثال: يک جدول 2*2:

<TABLE>
<TR>
<TD> … </TD>
<TD> … </TD>
</TR>
<TR>
<TD> … </TD>
<TD> … </TD>
</TR>
</TABLE>

هر چيزی که داخل <td> بنويسيم در داخل آن خانه (سلول) جدول قرار می گيرد.
نکته مهم اين است که نبايد بين دو <td> … </td> خالی باشد.
اگر بخواهيم در داخل اين خانه جدول چيزی نباشد ولی ديده شود، بايد از يک فاصله (&nbsp;) استفاده کنيم.
Attributeهای <table> عبارتند از:

<TABLE
bgcolor=”رنگ پس زمينه جدول”
background=”عکس پس زمينه جدول”
border=”حاشيه دور جدول”
align=”left/center/right”
width=”ظول جدول(پيکسل يا درصد)”
height=”ارتفاع جدول(پيکسل يا درصد)”
bordercolor=”تگ حاشيه دور جدول”
valign=”top/middle/bottom”
cellpadding=”فاصله متن از ديواره سلول”
cellspacing=”فاصله سلولها از هم”>

attributeهای هر cell:

1. width=” “
2. height=” “
3. bgcolor=” “
4. background=” “
5. border=” “
6. nowrap
7. rowspan=” “
8. colspan=” “

nowrap: محتويات داخل سلول همه دريک خط نوشته می شود و ديگر سلول شکسته شده و به خط بعدی نمی رود.
مثال 1:

<TD colspan=”2″> … </TD>

مثال 2:
<TD rowspan=”2″> … </TD>

در rowspan يا colspan تعداد سلولهايی را که می خواهيم در هم ادغام کنيم را بنويسيم.
بايد توجه کنيم که به همان تعداد که سلول در هم ادغام می کنيم بايد از پائين سلولهای اضافی را حذف کنيم.
مثلا در مثال 1:

<TABLE>
<TR>
<TD> … </TD>
<TD> … </TD>
</TR>
<TR>
<TD> … </TD>
<TD> … </TD>
</TR>
</TABLE> <TABLE>
<TR>
<TD colspan=”2”> … </TD>
</TR>
<TR>
<TD> … </TD>
<TD> … </TD>
</TR>
</TABLE>

 فريم بندی در html

فريم بندی صفحات html يعنی اينکه صفحه را به چند قسمت تقسيم کرده و برای هر قسمت يک صفحه html يا ASP يا PHP جايگزين می کنيم.
برای معرفی يک صفحه فريمی از <FRAMESET> … </FRAMESET> استفاده می کنيم.
مثال: می خواهيم صفحه فريمی زير را که از دو ستون تشکيل شده را طراحی کنيم.

<HTML>
<HEAD>
<TITLE> frames </TITLE>
</HEAD>
<FRAMESET cols=”200,*”>
<FRAME src=”menu.htm”>
<FRAME src=”welcome.htm”>
</FRAMESET>
</HTML>

cols=” ” =ستونی
1- می خواهيم صفحات را به صورت ستونی در کنار يکديگر قرار دهيم.
2- درون ” “=cols بايد نسبت صفحاتی را که می خواهيم درون صفحه فريمی جا بگيرد را معرفی کنيم. در مثال به صورت زير نوشته شد.

<FRAMESET cols=”200,*” >

يعنی ما می خواهيم دو صفحه را در کنار هم قرار دهيم که اولی 200 پيکسل و صفحه دوم بقيه طول صفحه را در بر خواهد گرفت.

اگر بخواهيم صفحه ها به صورت مثلا مساوی قسمت شوند:
<FRAMESET cols=”*, *” >
يا
<FRAMESET cols=”50%,50%” >       

اگر بخواهيم صفحه ها را به صورت سطری در کنار يکديگر قرار دهيم به صورت زير استفاده می کنيم:

<FRAMESET rows=” “>

نکته مهم:در فايلهای html يا بايد frameset داشته باشيم يا body و نمی توانيم هر دو را با هم داشته باشيم.
Attributeهای فريم:

<FRAME
src=” “
frameborder=”yes/no/3d”
marginwidth=” “
marginheight=” ” فضای دور هر فريم
noresize
scrolling=”yes/no/auto”>

اسم گذاری برای هر فريم و برای مراجعه به اين صفحه بايد <” “=name> حتما از اين اسم استفاده کرد.

برای ساختن اين صفحه فريمی بايد از قبل تمام صفحات را ساخته باشيم:
1-  menu.htm
2- welcome.htm
3- student.htm
4- grads.htm

menu.htm
<HTML>
<BODY>
<A href=”student.htm” target=”reza”> student </A>
<A href=”grads.htm” target=”reza”> grads</A>
</BODY>
</HTML>

اين targetها همان اسم فريمها هستند برای اينکه با کليک کردن روی grads صفحه مربوطه به جای صفحه welcome.htm باز شود بايد از target استفاده کنيم.
در جلوی target اسم آن صفحه فريمی را که می خواهيم صفحه ما در آنجا باز شود را می نويسيم.

welcome.htm
<HTML>
<BODY>
Welcome to my home page
</BODY>
</HTML>
student.htm
<HTML>
<BODY>
this is student home page
</BODY>
</HTML>
grads.htm
<HTML>
<BODY>
Here is the grads home page.
</BODY>
</HTML>

بعد از ساختن اين صفحات حال بايد صفحه فريمی اصلی را بسازيم:

<HTML>
<HEAD> <TITLE> welcome to this frame page. </TITLE>
</HEAD>
<FRAMSESET cols=”200, *” >
<FRAME src=”menu.htm” name=”vali” >
<FRAME src=”welcome.htm” name=”reza”>
</FRAMESET>
</HTML>

در صفحه های فريمی اول سطرها پر می شوند بعد ستونها.
Attributeهای frameset:
1-border=” “
2- bordercolor=” “
target=” “

target=”_blank : روی صفحه فريمی باز می شود new pageيک
target=”_self” : را نگذاشته ايم target مثل اين است که
target=”_parent” : صفحه بر روی فريم مادر خود باز می شود
target=”_top”  :صفحه قبلی از بين میرود ويک صفحه بدون فريم ظاهر میشود

قرار دادن يک AVI بر روی Webpage:

<IMG dynsrc=”(URL)آدرس فايل مورد نظر “
width=” ”  height=” ”  loop=”تعداد دفعات تکرار”>

قرار دادن موسيقی background بر روی يک web page:

<bgsound src=” ” loop=”عدد/infinite” >

قرار دادن نوشته متحرک بر روی web page:
marquee

<MARQUEE  align=”top/middle/bottom”
bgcolor=”رنگ نوار”
width=” “
height=” “
hspace=” “
vspace=” ” فضای خالی اطراف نوار
behavior=”scroll/slide/alternate”

scroll:خروج نوشته و ورود آن به صورت کارکتر به کارکتر است.
slide: خروج نوشته و ورود آن به صورت ناپديدشدن و پديدار شدن ناگهانی است.
alternate: به دو طرف نوار برخورد کرده و نوسان می کند.

direction=”left/right” متن بايد به سمت چپ يا راست حرکت کند
loop=” ” تعداد دفعات
scrollamount=” ” مقدار حرکت بر حسب پيکسل
scrolldelay=” ” مقدار تاخير بر > this is web page </MARQUEE>

ماکرومديا فلش ( Macromedia Flash) يکي از بهترين نرم افزار هايي است که شما ميتوانيد جهت افزودن افکت های مخصوص و انیمیشن های کامپیوتری به وب سایت از آن استفاده کنید .در اینجا سعی شده تمامی نکات با ذکر مثال و انیمیشن برای شما ارائه گردد ..

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

ضمنا سیستم شما باید دارای مشخصات سخت افزاری ذیل باشد :

– حداقل سیستم مورد نیاز پنتیوم 233

– 16 مگابایت Ram

– حدود 600 مگا بایت فضای آزاد

– کارت گرافیکی 64 گیگا بایت

کاربردهای Flash

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

نكته

به ياد داشته باشيد که فيلم هاي Flash به واسطه برداري بودنشان کم حجم تر از تصاویر نقشه بیتی خواهند بود.

متحرک سازي در سايت وب

در گذشته در سايتهاي وب به علت اينکه انيميشن نداشتند ، بسیار خسته کننده به نظر می رسیدند. ولي نرم افزار Flash به آساني انيميشن را توسط فرآیندی به نام Tweening ايجاد ميکند. در اين مرحله شما به Flash نقطه آغاز و پايان ميدهيد و تصاوير بين اين دو نقطه به طور اتوماتيک به صورت فريم ( Frame ) ايجاد خواهند شد. مثلاً اگر يک تصوير کامپيوتري براي کامل شدن احتياج به 10 فريم داشته باشد تنها لازم است به آن دو فريم شروع و پايان را بدهيم ( فريم 1 و فريم 10) ، خود نرم افزار Flash فريم هاي ما بين آن را ميسازد.
علاوه بر آن ميتوانيد يک Motion Tween براي آن شيء بسازيد.

ساخت فيلم هاي محاوره اي :

در Flash علاوه بر انيميشن هاي ساده ميتوانيد وب سايتهاي محاوره اي نیز بسازید. به عنوان مثال ميتوان فيلم فلشي را ايجاد کنيد که در آن فيلمهاي کوتاه و Track هاي موسيقي متعدد قابل انتخاب وجود داشته باشد زيرا Flash کاملاً شيء گرا ميباشد.

نکته :

در يک فيلم Flash منظور از محاوره اي بودن اين است که کاربر قادر به انتخاب کليپ هاي ويدئويي يا Track موسيقي دلخواه باشد.

تغيير شکل اشياء و متون متحرک :

يکي از تکنولوژي هاي انيميشن در Flash این است که به شما اجازه ی تغییر يک شکل به شکل ديگر را ميدهد ،به اين فرآیند Shape tween ميگويند. بدون شک متون متحرک را در سايت هاي مختلف مشاهده کرده ايد. اين متون درون یک جعبه از نقطه اي به نقطه ديگر حرکت ميکنند. از اين Effect در سرفصل روزنامه ها و تبليغات فروشگاهها استفاده ميشود. ايجاد يک متن متحرک در Flash کار بسیار ساده ای است . بدين منظور جهت رسیدن به نتیجه ی مطلوب باید تکنیک های فیلم سازی Flash را با هم ترکیب کنیم ، به این صورت که ابتدا یک Motion Tween ایجاد کرده ، بوسیله آن متنی را داخل جعبه از این سمت به آن سمت برده و سپس یک Mask اضافه می کنیم. توسط اين ماسک ميتوانيم متن داخل جعبه را کنترل کنيم. اين بدان معني است که شما قادر خواهيد بود هر قسمت از متن دلخواه خود را قابل مشاهده کنيد. ( توضيح بيشتر Mask در فصلهاي بعدي آمده است )

درک و يادگيري اصول پايه اي Flash

Flash     داراي يک سري عناصر اوليه است که در طول کارتان شما را همراهي ميکند. شکل زير نماي اوليه اي از عناصر اوليه Flash ميباشد.

صفحه کاري ( Work Place ) در Flash :

صفحه کاري منطقه اي است که در آن قلم هاي Flash را ايجاد ميکنيد. این صفحه ی کاری در واقع آن منطقه سفيد رنگي است که در قسمت مياني پنجره Flash واقع شده است.

نکته :

به طور پيش فرض اندازه اين صفحه 550*400 پيکسل ميباشد. اطراف صفحه کاري بوسيله يک حاشیه خاکستري که محيط کاري است پوشانده شده است. اشياء روي محيط کاري ظاهر میشوند، مگر اينکه آنها را بر روي صفحه کاري منتقل کنيد.

Timeline :
Timeline     ( خط زمان ) يکي از ابزار هاي Flash است که فريم هاي درون آن را کنترل ميکند. شکل زير قسمتهاي مختلف Timeline را به تصوير ميکشد.

Play head

براي ديدن گزینه های Flash مورد نظر Play head را بوسيله اشاره گر ماوس بر روي این Flash بکشيد. بدين منظور شما ميتوانيد يک Frame دلخواه را بر روي Timeline کليک کنيد که آن به صورت اتوماتيک Play head ميشود.

Frame Number
همان نما هاي شما براي کار کردن در Timeline ميباشند. Frame line شما را قادر ميسازد تا مکان صحیح اشیاء در فریم را مشخص کنید.

Timeline Menu :

از طريق اين متد ميتوان به تعداد گزينه هايي که براي تنظيم چگونگي مشاهده Timeline استفاده ميشوند دسترسي پيدا کرد.

Center Frame :

قسمت مرکزي قابل ديد در Timeline ميباشد.

Onion Skin View :

توسط اين گزينه ميتوان فريم هاي مختلف يک انميشن ترتيبي را مشاهده کرد. در واقع ميتوان تشکيل فريم هاي مياني را ملاحظه نمود.

Onion Skin Outline view :

اين گزينه نيز مانند Onion Skin View ميتواند تعداد فريم هاي اول تا آخر را نشان دهد .اما این گزینه بیشتر براي منحني ها استفاده ميشود.

Edit Multiple Frames :

اين گزينه شما را قادر ميسازد تا هر بخش از يک انيميشن را که بر فريم هاي مختلفی تقسيم شده اند ، ويرايش کنيد.

Modify Onion Markers :

منويي را نمايش ميدهد که توسط آن شما ميتوان تعداد فريم هاي دلخواه را در Onion Skin View نمايش داد.

Current Frame :

در اين قسمت ساده فريم جاري نمايش پيدا ميکند.

Frame Rate :

این گزینه تعداد فريم هاي نمايش داده شده را نشان ميدهد.

Playback Time :

این گزینه مدت زمان سپري شدن فيلم را نشان ميدهد.

Scroll Bars :

بوسيله این گزینه ميتوان فريم هاي لايه هاي قبلي را مشاهده نمود.

لايه ها

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

Layer Names :

در اينجا نام لايه ها را مشاهده ميکنيد. براي تغيير نام یک لایه است روي آن دو بار کليک کرده و نام آن را عوض کنيد.

Add a layer :

براي ايجاد يک لايه جديد از اين گزينه استفاده ميشود.

Add a Motion Guide Layer :

اين گزينه شما را قادر ميسازد تا يک لایه ی راهنما ايجاد کنيد.بنابر اين ميتوان اشياء را در يک مسير حرکت داد که اين مسير الزاماً مستقيم نميباشد.

Add a Layer Folder :

توانايي شما را در افزودن پوشه هايي به سازماندهي لايه ها افزايش ميدهد.

Delete a Layer :

به وسيله اين آيکون ميتوان لايه مربوطه را حذف کرد.

Show or Hide Layer :

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

Lock or Unlock Layer :

با کليک کردن در اين ستون تمام لايه ها قفل شده و براي لايه ها و Frame ها امکان هيچ ويرايشي وجود ندارد. ( ميتوان تک تک لايه ها را نيز قفل کرد )

Show Layer as Outline :

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

جعبه ابزار

جعبه ابزار Flash مجموعه ای از ابزار ترسیم و انتخاب اشکال است . با کمک شکل زیر می توان با عملکرد هر کدام از ابزارها آشنا شد .

Arrow Tool :

اين ابزار براي انتخاب اشکال به کار ميرود و بوسیله ی آن می توان قسمتي از شکل يا تمام آنرا جابجا کرد.

Sub Select Tool :

به وسيله اين ابزار ميتوان خطوطي که توسط ابزار Pen ترسیم شده اند را ويرايش و يا ترميم نمود.

Line Tool :

بوسيله اين ابزار ميتوان خط هاي گوناگون با نوع قلم متفاوت رسم کرد. ( اگر هنگام کار با اين ابزار کليد Shift را نگه داريم ميتوانيم خطهاي کاملاً عمودي و يا حتي 45 درجه رسم کنیم.

Lasso Tool :

برای انتخاب یک ناحیه ی نامنظم می توان از این ابزار استفاده نمود.

Text Tool :

به وسيله اين ابزار ميتوان به Flash متن هايی را اضافه نمود.

Oval Tool :

به وسيله اين ابزار ميتوانيم بيضي رسم کنیم و اگر هنگام رسم کليد Shift را پايين نگه داريم ميتوانيم دايره رسم کنیم.

Rectangle Tool :

به وسيله اين ابزار ميتوان مستطيل رسم نمود ، اگر در هنگام رسم کليد Shift پايين نگه داشته شود ميتوان مربع رسم نمود.

Pencil Tool :

با استفاده از اين ابزار ميتوان سه نوع خط نامنظم و شکسته رسم کرد .

Brush Tool :

با استفاده از این ابزار می توان اشکال خاصی نظیر پیکر انسان و غیره ترسیم نمود .

نکته :

با استفاده از ابزارهاي ديگری نیز می توان عملیات فوق را انجام داد ، ولی این ابزار کار را ساده تر انجام می دهد .

Free Transform Tool :

به کمک این ابزار می توان تصویر را کوچک یا بزرگ نمود و یا آنرا چرخاند .

Fill transform Tool :

اين ابزار براي عوض کردن طيف اشيایی که توسط Flash رسم ميشوند به کار ميروند.

Ink Bottle Tool :

با استفاده از این ابزار می توان خطوط موجود در اشیاء Flash را رنگی نمود .

Paint Bucket Tool :

با استفاده از این ابزار می توان اشیایی که توسط Flash رسم شده اند را رنگی نمود و یا رنگ آنها را تغییر داد

Eyedropper Tool :

به کمک اين ابزار ميتوان رنگ دلخواه خود را از يک تصوير يا شيء انتخاب نمود.

Eraser Tool :

این ابزار برای پاک کردن قسمتی از یک شی ء بکار می رود ، توسط Option های این ابزار می توان حالت پاک کردن را انتخاب نمود .

Hand Tool :

به کمک اين ابزار امکان جابجا کردن Work Space وجود دارد .

Zoom Tool :

با استفاده از این ابزار کادر فیلم Flash را کوچک و بزرگ می کنیم .

Stroke Color :

با انتخاب اين گزينه جعبه رنگ باز ميشود و رنگ خطوط اشیاء به رنگ دلخواه در می آید .

Black and White :

با انتخاب اين گزينه خود Flash به طور اتوماتيک رنگ Stroke را مشکي و رنگ Fill را سفيد ميکند.

No Color :

با استفاده از اين گزينه در واقع هيچ رنگي براي کار خود انتخاب نميکنيد.

Swap Color :

با کمک اين گزينه ميتوان جاي Stroke را با جاي Fill عوض کرد.

Tools / Options :

در اين مکان کارايي و حالت مختلف بعضي از ابزار ها نمايش داده میشود که از بین آنها می توان مورد خاصی را انتخاب نمود .

Panels :
در واقع يک پانل يک جعبه محاوره اي است که نياز به بسته شدن ندارد. زماني که در پانل هاي Flash تغییراتی ايجاد ميکنيد، نیاز به بستن پانل ها نیست ، تغييرات فوراً اعمال ميشوند.

نکته :

ممکن است بعضي از پانل ها مخفي باشند ، توسط منوي Window ميتوان آنها را فعال نمود.

Properties Panel :

توسط اين پنل ميتوان مشخصات ابزار انتخاب شده را تعيين کرد. مثلاً در شکل زير ، پانل خصوصيات Text Tool را ميبينيد.

Color- Mixer Panel :

توسط اين Panel ميتوان رنگهاي دلخواه خود را براي استفاده در خطوط و داخل سطوح ايجاد نمود. زماني که رنگ مورد نظر خود را انتخاب ميکنيد اشياء جديد به اين رنگ در خواهند آمد.

Color Swatches Panel :

اين Panel محدوده ی رنگ بیشتری را به ما نشان می دهد .

Components Panel :

توسط اين Panel ميتوان عناصر واسطه اي را به فيلم اضافه نمود ،اين عناصر توسط يکسري کد اسکريپت کنترل ميشوند. اين عناصر به شما کمک ميکنند تا بتوانيد به سادگی فيلمهاي Flash تهيه کنيد.

Action Panel :
توسط اين Panel ميتوان جهت استفاده از اشیاء ، کد اسکريپت مورد نظر را به فريم هاي Timelines اضافه نمود. همچنین توسط اين زبان برنامه نويسي ميتوان حرکات اتوماتيک را به Flash اضافه کرد.

Frame چيست

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

يادگيري انواع Frame :

نرم افزار Flash داراي دو نوع Frame است. فريم هاي معمولي و فريم هاي کليدي. اختلاف و شباهت بين دو نوع به شرح زیر می باشد:

– در زمان نمايش فيلم کليه فريم ها در زمانهاي مساوي نمايش داده ميشوند. ( مگر اينکه شما با نوشتن قطعه کد اسکريپت مشخص کنيد که يک فريم چه زماني طول بکشد تا نمايش يابد).

– آيتم هاي مختلف را فقط به فريم هاي کليدي ميتوان اضافه نمود. اين اهميت ندارد که چه چيزي را مي خواهيد اضافه کنيد، بلکه باید به یاد داشت که به فريم هاي کليدي ميتوان آيتم نيز اضافه نمود.

کليد هاي ميانبر براي Form ها :

دستور	کليد ميانبر	شرح
Frame	F5	اضافه کردن يک يا چند فريم معمولي به محل مورد نظر
Remove frames	Shift + F5	حذف فريم هاي انتخاب شده از Timeline
Key Frames	F6	اضافه کردن يک فريم کليد که محدوديت فريم قبلي را دو برابر ميکند
Blank Key Frame	F7	اضافه کردن يک فريم کليدي که محدوديت فريم کليدي قبلي را به همراه نخواهد داشت
Clear Key Frame	Shift + F6	تبديل يک فريم کليدي به فريم معمولي

نکته :

قبل از اینکه فریم ها را به نقطه ای دیگر انتقال دهید ، بهتر است یک Motion Tween ساخته و سپس فریم را به نقطه ی دلخواه انتقال داد .

حالت لايه ها

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

اضافه کردن لايه ها :

در زمانیکه می خواهید لایه ای را به Timeline اضافه کنید می توانید از منوی Flash گزینه ی Insert و سپس گزینه ی Layer را انتخاب کنید . برای ایجاد سریعتر می توان از دکمه ای که در سمت چپ و پایین Timeline قرار دارد استفاده کرد .

نامگذاري لايه ها :

زماني که لايه جديدي را به Timeline اضافه ميکنيد Flash به طور اتوماتيک نامي را براي لايه انتخاب ميکند معمولا این نامها بصورت Layer2 ، Layer1 ، … می باشند . البته این نامها پیش فرض بوده و شما می توانید برای بیان کار خاص هر لایه نام مشخصی برای آن تعیین کنید . به عنوان مثال برای لایه پس زمینه نام Background Layer را انتخاب کنید .

لايه هاي ما سک Mask

لایه ی مهمی که در Flash می توان ایجاد نمود لایه ی Mask می باشد . این لایه همانند پنجره ای بر روی دیگر لایه ها عمل می کند و زمانی که فیلمی نمایش داده می شود این لایه محدوده ی مورد نظر را نمایش می دهد .

لايه هاي راهنما :

به کمک این لایه انیمیشن می تواند در Motion Tween در جهات مختلف حرکت کند ، اگر از Motion Tween استفاده نشود انیمیشن در یک مسیر حرکت می کند .

کشيدن خطوط و پر کردن سطوح :

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

انتخاب خطوط متفاوت :

اصطلاح Stroke در فلش به معنای Line است . توسط این ابزار یا ابزارهای Pen و Pencil می توان خطوط را ایجاد نمود .

اضافه کردن خطوط منحني پيچيده

درست است که ابزار Pen و Sub Select حقيقتاً قدرتمند هستند اما استفاده از آنها براي رسيدن به نتيجه واقعي زمان زيادي ميبرد . همچنين شما ميتوانيد از ابزار Arrow براي اصلاح اشياء استفاده کنيد . به کمک اين ابزار ميتوان گوشه اشياء را حرکت داده و به خوبي خطوط را به داخل خم کرد. از دو ابزار Sub Select , Arrow ميتوانيد براي تغيير شکل اشياء استفاده کنيد. ضمناً ميتوان از ابزار Free Transform نيز استفاده کرد. اين ابزار نيز همانند ابزار Arrow براي اصلاح اشياء کشيده شده استفاده ميشود. به طور مثال شما ميتوانيد عمليات تغيير اندازه ، چرخاندن ، کج کردن و پيچ دادن يک شيء را توسط Free Transform انجام دهيد.

کنترل کردن پيکر بندي آلفا :

پيکر بندي آلفا دقيقاً يک پيکر بندي رنگ نيست . اما برخي چيزهاي آن به رنگ مرتبط ميشود . در واقع آلفا يک درجه بندي براي شفافيت يک شيء ميباشد. يک شيء که درجه پيکر بندي آلفاي آن 10 درجه ميباشد کاملاً مات است . در صورتي که اين درجه پيکر بندي به صفر برسد آن شيء کاملاً شفاف است. در مثال زير کاملاً ميتوانيد مشاهده کنيد.

براي تنظيم مدار آلفاي اشياء مراحل زير را دنبال کنيد :

1- ابزار Arrow را از جعبه ابزار Flash انتخاب کنيد

2- بر روی شکل مورد نظر کلیک کنید تا انتخاب شود .

3- از منوی Window گزینه Color Mixer را انتخاب کنید .

4- به آلفا مقداری عددی بدهید . یا از طریق وارد کردن عدد مورد نظر که بصورت درصدی نمایش داده می شود و یا توسط دکمه ی لغزنده ی سمت راست می توان مقدار عددی دلخواه را به آلفا داد .

چرخاندن ، کج کردن و تغيير اندازه دادن

چرخش اشياء :

چرخش يک شيء در واقع دور زدن شيء به حول نقطه مرکزي شیی و در جهت حرکت عقربه هاي ساعت ميباشد. وقتي که شما يک شيء را ميچرخانيد شيء در همان اندازه باقي ميماند و زواياي شيء هيچ تغييري نميکند. شما ميتواند يک شيء را با ماوس بچرخانيد. براي انجام اين کار مراحل زير را دنبال کنيد :

1- ابزار Arrow را انتخاب کنيد .

2- بر روي شيء مورد نظر دوبار کليک کنيد .

ضمناً هر دوي خط و سطح محور شيء را انتخاب کنيد.

ضمناً براي راحتي کار ميتواند توسط ابزار Arrow يک جعبه فرضي را دور شکل مورد نظر خود بکشيد تا به حالت انتخاب در آيد.

3- از منوي Modify گزينه Transform و در نهايت گزينه Rotate and skews را انتخاب کرده تا دسته هاي راهنماي چرخش به شيء اضافه گردد. همچنين ميتوان بر روي شيء انتخاب شده کليک راست کرده و از منوي پديدار شده گزينه Rotate and skews را انتخاب کرد.

4- يکي از دسته هاي راهنماي گوشه تصوير را گرفته و شيء مورد نظر را بچرخانيد.

کج کردن اشياء :

براي انجام کار ابزار Arrow را انتخاب می کنیم. وقتي شيء مورد نظر و نوع خط آنرا انتخاب کرديد ابزار Envelope را هم انتخاب کنيد . وقتي که دسته هاي راهنما بر روي شيء فعال گردید از هر گوشه شيء ميتوان آنرا کج کرد و همچنین ميتوان بر روي شيء مورد نظر کليک راست کنيد و گزينه Envelop را انتخاب کنيد.

تغيير اندازه اشياء :

يکي از ابزار هاي مهم که در نرم افزار Flash کاربر فراوانی دارد ابزار Scale ميباشد. به کمک این ابزار ميتوان اندازه شیی را تغيير داد ، آنها را کوچک و بزرگ و يا طول و عرض آن را کم و زياد کرد. روش کار به اين صورت است که ما اول ابزار Free transfer را انتخاب نموده و از منوی Option گزینه Scale را انتخاب ميکنيم ( در نظر داشته باشيد که قبل از انجام کار بايد سطح شيء و خط انتخاب شده باشد ) با انتخاب گزینه Scale دسته هاي راهنما بر روي شيء مورد نظر ظاهر ميشود . می توان با انتخاب یکی از دسته هاي راهنما سايز شيء را کم يا زياد ميکنيم.

کشيدن خطوط توسط Flash

براي کشيدن خطوط در Flash می توان از روشها و ابزار هاي مختلفي استفاده نمود. اولين مورد به کمک ابزار Line ميباشد . بدين صورت که ما از Toolbar ابزار Line tail را انتخاب ميکنيم .هنگام انتخاب اين ابزار ، شکل ظاهري ماوس تغيير ميکند. ماوس را به طرف محيطي که در آن خط را ترسيم می کنيم ميبريم ، سپس از نقطه شروع ماوس را فشار داده و آن را ميکشيم تا پايان کار نباید دکمه ماوس را رها کنیم .
هنگامي که ابزار Line را انتخاب ميکنيم پنل Properties فعال ميشود. از اين پنل در تغيير رنگ ، اندازه خط و نوع خط می توان استفاده کرد :

1- تغيير رنگ خط : براي تغيير رنگ خط اول خط مورد نظر را انتخاب مينماييم سپس از پنل Properties گزينه Stroke color را انتخاب کرده و بر روي آن کليک ميکنيم تا پالت رنگها باز شود. در قسمت بالاي آن کد رنگ را وارد کرده و یا از همان پالت ، رنگ مورد نظر خود را انتخاب کنيم.

2- تغيير اندازه : براي تغيير سايز خط از همان پنل Properties گزينه Stroke height را انتخاب کرده ، سایز آنرا مشخص ميکنيم.در کنار آن يك چرخه مانند وجود داردکه ميتوان از کم به زياد آن را اضافه کرد. اگر آن را به طرف پايين ببريم سايز آن کوچک ميشود و اگر به طرف بالا ببريم سايز ها بزرگ ميشود.

نکته :

در نرم افزار فلش سایز خطوط بصورت پیش فرض از صفر تا ده می باشد .

تغيير نوع خط :

براي تغيير نوع خط در پنل Properties گزينه Stroke style را انتخاب می کنیم. در اين روش 7 نوع خط وجود دارد.براي تغيير نوع خط ، آنرا انتخاب کرده ، سپس يکي از خطوط را انتخاب ميکنيم .

Custom stock style :

اين دکمه نيز در همان قسمت Properties وجود دارد هنگامي که اين دکمه را فشار ميدهيم ميتوان تنظيمات مورد نظر را بر روي هر کدام از انواع خطوط انجام داد.

ساخت يک Motion Tween :

براي شروع کار ابتدا با يک Animation ساده شروع می کنیم . ابتدا بايد Animation را بشناسیم و نيز مهمتر از آن اينکه کاربرد انیمیشن را در فلش بدانیم.

انيميشن در Flash

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

Animation ها در Flash به چه صورت کار ميکنند :

تمام اشیاء و تصاویر را در فریم ها و لایه های مخصوص پیاده کرده و تغییرات را در آن اعمال می کنیم. حال به اجرای انیمیشن ها می پردازیم . همیشه در فلش اشیاء و تصاویر را بر روی Work Space و انیمیشن را بر روی فریم ها اعمال می کنیم . وقتی یک Movie را طراحی می کنیم به آن فرمت SWF Export می دهیم ، تمامی لایه ها و فریم ها به یک لایه تبدیل شده ، تمامی عناصر دست به دست هم داده و به یک لایه تبدیل می شوند . مثلا اگر در یک لایه 200 فریم وجود داشته باشد ، در قسمت movie بصورت یک عکس در آمده و پشت سر هم قرار می گیرند . در هنگام عبور Time Line از روی این فریم ها سرعت بالا بوده و تمامی این فریم ها را می توان پشت سر هم در فرمت یک انیمیشن مشاهده کرد .

شروع ساخت يک انيمشن :

در اين قسمت هدف مشخصی را مد نظر قرار داده ، براي انجام آن به محيط Flash رفته و کار را شروع می کنیم .

هدف :

ايجاد يک Animation که در آن شکل يک توپ وجود دارد که ميخواهيم از سمت راست وارد صفحه شده و از سمت چپ خارج شود.

شروع :

1- گزينه New را از منوی File انتخاب کرده تا محيط کار جديدی بارگذاري شود.

2- اشياء موجود در صفحه را در فريم هاي مورد نظر ترسيم کنيد.

3- انيميشن لازم را بر روی فريم ها اعمال كنيد.

حال ميخواهيم در 20 فريم توپی ترسيم کنيم که از سمت چپ وارد صفحه شده و از سمت راست خارج گردد. ابتدا از Layer فريم 1 را انتخاب کرده و به وسيله Oval tool در آن فريم يک توپ ترسيم می کنيم. از اينجاي کار به بعد مبداً توپ مشخص شده است حال بايد مقصدي که ميخواهيم توپ به آن جا برسد را کپي کرده و آن را به Frame 20 منتقل می کنیم.( زيرا گفته ايم در 20 فريم )

( روش کپي : روي فريم مورد نظر راست کليک كرده و Copy frame را انتخاب ميکنيم ،سپس بر روي فريم مورد نظر راست کليک کرده و گزينه Paste frame را انتخاب ميكنيم. ) حال تمام کارها انجام شده و به مرحله اي می رسیم که ميخواهيم Effect مورد نظر را بر شيء اعمال كنيم.

از آنجایی که ميخواهیم شيء از سمت چپ به سمت راست تغيير مسير دهد بايد از Motion Tween استفاده کنيم . پس از تعيين مبداء و مقصد شيء بر روي Frame1 راست کليک کرده و گزينه Create Motion Tween را انتخاب کنيد. هنگامي که اين عمل را انجام ميدهيم کل 20فریم به رنگ بنفش در مي آيد .این بدان معناست که Frame ها Motion يافته اند ولي به صورت نقطه چين .این حالت بیانگر این مطلب است که به مبداء Motion داده ايم ولي به مقصد خير. حال همين کار را براي Frame20 يعني همان Frame مقصد انجام ميدهيم. ميبينيم که بر روي بيست Frame يک Flash ظاهر شده و نقطه چينها از بین می روند. حال اگر Ctrl + Enter را فشار دهيد ميتوانيد Animation ساخته شده را مشاهده کنيد.حال با يادگيري Motion Tween ميتوانيد اشياء مختلف را با Effect هاي مختلف ساخته و نمايش دهيد.

نوع ديگر Animation در Flash ، Shape Tween است. تفاوتی که بين Shape Tween و Motion Tween وجود دارد ، اين است که Motion Tween براي حرکت و جابجايي اشياء کاربرد دارد ولي Shape tween براي تغيير حالت اشياء به کار ميرود. به طور مثال يک دايره در حين حرکت به شکل يک مستطيل در مي آيد.

شروع ساخت يک Shape Tween :

براي اين کار محيط جديدی باز نموده ( File / New ) و بعد از آن در Layer و فريم مورد نظر شيء را ترسيم مينماييم ، سپس در فريم مقصد ، شيء بعدي را ترسيم ميکنيم. در اینجا دو فريم با دو شيء متفاوت داريم مثلا اگر بخواهیم از دايره به مستطيل برسيم. ابتدا ابزار Arrow را انتخاب نموده و با يک بار کليک کردن بر روي فريم مبداء آن را انتخاب ميکنیم، هنگامي که فريم مورد نظر انتخاب شد در Properties منویی به نام Tween ظاهر ميشود که با استفاده از آن ميتوان به شيء Motion يا Shape دهيم. حال پس از انتخاب Frames در قسمت Properties گزينه Tween و ابزار Shape را انتخاب ميکنيم. در اینحالت فريم مورد نظر تغيير رنگ یافته و به رنگ سبز در مي آيد که اين خود نشانه Shape Tween است. ولي تا اينجا کار ما کامل نشده چون به Frame مقصد Shape را نداده ايم. حال براي Shape دادن به آخرين Frame نيز تمامي اين مراحل را اجرا می کنيم. حال برای نمایش ،Ctrl + Enter را زده ، شکل در حين حرکت از دايره به مستطيل تبدبل ميگردد.

Motion Guide :

از Motion Guide به عنوان خطوط راهنما استفاده ميشود. براي اعمال Motionهاي مختلف ابتدا باید يک خط راهنما که شيء بر روي آن حرکت ميکند را ايجاد کرده و سپس انيميشن را بر روي آن سوار کنيم.

شروع کار :

• ايجاد خط راهنما : ابتدا بايد در لایه و فريم مورد نظر خط راهنما را رسم نمود. براي مثال ميخواهيم خطی به سکل زیر رسم کنيم که يک توپ به همين حالت از روي آن حرکت کند.

نکته :

بعلت اینکه خط راهنما در Movie یکی از اجزاء اصلی نیست ، در Motion Guide قابل مشاهده نمی باشد .
اول بايد بر روي گزينه Add Motion Guide کليک کرده تا يک Layer مخصوص ايجاد شده و در همان Layer در فريم اول يا فريم مورد نظر خط راهنما را ترسيم کنيم. هنگامي که خط ترسيم گشت حال يک Layer جديد ايجاد ميکنيم و انميشن شيء خود را بر روي آن Layer ايجاد ميکنيم خود Flash به صورت پيش فرض از مرکز شيء براي Guide استفاده ميکند ( از ابتدا تا انتها ) حال Ctrl + Enter را فشار دهيد و Flash را مشاهده کنيد

آوردن عکس در محيط Flash

در بسياري از Movie ها، به عکس و تصاوير احتیاج پيدا ميکنيم. نرم افزار Flash اين امکان را به ما ميدهد که بتوانيم از تصاوير با قالبهاي متفاوت نيز استفاده کنيم.

طريقه آوردن عکس در Flash :

اول از منوي File گزينه Import را انتخاب کرده هنگامي که اين گزينه را انتخاب کردید پنجره ای باز ميشود که مسير عکس مورد نظر را مي خواهد. با آوردن مسير عکس و انتخاب آن دکمه Open را فشار داده و عکس مورد نظر به محيط Work Space انتقال مي يابد.

نکته :

توسط اين گزينه نيز ميتوان فايلهاي .gif متحرک را به داخل Movie آورد. ولي در Flash هر قسمت فايل .gif متحرک به يک فريم تبدیل می شود .در اینجا Frame ها آماده نمايش در Movie می باشند.

اضافه کردن يک ماسک گرافيکي :

اين ماسک توسط يک شيء منحني بسته ساخته ميشود. ميتوان توسط ابزار هاي مختلف از جعبه ابزار يک ماسک گرافيکي ايجاد کرد.

شما براي ايجاد ماسک به دو لايه احتياج داريد.

1- ابتدا اشيائي را که ميخواهيد در فيلم نمايش داده شوند رسم کنيد.

2- به وسيله کليک بر روي دکمه Insert Layer يک لايه جديد به لايه قبلي اضافه کنيد.

3- بر روی لایه جدید راست کلیک کرده و از منوی پدیدار شده برای تبدیل آن لایه به لایه ماسک گزینه Mask را انتخاب کنید.

4- برای خارج شدن از حالت قفل بر روی ستون قفل از لایه ماسک کلیک کنید. برای اینکه لایه از حالت معمولی به ماسک تبدیل شود ، Flash به طور اتوماتیک لایه ها را قفل می کند.

5- به یاد داشته باشید که شکل انتخابی جهت تاثیر ماسک بسته باشد.

حال می خواهیم با استفاده از ماسک یک Movie بسازیم که در آن دایره یا متن از محیط خارج شود.

1- اشکال خود را که در فيلم ميخواهيم استفاده کنيم ، ترسيم ميکنيم.

2- يک لايه جدا براي Text خود ايجاد مينماييم ، و متن را در داخل آن تايپ مينماييم.

3- لايه ديگری براي Mask بر روي همان لايه Text ايجاد ميکنيم تا بتوانيم اعمال Mask را در آن لايه انجام دهيم.

4- پس از نوشتن Text انيميشن Mask را ايجاد می کنيم. ابتدا در اولين Frame دايره ترسيم کرده از آن کپي گرفته و در فريم بعدي ( بطور دلخواه) آن را Paste ميکنيم و به اندازه طول Font مبداء و مقصد را مشخص نموده و در آخرين قسمت Motion مربوطه را به frame ها ميدهيم. حال بازدن کليد Ctrl + Enter ميتوان تغييرات را مشاهده نمود.

حذف Mask :

براي از بين بردن حالت Mask به دو صورت ميتوان عمل نمود :

1- حذف کامل لایه Mask

2- راست کليک کردن بر روي لايه مورد نظر و برداشتن تيک گزینه Mask

نوشتن متن و ايجاد انيميشن بر روي آن :

براي نوشتن متن در Flash ، ابتداابزار Text tool را از جعبه ابزار ، انتخاب کرده ، سپس به دو صورت ميتوان محيط نوشتن متن را فراهم کرد :

1- با بردن آن بر روی محیط مورد نظر ، فشار دادن کلید ماوس و کشیدن آن می توان محیط محدودی برای آن تعریف کرد .

2- ميتوان با يک کليک آن محيط را ايجاد کرده و بينهايت کاراکتر تايپ کرد

حال که متن را Type کرديم در قسمت Properties گزينه هايي فعال ميگردند که قسمتي از آن را براي شما توضيح خواهيم داد :

1. Static Text : در اين حالت هنگام تایپ متن هيچ عملي نميتوان بر روي آن انجام داد.
2. Dynamic Text : اگر در هنگام تایپ از اين گزینه استفاده کنيم متن ها به صورت Dynamic در مي آيند ، يعني شما این امکان را پيدا ميکنيد که آنها را انتخاب کرده و از آنها کپي برداريد.
3. Input Text : اگر در هنگام تایپ از اين گزینه استفاده شود هنگام نمايش ميتوان متن هارا پاک کرده و يا حتي در آنها Type از اين حالت بيشتر در Form ها استفاده ميشود.

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

Character Spacing : از اين گزينه براي کم و زياد کردن فاصله بين کاراکتر ها در Font استفاده می شود . این کار به وسيله لغزنده کنار آن انجام می شود.

Font Size : توسط ابن گزينه ميتوان اندازه Font رااز 8 تا 98 تغيير داده و آن را کوچک و بزرگ کرد. البته به صورت دستي نیز می توان اعداد دیگری به آن داد .

Text Fill Color : اين گزينه که همان Fill Color است براي تغيير رنگ Font استفاده ميشود .
Toggle Bold Style : اين گزينه براي Bold نمودن Text ها به کار ميرود.

URL Link : از اين گزينه براي لینک کردن یک متن ، یک آدرس استفاده می کنیم . به اینصورت که متن را انتخاب کرده و سپس در محل URL Link آدرس مورد نظر را به آن Link ميکنيم.

انيميشن Text

حال متن را با تنظيمات دلخواه Type کرده و موقع آن رسيده که Animation مورد نظر را بر آن اعمال کنیم. در اينجا ميخواهيم متن ما حول يک مرکز از کوچک به بزرگ تبديل شود.

شروع :

لايه مورد نظر را ايجاد نموده ،به آن يک نام دلخواه داده و در فريم مورد نظر متن را Type می کنیم. از فريمي که متن در آن است يک کپي گرفته و در Frame مورد نظر Paste ميکنيم.

– به دليل اينکه گفته ايم متن بايد از کوچک به بزرگ تبديل شود ، بايد در فريم اول سايز متن را کوچکترين اندازه در نظر بگیریم.

– حال Motion لازم را به آن داده و آن را مشاهده ميکنيم.

– در هنگام نمایش Movie ، متنی را مشاهده می کنیم که از کوچک به بزرگ تبدیل می شود .

Symbol :
Symbol ها يا همان سمبل ها اشيائي هستند که در فيلم هاي Flash مورد استفاده قرار می گیرند. در ميان Symbol ها و اشياء معمولي تفاوتهایی به شرح زیر وجود دارد:

1- ميتوان از هر Symbol يک کپي گرفته و هر کجا که لازم شداز آن استفاده نمود.

2- ميتوان در يک Symbol يک لايه Mask داشت ، به صورتي که در مواقع مورد نياز ، هم براي مرتب بودن و هم براي حجم کم بتوان از آن استفاده کرد.

3- ديگر آنکه بتوان آن را در کتابخانه Flash نگهداري کرد و در مواقع مورد نياز از آن استفاده نمود .

Movie Clip ( سمبل هاي گرافيکي ) :

سمبلي است که در آن اشياء و يا حتي عکسهاي بيتي موجود ميباشند و می توانیم از آنها استفاده کنیم. مانند عکس يک جنگل که پشت زمينه باشد.

Button : يا همان سمبل هاي کليدي بيشتر براي ساختن کليد ها به کار ميروند. اين کليد ها دستوراتي را ميگيرند که در مراحل انجام Flash به کار رفته اند و هر کليد براي فعال شدن هر عمل و هر دستوري احتياج به يک سري دستورات خاص دارد که بر اساس Action Script تعريف می شوند.

مثال : لينک دادن ، دکمه هاي Back , Next و دکمه هاي ارتباطي و غيره .

ایجاد Symbol ها :

براي تهيه ی Symbol ها به دو طريق ميتوان عمل نمود :

1- اولين مسير به اين صورت است که از منوي Insert گزينه Convert to Symbol را انتخاب می کنيم . در اين موقع پنجره اي باز ميگردد که حالت هاي Symbol را نمايش ميدهد. هر کدام را که بخواهيم انتخاب نموده و يک Symbol ايجاد ميکنيم.

2- در حالت دوم میتوان از يک Short cut استفاده نمود که shortcut آن کليد F8 است. هنگامي که کليد F8 را فشار ميدهيم همان پنجره باز ميشود، نوع Symbol را انتخاب کرده و OK را فشار ميدهيم

ذخيره سازي فايهاي Flash

منظور از فايلهاي Flash چت ؟

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

مثال :

در نرم افزار Photoshop فايل اصلي دارای پسوند .pst است ولي ما آنها را با پسوند هاي .jpg و يا .gif ذخيره ميکنيم. حال در نرم افزار Flash فايلهاي اصلي با پسوند .fla ذخيره ميگردند و Source اصلي برنامه همين فايل .fla ميباشد.

در اینجا پروژه ها به جايي رسيده اند که ميخواهيم آنها را با پسوند .fla ذخيره کنيم .بايد به منوي File رفته و گزينه Save را انتخاب کرد ، هنگام انتخاب اين گزينه پنجره اي باز ميشود که باید اسم فايل و مسير مورد نظر رابه آن داده و سپس کلید Save را فشار دهیم .

فايلهاي .swf :

هنگامي که بخواهيم فيلم Flash را به یک فایل که خود لایه نیز ایجاد کرده ، تبدیل کنیم بايد آن را به حالت .swf در آوريم .

اگر به ياد داشته باشيد در فايل اصلي يا همان .fla گفتيم که تمامي اشياء و اجزاء در لايه ها و فريم هاي متفاوتي ايجاد ميشوند و شايد بعضي اوقات به ده ها Layer احتياج پيدا کنيم. ولي حال ميخواهيم کد اصلي .swf را بدانيم.
هنگامی که فايلهاي .fla به .swf تبديل ميشوند ، اولين کاري که انجام می شود اینست که تمامي اجزاء فيلم Flash به يک Layer تبدیل شده و در نتیجه حجم فايل .swf بارها سبک تر از فايل اصلي .fla خواهد بود.

نکته :

فايلهاي .swf هنگامي اجرا ميشوند که آن سيستم هم نرم افزار Flash را نصب کرده باشد ولي ما ميتوانيم فايلهاي .swf را به کمک HTML Source آن Upload کرده و يا هر سيستمي حتي آن که Flash ندارد را مشاهده کنيم. در قسمت هاي بعدی راجع به فايلها و چگونگی بارگذاري آنها بر روي Web توضیحات بیشتری خواهیم داد .

ذخيره فايل .swf از .fla :

براي انجام اين کار فايل .fla را باز کرده ، به منوي فايل رفته و از آنجا گزينه Publish setting را انتخاب مينماييم. هنگامي که اين گزينه را اجرا ميکنيم پنجره اي ظاهر ميشود. در اين پنجره گزینه ای به نام Format وجود دارد که در قسمت Type آن نوع فايلي که ميخواهيم Publish کنيم را وارد می کنیم . اگر ميخواهد فقط .swf از آن بگيريد ، .swf را تيک زده، دکمه Publish را فشار داده و سپس OK را بزنید. در مسير فايل .fla فایلی با همین اسم ، با پسوند SWF و با حجم بسیار پایین تر ایجاد می گردد.

ذخيره فايلهاي .exe :

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

نرم افزار Flash اين قابليت را نيز در خود دارد ، براي ساخت فايل .exe تمامي مراحل .swf را انجام ميدهيم به انضمام اينکه تيک Windows Projector (ex) را انتخاب کرده و سپس آن را Publish می کنيم.

ساخت فايلهاي HTML :

جهت ساخت يک فايل HTML از طريق زير عمل مينماييم : File/ Publish Setting
از سربرگ Format گزينه HTML را انتخاب مينماييم . در اين حالت سربرگ HTML فعال ميگردد که در آن ميتوان تنظيمات مربوطه را انجام داد.