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

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

"این هم یک واژگونی است!"

معلوم می شود که rollover عنصری از یک صفحه وب است که با نگه داشتن نشانگر ماوس ظاهر خود را تغییر می دهد؟ من باید شما را ناامید کنم - این تعریف نیز صحیح نیست. به کتیبه زیر دقت کنید.

"من هم یک جابجایی هستم"

از کتیبه بر می آید که این نیز یک چرخش است، اما وقتی مکان نما ماوس را نگه می دارید، به هیچ وجه به این واکنش نشان نمی دهد. حالا سعی کنید با ماوس روی کتیبه کلیک کنید، چه اتفاقی افتاده است؟ یک قاب قرمز در اطراف کتیبه ظاهر شد. حتی اگر اکنون نشانگر ماوس را از روی کتیبه بردارید، به شکل اصلی خود باز نخواهد گشت. برای اینکه کتیبه خود را به حالت اولیه برگردانیم، باید دوباره روی rollover کلیک کنیم. از تمام آنچه گفته شد، نتیجه می گیریم که یک چرخش نه تنها به حرکت ماوس، بلکه به یک کلیک ماوس نیز واکنش نشان می دهد. rollover عنصری از یک صفحه وب است که ظاهر خود را بسته به تأثیر خارجی تغییر می دهد. این دقیقاً همان چیزی است که ما سعی خواهیم کرد در این درس ایجاد کنیم. به عنوان حالت اولیه rollover، از یک تصویر کوچک استفاده می کنیم (به زیر مراجعه کنید)، که به عنوان یک دکمه ناوبری عمل می کند. همانطور که شما می گویید، عکس یک گربه را نشان می دهد، اگر اشتباه نکنم جری است، اما این اصلاً مهم نیست. نکته مهم دیگر این است که این نقاشی را با چه نامی ذخیره کنیم. اگر قصد دارید وب سایت خود را در اینترنت جهانی قرار دهید، باید یک نام به تصویر متشکل از حروف لاتین با حروف کوچک اختصاص دهید. واقعیت این است که در غیر این صورت ممکن است برای قرار دادن فایل ها در سرور میزبان با مشکل مواجه شوید. بنابراین، طراحی اصلی را با نام cat_up ذخیره می کنم، لطفاً توجه داشته باشید که نام فایل معنای معنایی دارد و در آن فضای خالی وجود ندارد. به دلیل ذکر شده در بالا نمی توانید از فاصله در نام فایل ها استفاده کنید. برای ایجاد یک رول اور، به نقاشی دوم نیاز داریم. برای انجام این کار، ما به سادگی ظاهر فایل cat_up اصلی را تغییر داده و آن را به عنوان cat_over ذخیره می کنیم. برای این منظور من از فتوشاپ استفاده کردم، اما شما می توانید از هر ویرایشگر دیگری برای کار با گرافیک شطرنجی استفاده کنید. برجسته کردن تصویر هنگام نگه‌داشتن مکان‌نمای ماوس. پس از آماده شدن و ادغام هر دو تصویر در سایت ما، می‌توانید عکس اصلی را در هر نقطه از صفحه وب قرار دهید و با کلیک بر روی دکمه سمت چپ ماوس آن را انتخاب کنید. بعد، در منوی "Format"، مورد "Speaker HTML Effects" را انتخاب کنید، پس از آن پانل مربوطه بر روی صفحه ظاهر می شود (اگر قبلاً راه اندازی نشده باشد) متشکل از سه منوی کشویی. با استفاده از ماوس، در اولین منوی کشویی، رویدادی را انتخاب کنید که rollover ما به آن پاسخ خواهد داد. همانطور که قبلاً تصمیم گرفته‌ایم، این رویداد قرار دادن نشانگر ماوس بر روی نقاشی خواهد بود، بنابراین مورد "حرکت موش" را انتخاب می‌کنیم. در منوی کشویی دوم، افکتی را انتخاب می کنیم که وقتی ماوس روی rollover قرار می گیرد، ایجاد می شود. در اصل، در این مورد ما مجبور نیستیم چیزی را انتخاب کنیم زیرا تنها یک مورد "تغییر تصاویر" وجود دارد. طبیعتاً با یک کلیک ماوس آن را انتخاب می کنیم. در سومین منوی کشویی، ما دوباره جایگزینی نداریم و تنها مورد "انتخاب تصویر..." را انتخاب می کنیم. پس از باز شدن پنجره انتخاب تصویر، فایل خود را با نام cat_over پیدا می‌کنیم و روی آن دوبار کلیک می‌کنیم و اکنون می‌توانیم با رفتن به تب "View" به حالت نمایش تغییر مکان دهیم و ببینیم که وقتی نشانگر ماوس را روی آن می‌بریم، تغییر حالت می‌دهد. اگر همه چیز را به درستی انجام دادید، وقتی نشانگر ماوس را نگه می‌دارید، باید تصویری با پس‌زمینه روشن ظاهر شود، آیا واقعاً به همین سادگی است؟ بله، واقعاً ساده است، کل موضوع این است که برنامه FrontPage سهم بزرگی از کار ایجاد rollover را بر عهده گرفت. برنامه FrontPage به طور خودکار کد را در جاوا اسکریپت تولید می‌کرد و تنها کاری که ما می‌توانستیم انجام دهیم این بود که نتایج کار "مان" را تحسین کنیم. خودتان آن را انجام دهید.در این درس نحوه ایجاد یک رول اور بر اساس نقاشی توضیح داده شد. سعی کنید خودتان بر اساس یک قطعه از متن، با استفاده از نمونه‌های بالا، یک جابجایی ایجاد کنید، اگر سؤالی دارید، می‌توانید از آنها بپرسید

