Exercício: editar páginas

Concluído

O objetivo deste laboratório prático é criar uma página da Web e editar o código-fonte usando o estúdio de design do Power Pages.

Ao fim destes exercícios, você poderá:

• Abrir o estúdio de design do Power Pages para editar seu portal.
• Criar uma nova página usando um modelo padrão.
• Exibir o código-fonte da página.
• Adicionar código HTML personalizado diretamente.

Para este exercício, você precisará ter o seguinte:

• Um site do Power Pages provisionado em seu ambiente. Se você não tiver um site do Power Pages disponível, siga as instruções de Criar e gerenciar sites do Power Pages para criar um.

Cenário

Para aprimorar a experiência dos visitantes no site, às vezes é necessário adicionar conteúdo HTML personalizado a uma página. Neste exercício, você adicionará código HTML que cria um alerta que pode ser ignorado. O código também incluirá um pequeno fragmento na linguagem Liquid que cria uma saudação dinâmica para o visitante.

Etapas de alto nível

1. Abra seu portal no estúdio de design do Power Pages.
2. Crie uma nova página de aterrissagem.
3. Edite uma página, adicione um espaçador e um espaço reservado para o conteúdo e, em seguida, adicione o código HTML.
4. Salve a página e navegue no site para exibir os resultados.

Etapas detalhadas

Inicie o estúdio de design do Power Pages

1. Faça login no Power Pages.

2. Selecione um ambiente de destino usando o seletor de ambiente no canto superior direito.

3. Selecione seu site e a opção Editar para iniciar o estúdio de design.

4. Certifique-se de que o espaço de trabalho Páginas esteja selecionado.

   

Criar uma página da Web

1. Selecione o botão + Página.
2. Insira um nome de página.
3. Selecione o layout padrão Página de Aterrissagem e pressione Adicionar.

Editar página

1. Selecione o primeiro botão na página. Pressione o sinal de mais (+) e selecione o elemento Espaçador. Esse comando adicionará um pequeno espaço antes de nosso conteúdo personalizado.

2. Selecione o espaçador, pressione o sinal de mais (+) e selecione o elemento Texto. Esse comando adicionará um espaço reservado para nosso conteúdo personalizado.

3. Sua página deverá ter esta aparência:

   

4. Pressione Editar código para abrir a página no editor do Visual Studio Code para a Web.

5. Quando solicitado, selecione Abrir Visual Studio Code:

6. Essa seleção abrirá uma nova janela ou uma guia com o Visual Studio Code para a Web. Localize o elemento de texto criado anteriormente com as palavras Enter text:

7. Copie o código a seguir e cole-o no código-fonte da página substituindo o conteúdo <p>Enter text</p>:

   <div role="alert" class="alert alert-info alert-dismissible">
     <button type="button" data-bs-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
     <strong>Happy <span>{{ now | date: 'MMMM' }}</span>!</strong>
     Get your unlimited free education at 
     <a href="https://learn.microsoft.com/">Microsoft Learn</a>
   </div>
   

8. Agora seu conteúdo deverá ter esta aparência:

9. Pressione Ctrl-S (⌘-S no MacOS) para salvar o arquivo.

10. Mude para a janela do estúdio de design. Pressione o botão Sincronizar para sincronizar os editores e mostrar o conteúdo atualizado na tela:

11. As alterações aparecerão na tela do estúdio de design. Pressione o botão Visualizar no canto superior direito e selecione Área de trabalho.

12. A página personalizada com um alerta que pode ser ignorado será aberta.

13. Verifique se a saudação inclui o mês atual.

14. Pressione o ícone (x) para ignorar o alerta.

Continuar