Criação de páginas web com word. Como criar uma página da web

TÓPICO 8. CRIANDO PÁGINAS DA WEB COM O WORD

Como editores que simplificam a criação de sites, você pode usar aplicativos do Microsoft Office - Word, Excel, PowerPoint, etc. eu vejo é o que eu recebo). Um grande número de pessoas que usam o Word em seu trabalho diário se tornam potenciais desenvolvedores de documentos HTML.

Há duas maneiras de criar uma página da Web no Word: usando o Assistente ou um modelo ou convertendo um existente. documento do Word para o formato HTML. Ao mesmo tempo, o próprio Word gera tags HTML, embora não de maneira ideal.

Primeira maneira criar documentos HTML é bastante simples - você precisa começar a criar um documento do zero e apenas seguir os conselhos do Assistente e usar as ferramentas disponíveis no menu do programa.

Segunda via- Converta o documento existente do Word em tags HTML ao salvar Arquivo de palavra em formato HTML. A transformação naturalmente leva ao fato de que alguns elementos do design do documento serão perdidos ou alterados.

Um de características distintas Documentos HTML é que o próprio documento contém apenas texto, e todos os outros objetos são incorporados no documento no momento em que ele é exibido pelo Browser usando tags especiais e armazenados separadamente. Quando você salva um arquivo HTML no local onde o documento está localizado, o Word cria uma pasta no disco na qual ele coloca os elementos de design gráfico que o acompanham. Por exemplo, ao salvar um arquivo com imagens Fritas. htm Word cria uma pasta Fritas. arquivos, no qual colocará todos os desenhos.

De acordo com isso, ao criar um site - um grupo de páginas da Web interconectadas - é recomendável colocar o site em uma pasta separada e, ao mover ou publicar um site, preservar estritamente toda a estrutura de pastas internas.

Ao se preparar para publicar materiais criados em Word na Internet, é útil conhecer os recursos de conversão para o formato HTML. Alguns deles são apresentados abaixo (Tabela 8.1).

Tabela 8.1

Convertendo elementos de design para HTML

Elemento de documentoWord	Convertendo HTML do Word ®
Tamanhos de fonte	O Word exibe fontes de 9 a 36 pontos. Dimensões fontes HTML mude de 1 para 7 e sirva de indicação ao Browser sobre o tamanho da fonte
Efeitos de texto: levantadas, sombreadas, compactadas, etc.	Os efeitos de texto não são salvos, mas o próprio texto permanece
Estilos: negrito, itálico, sublinhado	Os estilos de fonte permanecem, mas alguns sublinhados são convertidos em linhas sólidas
Animação de texto	A animação não é salva, mas o texto permanece. Para dar ao texto um efeito animado, você pode usar o letreiro (painel Web Components)
	As imagens são convertidas para o formato GIF ou JPEG se não tiverem sido salvas anteriormente nesses formatos. As linhas são convertidas em linhas horizontais
Gráficos: autoformas, texto artístico, caixas de texto e sombras	Os objetos são convertidos em arquivos GIF. No ambiente de edição de páginas web, você pode inserir ferramentas gráficas "Inserir" - "Imagem"
	As tabelas são convertidas, mas as configurações não suportadas pelo HTML não são preservadas (por exemplo, bordas coloridas e bordas de largura variável)
Numeração de páginas e cabeçalhos e rodapés	Como um documento HTML é considerado uma única página da Web, não há conceito de cabeçalhos e rodapés e a paginação não é preservada.
Margens da página e texto em várias colunas
	Estilos definidos pelo usuário são convertidos para formatação direta se suportados por HTML

Se você precisar inserir suas próprias tags na página HTML, o Word fornece edição direta de código HTML. Isso pode ser feito chamando a janela do editor através do menu "Visualizar" - "Fonte HTML". Antes de mudar para este modo, você deve salvar o arquivo. Depois de terminar a edição antes de fechar a janela, o arquivo também precisa ser salvo.

Outra forma de mudar para o modo de edição HTML é abrir o documento no Browser e chamar o menu "View" - "As HTML". Por padrão, a edição é feita no Bloco de Notas.

Embora o Word exiba o documento da mesma forma que aparecerá posteriormente no navegador, você pode visualizar um documento da Web sem sair do Word.

No menu "Visualizar", são definidas as formas de exibir um documento do Word (Fig. 8.1). Quando "Documento da Web" é selecionado, o arquivo é exibido como aparecerá no navegador instalado no computador. Através do menu "Visualizar", você pode retornar modo normal trabalhando com um documento.

https://pandia.ru/text/78/284/images/image002_81.gif" width="32" height="32 src=">Autobiography" href="/text/category/avtobiografiya/" rel="bookmark "> autobiografia).

Meus hobbies

Meus amigos

4. Crie um documento do Word dedicado aos seus hobbies. Salve o documento com um nome passatempo. doc na sua pasta. O documento deve ser formatado, ter rodapé e, além do texto, conter imagens.

5. Criar Pasta de trabalho do Excel com uma tabela como a abaixo, salve como amigos. xls

https://pandia.ru/text/78/284/images/image004_38.jpg" width="464" height="164 src=">

Para calcular os valores médios deve ser usado fórmulas.

5.1. Construir gráficos ilustrando informações sobre seus amigos. Organize os gráficos, ajuste o tamanho da tabela e os gráficos sob a tabela.

5.2. Preparar folha para impressão: defina as configurações da guia "Página…" no modo Visualizar, crie cabeçalhos e rodapés.

6. Estabeleça links entre documentos usando hiperlinks.

6.1. Abra o documento principal main. doc e destacando sequencialmente os títulos das seções, atribua hiperlinks a eles ("Menu - Inserir") aos documentos relevantes.

8. Crie hiperlinks no final de cada documento de suporte para retornar ao documento principal.

8.1. Prepare um desenho para garantir o retorno dos documentos de suporte ao principal. Por exemplo, buffer de imagem" href="/text/category/bufer/" rel="bookmark">buffer (Alt+PrintScreen) e editar a imagem no editor de pintura.

8.2. Insira uma imagem no final de cada documento e anexe um hiperlink ao documento principal atrás dele. doc. No arquivo passatempo. doc o hiperlink deve fornecer uma transição para a guia "Hobby".

