Transcript
Disciplina: Disciplina: Design para WebDesign para WebCARGA HORÁRIA:CARGA HORÁRIA: 90 horas90 horas
Faculdade de Educação de Bacabal
Profº: Márcio Fabiano O. de M. SantosCidade: Bacabal/Maranhão
DESIGN PARA WEB
PREPARAÇÃO DO AMBIENTE PARA BOOTSTRAP
Profº: Márcio Fabiano O. de M. SantosCidade: Bacabal/Maranhão
CONFIGURAÇÃO DO SUBLIME TEXT
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente
1. Faça o download e a instalação do Sublime Text. http://www.sublimetext.com/2
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente
Preparação do Ambiente2. Entre no site https://wbond.net e clique em “Package
control“ para a instalação das extensões do Sublime Text 2 .
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente3. Após clicar em “package control” no site, clique em “install
now”, e copie em seguida o código de acordo com a versão do “Sublime Text “utilizada (2 ou 3).
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente4. Abra o Sublime Text, vá até o menu “View “, clique em “Show
Console” e cole o código copiado na página anterior no pequeno espaço e dê Enter.
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente4. Abra o Sublime Text, vá até o menu “View “, clique em “Show
Console” e cole o código copiado na página anterior no pequeno espaço na parte inferior do Sublime Text e dê Enter.
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente4. Abra o Sublime Text, vá até o menu “View “, clique em “Show
Console” e cole o código copiado na página anterior no pequeno espaço na parte inferior do Sublime Text e dê Enter.
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente5. Feito isso, reinicie o Sublime Text, fechando-o e abrindo-o
novamente.
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente6. Para instalar as extensões diretamente no Sublime Text,
pressione CTRL + Shift + P e digite install na busca, clicando em Package Control: Install Package.
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente7. Instale o Plugin Emmet no Sublime text pressionando CTRL +
SHIFT + P >>> Install >>> Package Control >>> Emmet.
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente8. Instale o Plugin Open Folder no Sublime text pressionando
CTRL + SHIFT + P >>> Install >>> Package Control >>> Open Folder.
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente9. Instale o Plugin Twitter Bootstrap no Sublime text
pressionando CTRL + SHIFT + P >>> Install >>> Package Control >>> Twitter Bootstrap.
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente10. Instale o Plugin HTML5 no Sublime text pressionando CTRL +
SHIFT + P >>> Install >>> Package Control >>> HTML5.
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente11. Instale o Plugin HTMLAttributes no Sublime text
pressionando CTRL + SHIFT + P >>> Install >>> Package Control >>> HTMLAttributes.
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente12. Instale o Plugin HTML Snnipets no Sublime text
pressionando CTRL + SHIFT + P >>> Install >>> Package Control >>> HTML Snnipets.
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente13. Instale o Plugin Colorhighlighter no Sublime text
pressionando CTRL + SHIFT + P >>> Install >>> Package
Control >>> Color highlighter.
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
CONFIGURAÇÃO DO BOOTSTRAP
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente
Preparação do Ambiente1. Faça o download do bootstrap: http://getbootstrap.com.br
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente2. Após o download do Bootstrap zipado, extraia a pasta do
mesmo.
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente3. Existem 3 pastas no arquivo extraído. São elas:
Css – folhas de estilo pré-definidas do Bootstrap.
Fonts – Fontes do Bootstrap.
Js – Scripts pré-definidos do Bootstrap.
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente4. Acesse a página https://jquery.com Clique em Download
Jquery e baixe o arquivo Download the compressed, production jQuery, Salvando-o na pasta JS do arquivo extraído.
Css – folhas de estilo pré-definidas do Bootstrap.
Fonts – Fontes do Bootstrap.
Js – Scripts pré-definidos do Bootstrap.
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente5. Renomeie a pasta extraída de acordo com o projeto
6. Abra a pasta renomeada no sublime text através do menu: File >>> Open Folder >>> Pasta renomeada
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Linkando arquivos do BOOTSTRAP no HTML
Profº: Márcio Fabiano O. de M. SantosInstituição: Faculdade de Educação de Bacabal
Preparação do Ambiente
top related