این جزوه برداشتی است از سایت Osdtadonline و هم میهن

نكاتي در مورد Front-page :

1- وسيله اي جهت ايجاد صفحات وب
2- ابزاري براي مديريت وب سايت
3- وسيله اي جهت نشر وب سايت

هر كدام از صفحات وب ، شامل كدهاي مجزايي بنام Html است .
- Html كه سرنام Hypertext Markup language مي باشد يك زبان نشانه گذاري از زير مجموعه هاي SGML است كه جهت ايجاد مستندات فوق متني و فوق رسانه در شبكه جهاني وب مورد استفاده قرار مي گيرد. اين مستندات متني ، تصاوير ، صدا ، ويدئو و فوق پيوندها را شامل مي شوند .
- پيوندها ارتباطات فوق متني هستند كه در يك صفحه وب گنجانده شده اند و اين امكان را برايتان فراهم مي سازند كه از يك صفحه وب به يك فايل يا صفحه وب ديگر منتقل شويد .

مقدمات ايجاد يك وب سايت

مي خواهيم يك وب سايت طراحي كنيم . هنگام ورود به محيط Front-Page صفحه اي باز مي شود كه در قسمت راست صفحه منويي با عنوان New Page مشاهده مي شود . چنانچه اين منو باز نبود به روش زير عمل مي كنيم :
ابتدا منوي File را باز كرده بر روي گزينه ي New كليك كنيد ، از منويي كه باز مي شود گزينه ي One Page Web Site را انتخاب نماييد .
پنجره اي با عنوان Web Site Templates باز مي شود كه شامل سه منوي General ، Package و Share Point Services مي باشد . هدف ما آنست كه صفحه اي از پيش طراحي نشده ايجاد نماييم . يعني تمام اجزاي صفحه را بصورت دستي و بر حسب سليقه ي شخصي طراحي كنيم . پس از منوي General گزينه ي Empty Web Site را انتخاب مي نماييم .

بعد از انتخاب اين گزينه لازم است يك وب فولدر ساخته شود تا تمامي فايلها و تصاوير در آنجا بصورتي منظم ذخيره گردد . پس در مكان مورد نظر يك فولدر با نامي با مسمي ايجاد كنيد . سپس بعد از آنكه گزينه ي Empty Web Site را انتخاب نموديد در قسمت چپ پنجره بر روي گزينه ي Brows رفته ، مسير را مشخص كنيد ( اين مسير، مسير همان فولدري است كه مي خواهيد اطلاعات شما در آن قرار گيرد ) حال بر روي كليد Ok كليك كنيد . اگر به محل ساخت فولدر بازگرديد مشاهده مي كنيد كه شكل آيكن فولدر تغيير كرده و از بقيه ي فولدر ها مجزا شده است .
تا اينجا يك وب فولدر ساخته ايم .


نكته : به منظور سامان دهي اطلاعات در يك فولدر و راحت تر بودن كار با وب فولدر خود و همچنين وب سايت ، تمامي عكسها و تصاوير خود را در فولدر Images ذخيره كنيد .

نحوه ي طراحي كردن يك    Page

حال مي خواهيم يك صفحه طراحي كنيم . پس مجددا از منوي File گزينه ي New و در نهايت Blank page را از پنجره ي سمت راست صفحه انتخاب نماييد . صفحه ي باز شده را ذخيره كنيد . معمولا اولين صفحه ي يك وب سايت مهمترين و اصلي ترين صفحه مي باشد . چرا كه وقتي كاربر آدرس اينترنتي وب سايت را وارد كرد اولين صفحه مي تواند او را ساعتها در وب سايت شما نگاه دارد و يا اينكه مي تواند بدون هيچ تاخيري صفحه را ببندد . طراحي صفحات وب استانداردهاي خاصي دارد كه كاربران محترم مي توانند پس از مطالعه ي اين دوره ، دوره ي آموزش متدولوژي و تكنولوژي طراحي وب (ciw) را مطالعه نمايند تا بتوانند استانداردهاي طراحي وب را آموزش ببينند .
صفحه ي نخست كه از آن به عنوان مهمترين صفحه در وب سايت ياد نموديم را با نام index و يا Default با پسوند html ذخيره نماييد 

كار با جدولها

يكي از مهمترين ابزارهاي front-page كار با جدول ها مي باشد . براي اينكار از منوي table گزينه ي insert و سپس table را انتخاب كنيد . پنجره اي با عنوان insert table باز مي شود كه مختص طراحي و تغييرات جدول مي باشد .

در ذيل به شرح گزينه هاي مختلف اين پنجره مي پردازيم :

- قسمت Size :

كه شامل دو قسمت Rows و Columns مي باشد . اين گزينه تعيين كننده ي تعداد سطر و ستونهاي جدول مي باشد . گزينه ي Rows نشان دهنده ي تعداد سطر و گزينه ي Columns نشان دهنده ي تعداد ستون جدول مي باشد .

- قسمت Layout

اين قسمت شامل پنج گزينه مي باشد كه به شرح تك تك آنها مي پردازيم :

a) گزينه ي Alignment :

براي تعيين نوع تراز جدول از اين قسمت استفاده مي شود . اين گزينه شامل چهار عبارت زير است :

1- Default: جدول را در حالت پيش فرض صفحه قرار مي دهد . به عنوان مثال اگر پيش فرض تمام گزينه هاي صفحه ي شما چپ چين باشد جدول را نيز در سمت چپ قرار مي دهد .
2- Left: جدول را در سمت چپ صفحه تراز مي كند .
3- Right: جدول را در سمت راست صفحه تراز مي كند .
4- Center: جدول را در قسمت وسط صفحه قرار مي دهد .