10. Crie um grupo de páginas da Web relacionadas convertendo documentos preparados.

10.1. Prepare uma pasta para documentos da Web chamada My_Web.

10.2. Abrindo consistentemente documentos previamente preparados, salve-os em uma pasta Minha_Web, especificando:

Tipo de arquivo: Página da Web (*.htm; *.html)

10.3. Feche todos os documentos, analise as alterações que ocorreram na estrutura de pastas.

11. Visualize documentos da Web começando em a Principal. htm. Analise quais elementos de documentos mudaram ou desapareceram completamente. Tente seguir um hiperlink. Certifique-se de que os links entre as páginas da Web precisam ser editados.

12. Edite documentos da Web, altere hiperlinks, execute design adicional.

Atenção! Para alternar do navegador para o modo de edição, você precisa usar o menu "Arquivo" - "Editar em Microsoft Word para Windows" ou um botão na barra de ferramentas.

II. Criando novos documentos da Web com aplicativos do MS Office

1. Familiarize-se com a estrutura e composição de um documento de hipertexto de várias páginas que combina quatro páginas (consulte o Apêndice 8.1).

2. Crie uma pasta com um nome apresentação, e nele - uma pasta para seus desenhos Galeria.

3. Prepare desenhos para inclusão nas páginas apropriadas. Salve-os em uma pasta Galeria como bmp, gif separado ou qualquer outro formato usado na Internet. Preste atenção ao tamanho das imagens e ao tamanho dos arquivos. O tamanho do arquivo não deve exceder 3-10 KB.

4. Criar arquivo separado para cada página usando o processador de texto Word (Páginas 1, 2, 4). Para a página 3, use o arquivo finalizado amigos. htm. Salvar arquivos em formato htm ou html em uma pasta apresentação.

4.1. Execute o processador de texto Word e use-o para criar uma página principal, salve o arquivo em formato html com o nome índice. htm

4.1.1. Ao criar um documento estruturado, é recomendável usar uma tabela. Após colocar os objetos, retire a moldura da mesa.

4.1.2. Preencha o documento. Use o objeto WordArt para o título principal e o estilo Heading para o restante.

4.1.3. Para desenhar o plano de fundo, use um dos métodos de preenchimento de textura (menu " Formato" – "Fundo" – "Métodos de preenchimento") ou desenho temático (menu " Formato" – "Tema").

4.1.4. Visualize no navegador as alterações na estrutura de pastas que ocorreram quando a página da Web foi salva. Abra a página criada, edite-a se necessário.

4.2. Crie a segunda página do site usando o editor do Word.

4.2.1. Para criar um documento, use o item de menu " Arquivo"-"Crio", na caixa de diálogo aberta " Criando um documento"selecionar guia" paginas web" e ícone " Nova página da Web". Salve uma página da Web em branco em uma pasta apresentação dando um nome à página em inglês infância. htm

4.2.2. Use como título "Minha infância" linha de corrida, exibindo primeiro o painel Web Components. Familiarize-se com os parâmetros do Ticker, configure-o para que não apareça mais de 2 vezes.

4.2.3. Faça marcação para colocar objetos usando uma tabela. Colar imagem da pasta Galeria.

4.2.4. Decore o plano de fundo da página usando um preenchimento de gradiente de duas cores. Escolha cores próximas da cor da textura ou tema da página principal.

4.3. Crie uma terceira página com base no arquivo criado na parte I amigos. htm

4.3.1. Copie um arquivo e sua pasta acompanhante para uma pasta apresentação.

4.3.2. Abra o arquivo no navegador, certifique-se de que o documento seja exibido corretamente. Edite se necessário.

4.4. Crie a quarta página do site usando o editor do Word.

4.4.1. Prepare um desenho - uma vista do edifício SPbSUT. Salve a imagem em uma pasta Galeria.

4.4.2. Crie um arquivo na pasta Apresentação chamado universidade. htm

4.4.3. Insira um desenho no arquivo - uma vista do edifício SPbSUT, previamente salvo na pasta Galeria. Copiar ou Entrar endereço de e-mail universidade. Escreva algumas frases sobre sua faculdade e insira um hiperlink para o site da faculdade.

5. Estabeleça links entre os documentos do site.

5.1. Aberto em Palavra documento índice. htm e, destacando sucessivamente os pontos dos "Conteúdos", inserir hiperlinks para os documentos relevantes.

6..gif" width="32" height="32 src=">MsoNormalTable">

Saudações

Representação -

pequeno resumo

Desenho ou

a foto

Me escreva
(endereço de e-mail)

Página 2 (Minha infância)

Página 3 (Meus amigos).Use um documento da Web criado anteriormente amigos. html, criado com Excel.

Página 4 (Minhas Universidades).Traga o nome completo da Universidade, o endereço do site do SPbSUT, uma foto com fotografia do prédio principal do SPbSUT. Escreva algumas palavras sobre sua faculdade, dê um link para o site de sua faculdade.

perguntas do teste

Como você pode criar uma página da Web no Word? Como o Word altera a estrutura de pastas no disco quando uma nova página da Web é salva? Que novas técnicas de design de documentos estão surgindo ao trabalhar com páginas da Web? Quais ficam indisponíveis? Como inserir um hiperlink para outro documento? Como inserir uma imagem? Como visualizar, editar as tags de um documento HTML criado no Word?

Introdução

Durante a passagem da prática computacional:

desenvolveu um cenário pedagógico sobre o tema de uma tarefa individual;

· desenvolveu uma página Web que implementa o cenário pedagógico desenvolvido;

Configure e teste a página da Web desenvolvida usando o programa Internet Explorer;

preparar um relatório sobre a prática computacional;

Usando o Word para criar páginas da Web

Durante nosso estágio, aprendemos:

salvar documentos do Word como páginas da web;

Navegue pelas páginas da Web no modo de layout da Web;

salve páginas da web na pasta da web;

· Crie páginas da Web usando o Assistente de página da Web.

e World Wide Web

