Lugege kahte eelmist osa, omandage kolmas ja teid relvastatakse kõigi tehniliste teadmistega, et saaksite uues redigeerijas täielikult töötada!

Kuidas saada e-posti kood uuest redaktorist välja?

Niisiis, töötasin ehitaja uues versioonis. Üldiselt meeldis mulle. Puuduseks on aga see, et see ei võimalda loodud tähte koos teksti ja piltidega HTML-koodiks teisendada. See on kurb. Kuid väljapääs on olemas. Koodi peate ise tõmbama. Kuidas seda teha?

Ma ütlen sulle nüüd. Nii et teil on kiri. Või kirja mall. Kui ei, siis pöörduge tagasi selle osa lugemiseni pärast malli (või selle põhjal valmis kirja) loomist.

Päris algusest

Vaatame kogu protseduuri täielikult läbi. Päris algusest. Teeme kõik neljas etapis.

Teine samm. Valige salvestatud mall.

Kolmas samm. Klõpsake nuppu "Eelvaade". Järgnevalt kirjeldan brauseris toimingute järjekorda. Google Chrome... Kui klõpsate nuppu "Eelvaade", avaneb kiri sellisel kujul, nagu tellija seda näeb.

Neljas samm. Helistage hiire parema nupuga menüüsse, kus valime valiku "Vaata koodi". Pärast seda avaneb Chrome'i brauseris altpoolt täiendav aken ("aken aknasiseselt") koos tähe HTML-koodiga.

Teie jaoks selgemaks saate allpool kõigi toimingute ekraanipildid.

Kuidas saada e-kirja HTML-koodi

Kui hõljutate hiirekursori mis tahes koodirea kohal, siis märgitakse seda rida kirjeldav väli sõnumi eelvaateaknasse (see on meile endiselt avatud, see pole kuhugi viinud).

Üles liikudes jõuame oma kirja algusesse. See võib olla kõige esimene tekst, näiteks "Tere, kallis tellija" või pilt - teie saidi logo.

Minu kiri algab logoga. Seega otsime koodi, millega tähe kõigi elementide kirjeldus algab: tekst ja pildid.

Koodiga akna saab paigutada horisontaalselt (brauseriakna allosas), vertikaalselt (brauseriakna paremas servas) või eraldi iseseisva aknana. Kuid me ei vaja eraldi iseseisvat akent, sest me kõnnime läbi koodi ja vaatame, millist tähe elementi see kuvab. Minu jaoks on mugavam, kui lisaaken asub brauseriakna allosas.

Kuidas seadistada lisaakent?

Täiendava akna asukohta on lihtne valida.

1. Täiendava akna ülemises menüüs paremal küljel risti kõrval on element, mida tähistavad kolm vertikaalset punkti. Selle nimi on DevToolsi kohandamine ja juhtimine (nimi kuvatakse hiirekursori hõljumisel). Me avame selle.
2. Valige dokkimispõhi.

Kõik. Nüüd asub meie lisaaken allosas. Sel juhul tuleks ülamenüü vasakpoolses servas valida režiim Elemendid.

E-posti koodi kopeerimine brauserist

Nüüd liigume läbi koodi ülalt alla. Niipea kui oleme leidnud koodi, mis katab üheaegselt kõik meie kirja lehel olevad elemendid, helistame hiire parema nupuga menüüsse ja valime Muuda HTML-ina.

Avaneb plokk: ristkülik, mille sees on palju koodi. Kopeerige kogu kood selle ristküliku sees (vajutage esmalt klaviatuuri otsetee Ctrl + A, seejärel Ctrl + C).

See on see, kopeerisime HTML-koodi lõikelauale, see tähendab meie arvuti ajutisse mällu. Nüüd saate selle koodi SmartResponderis mallina salvestada.

Avaneb uue malli tühi väli, mille menüüs on vaja vajutada nuppu "Allikas" (täna sõna otseses mõttes nägin, et nüüd on see nupp ümber nimetatud "HTML-koodiks").

Seejärel kleepime oma HTML-koodi klaviatuuri otseteega Ctrl + V. Seejärel märgime tähe teema (see on kohustuslik väli) ja vajutage nuppu "Salvesta". Valmis!

Salvestame e-posti koodi õigesti

Niisiis, me arvasime selle välja. Nüüd saate koodi valikuliselt oma arvutis HTML-failina salvestada. Selleks peate lihtsalt avama Notepad ja salvestama selle koodi. Pärast seda muutke laiend * .txt väärtuseks * .html ja avage fail. Näete brauseriaknas oma kirja koopiat.

Rangelt öeldes on programmikoodide salvestamiseks parem laadige alla NotePad ++ redaktor... Ma kasutan seda alati, kuna Notepad on:

a) koodistruktuuri visuaalne kuvamine;
b) süntaksi esiletõstmine (see tähendab seoseid koodielementide vahel: kus on see, mis avaneb ja sulgub ning mis on kirjutatud nende vahel "kus mis").

Tõsi, sl smartResponderi postitusteenuses loodud tähtkoodi töötlemist uurides ei aidanud isegi NotePad ++ mul ilusa koodimärgise saamiseks. Aitasin siit välja Adobe Dreamweaver CC.

Ainult tänu talle oli võimalik koodi struktureerida, kasutades käsku "Vorminda lähtekood".

Nüüd saate oma koodi NotePad ++ -sse üle kanda ja salvestada. Ei, siiski. Enne salvestamist peate klõpsama "Teisenda ANSI-ks", nii et vaatamise ajal pole teksti asemel kritseldus.

Võite valida ka "Vaade" - "Joone mähkimine". Siis asub kogu kood lehe laiuses ja mitte reas.

Pärast seda peaks kõik avanema ja kuvama nagu SmartResponderi teenuse e-posti mallil.

Turvavõrk: salvestage kood SmartResponderisse

Kuna me uudses redaktoris loodud kirjast "kala püüdsime", kuna meil see on olemas, võime selle ohutuse huvides SmartResponderi teenusesse salvestada. Milleks? Selle alusel uute tähtede loomiseks, muutmiseks ja mis kõige tähtsam - teiste ressursside kasutamiseks (lubage mul meelde tuletada, et uues redaktoris selliseid funktsioone lihtsalt pole).

Selleks tuleb Google Chrome'i brauserist kopeeritud kood kleepida vanasse SmartResponderi konstruktorisse.

Seda on lihtne teha.

1. Valige vahekaardil „Postitused” jaotis „Kirja mallide loend”.
2. Klõpsake nuppu "Loo mall".
3. Valige tüüp "Värviline HTML-täht (vana toimetaja)" ja klõpsake nuppu "Järgmine".
4. Klõpsake avatud redaktoris tähe loomise tööriistade menüüs nuppu "HTML-kood".
5. Kleepige meie kood (vajutage Ctrl + V). Saame veelkord klõpsata nupul "HTML-kood", see tähendab, et lülitage välja koodi kuvamise režiim ja lülitage sisse sõnumi välimuse kuvamise režiim.
6. Täitke kindlasti väli "E-posti teema" (vene keeles: meie mallile anname nime).
7. Vajutage nuppu "Salvesta".

See tähendab tegelikult kõike, mida ma tahtsin teile uue SmartResponderi redigeerija kohta öelda, pärast seda, kui ma seal oma esimese tähe lõin.

Tahan öelda, et ma polnud varem SmartResponderi teenusega tuttav. See tähendab, et mul polnud varem oskusi töötada ei vanas ega uues toimetajana. Kuid ma registreerisin ja arvasin selle välja. Noh, nüüd teate ka, kuidas töötada uues SmartResponderi konstruktoris.

Milliseid teenuseid kasutate oma töös kirjade loomiseks ja saatmiseks?

HTML-i keele teoreetilise materjali uurimise käigus on mõnel kasutajal küsimus: kuidas sisestage HTML-fail veebibrauserisse? Nagu juba kirjutatud html-kood, vaade sisse brauser... Vaata , niiöelda tehtud töö tulemus.

Nagu oleme juba kokku leppinud, kirjutame oma html-koodi programmis "Notepad" (kuid keegi ei keela teiste redigeerijate kasutamist, näiteks "Notepad ++", mis on veelgi mugavam).

Ja nii, avage programm "Notepad" ja kirjutage sinna html-kood. Võtame html-koodi viimasest õpetusest.

"Kirjeldus" content \u003d " Lehe kirjeldus">

Selline html-kood ei anna meile aga brauseris midagi. Vajab siltide vahel ja kirjutage midagi muud, näiteks pealkiri ja paar lõiku:

Kõik töötab

Lisame need kolm rida oma html-koodile ja saame sellise koodi:

"Kirjeldus" content \u003d " Lehe kirjeldus">

Html-koodi kirjutamise tulemuse kontrollimine

Kõik töötab

Salvestame oma faili: klõpsake faili → Salvesta kui

Valige avanevas aknas kaust, kuhu faili salvestame, kirjutage faili nimi (näiteks dokument), muutke .txt faililaiendiks .html ja määrake faili tüübiks "Kõik failid".

Meie faili brauseris avamiseks hõljutage hiirekursorit faili kohal, paremklõpsake, valige avanevas aknas „Ava koos” ja valige meie kasutatav brauser.

Järgmine õppetund on.

Meilt küsitakse väga sageli html-kirjade redigeerimise võimaluste kohta. Reeglina pole sellega probleeme, kuna postiteenused on varustatud mitmesuguste kirjatoimetajatega.

Aga mis siis, kui peate saatma kirju ainult mõnele adressaadile ja igaüks neist peab olema individuaalne? Kas maksate raha vaid teenuse toimetaja kasutamise võimaluse eest?

Ei ole vajalik. Täna räägime teile, kuidas asendada lähtekoodis oleva meilisisu, kasutades tekstiredaktori Sublime Text näidet.

Toimetajaga tutvumine