می توان بدون جاوا اسکریپت و/یا جی کوئری ایجاد کرد. برای ایجاد آن، از نمایش خصوصیات CSS، padding، شبه کلاس: شناور استفاده کنید. یک منوی کار امکان پذیر است (اگر می خواهید منوی HTML را به روش خود طراحی کنید، روی "Fork" کلیک کنید). مدت ویدیو ~ 12 دقیقه این یادداشت برای طراحان طرح‌بندی مبتدی و توسعه‌دهندگان وب در نظر گرفته شده است که اولین گام‌های خود را برای یادگیری اصول اولیه HTML و CSS برمی‌دارند. برای کسانی که دوره "مبانی HTML5 و CSS3" را مطالعه کرده اند.

ایجاد یک منوی کشویی ساده

برای ایجاد یک منوسایت معمولا از ساختار بلوکی استفاده می کند عنصر ناوبری HTMLو لیست بدون شماره. در یکی از آیتم های لیست، لیست دیگری تعبیه شده است تا در هایپرلینک قرار نگیرد. قرار دادن ul در داخل a امکان پذیر است، اما به نظر من این ایده خیلی خوبی نیست، زیرا شبه کلاس:hover با عناصر li نیز کار می کند!

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

برای راحتی کار با نشانه گذاری (ناگهان با یک navi دیگر مواجه می شویم)، یک کلاس CSS به عنصر ناوبری ساختاری خود اضافه می کنیم. ما ابر پیوندها را خرد خواهیم ساخت، اما شما می توانید http://site را به جای # بنویسید :)

نشانه گذاری HTML برای یک منو با یک زیر منوی کشویی

نکته اصلی در CSS: پاک کردن مقادیر پیش فرض برای عناصر HTML موجود در منو. پنهان کردن زیر لیست کشویی آینده ( زیر منو) و نمایش آن هنگام قرار گرفتن روی عنصر HTML والد - با استفاده از کلاس شبه: hover

