Kā izvēlēties ēdienus pirmajā lapā. Web lapu izveide, izmantojot FrontPage. HTML marķējums un pamata stili nolaižamajai izvēlnei ar vienu ligzdošanas līmeni

Programma, ar kuru diezgan viegli var izprast interneta lapu noformēšanas pamatprincipus, kurai ir plaša papildu rīku izvēle sarežģītu interneta vietņu un portālu veidošanai.

Īsi par Microsoft FrontPage programmu

Šis ir viegli apgūstams un ērts tīmekļa redaktors vietņu izstrādei, sagatavošanai un publicēšanai. Pateicoties integrācijai ar MS Office produktu saimi, pazīstamam interfeisam un veidņu pārpilnībai, programma ļauj ātri apgūt darbu pat iesācējiem, kas pārzina darba MS Word pamatus. Tajā pašā laikā FrontPage nevar saukt par risinājumu “manekeniem”: programma nodrošina plašu funkcionalitāti un dažādus rīkus interneta lapu optimizēšanai.

Jāpiebilst, ka nosaukums Microsoft FrontPage pastāvēja līdz 2003. gadam, un tad tas tika papildināts ar jaunām funkcijām un mainījās arī pašas programmatūras nosaukums. FrontPage tika pārdēvēta par Microsoft Expression Web 2007. gadā un par Microsoft Office SharePoint Designer 2010. gadā. Faktiski jaunajām versijām tika pievienoti daži papildinājumi, taču programmas pamata izskats tika saglabāts.

Programmas pamatrīki

Microsoft FrontPage programmas vispārīgs skats

Microsoft FrontPage ir daudz kopīga ar MS Word rīkiem, tāpēc daudzas pogas un izvēlnes cilnes ir arī intuitīvas, atvieglojot lapas izveides procesu. Daudzi cilvēki jau zina, kā rakstīt un formatēt vienkāršu tekstu, izveidot tabulas programmā Microsoft Word, un tas pats princips attiecas uz lapas rediģēšanu programmā FrontPage.

Attēlā labajā pusē parādīts programmas vispārējs skats ar standarta rīku komplektu, ar kuru var izveidot lapas veidni ar tekstu, saitēm un attēliem. Dodieties uz cilni "Skats", pēc tam uz "Rīkjoslu" un pārliecinieties, vai " Standarta", "Formatēšana" Un " Tabulas", ar šiem rīkiem pietiks, lai izveidotu tikai lapu. Zemāk pievērsiet uzmanību cilnēm "Dizaineris", "Kods" un "Skats" - tie ir trīs dažādi režīmi, kuros vienmēr varat apskatīt, kā izskatās izveidotā lapa patīk.

• Noformētājā tiek ievadīti visi labojumi, drukāts un formatēts teksts, ievietoti attēli, izveidotas saites, mainītas fona un fonta krāsas tāpat kā programmā Microsoft Word.
• Cilnē "Kods" varat apskatīt tā saukto HTML kodu. HTML ir standarta iezīmēšanas valoda dokumentiem globālajā tīmeklī. Lielākā daļa tīmekļa lapu tiek veidotas, izmantojot HTML. Šajā cilnē varat arī rediģēt lapu, taču jums ir jāzina šī iezīmēšanas valoda. Tomēr iesācējiem ir jāveic visas izmaiņas konstruktorā, un visas HTML izmaiņas notiks automātiski.
• Cilnē "Skats" varat redzēt, kā lapa izskatās tieši pārlūkprogrammā (piemēram, Internet Explorer).

Lai iegūtu detalizētu aprakstu par citām Microsoft FrontPage izvēlnēm, pogām un funkcijām, skatiet programmas palīdzību. Lai to izdarītu, nospiediet taustiņu "F1".

Veidnes izveide lapām programmā FrontPage

Galvenās tabulas ievietošana redaktorā

