Trabalhar com Bootstrap no Dreamweaver

Name: Trabalhar com Bootstrap no Dreamweaver
Author: Patti Scully-Lane

Entenderes HTML e CSS não é um requisito para usares o Dreamweaver. No entanto, é recomendado. Neste módulo, vais familiarizar-te com a estrutura de tags de…

Preview the first lesson free — get full access to all 5 lessons.

Solicitar uma demonstração Entrar

Curso: sob demanda

Nesta lição, você aprenderá como criar uma nova página em branco usando o framework bootstrap. Agora, a primeira coisa que temos que fazer antes de começarmos a usar bootstrap é criar um site. Então vamos até o menu do site, vamos criar um novo site e vamos clicar nesta pasta procurar. E eu salvei os arquivos de aula para este módulo na minha área de trabalho. E então eu vou entrar e eu vou selecionar o módulo dois lição um e essa será a minha pasta. E para o nome do nosso site, Vou digitar trabalhando com bootstrap e salvar. Então, quando olhamos para o nosso painel de arquivos podemos ver que existe uma pasta de imagens, uma pasta de mídia e uma pasta diversa. Ainda não há arquivos HTML em nossa pasta. Portanto, é importante entender quais pastas temos porque em um minuto, quando criamos nossa página usando Bootstrap, Dream Weaver vai criar automaticamente mais algumas pastas para nós. Então vamos para o menu de arquivo para novo e quando criamos nosso novo documento HTML, os documentos HTML que estamos criando do zero tem usado a estrutura de nenhum mas desta vez vamos usar o framework Bootstrap. Então, o que exatamente é Bootstrap? Bem, Bootstrap é o que chamamos de framework. O que é isso, é um grupo de componentes pré-construídos que você pode usar para criar as páginas com mais facilidade do seu site. Agora, todos esses componentes são construídos, a nova marcação HTML cinco, e eles usam CSS três, o mais recente em folhas de estilo em cascata. Agora não só o Bootstrap tem HTML cinco e CSS três mas também utiliza JavaScript. E assim, quando você cria sua primeira página com base neste framework Bootstrap, Dream Weaver vai criar pastas adicionais para manter nosso CSS, bem como nosso JavaScript. Então vamos clicar no botão criar e quando o fizermos, você poderá ver em nosso painel de arquivos temos uma pasta CSS e uma pasta JavaScript. E em nosso JavaScript temos três arquivos JavaScript diferentes, em nosso CSS, temos um arquivo CSS, e vamos até o menu de arquivos e vamos salvar este documento agora e vamos chamá-lo de index dot HTML e salvar. Eu quero falar um pouco sobre o arquivo relacionado então aqui no topo da nossa página, temos nosso código fonte e se clicarmos nesse botão de código na parte superior podemos ver que este é o código-fonte da nossa página. E atualmente, realmente não há nada aqui mas temos um comentário que diz que a cópia do corpo vai aqui. Mas temos nossos links configurados aqui, então temos esse link para o arquivo bootstrap, também temos um link para os três arquivos JavaScript. Então, em qualquer um dos componentes que usamos, alguns dos componentes interativos que temos, eles são baseados nessa tecnologia, esta tecnologia JavaScript então já está em nossa página. E se olharmos para o topo estes são todos os arquivos que podemos usar. E se você entende um pouco de HTML e CSS você pode entrar e personalizar esses arquivos. E dito isso, é uma boa ideia. Se você vai trabalhar bootstrap, é uma boa ideia ter uma base em HTML e CSS ser capaz de olhar para o código e fazer alterações para o código quando necessário. Com esses arquivos relacionados, Eu quero chamar sua atenção os dois bootstrap, são bootstrap 4.4 0.1. Esta é a tecnologia que saiu em 2019, portanto, não é a versão mais recente do bootstrap. Dream Weaver não funciona com a versão mais recente mas ainda é uma versão muito estável de bootstrap para começar. Agora, se formos para nossa guia de inserção temos na aba inserir, temos diferentes dropdowns e um desses dropdowns são componentes de bootstrap. A partir daqui, podemos adicionar muitos layouts predefinidos diferentes para nossa página e vamos aprender como fazer isso nas próximas lições. Mas, por enquanto, vamos colocar apenas um contêiner. E você notará, eu tenho a visualização ao vivo selecionado aqui em cima. Quando você trabalha em bootstrap, trabalhar em exibição ao vivo é realmente uma ideia melhor do que trabalhar na visualização de design. Certifique-se de que temos nosso cursor em nosso corpo. Aqui à esquerda, vamos clicar lá e vamos clicar neste contêiner. E agora dentro do nosso corpo, temos um recipiente e nesse recipiente é onde vamos colocar todos os outros componentes da nossa página. Então, vamos apenas para o menu de arquivo e salvá-lo e agora temos uma página com um contêiner nela pronto para colocarmos nosso conteúdo. Então, nesta lição, você aprendeu como criar uma página usando a estrutura de bootstrap no Adobe Dream Weaver.

Intermediário Fornecedor : Patti Scully-Lane 5 lições · 39m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Urdu, Chinese

Descrição do curso

Entenderes HTML e CSS não é um requisito para usares o Dreamweaver. No entanto, é recomendado. Neste módulo, vais familiarizar-te com a estrutura de tags de uma página HTML e como o Dreamweaver facilita o uso da visualização de código para aprenderes HTML ao criares páginas. Aprenderás e aplicarás as funções do Bootstrap Framework para adicionares facilmente novas páginas e inserires itens nelas.

Objectivos de aprendizagem:

O Que Você Vai Aprender

Reconhecer e usar a sintaxe HTML ao trabalhar na visualização de código do Dreamweaver
Criar uma nova página em branco usando o framework Bootstrap
Inserir navegação e apresentações de slides de fotos em uma página com Bootstrap
Inserir linhas e colunas em uma página usando Bootstrap
Criar uma página baseada em um método Bootstrap
Trabalhar com a visualização de código no Dreamweaver para aprender e editar HTML

Principais Conclusões

Não é necessário compreender HTML e CSS para usar o Dreamweaver, embora seja recomendado.
A visualização de código do Dreamweaver facilita o aprendizado de HTML ao criar páginas.
O framework Bootstrap permite adicionar facilmente novas páginas e inserir itens nelas.
O Bootstrap pode ser usado para inserir navegação, apresentações de slides de fotos, linhas e colunas em uma página.

Perguntas Frequentes

Preciso conhecer HTML e CSS antes de fazer este curso?

Não. Compreender HTML e CSS não é um requisito para usar o Dreamweaver, embora seja recomendado. O curso ajuda você a se familiarizar com a estrutura de tags de uma página HTML usando a visualização de código do Dreamweaver.

O que serei capaz de construir com Bootstrap neste curso?

Você aprenderá a criar uma nova página em branco com Bootstrap e inserir navegação, uma apresentação de slides de fotos e linhas e colunas em uma página, além de criar uma página baseada em um método Bootstrap.

Quais habilidades este curso abrange?

O curso abrange Adobe Dreamweaver, o framework Bootstrap, o Bootstrap Protocol e HTML scripting, e está relacionado à certificação Adobe Dreamweaver e Dreamweaver MX.

Para quem é este curso?

É adequado para alunos que desejam se familiarizar com a estrutura de tags de uma página HTML e aplicar as funções do framework Bootstrap no Dreamweaver para adicionar novas páginas e inserir itens nelas.