قوانین CSS برای یک منوی کشویی.menu ul li( padding: 10px; ) .menu ul > li:hover( background-color: #f96; ) .menu ul ul > li:hover( background-color: #69e; ) . منوی ul li، .menu ul(نمایش: inline-block;) .menu ul(موقعیت: نسبی؛ حاشیه: 0؛ بالشتک: 0؛ پس‌زمینه رنگ: #f63;) .menu ul ul (نمایش: هیچ، موقعیت: مطلق; رنگ پس زمینه: #369 حاشیه-بالا: 10px) .menu ul a( رنگ: #fff; -دکوراسیون: هیچکدام;

منوی ایجاد شده کامل نیست و می توان آن را بهبود بخشید (به این فکر کنید که چگونه). در توسعه خود موفق باشید و ممکن است ایجاد چنین منوهایی هرگز دشوار نباشد!

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

بخش اصلی این فایل ها هستند صفحات وب– فایل های ویژه نوشته شده به زبان HTML (زبان نشانه گذاری HyperText– زبان نشانه گذاری فرامتن). صفحات وبمنتشر شده در اینترنتبا قرار دادن چنین فایل هایی بر روی سرورها HTTP (وب سایت ها). محتوا صفحات وبممکن است متفاوت باشد و به موضوعات کاملاً دلخواه اختصاص داده شود، اما همه آنها از یک مبنای - زبان - استفاده می کنند HTML.
اکثر افرادی که می خواهند وب سایت یا صفحه خود را ایجاد کنند با این زبان آشنا هستند HTMLفقط با شنیده ها بنابراین، برنامه می تواند به کمک آنها بیاید مایکروسافت فرانت پیج، یکی از معروف ترین سازندگان سایت.

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

پنجره برنامه فرانت پیج 2003.

برنامه فرانت پیجتوسط این شرکت منتشر شد مایکروسافتو به سبک محصولات موجود در بسته بندی ساخته شده است مایکروسافت آفیس، بنابراین ظاهر برنامه عملاً هیچ تفاوتی با یک واژه پرداز ندارد کلمه .

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

فرانت پیج، مانند سایر برنامه ها مایکروسافت آفیس، به شما امکان می دهد آیتم ها و دکمه های منو را در نوار ابزار اضافه کنید، حذف کنید، و مرتب کنید. همچنین این امکان وجود دارد که پنل های خود را کاملاً بسازید.
برای انجام این کار شما نیاز دارید:

که در منوی خدماتانتخاب کنید تنظیمات مورد…
یا
V مشاهده منوانتخاب کنید مورد نوار ابزارو در منوی آبشاری که ظاهر می شود - تنظیمات مورد…
در نتیجه اقدامات شما، یک کادر محاوره ای باز می شود تنظیمات، جایی که می توانید پنل های لازم را نصب کنید.

جدید ایجاد کنید صفحات وب.

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

با استفاده از یک دکمه صفحه جدیدبر پنل استانداردابزار.
منوی فایلمنوی فرعی را انتخاب کنید ايجاد كردن، و سپس - صفحهیا سایت اینترنتی;
با استفاده از ترکیبات Ctrl+N;
با استفاده از منوی زمینه(در همه حالت ها کار می کند به جز وظایف و گزارشات) - برای این داخل لیست پوشه هاداده شده وب) باید راست کلیک کرده و مورد را در منوی زمینه که ظاهر می شود انتخاب کنید ایجاد  صفحه.

ایجاد صفحات با استفاده از جادوگر و الگوها.

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

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

باز کردن صفحات وب

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

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

از حالت بازدید از صفحهچهار راه برای باز کردن یک صفحه موجود وجود دارد:

1 راه

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

روش 2

از منوی File، را انتخاب کنید آخرین فایل ها. از منوی آبشاری ظاهر شده، فایل مورد نظر را انتخاب کنید.

3 راه

با استفاده از کادر گفتگوی Open File: فایل  باز کنید.

پیش نمایش.

برای اینکه ببینید صفحه شما مستقیماً در مرورگر چگونه به نظر می رسد، می توانید از تب Preview در حالت ویرایش استفاده کنید صفحات وب. اما در این مورد ممکن است معلوم شود که مرورگر فرانت پیجبرخی از عناصر شما را نمایش نخواهد داد صفحات، پس بهتر است:
از دکمه روی نوار ابزار استفاده کنید
یا در منوی فایلمورد را انتخاب کنید پیش نمایش r در مرورگر

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

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

حفظ صفحات وب.

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

حذف صفحات وب.

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

سه راه برای حذف وجود دارد صفحات وب.

1 راه

