Css De Base En Adobe Dreamweaver

html css tutorial de base et en Adobe Dreamweaver

Ce tutoriel est destiné à introduire les concepts de l'utiLisation de css Adobe Dreamweaver et html pour les concepteurs de sites Web qui ne sont pas famiLiers avec les css de web design. Css signifie feuille de style en cascade et un système pour ajouter un style à votre site Web et le contenu de la page.

Après la lecture de ce css tutorial vous devriez avoir un sentiment de savoir comment utiLiser en css Dreamweaver. Dans ce tutoriel, nous allons créer un document vide, Créer un style css, Aa div insérer à la page, Insérer une image, Et puis créer un menu de navigation rapide et d'attribuer des propriétés CSS pour les éléments de la page. Le programme utiLisé dans ce tutoriel et des captures d'écran est Adobe Dreamweaver CS3.

Abraham Chaffin CreativeCow.net, Cambria, CaLifornia USA © 2007 CreativeCow.net. Tous droits réservés.

html documents:
Créer un nouveau document vierge, puis enregistrez-le pour commencer votre travail. J'ai tendance à toujours enregistrer les documents avant de faire quoi que ce soit pour que je puisse rapidement mettre de temps en temps en utiLisant le raccourci clavier (cntrl + s). Lorsque vous créez un document vierge dans Dreamweaver votre page web est déjà contenu dans ce, Vous ne pouvez pas la voir en mode design. Pour afficher le contenu que vous pouvez utiLiser le raccourci (cntrl + ~) pour basculer entre le mode de conception et de code ou aller à la vue du menu code ou afficher le menu design.

Vous devriez voir ce que devrait ressembler à quelque chose comme ça:

C'est le début de votre html document, il est constitué de plusieurs baLises. Le début de chaque baLise ressemble Cet et la fin de chaque baLise ressemble / Cet. L'ensemble du document est composé de la html Tag ci-dessus, il ressemble à html xmlns = " http://www.W3.org / 1999/xhtml " car il a un xmlns modifier dans ce. La baLise de fin est à la base du document / html. Entre le début et de fin html Tag, il ya deux principales baLises et les baLises Corps head. La baLise head on ne voit pas, mais fournit de nombreux éléments essentiels et les modificateurs de ce que la baLise Corps ressemblent à des éléments. Le contenu de la baLise Corps est le contenu qui est effectivement visible par l'intermédiaire de votre navigateur.

Css éléments:
Avant de nous insérer d'éléments permettent de créer un style css. En appuyant sur (Shift + F11) permet de basculer le cadre de styles CSS ou vous rendre à modifier le menu de style css. En bas à droite il ya une petite icône qui ressemble à . Ce qui porte le â € œnew css ruleâ € la boîte de dialogue. Pour commencer nous allons affecter une règle css pour la baLise Corps et de faire de la couleur d'arrière-plan un blanc cassé au Lieu d'un blanc. Sélectionnez "tag" à la "sélecteur de type« radio. De la "tag" dropdown menu, sélectionnez le «corps» du sélecteur. Sélectionner "ce document que" pour la "définition de" la radio et de cLiquer sur "ok".

Une fois que vous aurez cLiqué sur le bouton "ok" Dreamweaver ajoute le code dans votre html la préparation de fichier à modifier en utiLisant la baLise Corps css.

Ce qui entraînera la "définition de la règle css corps" fenêtre de dialogue vous permettant de définir vos choix de la «background» de la catégorie de la colonne et choisissez un très léger fond jaune avec le sélecteur de couleur ou # ffffcc type dans la presse et "ok".

Appuyant sur la touche "ok" exécuté Dreamweaver de modifier le css corps Sélecteur Par l'insertion d'un Background-Couleur Propriété Et un Valeur # de ffffcc.

Il ya beaucoup d'autres propriétés que vous pouvez attribuer à l'organe ou le sélecteur, vous pouvez le modifier en utiLisant le cadre de styles CSS:

Div tags:
Retour à la vue de conception (cntrl + ~) et nous allons insérer une baLise div en allant dans le menu Insertion layout objets div tag, Cela apportera la â € œinsert div taga € la boîte de dialogue. (div tags sont les baLises les plus couramment utiLisés pour tenir les différents éléments d'une page Web conçue avec css, comme les images, Texte, Ou des vidéos.)

Le premier champ dans le "insérer div tag" boîte de dialogue est l'insert: Champ. C'est le domaine qui désigne le cas de la baLise div sera inséré dans le html page. Par défaut, il fixe à "au point d'insertion", qui désigne la baLise div sera insérée là où le curseur a été placé dans la page web. Vous pouvez également choisir "après le début de la baLise" ou "avant la fin de la baLise" à la place de votre div tag à un autre endroit.

Prochain, vous trouverez la "Classee:Champ qui est un domaine qui concerne directement votre css règles. Css une Classee a un sélecteur avec une période à l'avant de celui-ci comme ".Classe". Classes sont utiLisées pour attribuer un ou les propriétés à de nombreux articles dans une page Web. Nous n'avons pas encore les Classees définies dans le présent document afin qu'il n'y ait rien que nous puissions attribuer encore. Le "id:»Est également vide, car il n'y a pas de sens dans notre ids css. Identifiants sont utiLisés pour attribuer un ou les propriétés à un seul point dans une page web et dans le code css a un Livre avant de signer comme "# id". Car nous n'avons ni de cLiquer sur "nouveau style css" et nous allons définir une nouvelle règle.

Cette fois, sélectionnez "Classee" que le sélecteur de type, Tapez "CoolClasse" comme, Sélectionnez «ce document» et appuyez sur "ok". Nous allons définir la couleur de fond de cette Classee avec une cool couleur bleu en sélectionnant l'option "fond" dans les catégories et en fixant le "fond" à quelque chose comme # 00ccff. Maintenant la couleur de bordure d'une fine Ligne noire en cLiquant sur "frontière" de la catégorie et ensuite choisir le style soLide que dans le menu déroulant et de 1 pixel de la largeur et le noir (# 000000) que la couleur. Ou vous pouvez être plus créatifs si vous choisissez. Maintenant, nous allons définir un peu de rembourrage dans notre règle en cLiquant sur "box" dans la colonne de la catégorie et le type "5" pour le "top: Padding "ce qui attribuer le rembourrage non seulement pour le top, mais pour toutes les parties, si vous quittez la" même pour tous », la case cochée. Appuyez sur "ok" et Dreamweaver permettra de créer une nouvelle Classee de votre règle de style css tag avec trois propriétés.

Votre "insérer div tag" boîte de dialogue est également sa Classee peuplée de domaine "Cooltag" - cLiquez sur "ok" et Dreamweaver va écrire du code dans votre page web avec de la place titulaire du Textee à l'intérieur de la nouvelle div tag.

Div ce sera notre Classee que nous avons attribué à la baLise div et que tous les éléments à l'intérieur de la baLise.

Images:
Maintenant, nous allons insérer une image et de l'assigner à notre Classee, il.
Placez votre curseur à l'extérieur de la div en cLiquant n'importe où en dehors de celui-ci à l'intérieur de la page Web. Dans le menu Insertion aller à l'image (cntrl + alt + I). Choisir n'importe quelle image que vous avez mai disponible sur votre ordinateur et appuyez sur "ok". Vous pouvez sauter la prochaine boîte de dialogue en cLiquant sur "ok"; Dreamweaver placera l'image dans votre page Web. CLic droit sur l'image et sélectionnez dans le menu css styles CoolClasse. Ce qui attribuer la Classee pré défini à l'image, lui donnant la couleur de fond, Padding, Et nous avons attribué à la frontière ".CoolClasse". Adobe Dreamweaver insérez le code devrait être similaire à ce:

Puissance de css:
Ce qui rend puissant css est la capacité de revenir en arrière et apporter des modifications à votre style une fois et avoir effet tous les éléments que vous avez attribué le style de. Dans le cadre de styles CSS, vous devriez voir "toutes les règles" et votre style ".CoolClasse". CLiquez sur le .CoolClasse sélecteur et ensuite sur la valeur de la couleur d'arrière-plan (# 00ccff). à l'aide du sélecteur de couleur de choisir une couleur différente, Telles que (# 66ffff). Vous êtes maintenant en utiLisant css Dreamweaver. Le seul code qui a été changé dans le css et il a été appLiqué à la fois à l' div et le img.

La création d'un menu de navigation rapide
Maintenant avec le contenu de la baLise div nous casser en dehors et d'en faire une Liste de navigation.

Mettre chaque mot sur sa propre Ligne en appuyant sur la touche entrer avec votre curseur Entre chaque mot. Mettre en valeur tous les mots et cLiquez avec le bouton droit, puis sélectionnez la Liste Liste à puces. Vous avez maintenant une Liste à puces, mais nous avons besoin d'appLiquer des styles à ce que nous devons créer une règle.

CLiquez sur le bouton ajouter css Du cadre de styles css. Il existe de nombreuses façons d'affecter le style à la Liste, Nous pourrions créer une nouvelle Classee appeler quelque chose comme ".ListClasse "et de les appLiquer à chaque baLise de Li Li Classe="ListClasse" , mais pour cet exemple, nous allons créer une règle pour tous les tags Li. Sélectionnez «Advanced» et la radio de type «Li» dans le sélecteur de champ. "Li" est le sigle de la Liste. Sélectionnez «ce document» et appuyez sur "ok".

Nous allons enlever la balle, Faire de la couleur de la poLice et le blanc font le poids en gras. Avec la catégorie choisie choisir le type de gras le "poids" déroulante et choisissez le blanc (# ffffff) pour la couleur. à partir de la Liste choisir aucune catégorie de la "type" Liste déroulante et appuyez sur "ok". Adobe Dreamweaver créé dans le code css qui touche laLiTag.

D'avoir une bonne nav menu les éléments que vous devez changer la souris sur les. Pour ce faire nous avons besoin d'ajouter un comportement. Aller à la fenêtre de menu comportements (Maj + F4). Afficher tous les événements en cLiquant sur "Afficher tous les événements" bouton . Assurez-vous que votre curseur se trouve dans l'un des éléments de Liste si le comportement est appLiqué à l'élément de la Liste et non pas quelque chose d'autre. Onmouseover dans le type de champ Cet.Classname = 'CoolClasse'. "ce" fait référence à la baLise "Li" Classename raconte le navigateur que vous voulez changer la Classee de CoolClasse. Onmouseout dans le type de champ Cet.Classname ='' (que les deux marques pas un devis). Ce qui rend le retour du navigateur le nom de la Classee de la baLise Li à rien lorsque la souris se déplace hors de l'élément. Vous avez maintenant appLiqué un comportement à un élément de la Liste.

Pour obtenir le comportement pour être appLiqué à tous les éléments que vous devez répéter les étapes précédentes avec votre curseur dans chaque élément de Liste ou de copier et de coller le code dans le code vue. Le résultat final en vue de code devrait ressembler à ceci:

Avant la fin de ce didacticiel, nous devrions fixer le curseur à une main, comme il va sur la Liste, comme la navigation normale ne.
Dans le cadre de sélectionner les styles css Li. Au bas de la "propriétés" Li "est" d'ajouter la propriété ", cLiquez sur ce Lien et choisissez" curseur "dans le menu déroulant. Type de "pointer" comme valeur si elle n'est pas dans les presets.

Conclusion
Appuyez sur F12 et de vérifier ce que vous avez fait. Il risque de ne pas regarder de trop joLi, mais il devrait vous donner une idée sur la façon de css Dreamweaver travaille avec html et ce qu'il fait dans votre navigateur.

Jouer et se rappeler d'avoir du plaisir!