چند نکته برای شروع:



1)     جهت شروع كار، كاربر باید قبلاً با اینترنت كار كرده و با ساختار كاركردى آن بطور كامل آشنا باشد، همچنین نمونه صفحاتى را كه دوست دارد بسازد، در ذهن داشته باشد.



2)     بهتر است قبل از كار كردن با برنامه Front Page، با برنامه تایپى Word آشنا شده و كار نموده باشید. چرا كه اكثر مطالب آنجا مورد نیاز بوده و تكرارى است.



نکاتی مهم در طراحی Webpage



· محتوا و موضوع صفحه شما برای بازدیدکننده مهم است.



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



·   هر چه سریعتر بازدیدکننده را به موضوع مهم و جالب راهنمایى نمایید و از كشاندن او به صفحات گوناگون بىتحرك خوددارى نمایید.



· از دادن اطلاعات نادرست و غیر اخلاقى خوددارىكرده و در صورت لزوم با دادن آدرس سایتهاى معتبر و خوب در زمینه موضوع مورد تحقیق خود او را در این زمینه یارى دهید و جلب اعتماد نمایید.



· چون عكس یك قسمت اعظم و مهم كار شما را در اینترنت تشكیل مىدهد، لذا بهتر است شما حداقل كمى با برنامه PhotoShop آشنا باشید.







شروع کار



قبل از هر چیزى، نظم در كار حرف اول را جهت موفقیت مىزند لذا قبل از شروع به كار شما باید بدانید كه چه كاری مىخواهید انجام دهید و به چه چیزهایى نیاز دارید. هنگامى كه یك صفحه وب ساخته مىشود معمولا دارى یك صفحه اصلى (Home Page) به نام (index.html) بوده و سایر ملزومات آن یعنى صفحات دیگر و عكسها یا وسایل مورد لزوم در پوشه هاى مربوطه بطور منظم نگهدارى می شوند. لذا براى شروع كار بهتر است شما در بخشى از كامپیوتر خود یك پوشه به نام مثلا (My Web) ایجاد نموده و درون آن دو پوشه دیگر به نامهای (docs) و (images) بسازید.



صفحه اول یا اصلى شما درون(My Web) قرار گرفته و بقیه صفحات درون پوشه (docs) و تمامى عكسها درون پوشه (images) ذخیره خواهند شد. این عمل فقط جهت منظم بودن كار توصیه مىشود و ضمنامىتوانید مدارك و فایلهاى یك بخش حجیم و زیاد یك اتصال خود را به یك پوشه جداگانه هدایت نموده و ذخیره كنید، مثلامسئولیت آنرا به عهده یك فرد یا گروه خاصى قرار داده و فقط آنها را به صفحه اصلى یا index.html آن اتصال دهید. مثلایک یا چند پوشه جداگانه درون My Web که خودشان دارای docs و images و همچنین صفحه اصلی Index جداگانه داشته باشند.







تذكرات مهم:



· از دادن اسمهاى فارسى به پوشه ها، فایلها، عكسها و اسناد خود جداً خوددارى نمایید چرا كه در اینترنت آنها دچار مشكل شده و قابل دسترسى نخواهند بود.



· از نوشتن كاراكترهاى غیر مجاز، دادن فاصله های زیاد بین اسامى و استفاده از حروف بزرگ در نام اسناد و پوشه ها خوددارى كنید.



از درست كردن پوشه هاى تو در تو و پیچ در پیچ و با نام بلند خوددارى كنید و از مخفف كلمات استفاده نمایید (مثلابه جاىteaching center از tc   یا tcenter استفاده شود بهتر است.)



آشنایی با پنجره برنامه Front page 2002 XP







پنجره Front page نیز مانند سایر پنجره هاى windows بوده و شامل :



1) Title Bar



2) Menu Bar



3) Tool Bar



4) Main Window



5) Status Bar



6)   Scroll Bar    



7) ودر این برنامه یك ستون اضافى در سمت چپ صفحه اصلى قرار دارد كه View Bar مىباشد و بطور پیش فرض فعال است.







میله نمایش یا View Bar



درپنجره باز شده علاوه بر میله عنوان و ابزار در سمت چپ پنجره یك پنجره جداگانه بصورت عمودى و بطور پیش فرض باز بوده و فعال مىباشد (View Bar). كه این پنجره در مراحل تكمیلى (هنگامی كه تقریبا سایت شما كامل شده و صفحات متعددى دارید) مفید خواهد بود. در این پنجره معمولا شما شش لایه (Tab) مىبینید كه عبارتند از:



1) Page : یا صفحه



2)Folders : پوشه ها



3) Reports : یا گزارشات



4) Navigation : یا ساختار كلى (چارت) شبكه



5) Hyperlinks : یا وضعیت اتصالات



6) Tasks : یا وظایف و كارها







