Vamos
desenhar um website onde inicialmente iremos criar um modelo com os conteúdos
transversais a todas as páginas para de seguida desenvolvermos as restantes páginas.
O
website final ficará com este aspeto:
1
– CRIAR UM NOVO DOCUMENTO:
Vamos criar um novo site
através do menu Site | Novo site. Atribuímos
um nome ao site e escolhemos a pasta raiz da localização dos ficheiros.
Podemos alterar a Área de
trabalho no canto superior direito consoante o tipo de projeto que vamos
desenvolver.
Para criarmos o modelo do site acedemos ao menu Arquivo | Novo e escolhemos HTML | Bootstrap | Criar novo e retiramos a seleção de Incluir um layout previamente criado. No personalizar mantemos os valores por defeito.
2
– ADICIIONAR CONTENTOR COM NAVEGAÇÃO E RODAPÉ:
Vamos adicionar um contentor fluído
para agrupar todos os elementos. Para isso, acedemos ao painel Inserir | Componentes do Bootstrap |
Container-fluid.
O Container-fluid é apenas uma
div com uma classe. O DOM permite verificar toda a estrutura de forma vertical
que iremos utilizar como guia.
Vamos inserir o menu de
navegação através do painel Inserir |
Componentes do Bootstrap | Navbar | Basic Navbar
Escolhemos a opção Ninho para ser inserido dentro do Container.
3
– CRIAR UM MODELO:
A navegação e o rodapé são
áreas comuns em todas as páginas, o que irá ser diferente nas restantes páginas
encontra-se no centro do site. Para o centro do site ter conteúdos diferentes
nas várias páginas vamos criar uma região editável.
Posicionamos o cursor entre o
fim da etiqueta navegação e o início do footer e acedemos ao menu Inserir | Modelos | Região editável.
Podemos alterar o nome da região editável.
Podemos verificar no painel
Arquivos que foi criada a pasta Templates onde está guardado o modelo que
acabámos de criar.
4
– ESTILIZAR O MENU E RODAPÉ:
Para verificarmos no navegador
todas as alterações realizadas vai ser necessário criar uma página principal.
Acedemos ao menu Arquivo | Novo onde vamos utilizar a
opção Modelos do site onde
selecionamos o modelo que criámos anteriormente.
Salvamos esta página como índex.html
e agora já podemos aceder ao menu Arquivo
| Visualizar no navegador para escolher o navegador onde pretendemos
verificar o site.
Podemos verificar que
necessitamos de alterar o menu de navegação e o rodapé através de folhas de
estilo na página modelo. Vamos manter a forma original da CSS do bootstrap e
criar uma nova folha de estilo através do painel CSS Designer | Origens e pressionamos no sinal +.para criar um novo
arquivo CSS. Pressionamos no botão Procurar… atribuímos um nome e escolhemos a
pasta css.
Agora podemos estilizar o menu de navegação pré definido e o rodapé utilizando esta nova folha de estilos.
Escolhemos a folha estilos.css
e adicionamos um seletor no sinal + com o nome de .navbar .navbar-default. Nas
propriedades podemos alterar os cantos, o texto e o fundo como pretendermos.
Adicionamos um seletor footer, alteramos as propriedades como fizemos no menu.
Eliminamos os elementos que
não pretendemos utilizar no menu e alteramos o texto do rodapé
5
– ADICIONAR ELEMENTOS À PÁGINA INDEX:
Apagamos o texto que se
encontra dentro da região editável e acedemos ao painel Inserir | Componentes do Bootstrap | Carousel.
Depois do carousel vamos escolher HTML e inserir um Article, um cabeçalho H1 e um parágrafo.
Depois do parágrafo vamos adicionar
as imagens pequenas em baixo através do painel Inserir | Componentes do Bootstrap | Thumbnails.
Colocando a vista em Dinâmica, podemos duplicar este thumbnail e verificar o resultado. No DOM pressionamos em cima da classe col-md-4 com o botão CTRL e escolhemos Duplicar.
6
– ADICIONAR CONTEÚDO AO INDEX:
Vamos ao DOM carrousel e
alteramos o texto nas imagens pressionando 3 vezes em cima do texto H3.
Pressionamos em cima do H1 e alteramos o título. No código do parágrafo, apagamos o texto e escrevemos <p> Lorem70 </p> seguido de tabulação. Podemos verificar que foi adicionado texto automático ao parágrafo.
Para inserirmos as imagens, pressionamos na 1ª imagem no carousel e arrastamos a seta Apontar para arquivo nas propriedades para cima da imagem no painel Arquivos. Repetimos a operação nas restantes.
Vamos alterar as imagens das thumbnails com outro método. Pressionamos na sandwish no topo esquerdo da imagem e pressionamos na pasta da source para pesquisamos a imagem. Repetimos nas restantes imagens.
7
– ESTILIZAR O CONTEÚDO:
Vamos alinhar todos os
elementos de texto no centro. Pressionamos nos seletores + e escrevemos H1, H3, p. Escolhemos a opção
texto e nas propriedades alinhamos ao centro.
Temos espaço extra nas laterais do carousel. Vamos à vista Dinâmica e selecionamos a imagem. Pressionamos no sinal + depois do nome para criar uma classe e escrevemos .image-fill. Nas propriedades do CSS Designer escrevemos a largura para 100% e 0px para as margens e padding laterais
Sem comentários:
Enviar um comentário