در روزهای اولیه تار جهان گسترده، هیچ ابزار گرافیکی برای ایجاد صفحات وب در دسترس نبود. کاربران مجبور بودند از ویرایشگر ساده متون مانند Notepad برای ایجاد صفحات HTML استفاده نمایند. هنگامی که محبوبیت شبکه ها افزایش پیدا کرد، ویرایشگر های HTML زیادی تولید گردیدند. یکی از این ویرایشگرها، FrontPage مایکروسافت می باشد که ابزاری است که به وسیله توسعه دهندگان وب برای ایجاد سریع صفحات وب حرفه ای مورد استفاده قرار می گیرد. FrontPage بر روی ایجاد عناصر HTML متمرکز شده است. و به کاربران اجازه می دهد تا به سادگی محتویات صفحه وب را تایپ نمایند و اشکال را بکشند و رها نمایند و به صفحات وب دیگر متصل شوند. FrontPage ، Tag هایی که مورد احتیاج می باشد را در اختیار اشخاص قرار می دهد.
اگرچه FrontPage برای ساختن صفحات وب HTML بسیار سودمند می باشد ولی کارایی خود را هنگام طراحی صفحات ASP از دست می دهد. شما نمی توانید کدها را به راحتی، drag&drop نمایید و به خاطر اینکه صفحات ASP شامل کدهای Scripting می باشند، شما نمی توانید به همان راحتی که برای صفحات وب کدهای HTML را تولید می کردید، کدها را برای صفحات ASP ایجاد نمایید. با وجود این محدودیت ها، FrontPage هنوز برای ایجاد صفحات وب استفاده می گردد. توسعه دهندگان از سیستم SUI FrontPage به منظور ایجاد HTML برای صفحات وب استفاده می کنند و سپس سورس HTML صفحه ایجاد شده به وسیله FrontPage را باز کرده و کدهای ASP را به آن اضافه می کنند.شکل صفحه بعد نرم- افزار FrontPage را در حال کار نشان می دهد.
Front page همانند InterDev شامل تعداد زیادی ریزه کاریها و پیچیدگیها می باشد. به منظور آموزش بیشتر در مورد FrontPage سایت زیر را بازدید نمایید.
http://www.microsoft.com/frontpage/online
شروع کار
اگرFrontPage در کامپیوتر شما نصب شده باشد می توانید آن را از مسیر start/programs/FrontPage اجرا نمایید. در شکل بالا محیط این نرم افزار نشان داده شده است.
در ستون سمت 6 تا آیکون وجود دارد :
page
Folders
Reports
Navigation
Hyperlinks
Tasks
Page هنگامی فعال است که یک صفحه جدید باز شود. Folders آدرس سایت و root وتمام شاخه ها را در خود نگه داری می کند.دارای دو پوشه می باشد :
_private : از دید کاربران غیر فعال است فقط Script ها می توانند به آن دست پیدا کنند.
images : تصاویر سایت در آن ریخته می شود.
ایجاد یک صفحه جدید
از نوار استاندار روی آیکن Create a new normal page کلیک کرده و گزینه web را انتخاب نمایید. یک پنجره باز می شود از Tab Web sites گزینه Web On Page را انتخاب نمایید . در سمت راست پنجره آدرس محلی که قرار است سایت مورد نظر را طراحی کنید مشخص نمایید. و روی Ok کلیک نمایید. سپس روی Folders کلیک کنید یک صفحه باز می شود که دارای دو پوشه و یک فایل با نام Index.htmlمی باشد.وروی فایل Index.html دو بار کلیک نمایید. تا صفحه HTML باز شود. این صفحه دارای سه Tab می باشد :
HTML : در این Tab کدهای مربوط به طراحی سایت را می نویسیم.
Normal : طراحی صفحات وب بدون کد نویسی
Preview : نمایش نهایی صفحه طراحی شده
برای ذخیره کردن صفحه با پسوند asp آیکن Save را از نوار استاندارد انتخاب کرده وپنجره Save باز شده ودر کادر File name: نام را با پسوند Asp ذخیره نمایید. مانند Index.asp وروی دکمه Save کلیک کنید.
Tab Preview صفحات با پسوند asp را نمایش نمی دهد. برای دیدن این صفحات در ابتدا باید IIS را روی سیستم نصب کنید.
طراحی جدول
روش 1)
وارد Tab Preview شده سپس از نوار استاندارد روی Table کلیک کرده و تعداد ستونها و سطرها را مشخص کرده ودر صفحه مشخص می شود. وبرای تغییر دادن سایز خانه ها یا سایز جدول کافیست موس را به لبه ها ببرید وسپس آن را بکشید. برای تغییر دادن رنگ زمینه وتعیین خصوصیات جدول کافیست روی جدول کلیک راست کرده وگزینه Table Properties را انتخاب کنید. سپس یک پنجره باز می شود که می توانید تعداد ستونها را در قسمت Columns و تعداد سطرها را در قسمت Row مشخص کنید.
در قسمت Alignment می توانید موقعیت جدول را در صفحه تنظیم کنید. در قسمت Cell padding
می توانید فاصله بین محتوی یک خانه جدول و حاشیه آن خانه را تعیین کرد. Cell Spacing در این قسمت می توانید فاصله بین خانه های جدول را کم یا زیاد بکنید. در قسمت Border می توانید اندازه ورنگ آن را تعیین کنید.
در قسمت Background میتوانید رنگ پیش زمینه را تغییر دهید و یا یک عکس را بعنوان پیش زمینه قرار دهید.
روش 2)
می توانید از منوی Table استفاده کنید.
از منوی Table گزینه Insert/table را انتخاب می کنید سپس یک پنجره باز می شود که می توانید تعداد ستونها را در قسمت Columns و تعداد سطرها را در قسمت Row مشخص می کنید.
در قسمت Alignment می توانید موقعیت جدول را در صفحه تنظیم کنید. در قسمت Cell padding می توانید فاصله بین محتوی یک خانه جدول و حاشیه آن خانه را تعیین کرد. Cell Spacing در این قسمت می توانید فاصله بین خانه های جدول را کم یا زیاد بکنید. در قسمت Border می توانید اندازه ورنگ آن را تعیین کنید.
در قسمت Background میتوانید رنگ پیش زمینه را تغییر دهید و یا یک عکس را بعنوان پیش زمینه قرار دهید.
برای حذف جدول و تعدادی از خانه های جدول وارد منوی Table شده و گزینه Delete را انتخاب کنید وحذف کنید. ویا اینکه جدول و یا سلول مورد نظر را انتخاب کرده و کایک راست کرده و گزینه delete را انتخاب کنید.
برای اضافه کردن جدول و یا تعدادی سلول به جدول، یک سلول را انتخاب کرده واز منوی Table گزینه Insert را انتخاب کنید. ویا اینکه سلول مورد نظر را انتخاب کرده وروی آن کلیک راست کرده و گزینه Insert را انتخاب کنید.
برای اضافه کردن تعدادی ستون ویا سطر تنها به یک سلول از جدول کافیست وارد منوی Table شده و گزینه split cells… را انتخاب کنید .
برای استفاده از جداول پیش فرض FrontPage می توانید وارد منوی Table شده و گزینه Table AutoFormat را انتخاب کنید.