1) Page یا صفحه: اگر فعال باشد شما صفحه اى را كه در آن كار مىكنید را در پنجره اصلى بطور فعال خواهید دید.



2)    Folders یا پوشه ها: اگر روى آن كلیك نمایید و فعال باشد شما تمامى پوشه هاى درون سایت خود را در درون پنجره اصلى مشاهده خواهید نمود.



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







نکات :



دقت کنید که اگر بر روی پوشه ای در بخش Folder List کلیک راست کنید یک سری امکانات ویژه در اختیار شما قرار می دهد از جمله:



Convert to web: پوشه را به حالت صفحه وب در می آورد و کل آن پوشه و محتویات آن پوشه به عنوان یک سایت فرعی و زیر مجموعه ای از سایت اصلی و کلی ما عمل می کند.



Cut: شما می توانید پوشه مورد نظر را از آنجا برداشته حرکت (Move) داده و در جای دیگر قرار دهید. (با عمل paste)



Copy: یک نسخه از پوشه موردنظر را در جاهای دیگر رونوشت می کند.



Rename: اسم پوشه را عوض می کند.



Delete: کل پوشه و محتویات آن را حذف می کند و دیگر قابل دسترسی نیست (در اینترنت Recycle Binنداریم).



Page New: در پوشه یک صفحه جدید می سازد. برای اینکار یک بار کلیک کنید و حتماً اسم با مفهومی به جای new page تایپ کنید. حتماً برای ساختن صفحه باید پسوند (.htm) وجود داشته باشد.



Publish : انتقال یا انتشار پوشه درست شده به سایت اصلی را به عهده دارد.







نکته مهم در Rename



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







تدکر بسیار مهم: Title و اسامی صفحات (File Name) در اینترنت مهم بوده لذا باید در نامگذاری صفحات و Title آنها کمال دقت را داشته باشید و این امر در دستیابی موتورهای جستجوگر به صفحات ما کمک زیادی می کند.



ابزارهاى نوار ابزار Standard به طور استاندارد از بالا سمت چپ به راست عبارتند از:



1) Toggle Pane ( فهرست پوشه): جهت مشاهده فهرست پوشه ها در كنار(سمت چپ) صفحه اصلى



2) Print(چاپ): جهت چاپ نمودن صفحات مورد نظر



3) Spelling (كنترل دیكته): جهت چك و كنترل دیكته كلمات تایپ شده از نظر قواعد دیكته نویسى و قواعد مربوطه می باشد. اگر کلمه ای در داخل صفحه اشتباه دیکته داشته باشد زیر آن با رنگ قرمز و اگر اشتباه گرامر داشته باشد با رنگ سبز مشخص می شود. برای اصلاح آنها روی هر قسمت کلیک راست کرده و تک تک درست می کنیم. اما با زدن دکمه spelling کادری باز می شود که می توان در آنجا اشتباهات را اصلاح کرد.



    Ignore: چشم پوشی کردن از غلط موجود (وقتی که ما از قصد آنرا غلط نوشته ایم) ، کلمه یا اسم خاصی است که   در دیکشنری دستگاه نیست.



: Ignore all از همه موارد چشم پوشی کردن



Change: عوض کردن (با کلمه پیشنهادی پنجره که در درون کادر انتخاب می کنیم عوض نماید.)



Change All: عوض کردن کلی (با کلمه پیشنهادی پنجره که در درون کادر انتخاب می شود، این کلمه را در صورت وجود در هر کجای این صفحه عوض نماید.)



Add: به دیکشنری اضافه کند و دیگر در سندهای بعدی ایراد نمی گیرد. (هرگاه کلمه خاصی که زیاد به آن نیاز داریم و دیکته آن را درست نوشته ام به دیکشنری اضافه می نماید)



Suggest: دستگاه نظر یا پیشنهاد خودش را ارائه دهد که می تواند جهت رفع اشکال انتخاب شود.



4) Cut (برش): جهت بریدن و برداشتن بخشى از متن، عكس و یا قسمت انتخاب شده جهت درج در بخشى دیگر.



5) Copy (كپی): جهت برداشتن نسخه یا كپى بخشى از متن، عكس و یا قسمت انتخاب شده جهت درج در بخشى دیگر (Ctrl + C)



6) Paste (الصاق): جهت الصاق یا چسباندن قسمت كپى یا بریده شده موجود در حافظه (clipboard) در بخش مورد نظر (Ctrl + X)







نحوه انتخاب كردن كلمه، خط، پاراگراف وكل متن



تا چیزی را انتخاب نكنیم نمی توانیم روی آن عملی (cut،copy، تغییر رنگ، اندازه و ...) را انجام دهیم و در اینكار باید خیلی دقت كنیم. برای انتخاب یك كلمه كافی است دوبار روی كلمه كلیك كنیم.