A World Wide Web é um sistema de documentos interligados hiperlinks. Os hiperlinks permitem que você navegue de um documento para outro. Os documentos podem incluir texto, imagens, arquivos de áudio e vídeo. Para formatar documentos em formato HTML (o formato principal Mundo dos Arquivos Wide Web) existem algumas limitações. Por exemplo, nesses documentos, sem truques especiais, geralmente não é possível colocar o texto em várias colunas, e também não é possível alinhá-lo nas duas bordas da página.

Cada página da web é um normal arquivo de texto com opções de formatação especificadas como comandos para texto, gráficos e hiperlinks. Esse arquivo é chamado de origem HTML porque os comandos correspondentes são escritos no formato Hypertext Markup Language (HTML). Um navegador (um programa que permite ler informações em documentos da World Wide Web) reconhece uma página da Web e a exibe na tela da mesma forma que o Word faz no modo de página da Web.

Veremos isso no modo Navegação na web o texto é fácil de ler, pois é exibido em letras grandes e as linhas são automaticamente quebradas para se adaptarem à largura da página. Neste modo de visualização, o texto pode ser editado e formatado.

Salvar um documento do Word como uma página da Web

O Word 2000 usa o formato de arquivo da Internet (HTML) como um dos formatos do Word. Isso significa que você pode não precisar converter especificamente documentos do Word para formato web. Se você abrir uma página da Web existente, o Word a salvará automaticamente no mesmo formato. Se você estiver iniciando um documento no Word, precisará convertê-lo em um formato compatível com a Web. equipe especial conservação. Agora vamos criar um documento, fazer algumas alterações nele e salvá-lo como uma página da web.

1. Abra o arquivo Book Review.doc que criamos em uma das lições anteriores.

2. Selecione Exibir > Layout de página.

Você verá um documento organizado em várias colunas (Fig. 1)

A caixa de diálogo Salvar documento mostrada na Fig. 2.Nela, você pode selecionar um computador, unidade ou pasta para salvar o documento.

Figura 1.

Arroz. 2

Além disso, você pode especificar o nome e o formato do arquivo. Para definir os títulos das páginas da Web, use o botão Alterar título. Vamos salvar a página web em nossa pasta de trabalho.

O título é o nome do documento sob o qual será publicado na Internet. Vários motores de busca use o conteúdo desses cabeçalhos para pesquisas prioritárias. Se você deseja que seus documentos sejam facilmente encontrados na vasta quantidade de material publicado na Internet, tente dar-lhes títulos descritivos.

4. Clique no botão Meus Documentos. O conteúdo desta pasta será exibido na tela.

5. Clique duas vezes no ícone Trabalho.

6. Realce o nome do arquivo no campo Nome do arquivo.

7. Digite um nome para Meu Documento da Web.

Word converte o documento para o formato HTML para que ele. pode ser visto na Internet (Fig. 3).

Arroz. 3.

Observe que o documento agora é exibido na tela sem colunas. Eles podem ser exibidos no modo de layout de página, mas não serão exibidos quando visualizados em uma janela do navegador (Fig. 4).

Arroz. 4

Quando você salva documentos no formato HTML, o Word salva gráficos e outros objetos desse documento em arquivos separados.

Nem todo mundo percebe o quão poderosas ferramentas de texto o Microsoft Word nos oferece. Graças a este editor, criaremos nosso primeiro site funcional na Internet gratuitamente. Não requer nenhum conhecimento específico. Basta ter habilidades mínimas para trabalhar com este conhecido editor de texto.

Os primeiros passos na criação de um site no Word

Criamos nosso site em Word (doravante referido como Microsoft Word), como se costuma dizer, do zero. Você pode começar com a já clássica frase “Hello world”, que na tradução russa: “Hello world”. Embora eu escrevesse na minha primeira página na Internet assim: “Esta é a minha primeira página na Internet. Viva!". Escrevemos esta (ou qualquer outra) frase no Word na página recém-criada, selecione o menu "Arquivo" (no Word 2003), ou depois de clicar no botão "Office" (canto superior esquerdo no Word 2007), o botão "Salvar como " e salve o documento como "Página da Web (*.htm; *.html)". Crie um nome você mesmo, mas deve ser em latim, por exemplo, “stranitsa”, recomendo chamá-lo de “index” - isso será muito útil para nós ao colocar o site na Internet. As páginas da Web também são chamadas de páginas html (do nome da linguagem html - linguagem de marcação de hipertexto, com base na qual todos os sites da Internet são baseados).

Assim, você criou sua primeira página: index.htm. Clique no arquivo (duas vezes, é claro) e você verá sua página da web em um visualizador de páginas da web ou navegador (do inglês "browser" - navegador) instalado em seu computador por padrão.

Hoje existem vários navegadores populares. Estes são o Internet Explorer, Firefox, Opera, Chrome e outros. Qual navegador usar depende de suas preferências.

Não importa em qual versão do Word você trabalhará. As páginas da Web serão salvas de acordo com os padrões aceitos na Internet hoje e serão igualmente bem visualizadas em qualquer navegador.

Uma pequena digressão. Você pode escrever qualquer texto no Word em seu nova página e exatamente da mesma forma ela será vista por qualquer visitante do seu site (colocaremos nossa página na Internet na segunda parte de uma série de artigos sobre como criar um site no Word). Na verdade, nem tudo é tão róseo, pois nem todos os navegadores são 100% compatíveis entre si (a mesma situação com suporte para padrões de exibição de páginas da Internet) e acontece que a exibição da página no navegador e no Word não coincidem completamente . Há, felizmente, um método muito simples e maneira universal soluções para esse problema - depois de salvar nossa página, a veremos em alguns navegadores de diferentes fabricantes, por exemplo, Internet Explorer (instalado por você por padrão) e Firefox. Felizmente, todos os navegadores são gratuitos. Assim, teremos a certeza de que qualquer usuário da Internet verá o mesmo que nós. Corrigiremos imediatamente quaisquer inconsistências no navegador e no documento do Word (por exemplo, alinhamento), geralmente isso é feito alterando as propriedades do elemento da página do Word (linhas, palavras, tabelas). Depois de salvar o documento, nos certificamos de que tudo está bem conosco e continuamos a trabalhar.

Também é importante que o Word possa verificar nosso texto quanto a erros ortográficos e gramaticais, o que é uma grande vantagem. Ter erros em seu site é uma má forma.

