Este é o arquivo principal que contém a estrutura básica do sistema de navegação. Ele consiste em:
- Estrutura HTML: Define a estrutura geral do documento, como
<head>,<body>, etc. - Barra de Navegação (
#menu): Contém uma lista de links (<a>) que funcionam como os itens do menu de navegação. - Área de Conteúdo (
#conteudo): Esta é a área onde o conteúdo das páginas será carregado dinamicamente.
Este arquivo contém os estilos CSS que são aplicados ao sistema de navegação. Nele, você pode:
- Estilizar o Menu de Navegação (
#menu): Define a aparência do menu de navegação, como cor de fundo, cor do texto, margens, etc. - Estilizar a Área de Conteúdo (
#conteudo): Define o estilo da área onde o conteúdo das páginas será exibido, como margens, espaçamento, entre outros.
Neste arquivo JavaScript, a funcionalidade principal é carregar dinamicamente o conteúdo das páginas quando um link do menu de navegação é clicado. Ele realiza as seguintes operações:
- Função
carregarPagina(pagina): Utiliza o métodofetchpara obter o conteúdo da página desejada a partir de um arquivo HTML separado. - Manipulação do Conteúdo: Após obter o conteúdo da página, a função atualiza dinamicamente a área
#conteudocom o conteúdo obtido do arquivo HTML correspondente.
-
Certifique-se de ter o Python instalado: Verifique se o Python está instalado no seu sistema. Se não estiver, baixe e instale a versão adequada para o seu sistema operacional no site oficial do Python (https://www.python.org/).
-
Navegue até o diretório do seu projeto: Abra o terminal ou prompt de comando e vá para o diretório onde está localizado o seu arquivo
index.html. -
Inicie um servidor HTTP local: Digite o seguinte comando no terminal para iniciar um servidor HTTP local usando Python (versão 2):
python -m SimpleHTTPServerou para Python 3:
python -m http.server- Acesse o sistema no navegador: Abra um navegador da web e vá para o endereço
http://localhost:8000ouhttp://127.0.0.1:8000para visualizar o sistema de navegação dinâmica. Isso irá iniciar um servidor local na porta 8000 (você pode especificar outra porta, se desejar).
Se você estiver usando o Visual Studio Code, pode utilizar a extensão Live Server para iniciar um servidor local facilmente:
-
Instale a extensão Live Server: No Visual Studio Code, vá até a aba de extensões (Ctrl+Shift+X) e pesquise por "Live Server". Instale a extensão oferecida pelo Ritwick Dey.
-
Clique com o botão direito no arquivo
index.html: No explorador de arquivos do Visual Studio Code, clique com o botão direito no arquivoindex.htmle selecione "Open with Live Server" para iniciar um servidor local. -
Visualize o sistema: O Live Server abrirá automaticamente o seu navegador padrão e carregará o sistema de navegação dinâmica. Qualquer alteração feita nos arquivos será atualizada automaticamente no navegador.
Essas são formas simples de iniciar um servidor local para testar o sistema de navegação dinâmica. Escolha a opção que mais se adequa ao seu ambiente de desenvolvimento e comece a testar o sistema!