Tutorial - vytvo°enφ strßnek |
Pokud jste si proÜli prvnφ Φßst nßvodu k Namo WebEditoru, p°eΦt∞te si jeÜt∞ tento Φlßnek, ve kterΘm si s nßmi budete moci zkusit vytvo°it vlastnφ webovΘ strßnky. P°i tΘ p°φle₧itosti vßs pon∞kud podrobn∞ji seznßmφme s n∞kter²mi nastavenφmi, kterß p°i svΘ vlastnφ tvorb∞ budete nejvφce pot°ebovat.
Budeme vytvß°et imaginßrnφ strßnky Centra pro v²chodnφ kultury v Praze. P°ipravili jsme vÜechny podkladovΘ materißly, kterΘ zde naleznete zabalenΘ ve formßtu .ZIP. |
ZaΦneme vytvo°enφm novΘho framesetu. StaΦφ kliknout na p°φkaz New Frameset v nabφdce Frame. Po otev°enφ dialogovΘho okna vyberte z nabφdky styl∙ typ Contents. Potvrdφte a m∙₧ete pracovat. Nejprve se budeme v∞novat levΘ stran∞. Klikn∞te do jejφho pole, a pak v nabφdce Format vyberte p°φkaz Document... V dialogovΘm okn∞ nejprve zm∞≥te barvu textu na bφlou (oddφl Document colors, rozbalovacφ nabφdka Text), a potΘ urΦete na pozadφ obrßzek left.jpg, kter² naleznete v packu. DoporuΦuji vybalit si vÜechny v∞ci na jedno mφsto, p°φpadn∞ umφstit obrßzky do podadresß°e. Potvr∩te. Tato Φßst je p°edem definovßna jako stabilnφ, tedy, pokud do nφ umφstφte n∞jak² odkaz, tak pokud neurΦφte jinak, vÜechny strßnky se budou zobrazovat do pravΘ Φßsti. Proto je zde obrßzek umφst∞n jako pozadφ, abyste pozd∞ji mohli pohodln∞ p°idßvat odkazy Φi m∞nit texty. Obrßzek nemusφ sed∞t, a tak si nejprve p°izp∙sobte rozm∞ry framu - naje∩te na d∞lφcφ Φßru a ta₧enφm doleva Φi doprava oddφl zu₧te nebo rozÜi°te. Nynφ si otev°ete dokument z packu nazvan² texty. Na zaΦßtku naleznete text k levΘ stran∞. Vyberte jej a vlo₧te do schrßnky (Ctrl+C). Vra¥te se zp∞t do editoru a v levΘm oddφlu zm∞≥te zarovnßnφ na "zprava". V nabφdce Insert zvolte Symbol a v dialog. okn∞ vyberte znak ⌐. Potvr∩te a pak vlo₧te text ze schrßnky (Ctrl+V). Text bude sice bφl², ale nebude mφt sprßvnou podobu a velikost. Dejte jej do bloku a v panelu nßstroj∙ zm∞≥te font na ArialCE a n∞kolikrßt stiskn∞te pro zmenÜenφ fontu. Pak cel² nßpis odentrujte ke spodnφmu okraji. Nastane menÜφ problΘm: u levΘ Φßsti se objevφ skrolovßtko a u₧ to nebude vypadat dob°e. Pom∙₧ete si menÜφ html fintou. JednotlivΘ framy majφ v html definovßno, zda se tam mß skrol objevit Φi ne. Otev°ete si HTML Source v nabφdce Frame a v °ßdku odpovφdajφcφmu na obrßzku (to jest tomu, kterΘmu odpovφdß lev² oddφl), zm∞nφte p°φkaz scrolling="auto" na "no". Potvrdφte, a tφm zamezφte dalÜφmu posouvßnφ levΘ strany. Nynφ se m∙₧ete pustit do pravΘ strany. Vrßtφte se zp∞t k text∙m z packu a p°enesete tam kompletnφ texty pro pravou stranu. Zopakujete ·pravy, abyste dosßhli po₧adovanΘ podoby. Na zaΦßtku ka₧dΘho odstavce pou₧ijte n∞kolikrßt Nonbreaking Space z nabφdky Insert, abyste ud∞lali odsazenφ. Pak se m∙₧ete pustit do vklßdßnφ obrßzk∙. Prvnφ, nadpis, p°ijde nahoru. Odentrujete cel² text o °ßdek nφ₧ a ve volnΘm °ßdku nastavφte zarovnßnφ "na st°ed". Pak stisknete a otev°ete dialogovΘ okno pro vlo₧enφ obrßzku. U nadpisu vßm bude staΦit, kdy₧ v zßlo₧ce General vyberete cestu k obrßzku (je to logo.gif). U zbyl²ch dvou obrßzk∙ (r1.jpg a r2.jpg), kterΘ vlo₧φte na zaΦßtek ka₧dΘho lichΘho odstavce, jeÜt∞ v zßlo₧ce Appearance nastavte zarovnßnφ (oddφl Alignment), odsazenφ (Horizontal, Vertical space; hodnota 10) a ohraniΦenφ (Border; hodn. 1). Tφm se vßm poda°ilo sestavit kompletnφ textovou Φßst strßnek a zb²vß u₧ jen p°ipojenφ odkaz∙ na kontakty strßnek. Aby byly kompaktn∞jÜφ, umφstφte je do tabulky. Sjedete na konec dokumentu a p°idßte °ßdek. Vytvo°φte tabulku p°φkazem New Table v nabφdce Table. V dialogovΘm okn∞ nastavφte 1 °ßdek a 2 sloupce (oddφl Rows and Columns), okraje bun∞k a tabulky vynulujete (oddφl Layout; vÜechny hodn. 0). Pak potvrdφte; v samotnΘ tabulce jeÜt∞ zm∞≥te zarovnßnφ (v levΘ bu≥ce "vpravo" a v pravΘ naopak). Do jednotliv²ch bun∞k tabulky postupn∞ vlo₧φte dva symboly z archiv∙ Namo WebEditoru. Bude to mail a home. Stisknete a v otev°enΘm dialogovΘm okn∞ postupn∞ vlo₧φte clipart s dopisem z nabφdky Mail a clipart s domeΦkem z nabφdky Home. Obrßzky budou t∞st∞ vedle sebe, proto k nim musφte v ka₧dΘ bu≥ce znovu p°idat n∞kolikrßt Nonbreaking Space. Zb²vß u₧ jen p°ipojil linky k jednotliv²m obrßzk∙m. Kliknete na n∞ a pak v nabφdce Insert vyberte Hyperlink (klßvesa F9). V dialogovΘm okn∞ nastavφte ty to parametry: Pro poÜtu zm∞nφte zp∙sob odkazu v rozbalovacφ nabφdce Scheme na mailto. Pak zcela nahoru do °ßdku URL vlo₧φte e-mailovou adresu, kterou naleztene v textech. Pro dom∙ nechßte Scheme na http a p°idßte adresu z text∙. Zm∞nφte tam vÜak jeÜt∞ jednu v∞c - v tozbalovacφ nabφdce Target Frame zvolφte p°φkaz _blank. Tφm zajistφte, ₧e se novß naΦφtanß strßnka bude zobrazovat do novΘho okna prohlφ₧eΦe a nikoli p°es strßnky vaÜe. Tφm jste dokonΦili prßci na ministrßneΦkßch, kterΘ vßm m∞ly ukßzat, co vÜechno Namo WebEditor umφ. P°eji vßm mnoho ·sp∞ch∙ p°i tvorb∞ strßnek vlastnφch. VaÜe tipy pro dalÜφ nßvody oΦekßvßme na
adrese navody.chipcd@vogel.cz |