Agora comece a experimentar os elementos mais básicos do Word. Desenhe uma tabela de qualquer complexidade, insira quaisquer desenhos, clipes, formas (disponíveis no menu "Inserir"), altere o plano de fundo e as cores da página elementos individuais(por exemplo, a cor de cada célula pode ser diferente). Faça o que quiser. O Word fornece muitas soluções prontas para o design do seu documento (página da Web no nosso caso).

No Word, trabalhar com tabelas é muitas vezes mais rápido e conveniente do que em qualquer editor web moderno.

O fato é que uma das maneiras populares de criar páginas da Web na Internet é colocar uma tabela complexa na página, e o arranjo de vários elementos (imagens, menus, qualquer texto) ocorre nas células da tabela. Seguiremos o mesmo caminho e garantiremos que trabalhar com tabelas no Word seja extremamente simples.

Faça o seguinte. Desenhe uma tabela de 6 × 6 células no Word de qualquer maneira conveniente para você. Pinte as células em um padrão quadriculado com vermelho. Para simplificar, você pode especificar uma cor vermelha nas propriedades da célula e pressionar F4 (formato de cópia) em cada célula que precisa ser colorida. Um exemplo de tabela está na figura abaixo.

Você já pode usar para praticar arquivos prontos com exemplos no Word. Baixe o arquivo zip com este e outros exemplos. Selecione a tabela clicando com o botão esquerdo no quadrado com uma cruz à esquerda canto superior tabela e clicando com o botão direito do mouse, selecione "Borders and Shading". Na guia "Border" que se abre, defina o "Type" para: Nenhum.

Sua tabela terá uma borda invisível (borda) e outras linhas. Em seguida, salve seu documento como uma página da Web e visualize-o em um navegador. Este exemplo mostrou o princípio básico de trabalhar com páginas usando tabelas, ou seja, preenchemos as células com as informações necessárias e depois tornamos todas as linhas da tabela invisíveis.

Quando começarmos a trabalhar com o material principal da página, recomendo fortemente que você salve o arquivo do Word como uma página web EM UM ARQUIVO SEPARADO!!!, o mesmo index.htm, por exemplo. Aqueles. você terá 2 arquivos de trabalho. Um arquivo do Word com extensão .doc (ou .docx, dependendo da versão do Word) é o arquivo principal que você editará, e o outro é o arquivo da página web com extensão .htm. Abriremos a página da Web no navegador e compararemos seu design com o design original no Word em caso de possíveis inconsistências.

Por que é melhor fazer assim? Porque quando o Word salva um documento em uma página da Web, alguns dos objetos podem ser convertidos em uma imagem que não pode mais ser editada.

Ferramentas avançadas do Word para decorar uma página da web

Os efeitos mais interessantes para desenhar uma página web, e sem ela não há para onde ir, estão disponíveis na barra de ferramentas Desenho. Se este painel não estiver ativo para você, clique com o botão direito do mouse em qualquer lugar na área onde as barras de ferramentas estão localizadas e marque a caixa ao lado da palavra "Desenho".

Você pode selecionar qualquer uma das muitas AutoFormas disponíveis no menu AutoFormas na barra de ferramentas Desenho.

Qualquer uma das ferramentas incluídas na barra de ferramentas Desenho pode ser encontrada jeitos diferentes. Você já conhece o primeiro método, e o segundo método é selecionar "Inserir" no menu principal e ir para o submenu "Imagem" (para Word 2003). Em palavra próximas versões(Word 2007 e posterior) a interface é mais inteligente e já é muito mais fácil e rápido trabalhar lá, aqui quando você seleciona o menu "Inserir" no Painel superior todos os ícones de ferramentas já estão presentes.

Vamos mostrar um pequeno exemplo da inteligência da Palavra, a partir da versão 2007 e anteriores. Por exemplo, desenhamos qualquer forma automática no Word 2007 e uma guia adicional Ferramentas de Desenho\Formato é aberta imediatamente, onde é possível aplicar qualquer efeito disponível à forma. Além disso, os resultados da aplicação do efeito podem ser vistos instantaneamente, ao contrário do Word 2003. Mas, no entanto, o resultado final será o mesmo. Experimente você mesmo.

Aqui está apenas um pequeno exemplo com várias formas automáticas no Word que podem ser úteis ao trabalhar em um site.

Você pode inserir texto em qualquer AutoForma e editá-lo, assim como em um documento comum. No exemplo de uma figura específica, a figura abaixo mostra um exemplo de alteração de vários parâmetros da figura.

Você pode alterar dezenas de parâmetros - a cor da forma, sua borda, a espessura das linhas de limite, qualquer parâmetro de texto. Você pode aplicar as ferramentas Sombras e Volume a quase qualquer objeto. Essas ferramentas são frequentemente usadas por webmasters na Internet para criar botões bonitos, mas no Word isso levará alguns segundos. Talvez a ferramenta mais interessante seja o objeto WordArt. Com ele, você pode literalmente fazer qualquer coisa, com qualquer inscrição. Exemplos de objetos WordArt abaixo.

Fazemos um site completo

Tendo lidado com algumas das possibilidades da Palavra, passamos a criar um site completo, que já será adequado para trabalho em meio período como agente de Internet de um banco. Tendo aplicado todos os desenvolvimentos anteriores, obtemos a primeira página (principal) do nosso site.

Você pode baixar este exemplo e editá-lo com seu próprio texto. Por conveniência, fotos da atual linha de produtos do Moskomprivatbank (Privatbank na Rússia) já foram adicionadas à página. Mais tarde, você pode substituí-los por outros (a pesquisa irá ajudá-lo).

O que há de novo neste exemplo de site para nós:

1) Existem 3 hiperlinks na primeira linha da tabela do arquivo agentbankanew.doc.

A imagem do mapa e o texto "Mais sobre o mapa..." ligam-se à página kreditka.htm existente. E o botão “pedir” já é um link de venda que redireciona o visitante interessado ao site do banco. Este link inclui sua identificação, que é atribuído a você após o registro por um agente bancário. Inserir um hiperlink é elementar. Selecione qualquer texto ou objeto e clicando com o botão direito do mouse, selecione "Hyperlink". O botão Hiperlink também pode ser encontrado na barra de ferramentas Padrão, que está sempre visível (Word 2003), ou no menu superior "Inserir" (Word 2007). No canto superior direito, clique em "Dica" e digite o texto que será exibido como dica ao passar o mouse sobre o link. Veja por si mesmo.