Un tāpēc, lai izveidotu vienkāršu veidni, jums jāievieto tabula ar trim blokiem. Trīs bloki ir vienkāršs standarts: augšējais bloks ir vietnes nosaukumam, otrais bloks ir vietnes navigācijas saitēm, trešais bloks ir tekstam, attēliem un citai informācijai lapā. Ērtības labad var ievietot vairāk galda bloku, bet tā ir gaumes lieta, kā, cik un kāda izmēra šos blokus izgatavot. Ir vēl viens veids, kā izveidot blokus, nevis veidojot tabulas, bet ievietojot lapās tā sauktos “div” elementus un piešķirot tiem noteiktus stilus, taču šī metode nav paredzēta jauniem tīmekļa pārziņiem, un par to var uzrakstīt atsevišķu rakstu.

1. Lai ievietotu tabulu, dodieties uz cilni "Tabula" > "Ievietot" > "Tabula" un aizpildiet laukus, kā parādīts attēlā pa labi. Faktiski jūs varat ievadīt savus parametrus, taču šai tabulai ir noteikts platums un tā ir izstiepta līdz 100% no ekrāna laukuma. Tādā veidā tabula pārlūkprogrammā tiks parādīta kompakti.
2. Pēc tam jums ir jāpielāgo visas trīs šūnas, jo pēc ievietošanas tās ir vienāda augstuma. Ar peles labo pogu noklikšķiniet uz augšējās šūnas un augstuma laukā dodieties uz “Cell Properties”, ierakstiet nosacīti “150” un atzīmējiet rūtiņu “punktos”, t.i. Šūnas izmērs būs 150 pikseļi. Tajā pašā izvēlnē varam izvēlēties šūnas fona krāsu un, noklikšķinot uz izvēlnes “stils...”, var veikt citus šūnas iestatījumus, piemēram, izvēlēties šūnas apmales krāsu un izmēru, var eksperimentējiet ar šo un redziet rezultātu. Pašā šūnā varat ievadīt vietnes nosaukumu.
3. Tālāk mēs rediģējam otro šūnu, kas paredzēta vietņu navigācijas saitēm. Mēs iestatām platumu uz aptuveni 40 pikseļiem, ar to pietiks, kā arī pielāgojam citus iestatījumus, piemēram, fona krāsu un piemales pēc jūsu gaumes. Tālāk mēs ierakstām pašu saišu nosaukumus, atdalot tos ar vertikālām līniju zīmēm vai citu zīmi (varat tos apskatīt zemāk, lejupielādējot visu veidni). Atlasiet testu un nospiediet centrālo izlīdzināšanas pogu, tāpat kā programmā MSWord. Tādā pašā veidā varat mainīt fontu, fonta lielumu un citus teksta iestatījumus.
4. Mēs arī uzstādījām pēdējo šūnu. Tas ir paredzēts galvenajam tekstam, kurā var ievadīt sveiciena tekstu.
5. Visbeidzot, varat doties uz cilni “Fails” > “Rekvizīti”, kur varat ievadīt vietnes nosaukumu un mainīt lapas vispārējo fonu un citus vispārīgos iestatījumus.

Tagad veidne ir gatava. Tas ir ietvars visām turpmākajām vietnes lapām. Lūk, kā vietne izskatās HTML kodā:

Tādā veidā mēs iegūstam vietnes veidni

< html > < head > < meta http-equiv = "Content-Language" content = "ru" > < meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251"> < title >Vietnes nosaukums < body bgcolor = "#F8F3FE" > < div align = "center" > < table border = "0" width = "800" cellspacing = "4" cellpadding = "0" height = "100%" > < tr > < td height = "150" bgcolor = "#4A4A4A" style = "border: 1px solid #000000" > < p align = "center" >< font face = "Verdana" size = "6" color = "#FFFFFF" >Vietnes nosaukums < tr > < td height = "40" bordercolor = "#4A4A4A" style = "border: 1px solid #4A4A4A" bgcolor = "#FBFBFB" > < p align = "center" >< font face = "Verdana" size = "2" > < b >mājas | < b >2. lapa | < b >3. lapa | < b >4. lpp | < b >5. lpp | < b >Kontakti < tr > < td valign = "top" style = "border: 1px solid #4A4A4A" bgcolor = "#FFFFFF" >< div style = "padding: 6px;" > < font face = "Verdana" size = "2" >Mājas lapas teksts. Šeit varat ievietot apsveikuma tekstu un īsi uzrakstīt, kam vietne ir veltīta.

