Oktatóanyag: Vigye át minimalista webdizájnját a Photoshopból a HTML-be, 2. rész

Az utolsó bejegyzésemben, "Bemutató: Vigye el a minimalista webdizájnot a Photoshopból a HTML-be", elkezdtük a PSD fájl felosztásának munkáját, háttérképeket készítettünk a HTML oldalra, majd elindítottuk az alap HTML kódunkat (index.html) és néhányat stílusok a különböző szakaszok létrehozásához (stílusok.css). Kezdeti stílusaink meghatározták a fő, a konténer, a fejléc, a bal oldali oldalsáv oszlopát és a jobb oldali oldalsáv oszlopot, amely a kép funkciójának tartalmi szakaszát és két funkciócikkből áll. A letöltés tartalmazza az ebben a demonstrációban felhasznált összes fájlt.

Stílusok hozzáadása és a HTML felépítése

Az előző részben otthagyva, ahol további stílusokat adunk hozzá a fennmaradó képekhez, hozzáadjuk a tartalmi szöveget és összekapcsoljuk a navigációs részt, a kiemelt cikk szakaszának címét és a funkciót. Az A. ábra bemutatja, hogy az index.html fájl hogyan néz ki ezen a ponton, ahogy a Chrome 17.0.9-ben jeleníti meg:

A ábra

Kezdjük azzal, hogy hozzáadjuk a fejléc képet a fejléc bal felső részéhez. A kép megtekintésének lehetővé tétele érdekében több stílusstílust adunk hozzá a stílus.css fájlhoz, és szöveges tartalmat adunk az index.html fájlhoz is. Most már megőriztem a szilárd, 1 képpontos piros szegélyt, de az oktatóprogram áttekintésekor ez eltávolításra kerül. A headername.gif fájlt háttérképként, URL-ként nevezzük, a magasságot 100 képpontra állítják be, a margó felső részét 50 képpontra állítják be, a betűkészlet-családot, a méretet és a színt Tahoma, 14 képpont és # 4b6262 értékre állítják., majd egy 18px-os felső betét és 15px-es bal oldali párnázat kerekíti a stíluskód-fájl kiegészítéseit, amely az alább látható:

 Header stílusok: 
 #fejléc { 
 szegély: 1 képpont szilárd piros; 
 background-image: url (images / headername.gif); 
 background-repeat: no-repeat; 
 magasság: 100px; 
 margin-top: 50px; 
 betűtípus-család: Tahoma, Genf, sans-serif; 
 font-size: 14px; 
 font-weight: normal; 
 color: # 4b6262; 
 padding-top: 18px; 
 padding-left: 15px; 
 } 
 Az index.html fájl fejlécéhez hozzáadott HTML kód: 

Az alcím szlogenje vagy fogási mondata

 A B. ábra a fenti frissítéseket mutatja be a Chrome 17.0.9 verziójában: 

B. ábra

Ezután létrehozjuk a keresősávot és elküldjük a gombot a fejléc utolsó részéhez. Mielőtt elkezdenénk a kód használatát, el kell ragadnunk az elküldés gombját, amelyet az eredeti PSD fájlban készítettünk (lásd letöltés). Az oktatóprogram első szegmensében alkalmazott eljárásokkal megegyezően megnyitjuk a PSD fájlt a Photoshopban, és a gombrétegeket az egyetlen látható rétegként elvágjuk, kivágjuk, hogy illeszkedjenek a nyílhoz és a gradienshez, méretezzük körülbelül 50x35 pixelre, majd mentsük el. webre kész gifként, és nevezze el search_button.gif-re, mentve a webes képek könyvtárába:

C. ábra