Assim, quando nos referimos a um arquivo existente em nosso diretório de trabalho, simplesmente nos referimos a esse arquivo. E você pega o link para o botão “Pedir” do site da agência após o registro como agente e cola no campo “Endereço” na parte inferior da janela “Adicionando um hiperlink”.

No link de venda http://agent.privatbank.ru/branches/product/21/XXXX/ o XXXX mais recente é substituído pelo seu número de identificação (ID). Como obter um número de identificação é descrito em detalhes no artigo da série de artigos “Diretrizes para obter renda adicional no Moskomprivatbank em três passos».

Para adicionar um novo link, selecione o texto ou objeto com o botão esquerdo do mouse e, pressionando o botão direito do mouse, selecione "Hyperlink". Para alterar ou visualizar o endereço de um hiperlink existente, mova o ponteiro do mouse sobre ele sem pressionar o botão esquerdo, e PRESSIONE IMEDIATAMENTE O BOTÃO DIREITO do MOUSE e selecione "Alterar hiperlink ...".

2) No topo da página, criamos um menu onde vinculamos todos os produtos bancários da página. Isso é feito para simplificar a navegação na página e conveniência adicional para o visitante da sua página. Para facilitar a navegação no editor Word (dentro da página, bem como entre diferentes documentos ou páginas da web), é fornecida a barra de navegação "Web Site", na qual você pode usar as setas para navegar rapidamente, como em um navegador quando trabalhando na Internet.

Para fazer referência a um local em um documento, criamos um marcador destacando qualquer local no documento (palavra, linha, imagem etc.).

3) Estamos adicionando páginas adicionais com uma descrição mais detalhada do produto, porque. uma breve descrição na página principal claramente não é suficiente, e escrever um texto de descrição grande para todos os produtos de uma só vez é uma má forma. O design das páginas com uma descrição detalhada pode ser deixado semelhante à página principal - tudo depende de você. Você pode usar a página finalizada do artigo da série de artigos "Diretrizes para obter renda adicional no Moskomprivatbank em três etapas" com uma descrição do principal produto do Privatbank -, apenas em este casoé necessário renomear a página da web com a descrição do cartão de crédito (de index.htm para kreditka.htm), porque nos referimos à descrição detalhada do cartão de crédito com o nome do arquivo kreditka.htm. Descrições detalhadas faça você mesmo o restante dos produtos, pois há informações suficientes sobre eles.

4) É necessário estar atento ao conteúdo da página (conteúdo). Aqui vale a pena seguir os padrões geralmente aceitos e, se for mais simples, as regras do bom gosto. Que seja uma saudação no topo da página, Pequena descrição organização (no nosso caso, um banco). By the way, você pode fazer uma página separada para informações sobre o banco. Seus detalhes de contato devem estar na parte inferior da página, pois os visitantes provavelmente terão dúvidas. E eles poderão pedir-lhes o especificado por você o email, ICQ ou telefone. Talvez você complemente as informações no final da página com links interessantes ou outra coisa - a seu critério (toda a Internet está à sua frente como exemplo). Muito ponto importante: é considerado de boa educação ter um link para o site de onde você tirou (ou tirou parcialmente) os materiais para o seu site. E, claro, material exclusivo é importante para qualquer site, o que afetará positivamente a indexação do seu site pelos mecanismos de pesquisa, mas esse é um tópico extenso separado não para este artigo.

Salvamento final de um documento como uma página da web

Após os retoques finais na criação do site, é necessário converter corretamente nosso documento em uma página web. Existem várias nuances aqui que é muito desejável não esquecer - garantindo total conformidade visual do documento original no Word com a página da Web salva e conformidade da página web com as recomendações geralmente aceitas para o conteúdo do site ao colocá-lo na Internet. Ao salvar um arquivo como página da Web, selecionamos o tipo de arquivo: "Página da Web com filtro" - isso é feito para reduzir o tamanho do arquivo (são removidas informações desnecessárias, necessárias apenas para edição no Word e não não importa para o navegador). Em seguida, certifique-se de criar o título certo para a página da web. Este não é o nome do arquivo, mas o nome da página da web que será exibida na barra de título do navegador.

Depois de finalmente salvar o documento como uma página da Web, dê outra olhada na página da Web resultante em vários navegadores. Se você vir inconsistências (na maioria das vezes, problemas de alinhamento), corrija o documento do Word. Você já tem uma página da Web pronta que pode ser colocada na Internet, mas há uma ressalva. O Word não insere um elemento específico em uma página da web (o chamado). À primeira vista, isso não é crítico, mas os navegadores ainda podem ter problemas para interpretar nossa página da web (problemas também podem surgir com os mecanismos de pesquisa - sem dado elemento O mecanismo de pesquisa pode considerar sua página insegura, verificada por minha própria experiência). Leia o extrato do manual:

Elementodestina-se a indicar o tipo do documento atual - DTD (definição do tipo de documento, descrição do tipo de documento). Isso é necessário para que o navegador entenda como interpretar página da web atual Como o HTML existe em várias versões, existe também o XHTML (EXtensible HyperText Markup Language, Extended HyperText Markup Language), que é semelhante ao HTML, mas difere na sintaxe. Para que o navegador "não fique confuso" e entenda de acordo com qual padrão exibir uma página da web, é necessário definir na primeira linha de código.

Assim, com base nesta informação, inserimos a linha que falta no topo da nossa página web (documento html) em qualquer editor de texto. A linha é a seguinte:. A figura mostra sua localização (no topo). Na mesma figura, você pode ver os principais elementos de qualquer página da web usando um documento html vazio como exemplo.

Não analisaremos o significado de todos os elementos, se você tiver um grande desejo de entender isso, pergunte a qualquer mecanismo de pesquisa. O principal é que, com esta linha, não teremos problemas com navegadores e mecanismos de pesquisa. Não se esqueça de inserir esta linha no início de cada página web. Isso é tudo!

Resumindo