در پنل لیست پوشه هافایلی را که می خواهید حذف کنید انتخاب کنید و روی دکمه کلیک کنید حذفروی صفحه کلید

روش 2

در پنل لیست پوشه هاکلیک راست کنید فایل(یا نماد فایل) که باید حذف شود و در منوی زمینه که ظاهر می شود، مورد را انتخاب کنید حذف.

3 راه

که در پانل لیستپوشه ها فایل را انتخاب کنیدکه می خواهید حذف کنید و سپس انتخاب کنید از منوی ویرایش حذف کنید.

با متن کار کنید

در نگاه اول، وارد کردن متن به فرانت پیجتفاوتی با وارد کردن متن در هر ویرایشگر متنی ندارد (مثلاً در مایکروسافت ورد).
برای تایپ متن، کافی است ماوس را در هر نقطه از صفحه کلیک کنید و مکان نما در نزدیکترین نقطه ای که می توان متن را وارد کرد، قرار می گیرد.
تایپ حروف بزرگ، ویرایش متن (حذف کاراکترها، درج متن و ...) دقیقاً مانند موارد زیر انجام می شود. مایکروسافت ورد.
فقط یک اما کوچک وجود دارد: وقتی فشار می دهید کلیدها را وارد کنیدکه در فرانت پیجمکان نما مجبور می شود به یک خط جدید حرکت کند، در حالی که تورفتگی های پاراگراف ثابت قبل و بعد از پاراگراف قرار می گیرند.
اگر نیازی به ایجاد پاراگراف ندارید، بهتر است از میانبر صفحه کلید برای رفتن به یک خط جدید استفاده کنید. Shift + Enter.

کار با تصاویر

فرمت های گرافیکی در وب.

تمام تصاویر کامپیوتری، تمام فرمت های ذخیره سازی آنها (و در نتیجه، تمام برنامه های پردازش آنها) به دو کلاس بزرگ تقسیم می شوند - وکتور و شطرنجی. تصویر برداریشامل اشیاء - اشکال هندسی ساخته شده از خطوط مستقیم، کمان، دایره و منحنی های Bezier است. مزایای گرافیک برداریزیاد. از دیدگاه یک طراح، مهمترین مزیت آن این است که گرافیک های برداری را می توان هر طور که دوست دارید «چرخش» کرد، بدون ترس از «مالیدن سوراخ» در تصویر یا از دست دادن برخی اطلاعات. مزیت دیگر اندازه کوچک فایل ها (در مقایسه با تصاویر شطرنجی) و عدم وابستگی به وضوح دستگاه های خروجی (چه چاپگر یا صفحه نمایش مانیتور) است. این عوامل باعث شد گرافیک برداریکاندیدای احتمالی برای استفاده در اینترنت. با این حال، قابل ذکر است که در حال حاضر گرافیک برداری آنقدر که ما می خواهیم رایج نیست.
با این حال، در میان فرمت‌های برداری که واقعاً استفاده می‌شوند، می‌خواهم به قالب اشاره کنم Shockwave Flash از Macromedia. برای مشاهده این فرمت در مرورگرنیاز به پلاگین ( پلاگین) به صورت رایگان توسط شرکت توزیع می شود ماکرومدیا. امروزه هم سایت هایی وجود دارند که کاملاً با استفاده از این فناوری ایجاد شده اند و هم سایت هایی که استفاده می شوند فرمت فلشفقط تا حدی
نمایش شطرنجی گرافیک بر اساس مفهوم شطرنجی است. شطرنجیمجموعه ای از اشیا (در این مورد، پیکسل ها) است که در ردیف ها و ستون های یکسان قرار گرفته اند. آن ها فایل کامپیوتری شطرنجیرا می توان به عنوان مجموعه ای از مربع های کوچک رنگی یا خاکستری در نظر گرفت که موزاییکی از یک تصویر را تشکیل می دهند. زیرا از آنجایی که اندازه این مربع ها به وضوح کوچک است، هنگام مشاهده گرافیک شطرنجی، این مربع ها با یکدیگر ادغام می شوند و تغییر مداوم رنگ ها را تشکیل می دهند.

