C S S T ab D esigner

C S S T ab D esigner é um softw are desenvolvido a fim de auxiliar os usuários

na criação de m enus, listas e abas para sites em C S S . P ara isso, o program a
conta com um a estrutura que perm ite ao usuário a definição dos itens necessários
para os m enus ou cabeçalhos. A lém do design e estrutura, o aplicativo gera os
códigos para program ação conform e a definição feita pelo usuário.

C S S (sigla em inglês para C ascading S tyle S heet) é um m ecanism o para

adicionar estilos, fontes e cores aos docum entos da internet. Isso porque a
linguagem H T M L destina-se a estruturar e m arcar o conteúdo das páginas de
sites, com o cabeçalhos, links, botões, form ulários, im agens, entre outros
elem entos. Já o C S S é responsável pela parte visual do docum ento, com o a
definição de cores, posicionam ento na tela, estilos de linhas, bordas e tudo o que
for relacionado à apresentação.
O objetivo do C S S T ab D esigner é tornar a elaboração de estilos às
páginas um processo m ais rápido e sim ples. P or isso, o softw are traz diversos
m odelos de m enus em lista e abas, com diversas fontes e m uitas cores. C abe ao
usuário definir os itens que farão parte deste m enu, escolher o m odelo e copiar o
código para program ação.

C o m o u tilizar

A pós fazer a instalação do aplicativo e executar o program a pela prim eira

vez, você verá a existência de alguns itens clássicos, os quais costum am estar
presentes na m aioria dos m enus de sites da internet, com o P ágina P rincipal,
P rodutos, S erviços, N ovidades, entre outros. C abe a você configurar este
conteúdo de acordo com o trabalho que pretende elaborar ou construir um próprio.

N o m enu esquerdo do aplicativo encontra-se a relação dos itens. P ara

adicionar um a lista de novos itens, clique no botão com o desenho de dois sinais
de m ais. D igite o nom e do item que fará parte do m enu e inclua ao finaldo term o a
expressão = ind ex.p hp. P or exem plo, se quiser incluir o item P rodutos ao m enu,
digite P rod utos=ind ex.p hp . O s itens devem ser inseridos em lista, um em baixo do
outro.
 C aso queira adicionar item por item ou apenas um só item , clique no botão
com o desenho de um sinal de m ais. F eito isso, um a nova janela se abrirá para
que você digite o nom e do item e a U R L. P or exem plo, S up orte e S up orte.htm l.

S e você quiser editar os dados de algum item , dê um duplo clique com o

botão esquerdo do m ouse sobre o nom e do item ou selecione o item ao dar um
clique sobre ele e vá em “E d it S elected Item ”, representado por um a folha de
papel e um lápis. U m a nova janela se abrirá para que você faça as alterações.
A pós realizá-las, clique em O K .
 Já para excluir algum item da sua lista, dê um clique sobre ele e aperte o
botão D elete em seu teclado ou dê um clique sobre o X em verm elho.

F eito isso, um a nova janela se abrirá e perguntará se você tem certeza de

que deseja apagar o item . S e a resposta for afirm ativa, clique em S im para que o
item seja rem ovido.

A s setas para baixo e para cim a servem para você alterar a seqüência dos
itens e posicioná-los na página com o desejar.
 A o lado do m enu está um a tabela de estilos com m uitos m odelos com cores
diversas. S ão m ais de 50 m odelos para você selecionar. É só escolher um e clicar
sobre ele. O resultado pode ser visto do lado direito da interface, na página de
visualização.

N o rodapé da página de visualização do program a, você pode visualizar o

código gerado e que deve ser inserido na program ação.
 A inda na página de visualização, no canto superior esquerdo há um m enu.
A o clicar em “P review ”, você pode selecionar um navegador e visualizar com o sua
criação ficará na internet. A s opções são: Internet E xplorer, N etscape, O pera,
F irefox, K onqueror, S afari e C am ino. A inda neste m enu, há um botão para
atualizar a página de visualização e outro para ajuste do tam anho da letra.
 P or fim , é possível gerar o H T M L, as im agens e salvá-las em seu
com putador ao clicar no ícone “G enerate H TM L & Im ages”.