1.

COMO DESENHAR UMA CAIXA

RETANGULAR EM TORNO DO SEU CONTEÚDO
NO BLUEGRIFFON
A. Como colocar texto e / ou imagens dentro de uma caixa na sua
página da web

2. COMO DESENHAR UMA CAIXA

RETANGULAR EM TORNO DO SEU CONTEÚDO
NO BLUEGRIFFON
por Christopher Heng, thesitewizard.com

Às vezes, você pode agrupar um bloco de texto e / ou imagens e separá-los

do restante do conteúdo desenhando linhas em torno dele, para colocá-los
em uma caixa. A caixa retangular funciona como uma espécie de inserção,
enfatizando seu conteúdo ou marcando-o como um aparte informativo. Este
artigo mostra como criar uma caixa usando o editor da web BlueGriffon.

A. Preâmbulo

 Assumirei que você já possui um site neste artigo, com uma página
existente onde deseja colocar a caixa. Se isso não for verdade,
comece do início, com Como criar um site .

 Você também deve saber como usar o BlueGriffon. Você não precisa

ser um especialista, mas precisará saber, no mínimo, como carregar
uma página da Web existente no editor e como inserir seu conteúdo
nela. Este artigo trata apenas da tarefa de desenhar a caixa. Se você é
novo no BlueGriffon, pode começar com o tutorial principal
do BlueGriffon .

 Se você normalmente usa outro editor da Web (ou se usa software de

blog ) e não se importa de mexer diretamente com HTML e CSS , não
há necessidade de mudar para o BlueGriffon apenas para desenhar
uma caixa. Por favor, leia Como criar uma caixa retangular para conter
seu texto / imagens com CSS .

B. Como desenhar uma caixa em torno do seu conteúdo

O procedimento abaixo funciona se você deseja colocar um único parágrafo
de texto, vários parágrafos, imagens, outro conteúdo multimídia ou uma
mistura deles em uma caixa.

No momento em que escrevo isso, pelo menos para o BlueGriffon versão 3.1
e anterior (tanto quanto eu sei), não há como desenhar uma caixa em torno
do conteúdo existente usando a interface do usuário. Ou seja, você não pode
simplesmente selecionar os parágrafos desejados e fazer com que o editor
desenhe as linhas de uma caixa retangular ao redor dele. Você terá que fazer
isso manualmente. Uma maneira é desenhar a caixa separadamente e, em
seguida, recortar e colar o conteúdo existente nela. Como alternativa, se você
ainda não escreveu (ou inseriu) seu conteúdo, desenhe a caixa primeiro e
digite-a diretamente.

1. Inicie o BlueGriffon e abra a página da web relevante.

2. Clique para colocar o cursor de texto no local onde deseja que a caixa
apareça. Se o local ainda não existir, porque você ainda não o
conheceu, basta criar um parágrafo vazio na página em que a caixa
deve ser colocada e deixar o cursor lá.

3. Clique em "Inserir | Elemento HTML 5 | div" no menu. Ou seja, clique

em "Inserir" na barra de menus, seguido de "Elemento HTML 5" no
menu suspenso exibido. Um submenu longo será exibido. Clique em
"div" nessa lista.

Por uma questão de brevidade, continuarei a usar esta convenção

para descrever a tarefa de clicar nos itens de menu. Por exemplo, se
eu disser para clicar em "Arquivo | Salvar" no menu, significa clicar em
"Arquivo" na barra de menus, seguido de "Salvar" no menu suspenso
exibido.

4. Parece que nada vai acontecer, mas, por baixo do capô, o editor
inseriu o que é comumente chamado de "bloco DIV" nesse local. O
bloco DIV não tem aparência específica e, portanto, é invisível. Vamos
agora desenhar linhas ao redor das bordas do bloco. Não mova o
cursor do texto.

Clique em "Painéis | Propriedades do estilo" no menu para abrir o

painel Propriedades do estilo. (Ignore esta etapa se o painel
Propriedades do estilo já estiver aberto. Se essa frase chegar tarde
demais para você e você inadvertidamente fechou o painel, basta
clicar em "Painéis | Propriedades do estilo" novamente para abri-lo
novamente.)