فرمت ذخیره سازی تصاویر شطرنجی هم مزایا و هم معایب خود را دارد. یکی از مزایای بزرگ گرافیک شطرنجی، توانایی کار با هافتون است، یعنی. توانایی انتقال تصویر دقیقاً همانطور که در زندگی واقعی به نظر می رسد. اما در میان معایب، مشکل اصلی حجم فایل است. به طور طبیعی، پیکسل های بیشتری برای تشکیل اختصاص داده شده است تصاویر، کیفیت ارسال شده بالاتر است تصاویر، اما اندازه فایل در نتیجه بزرگتر خواهد شد.
اگر اکنون به مرورگرها برگردیم، می توانیم موارد زیر را بگوییم: اکثر مرورگرها می توانند فایل های گرافیکی با چهار فرمت را بدون مشکل نمایش دهند (* .gif، *.jpg، *.png، *.bmp) که در حال حاضر بهتر است از دو مورد استفاده شود - * .gif و *.jpg. و حتی پس از بهینه سازی اولیه.
درج تصاویر در صفحه وب.
یک تصویر را در خود قرار دهید صفحه وببه چند روش قابل انجام است:
1. یک تصویر را از آن بکشید Windows Explorer(یعنی مستقیماً از کاوشگر).
2. یک تصویر از را بکشید اینترنت اکسپلورر.
3. فایل تصویر را از پنل بکشید لیست پوشه ها، مستقیم به صفحه.
4. با کلیپ بورد- تصویر را از هر برنامه دیگری در کلیپ بورد کپی کنید و سپس آن را از کلیپ بورد در صفحه پیست کنید.
5. با دکمه ها را اضافه کنیدطراحی از فایل روی نوار ابزار استاندارد.
6. استفاده از منو درج  شکل.
بیایید این روش ها را با جزئیات بیشتری بررسی کنیم:
روش 1
Windows Explorer(یعنی مستقیماً از Explorer) شما باید:
که در فرانت پیج
باز کردن یک پنجره کاوشگر؛
در پنجره Explorer، فایلی را با تصویری که می خواهید در صفحه خود وارد کنید، انتخاب کنید.
دکمه سمت چپ ماوس را فشار داده و فایل تصویر را روی خود بکشید صفحه وبتصویر در جایی که نشانگر درج در صفحه قرار داشت درج می شود.
روش 2
برای کشیدن یک تصویر از اینترنت اکسپلوررلازم:
که در فرانت پیجصفحه ای را که می خواهید یک تصویر اضافه کنید باز کنید.
V مرورگرتصویری را که می خواهید روی خود قرار دهید باز کنید صفحه وب مرورگرنام فایل باید به پایان برسد jpg, jpeg, gif);
با استفاده از دکمه سمت چپ ماوس، تصویر انتخاب شده را روی تصویر خود بکشید صفحه وب;
روش 3
به منظور. واسه اینکه. برای اینکه فایل را بکشید و رها کنیدبا تصویر از پنل فهرست کنیدپوشه ها، مستقیماً به صفحه مورد نیاز:
که در فرانت پیجصفحه ای را که می خواهید به آن اضافه کنید باز کنید تصویر;
فایل تصویری مورد نیاز را در پنل انتخاب کنید لیست پوشه ها;
دکمه سمت چپ ماوستصویر انتخاب شده را به سمت خود بکشید صفحه وب;
تصویر انتخاب شده در محلی که مکان نما درج در صفحه قرار داشت درج می شود.
روش 4
برای درج یک تصویر در خود صفحه وببا استفاده از کلیپ بورد، باید:
در برنامه ای که می خواهید تصویر را از آن کپی کنید، تصویر را انتخاب کنید و از کلیدها استفاده کنید Ctrl+Cتصویر را در کلیپ بورد کپی کنید.
روی شما صفحه وببا استفاده از میانبرهای صفحه کلید، این تصویر را از کلیپ بورد بچسبانید Ctrl+V
روش 5
صفحه وبشما تصمیم می گیرید از دکمه استفاده کنید یک تصویر اضافه کنیداز فایل در نوار ابزار استاندارد، آن فرانت پیجیک کادر محاوره ای باز می کند طراحی.
در این کادر محاوره ای، فایل تصویری را که می خواهید به آن اضافه کنید، مشخص کنید صفحه وبو دکمه را فشار دهید درج کنید.