A keresősáv kódja számos CSS3 kiegészítést tartalmaz a színátmenetekre, a szegély sugarara, a doboz árnyékára és a hátterekre; A stílus.css fájl frissítései az alábbiak szerint jelennek meg:

 / * Keress formai stílusokat * / 
 #form { 
 margin-left: 700 képpont; 
 } 
 .keresés { 
 kijelző: inline-block; 
 zoom: 1; / * kijelző: inline-block az IE7-hez * / 
 * kijelző: inline; 
 szegély: szilárd 1px # d2d2d2; 
 párnázat: 1px 1px; 
 -webkit-border-sugar: 7px; 
 -moz-border-sugar: 7px; 
 határ-sugár: 7 képpont; 
 -webkit-box-shadow: 0 1px 0px rgba (0, 0, 0, .1); 
 -moz-box-shadow: 0 1px 0px rgba (0, 0, 0, .1); 
 box-shadow: 0 1px 0px rgba (0, 0, 0, .1); 
 háttér: # b9c7c7; 
 háttér: -webkit-gradiens (lineáris, bal felső, bal alsó, (# b9c7c7) -től (#ededed) -ig; 
 háttér: -moz-lineáris-gradiens (felső, # b9c7c7, #ededed); 
 szűrő: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# b9c7c7', endColorstr = '# ededed'); / * ie7 * / 
 -ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# b9c7c7', endColorstr = '# ededed'); / * ie8 * / 
 } 
 .search input { 
 betűtípus-család: Tahoma, Genf, sans-serif; 
 font-size: 22px; 
 color: # e0e9e9; 
 } 
 .search .field { 
 háttér: # b9c7c7; 
 párnázás: 0px 2px 3px 12px; 
 szélesség: 190 képpont; 
 szegély: szilárd 1px #bcbbbb; 
 vázlat: nincs; 
 -webkit-border-sugar: 7px; 
 -moz-határ-sugár: 7p; 
 határ-sugár: 7 képpont; 
 -moz-box-shadow: beillesztés 0 1px 2px rgba (0, 0, 0, .2); 
 -webkit-box-shadow: beillesztés 0 1px 2px rgba (0, 0, 0, .2); 
 box-shadow: beillesztés 0 1x 2xx rgba (0, 0, 0, .2); 
 } 
 .keresés .gomb { 
 margin-bottom: -10px; 
 } 

És a HTML szakasz és a kód hozzáadódik a fejléc szakaszhoz közvetlenül a

alcím az index.html fájlban az alább látható módon:

 A D ábra a kapott fejléc részt mutatja a Chrome 17.0.9-ben megjelenített módon: 

D. ábra

Az ezen oktatóanyag részét képező keresési funkcionalitás csak demonstrációs célokat szolgál, és valójában nem működő keresés. (A kereshető tartalmi eredményekhez adatbázis-háttérkapcsolatot kell megvalósítani.)

Ezután hozzáadjuk a bal oldali navigációs oldalsáv stílusát és HTML-jét a "Névjegy", "Blog", "Termékek", "Szolgáltatások" és "Kapcsolat" szöveges tartalommal. Minden hiperhivatkozás "dummy" oldalakra mutat, hogy ez az oktatóprogram folyamatosan mozogjon; Ha azonban linkelni szeretne a tényleges aloldalakhoz, csak annyit kell tennie, hogy sablonként használja a végső index.html fájlt, és nevezze át őket, ha szükséges a fennmaradó oldalakhoz. Először a navigáció HTML-jét rendezetlen listába állítja, és ez az egyetlen kód, amelyet az alább látható módon a bal oldali oldalsávba adunk:





  • A CSS-stílus hozzáadódik a bal oldali oldalsávhoz a rögzítéshez és a tételekhez, és egy módosítással a -35px margóhoz igazítva a margóhoz.

     #left_sidebar { 
     margin-top: 10px; 
     margin-left: -35px; 
     balra lebeg; 
     top: 0; 
     balra: 0; 
     szélesség: 200px; 
     min-magasság: 750px; 
     overflow: auto; 
     padding-left: 5px; 
     padding-right: 5px; 
     } 
     #left_sidebar a, li { 
     betűtípus-család: Tahoma, Genf, sans-serif; 
     font-size: 22px; 
     font-style: normal; 
     font-weight: 600; 
     color: # 4b6262; 
     text-decoration: none; 
     list-style: none; 
     } 
    Az E. ábra bemutatja a navigációs szakasz frissítéseit, ahogy a Chrome 17.0.9 jeleníti meg:

    E ábra

    Ezután hozzáadjuk a kiemelt tartalomterületek stílusát, amelyeket a jobb oldali oszlop szakaszában és közvetlenül a szolgáltatás képe alatt osztunk meg a bal és a jobb alrészre. A jobb oldali oszlop stílusának kiegészítései tartalmaznak betűtípust és néhány CSS3 szöveges árnyékhatást a szolgáltatás címeihez, valamint egy külön betűtípust a szolgáltatáscikkhez, a style.css fájlhoz hozzáadott további stílusok az alábbiakban jelennek meg:

     #right_column .feature_title { 
     betűtípus-család: Tahoma, Genf, sans-serif; 
     font-size: 22px; 
     font-weight: 500; 
     color: # 1f2626; 
     margin-top: -5px; 
     text-shadow: 2px 1px 2px # 656e6e; 
     szűrő: árnyék (árnyék = # 656e6e, offx = 2, offy = 1); 
     } 
     #right_column .feature_article { 
     betűtípus-család: Verdana, Genf, sans-serif; 
     font-size: 14; 
     font-weight: normal; 
     } 

    Az index.html fájlhoz hozzáadott HTML kód az alábbiak szerint jelenik meg:

    Kiemelt tartalom 1. címe

    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ususid tempor incididunt ut labor and dolore magna aliqua. Adjon minimális veniam, quis nostrud gyakorlat ullamco laboris nisi ut aliquip ex ea commodo következményei. velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in the culpa qui officia érdemes mindent megtenni az anim id est laborum ".

    Kiemelt tartalom 2. címe

    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ususid tempor incididunt ut labor and dolore magna aliqua. Adjon minimális veniam, quis nostrud gyakorlat ullamco laboris nisi ut aliquip ex ea commodo következményei. velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia érdemes mindent megtenni az anim id est laborum ".

     Az F ábra az eszközcikk szakaszaival kapott eredményt mutatja a Chrome 17.0.9-ben: 

    F ábra

    A G ábra a weblapot jelenlegi formájában jeleníti meg, a legfrissebb hozzáadott HTML és CSS stílusokkal, valamint a fejléc és a tároló szakaszokból eltávolított piros szegéllyel, de a lábléc szakasz piros szegélye továbbra is megkülönbözteti a konvertált szakaszoktól.

    G ábra

    A Minimalist PSD to HTML bemutató sorozat harmadik és utolsó szegmense a lábléc szakasz hozzáadásával zárul, beleértve egy CSS3 stílusú gradiens létrehozását.

    © Copyright 2020 | mobilegn.com