Exercício: editar páginas

A finalidade 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 final desses exercícios, você pode:

• Abra 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ê precisa dos seguintes itens:

• 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 criar e gerenciar sites do Power Pages para criar um.

Scenario

Para aprimorar a experiência do site para visitantes, às vezes você precisa adicionar conteúdo HTML personalizado a uma página. Neste exercício, você adicionará um código HTML que cria um alerta descartável. O código também inclui um pequeno fragmento na linguagem Liquid criando 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

Abrir o estúdio de design do Power Pages

1. Entre no Power Pages.

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

3. Selecione seu site e, em seguida, selecione 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 + Página.
2. Insira um nome de página.
3. Selecione o layout padrão da Página de Aterrissagem e, em seguida, selecione Adicionar.

Editar página

1. Selecione o primeiro botão na página. Pressione o sinal de adição (+) e selecione o elemento Spacer . Esse comando adiciona um pequeno espaço antes do conteúdo personalizado.

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

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

   

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

5. Quando solicitado, selecione Abrir o Visual Studio Code:

6. Essa seleção abre uma nova janela ou uma guia com Visual Studio Code para a Web. Localize o elemento de texto que você criou 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://dotnet.territoriali.olinfo.it/">Microsoft Learn</a>
   </div>
   

8. Seu conteúdo agora deve 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 aparecem na tela do estúdio de design. Pressione o botão Visualizar no canto superior direito e selecione Área de Trabalho.

12. Sua página personalizada com um alerta descartável é aberta.

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

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