برای انتخاب یك خط به ابتدای خط رفته به نحوی كه علامت درج متن (I) ماوس تبدیل به فلش شود و یكبار كلیك می كنیم اگر دو بار كلیك كنیم پاراگراف انتخاب می شود و اگر سه بار پشت سر هم كلیك كنیم كل متن انتخاب می شود. برای انتخاب كلمه، خط، متن ویك یا چند حرف با صفحه كلید به صورت زیر عمل می كنیم. به ابتدای جایی كه می خواهیم انتخاب کنیم با كلیدهای جهت نما حركت كرده و در آنجا قرار می گیریم، دكمه shift را نگه داشته با كلیدهای جهت نما (Arrow Keys)به انتهای قسمت انتخابی خود می رویم. ساده ترین و راحت ترین روش انتخاب drag كردن با ماوس است. بدین طریق كه در ابتدای قسمت مربوطه كلیك كرده و با احتیاط تمام تا آخر قسمت مربوطه (حرف، كلمه، خط، پارگراف و كل متن) می كشیم.



7) Format Painter (حكاك قالب بندى): جهت انتقال قالب بندى یك بخش انتخاب شده به بخشهاى دیگرو سرعت بخشیدن به قالب بندى كارها (كلید طلایی) اگر می خواهیم چند چیز را با Format یكسان تغییر دهیم كافی است این اعمال را فقط روی یك چیز انجام داده، سپس آن موضوع را انتخاب كرده (جهت یكباراستفاده، یك بار و برای چند بار استفاده، دو بار پشت سر هم روی این دكمه كلیك میكنیم) سپس روی(حروف، كلمات، بندهای ) مورد نظر، كلیك كرده و با درگ drag انتخاب می كنیم. برای خارج كردن نشانگر از آن حالت (خنثی كردن آن)، یكبار روی خودش كلیك می كنیم.



8) Undo(خنثی كردن): جهت خنثی نمودن آخرین اعمال و كارهاى انجام شده اشتباهى در صفحه (Ctrl+Z)



9) Redo(برعكس خنثى): اگر عملى را خنثى نماییم ولى مجددا بخواهیم به آن عمل باز گردیم از این دكمه استفاده مىنماییم (Ctrl+Y)



10) Web Component:تعدادی افکت در اختیار کاربر قرار می دههد. از جمله:



: hover Button میتوانید كلمه ای را ازاین طریق به صفحه یا سایتی اتصال دهید. و هنگامی كه بیننده روی آن می آید می تواند جلوه های ویژه ای در صفحه مربوطه ایجاد كند.



: marquee متن انتخابی یا نوشته شده را متحرك می كند با تغییر جهت و رنگ پس زمینه و ... .



Banner Ad manager: كه شما می توانید با استفاده از دكمه Add عكسها و تصاویر انتخابی را در این قسمت قرار داده و حتی در بخش link toآن را به سایت یا صفحه ای متصل كنیدو جلوه خاصی نیز در قسمت Effect به آن بدهید.



: web search برای درون سایت میتوانیم جستجوگر بگذارید.



: hit counter برای درون سایت می توانیم شمارشگر بازدید كننده بگذارید.



: Photo gallery برای درون سایت می توانیم عكسها را به صورت گالری بدهیم.



11) Insert table (قرار دادن جدول): جهت درج جدول در محل انتخاب شده از طریق این دكمه و یا منوی Tableمیتوانیم با توجه به نیازمان جدول بسازید. در این گزینه كلیك كرده و به تعداد مورد نیاز می كشید. اما در قسمت Table/Insert تعداد سطرها و ستون های مورد نظر را وارد می كنیدو بعد از درج جدول اگر بخواهید روی آنها كار كنید، روی جدول كلیك راست كرده گزینه Table properties مشخصات كل جدول را در اختیارشما قرار میدهد اما cell properties مشخصات سلولی را كه درآن كلیك كرده اید در اختیار شما قرار می دهد.



كلیك راست روی جدول و انتخاب گزینه        Table properties



: Alignment تنظیم سمت قرار گرفتن جدول نسبت به متن اطراف و همچنین تعیین جهت نوشتن متن



: Float     نسبت به متن جدول را در سمت راست یا چپ قرار میدهد.



    : cell spacing فاصله بین سلول و متن درون آنرا كم و یا زیاد می كند.



:cell padding     فاصله بین سلول ها را از هم كم یا زیاد می كند.



:Table Direction     جهت جدول را راست به چپ یا چپ به راست می كند.