Šo HTML kodu var nekavējoties ievietot redaktorā cilnē “Kods”, un jūs uzreiz redzēsit gatavo veidni. To var mainīt un rediģēt atbilstoši savām vajadzībām. Šeit ir vērts paskaidrot, ka vietā, kur ir ievietots galvenais teksts un lai tas neatrodas tuvu laukiem, tas tiek ierāmēts tagā “div” ar atkāpes iestatījumu, kā parādīts piemērā.

Papildu veidnes

1. Jums arī jāzina, ka programmā FrontPage un citās līdzīgās programmās ir standarta veidnes, kuras var izmantot, lai izveidotu lapas, tās ir viegli rediģējamas, un jūs varat pielāgot jebkuru veidni atbilstoši savām vajadzībām. Lai atlasītu standarta veidni, atveriet cilni "Fails" > "Izveidot..." atvērtajā logā atlasiet "Citas lapu veidnes", kur varat izvēlēties jebkuru sev tīkamu veidni.
2. Ir otra iespēja - lejupielādēt visu veidni no interneta. Ir daudz vietņu, kas sniedz šādu pakalpojumu. veidnes var būt maksas vai bezmaksas. Pēc šīs vai citas veidnes lejupielādes varat to rediģēt programmā, aizpildīt ar nepieciešamo saturu un mainīt šī vai tā elementa stilu.

Izmantojiet standarta tabulu un motīvu izkārtojumus

Microsoft FrontPage nodrošina labus rīkus gataviem tabulu izkārtojumiem un tēmām vietņu veidošanai

Jums jāzina, ka Microsoft FrontPage ir standarta tabulu izkārtojumu un motīvu komplekts, kas var palīdzēt apgūt parasto lapu vai vizītkaršu vietņu izveides mākslu. Un tā augšējā labajā stūrī ir nolaižamā izvēlne (skat. attēlu pa labi, kurā redzams arī tabulas izkārtojumu un dizaina tēmu izmantošanas rezultāts), noklikšķinot parādīsies izvēlne, kurā jāizvēlas “Izkārtojums tabulas un šūnas”, un tad zemāk parādīsies daudz dažādu tabulu izkārtojumu, jūs varat izvēlēties jebkuru pēc saviem ieskatiem un gaumes. Tas ļauj jums pašam izveidot tabulu manuāli.

Un tā, ierakstot vai ielīmējot tabulas šūnās savu tekstu, logotipu, saites, dodoties uz to pašu izvēlni, var izvēlēties izvēlni “Tēma”, kurā var izvēlēties dažādas tēmas lapas, saišu, lapas noformējumam. fons un daudz kas cits. Šī iespēja ir laba tiem, kas vēl tikai apgūst interneta lapu veidošanu un diezgan uzskatāmi atspoguļo mājas lapas tapšanas procesu. Citiem vārdiem sakot, programmā Microsoft FrontPage varat eksperimentēt ar dažādiem iestatījumiem un skaidri redzēt, kā tiek pārveidota konkrēta lapa. Šeit jūs varat sniegt vienu padomu: izpētiet visas programmas funkcijas un nebaidieties izmantot šo vai citu izvēlni, jo katram rīkam ir savs īpašums un mērķis, lai izveidotu pilnvērtīgu lapu.

Ievietojiet attēlu un izveidojiet saites uz lapām