روش 6
اگر می خواهید یک تصویر را در خود وارد کنید صفحه وبشما تصمیم گرفتید از منو استفاده کنید درج  نقاشی، آن فرانت پیجشما را به انتخاب های بعدی ترغیب می کند:

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

علاوه بر گرافیک ساده، مانند تصاویر در * .gif، *.jpg، *.pngو غیره. فرانت پیجبه شما امکان می دهد در سایت خود پست کنید صفحات وبفایل های رسانه ای این موارد عبارتند از: کلیپ های ویدئویی، صداها ...

برای درج یک کلیپ ویدیویی، باید درج منومورد را انتخاب کنید طراحی، و سپس ضبط ویدیو...

یک کادر محاوره ای باز می شود. پنجره ویدیویی، کلیپ های ویدیویی را در * نمایش می دهد .avi، *.asf، *.ram، *.ra.

اضافه کردن صدا به صفحه وبرا می توان در تب General از کادر محاوره ای یافت. ویژگی های صفحه.

کار با جداول

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

ایجاد جداول

آسانترین راه ایجاد یک جدول- از دکمه استفاده کنید جدول اضافه کنیدواقع در نوار ابزار استاندارد.
راه دیگر استفاده از آیتم است منو جدول  درج  جدول.
و جدولرا می توان با استفاده از کلیپ بورد ترسیم و چسباند.

ورود داده ها و ناوبری جدول.

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

قبل از وارد کردن داده ها به جدول، باید مکان نما متن را در سلول مورد نظر قرار دهید جداول. این کار را می توان با کلیک بر روی آن با ماوس انجام داد.

با این حال، استفاده از ترکیب کلیدها برای حرکت بین سلول ها راحت تر است:
میانبرهای صفحه کلید: اقدام:

Tabدر هر جای جدول، به جز انتهای سطر آخر، به سلول مجاور رفته و محتویات آن را انتخاب کنید.
Tabدر انتهای خط آخر یک خط جدید به انتهای جدول اضافه کنید
Shift+Tabبه سلول قبلی بروید و محتویات آن را برجسته کنید
واردپاراگراف جدید را شروع کنید
وارددر ابتدای اولین سلول، متنی را قبل از جدول در ابتدای سند اضافه کنید

ایجاد و استفاده از فرم ها.

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

بیایید شما را بشناسیم - لطفاً فیلدهای زیر را پر کنید:
اسم شما:

نام خانوادگی شما:

تاریخ تولد شما: سال ماه روز

متشکرم! و حالا - بیا بریم!
1. کوچک، اما چابک.
هر جا که می شود فرمان می دهد.
او وارد چادر خواهد شد -
قهرمان خواهد چرخید.
این چه کسی است؟
پرواز کک کودک هوس باز
2. با چشمان برآمده می نشیند،
او فرانسوی صحبت می کند
مثل کک می پرد
مثل یک انسان شنا می کند.
راجب که صحبت میکنیم؟
طوطی قورباغه گربه

3-فک وقتی زیر یخ فرو می رود چه تنفس می کند؟

4. چرا لاک پشت های بزرگ گریه می کنند؟

5. شاه ماهی چه نوع لباسی می تواند بپوشد؟
جلیقه کت خز
6. به چه کسی "اسب رودخانه" می گویند؟
سمور کرگدن تمساح

7. چه پرندگانی از جوجه های خود بیرون نمی آیند؟

8. چه پرندگانی نمی توانند پرواز کنند؟

اگر نیاز به انتخاب چندین پاسخ دارید، کلید را فشار داده و رها نکنید Ctrlو روی پاسخ مورد نظر کلیک چپ کنید

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

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

در یک رابطه تشکیل می دهدچندین قانون اساسی وجود دارد:

1. هر کدام فرممنطقه خاصی را اشغال می کند صفحات وب. در یک صفحه وبممکن است یک یا چند فرم وجود داشته باشد.
2. هر فرم باید حداقل یکی از عناصر فرم را داشته باشد (اگرچه، به عنوان یک قاعده، چندین مورد از آنها وجود دارد).
3. هر عنصر تشکیل می دهدنام و معنی دارد نام فیلد برای وارد کردن اطلاعات را مشخص می کند و مقدار آن برابر با مقدار انتخاب شده توسط کاربر است.
4. یکی از عناصر فرم (می تواند یک دکمه معمولی یا هر تصویری باشد) باید عملکرد یک دکمه را انجام دهد ارسال.

ایجاد فرم ها در فرانت پیج.
برای افزودن فرم به صفحه وب، لازم:

مکان نما را در جایی که می خواهید بچسبانید قرار دهید فرم.
که در درج منوانتخاب کنید فرم مورد، در منوی باز شده، دوباره انتخاب کنید فرم مورد. فرمبر روی شما قرار خواهد گرفت صفحه وب- ناحیه ای که با یک قاب نقطه چین مشخص شده است با دو دکمه ظاهر می شود: ارسال و تنظیم مجدد.
با استفاده از همین نقطه منوی درج  فرمعناصر مورد نیاز خود را به ترتیب وارد کنید تشکیل می دهدبا انتخاب آنها از منوی کشویی آبشاری (به یاد داشته باشید که تمام عناصر فرم در قسمت فرم مشخص شده با یک قاب نقطه‌دار قرار داده شده‌اند).
بعد از فرمایجاد شده، تنها چیزی که باقی می ماند پر کردن آن با محتوا - عناصر است تشکیل می دهد، متن، تصاویر، جداول ... (با ابعاد تشکیل می دهدبه طور خودکار تغییر خواهد کرد).
محتوا اضافه کنید تشکیل می دهدرا می توان به روش معمول انجام داد. به عنوان مثال، متن را می توان از کلیپ بورد تایپ یا جایگذاری کرد... همه اقدامات با اشیاء اضافه شده مشابه هستند.
با این حال ایجاد فرم- این تازه شروع کار است. پس از ایجاد آن، باید ویژگی ها را به عنوان پیکربندی کنید تشکیل می دهد، و عناصر آن

تنظیم ویژگی های فرم

برای پردازش یا ذخیره داده های وارد شده توسط بازدیدکنندگان صفحات وب، یا باید از فرصت های ارائه شده استفاده کنید برنامه های افزودنی سرور فرانت پیج، یا برنامه دیگری که در حال اجرا است وب سرور.
اما مهم نیست چه برنامه ای را انتخاب می کنید، باز هم باید ویژگی های فرم و عناصر موجود در آن را پیکربندی کنید.
برای باز کردن پنجره مشخصات فرم، باید:
V درج منوانتخاب کنید فرم مورد، و سپس -
یا
با منوی زمینه فرم تماس بگیرید و مورد را در منوی زمینه که باز می شود انتخاب کنید خصوصیات را تشکیل می دهند.
در نتیجه یک کادر محاوره ای باز می شود خصوصیات را تشکیل می دهند.

1. ب ذخیره فیلدنتایج باید نشان دهد که با داده های وارد شده چه کاری باید انجام شود فرم. می توانید گزینه های زیر را انتخاب کنید:
o ارسال نام فایل- داده ها در فایل مشخص شده قرار می گیرند وب سرور. این فایل ممکن است صفحه وب، که با گذشت زمان طولانی تر و طولانی تر می شود یا یک فایل داده ای که می تواند در آن پردازش شود اکسل، اکسسیا هر برنامه دیگری؛
o ارسال آدرس ایمیل- در این صورت هر بار که بازدید کننده کلیک می کند صفحات وبارسال به دکمه ها فرمیک ایمیل ایجاد می شود و به آدرسی که شما ارائه کرده اید ارسال می شود. این پیام حاوی تمام داده هایی است که توسط کاربر وارد شده است صفحه وب.
o در پایگاه داده- در این مورد داده ها تشکیل می دهدبه پایگاه داده ارسال خواهد شد. پایه باید روشن باشد وب سرور(یا در دسترس او باشد).
2. ب فیلد خواصفرم، باید نام فرم را مشخص کنید
حالت های مشاهده فرانت پیج.
فرانت پیجشش حالت مختلف برای مشاهده محتوا ارائه می دهد سایت اینترنتی:

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

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