2
5. Na parte superior do painel Propriedades do estilo, altere o campo
suspenso para "Aplicar estilos a" de "este elemento apenas através de
seu ID" para "todos os elementos da classe ...". Um novo campo
aparecerá, onde você terá que nomear a classe. Digite "boxedcontent"
(sem as aspas) neste novo campo.

Observe que "boxedcontent" é apenas um nome que inventei para

este artigo. Você pode criar seu próprio nome, se desejar. Para
máxima compatibilidade com todos os navegadores, antigos e novos,
o nome deve começar com uma letra do alfabeto inglês e conter
apenas letras, números e os números "-", "_" e "." personagens. Não
coloque espaços no nome.

6. Expanda a seção "FRONTEIRAS" no painel Propriedades do estilo,

clicando nessa palavra. Se parte do painel estiver cortada por ser
maior que o espaço alocado, aumente a largura do painel para poder
ver tudo. Para fazer isso, passe o mouse sobre a borda esquerda do
painel até que o ponteiro se torne uma linha horizontal com 2 setas,
apontando em direções opostas. Mantenha pressionado o botão
esquerdo do mouse e mova o mouse para a esquerda para ampliar o
painel.

3
7. Clique para colocar o cursor no campo em branco mais à esquerda,
logo abaixo da caixa de seleção "Usar a mesma borda nas quatro
bordas". Digite "1px" (sem as aspas).

8. Clique no campo adjacente e selecione "Sólido" na lista suspensa.

Se você olhar sua página da Web, verá que o editor agora mostra uma
caixa desenhada com linhas com 1 pixel de espessura. Se a linha for
muito fina para o seu gosto, altere o "1px" digitado anteriormente para
algo maior (por exemplo, "2px" para 2 pixels, "3px" para 3 e assim por
diante). Verifique se não há espaços entre o número e a unidade de
medida ("px"). Por exemplo, "2px" está correto, enquanto "2 px" está
errado.

9. Agora role o painel Propriedades do estilo e expanda a seção

GEOMETRIA. Procure a área cinza ("cinza" se você usar a ortografia
variante ) com a palavra "Preenchimentos" na parte superior.

4
 Insert "8px" (without the quotation marks) into the field directly under
the word "Content" and just above the ticked box that says "Same four
paddings".

This puts a bit of space between the lines and the content. If you find
later that this space is too wide or too narrow, return to this field and
adjust the number accordingly. For example, if you want a bit more
space, change "8px" to (say) "10px".

10. If you have not created any content for the box yet, and want to type
text into it, click to put your text cursor in the box. If you want to insert
more than one paragraph of text, change "Body Text" in the toolbar at
the top of the page (see picture) so that it now says "Paragraph".

After you do that, you will have to click the empty space in your boxed
area again before typing. BlueGriffon (at least up to version 3.1) will
ignore any words you type if you don't, even though your text cursor is
still in that box.

As I'm sure you have observed, changing "Body Text" to "Paragraph"

adds even more space above and below your text. However, you will
need to do it, otherwise when you hit the ENTER key (or RETURN key

5
 on the Mac) to make a new paragraph, BlueGriffon will instead create a
new box.

If you want to cut and paste multiple paragraphs of text into the box, or
a mixture of text and pictures, it may be best to change the "Body Text"
setting to "Paragraph" before doing anything. Then cut and paste a
single paragraph at a time, and create new paragraphs manually.
Otherwise, depending on how you select (ie, highlight) your original
paragraphs before cutting, you may end up with a single big paragraph
when pasting.

In actual fact, you can cut multiple paragraphs and successfully paste
them while preserving its original formatting, if you select (ie, highlight)
the invisible paragraph marker at the end of the source text. If this
makes sense to you, and you know how to do it, go ahead and do it
this way if you wish. Otherwise, do it paragraph by paragraph, as I
mentioned above.

In addition, if all the cutting and pasting has left the remaining text
outside the box somewhat wrongly aligned (for example, it has lost its
paragraphing and perhaps even indentation), click to put the text cursor
there and make sure that the toolbar at the top of the page has
"Paragraph" instead of "Body Text" set. If not, click the drop down box
and select "Paragraph".

