Criar um site sem conhecimento de HTML? Editores online para construir sites estão ganhando terreno, muitas vezes por causa dos belos modelos. Se você preferir não começar a partir de um design pronto, que muitas vezes termina em uma opção paga, o RocketCake é um programa de desktop com o qual você pode construir um belo site do nada.
O programa em inglês contém apenas quinze modelos (modelos) para inspiração. A ideia é que com o RocketCake você crie seu próprio site que pode facilmente atualizar mais tarde. RocketCake é um editor chamado WYSIWYG. Portanto, você não precisa digitar nenhum código HTML. Você monta seu próprio site colocando elementos na superfície de trabalho e, em seguida, carregando o caso. Os elementos incluem caixas de texto, botões, imagens, menus, apresentações de slides, filmes, clipes de áudio e muito mais. O que torna o RocketCake especial é que ele é um editor para construir os chamados sites responsivos. Esse site responsivo é compatível com dispositivos móveis, porque o layout se adapta à tela do dispositivo com o qual alguém visita o site.
Uma página da Web responsiva ainda terá uma aparência agradável, seja em um monitor grande ou em uma pequena tela de smartphone. Para isso, o site irá ajustar uma série de partes, como o tamanho da fonte, a disposição de determinados elementos e a forma como o menu é exibido na tela.
Baixe RocketCake aqui. Existe uma versão para Windows e outra para macOS. Neste workshop usamos a edição gratuita. Isso facilita a criação de um site responsivo que funcione sem problemas. Há também uma edição profissional do RocketCake, que custa 39 euros. A versão profissional permite criar um número ilimitado de sites. Também há suporte para CSS, com o qual você pode ajustar rapidamente os estilos de layout em todo o site. A versão 3.1 do RocketCake foi aprimorada para que seu site tenha uma classificação melhor no Google e em outros mecanismos de pesquisa. Além disso, a versão gratuita inclui alguns recursos que antes só existiam na edição paga.
Ambiente de trabalho e exposição
No topo da área de trabalho está a barra com botões para adicionar uma nova página, para visualizar com o Internet Explorer e para publicar o site na Internet. À direita você encontrará o conjunto de ferramentas com todos os elementos que você pode colocar em uma página da web. No canto superior esquerdo você vê a estrutura de todas as páginas do seu site.
Abaixo estão os Propriedades. Aqui você altera as propriedades de cada elemento selecionado. Suponha que você deseja adicionar uma imagem a uma página, então você seleciona o arquivo de imagem nas Propriedades e indica se a imagem deve ter cantos arredondados ou pontiagudos e assim por diante ...
Na parte inferior, você determina a largura da tela. Por padrão, esse é o Área de Trabalho-exibição. Através do pequeno menu suspenso no canto inferior esquerdo, você também pode trabalhar na tela de vários dispositivos móveis populares, como o iPhone, iPad, Samsung Galaxy, LG ... Se você não encontrar a largura desejada neste menu, você também pode selecionar Personalizado e usar um controle deslizante para especificar a largura a ser exibida na tela. Essa configuração de largura é importante para determinar os pontos de interrupção, que discutiremos mais tarde.
Cores e página inicial
Vamos começar com a página inicial. Neste exemplo, estamos criando o site de uma banda de rock ambiciosa. Em vez de começar com um modelo, escolha Página vazia. A seção Propriedades se adaptará a cada elemento selecionado. Por exemplo, clique no fundo da primeira página, então você pode acessar Cor de fundo selecione uma cor de fundo. Por padrão, há 000000, o código html para branco. Ao clicar na caixa com os três pontos, você abre o seletor de cores. Em Propriedades, você dá um título a esta página da web. Em breve aparecerá na parte superior da janela do navegador. Deixe o nome da página inicial em index.html. Um navegador sempre procura a página de índice para exibir como a página inicial.
Abaixo dele, você determina as cores dos quatro tipos de hiperlinks. Cor do link determina a cor dos links que ainda não foram visitados, LinkColorActive refere-se a links que alguém está visitando no momento, LinkColorHover é a cor de um link para o qual o ponteiro do mouse está apontando e LinkColorVisited refere-se a links que alguém já visitou.
Barra de navegação e imagem de introdução
Para colocar uma barra de navegação, selecione o item no conjunto de ferramentas menu de navegação e clique na área de trabalho. Nesta barra de navegação, você digita os itens de menu para os quais deseja criar páginas da web. Mantenha os nomes desses itens curtos. Em nosso exemplo, eles são The band, Who, Where, When, Why e Media. No topo estão os botões para formatar o texto desses itens de navegação. Se você clicar na própria barra de navegação, você ajustará a cor e a forma da barra nas Propriedades. É assim que você pode BackGroundFashion escolha por Cor, imagem, gradiente e Botão estilizado. Em Gradiente você determina os tons de cor da transição e em Botão estilizado a barra de menu obtém uma aparência esférica.
Também queremos adicionar um banner ou imagem de introdução. Para isso, você primeiro coloca o item Recipiente. Nas propriedades em ImageNameclique nos três pontos para selecionar a imagem que você preparou de antemão. Se for muito grande, o RocketCake pergunta se pode redimensionar a imagem. Tudo bem. O título 'Mad Dog' que você vê no banner no topo deste artigo, nós mesmos adicionamos à imagem com outro programa. Basicamente, você também pode enviar texto com o item Texto Flutuante coloque sobre uma imagem. Infelizmente, isso dá um resultado imprevisível em dispositivos móveis.
Quando estiver satisfeito, salve o arquivo de trabalho em algum lugar do disco rígido como um arquivo .rcd.
Colunas
Abaixo do banner você deseja fornecer a página inicial com conteúdo em uma, duas ou três colunas. Para fazer isso, escolha o item no conjunto de ferramentas Container com Colunas. RocketCake pergunta quantas colunas você deseja. O aplicativo também deseja saber a largura mínima de uma coluna. Aqui, optamos por duas colunas e a configuração padrão é 150. Isso significa que as colunas podem ser vistas perfeitamente uma ao lado da outra em uma tela ampla. Se uma coluna em uma tela pequena ficar menor que 150 pixels, ela não aparecerá mais ao lado, mas abaixo da coluna anterior.
Neste exemplo, definimos a coluna esquerda para MinWidth 500. 500 é o ponto de interrupção para a coluna da esquerda. Se a largura da tela ficar muito pequena, o visitante lerá o conteúdo da coluna direita abaixo da coluna esquerda. Além disso, definimos o banner para MaxWidth 1000.
Para tornar a coluna direita mais estreita do que a esquerda, primeiro clique na coluna esquerda. o Tamanho está lá por padrão 50%, carro. Por exemplo, mude isso para 70%, carro. Isso faz com que a segunda coluna flutue temporariamente abaixo da primeira. Você pode resolver isso clicando na segunda coluna e em Tamanho 30%, carro preenche. Isso lhe dará uma proporção de 70/30. Em seguida, você preenche as colunas com texto, que também cria como em um processador de texto. Nessa coluna, você também pode Títulos (xícaras). Os cabeçalhos 1, 2, 3 mantêm as xícaras com uma boa aparência.
Para adicionar uma imagem, coloque o cursor no texto e clique no conjunto de ferramentas em Imagem. Em seguida, navegue até o local onde a imagem está esperando. Clique no botão de vez em quando antevisão para ver seu trabalho em um navegador.
Se você clicar em tal coluna de texto, verá nas Propriedades que o preenchimento o padrão é definido como 10, 10, 10, 10. O Preenchimento é a distância do texto até a borda da coluna. O primeiro número é armazenado na parte superior, o segundo na parte inferior, o terceiro à direita e o quarto à esquerda. Se você quiser um pouco mais de preenchimento no lado direito de uma caixa de texto, deve definir o terceiro valor como 20, por exemplo.
Preenchimento é, portanto, a distância dentro de uma caixa, margem é a distância do lado de fora. Se você quiser mais espaço entre a parte inferior da foto e a parte superior do texto abaixo dela, altere a Margem de 0, 0, 0, 0 para, por exemplo, 0,10, 0, 0.
Páginas Adicionais
Agora que a página inicial está pronta, é claro que você desejará criar mais páginas para o seu projeto. Isso vai com o botão Adicionar Página. O programa pergunta se você deseja criar uma página completamente nova ou uma cópia de uma página da web já existente. Neste exemplo, usaremos o estilo da nossa página inicial: o fundo preto, a fonte, o tamanho da fonte, a largura do container ... Então vamos para a segunda opção. Em seguida, removemos o banner e alteramos o conteúdo do contêiner de texto.
Se você quiser um rodapé no final de cada página, adicione um rodapé lá também Recipiente ou Container com Colunas e digite, por exemplo, as informações de contato ou informações de direitos autorais. Caracteres especiais como o símbolo de copyright não podem ser inseridos diretamente no teclado. No RocketCake você escolhe esses caracteres especiais através do menu Inserir, inserir símbolo de texto.
Links
Claro que você deseja que os botões no menu de navegação apontem para as páginas corretas. Para fazer isso, primeiro selecione o botão no menu de navegação e depois clique no botão com a corrente. Ou você clica com o botão direito e escolhe Insira o hyperlink. Isso abre uma caixa de seleção onde você deve escolher entre um link para uma página da web externa, um endereço de e-mail, uma página deste projeto ou um arquivo específico. Selecione a opção Página no projeto. Em seguida, você verá uma lista de páginas da web criadas, nas quais seleciona a correta.
Abelha Alvo opte por abrir a página da web em uma nova janela do navegador ou na janela aberta do navegador. Esta última opção é comum. Se você segurar o botão esquerdo do mouse enquanto aponta para um botão do menu de navegação, você adiciona submenus que se referem a páginas da web existentes da mesma maneira.
páginas mestras
RocketCake também funciona com as chamadas páginas mestras. Se você estiver criando um site com muitas páginas, essa técnica irá acelerar significativamente a formatação. Uma página mestra é um modelo formatado que serve como modelo para outras páginas. Essa página mestra, portanto, não é uma página da web normal. Veja como criar um: crie uma nova página da web, coloque o menu suspenso, certifique-se de que o menu funcione como deveria e formate esta página sem nenhum conteúdo de texto real. Em seguida, você adiciona um. Do conjunto de ferramentas Espaço reservado para conteúdo acima. Sem esse elemento, a página mestra não funcionará. Dê a esta página especial um nome significativo, por exemplo masterpage.html. Em seguida, você cria uma ou mais páginas da web que você não fornece com um layout.
Você digita o texto, adiciona uma imagem se necessário e salva esta página. Nessas páginas com conteúdo, observe as Propriedades no campo na parte inferior Pagina principal. Lá você ativa a opção UseMasterPage. Se você marcou a caixa, uma nova caixa aparecerá, na qual você seleciona o nome da página-mestre pretendida. Você pode usar várias páginas mestras. No momento você não vê nada ainda, mas se você clicar no botão antevisão clique, você notará que o conteúdo desta página é perfeitamente publicado no Espaço Reservado para Conteúdo da página mestra selecionada.
Inserir mídia
Com o RocketCake você adiciona vídeos do YouTube selecionando o item no conjunto de ferramentas Vídeo do youtube selecionar. Em seguida, digite o endereço da web do vídeo nas Propriedades. Tão fácil quanto é adicionar uma galeria de fotos. Depois de você Galeria de imagens escolheram no conjunto de ferramentas, selecione as diferentes fotos nas caixas ImageFile1, ImageFile2 e assim por diante. Existem várias maneiras de aumentar as fotos na galeria. Por exemplo, você pode abri-los em uma nova janela, em uma janela pop-up, mas gostamos mais de uma imagem grande em uma camada separada.
Publicar
Você terminou? Em seguida, você pode publicar o site na Internet ou em um disco local. RocketCake é equipado com uma função ftp para colocar tudo de forma organizada no servidor na pasta que seu provedor disponibiliza. Digite o endereço ftp, nome de usuário e senha. Use a opção Salvar senha para salvar a senha. Ao publicar o site no disco rígido, você pode visitar a página inicial abrindo o arquivo index.html com o seu programa de Internet.
