Des Outils de base pour le cours CSS
Description
Des Outils de base pour le cours CSSExtrait du CMS-SPIPhttp://icp.ge.ch/sem/cms-spip/spip.php?article620Des Outils de base pour lecours CSS- CSS - Outils pour Templates, Menus, etc. - Date de mise en ligne : mercredi 21 janvier 2009Description :L'étude et la maîtrise des CSS sont nécessaires pour créer des sites Web modernes. Les CSS sont devenues incontournables sur le Web et les exploiter dans lesdéveloppements est à la fois passionnant et contraignant.De nombreux outils sont créés pour nous aider dans cette activité mais ils ne remplacent pas, loin s'en faut, une connaissance approfondie des CSS. Nous enCMS-SPIPdonnons ici une liste non exhaustive et pour certains aspects, redondante.Copyright © CMS-SPIP Page 1/14Des Outils de base pour le cours CSSL'étude et la maîtrise des CSS sont nécessaires pour créer des sites Web modernes. Les CSSsont devenues incontournables sur le Web et les exploiter dans les développements est à lafois passionnant et contraignant.De nombreux outils sont créés pour nous aider dans cette activité mais ils ne remplacent pas,loin s'en faut, une connaissance approfondie des CSS. Nous en donnons ici une liste nonexhaustive et pour certains aspects, redondante. Sommaire• Les incontournables• Autres outils CSS• Générateur CSS en ligne performants (…)Les incontournablesLe cours sur les CSS fait appel à Kompozer ainsi qu'à certains « add ons » dans Firefox :• KompoZerKompoZer comporte un module performant pour ...
Informations
| Publié par | Endre |
| Nombre de lectures | 224 |
| Langue | Français |
Extrait
Des Outils de base pour le cours CSS
Extrait du CMS-SPIP http://icp.ge.ch/sem/cms-spip/spip.php?article620
Des Outils de base pour le
Description :
cours CSS
- CSS - Outils pour Templates, Menus, etc. -
Date de mise en ligne : mercredi 21 janvier 2009
L'étude et la maîtrise des CSS sont nécessaires pour créer des sites Web modernes. Les CSS sont devenues incontournables sur le Web et les exploiter dans les développements est à la fois passionnant et contraignant.
De nombreux outils sont créés pour nous aider dans cette activité mais il C s n M e r S e -m S p P la I c P ent pas, loin s'en faut, une connaissance approfondie des CSS. Nous en donnons ici une liste non exhaustive et pour certains aspects, redondante.
Copyright © CMS-SPIPaPge 1/14
Des Outils de base pour le cours CSS
L'étude et la maîtrise des CSS sont nécessaires pour créer des sites Web modernes. Les CSS sont devenues incontournables sur le Web et les exploiter dans les développements est à la fois passionnant et contraignant.
De nombreux outils sont créés pour nous aider dans cette activité mais ils ne remplacent pas, loin s'en faut, une connaissance approfondie des CSS. Nous en donnons ici une liste non exhaustive et pour certains aspects, redondante.
Sommaire • Les incontournables • Autres outils CSS • Générateur CSS en ligne performants (…)
Les incontournables
Le cours sur les CSS fait appel à Kompozer ainsi qu'à certains « add ons » dans Firefox :
• KompoZer KompoZer comporte un module performant pour générer et intégrer les CSS à HTML . • Téléchargement en anglais • Description et téléchargement en français sur geckozone.org • Tutoriel de Kompozer • Présentation de Kompozer par Framasoft
• Modules Firefox Les modules complémentaires étendent Firefox en vous permettant de personnaliser votre navigation
• DEUX « ADD ONS » FIREFOX ESSENTIELS : • Webdeveloper -add on Firefox • Selon SS : « Web Developer est probablement l'un des meilleurs modules complémentaires (add-ons en anglais) pour Firefox. Ce module s'ajoute à Firefox en tant que barre d'outil et permet aux développeurs Web de tester leurs créations avec différents paramètres. Il permet notamment de désactiver Javascript, les Cookies ou les styles (CSS), permet de faire différentes interactions avec les formulaires, obtenir de l'information spécifique sur les images ou même les désactiver. Il permet également de redimensionner le navigateur pour simuler un écran de 800 x 600 pixels, ou même de valider les CSS, le code HTML, les liens, etc. Tout développeur Web devrait à mon avis se servir de cet excellent outil de vérification ». • Selon Framasoft : « Cette extension pourrait être définie comme « le couteau suisse pour webmestres ». L'utilisation la plus « spectaculaire » est sans doute celle qui concerne les CSS, voir plus bas. Mais les autres possibilités ne sont pas à négliger. Petite revue des menus : Dans le premier menu, Désactiver, vous pourrez par exemple
Copyright © CMS-SPIPaPge 2/14
Add ons Firefox également intéressants : • • CSS validator -add on Firefox by Michael Langley, Web Development Validates a page using the W3C CSS Validator. https://addons.mozilla.org/en-US/firefox/addon/2289
•
• Firebug -add on Firefox http://extensions.geckozone.org/FireBug https://addons.mozilla.org/fr/firefox/addon/1843 • Cette extension est un débuggeur évolué pour le navigateur Firefox. • FireBug vous permet d'explorer par clavier ou souris les coins les plus reculés du DOM. Tous les outils dont vous avez besoin pour fureter, produire et controler votre JavaScript, CSS, HTML et Ajax sont rassemblés ensemble à travers une seule extension, incluant un débuggeur, une console d'erreur, une ligne de commande, et une variété d'inspecteurs intéressants... • Un rapide aperçu des fonctionnalités de FireBug • Un débuggeur JavaScript pour naviguer pas à pas dans le code une ligne à la fois, • Un icône de barre d'état qui permet de voir rapidement s'il y a une erreur dans la page web, • Une console qui montre les erreurs JavaScript et CSS, • Messages de Log de JavaScript dans votre page web sur la console (adieu « alert debugging »), • Une ligne de commande JavaScript (fini « javascript : » dans la barre URL), • Un espion du trafic XMLHttpRequest, • Un inspecteur de source HTML, styles associés, évenements, mise en page et le DOM.
4/1 3gehg t ©MC-SPSPIaPCopyriDese lurpoCSs urco slituO esab eduoc sel ed sruelgepaa lusvo, »rrzep uodesém mêver acti lestousfni amronoit •.surPooique ns paeraptrrid eézor et « désactiverlet feefn eé,itsnad tpircsavaJ ut ms pepage vosnisereatrec sauqvetiler DS•acés,tpiitu vaJ rcsarme de tle en teecssbilise t'dcaaîare.tr&h• lielel rov sr rippaéur de popups poucaitev rellbqoeuisisho cés"dz se? tneuqnneib te pupss pos ma vouF risize ,elfexo suolituq siv eu• e)puDeexe rnte eefiulléi s ànue, ceuxls la pagnad sulcni xuec :seciré ponaç f eedtec eg( aapde lCss les sty x -eW beDevolepr.• Firefox : We rapmarFfosa •.tteExionsFin foresercsed sn: tioib De• Weper veloirhc rueciredeps Em•cok.ntleelxcay 19, 21.1.6, Medl a'tu00S8ti e:Wt deebrghaenemsreV noiolev repCSS&les sur ion lécé•»T pi ;ehllexl'r oi vet• p;tasilitu'd elpme
• Firebug -add on Firefox by Joe Hewitt, Justin Dolske, others, Web Development Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page… Firebug 1.3 requires Firefox 2 or 3. https://addons.mozilla.org/en-US/firefox/addon/1843
• View formatted source (format source extension) -add on Firefox by Felix Ritter, Web Development Displays formatted and color-coded source and optional CSS information for each element. … https://addons.mozilla.org/en-US/firefox/addon/697
• W3C CSS validator -add on Firefox by Mat, experimental, Web Development Statusbar icon for valitading the current document's Cascading Style Sheets (CSS) with the W3C CSS online validator… https://addons.mozilla.org/en-US/firefox/addon/2245
• Dust-Me Selectors -add on Firefox by brothercake, Web Development Finds unused CSS selectors. https://addons.mozilla.org/en-US/firefox/addon/5392
• Font Finder -add on Firefox by Ben Dodson, Web Development Get all CSS styles of selected text in Firefox / Thunderbird… https://addons.mozilla.org/en-US/firefox/addon/4415
• CSSMate -add on Firefox by Malard, Web Development Inline CSS Editing Evolved. Originally a port of the fantastic EditCSS tool that i've been using for many months. I've gutted it, made each stylesheet load into a seperate tab. Removed the save load clear functionality as i found it to be useless… https://addons.mozilla.org/en-US/firefox/addon/4187
4/1Page4
• Gcssamer -add on Firefox by Charles Melhorn, experimental, Web Development Gcssamer is a lightweight CSS inspector for Firefox. Once installed, simply right-click on a web page element and choose View CSS Style Info from the context menu for a quick glance at its computed styles.
S-CMIPSPghri© t ypoC
Autres outils CSS • Une mine sur les CSS http://css.developpez.com/ • ACCUEIL CSS • FORUM CSS • FAQ CSS • TUTORIELS CSS • GALERIE CSS • OUTILS CSS • LIVRES CSS
• Les meilleurs outils CSS > Sommaire http://css.developpez.com/outils/ • Debugger • Éditeurs CSS • Éditeurs généralistes • Extensions • Services en ligne • Validateurs
• iStylr - Online CSS Template Generator On line Un générateur de modèle CSS en ligne : Vous connaissez ? The iStylr, an online application that enables you to easily create, edit and share tableless css designs online. It
• etc.
• Checky -add on Firefox by J. Schreiber, experimental, Web Development Easy to use interface to many free and commercial Online Validation and Analysis Services. Validate and analyse HTML, XHTML, CSS, RDF, RSS, XML, WAI, Section 508, P3P, Hyperlinks, Metadata and many more. Adds a context and tools… https://addons.mozilla.org/en-US/firefox/addon/165
• CSSMate -add on Firefox by Malard, experimental, Web Development Inline CSS Editing Evolved. Originally a port of the fantastic EditCSS tool. Malard ade each stylesheet load into a seperate tab. Removed the save load clear functionality as Malard found it to be useless… https://addons.mozilla.org/en-US/firefox/addon/9468
145/e ag
Des Outils de base pour le cours CSS lets you im- and export almost any website and allows you to create themes on the basis of other people's designs. iStylr est une application en ligne qui vous permet de créer des feuilles de style CSS sans tables avec une bonne vitesse grâce aux différents outils mis intégralement à disposition en ligne. L'application inclut un éditeur WYSIWYG qui vous permet de déplacer / modifier des éléments par simple « glisser-déposer" et qui montre la syntaxe de la CSS et XHTML. Vous pouvez importer des graphismes et des thèmes directement depuis le Web grâce à l'inclusion d'adresses Internet (etc). Entre autres fonctions, il convient de mentionner la possibilité d'être en mesure de partager ses créations avec d'autres utilisateurs inscrits sur le site dans une galerie publique à partir de laquelle vous pouvez télécharger les réalisations des autres. L'utilisation de iStylr nécessite une inscription rapide pour accéder immédiatement à la demande totalement gratuit. http://istylr.com/index.php http://istylr.com/about.php#About iStylr Blog : Hi and welcome to the iStylr Blog. My name is Stephan Helbig and I'm the founder and developer of this site. In this Blog I'll try to get you updated on new developments, improvents and other pieces of interest. http://istylr.com/blog/ Générateur de feuilles de style CSS pour créer des modèles-» http://www.matteodini.com/fr/2008/1… ]
• CSS Template Generator - with Source Code 3 column layout (No tables) On line http://www.ibdjohn.com/csstemplate/ PHP CSS Code Generator • Simple 2 Column Website Template Maker On line http://www.maketemplate.com/basic/
• HTML PHP CSS Website Template Maker On line This PHP - HTML - CSS template generator creates a two column layout with both a header and a footer. This PHP / CSS Style Sheet template generator outputs full featured tableless code i.e. tables are NOT used for the template with the column layout. The resulting template is actually a combination of several files i.e. this is a true php, html, css template that makes it easy to control multiply pages at a web site. http://www.maketemplate.com/
• CSS Form Code Maker Generates 'Colorful Box Layout' For Forms On line (Webmaster Tools and Code Generators Online) This HTML - CSS form generator will create a nice looking layout for forms. The time is now right - to move to 'tableless' layout for forms. And at the same time, add a 'little color' to the forms. http://www.maketemplate.com/form/
• Cascading Style Sheets - CSS Generator On line (Webmaster Tools and Code Generators Online) http://www.ahfb2000.com/cssgenerator.php
• Cascading Style Sheets - CSS - Generator II On line http://www.ahfb2000.com/cssgenerator2.php?sub=gen_form
oCypirhg t ©MCS-SPIPPage 6/14
•
•
•
•
•
•
Des Outils de base pour le cours CSS Cascading Style Sheets - CSS - Validator On line http://www.ahfb2000.com/cssvalidator.php
CSS-Layout-Generator http://www.html-seminar.de/css-layout-generator.htm On line gewünschtes Layout • 1 Spalte • 2 Spalten - Steuerung links • 2 Spalten - Steuerung rechts • 3 Spalten (kommt demnächst)
CSS Tools (de CSS Creator) http://csscreator.com/tools
CSS Layout Generator (de CSS Creator) http://csscreator.com/tools/layout The layout generated has changed significantly from previous versions. The main reason for change was to simplify the layout and in doing so make it easier to use. It no longer provides fixed width columns with fluid center or full length columns by default. This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages. Links to articles in the « Layout Hints » box to the right and the CSS Forum will provide help where needed. The generator requires a DOM capable browser with JavaScript enabled. To create your layout select the structural elements your site requires (header, footer, columns). Then specify a size in the field provided and choose a background color from the color chooser below. The color chooser changes values as you move your mouse along a row. To set the value of a row, click on the color row, to release click again. Once the color in the box is the color you are after, click in the background-color field to assign it the value.
Light Weight Multi Level Menu - Horizontal Menu (de CSS Creator) On line This is a multi level light weight drop down menu example based on the Suckerfish Dropdowns article by Patrick Griffiths and Dan Webb at A List Apart Style Generator : I've added a style generator for the menu to the side bar. Just click on a color from the color grid then click the field you wish to apply it to. Once you leave the field (click elsewhere), the style will be applied to the Horizontal menu as a preview. When you are happy with the styles click Generate Styles. http://csscreator.com/menu/multimenu.php
CSS Generator (de CSS Creator) On line This CSS Generator was first released in 2002. It has been kept as close to original as possible in the recent site upgrade. CSS Creator allows you to choose a style for your web page. Select different Cascading Style Sheet properties from the page below. To select a color, look for the HTML tag you want to effect, click the field you would like to insert color into, eg color or background, then simply click the color you want from the colors grid on the left. Most changes will display on the page as you make them. Select the checkboxes below to display more HTML elements for you to style. Once you have selected all the styles you want click the 'Generate CSS' button at the bottom of the page. http://csscreator.com/?q=version1/index.php
Copyright © CMS-SPIPPage 7/14
Des Outils de base pour le cours CSS • CSS Generator On line http://www.homepage-total.de/tools/css_generator.php
• Générateur de Feuille de Style CSS On line http://www.pourtapageweb.com/modules/generateurs/gencss.php
• Altova StyleVision® 2008 Altova StyleVision® 2008 is an award-winning visual stylesheet designer. http://www.altova.com/products/stylevision/xslt_stylesheet_designer.html Edit XSLT / CSS Stylesheets - Download a free 30-day trial !. Full support for XSLT 1.0, 2.0, and Cascading Stylesheets (CSS) for creating advanced HTML Web pages is just one of the many powerful features provided by StyleVision® 2008. Others include : • Visual drag & drop stylesheet design • Rendering XML & database data in HTML, RTF, PDF, Word 2007 (OOXML) simultaneously • Web site design • Authentic® electronic forms design • Converting HTML to XML • Refactoring support to accommodate XML Schema updates • Single source, multi-channel publishing • Autogeneration of XSLT 1.0/2.0 and XSL:FO stylesheets • Database report design • CSS & Javascript support • Database connection wizard • And much more . . .
• Longue liste de générateur CSS (et autres xxx Web) Online Generatoren : Die Liste Veröffentlicht am 26.02.2006 | Autor : Christiane Rosenberger. Letzte Änderung am 26.09.2008. http://www.drweb.de/magazin/online-generatoren-die-liste/
• StyleBox CSS Generator StyleBoxCSS is a free program which helps you create stylish css boxes, headers and content areas for your website. Free download from Shareware Connection - StyleBoxCSS is a free program which helps you create stylish css boxes, headers and content areas for your website. Easy to use and includes color picker, over 100 backgrounds, border style guide and much more. http://www.download3000.com/download_13340.html Features : • Easy to fill in form with help & examples. • Two color selection tools (dropper and list of hex & colornames) • Includes over 100 free tiling background images. • Border styles guide. • Edit, generate and preview results until you're happy. Create an endless amount of headers, content areas and even full webpages. • • Generate code and paste into your web page within minutes. • For both personal and commercial use.
• Simple CSS A Free CSS Authoring Tool http://www.hostm.com/simplecss-download.m" class='spip_out' rel='external'>Simple CSS Overview | Online
Copyright © CMS-SPIPaPeg8 1/4
• CSS Menu Maker : des menus en CSS a customizer http://cssmenumaker.com/ CSS Menu Maker vous permet de personnaliser de très beaux menus. Il vous propose de construire directement vos menu et d'en télécharger le code complet 100% W3C valide. Vous avez le choix entre :
• CSS Templates : 3 Column CSS Templates http://www.ssi-developer.net/main/templates/3col.shtml • Dynamic Drive CSS Layouts This is Dynamic Drive's new CSS layouts section. Here you'll find tableless, CSS based page templates to quickly define the skeleton of your pages. Created : Oct 22nd, 2006 | Last Updated : Dec 25th, 2006. http://www.dynamicdrive.com/style/layouts/ • Layout Categories : • Two Columns • Three Columns • Fixed layouts • Liquid Layouts • CSS Frames
• CSS Templates de SSI Developer http://www.ssi-developer.net/main/templates/index.shtml Le site « ssi-developer.net » met à notre disposition des templates à 2 colonnes, à 3 colonnes, général et professionnel : • Two column • Three column • General Templates • Professional templates
149/ © CMS-SPIPPage Cporygithofcnitnotusel seoffre tole, qui ellife rt ruavarreaipos nés ssceuo retp pmèl zocasseils outte àyts ed selliuef os vden ioitédl'et optimisation pmel •ofmrtaga er eu cetreoreuctc ud•edolav tadiernies d, à èresecemifacruc tns édt eonsin ioit: riovasitaérc •gaorsmni3C Wl' (etcisel uq edé idu dével règles w be)poepemtnrempco• SS Cder i •edoc ed ruessvec on aratintég rudtaueladielv b ed esaruop el esDut Os ilGuillon onSetatimuneDSco sSCocru ust eSS ClempSi « : TEZIB emualympa et hyper soligicle nepit tpes etrmvai ou vuqituq esèrtarp coe edtrreuitrnscif sov SC sreihe loS. Cel egicitolatst trgmeneuiatett st eis dinop elbruopniw dows et pour macS.milp eSC Sovsuohc xued temrep uerré C1): s seraita p jote nrp) Imn, 2 rier deif neihctropu revoe pousCSr quS fiei rapvuzem dote.L'intr la suiitpo snotnosmon mpcotelèt es leliél eamsit èr serface est dépou ed sab tênef alprn,ioatent enéspeértrd lasiivusses.breuenca Un Se.plime dylstuef elliv edertou final le renda ffcieher ,ovsud'e tretrmpes ouv av iuq stejorp de aireionngestu ngèeriStn eSCes de style en cuosrd devélepoepgaorsenivor dis réffetneef slliublumwww.ls.nentassottec/er eloF/»•. ntmeCSe re FoblooT S//:ptthxti éispmorudtcvir et grale, lége xob tse SSClooTl ie pde lunicogdnworuiW topmene boî une'ests. C )eraweerf( tiutquni uleibonspdi
© 2010-2024 YouScribe