Lugege läbi kaks eelmist osa, omandage kolmas ja olete kõigega relvastatud tehnilisi teadmisi täisväärtusliku töö eest uues toimetuses!

Kuidas uuest redaktorist tähekoodi eraldada?

Niisiis, töötasin disaineri uues versioonis. Üldiselt mulle meeldis. Negatiivne külg on aga see, et see ei võimalda loodud kirja koos teksti ja piltidega HTML-koodiks teisendada. See on kurb. Kuid on väljapääs. Peate koodi ise välja võtma. Kuidas seda teha?

ma ütlen sulle kohe. Üldiselt on teil kiri. Või kirjamalli. Kui ei, tulge selle osa juurde tagasi pärast malli loomist (või juba valmis kiri selle põhjal).

Päris algusest

Niisiis, lähme kogu protseduuri täielikult läbi. Päris algusest. Teeme kõike neljas etapis.

Teine samm. Valige salvestatud mall.

Kolmas samm. Klõpsake nuppu "Eelvaade". Järgmisena kirjeldan protseduuri brauseris Google Chrome. Klõpsates nupul “Eelvaade”, avaneb kiri kujul, milles tellija seda näeb.

Neljas samm. Paremklõpsake menüü avamiseks, kus valime valiku "Kuva kood". Chrome'i brauseris avaneb allpool täiendav aken („aken akna sees“) tähe HTML-koodiga.

Selle selgemaks muutmiseks on allpool ekraanipildid kõigist etappidest.

Kuidas saada kirja HTML-koodi

Kui hõljutate hiirekursorit mis tahes koodirea kohal, märgitakse meili eelvaate aknas (meil on see avatud, see on endiselt alles) see väli, mida see rida kirjeldab.

Liikudes ülespoole, 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, mis alustab kirja kõigi elementide kirjeldust: teksti ja pilte.

Koodiga aken võib paikneda horisontaalselt (brauseriakna allosas), vertikaalselt (brauseriakna paremal küljel) või eraldi iseseisva aknana. Kuid me ei vaja eraldi iseseisvat akent, sest rändame läbi koodi ja vaatame, millist tähe elementi see kuvab. Minu jaoks on mugavam, kui lisaaken asub brauseriakna allosas.

Kuidas seadistada täiendavat akent

Lisaakna asukoha valimine on lihtne.

1. Lisaakna ülemises menüüs paremal pool risti kõrval on kolme vertikaalse punktiga tähistatud element. Selle nimi on DevTools'i kohandamine ja juhtimine (nimi kuvatakse, kui hõljutate kursorit selle kohal). Avame selle.
2. Valige režiim Dokk alla.

Kõik. Nüüd asub meie lisaaken allosas. Sel juhul tuleb ülamenüü vasakpoolses osas valida režiim Elements.

Kopeerige brauserist tähtkood

Nüüd liigume koodiga ülevalt alla. Kui oleme leidnud koodi, mis katab korraga kõik meie kirja lehel olevad elemendid, avame hiire parema nupuga menüü ja valime Redigeeri HTML-ina.

Avaneb plokk: ristkülik, mille sees on palju-palju koodi. Kopeerige kogu selle ristküliku sees olev kood (kõigepealt vajutage klahvikombinatsiooni Ctrl + A, seejärel Ctrl + C).

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

Avaneb tühi väli uue malli jaoks, mille menüüs tuleb klõpsata nuppu “Allikas” (just täna nägin, et see nupp on nüüd ümber nimetatud “HTML-koodiks”).

Seejärel kleepime oma HTML-koodi, kasutades kiirklahvi Ctrl + V. Seejärel märkige kirja teema (see on kohustuslik väli) ja vajutage nuppu "Salvesta". Valmis!

E-posti koodi õigesti salvestamine

Olgu, see on lahendatud. Nüüd saate soovi korral koodi oma arvutisse HTML-failina salvestada. Selleks avage lihtsalt Notepad ja salvestage kood sinna. Pärast seda muutke *.txt laiendiks *.html ja avage fail. Näete oma kirja koopiat brauseriaknas.

Rangelt võttes on parem programmikoodide salvestamine laadige alla redaktori NotePad++. Ma kasutan seda alati, sest Notepad on:

a) koodistruktuuri visuaalne kuvamine;
b) süntaksi esiletõstmine (ehk seosed koodielementide vahel: kus mis avaneb ja sulgub ning mis nende vahele kirjutatakse, “kus mis” on kirjutatud).

Tõsi, sisse Spetsiaalselt SmartResponderi meiliteenuses loodud kirja koodi töötlemisel ei aidanud mul ilusat koodimärgistust saada isegi NotePad++. Siin aitas Adobe Dreamweaver CC.

Ainult tänu temale oli võimalik koodi struktureerida käsuga "Format Source Code".

Nüüd saate koodi üle kanda NotePad++ ja salvestada. Kuigi, ei. Enne salvestamist peate klõpsama nuppu "Teisenda ANSI-sse", et vaatamisel ei oleks teksti asemel kritseldatud.

Samuti saate valida "View" - "Line Break". Siis asub kogu kood kogu lehe laiuses, mitte reas.

Pärast seda peaks kõik avanema ja kuvama nagu SmartResponderi teenuse kirjamallis.

Turvavõrk: salvestage kood SmartResponderisse

Kuna “kalastasime” koodi oma uues redaktoris loodud kirjast, siis kuna see meil juba on, saame selle turvalisuse huvides SmartResponderi teenusesse salvestada. Milleks? Selle põhjal uute tähtede loomiseks muutke neid ja, mis kõige tähtsam, kasutage neid teistes ressurssides (tuletan teile meelde, et uuel redaktoril lihtsalt pole selliseid võimalusi).

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

Seda on lihtne teha.

1. Valige vahekaardil „Mailouts” jaotis „Kirjamallide loend”.
2. Klõpsake nuppu "Loo mall".
3. Valige tüüp "Värviline HTML-kiri (vana redaktor)" ja klõpsake nuppu "Järgmine".
4. Avanevas redaktoris kirja loomise tööriistade menüüs klõpsake nuppu "HTML-kood".
5. Kleepige meie kood (vajutage Ctrl + V). Saame uuesti klõpsata nupul “HTML-kood”, st lülitada koodi kuvamise režiim välja ja lülitada sisse vaatamisrežiim välimus kirju.
6. Täitke kindlasti väli "Kirja teema" (vene keeles: andke meie mallile nimi).
7. Klõpsake nuppu "Salvesta".

See on põhimõtteliselt kõik, mida tahtsin teile uue SmartResponderi redaktori kohta öelda pärast seda, kui olin selles oma esimese tähe loonud.

Tahan öelda, et ma ei olnud varem SmartResponderi teenusega üldse tuttav. See tähendab, et mul polnud varem oskusi töötada ei vanas ega uues toimetajas. Aga siis registreerusin ja mõtlesin välja. Noh, nüüd teate, kuidas töötada uues SmartResponderi konstruktoris.

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

HTML-keele teoreetilist materjali uurides tekib mõnel kasutajal küsimus: kuidas kleepige html-fail veebibrauserisse? Nagu juba kirjutatud html-kood, vaata sisse brauser. Vaata , niiöelda tehtud töö tulemus.

Nagu juba kokku leppisime, kirjutame oma html koodi Notepad programmi (aga keegi ei keela kasutada teisi toimetajaid, näiteks Notepad++, mis on veelgi mugavam).

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

"Kirjeldus" content=" Lehe kirjeldus">

Tõsi, selline html-kood ei anna meile brauseris midagi. Nõutav 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=" Lehe kirjeldus">

Html-koodi kirjutamise tulemuse kontrollimine

Kõik töötab

Salvestage meie fail: klõpsake faili → Salvesta kui

Avanevas aknas valige kaust, kuhu faili salvestame, sisestage faili nimi (näiteks dokument), muutke faililaiendiks .txt .html ja määrake failitüübiks „Kõik failid”.

Meie faili avamiseks brauseris hõljutage hiirekursorit faili kohal, paremklõpsake avanevas aknas, valige "Ava koos" ja valige brauser, mida me kasutame.

Järgmine õppetund - .

Meilt küsitakse sageli html-kirjade redigeerimise võimaluste kohta. Reeglina sellega probleeme pole, kuna postiteenused on varustatud erinevate kirjaredaktoritega.

Aga kui teil on vaja kirju saata vaid mõnele adressaadile ja igaüks neist peab olema individuaalne? Kas maksta raha lihtsalt teenuse redaktori kasutamise võimaluse eest?

Ei ole vajalik. Täna räägime teile, kuidas Sublime Text tekstiredaktori näitel lähtekoodis kirja sisu asendada.

Tutvuge toimetajaga

Samal ajal tuleb kirja enda nägemiseks ja selles muutuste jälgimiseks lihtsalt avada brauseriaknas kirja html-fail. Pärast muudatuste salvestamist (Ctrl+S) kooditekstis lihtsalt värskenda lehte ja näed tehtud muudatusi.

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