Depois de concluir o trabalho no site (criando e preenchendo páginas adicionais e principais com material), obtemos um site completo gratuitamente - uma descrição de suas atividades na Internet, sem a qual não se pode falar de nenhum lado normal trabalhar. Algumas etapas simples, descritas na parte 2 da série de artigos sobre como criar um site, permitirão que você veja seu site não apenas em seu próprio computador, mas também para todos os visitantes do site (clientes em potencial). Leia, visite o site e espere as primeiras vendas online!

slide 2

Vamos nos familiarizar com ferramentas e técnicas simples para o desenvolvimento de páginas da web. Usando um exemplo, vamos ver como criar um fragmento de um site contendo o repertório de um cinema. Antes de tudo, é necessário: desenvolver um projeto de site; compreender sua estrutura e conteúdo pretendido. Aqueles. Construir modelo de informação local. Estrutura do local. Cinema "Outubro" oferece Dramas Comédias Detetives DRAMAS COMEDIES DETETIVES FOTO Primeira página (principal) Segunda página da web Terceira página da web Quarta página da web

slide 3

No primeiro ( nível superior) é a primeira página (principal). Ele hospeda informações gerais sobre o cinema e hiperlinks que permitem abrir as páginas do segundo nível. O segundo nível (inferior) contém páginas dedicadas a certos gêneros de filmes. Gênero do filme Foto da trama Nome, país Atores do diretor: Sessões de resumo: Preço do ingresso: Páginas do segundo nível.

slide 4

Claro, a estrutura do site pode ser ainda mais complicada pela adição de páginas de níveis subsequentes. Por exemplo, páginas dedicadas a diretores, atores, etc. Todas as páginas do mesmo nível geralmente são projetadas no mesmo estilo. No entanto, seu design pode ser diferente. Os principais elementos das páginas da web são: blocos de texto objetos gráficos Os blocos de texto incluem: Objetos gráficos incluem: corpo do texto, cabeçalhos, listas de hiperlinks de texto, etc. imagens (desenhos, fotos, animação), "papel de parede" - imagens de fundo, imagens de hiperlink, linhas separadoras.

slide 5

As tabelas são frequentemente usadas para colocar elementos em locais específicos de uma página. O estilo do texto e o estilo dos elementos gráficos definem o estilo de design da página web. Estilo de texto refere-se ao tipo de fonte, tamanho, estilo, recuos, alinhamento, intercaractere e espaçamento entre linhas etc. O estilo dos elementos gráficos é definido pela forma, tamanho, cor, textura do material, além de vários efeitos. Para um design de documento estilisticamente competente, é conveniente usar modelos prontos - Temas. Um tema é um conjunto de elementos de design de documentos e esquemas de cores especialmente projetados por um designer de computador. O tema define o estilo de design de cada página e de todo o site: o estilo do texto principal, títulos, hiperlinks, etc.

slide 6

Os temas são oferecidos em todos os programas de escritório. O desenvolvimento do site começa com uma escolha Temas concluídos ou crie seu próprio modelo de design. Depois disso, páginas separadas são criadas. Em seguida, são formados os hiperlinks, que determinam a navegação pelo site. Os arquivos de todas as páginas do site são colocados em uma pasta separada. Isso facilita a hospedagem do site em um servidor web. É costume dar ao arquivo da página web principal o nome index ou main com uma extensão htm ou html. Tema "Bombing" Tema "Rodovia"

Slide 7

Inicie o programa WORD. Execute o comando Arquivo Novo. No painel de tarefas, selecione Página da Web. Selecione Tema: Formatar Tema. Por exemplo: "Fluxo". Para colocar fotos e áreas de texto na página, usaremos uma tabela com 6 linhas e 2 colunas. Células obrigatórias unir. Vamos postar as informações que você precisa. A página da web criada desta forma será salva em disco com o nome DRAMA.HTML. Vamos começar a criar um site com o design das páginas do segundo nível. Quando você salva um documento WORD como uma página da web, todas as imagens usadas no documento serão colocadas em uma pasta remota com o nome da página da web e a extensão .files.

Slide 8

O resultado da implementação dos pontos 1 - 4.

Slide 9

O resultado da conclusão das etapas restantes e da visualização da página da Web criada no navegador.

Slide 10

Marco importante desenvolvimento de páginas web - criação de hiperlinks. Para isso, você deve: 1. selecionar o texto que se tornará um hiperlink de texto; 2. Insira o comando Hyperlink ou ícone 3. Link para arquivo, página da web 4. destaque arquivo desejado, cujo conteúdo deve abrir com um hiperlink e confirmar a seleção. Ao final do trabalho, você precisa visualizar as páginas criadas no navegador e verificar os links.

slide 11

Você pode aumentar a atratividade de uma página da web colocando elementos dinâmicos e interativos nela. Vamos "reviver" nossa página principal do site colocando um ticker nela. Ordem de execução das tarefas: Visualizar Barras de Ferramentas Web Components Chame a janela "Linha de rastreamento", digite o texto "Sugestões", faça as configurações necessárias e confirme a escolha.

slide 12

Editor de PALAVRAS permite conectar arquivos de vídeo e áudio a uma página da web. Para fazer isso, clique no ícone Som ou Filme para abrir uma caixa de diálogo, clique no botão Procurar, encontre o vídeo desejado ou arquivo de som, defina as opções de reprodução.

Ver todos os slides

TEMA 8
CRIAÇÃO REDE-PÁGINAS COM AJUDA PALAVRA

Como editores que facilitam a criação rede -sites, os aplicativos podem ser usados Microsoft Office - Word, Excel, PowerPoint e outros. Neste caso, o usuário pode não saber o idioma HTML e ter um ambiente familiar para processamento de documentos - WYSIWYG (O que eu vejo é o que eu recebo). Um grande número de pessoas usando Palavra em seu trabalho diário tornam-se desenvolvedores em potencial documentos HTML.

Criar uma página da Web no Word posso dois caminhos: usando um assistente ou modelo, ou convertendo um documento existente Formato Word para HTML. Ao mesmo tempo palavra gera tags HTML , embora não de forma ideal.