Iesācējiem tīmekļa pārziņiem ir svarīgi zināt, kā lapā ievietot attēlus un izveidot saites uz citām lapām. Piemēram, vietnes nosaukuma teksta vietā varat ievietot vietnes logotipa attēlu. Lai to izdarītu, vispirms noklikšķiniet laukā, kurā vēlaties ievietot attēlu, pēc tam pašā augšpusē noklikšķiniet uz cilnes "Ievietot" > "Zīmējums" > "No faila", atlasiet vajadzīgo attēlu un noklikšķiniet uz "Ievietot", pēc tam kurā attēls parādīsies lapā. Ar peles labo pogu noklikšķinot uz attēla, jūs varat atvērt izvēlni ar papildu attēla iestatījumiem. Ir svarīgi, lai visi attēli būtu vienā stingri noteiktā mapē visiem attēliem.

Lai pārietu uz citām vietnes lapām, jums ir jāizveido saites, caur kurām lietotāji var apmeklēt visas vietnes lapas. Lai to izdarītu, jums ir jāizvēlas vēlamais saites teksts un jāiet uz cilni “Ievietot” > “Hipersaite”, atvērtajā izvēlnē jānorāda lapa, uz kuru tiek veidota saite, un noklikšķiniet uz “OK”. . Tajā pašā logā ir arī citi saišu iestatījumi, piemēram, vai atvērt saiti jaunā logā vai nē. Principā jūs varat to izpētīt patstāvīgi.

Secinājums

Savā pamatā šie redaktori ir līdzīgi viens otram, un tiem ir līdzīgas funkcijas un izvēlnes. Apgūstot pamata iestatījumus, varat viegli izveidot vietnes citos redaktoros. Apgūstot šos principus, varat pāriet uz sarežģītāku vietņu veidošanas metodi – izmantojot tā saukto CSS. Par to, kas tas ir un kā rediģēt vietnes dizainu, varat lasīt rakstā par CSS.

Šīs "veidnes" metodes trūkums ir tāds, ka katra lapa ir jāveido atsevišķi, pamatojoties uz izveidoto veidni. Ja, tāpat kā veidojot tīmekļa vietnes, izmantojot tā sauktos dzinējus, atsevišķa lapu ģenerēšana nav nepieciešama, tās tiek ģenerētas automātiski, pievienojot saturu

Ja jums ir kādi jautājumi par rakstu vai šādu programmu izmantošanu vietņu izveidei, varat tos uzdot mūsu foruma diskusiju pavedienā.

Raksti par līdzīgām tēmām

Pirms sākt nodarbību par apgāšanās veidošanu, izdomāsim, kas ir apgāšanās. Paskatieties uz attēlu, ko jūs tajā redzat? Tieši tā, parasts uzraksts, un tagad mēģiniet novietot peles kursoru virs attēla Kas notika? Zīmējums ir mainījis savu izskatu t.i. tas reaģēja uz lietotāja darbībām. Izrādās, ka apgāšanās ir attēls, kas maina savu izskatu, virzot peles kursoru? Ne gluži, skatieties tālāk redzamo uzrakstu:

"Tas arī ir apgāšanās!"

Izrādās, ka apgāšanās ir Web lapas elements, kas maina savu izskatu, virzot peles kursoru? Man jums ir jāpieviļ – arī šī definīcija nav patiesa. Apskatiet zemāk redzamo uzrakstu.

"Es arī esmu apgāšanās"