That's it. Test the page in a web browser to see the results.

Copyright © 2020 Christopher Heng. All rights reserved.

Get more free tips and articles like this, on web design, promotion, revenue
and scripting, from https://www.thesitewizard.com/.

You are here: Top > BlueGriffon > How to Draw a Rectangular Box Around

Your Content in BlueGriffon

Other articles on: BlueGriffon, HTML, CSS

3. THESITEWIZARD™ NEWS FEED (RSS SITE

FEED)  
Do you find this article useful? You can learn of new articles and scripts that
are published on thesitewizard.com by subscribing to the RSS feed. Simply
point your RSS feed reader or a browser that supports RSS feeds
at https://www.thesitewizard.com/thesitewizard.xml. You can read more about
how to subscribe to RSS site feeds from my RSS FAQ.

6
4. PLEASE DO NOT REPRINT THIS ARTICLE
This article is copyrighted. Please do not reproduce or distribute this article in
whole or part, in any form.

5. RELATED ARTICLES
 How to Put a Background Image on Your Website with BlueGriffon
 How to Use Google Fonts and Other Web Fonts in BlueGriffon
 How to Add a CAPTCHA Test to Reduce Spam from Your Contact Form
 How to Add a (Self-Hosted) Video to Your Website with BlueGriffon
 How to Move Your Website to SSL/TLS (ie, Convert from HTTP to HTTPS)
 What To Do If You Do Not Own Your Website's Domain Name
 How to Register Your Own Domain Name
 How Do You Get Access to a Domain Name You Just Purchased? What to
Do After You Buy a Domain Name

6. NEW ARTICLES
 How to Draw a Rectangular Box Around Your Content in BlueGriffon
 How to Insert a Bullet Point (Unordered) List with BlueGriffon
 How to Start a List with a Number Other than 1 and Still Have it Automatically
Numbered (HTML)
 What to do if a registrar quotes an exorbitant price for a domain
 How to Rotate an Image on a Website When Viewed on a Mobile Phone
(CSS)
 Can I Change My Website's Address to HTTPS Without Getting an SSL
Certificate?
 How to Add a (Self-Hosted) Video to Your Website with Expression Web
 What's the Difference Between a Domain Name Registrar and a Web Host?
 How to Make a Mobile-Friendly Website: Responsive Design in CSS
 What's the Difference Between a Content Management System (CMS), a
Blog, a Web Editor and an Online Site Builder?

7. POPULAR ARTICLES
 How to Create a Blog
 How to Make / Create a Website: The Beginner's A-Z Guide
 Tips on Choosing a Good Domain Name
 Expression Web Tutorial: How to Design a Website with Microsoft Expression
Web
 Tutorial do Dreamweaver: Como criar um site com o Dreamweaver CS6
 Tutorial do BlueGriffon: Como criar um site com o BlueGriffon 3
 Como criar e publicar seu site com o KompoZer (editor da web gratuito
WYSIWYG)

7
  Assistente de Feedback / Formulário de Contato Gratuito

8. COMO SE CONECTAR A ESTA PÁGINA

Para criar um link para esta página no seu site, basta recortar e colar o
seguinte código na sua página da web. (Alterne para o modo de fonte HTML
do seu editor da web antes de colar.)

Ele aparecerá na sua página como:

Como desenhar uma caixa retangular em torno do seu conteúdo no

BlueGriffon

Direitos autorais © 2020 Christopher Heng. Todos os direitos reservados.

thesitewizard ™, thefreecountry ™ e HowToHaven ™ são marcas comerciais de
Christopher Heng.
Esta página foi atualizada em 21 de maio de 2020.

Este site utiliza cookies. Detalhes    Fechar  

Procure este site

 

Casa
Doar
Contato
Link para nós
Política de Não Spam
Política de Privacidade
Tópicos
Mapa do site

Começando
Designer de Web
Mecanismos de pesquisa
Produção de receita

8
 Domínios
Hospedagem na Web
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
boletins informativos
Geral
Sazonal
Avaliações
Perguntas frequentes
Assistentes

Achar este site útil?

Por favor, link para nós .