:Borders با درج عدد بزرگتر جدول را قاب می كند. شما می توانید با حذف كردن Border Size، جدول را برای بیننده مخفی كنید. برای قاب كردن عدد بزرگ و با (light, Dark) Border رنگ خاصی بدهیم. color رنگ كلی به جدول می دهد.با زدن show both cells and table می توانیم خطوط جدول و سلول ها را كامل ببینیم. برای Background یا زمینه کل جدول و یا یک سلول تنها، می توانیم رنگ مخصوص و یا حتی یك تصویر بدهیم. اگر بخواهیم درون سلول متنی درج كنیم موقعیت نوشتن متن را كه همیشه از پیش تعیین شده است را از سمت چپ ، راست، متعادل و نسبت به عكس از وسط، بالا ، زیر و ... . اگر خواستید سلولی خط درشتری داشته باشد و تیتر گردد، آن ها را انتخاب كرده و از قسمت cell properties درون header cell كلیك كنید.



اگرNo wrap را انتخاب کنید، جملات یك سلول را پیوسته می آورد و شكنندگی ایجاد نمی كند.



در قسمت گزینه Table بر روی Menu Bar گزینه های زیادی است كه عبارتند از:



: Draw Table به صورت دستی جدول کشیده می شود و هنگام کلیک روی آن ماوس تبدیل به یک قلم میشود و می توانید به شکل و اندازه و جای مورد نظر جدول را ترسیم کنید.



: Insert می توانید جدول (Table)، ستون(Columns)، ردیف(Rows)، سلول و ... قرار دهید.



: Delete cellحذف سلول های انتخاب شده.



: Selectانتخاب جدول، ستون، ردیف، سلول.



: merge ادغام سلول های انتخاب شده.



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



: Auto Format با توجه به ساختارهای قبلی موجود در حافظه جدولمان را قالب بندی میكند.



: Distribute Columns rowsهماهنگ كردن ردیف ها و سطرها به طور مساوی



: Auto Fit contentبا توجه به محتویات درون جدول و متن درج شده، تنظیم داخل سلول را انجام میدهد.



: convertجدول را بر میدارد و متن را بدون جدول می گذارد.



12) Insert picture from file: (قرار دادن عكس از فایل) جهت درج و قرار دادن عكس یا ClipArt در صفحه. اگر بخواهیم دردرون صفحاتمان عكس قرار دهیم با استفاده ازاین دكمه و یا گزینه Insert / picture استفاده میكنیم.



13) :clip Artعكسهای پیش فرض نرم افزار آفیس را در اختیار شما قرار می دهد.



14) :Auto shape برای گذاشتن علائم و عکسهای خاص Drawing می باشد.



15) :Word Artافکت های نوشتاری ویژه.



16) Video: یك فیلم ویدئو كوتاه در Page قرار میدهد.



17) New Drawing: یک Canvas یا بوم نقاشی جهت درج شئ یا عکسی در اختیار شما قرار میدهد.



القای تغییرات برروی تصویر



روی عكس دو بار كلیك كرده و یا از قسمت View به قسمت Toolbar رفته و گزینه Drawings را انتخاب می کنید.



Select: برای انتخاب عکس و یا Hotspots ها می باشد.



Hotspots: جهت اتصال تكه ای ازعكس به یك سایت، صفحه و ... استفاده می شود بدین گونه كه با توجه به نیاز روی یكی از آن ها كلیك كرده در روی عكس به اندازه دلخواه می كشید وقتی ماوس را رها كنید پنجره Hyperlink بازمی شود و می توانید آدرس مناسب داده و بعد ازآن می توان اندازه و مكان اتصال را جابجا، کوچک و بزرگ نمایید (برای تغییر اندازه از كناره ها و برای تغییر مكان روی آن كلیك كنید.)



Restore: عكس تغییر یافته را به حالت اولیه بر می گرداند.



Resample: عكس را هنگامیكه از نظر اندازه تغییر كرده باشد به حالت قبلی اش بر می گرداند.



Bevel: از كناره های خود عكس یك قاب برای عكس می سازد.



Color: از این بخش برای شستن رنگ عكس و كم كردن یاسفید وسیاه كردن آن استفاده می شود.



Transparent: جلوه ویژه به عكس دادن و برجسته کردن بخشی از آن.



Crop: برای بریدن تكه ای از عكس كه نیاز است و حذف زایده های آن. برای این کار ابتدا روی عکس كلیك كرده تكه مورد نظر را انتخاب كرده و آن را تنظیم كرده، سپس دوباره روی دکمه Crop كلیك كرده تكه مورد نظر مانده و بقیه حذف می گردند.



Less Brightness: شفافیت یا نور را كم می كند.



: More Brightness شفافیت یا نوررا زیاد میكند.



: Less Contrastحساسیت دو رنگ را كم میكند.



More Contrast: حساسیت دو رنگ را زیاد میكند.



4 دكمه بعدی برای چرخش و زاویه بندی عكس می باشند. بدین نحو که:



Flip Vertical: جهت چرخش عمودی عکس نسبت به مرکز عکس



Flip Horizontal: جهت چرخش افقی عکس نسبت به مرکز عکس



Rotate Vertical: جهت دوران عمودی عکس