No uzraksta izriet, ka tas ir arī apgāšanās, bet, virzot peles kursoru, tas nekādā veidā nereaģē uz to. Tagad mēģiniet noklikšķināt uz uzraksta ar peli, kas notika? Ap uzrakstu parādījās sarkans rāmis. Pat ja tagad noņemsit peles kursoru no uzraksta, tas neatgriezīsies sākotnējā formā. Lai atgrieztu mūsu uzrakstu tā sākotnējā stāvoklī, mums vēlreiz jānoklikšķina uz peles kursora. No visa teiktā mēs secinām, ka apgāšanās var reaģēt ne tikai uz peles kustību, bet arī uz peles klikšķi. Tātad, kas ir apgāšanās? Apgāšanās ir Web lapas elements, kas maina savu izskatu atkarībā no ārējas ietekmes. Parasti praksē biežāk tiek izmantoti apgāšanās, kas reaģē uz peles kustību. Tieši šādu apgāšanās veidu mēs mēģināsim izveidot šajā nodarbībā. Kā sākotnējo apgāšanās stāvokli mēs izmantojam nelielu attēlu (skatīt zemāk), kas darbosies kā navigācijas poga. Kā tu saki, bildē ir kaķis, ja nemaldos Džerijs, bet tas absolūti nav svarīgi. Vēl viena svarīga lieta ir tas, ar kādu nosaukumu saglabāt šo zīmējumu. Ja plānojat ievietot savu vietni globālajā internetā, attēlam ir jāpiešķir nosaukums, kas sastāv no latīņu rakstzīmēm ar mazajiem burtiem. Fakts ir tāds, ka pretējā gadījumā jums var rasties problēmas ar failu ievietošanu mitināšanas serverī. Tātad, es saglabāju sākotnējo zīmējumu ar nosaukumu cat_up, ņemiet vērā, ka faila nosaukumam ir semantiskā nozīme un tajā nav vietas. Iepriekš minētā iemesla dēļ failu nosaukumos nevar izmantot atstarpes. Lai veiktu apgāšanās, mums ir nepieciešams otrs zīmējums. Lai to izdarītu, mēs vienkārši mainīsim sākotnējā faila cat_up izskatu un saglabāsim to kā cat_over. Šim nolūkam izmantoju Photoshop, bet darbam ar rastra grafiku var izmantot jebkuru citu redaktoru. Otrais attēls (skat. attēlu zemāk) atšķiras no pirmās tikai ar gaišāku attēla fonu, mūsu mērķis ir iegūt efektu. attēla izcelšana, virzot peles kursoru. Kad abi attēli ir sagatavoti un integrēti mūsu vietnē, varat sākt strādāt ar oriģinālo attēlu jebkurā Web lapas vietā un atlasīt to ar peles kreisās pogas klikšķi. Pēc tam izvēlnē “Formāts” atlasiet vienumu “Skaļruņa HTML efekti”, pēc kura ekrānā parādīsies atbilstošais panelis (ja tas iepriekš nav palaists), kas sastāv no trim nolaižamajām izvēlnēm. Izmantojot peli, pirmajā nolaižamajā izvēlnē atlasiet notikumu, uz kuru reaģēs, pārslēdzot kursoru. Kā jau esam nolēmuši, šis notikums būs peles kursora novietošana virs zīmējuma, tāpēc izvēlamies vienumu “Peles kustība”. Otrajā nolaižamajā izvēlnē mēs atlasām efektu, kas radīsies, kad peles kursoru novietos virs kursora. Principā šajā gadījumā mums nekas nav jāizvēlas, jo Ir tikai viens vienums “Mainīt attēlus”. Protams, mēs to atlasām ar peles klikšķi. Trešajā nolaižamajā izvēlnē mums atkal nav alternatīvas, un mēs izvēlamies vienīgo vienumu “Atlasīt attēlu...”. Pēc attēla atlases loga atvēršanas mēs atrodam failu ar nosaukumu cat_over un veicam dubultklikšķi uz tā. Tagad mēs varam pārslēgties uz skatīšanas režīmu, dodoties uz cilni "Skats" un redzēt, kā mainās peles kursors. Ja jūs visu izdarījāt pareizi, tad, virzot peles kursoru, vajadzētu parādīties attēlam ar gaišu fonu. Vai tas tiešām ir tik vienkārši? Jā, tas ir patiešām vienkārši, būtība ir tāda, ka programma FrontPage uzņēmās lauvas tiesu no apgāšanās izveides darba. FrontPage programma automātiski ģenerēja kodu JavaScript, un viss, ko mēs varējām darīt, bija apbrīnot “mūsu” darba rezultātus. Dari pats.Šajā nodarbībā tika aprakstīts, kā izveidot apgāšanās kārtu, pamatojoties uz zīmējumu. Mēģiniet pats veikt apgāšanās tekstu, pamatojoties uz teksta fragmentu, izmantojot iepriekš minētos piemērus. Ja jums ir kādi jautājumi, varat tos uzdot

