Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Ficha Webdesign

    Enviado por

    Joca Vidal
    1 visualizações3 páginas

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    1 visualizações3 páginas

    Ficha Webdesign

    Enviado por

    Joca Vidal

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 3

    C0NP0SI0 BE PAuINAS WEB

    Ficha ue Exeicicios.
    !"#$%&'()*+, .&/&0(&, + 1%0+2%+0
    Cincias ua Comunicao, 0.Poito 2u1112

    Nesta ficha ue exeicicios faz-se a apiesentao ue algumas uas piincipais tcnicas usauas paia
    compoi pginas web usanuo Cascauing Style Sheets. Qualquei uma uestas tcnicas poue sei
    combinaua com outias tcnicas ue foima a conseguii composies mais complexas. Nesta ficha
    sei usauo o mesmo uocumento BTNL paia conseguii uifeientes composies.

    CRIAR N0v0 B0C0NENT0 BTNL
    Comece poi ciiai um novo uocumento BTNL com o nome composicao.html.
    0se o couigo seguinte como base paia este uocumento.

    <!DOCTYPE html>
    <html>

    <head>
    <title>Exerccio de Composio</title>
    </head>

    <body>

    <div class="base">

    <header>
    <h1>Comunicaes Digitais e Internet</h1>
    <p>Cincias da Comunicao, U.Porto</p>
    </header>

    <section class="bloco1">
    <h2>Bloco 1</h2>
    </section>

    <section class="bloco2">
    <h2>Bloco 2</h2>
    <img src="http://placekitten.com/100/75" width="100" height="75">
    <p>Texto, texto, texto e texto do bloco 2. Mais texto, texto, texto,
    texto e texto do bloco 2.</p>
    <p>Mais algum texto encaixado no bloco 2.</p>
    </section>

    <section class="bloco3">
    <h2>Bloco 3</h2>
    </section>

    </div> <!-- Encerra o div da classe base iniciado antes. -->
    </body>
    </html>
    F0RNATA0ES uERAIS
    (3 Ciie um novo uocumento em bianco num euitoi ue texto simples e giave este uocumento
    com o nome composicao.css na mesma pasta onue se encontia o uocumento
    composicao.html.
    43 Associe o uocumento BTNL composicao.html ao uocumento composicao.css. Paia tal,
    auicione o elemento link (com os atiibutos coiietos) ao elemento heau no uocumento
    composicao.html.
    '3 Alteie o tipo ue letia uo uocumento paia ueoigia com tamanho 2upx.
    53 Elimine as maigens uos titulos h1 e h2.
    +3 Alteie o espaamento entie linhas uos paigiafos paia 1.Sem.
    63 Alteie a coi ue funuo (backgiounu-coloi) uos piincipais elementos ua seguinte foima: o uiv
    ua classe "base" ueve tei a coi uefiniua pelo nmeio hexauecimal eeeeee; a section ua classe
    "bloco1" ueve tei a coi oiange; a section ua classe "bloco2" ueve tei a coi gieen; e a section
    ua classe "blocoS" ueve tei a coi ieu.

    CENTRAR PAuINA NA B0RIZ0NTAL
    Paia centiai uma pgina segunuo o eixo hoiizontal, necessiio uefinii um elemento a englobai
    touo o conteuo. Neste uocumento BTNL, esse elemento j existe e uefiniuo com o uiv ua classe
    "base". 0bseivai, no couigo fonte BTNL, como est uefiniuo o elemento uiv.
    (3 Paia centiai esta pgina basta alteiai uuas piopiieuaues uo elemento uiv ua classe "base".
    Em piimeiio lugai necessiio uefinii uma laiguia (wiuth). Neste caso uefine-se a laiguia
    ue 96upx. A segunua alteiao coiiesponue alteiao ua piopiieuaue maigin, que ueve sei
    uefiniua com o valoi auto. 0btm-se assim a seguinte iegia.
    div.base {
    width: 960px;
    margin: auto;
    }

    0RuANIZA0 EN B0AS C0L0NAS
    0 uso ue uuas colunas habitual em pginas web. Tipicamente uma uas colunas usaua paia um
    menu lateial e a outia coluna usaua paia o conteuo piincipal. Bastam tis alteiaes paia
    uefinii uma estiutuia baseaua em uuas colunas.
    (3 Nouifique a laiguia ua section ua classe "bloco1" paia 2uupx.
    43 Alteie o valoi ua piopiieuaue float ua section ua classe "bloco1" paia left.
    '3 Befina uma maigem esqueiua ue 2uupx paia a section ua classe "bloco2".
    Paia mouificai a laiguia uas colunas, basta alteiai as uuas ocoiincias uo valoi 2uupx.
    Expeiimente com outios valoies e veja os iesultauos. Expeiimente usai o valoi ue Su%.

    0RuANIZA0 EN TRS C0L0NAS
    Neste ponto apiesentam-se as alteiaes necessiias paia obtei uma composio baseaua em
    tis colunas.
    (3 Remova a maigem esqueiua ue 2uupx ua section ua classe "bloco2".
    43 Nouifique a laiguia ua section ua classe "base2" paia Suupx.
    '3 Alteie o valoi ua piopiieuaue float ua section ua classe "base2" paia left.
    53 Befina uma maigem esqueiua ue 7uupx paia a section ua classe "blocoS".

    PR0PRIEBABE FL0AT
    A piopiieuaue float peimite ietiiai um elemento uo fluxo noimal, fazenuo com que o conteuo
    seguinte seja apiesentauo esqueiua ou uiieita ueste elemento. Ciie uma nova iegia paia as
    imagens uentio ua section ua classe "bloco2" que uefina uma maigem ue 1upx e a piopiieuaue
    float como left.

    INTEuRA0 BE NEN0S
    Alteie os ficheiios BTNL e CSS ue foima a integiai uentio ua section "bloco1" um menu veitical
    tal como foi uefiniuo na ficha ficha-css4.puf.

    Paia teiminai, iemova as alteiaes feitas nas coies ue funuo uos elementos uiv e section.

    .

    Você também pode gostar