Primeira maneira criando HTML -documents é bastante simples - você precisa começar a criar um documento "do zero" e apenas seguir os conselhos do Assistente e usar as ferramentas que estão disponíveis no menu do programa.

Segunda via- converter um documento existente Tags de palavra para HTML ao salvar um arquivo Palavra em formato HTML . A transformação naturalmente leva ao fato de que alguns elementos do design do documento serão perdidos ou alterados.

Uma das características distintivas HTML -documents é que o próprio documento contém apenas texto, e todos os outros objetos são incorporados no documento no momento em que é exibido pelo Browser usando tags especiais e armazenados separadamente. Ao salvar HTML -arquivar no local do documento Palavra cria uma pasta no disco na qual coloca os elementos de design gráfico que o acompanham. Por exemplo, ao salvar um arquivo com imagens - Fritas. htm , o Word cria uma pasta frieds .files , no qual colocará todos os desenhos.

Portanto, ao criar um site - um grupo de rede -pages, é recomendável colocar o site em uma pasta separada e, ao mover ou publicar o site, preservar estritamente toda a estrutura de pastas internas.

Ao preparar a publicação na Internet de materiais criados em Palavra , é útil conhecer os recursos de conversão para o formato HTML . Alguns deles são apresentados abaixo (Tabela 8.1).

Tabela 8.1