b) گزينه ي Float :

موقعيت متني كه بعد از جدول قرار مي گيرد در اين قسمت تعيين مي شود . معناي لغوي كلمه ي Float شناور بودن است . با اين توضيح كه Float داراي اولويت نسبت به Alignment مي باشد . پس بسته به نوع سليقه متن بعد از جدول را راست ، چپ و يا وسط چين كنيد .

c) گزينه ي Specify width :

تعيين طول و عرض جدول بصورت دستي در اين قسمت امكانپذير مي باشد . in pixel تعيين كننده ي معيار اندازه با Pixel و in percent تعيين كننده ي معيار اندازه با درصد مي باشد .

d) گزينه ي Cell padding :

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

e) گزينه ي Cell Spacing :

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

f) گزينه ي Table Direction :

متن درون جدول از چپ به راست قرار بگيرد يا از راست به چپ .

- قسمت Set :

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

- قسمت Style :

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

Cell Properties:

به هر يك از خانه هاي جدول ترسيمي يك سلول مي گويند . اگر در روي سلول مورد نظر راست كليك كرده و گزينه ي Cell Properties‌را انتخاب كنيد ، پنجره ي مخصوص تنظيمات سلول باز مي شود ؛

- قسمت Layout :

- Horizontal alignment
اين گزينه مربوط به طريقه ي تراز كردن افقي محتواي داخل سايت مي باشد . كه مي توان بر حسب دلخواه يكي از گزينه هاي پيشنهادي را انتخاب كرد .

- Vertical alignment
براي تراز كردن عمودي محتواي سايت از اين گزينه استفاده مي شود .

- Rows spanned
اين گزينه براي برابر قرار دادن يك سطر با تعدادي سطر ديگر مي باشد . يعني مي توان طول يك سل ( سلول ) را با سل ديگر برابر كرد .

- Column spanned
براي برابر قرار دادن يك ستون با تعدادي ستون ديگر از اين گزينه استفاده مي شود .

- Specify Width & height
براي دادن اندازه به صورت درصد و يا پيكسل مي باشند .

- Header cell
براي Bold‌كردن متن اين گزينه را فعال كنيد .

- No wrap
اين گزينه براي شكستن متن در سل مي باشد . اگر اين قسمت فعال نباشد با طولاني شدن متن ، طول سل هم افزايش مي يابد .

- قسمت Borders :

color :
براي رنگي كردن خطوط اطراف سل مي توان از جعبه ي رنگ ، رنگ دلخواه را انتخاب كرد .

Background :
در صورتيكه بخواهيم رنگ Background يك سل را تغيير دهيم از قسمت جعبه ي رنگ ، رنگ دلخواه را انتخاب مي نماييم . اما اگر براي Background سلول مورد نظر بخواهيم از يك عكس خاص استفاده نماييم ابتدا قسمت Use background picture را فعال و سپس بر روي دكمه ي Brows كليك مي كنيم . از مسير مورد نظر عكس را انتخاب و بر روي دكمه ي ok‌كليك مي نماييم .

Frame

Frame ها يكي از مهمترين مباحث براي طراحي صفحات وب در Front-page مي باشد .
براي ايجاد Frame از منوي file گزينه ي New را فعال كرده از منويي كه در قسمت راست صفحه باز مي شود گزينه ي More Page Template را انتخاب مي كنيم زيرا مي خواهيم صفحه اي با Frame ها ايجاد كنيم .
پنجره اي باز مي شود كه با فعال كردن سربرگ Frames Page نوع صفحه بندي را انتخاب مي كنيم . فرض كنيد كه صفحه اي با حالت زير انتخاب نموديم :

پس از انتخاب نوع صفحه بندي بر روي دكمه ي Ok كليك كنيد . صفحه اي دقيقا مشابه با همان حالت انتخابي براي شما ايجاد مي گردد .
نكته : اگر بخواهيد صفحه اي از پيش طراحي شده را باز كنيد بر روي گزينه ي Set Initial Page كليك كنيد ، اما چون هدف ايجاد صفحه اي جديد مي باشد پس بر روي گزينه ي New Page در هر سه فريم كليك كنيد . صفحه اي با سه قسمت باز مي شود . حال بايد هر يك از قسمتها را با اسامي با مسمي Save كنيم . چهار قسمت براي ذخيره كردن وجود دارد . يكي قسمت header ( قسمت بالايي ) ، يكي Contents ( قسمت سمت چپ ) ، main ( قسمت اصلي صفحه ) و در نهايت index كه هر سه قسمت فوق را در بر مي گيرد .

Frame Properties

اگر در هر يك از فريمهاي ايجاد شده كليد سمت راست ماوس را فشار دهيد گزينه اي با عنوان frame properties در منوي باز شده مشاهده مي شود كه مربوط به تنظيمات فريم ها مي باشد .
در ذيل به شرح گزينه هاي اين پنجره مي پردازيم

• name : نام فريم
• Initial page :صفحه ي پيش فرض ( مسير خواندن صفحه از كجا باشد )
• Title : عنوان صفحه
• Frame size : تنظيمات طول و عرض فريم
• Margins : تنظيمات حاشيه ها
• Options :

- Resizable in browser
اين گزينه مربوط به تغيير اندازه در Browser مي باشد بدين صورت كه كاربران مي توانند اندازه ي فريمها را تغيير دهند . اگر فعال باشد اندازه ي فريمها قابل تغيير و اگر فعال نباشد غير قابل تغيير مي باشد .

- Show Scrollbars
اين گزينه براي انتخاب حالات نمايش Scrollbar مي باشد . بدين صورت كه اگر متني طولاني در هر يك از فريمها داشته باشيم مي توانيم تعيين كنيم كه صفحه Scrollbar داشته باشد يا نه . با انتخاب هر كدام از اين گزينه ها عملكرد Scrollbar را تعيين مي كنيم :

If needed : اگر نياز بود Scrollbar نمايش داده شود
Never : هرگز Scrollbar فعال نشود
Always : Scrollbar هميشه فعال باشد

- Frames page
در صورتيكه بخواهيم خطوط ما بين فريمها را پهن يا نازك كنيم در قسمت Frame Spacing‌عدد دلخواه را وارد مي نماييم .

طريقه ي لينك دادن فريمها به يكديگر

مي خواهيم فرضا دو فريم Contents و main را به يكديگر لينك بدهيم . در فريم Contents نام يك مبحث را وارد مي كنيم ( به عنوان مثال درس 1 ) . متن مورد نظر را ابتدا در يك محيط ويراستار كه معمول ترين آن Word‌مي باشد تايپ مي كنيم و سپس آن متن را در فريم main در Front-page كپي مي كنيم . فايلهاي Word با Front-page‌همخواني ندارد . پس لازم است تغييراتي در كد فايل انتقالي از Word ايجاد كنيم .

براي اينكار به روش زير عمل كنيد :
ابتدا يك صفحه ي جديد در Front-page ايجاد كنيد . سپس فايل Word‌را در آن صفحه ‌كپي كنيد و در قسمت Code ( قسمت پايين و سمت چپ صفحه سه قسمت با نامهاي Normal ، HTML و Preview وجود دارد بر روي قسمت HTML كليك كنيد ) كليد سمت راست ماوس را فشرده گزينه ي Optimize html را انتخاب كنيد پنجره اي باز مي شود كه ضرورت دارد تمامي گزينه هاي آن مخصوصا گزينه ي Word html‌فعال باشد ، پس از فعال كردن تمام گزينه ها بر روي كليد Ok‌كليك كنيد . مجددا راست كليك كرده اينبار گزينه ي Reformat html را انتخاب كنيد . اينكار باعث مي شود كه كدهاي اضافي كه توسط Word ايجاد مي شود حذف گردد .
فرض مي كنيم صفحه اي ايجاد كرده ايم كه داراي سه فريم است . فريم header كه طبق قائده فقط مخصوص نام سايت مي باشد . مي ماند دو فريم main و Contents . مي خواهيم در فريم Contents جدولي داشته باشيم كه شامل چندين گزينه باشد . سپس اين گزينه ها را به فريم main لينك دهيم .
بعد از طراحي جدول با ابعاد دلخواه در سلول اول جدول ، نام موضوع مورد نظر ( مثلا درس 1 ) را وارد كنيد . متن Word را طبق دستور گفته شده در قسمت main كپي كنيد . سپس در فريم Contents بر روي درس 1 دابل كليك كرده تا انتخاب شود . بعد كليك سمت راست ماوس را فشرده گزينه ي hyperlink را انتخاب كنيد . توضيح : hyperlink براي زماني است كه بخواهيد متن ، كلمه يا قسمتي خاص را به مكاني يا وب سايتي ديگر لينك دهيد . براي اينكار آدرس مورد نظر را در قسمت Addresses وارد كنيد .
ما مي خواهيم از فريم Contents به فريم main ، لينك داشته باشيم . پس در قسمت Addresses پنجره ي Hyperlink آدرس فريم main.html را وارد مي كنيم . اين مخصوص اولين لينك است . اگر در سلول دوم جدول مثلا درس 2 را داشته باشيم ديگر نمي توانيم آنرا به main لينك دهيم . پس صفحه اي جديد باز مي كنيم ، فايل Word‌را به آن صفحه مي آوريم سپس اعمال خاص گفته شده را روي فايل Word انجام مي دهيم و صفحه را با نامي با مسمي ذخيره مي كنيم . حال براي لينك دادن درس 2 در قسمت Contents در صفحه ي ايجاد شده ، درس 2 را انتخاب و از قسمت hyperlink ، در قسمت Addresses نام آن صفحه را وارد كنيد .

گزينه ي Page Properties

اگر بر روي صفحه ي جاري در فضايي خالي خارج از جداول ، فريم ها و ... راست كليك كنيد از منوي باز شده گزينه ي Page Properties مشاهده مي شود . اين كاربرد فراواني در Front-Page دارد . در ذيل به شرح گزينه هاي مختلف اين قسمت مي پردازيم :

• سربرگ General :

- Location : اين قسمت آدرسي كه صفحه ي جاري در آن قرار گرفته است را نمايش مي دهد .

- Title : عنوان صفحه . توجه كنيد در تمامي موارد هر جا نياز به نام گذاري بود از اسامي با مسمي استفاده نماييد .

- Page Description : اين قسمت مربوط به توضيحاتي خاص در روي وب سايت است . همانطور كه مي دانيد كاربران اينترنت در صورتي كه آدرس مشخصي از وب سايت مورد نظر نداشته باشند آنرا توسط موتورهاي جستجو Search مي كنند . توسط اين قسمت مي توان تا 250 كاراكتر توضيحاتي راجع به وب سايت نوشت تا در صورت جستجوي آن قسمت توسط كاربر ، دقت جستجو در مورد سايت شما بالا رود .

- Keywords : اين قسمت مربوط به كلمات كليدي در سايت است . در واقع تعيين مي كنيد كه كلمات كليدي در وب سايت شما براي موتورهاي جستجو كدام است . موتور جستجو روي اين كلمات كليدي هم عمل Search انجام مي دهد . در اينجا مي توان تعداد نامحدودي كلمه تعريف كرد . ضمن اينكه بايستي در فاصله ي بين كلمات از علامت كاما استفاده كرد .

- Base Location : همانطور كه از نامش پيداست آدرس پايه ي يك وب سايت مي باشد . در واقع همان آدرس دامين سايت .

- Default target frame : تعيين مسير و آدرس باز شدن فريمها

- Page Direction : تعيين طراز صفحه . همانطور كه مي دانيد طراز بندي صفحات بدو صورت مي باشد . از راست به چپ و از چپ به راست . در اين قسمت بسته به نوع زبان به كار برده شده در وب سايت تراز صفحه را تعيين كنيد .

- Background Sound : در صورتيكه بخواهيد زمينه ي وب سايت خود را صدا گذاري كنيد ، موزيك مربوطه را از مسير مورد نظر انتخاب كنيد .

- Loop : براي تعيين تعداد دفعات تكرار موزيك در صفحه ، عدد مورد نظر را وارد نماييد .

• سر برگ Formatting :

- Background : در صورتيكه بخواهيد از تصويري خاص در زمينه ي صفحه ي خود استفاده كنيد مي توانيد اين قسمت را فعال نماييد .

- Make it a watermark : در صورتيكه بخواهيد متن را بر روي background شناور كنيد اين گزينه را فعال نماييد . يعني فعال بودن اين گزينه باعث ثابت ماندن Background و متحرك شدن متن مي شود .

- Color

1- Background: براي رنگي كردن Background از اين گزينه استفاده مي شود.

2- Text: اين گزينه براي رنگي كردن متن مي باشد.

3- Hyperlink: در صورتيكه بخواهيد به قسمتهاي لينك شده رنگي دلخواه بدهيد از اين گزينه استفاده كنيد.

4- Visited hyperlink: اگر بخواهيد لينكي كه يك بار توسط كاربر باز شده را به رنگي دلخواه در صفحه ي اصلي در آوريد آن رنگ را از اين قسمت انتخاب نماييد .

5- Actived hyperlink: و در نهايت براي لينك فعال رنگ دلخواه را انتخاب كنيد .

• سربرگ Advanced :

سربرگ Advanced براي تنظيم حاشيه ها مي باشد . در ذيل به شرح گزينه هاي اين قسمت مي پردازيم :

- margin : براي Set كردن حاشيه ها

- Top margin : تعيين حاشيه از بالا

- Left margin : تعيين حاشيه از چپ

- Right margin : تعيين حاشيه از راست

- Bottom margin : تعيين حاشيه از پايين

- Style :

Body style : اگر بر روي اين گزينه كليك كنيد منوي جديدي باز مي شود كه به شرح قسمت Format مي پردازيم :

Format :

- Font : تغيير اندازه ي فونتها

- Paragraph : براي تنظيمات پاراگراف در صفحه

- Border: براي دادن Border و تنظيمات آن در صفحه

- Numbering : تعيين چگونگي حالت ليست در صفحه

- Position : تعيين موقعيت محل قرار گيري متن و تصوير

- Enable hyperlink rollover effects :

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

• سربرگ Language :

براي تنظيمات Encoding صفحه از اين قسمت استفاده مي شود . به دليل استفاده ي ايرانيان از زبان فارسي و لزوم طراحي وب سايتهايي با زبان فارسي براي فارسي زبانان ، بهتر است در قسمت :

Mark current document as

زبان Farsi را انتخاب كنيد و در قسمت Html encoding هر دو گزينه را utf8 انتخاب نماييد .

گزينه ي Behavior

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

• Check Browser :

براي استفاده از اين گزينه ، ابتدا متني در صفحه وارد كنيد ، پس از فعال كردن Behavior ، آن متن را Select كرده از قسمت Behavior گزينه ي Insert و سپس از كشوي باز شده گزينه ي Check Browser را انتخاب نماييد . اين قسمت براي تعيين Browser براي صفحه ي جاري مي باشد . همانطور كه مي دانيد معروفترين نوع Browser ، Internet Explorer است پس آنرا انتخاب كنيد . در قسمت بعد ورژن Browser را بايستي تعيين كرد . بهتر است گزينه ي Any فعال شود تا با هر ورژني همخواني داشته باشد .

- Go to url : با فعال كردن اين گزينه تعيين مي كنيم كه اگر Browser با حالت انتخابي از سوي ما هماهنگي داشت ، فلان صفحه ي مربوطه را باز كند .

- Go to url: و اگر با حالت درخواستي از جانب ما مغايرت داشت صفحه اي با آدرس ديگر باز كند.

• Check Plug-in :

مي دانيم كه برخي از نرم افزارها احتياج به Plug-in خاص خود براي اجرا شدن دارند . مثلا Flash كه Flash Player يا فايلهاي Media كه Media Player احتياج دارند .
در اين قسمت نوع Plug-in را مشخص مي كنيم و بسته به موارد استفاده شده در صفحه Plug-in ها را تعريف مي كنيم .