Sõnumi teksti asendamine

Tänu ülalmainitud toimetaja funktsioonidele saab isegi laps kirja teksti asendamisega hakkama. Kõik, mida pead tegema, on lihtsalt teksti enda asendamine, mille Sublime on valgega esile tõstnud.

Väärib märkimist, et Sublime, nagu ka Notepad, lähtestab automaatselt tekstivormingu. Seega saate mis tahes teksti turvaliselt kopeerida ja soovitud kohta kleepida, see kuvatakse kirjas vastavalt koodis määratud parameetritele.

Ja veel üks väike nõuanne, et leida nõutav tekst kogu koodimassiivis vajutage Ctrl+F - pärast seda ilmub redaktori allossa tekstiotsingu väli.

Vajadusel saate fondi stiili muuta.

Soovitame kasutada ühte järgmistest fontidest – Arial, Arial Black, Tahoma, Trebuchet MS, Verdana, Courier, Courier New, Georgia, Times, Ajad Uus Roman. Need on standardfondid, mida tunneb ära iga süsteem. Vastasel juhul võib teie tekst teises arvutis muutuda ahmideks.

Suurus- asendaja soovitud väärtus parameetris "fondi suurus: 14 pikslit;" . Suurendame fondi suurust 14 pikslilt 16-le.

Värv- värvi väärtus on määratud HEX parameetris "värv: #323232;" .

Värviväärtuse saate valida võrguteenustest, näiteks siit - get-color.ru.

Muudame teksti halliks - #4F4F4F.

Reavahe- sarnane fondi suurusele, määratud parameetriga "rea kõrgus: 18 pikslit;"

Fondi formaat- määratud siltidega tekst - rasv, tekst - kaldkiri ja tekst - alakriips.

Tasub teada, et Sublime lisab sildi avamisel automaatselt käsu sildi sulgemiseks. Ole ettevaatlik.

Toome oma teksti esile kaldkirjas.

Reavahetus- määratud sildi järgi
. Lihtsalt sisestage see silt soovitud tekstiosa ette.

Asendame teksti, salvestame, värskendame ja ongi valmis.

Lingi lisamine teksti

target=”_blank” - see käsk on lingi avamine uuel vahelehel. Kui soovite, et link avaneks praegusel vahekaardil, ärge lihtsalt kirjutage seda.

tekst-kaunistus: allajoonimine; - käsk brauserile lingi allajoonimiseks. Kui allakriipsutamine pole vajalik, tuleb kirjutada tekst-kaunistus: puudub;

Igal juhul kirjuta see käsk kindlasti kirja, muidu otsustab iga brauser erinevalt, kas alla joonida või mitte.

See on ka nõutav käsk, vastasel juhul kuvavad brauserid värvi vastavalt oma äranägemisele.

Tähelepanu! Mõned meilikliendid on targemad, kui pealtnäha paistab ja kui nad näevad tekstis linki, näiteks “Võite minna kodulehele edasi õppima...”, siis saavad nad selle ise ja omal moel esile tõsta.

Lingi lisamine/asendamine pildile

Kirjas olevaid pilte ei salvestata manustena, vaid need asuvad serverites. Sellest lähtuvalt on koodis pilt selle link ja selle lisamise käsk sarnaneb ülalkirjeldatule.

www.example.com” target=”_blank” style=”text-decoration: allakriipsutamine; ”>

värv:#234322; - värvi seadmise käsk ei ole pildi jaoks asjakohane.

border=”0” - pildi kadreerimise käsk. Väärtus 0 eemaldab pildi ümbert valge äärise, suuremad väärtused muudavad selle vastava paksuseks pikslites.

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

Brauserist on lihtsam leida pildiga koodiosa. Selleks paremklõpsake vajalikul pildil ja valige “Kuva kood” (need on selle valiku nimed Google Chrome'is; nimi ja tee selleni võivad teistes brauserites erineda). Brauser tõstab automaatselt esile vajaliku osa, kopeerib koodi ja kleepib selle Sublime'i otsingusse.

Pildi asendamisel olge ettevaatlik - kui uue pildi suurus erineb eelmise suurusest, peate muutma kõiki parameetreid laius Ja kõrgus praegustele.

Järelsõna

Rääkisime teile kõige valutumatest e-posti koodi redigeerimise võimalustest. Kui teil on vaja teha olulisemaid muudatusi, soovitame tungivalt usaldada selline ülesanne paigutusspetsialistile või luua vähemalt koodi koopia enne redigeerimist.