All Articles Dreamweaver
Création d'un texte Grande Avec CSS3 dans Dreamweaver
David Smith on Wed, February 29th 0 comments
Want to create great looking text in Dreamweaver, but feeling stifled by the CSS styles panel? David Smith comes to the rescue with CSS style tips which will set free your inner designer!

Si vous avez été en utilisant le panneau Styles CSS pour le style de vos pages web dans Dreamweaver, puis vous serez au courant des restrictions imposées sur vous en ce qui concerne la conception. Les couleurs unies, les polices standard, des formes de blocs etc Tous capacité intéressante, mais pas vraiment difficile. CSS

Donc, dans ce Im article va vous montrer un peu de CSS pour ajouter à vos styles dans Dreamweaver qui va vraiment créer des modèles formidables.

Commençons par la création d'une balise div qui contiendra ce style prodigieux de votre train de créer.


Étape 1 - Ajouter une div PA

À partir d'un document HTML vierge ouvrez le Panneau de Insertion et réglez-le sur Mise en page. De la mise en page des options choisissez Dessiner Div PA.

Div drawn

Div établi


Utilisez l'outil pour dessiner une div PA (qui est juste une balise div avec un style # ID automatiquement appliquée contenant la position et les paramètres de taille). Utilisez le panneau de propriété de la taille de la div PA avec Hauteur: 400px et largeur: 400px.


Étape 2 - Nommez la div PA

Ouvrez le panneau Eléments PA et renommez-le APDiv1 à MyStyle. Ouvrez le panneau de style CSS et vous-même qui re-nommer la div PA aussi renomme le style MyStyle ID. C'est le style que vous allez éditer.


Étape 3 - Trouvez le code CSS

Passage sur le point de vue de Split afin que vous puissiez voir à la fois l'image et le youve code créé. Faites défiler jusqu'à la section et vous verrez une section de code mis en évidence rose qui dit # MyStyle {}. Ceci est votre CSS et tous les réglages pour ce que vous êtes sur le point de créer siégera à-entre les deux {}.


Étape 4 - Ajoutez un peu de contenu

Pour enregistrer le temps de frappe, copier et coller sur un paragraphe de texte dans le Div en cliquant sur ​​le Div établi AP dans le mode Création, afin que le curseur devient actif et en appuyant sur ​​Commande-V pour coller.

rounded corners

coins arrondis


ASTUCE: Augmenter la taille du rayon d'exactement la moitié de votre largeur et la hauteur (dans ce cas 200px) et la prévisualisation à nouveau .... Hey vous obtenez un cercle parfait!


Étape 6 - fond dégradé

Ajout d'un fond dégradé est un effet design vraiment sympa, mais vous devez toujours garder à l'esprit que toutes les versions de tous les navigateurs de l'appuyer. Alors que jamais l'utiliser pour améliorer une image. Toujours concevoir les choses avec de multiples navigateurs dans l'esprit et avoir un remplissage solide également disponibles.

gradient background

fond dégradé


Le code suivant va créer ce fond dégradé:

background-color: # 666666;

background-image:-moz-linear-gradient (en haut, # 666666, # 333333 40,0%);

background-image:-webkit-gradient linéaire (en haut, # 666666, # 333333 40,0%);

fond d'image:-o-linéaire à gradient (top, # 666 666, # 333 333 40,0%);

background-image:-ms-linéaire à gradient (en haut, # 666666, # 333333 40,0%);

background-image: linéaire-gradient (en haut, # 666666, # 333333 40,0%);


Testez-le dans quelques navigateurs si vous le pouvez, pour voir l'effet. Permet enfin ajouter un peu de punch à ce texte.


Étape 7 - Améliorer le texte

Ive a ajouté M. White au texte, à faire ressortir mieux contre le gradient. Aussi Ive a ajouté Ombre portée du texte. Comme avec le Drop Shadow dégradé fonctionne uniquement avec les versions plus récentes des navigateurs Web n'avez pas toujours compter sur elle.

drop shadow

ombre portée


Ce code ajoute la Couleur de l'ombre et Drop:

color: # FFFFFF;

text-shadow: 2px 2px 3px # 000000;


Étape 8 - Mieux polices?

Enfin, j'ai ajouté un meilleur rembourrage de la police et certains, de créer un espace autour du texte.

Better text

Mieux texte


En ajoutant ces lignes:

font-weight: normal;

text-align: left;

font-family: Georgia, serif;

font-size: 18.0px;

line-height: 140%;

padding: 10px;


Voici le code que j'ai ajouté à atteindre cet objectif. Encore une fois Sa peine de vérifier la compatibilité du navigateur pour voir où un peu de code ne fonctionne pas pour certains navigateurs, et portant que, dans l'esprit lorsque vous concevez vos pages.

Les navigateurs sont mis à jour tout le temps pour soutenir CSS3 et HTML 5 donc ne vous laissez trop peur de les utiliser, juste être conscient. Quoi de plus il n'ya pas que les navigateurs Web traditionnels vous êtes en mesure de viser avec ce code tel que Safari, Chrome et Firefox, etc Il fonctionne aussi parfaitement sur iOS et Android aussi. Si cela n'est-il pas utile de votre temps alors qu'est-ce?



Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: