آموزش Front - Page

[B@RBOD]

مباحث مربوط به آموزش Front - Page در این تاپیک

[B@RBOD]

Front-Page يكي از مجموعه نرم افزارهاي Office-xp مي باشد كه براي طراحي صفحات وب بكار مي رود . در واقع قالب اصلي و هر آنچه شما در صفحه اي بنام Internet explorer مشاهده مي كنيد مي تواند با Front-page و يا تلفيقي از Front-page و نرم افزارهاي ديگر طراحي وب ساخته شده باشد . براي آموزش اين دوره نياز است كاربران محترم آشنايي كامل با ويندوز Xp و آشنايي مقدماتي با يكي از نرم افزارهاي طراحي وب مانند html داشته باشند . جهت نصب و اجرای نرم افزارهای Office که Front-Page نيز شامل آن می شود ، نياز به سيستمي با مشخصات ذيل می باشد :

- حداقل سيستم مورد نياز پنتيوم 233
- 16 مگابايت Ram
- حدود 600 مگا بايت فضای آزاد

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

[B@RBOD]

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

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

[B@RBOD]

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

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

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

[B@RBOD]

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

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

[B@RBOD]

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 در منوي باز شده مشاهده مي شود كه مربوط به تنظيمات فريم ها مي باشد .
در ذيل به شرح گزينه هاي اين پنجره مي پردازيم

• 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 دارد .

[B@RBOD]

• سربرگ General :

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

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

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

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

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

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

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

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

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

[B@RBOD]

• سر برگ Formatting :

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

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

- Color

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

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

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

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

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

ادامه ي گزينه ي Page Properties

[B@RBOD]

• سربرگ 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 :

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

[B@RBOD]

• سربرگ Language :

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

Mark current document as

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

گزينه ي Behavior

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