Vienkārša Web lapa programmā Frontpage ir parasta tabula ar daudzām šūnām. Šajās šūnās ir teksti, attēli, video un viss, ko mēs redzam vietnēs. Piemēram, ja jūs attēlojat šo lapu kā blokshēmu, tā izskatīsies šādi.

Vienkārša Web lapa programmā Frontpage

Tīmekļa lapas struktūra ir vienkārša. Augšpusē ir vietnes nosaukums, tūlīt zem tā ir horizontāla izvēlne. Labajā pusē ir vertikāla izvēlne, bet apakšā ir “kājene”. Centrā ir vietnes “ķermenis”. Šie ir visparastākās vietnes lapas galvenie elementi.

Starp citu, jūs tagad atrodaties tieši tajā pašā tīmekļa lapā. Kā redzat, tā struktūra ir ļoti vienkārša. Šeit viss ir pie rokas. Noklikšķinot uz horizontālās vai vertikālās izvēlnes, jūs tiksit pārsūtīts uz citām vietnes lapām.

Tie ir izveidoti arī vienkāršākās tīmekļa lapas līdzībā, par kuru mēs runājām iepriekš. Veltiet laiku, lai noskatītos bezmaksas Vietņu pārdošanas skola kursu, un jūs uzzināsiet, cik ātri un vienkārši vienā vakarā varat izveidot lapu un pat vietni!.

Vietnes galvene

Vietnes galvenē Parasti atrodas vietnes galvene, attēls vai logotips. Vietnes galvenes mērķis ir informēt apmeklētāju, kuru vietni viņš ir apmeklējis. Ir ļoti svarīgi, lai nosaukums precīzi atbilstu vietnes saturam.

Vietnes galvene

Vietnes izvēlne

Horizontālajā izvēlnē Atrodas tematiskās sadaļas vai virsraksti. Tās pamatā ir saites, kas ved uz citām vietnes lapām.

Horizontāla vietnes izvēlne

Vietnes pamatteksts

Šī ir vietnes galvenā daļa, kurā ir visa pamatinformācija. Tagad jūs lasāt šo rakstu vietnes pamattekstā.

Vietnes vertikālā izvēlne

Vertikālā izvēlne, kā arī horizontālo, tiek izmantots vietnes navigācijai. Vertikālā izvēlne tiek veidota jautājumu vai jebkuras interesantas un noderīgas informācijas veidā, kas varētu interesēt apmeklētājus.

Vietnes kājene

Vietnes kājene atrodas pašā tīmekļa lapas apakšā. Autortiesību informācija un kontaktinformācija atrodas šeit.

Vietnes kājene programmā Frontpage

Apkopojot

Tagad jūs zināt, no kā tas sastāv vienkārša tīmekļa lapa. Lapas struktūrā nav sarežģītu vai nesaprotamu elementu. Tagad ir pienācis laiks iegūtās zināšanas likt lietā. Ejam uz priekšu. Nākamajā sadaļā jūs izveidosit

Horizontālā nolaižamā izvēlne izmanto vietnes navigācijas struktūras organizēšanai. Optimālais ligzdošanas līmeņu skaits ir viens vai divi. Jo mazāk līmeņu pielikumu, jo vieglāk vietnes apmeklētājam atrast nepieciešamo informāciju. Kā izveidot parastu horizontālo izvēlni, ir detalizēti aprakstīts.

Kā izveidot horizontālu nolaižamo izvēlni

1. HTML marķējums un pamata stili nolaižamajai izvēlnei ar vienu ligzdošanas līmeni

Horizontālās nolaižamās izvēlnes HTML marķējums atšķiras no parastās izvēlnes ar to, ka tajā ir saite uz vēlamo saraksta vienumu