Rotate Horizontal: جهت دوران افقی عکس



18) Send Backward: هنگامیكه دو یا چند عكس را كنار هم داریم می توانیم یكی را در پشت سر دیگری قرار دهیم.



19) Bring Forward: هنگامیكه دو یا چند عكس را كنار هم داریم می توانیم یكی را در جلوی دیگری قرار دهیم.



20) Positional absolutely: موقعیت و محل قرار گرفتن عكسها را ثابت نگه می دارد.



21) Thumbnail: برای اینكه عكسها سریع تر قابل دسترس برای بیننده باشد در صورتیكه عكسها بزرگ و زیاد باشند، ابتدا نمونه عكس كوچكی از آن كه اندازه خیلی كمی دارد ساخته می شود. در صورتیكه بیننده بخواهد عكس بزرگ تر را ببیند روی آن عكس كلیك كرده و عکس بزرگ و اصلی را می بیند.



22) Text: می توانیم با انتخاب این گزینه در درون عكس انتخابی خود متن مورد نظر را تایپ كنیم.



آموزش









ساخت یک صفحه وب خالی



از منوی View فرمان Task Pane را اجرا کرده تا پنجره New Page Or Web در کنار محیط F.P ظاهر شود. برای ساخت یک مجموعه صفحات وب خالی روی دکمه Empty Web را انتخاب کنید .



پنجره Web Site Template باز می شود که در آن آیکون Empty Web به صورت پیش فرض فعال است . روی دکمه Browse کلیک کرده ومکان ساخت وب را برای برنامه تعیین کنید . پوشه ای که می سازید بهتر است خالی باشد و چیزی در آن کپی نشده باشد.





پس از تعیین مکان وب روی دکمه OK کلیک کنید. پنجره Create New Web به مدت چند لحظه نمایش داده می شود که نشان می دهد وب در حال ساخته شدن است .



حال به منوی View رفته و فرمان Folder را اجرا کنید .



نوار Folder List در کنار F.P ظاهر می شود و پوشه های ساخته شده در آن به نمایش گذاشته می شود . مزیت باز نگه داشتن این نوار آن است که هر فایل و صفحه وبی که به مجموعه وب ما اضافه شود در این بخش مشخص می شود .



روی زمینه نوار Folder List راست کلیک کرده و از گزینه New در پنجره باز شده Page را انتخاب کنید. صفحه وب خالی و سفید رنگی بنام New-Page.html ظاهر می شود .







اضافه کردن متن



اضافه کردن متن به صفحات وب بسیار ساده و مانند نوشتن در محیطWord می باشد . در صفحه سفیدرنگ متن مورد نظر خود را تایپ کنید و با استفاده از گزینه Font در منوی Format , فونت - اندازه - جهت چیده شدن و رنگ متن را به دلخواه تغییر دهید.







ذخیره سازی



تا اینجای کار اطلاعات وارد شده در صفحه وب شما ذخیره نشده است . باید توجه کنید که F.P برای اجرای بسیاری از فرمانها نیاز دارد که صفحه را ذخیره کنید . پس قبل از انجام هر کاری صفحه خود را Save کنید .



از منوی File گزینه Save را انتخاب کرده و محل ذخیره شدن صفحه را مشخص نمایید. می بینید که صفحه با نام پیشنهادی Index می خواهد ذخیره شود . میتوانید نام صفحه را تغییر دهید. اما بهتر است نام پیشنهادی را انتخاب کنید.







صفحه Index چیست؟



تمام وب سایتها ی اینترنتی یک صفحه Index یا Home Page دارند . این صفحه محیطی است که آغاز دسترسی به مجموعه یک وب سایت را فراهم می کند. تمام لینک های مورد نظر جهت انتقال به دیگر صفحات وب سایت در این صفحه موجودند. به همین علت همیشه F.P نام اولین صفحه وب را Index پیشنهاد می کند و اگر این پیشنهاد را رد کنید برای ذخیره کردن صفحات بعدی نیز این نام را دوباره پیشنهاد می کند .با صفحه ای که ساختید فایلی بنام Index.html به مجموعه Folder List شما اضافه می شود.







ساخت اتصال



یک اتصال یا Link عبارت است از متن – دکمه – تصویر یا جزئی از صفحه وب که با کلیک بر آن از صفحه مذکور می توان به صفحه دیگری رفت. به عنوان مثال اولین صفحه ای را که ساخته اید (Index.html) به صفحه دوم (Page1.html) متصل کنید.برای این کار باید نوشته ای را در صفحه Index.html قرار داد، تا با کلیک بر روی آن به صفحه Page1.html برسید. از مجموعه وب خود صفحه Index.html را بازکرده و روی آن بنویسید " صفحه بعد". (یا هر عبارت موردنظر دیگر). می توانیم رنگ – فونت – سایز نوشته را به دلخواه تغییر دهید. متنی را که نوشته اید انتخاب کرده( با نگه داشتن کلید ماوس رو متن بکشید تا سیاه شود ) و روی متن راست کلیک کنید تا منویی مانند زیر باز شود .