- Go to url : اگر Plug-in مورد نظر با حالت انتخابي از سوي ما هماهنگي داشت ، فلان صفحه ي مربوطه را باز كند .

- Go to url : و اگر با حالت درخواستي از جانب ما مغايرت داشت صفحه اي با آدرس ديگر باز كند.

• Jump Menu : مكان نما را در قسمتي از صفحه ( بدون انتخاب مكاني خاص ) قرار دهيد . سپس از منوي Insert گزينه ي Jump Menu را فعال كنيد . اين قسمت مخصوص منوهاي هوشمند است . يعني با انتخاب يك گزينه بصورت اتوماتيك به آدرس مورد نظر مي رود .
بدين صورت كه پس از انتخاب Jump Menu پنجره اي باز مي شود كه بايستي بر روي دكمه ي Add كليك كنيد .
سپس در قسمت Choice نام يا عبارت خاصي كه مي خواهيد مورد انتخاب واقع شود را وارد كنيد و در قسمت Value when selected, go to url نام سايت اينترنتي كه مي خواهيد پس از انتخاب آن عبارت خاص فعال شود را وارد كرده و كليد Ok را فشار دهيد ، بعد در پنجره ي اصلي Jump Menu در قسمت Open url in مي توانيد تعيين نماييد كه صفحه ي جديد را در خود صفحه ي اصلي باز كند يا آنرا در صفحه اي ديگر فعال نمايد .
و در نهايت در صورتيكه قسمت Select first item after url chang را فعال نماييد بدان معناست كه بعد از تغيير آدرس Url اولين انتخاب شود .

• Jump Menu Go :

براي فعال كردن اين گزينه لازمست ابتدا يك Jump Menu ايجاد نموده سپس آنرا Select نماييد. عملكرد اين گزينه شبيه به Jump Menu مي باشد . يعني تعيين مي كنيم در صورتيكه يك منو داشته باشيم ، اگر يك كليد خاص زده شد ، عمل دلخواه ما انجام پذيرد .

• Open Browser Window :

اين گزينه مخصوص زماني است كه بخواهيد يك Pop – Pop در صفحه داشته باشيد . ( Pop – Pop پنجره اي كوچك است كه همزمان با باز شدن صفحه باز مي شود و نكاتي خاص را به نمايش در مي آورد. به عنوان مثال يك Pop-Pop مي تواند حامل پيام تبريك يا تسليت ، پيامهاي اخباري و ... باشد ) پس از انتخاب Open Browser Window ، در قسمت Go to url نام آدرسي كه مي خواهيد Pop-Pop از آنجا باز شود را وارد كنيد . در قسمت Window name نام پنجره را وارد نماييد . گزينه هاي Window Width و Window height براي وارد كردن طول و عرض صفحه ي Pop – Pop مي باشد . حال به شرح تك تك گزينه هاي Attributes اين قسمت مي پردازيم :

- Navigation Toolbars : اگر اين گزينه فعال باشد باعث فعال شدن Toolbars در صفحه ي Pop-Pop مي شود (Back ، Paste ، Refresh و ... )

- Location Toolbar : باعث فعال شدن Address Bar مي شود .

- Statues Bar : باعث فعال شدن Statues Bar ( قسمت پايين صفحه كه Load شدن را نيز نشان مي دهد ) مي شود .

- Menu Bar : باعث فعال شدن Menu Bar در صفحه ي pop-pop مي شود .

- Scroll bars as needed : در صورتيكه Pop-Pop نياز به Scroll bar بار داشت فعال شود .

- Resize handles : صفحه ي Pop-Pop قابليت تغيير اندازه با ماوس را داشته باشد .

• Play Sound :

اين گزينه براي قرار دادن موزيك در متن صفحه مي باشد كه بصورت اتوماتيك Play شود .

• Pop-Pop Message :

اين گزينه مخصوص زماني است كه مي خواهيد در هنگام كليك كردن بر روي يك متن ، كلمه ، يا مكاني خاص يك پيغام به نمايش درآيد . مثلا اگر بخواهيد پس از كليك كردن بر روي يك كلمه ، يك پيغام به نمايش درآيد ، آن كلمه را Select‌كرده گزينه ي Pop-Pop Message را فعال كنيد و در قسمت Messages پيغام مورد نظر خود را تايپ كنيد . سپس با انتخاب اينكه چگونه آن پيغام به نمايش درآيد ( با كليك ماوس بر روي آن ، Unclick و ... ) نحوه ي انجام كار مشاهده مي شود .

• Preload Images :

كاربرد اين قسمت مربوط به زماني است كه بخواهيد در صفحه عكس هايي با حجم بالا استفاده كنيد. يعني شما مي خواهيد همزمان با Load شدن صفحه ، تصوير هم Load شود . تصويرهاي مورد نظر را در اين قسمت انتخاب و سپس آنها را Add كرده و كليد Ok را فشار دهيد .

• گزينه ي Set Text :

Set text of statues bar : براي Set كردن يك Text در قسمت Statues Bar ( قسمت پايين صفحه ) مي باشد .

• گزينه ي Go to Url :

براي لينك كردن قسمتهايي از صفحه كه امكان لينك كردن آنها وجود ندارد از اين گزينه استفاده مي شود . مثلا مي خواهيد يكي از سلولهاي جدول خود را به مكاني خاص لينك دهيد . براي اينكار از گزينه ي Go to Url استفاده نماييد .

استفاده از امكانات منوي Behavior

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

براي اينكار به ترتيب زير عمل كنيد :

