Seminar3-Expression Web 4

2015

Academia de Studii Economice- Facultatea de Marketing Asist Univ Dr: Mihaela Tu

SEMINAR 3- CYBERMARKETING

Seminar 3- Cybermarketing

2

Cuprins

1. Instalarea si deschiderea Expression Web 4 ......................................................................................... 3

2. Selectarea unui template ...................................................................................................................... 3

3. Introducere LOGO ................................................................................................................................. 5

4. Modificarea Meniului ............................................................................................................................ 6

5. Modificarea altor elemente de formatare ............................................................................................ 9

6. Inserarea unui colaj intr-o pagina ....................................................................................................... 10

7. Inserarea unei harti intr-o pagina ....................................................................................................... 10

8. Inserarea unui film .............................................................................................................................. 11


3

1. Instalarea si deschiderea Expression Web 4

Expression Web 4 se downloadeaz i instaleaz de aici.

Lansarea / deschiderea Expression Web 4 se face din butonul Start (sistem de operare Windows)-> All

Programs-> Microsoft Expression-> Expression Web 4.

Pentru a construi un nou site se face click pe a doua pictograma de sub meniul principal sau combinaia

de taste Ctrl+Shift+N:

Figura 1- Creare site nou

2. Selectarea unui template

Selectarea unui Template se face prin alegerea opiunii Templates din fereastra de dialog care se

deschide n momentul n care se creaz un nou site.

n Expression Web 4 exist 6 templateuri de tip Organization, 7 de tip Personal i 6 de tip Small Business.

Figura 2- Selectarea unui template


4

Salvarea noului site se face automat in My Documents\My Web Sites. Calea unde se salveaz siteul

poate fi schimbat apsnd butonul Browse.

Numele siteului poate fi ales de utilizator. In mod automat, daca utilizatorul nu stabilete alt nume,

denumirea siteului va fi mysite .

Siteurile contin mai multe pagini web carora le corespund cate un folder denumit corespunzator. Pentru

a vedea o anumita pagina se deschide fisierul default.html din folderul corespunzator.

Meniul siteului si alte elemente commune tuturor paginilor din site (exemplu: logo, date contact,

elementele din footerul paginii) se pot modifica din pagina master.dwt.

Ca exemplu pentru seminar s-a folosit template-ul Small Business 4.

Modul de vizualizare a fost setat din meniul View->Page-> Split si permite vizualizarea paginilor web in

format HTML (partea de sus a ecranului) si in format Design (partea de jos a ecranului).

Figura 3- Modul de vizualizare Split


5

3. Introducere LOGO

Introducerea LOGOului pe fiecare pagina web a siteului se face prin dublu clic pe spatiul dedicat LOGO.

O noua fereastra de dialog Picture Properties se va deschide si in tabul General, in dreptul Picture:,

prin apasare butonului Browse se poate selecta imaginea pentru logo. Imaginea pentru logo poate fi

salvata in fisierul Images.

Datele de contact din headerul siteului pt fi modicificate manual.

Secventa de cod HTML inainte de modificarile LOGOului si a datelor de contact este:

office (000)

000-0000

fax (000) 000-0000

toll-free (000) 000-0000

Secventa de cod dupa modificarea LOGOului si a datelor de contact:

UBERVU, INC.

1 Broadway, 14th Floor, Cambridge, MA 02142


6

4. Modificarea Meniului

Modificarea Meniului de pe paginilie siteului se face in pagina Master.dwt fie direct in modul Design, fie

direct in Cod.

Meniul din zona Design inainte de a face modificari:

Figura 4- Meniul din zona Design inainte de a face modificari

Meniul din zona Design dupa realizarea modificarilor:

Figura 5- Meniul din zona Design dupa realizarea modificarilor:


7

Codul HTML inainte de a face modificarile:

Home

About

News

Products

Services

Calendar

Contact

Codul HTML dupa realizarea modificarilor:

Acasa

Despre

Produse

Calendar

Contact


9

Dupa:

Acasa |

Despre

| Calendar |

Produse |

Site Map

Copyright 2015

Seminar Cybermarketing. All Rights Reserved.

5. Modificarea altor elemente de formatare

Modificarea altor elemente de formatare a paginii se pot face in fisierul style1.css car este referentiat in

Master.dwt :

Alte templateuri din Expression Web 4 folosesc alte fisiere de tip .css: style3, style 3, style4. Toate aceste

fisiere se gasesc in folderul Styles.


10

6. Inserarea unui colaj intr-o pagina

Un colaj alcatuit din mai multe fotografii se poate realiza accesand linkul:

http://gifmaker.me/

Rezultatul se salveaza in folderul Images si poate fi inserat in pagina html cu drag and drop in modul

Design.

7. Inserarea unei harti intr-o pagina

O harta cu pin se poate insera prin rumatorul cod:

function initialize() {

var myLatlng = new google.maps.LatLng(44.432552,26.092981);

var mapOptions = {

zoom: 6,

center: myLatlng

}

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var marker = new google.maps.Marker({

position: myLatlng,

map: map,

title: 'Titlu'

});

}

google.maps.event.addDomListener(window, 'load', initialize);


11

8. Inserarea unui film

Inserarea unui filmulet de pe youtube intr-o pagina se face cu urmatoarea linie in HTML:

Alte modalitati de a insera un filmulet se pot gasi pe:

http://www.w3schools.com/html/html_youtube.asp

Seminar3-Expression Web 4

Documents

Transcript of Seminar3-Expression Web 4