Elemento do documento Palavra	transformaçãoPalavra® HTML
Tamanhos de fonte	Em palavra são exibidas fontes de 9 a 36 pontos. Tamanhos de fonte HTML mude de 1 para 7 e sirva de indicação ao Browser sobre o tamanho da fonte
Efeitos de texto: levantadas, sombreadas, compactadas, etc.	Os efeitos de texto não são salvos, mas o próprio texto permanece
Estilos: negrito, itálico, sublinhado	Permanece, mas alguns sublinhados são convertidos em uma linha sólida
Animação de texto	A animação não é salva, mas o texto permanece. Para dar ao texto um efeito animado, você pode usar o ticker (painel « Componentes Web")
Gráficos	As imagens são convertidas para o formato GIF ou JPEG caso não tenham sido previamente salvos em tais formatos. As linhas são convertidas em linhas horizontais.
Gráficos: autoformas, texto artístico, caixas de texto e sombras	Os objetos são convertidos em arquivos de formato gif . No ambiente de edição rede -páginas podem ser inseridas ferramentas gráficas "Inserir" - "Figura"
mesas	As tabelas são convertidas, mas as opções não são suportadas HTML não são salvos. Por exemplo, bordas coloridas e bordas de largura variável
Numeração de páginas e cabeçalhos e rodapés	Desde que o documento HTML considerado um rede -page, então não há conceito de cabeçalhos e rodapés e a numeração não é salva
Margens da página e texto em várias colunas
Estilos	Os estilos definidos pelo usuário são convertidos em formatação direta, se suportados HTML

Se necessário, insira em HTML -tags próprias da página, Palavra direto edição HTML-código. Isso pode ser feito chamando a janela do editor através do menu "Visualizar" - "Fonte HTML ". Antes de mudar para este modo, você deve salvar o arquivo. Depois de terminar a edição antes de fechar a janela, o arquivo também precisa ser salvo.

Outra possibilidade é abrir o documento no Browser e chamar o menu "View" - "As HTML ". Por padrão, a edição é feita no Bloco de Notas.

Embora a palavra exibe o documento quase da mesma forma que aparecerá mais tarde no Navegador, visualize rede -document pode ser executado sem sair palavra.

TERMOS BÁSICOS

ASCII ( americano padrão Código para em formação Intercâmbio– Código Padrão Americano para Intercâmbio de Informações) – um código de sete bits para representar informações textuais.

gif ( Gráficos Intercâmbio Formato- formato de intercâmbio gráfico) – usado para imagens nítidas de baixa cor, suporta áreas transparentes e animação.

HTML ( Hiper Texto marcação Língua) é uma linguagem de marcação de hipertexto.

JPEG ( articulação Fotografia Especialistas grupo- grupo conjunto de especialistas em processamento mecânico de imagens fotográficas) - Um formato gráfico de bitmap comum que é ideal para fotografias digitalizadas.

rede- página ( rede-página) – documento eletrônico, destinado à colocação (hospedado) na Internet.

rede- local ( rede-local na rede Internet)- conjunto de Web -páginas vinculadas por tópico, hiperlinks e localização próxima na Internet.

Servidor Web (Web -server) - um servidor destinado a hospedagem rede - sites na Internet e prestação de serviços a pedido dos clientes.

WYSIWYG ( O que Vocês Ver É O que Vocês PegarO que eu vejo é o que eu tenho - um tipo de editores em que o documento é exibido como será impresso ou apresentado na Internet.

TAREFA #8
Tema: Criação rede -site baseado em aplicativos de software
em escritório ( Palavra E sobressair )

Parte 1. Criar um grupo rede-método de conversão de página
documentos emescritório

1. No disco de trabalho, prepare uma pasta para colocar seus documentos.

2. Crie um documento do Word com o seguinte conteúdo.

Cabeçalho principal, como um objeto WordArt:

Em seguida, coloque o texto:

E crie um índice, consistindo, por exemplo, em 2 parágrafos.

Meus hobbies

Meus amigos

3. Confira o documento e salve-o em sua pasta no disco rígido com o nome main.doc

4. Crie um documento do Word dedicado aos seus hobbies. Salve o documento com um nome hobby.doc na sua pasta. O documento deve ser formatado, ter rodapé e, além do texto, conter imagens.

5. Crie um livro Excel com uma tabela de acordo com o exemplo fornecido (Fig. 8.2), salve sob o nome amigos.xls.
Para calcular os valores médios deve ser usado fórmulas.

Meus amigos
Nome	Idade	Crescimento	Peso
Vasya
Zina
Kolya
Lena
Quer dizer	27,5	176	71,75

Arroz. 8.2. Exemplo de tabela para um arquivo amigos.xls

5.1. Construir gráficos ilustrando os detalhes de seus amigos. Organize gráficos sob a mesa, ajuste o tamanho da tabela e dos gráficos.

5.2. Preparar folha para impressão:

5.2.1. Personalize as configurações da guia “Página…” no modoVisualizar, crie cabeçalhos e rodapés.

6. Estabeleça links entre documentos usando hiperlinks.

6.1. Abra o documento principal main.doc e, sequencialmente, destacando os títulos das seções, atribua hiperlinks a eles ("Menu - Inserir") aos documentos relevantes.

7. Marcar o cabeçalho no documento principal Meus hobbies . Dê o nome de "Hobby". Salvar documento.

8. Crie hiperlinks no final de cada documento de suporte para retornar ao documento principal.

8.1. Prepare um desenho para garantir o retorno dos documentos de suporte ao principal. Por exemplo, uma imagem pode ser obtida criando uma cópia gráfica da janela ativa no buffer (Alt+PrintScreen) e editando a imagem no editor Paint.

8.2. Insira uma imagem no final de cada documento e anexe um hiperlink ao documento main.doc atrás dele. No arquivo hobby.doc o hiperlink deve fornecer uma transição para a guia "Hobby".

10. Criar um grupo relacionado rede-pages, convertendo documentos preparados .

10.1. Preparar pasta para rede -documentos nomeados Minha_web.

10.2. Abrindo consistentemente documentos previamente preparados, salve-os em uma pasta Minha _Web, especificando
Tipo de arquivo: Página da Web (*.htm; *.html)

10.3. Feche todos os documentos, analise as alterações que ocorreram na estrutura de pastas.

11. Navegue na Web -documentos de a Principal. htm . Analise quais elementos de documentos mudaram ou desapareceram completamente. Faça uma tentativa de seguir um hiperlink. Certifique-se de que as conexões entre rede -páginas precisam de edição.

12. Editar rede -documentos, alterar hiperlinks, executar design adicional.

Atenção:Para alternar do navegador para o modo de edição, você precisa usar o menu "Arquivo" - "Editar em Microsoft Word para Windows" ou o botão na barra de ferramentas.

13. Salve e feche todos os documentos, copie a pasta Meu _ Web para dirigir A : . Envie seu trabalho rede -páginas para o professor.

Parte 2. Criação de novos rede-documentos usando
formulários emescritório

1. Familiarize-se com a estrutura e composição de um documento de hipertexto de várias páginas que combina quatro páginas (consulte o Apêndice).

2. Criar pasta com nomeapresentação, e nele uma pasta para seus desenhos -Galeria.

3. Prepare desenhos para inclusão nas páginas apropriadas. Salve-os em uma pastaGaleriacomo arquivos separados bmp, gif ou qualquer outro formato usado na Internet. Preste atenção ao tamanho das imagens e ao tamanho dos arquivos. O tamanho do arquivo não deve exceder 3 - 10 KB.

4. Crie um arquivo separado para cada página usando um processador de texto Palavra (p.1,2,4). Para a página 3, use o arquivo finalizado amigos. htm. Salvar arquivos no formato htm ou html em uma pasta apresentação.

4.1. Iniciar processador de texto Palavra e use-o para criar uma página principal, salve o arquivo no formato html sob o nome índice. htm.

4.1.1. Ao criar um documento estruturado, é recomendável usar uma tabela. Após colocar os objetos, retire a moldura da mesa.

4.1.2. Preencha o documento. Para títulos principais, use object arte da palavra , para outros - Estilo de título

4.1.3. Para desenhar o plano de fundo, use um dos métodos de preenchimento de textura (menu "Formato" - "Plano de fundo" - "Métodos de preenchimento") ou desenho temático (menu"Formato" - "Assunto").

4.1.4. Visualize no navegador as alterações na estrutura de pastas que ocorreram ao salvar rede -Páginas. Abra a página criada, edite-a se necessário.

4.2. Crie a segunda página do site usando o editor palavra.

4.2.1. Para criar um documento, use o item de menu"Arquivo" - "Criar", na caixa de diálogo aberta"Criar Documento"selecionar guia"Páginas WEB" e o ícone "Nova página WEB" . Mantenha limpo REDE - uma página em uma pastaapresentaçãodando um nome à página língua Inglesa infância. htm

4.2.2. Use como título "Minha infância" linha de corrida exibindo o pré-painel rede -componentes. Familiarize-se com os parâmetros do Ticker, configure-o para que não apareça mais de 2 vezes.

4.2.3. Faça marcação para colocar objetos usando uma tabela.
Colar imagem da pastaGaleria.

4.2.4. Decore o plano de fundo da página usando um preenchimento de gradiente de duas cores. Escolha cores próximas à cor da textura ou tema da página principal.

4.3. Crie uma terceira página com base no arquivo criado na Parte 1 amigos. htm.

4.3.1. Copie um arquivo e sua pasta acompanhante para uma pastaapresentação.

4.3.2. Abra o arquivo no navegador, certifique-se de que o documento seja exibido corretamente. Edite se necessário.

4.4. Crie a quarta página do site usando o editor palavra.

4.4.1. Prepare um desenho - uma vista do edifício GUT do lado do Moika (encontre o antigo site do GUT). Salve a imagem em uma pastaGaleria.

4.4.2. Criar arquivo na pastaapresentação, Com nome universidade. htm.

4.4.3. Insira uma imagem no arquivo - uma visão do edifício GUT, previamente salva na pasta Galeria. Copie ou digite o endereço de e-mail da universidade. Escreva algumas frases sobre sua faculdade e insira um hiperlink para o site da faculdade.

5. Estabeleça links entre os documentos do site.

5.1. Aberto em Palavra documento índice. htm, e destacando sequencialmente os parágrafos do "Conteúdo", inserir hiperlinks para os documentos relevantes.

6. Insira uma imagem () no final de cada um dos documentos. Crie hiperlinks que forneçam um retorno ao documento principal, corrigindo por trás da imagem.

Atenção! A imagem das transições para a página principal também deve estar na pastaGaleria.

8. Visualize o conteúdo de cada um dos arquivos recém-criados no formato HTML.

8.1. Encontre tags que proporcionem a inserção de hiperlinks, imagens.

9. Copiar pastaapresentação com todo o seu conteúdo na unidade A: ou na unidade C: para a pasta Temp . Teste seu site iniciando-o de um novo local.

10. Apresente seu site ao professor, comece a visualizá-lo na página principal.

Apêndice

Estrutura do site