ابتدا مكان نما را در قسمت Body در كناري ترين قسمت يعني سمت چپ و بالا قرار داده سپس بر روي ابزار Insert Layer كليك كنيد تا يك لايه ايجاد شود . پس از آن از منوي Format ، گزينه ي Behavior را انتخاب نماييد ، بعد از منوي Insert گزينه ي Set Text و سپس قسمت Set Text Of Layer را انتخاب كنيد .
حال يك صفحه ي جديد باز كنيد و اعمال دلخواه را انجام دهيد ( به عنوان مثال مي خواهيد با كليك كردن بر روي لينك نرم افزار ليست يكسري نرم افزار نمايش داده شود آن ليست را آماده كنيد ) بعد به قسمت Html و كدهاي صفحه رفته و از كد html آن صفحه كپي بگيريد و در قسمت Set Text Of Layer كپي كنيد . تمام منوها را به همين ترتيب ايجاد كنيد . وقتي كه تمام شد بر روي Layer دابل كليك كنيد و از قسمت Option ، گزينه ي None را انتخاب كرده و طول و عرض را نيز 100% انتخاب كنيد .

ايجاد يك Form

ايجاد يك فرم براي ارسال اطلاعات به Data base ، ورود به يك قسمت و ... مي باشد .
براي فعال كردن Form ، از منوي Insert بر روي گزينه ي Form كليك كنيد و مجددا از منوي باز شده گزينه ي Form را فعال نماييد .
توضيح :

انواع Button :

- ارسال اطلاعات
- ايجاد يك فرم جديد ( Reset نمودن يك فرم )
- Normal كه عملا كاري انجام نمي دهد و بايستي توسط كاربر دستور دهي شود .

هنگاميكه از منوي Insert ، گزينه ي Form و زير منوي Form را انتخاب كنيد فرمي شبيه شكل زير نمايش داده مي شود :


اگر بر روي دكمه ي Submit كليك كنيد به حالت Select‌در مي آيد . حال كليك سمت راست ماوس را فشرده و گزينه ي Form Field Properties را انتخاب نماييد .

• Form Field Properties

در اينجا به شرح قسمتهاي مختلف اين گزينه مي پردازيم :

- Name: ‌نام ، تعيين انتخاب نام Button در ارتباط با نوع عملياتي كه قرار است انجام است .

- Value : نامي كه براي Button انتخاب مي كنيد ( به عنوان مثال Submit )

- Button Type : تعيين نوع Button ( در قسمت انواع Button توضيح داده شد )

- Tab Order : هنگام استفاده از كليد Tab اولويت فعال شدن Button مورد نظر چه زماني باشد .

- Button Direct : تعيين جهت توضيحات نوشته شده در روي Button ( چپ به راست ، راست به چپ )

تنظيمات Button

بر روي Button راست كليك كرده و گزينه ي Form Properties را انتخاب نماييد . پنجره اي باز مي شود كه مربوط به تنظيمات Button است . در ذيل به شرح گزينه هاي اين قسمت مي پردازيم :

Where to store results

- Send To : ارسال اطلاعات به يك فايل با پسوند CSV

- E-mail Address : ارسال اطلاعات به يك E-mail خاص

- Send To Database :‌ارسال اطلاعات به يك Database

- Send To Order : ارسال اطلاعات به يك صفحه ي خاص

Form Properties

- Form Name : اطلاعات ارسال شده مربوط به كدام فرم بوده است .

- Target Frame : اطلاعات در همان پنجره ي جاري باز شود و يا در يك صفحه ي ديگر

- Form Direction : تعيين جهت نوشتاري متن

ايجاد فيلدهاي متني يك خطي ( Text Box ) :

براي فعال كردن اين گزينه ، از منوي Insert ، گزينه ي Form و زير منوي Text Box را انتخاب كنيد. اگر روي فيلد ايجاد شده دابل كليك كنيد پنجره اي با عنوان Text Box Properties باز مي شود كه به شرح آن مي پردازيم :

- Name : نام

- Value : مقدار پيش فرض

- Width in characters :‌تعداد كاراكترها ( مقدار فضايي كه فيلد مربوطه اشغال مي كند )

- Tab order: تعيين اولويت براي فعال شدن Text Box

- Password field : براي تعريف فيلدي با حالت پسورد ( مانند زماني كه مي خواهيد از سايت Yahoo وارد E-mail خود شويد و لزوما بايستي پسورد وارد كنيد )

- Text Direction : تعيين جهت متن

ايجاد فيلدهاي متني چند خطي ( Text Area ) :

براي ايجاد فيلدهاي متني چند خطي استفاده مي شود .

File Upload : براي انتخاب يك فايل و ارسال آن

Check Box: براي ايجاد قسمتهاي انتخابي كه اين امكان را داشته باشند كه بتوانيد چندين گزينه را يكجا انتخاب نماييد .

Option Button :براي انتخاب يك گزينه از چند مورد ( مانند سوالات چهار جوابي )

Group Box :براي ايجاد مجموعه اي از فيلدها و تنظيم هاي كلي مربوط به آنها

Drop-Down Box :براي ايجاد منوهاي فيلدهاي باز شو ( مانند حالتي كه شما مي توانيد كشور خود را از ليست باز شو انتخاب كنيد )

Push Button: براي ايجاد Button

Advance Button :در اين حالت مي توانيد Button را ايجاد ، سپس متن را به هر حالت و اندازه اي كه مايليد به نگارش در آوريد .

Picture Button: براي گذاشتن يك تصوير و تبديل آن به Button