دانلود به صورت رایگان فرانت پیجمی توانید از لینک زیر استفاده کنید:

http://letitbit.net/download/28576.28615a37d4f2a575882748541adf3bf00/Microsoft_Office_FrontPage_2003.rar.html

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

برای جابه‌جایی در یک صفحه وب، مانند هر واژه‌پرداز، می‌توانید از نوارهای پیمایش، کلیدهای پیکان روی صفحه‌کلید و میانبرهای صفحه‌کلید استفاده کنید. بنابراین، برای مثال، برای رفتن به بالای صفحه، از کلید ترکیبی استفاده کنید +، تا انتهای صفحه - +. کلیدها و به شما امکان می دهد به ترتیب یک صفحه را به بالا یا پایین ببرید.

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

پنجره گفتگو قالب سایت(Web Site Templates) که هنگام ایجاد یک سایت جدید باز می شود، حاوی الگوهایی است که پیشنهاد ایجاد یک سایت خالی یا یک صفحه ای را می دهد. تعداد صفحات مورد نیاز برای ارسال اطلاعات را خودتان به سایت اضافه می کنید. اینها می توانند صفحات جدیدی باشند که بعداً اطلاعاتی را در آنها پست می کنید، یا صفحات وب که قبلاً با استفاده از FrontPage یا نرم افزارهای دیگر ایجاد کرده اید.

اظهار نظر

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

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

• دکمه ايجاد كردن(جدید) در نوار ابزار استاندارد
• تیم ايجاد كردنمنوی (جدید). فایل(فایل) که یک پنل را در پنجره برنامه FrontPage قرار می دهد یک صفحه وب یا سایت ایجاد کنید(صفحه یا وب جدید)
• ترکیب کلید +

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

در صورتی که هنگام ایجاد یک صفحه جدید می خواهید از الگوی دیگری استفاده کنید، باید کادر محاوره ای را باز کنید قالب های صفحه(Page Templates) (شکل 16.1)، حاوی لیستی از الگوهای صفحه ارائه شده توسط برنامه FrontPage. برای باز کردن این پنجره یکی از موارد زیر را انجام دهید:

• در دکمه های منو ايجاد كردنفرمان انتخاب نوار ابزار استاندارد (جدید). صفحه(صفحه)
• در منو فایل(پرونده) دستور را انتخاب کنید ايجاد كردن(جدید)، و سپس از منوی فرعی که باز می شود - گزینه صفحه یا وب سایت(صفحه یا وب). یک پنل در پنجره برنامه FrontPage ظاهر می شود یک صفحه وب یا سایت ایجاد کنید(صفحه یا وب جدید)، که در آن دستور را انتخاب کنید قالب های صفحه(الگوهای صفحه)

برنج. 16.1. کادر گفتگو برای انتخاب یک الگو برای صفحه ای که قرار است ایجاد شود

پنجره گفتگو قالب های صفحه(Page Templates) حاوی لیستی از الگوها است. الگویی را که می خواهید هنگام ایجاد یک صفحه جدید استفاده کنید، انتخاب کنید. استفاده از منطقه نمونه(پیش نمایش) کادر محاوره ای، ببینید چه شکلی خواهد بود. روی دکمه کلیک کنید خوببرای بستن پنجره و قرار دادن قالب صفحه در سایت.

در نتیجه افزودن یک صفحه جدید به سایت، یک صفحه خالی با نام newjage_l.htm(شکل 16.2). این نام نشان می دهد که این صفحه اولین صفحه ای است که از زمان شروع برنامه ایجاد می کنید. همانطور که صفحات بعدی را ایجاد می کنید، FrontPage نام آنها را با تعداد افزایش یافته اختصاص می دهد: new_page_2.htm، newjage_3.htm و غیره.

برنج. 16.2. صفحه جدیدی به سایت اضافه شده است که با استفاده از قالب "صفحه منظم" ایجاد شده است