از این منو گزینه Hyperlink را انتخاب کرده تا صفحه ای مانند شکل زیر باز شود .





در این پنجره نام صفحه ای را که می خواهید به آن متصل شوید انتحاب کنید.( در این تمرین منظور صفحه Page1.html است.) و Ok را بفشارید. متوجه خواهید شد که متن شما به رنگ آبی و به صورت زیر خط دار نمایش داده می شود، این حالت نشان دهنده آن است که متن شما Link شده است. تغییرات را ذخیره کنید.



حال از Page1.html اتصال باز گشت به صفحه Index.html بسازید. اما این بار از یک شکل برای Link دادن استفاده کنید. برای این کار به منوی Tools رفته و گزینه Customize را انتخاب کنید، صفحه ای باز می شود.









در برگه Toolbars گزینه Drawing را تیک زده و اگر دقت کنید می بینید کادری به صفحه F.P اضافه شده است .









از این کادر می توانید Auto shape را انتخاب کنید و یک تصویر دلخواه را برای ساختن اتصال انتخاب کنید و یا می توانید از Rectangle یا Oval استفاده کنید.



با نگه داشتن دکمه چپ ماوس و کشیدن آن روی صفحه طرح دلخواه را رسم کنید و رنگ دکمه را نیز عوض کنید . ( از طریق Fill color در همین ردیف که به شکل سطل رنگ می باشد می توانیم رنگ زمینه دکمه را عوض کنیم و از طریق Line Color رنگ حاشیه دکمه تغییر دهید .(روی دکمه راست کلیک کرده و از منوی ظاهر شده گزینه Add Text را انتخا ب کنید و در کادر باز شده روی دکمه متن دلخواه را بنویسید.





اگر متن را انتخاب کنید و روی آن راست کلیک کنید از طریق Font می توانید رنگ و اندازه متن را تغییر دهید .روی دکمه دوباره راست کلیک کرده و این بار از منوی ظاهر شده گزینه Hyperlink را انتخاب کنید، از کادر باز شده نام صفحه ای را که می خواهیم به آن متصل شوید را انتخاب کنید.



Previewرا بفشارید و نتیجه کار را مشاهده کنید.







اتصال با تصاویر



می توان فیلم ، صدا و اجزای دیگر را که با آنها آشنا می شوید به Link تبدیل کرد. اکنون هدف Link دادن تصاویر می باشد.تصویر درون سایت را انتخاب کرده و روی آن راست کلیک کرده و از منوی باز شده مانند قبل گزینه Hyperlink را انتخاب کنید و ازکادر باز شده صفحه ای را که می خواهید به آن متصل شوید انتخاب نمایید.( مثلا Index.html) اگر پیش نمایش را ببینید با کلیک روی تصویر به صفحه Index.html متصل می

شوید



حذف اتصال



برای از بین بردن خاصیت اتصال از یکی از اجزای صفحه آن را انتخاب کرده و روی آن راست کلیک کنید و از منوی بازشده گزینه Hyperlink Properties را انتخاب کرده و در کادر باز شده روی دکمه Remove     Hyperlink را کلیک کرده و بدین صورت اتصال از شی مورد نظر برداشته می شود .









دسترسی به اتصالات بدون پیش نمایش



هنگامی که یک یا چند Link در صفحه ای ساخته می شود برای حرکت از این صفحه به صفحات Link شده می بایست از بخش Preview یا Preview in Browser استفاده نمود.پ، اما علاوه بر این F.P امکانی برای شما فراهم نموده که می توان در حالت Normal نیز صفحات متصل را بررسی نمود .



به صفحه Index رفته و ماوس را روی اتصالی که ساخته اید قرار دهید، این عبارت ظاهر می شود:



(Use Ctrl+Click to Follow a Hyperlink)



این عبارت نشان دهنده آن است که با نگه داشتن دکمه Ctrl و کلیک بر روی Link می توان به صفحه ای که متن به آن Link شده است، رفت.





تبدیل تصاویر به اتصال



در تبدیل تصاویر به Link معمولا دوروند وجود دارد :



الف : ساخت اتصال از تصویر به صفحه ای دیگر



فرض کنید می خواهید تصویری را به صورت Link در آورید تا با کلیک کردن بر روی آن به صفحه ای دیگر متصل شوید.(حالا یک صفحه جدید سازید.) تغییرات دلخواه را روی صفحه جدید اعمال کنید. مثلا رنگ زمینه صفحه را تغییر دهید. ( روی صفحه راست کلیک کنید و Page Properties را انتخاب کنید و در برگه Background رنگ زمینه را تغییر دهید.) این صفحه را بانام Page2.html ذخیره کنید. تصویری را در صفحه Index قرار داده و آن را به صفحه Page2.html متصل کنید .



ب: ساخت اتصال به اصل تصویر



این مورد برای ساخت آلبوم تصاویر به کار می رود. در آلبوم تصاویر معمولا تعدادی از تصاویر به صورت کوچک شده در کنار هم نمایش داده می شوند. با کلیک روی هر کدام از آنها، تصویر بزرگ شده را در صفحه جدید مشاهده می کنید .برای این کار به صفحه Page2 رفته، از تصاویر موجود در F.P یکی را در این صفحه قرار دهید. روی این تصویر راست کلیک کرده و از منوی ظاهر شده گزینه Auto Thumbnail را انتخاب نمایید .





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





متن لغزان   Marquee



FrontPage به شما امکان قرار دادن متنی در صفحه می دهد که دائما در حال حرکت می باشد. به طور مثال از سمت راست صفحه به داخل بیاید و یا از سمت چپ خارج شود .



صفحه Page2.html را باز کنید. از منوی Insert فرمان Web Component را انتخاب کنید. در صفحه باز شده گزینه Dynamic Effect را انتخاب کرده و Marquee را Select کرده و دکمه Finish را فشار دهید.













در پنجره Marquee Properties در مستطیل Text عبارتی را که می خواهید نمایش دهید بنویسید. و دکمه OK را بفشارید.



این متن در صفحه شما ظاهر می شود. اگر پیش نمایش این صفحه راببینید مشاهده می کنید که متن دائم از سمت راست وارد صفحه می شود و از سمت چپ خارج می شود. از حالت پیش نمایش خارج شده و تغییراتی را روی این متن انجام دهید .روی متن دوبار کلیک کنید یا روی آن راست کلیک کنید و از منوی ظاهر شده Marquee Properties را انتخاب کنید. همان صفحه دوباره ظاهر می شود، برای تنظیم جهت حرکت از قسمت Direction استفاده نمایید .





Left : متن از راست به چپ حرکت می کند .



Right: متن ازچپ به راست حرکت می کند.



سرعت حرکت متن را از بخش Speed وگزینه Amount قابل تغییر می باشد .



عدد Delay مقدار تاخیر ورود متن را معین می کند که واحد آن میلی ثانیه می باشد .





در قسمت Behavior نوع حرکت متن را تنظیم کنید.





می توان اندازه متن را به لحاظ پهنا و ارتفاع در بخش های Width و Height تنظیم کرد و واحد آن انتخاب In Pixels یا In Percent تعریف می شود.





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





رنگ زمینه متن لغزان را می توان در بخش Background Color تعیین کرد .









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



   الف)اطلاعات , تصاویر, فیلم و ... موجود در صفحه.



    ب) سرعت دسترسی به اینترنت.