Label : براي گذاشتن Label در Button

 چگونه متني را در سايت، پيدا و جايگزين كنيم؟

 سايت مورد نظر را باز كنيد  

از منوي File ، گزينه Open Web را انتخاب كنيد. سايتي كه مي‌خواهيد باز كنيد را پيدا كنيد، آن را انتخاب كنيد و روي Open كليك كنيد.

از منوي Edit ، گزينه Replace را انتخاب كنيد (يا Ctrl + H را بفشاريد.). كادر محاوره‌اي Find and Replace باز مي‌شود.

 كلمه مورد جستجو را تايپ كنيد  

كلمه يا عبارتي كه مي‌خواهيد پيدا كنيد را در كادر Find With تايپ كنيد و متن جايگزين را در كادر Replace With تايپ كنيد.

 گزينه‌ها  

گزينه‌هاي مربوط به جستجو را تنظيم كنيد از جمله اينكه آيا مي‌خواهيد تمام صفحات را جستجو كنيد (All Pages ) يا فقط صفحه انتخاب شده را (Selected Page(s) ). اگر بخواهيد گزينه Replace، يك قسمت از كد HTML (مانند هايپرلينك يا آدرس email كه لزوماً به صورت متن در صفحه ظاهر نمي‌شوند) را پيدا كند، گزينه Find in HTML را انتخاب كنيد.

 جستجو را آغاز كنيد  

اگر گزينه Current Page را انتخاب كرده‌ايد، روي Find Next كليك كنيد تا جستجو آغاز شود. در غير اين صورت، روي دكمه Find in Web كليك كنيد.

     يكي از فايل‌هاي ليست را انتخاب كنيد  

بعد از اينكه جستجو به پايان رسيد، كادر محاوره‌اي Find and Replace ، ليستي از صفحاتي كه متن مورد نظر در آنها بكار رفته است را نشان مي‌دهد.

 جايگزين كردن  

مورد جستجو در صفحه‌، متمايز مي‌شود. براي جايگزين كردن اين نمونه از كلمه، روي Replace كليك كنيد و براي جايگزين كردن تمام نمونه‌هاي كلمه، روي Replace All كليك كنيد. كادر محاوره‌ايFinished Checking Pages باز مي‌شود. براي برگشتن به ليست صفحات، روي Back to List كليك كنيد.

چگونه فيلدها و منوهاي فرم را تغيير دهيم؟

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

تغييردادن اندازه فيلد


اندازه يك فيلد مانند اندازه يك تصوير قابل تغيير است. روي فيلد كليك كنيد. مربع‌هاي انتخاب، پيرامون آن را فرا مي‌گيرند. يكي از مربع‌ها را با ماوس آنقدر بكشيد كه به اندازه مورد نظر برسد. اگر اندازه يك ليست كشويي را تغيير دهيد، بيش از يك گزينه در هر زمان، نمايش داده مي‌شوند.

روي فيلد كليك راست كنيد و گزينه Form Field Properties را انتخاب كنيد. كادر محاوره‌اي Properties باز مي‌شود.
خصوصيات فيلد را تغيير دهيد

بسته به نوع فيلد انتخاب شده، مي‌توانيد يك مقدار (يا حالت) اوليه براي آن تعيين كنيد. براي يك كادر متني يا ليست كشويي، مي‌توانيد مقداري (كاراكتري) تايپ كنيد كه بصورت پيش فرض در فيلد ظاهر مي‌شود (براي مثال Type here يا Make a selection) براي گروهي از كادرهاي انتخاب يا دكمه‌هاي راديويي، مي‌توانيد حالت هر دكمه يا كادر را بصورت انتخاب شده يا انتخاب نشده تنظيم كنيد. همچنين مي‌توانيد پهناي يك فيلد را تغيير دهيد. بعد روي دكمه OK كليك كنيد.

تغییر خصوصیات فرم

علاوه بر تغيير دادن تك تك فيلدهاي يك فرم، مي‌توانيد خصوصيات خود فرم را نيز تغيير دهيد . روي يك قسمت خالي از فرم كليك راست كنيد و گزينه Form Properties را انتخاب كنيد تا كادر محاوره‌اي Form Properties باز شود

گزينه‌هاي فرم را تنظيم كنيد

وقتي كه بازديد كننده‌اي، اطلاعات را در يك فيلد از فرم تايپ مي‌كند، اين داده‌ها را مي‌توان به شخص ديگري Email كرد يا در سايت خود ذخيره كرد. همچنين مي‌توانيد نتايج فرم را در يك پايگاه داده و يا با يك اسكريپت ذخيره كنيد ولي ايجاد اسكريپت، خارج از محدوده اين جزوه است. با اين حال، در كار  «چگونه يك پايگاه داده را به سايت خود متصل كنيم» به شما نشان مي‌دهيم كه چگونه از يك ويزارد Frontpage براي اضافه كردن پايگاه داده به سايت استفاده كنيد.

روي OK كليك كنيد تا تغييراتي كه انجام داديد ذخيره شوند و كادر محاوره‌اي Form Properties بسته شود.

اعتبار سنجي فرم

ممكن است لازم باشد كه بازديدكنندگان حتماً يك فيلد بخصوص را پر كنند. براي مثال، مي‌توانيد از بازديد كننده بخواهيد كه حتماً فيلد اسم يا آدرس را پر كند و اگر بازديدكننده بدون پر كردن اين فيلدها، روي دكمه Submit كليك كند، يك پيغام خطا باز ‌شود. براي اينكه پركردن يك فيلد را اجباري كنيد، روي آن كليك راست كنيد و گزينه Form Field Properties را انتخاب كنيد. از كادر محاوره‌اي كه ظاهر مي‌شود، گزينه‌هاي مربوط به اين موضوع را انتخاب كن

