Sunteți pe pagina 1din 11

2015

Academia de Studii EconomiceFacultatea de Marketing


Asist Univ Dr: Mihaela Tu

SEMINAR 3- CYBERMARKETING

Seminar 3- Cybermarketing

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

Seminar 3- Cybermarketing

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

Seminar 3- Cybermarketing

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 <n>.
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

Seminar 3- Cybermarketing

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:
<div id="container">
<!-- Begin Masthead -->
<div id="masthead">
<img alt="" height="66" src="images/logo.gif" width="150" /><p>office (000)
000-0000<br />
fax (000) 000-0000<br />
toll-free (000) 000-0000</p>
</div>
Secventa de cod dupa modificarea LOGOului si a datelor de contact:
<div id="masthead">
<img alt="" height="63" src="images/logo_uberVU.jpg" width="187" /><p>
<span>UBERVU, INC.<br />
1 Broadway, 14th Floor, Cambridge, MA 02142</span></p>
</div>

Seminar 3- Cybermarketing

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:

Seminar 3- Cybermarketing

Codul HTML inainte de a face modificarile:


<div id="sidebar">
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="about/default.html">About</a></li>
<li><a href="news/default.html">News</a></li>
<li><a href="products/default.html">Products</a></li>
<li><a href="services/default.html">Services</a></li>
<li><a href="calendar/default.html">Calendar</a></li>
<li><a href="contact/default.html">Contact</a></li>
</ul>
</div>

Codul HTML dupa realizarea modificarilor:

<div id="sidebar">
<ul>
<li><a href="default.html">Acasa</a></li>
<li><a href="about/default.html">Despre</a></li>
<li><a href="products/default.html">Produse</a></li>
<li><a href="calendar/default.html">Calendar</a></li>
<li><a href="contact/default.html">Contact</a></li>
</ul>
7

Seminar 3- Cybermarketing

</div>

Modificarea footerului:

Cod HTML:

<div id="footer">
<p><a href="default.html">Home</a> | <a href="about/default.html">About</a>
| <a href="calendar/default.html">Calendar</a> |
<a href="contact/default.html">Contact</a> |
<a href="employees/default.html">Employees</a> |
<a href="employment/default.html">Employment</a> |
<a href="faq/default.html">FAQ</a> |
<a href="information_links/default.html">Information Links</a><br />
<a href="news/default.html">News</a> |
<a href="photo_gallery/default.html">Photo Gallery</a> |
<a href="press/default.html">Press</a> | <a href="products/default.html">
Products</a> | <a href="promotions/default.html">Promotions</a> |
<a href="services/default.html">Services</a> |
<a href="site_map/default.html">Site Map</a><br />
Copyright &copy; 2005 Company Name. All Rights Reserved.</p>
</div>
8

Seminar 3- Cybermarketing

Dupa:
<div id="footer">
<p><a href="default.html">A<span class="auto-style1">casa</span></a> | <a
href="about/default.html">
D<span class="auto-style1">espre</span></a>
| <a href="calendar/default.html">Calendar</a> |
<a href="products/default.html">
Produ<span class="auto-style1">se</span></a> |
<a href="site_map/default.html">Site Map</a><br />
Copyright &copy; 2015
Seminar Cybermarketing. All Rights Reserved.</p>
</div>

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 :
<link href="styles/style1.css" media="screen" rel="stylesheet" title="CSS" type="text/css" />
Alte templateuri din Expression Web 4 folosesc alte fisiere de tip .css: style3, style 3, style4. Toate aceste
fisiere se gasesc in folderul Styles.

Seminar 3- Cybermarketing

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:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
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);
</script>
10

Seminar 3- Cybermarketing

8. Inserarea unui film


Inserarea unui filmulet de pe youtube intr-o pagina se face cu urmatoarea linie in HTML:
<embed width="420" height="315" src="http://www.youtube.com/v/XGSy3_Czz8k">
Alte modalitati de a insera un filmulet se pot gasi pe:
http://www.w3schools.com/html/html_youtube.asp

11