Samal ajal tuleb tähe enda nägemiseks ja muutuste jälgimiseks avada brauseriaknas lihtsalt tähe html-fail. Pärast muudatuste (Ctrl + S) salvestamist kooditeksti peate lehte lihtsalt värskendama ja näete tehtud muudatusi.

Nagu näete, tõstab Sublime meie versioonis esile erinevad andmevormingud koos värvidega: roosa - html-sildid, roheline - parameetrid, kollane, lilla ja sinine - erinevate parameetrite väärtus ja valge - tekst.

Kirja teksti asendamine

Tänu ülaltoodud toimetaja funktsioonidele saab laps hakkama ka kirja teksti asendamisega. Kõik, mida peate tegema, on lihtsalt asendada Sublime'i esiletõstetud tekst valgega.

Väärib märkimist, et Sublime, nagu Notepad, nullib teksti vormindamise automaatselt. Niisiis, saate mis tahes teksti ohutult kopeerida ja soovitud kohta kleepida, kuvatakse see tähes vastavalt koodis määratletud parameetritele.

Ja veel üks väike näpunäide, et leida soovitud tekst kogu koodimassiivis, vajutage klahve Ctrl + F - pärast seda ilmub redaktori lõppu tekstiotsimisväli.

Vajadusel saate fondi stiili muuta.

Soovitame kasutada ühte järgmistest fontidest - Arial, Arial Black, Tahoma, Trebuchet MS, Verdana, Courier, Courier New, Georgia, Times, Times New Roman. Need on standardsed fondid, mida tunneb iga süsteem. Vastasel juhul võib teie tekst teises arvutis muutuda räigeks.

Suurus - asendada parameetris soovitud väärtus "Kirjasuurus: 14 pikslit;" ... Suurendame fondi suurust 14 pikslist 16 pikslile.

Värv - värvi väärtus on seatud parameetrisse HEX "Värv: # 323232;" .

Värviväärtuse saate valida veebiteenuste hulgast, näiteks siin - get-color.ru.

Teeme teksti halliks - # 4F4F4F.

Ridade vahe - analoogia alusel parameetriga määratud kirjasuurusega "Joone kõrgus: 18 pikslit;"

Fondi vorming - määratud siltide järgi tekst - julge, tekst - kaldkiri ja tekst - allajoonitud.

Väärib märkimist, et Sublime lisab sildi avamisel automaatselt sulgemise sildi käsu. Ole ettevaatlik.

Toome esile meie teksti kaldkirjas.

Joone katkemine - seatud sildi järgi
... Sisestage see silt soovitud tekstiosa ette.

Asendage tekst, salvestage, värskendage ja oletegi valmis.

Lisage link teksti

target \u003d ”_ tühi” - see käsk lingi avamiseks uuel vahelehel. Kui soovite, et link avaneks praegusel vahekaardil, siis lihtsalt ärge kirjutage seda.

teksti kaunistamine: allajoonimine; - käsk brauseril link alla tõmmata. Kui allajoonimist ei nõuta, peate registreeruma teksti kaunistamine: puudub;

Igal juhul kirjutage see käsk kindlasti, vastasel juhul otsustab iga brauser omal moel allajoonimise või mitte.

See on ka kohustuslik käsk, vastasel juhul kuvavad brauserid värvi oma äranägemise järgi.

Tähelepanu! Mõned e-posti kliendid on nutikamad, kui neile tundub, ja kui nad näevad tekstis linki, näiteks „Võite minna saidile täiendavat uurimist ...”, saavad nad selle ise ja omal moel esile tõsta.

Sisestage / asendage link pildile

Kirja pilte ei salvestata manustena, vaid need asuvad serverites. Sellest lähtuvalt on pildil kood link sellele ja selle lisamise käsk on sarnane ülalpool kirjeldatuga.

www.example.com”Target \u003d” _ tühi ”style \u003d” teksti kaunistamine: allajoonimine; ”\u003e

värv: # 234322; - värvisätete käsk pole pildi jaoks asjakohane.

ääris \u003d "0" - käskluse pildi raamimine. Väärtus 0 eemaldab pildi ümber valge ääre, suuremad väärtused määravad selle vastava laiuse pikslites.

Kirjutage see käsk kindlasti. Näiteks määrab Outlook automaatselt pildile raami, kui te seda käsku ei registreeri.

Piltidega kooditüki leidmine on brauseris lihtsam. Selleks paremklõpsake vajalikku pilti ja valige “Kuva kood” (need on selle valiku nimed Google Chrome'is, selle nimi ja tee teistes brauserites võivad erineda). Brauser tõstab automaatselt esile teie jaoks vajaliku osa, kopeerib koodi ja kleepib Sublime'i otsingusse.

Pildi asendamisel olge ettevaatlik - kui uue pildi suurus erineb eelmise pildi suurusest, peate muutma kõiki parameetreid laiusja kõrguspäevakajaliseks.

Järelsõna

Oleme rääkinud teile tähtkoodi redigeerimise kõige valutumatest võimalustest. Kui peate tegema olulisemaid muudatusi, soovitame tungivalt usaldada see ülesanne küljendusspetsialistile või vähemalt enne redigeerimist luua koodi koopia.