چگونه خودمان يك فرم طراحي كنيم؟

براي هر فرمي كه ايجاد مي‌كنيد، Frontpage دو دكمه Submit و Reset در نظر مي‌گيرد. بغير از اين دو فيلد اجباري در فرم، بقيه محتويات صفحه به عهده شماست. شما با استفاده از كادرهاي متني ، كادرهاي انتخاب و دكمه‌ها يا منوها مي‌توانيد اطلاعات را از كاربر بگيريد.

صفحه‌اي كه مي‌خواهيد فرم جديد در آن قرار گيرد را باز كنيد. و روي محلي كه مي‌خواهيد فرم جديد ظاهر شود كليك كنيد.

مهم: اگر روي يك قسمت خالي از صفحه كليك كنيد و از منوي Insert گزينه Form را انتخاب كنيد، يك فرم جديد ايجاد مي‌شود. و اگر داخل يك فرم كليك كنيد، يك فيلد ديگر به آن اضافه مي‌شود.

كادر متني

اگر مي‌خواهيد بازديدكنندگان، مقدار كمي متن (مانند آدرس) وارد كنند، يك كادر متني يك خطي درج كنيد. از منوي Insert، گزينه Form و بعد گزينه Textbox را انتخاب كنيد. (قبل از اضافه كردن يك فيلد به فرم، بهتر است كه يك متن توضيحي وارد كنيد تا آن فيلد را معرفي كند(

كادر متني چند خطي

براي گرفتن اطلاعات طولاني‌تر مانند نظرات در مورد سايت، از يك كادر متني چند خطي استفاده كنيد. ابتدا، Enter را بزنيد تا يك خط جديد در فرم ايجاد شود. بعد از منوي Insert، گزينه Form و بعد گزينه Text Area را انتخاب كنيد.

كار انتخاب (Check box)

اگر صفحه شما يك سرويس با چند قسمت ارائه مي‌كند، كادر انتخاب مفيد است زيرا به بازديد كننده امكان مي‌‌دهد تا در بيش از يك قسمت ثبت نام كنند، براي اضافه كردن يك كادر انتخاب، از منوي Insert، گزينه Form و بعد گزينه Check Box را انتخاب كنيد. براي اضافه كردن يك كادر انتخاب ديگر در يك خط جداگانه، Enter را بزنيد (براي ايجاد خط جديد، Shift + Enter را بزنيد) و اين مرحله را تكرار كنيد.

دكمه راديويي

دكمه‌هاي راديويي (كه دكمه‌هاي گزينه نيز ناميده مي‌شوند) وقتي سودمند مي‌باشند كه از بين گزينه هاي ارائه شده فقط بتوان يكي را انتخاب كرد. از منوي Insert گزينه Form و بعد گزينه Option Button را انتخاب كنيد. اين مرحله را براي دكمه‌هاي راديويي بعدي كه مي‌خواهيد درج كنيد تكرار كنيد.

File Upload

مي‌توان يك فيلد در فرم قرار داد كه به بازديدكنندگان امكان مي‌دهد تا يك فايل را به سرور وب شما Upload كنند. از منوي Insert گزينه Form و بعد گزينه File Upload را انتخاب كنيد. يك دكمه Browse روي فرم ظاهر مي‌شود. اگر بازديدكنندگان بخواهند بدنبال فايل در هارد خود بگردند از اين دكمه استفاده خواهند كرد. بر خلاف كنترل هاي ديگر فرم، كنترل FileUpload مستلزم اين است كه به يك سايت راه دور دستيابي داشته باشيد (نه به يك سايت مبتني بر ديسك در هارد) . براي جزئيات بيشتر به قسمت «توجه» مراجعه كنيد. براي مشاهده اين فرم در مرورگر، روي برگه Preview كليك كنيد.

• توجه*

اعتبار سنجي فرم براي منوها

براي اينكه File Upload كار كند، بايد سرور خود را از راه دور باز كنيد (از منوي File گزينه Open Web را انتخاب كنيد. آدرس سايت خود را تايپ كنيد مثلاً http://www.yousite.com/ و روي Open كليك كنيد.) بعد اسم كاربري و كلمه عبور خود را تايپ كنيد. بعد بايد يك پوشه جديد در سايت خود ايجاد كنيد كه فايل‌‌هاي Upload شده در آن ذخيره شوند. روي اين پوشه جديد كليك راست كنيد، گزينه Properties را انتخاب كنيد و گزينه Allow Programs to be run را غير فعال كنيد. گزينه‌هاي Allow Scripts to be run و Allow files to be browsed را انتخاب كنيد.
روي كنترل File Upload كه اضافه كرديد كليك راست كنيد و گزينه Form Properties را انتخاب كنيد. روي Options كليك كنيد و برگه File Upload را انتخاب كنيد. روي Browse كليك كنيد و پوشه‌اي كه ايجاد كرده‌ايد را باز كنيد. دوبار روي OK كليك كنيد. حال مي‌‌توانيد فايل‌ها را به سايت خود Upload كنيد . بخاطر داشته باشيد كه براي انجام اين تغييرات، بايد سايت را از راه دور باز كنيد و نمي‌توانيد اين تغييرات را روي يك سايت در ديسك انجام دهيد