برنامه F.P امکانی را جهت کنترل کردن زمان بارگذاری هر صفحه وب در اختیار شما قرار داده است. به گوشه سمت راست و پایین صفحه F.P نگاه کنید. در اینجا مدت زمان ذکرشده نمایش داده شده است. مثلا درسرعت انتقال 8/28 Kbps برای اتصال اینترنتی، صفحه مورد نظر در مدت 15ثانیه Load می شود. اگر روی آن کلیک کنید می توانید میزان سرعت دسترسی اینترنت را تغییر دهید و طبعا زمان بارگذاری نیز بر آن اساس تغییر خواهد کرد .





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







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



چون صفحات باید دارای یک نظام قوی باشند، نیاز به تنظیم ساختار درختی می باشد. صفحات وب خود را باز کنید و بر روی دکمه Navigation در نوار View کلیک کنید.





اولین صفحه مجموعه وب شما صفحه Index بود. از Folder List این صفحه را داخل صفحه Navigator بکشید .(Click and Drag)





با راست کلیک روی آن و انتخاب Rename عنوان نمایش داده شده در این صفحه را تغییر دهید. برای تنظیم ساختار وب باید تک تک صفحات را انتخاب کرده و در محل مناسب در صفحه Navigator قرار دهید. حالا Page1 را انتخاب کنید و به داخل صفحه Navigator بکشید و زیر صفحه Index قرار دهید. یعنی Page1 شما زیر مجموعه ای از Index در نظر گرفته شده است .





تک تک صفحات را بنا بر ارتباطی که باهم دارند به همین ترتیب مرتب کنید و نام آنها را در صفحه Navigator تغییر دهید. شما می توانید نامی را که برای صفحه در قسمت Navigator انتخاب می کنید با نام خود صفحه متفاوت باشد.



مثلا صفحات Photo Album و Sound و My Film را زیر صفحه Index قرار دهید. چون صفحه Index به این صفحات متصل می شود و این صفحات زیر مجمو عه ای از صفحه Index هستند .









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



تنظیم الگوی Theme



حال با کلیک کردن روی دکمه Pages در نوار ابزار Views می توانید به محیط ویرایش صفحات بر گردید. صفحه Index را باز کرده و از منوی Format فرمان Theme را انتخاب کنید. صفحه ای به شکل زیر باز می شود:









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



در بالای این پنجره اگر گزینه All Pages را انتخاب نمایید، این فرمت به تمام صفحات شما منتقل می شود . اما اگر Selected Page را انتخاب کنید، فرمت انتخاب شده فقط به همان صفحه منتقل می شود. پس شما گزینه دوم یعنی Selected Page را انتخاب کرده و OK را بزنید .متوجه خواهید شد که فقط رنگ زمینه تغییر کرده است و از دیگر تنظیمات چیزی در صفحه دیده نمی شود .







اضافه کردن عنوان صفحه



Page1.html را باز کنید. یعنی همان صفحه ای که الگوی Theme را برای آن قرار داده اید. برا ی اضافه کردن عنوان به ابتدای صفحه رفته و با زدن Enter یک خط خالی ایجاد کنید. به منوی Insert رفته و فرمان Page Banner را اجرا کنید. پنجره ای مانند شکل زیر باز می شود:





در این پنجره عنوان صفحه را می بینید که می توان آن را تغییر داد. در این پنجره یک بار Picture و بار دیگر Text را علامت بگذارید، OK کنید و تفاوت را ببینید .



تغییر دادن تنظیمات Theme:



می توان تنظیمات پیش فرض Theme موردنظر را به دلخواه تغییر داد. برای این کار دوباره به پنجره Theme رفته (از منوی Format گزینه Theme را انتخاب کنید.)



در صفحه باز شده روی دکمه Modify کلیک کنید. کادر زیر به پایین پنجره Theme اضافه می شود. یعنی سه دکمه Text , Graphics, Colors به پنجره اضافه می شوند. هر کدام از این دکمه ها باعث ایجاد تغییرات به دلخواه شما می شوند.









روی دکمه Colors کلیک کنید و پنجره Modify Theme به شکل زیر باز می شود .













از کادر سمت چپ رنگهای مختلف را انتخاب کرده و تغییرات را ملاحظه کنید. در پنجره Modify Theme برگه Color Wheel را انتخاب کنید، پنجره به شکل زیر تغییر پیدا می کند:















این برگه چرخه رنگی را نمایش می دهد. با Brightness شدت روشنایی رنگ را تنظیم کنید. برگه Custom را انتخاب کنید. در این قسمت می توان رنگ تک تک اجزای صفحه را انتخاب کرد.









در قسمت Item عنصر مورد نظر در صفحه را انتخاب کرده و در قسمت Color رنگ آن را تعیین کنید. تغییراتی را که تا اینجا انجام دادید با کلیک بر روی دکمه OK ذخیره کرده و به این ترتیب دوباره به پنجره اصلی Theme بر می گردید. حالا روی دکمه Graphic کلیک کنید، پنجره به شکل زیر تغییر پیدا می کند:













در این پنجره با انتخاب هرکدام از بخش های صفحه از قسمت Item، می توان تصویر آن را در قسمت Picture و فونت آن را در قسمت Font تعویض کرد.



تغییراتی را که انجام دادید با OK کردن Save کرده و به صفحه اصلی Theme برگردید. این بار روی Text کلیک کرده، پنجره به شکل زیر تغییر می کند :









در این پنجره هم با انتخاب تک تک عناصر صفحه از قسمت Item فونت آن را تنظیم کنید و از More Text Styles شیوه های مختلف متن را فراخوانی کرده و تغییرات را با OK کردن Save کنید. به صفحه اصلی Theme برگشته و با کلیک برر وی Save تمام تغییرات را تا اینجا Save کنید .



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







ساخت توضیحات راهنما



گاهی اتصالات همراه خود توضیحی نیز دارند که با نگه داشتن نشانگر ماوس روی آنها، توضیحات در یک مستطیل زرد رنگ نمایش می یابند. به این توضیحات Tool tip می گویند. در هنگام Link دادن اشیا با این صفحه آشنایی پیدا کردید:













در این صفحه با کلیک بر روی دکمه Screen tip کادر زیر ظاهر می شود که در آن متنی را که می خواهید ظاهر شود تایپ کرده و OK را کلیک کنید.













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







ساخت آلبوم تصاویر



صفحه جدیدی به نام Photo Album.html ساخته و در صفحه Index.html بنویسید "آلبوم تصاویر" و این تصویر را به صفحه Photo Album.html متصل سازید .





__________________





منبع : http://ansari.isfschools.net/forum/default.asp

بازم از این آموزشهای در پیت.
به خدا Help خود برنامه قابل فهم تر و آموزنده تره تا این جور نوشته ها