EasyWebMaker - Epitech Innovative Project
Contents
1. EasyWebMaker M Creer 220 ICCTS CA EasyWebMaker MyProjectl ER File Edit Window Tools Help a m EG T1 Element Dock Widget KA o Elements i Y Simple Elements Element bootstrap Element button Element colonne Element container Element header Element Image Element Input Elamant arrari Figure 14 Widget des l ments 4 4 Modifier les l ments ins r s Pour modifier un l ment se trouvant d j sur votre page cliquez dessus Les widget de configuration vont alors se modifier pour correspondre la configuration actuelle de votre l ment Il vous suffit de modifier les valeurs existantes 4 5 Retirer un l ment d une page Pour retirer un l ment existant sur votre page faites un clic droit dessus un menu contextuel apparait puis cliquez sur Remove Element Lors de la construction de votre site web vous pouvez tout moment avoir un aper u de celui ci sur votre navigateur par d faut en cliquant sur bouton A Manuel d utilisation EasyWebMaker 5 CrIIELn Pan ICOCTE 5 G rer les pages de votre site Votre site internet est constitu de pages Ces pages affichent les diverses informations l utilisateur de votre site Par exemple vous pouvez avoir une page Index qui est votre page d accueil par convention Mais aussi une page Contact pour permettre vos visiteurs de vous envoyer des messages etc 5 1Cr er et2. Une fois votre logiciel install vous pouvez le lancer de plusieurs mani res Depuis votre menu D marrer si vous tes sur Windows 7 ou inf rieur Depuis votre interface Metro si vous tes sur Windows 8 Depuis votre bureau si vous avez coch l option Cr er une ic ne sur le bureau l tape finale de l installation en cliquant sur l ic ne EasyWebMaker 5 EasyWebMaker a ni Je vi File Edit Window Help PBD XOR Test Dock Widget x Figure 8 Interface d Easy WebMaker L interface d EasyWebMaker sur laquelle vous arrivez est vide Vous ne pouvez pour l instant pas travailler sur votre projet Tout d abord voyons en d tails les diff rentes r gions de l interface Manuel d utilisation EasyWebMaker M nd Creer 220 ICCTS R M 5 EasyWebMaker File Edit Window Help TAEL E R X gt Figure 9 R gions de l interface L interface d EasyWebMaker est divis e en 4 r gions principales num rot es sur l illustration ci dessus de 1 4 La premi re zone not e o sur l illustration est votre zone de travail principale C est ici que vous allez pouvoir concevoir simplement votre site web Vous pourrez y voir le rendu final de votre futur site web ce quoi il ressemblera quand vous y acc derez depuis votre navigateur Internet La zone not e sur l illustration est appel un Dock Widget C est l endroit o sont affich s l
3. ments qui le composent Ce contenu est accessible par le logiciel via un syst me de macro qui permet de substituer la valeur que vous affecter un l ment lors de la g n ration de votre page web Le widget Macros Widget offre la possibilit de modifier la source des l ments Une fois votre l ment s lectionn ce widget affiche toutes les sources modifiables il vous suffit donc de trouver celle que vous souhaitez diter et de lui attribuer une nouvelle valeur Macros Widget Value iMmQ png Figure 20 Widget de modification de contenu Macros Widget Pour modifier ces valeurs deux options se pr sentent vous Vous pouvez les modifier directement dans le champ de saisie affichant le contenu de la source Un bouton associ chaque valeur modifiable vous guide dans la modification de celle ci Manuel d utilisation EasyWebMaker M Creer Pan IOCTE Par exemple un l ment Titre vous offre la possibilit de modifier le texte qui le compose un l ment Image quant lui donne acc s au chemin du fichier source de cette image 6 3 Le Widget de positionnement Afin de g rer au mieux la disposition des l ments de votre site web le widget Element Position Widget gt regroupe toutes fonctionnalit s qu offrent les technologies web en mati re de positionnement Ainsi vous pouvez d finir la taille des marges qui s appliquent votre l ment les limit
4. menu File cliquez sur Export Un explorateur s affiche vous permettant de choisir le dossier dans lequel vous souhaitez exporter le m ta l ment 8 2 R cup rer des l ments partir de la biblioth que en ligne A l inverse si vous souhaitez r cup rer un l ment disponible dans la biblioth que en ligne il vous suffit d ouvrir le menu Tools puis de choisir l option Online library J Mame bootstrap janv 09 2015 build properties janv 08 2015 button janv 09 2015 clock janv 09 2015 colonne janv 09 2015 container janv 09 2015 janv 09 2015 janv 09 2015 janv 09 2015 janv 09 2015 janv 09 2015 janv 09 2015 janv 09 2015 janv 09 2015 janv 09 2015 build properties lanw 08 2015 EI Download Figure 22 Biblioth que d l ments en ligne Une fen tre s ouvre et affiche la liste de tous les l ments disponibles dans la biblioth que en ligne Vous pouvez choisir l l ment qui vous convient en fonction de son nom sa description sa date de cr ation ou encore son auteur puis le t l charger en cliquant sur Download Manuel d utilisation EasyWebMaker M aan Pan IOCCTEC 9 Contact Pour contacter l quipe d EasyWebMaker Rendez vous sur le site web http easywebmaker fr Contactez nous par e mail contact easywebmaker fr Annexe A Table des illustrations Figure 1 Installation tape 1 6 Figure 2 I
5. vous demander de renseigner le r pertoire o vous souhaitez installer le logiciel Si Vous ne souhaitez pas utiliser le r pertoire propos par d faut il vous suffit de cliquer sur le bouton Browse situ gauche de l intitul du r pertoire Cette tape vous indique dans la partie inf rieure de la fen tre la m moire n cessaire l installation du logiciel v rifiez donc que l espace m moire disponible est suffisant sur votre machine afin de continuer Pour proc der l tape suivante validez le r pertoire d installation en cliquant sur Next gt valid s Manuel d utilisation EasyWebMaker M CrIIELn Pan ICOCTE Lors de l installation vous pouvez tout moment revenir aux tapes pr c dentes en cliquant sur le bouton lt Back ou bien annuler l installation du logiciel en cliquant sur le bouton Cancel M 5 Setup EasyWebMaker Select Start Menu Folder Where should Setup place the program s shortcuts k Setup will create the program s shortcuts in the following Start Menu folder D To continue click Next If you would like to select a different folder click Browse EasyWebMaker Browse lt Back Next gt Cancel Figure 3 Installation tape 3 Raccourci menu D marrer Etape 3 Cr ation d un raccourci dans le menu D marrer Cette tape vous permet de choisir o le raccourci permettant de lancer le logiciel sera accessible part
6. EasyWebMaker Manuel d utilisation aan Pan IOCTE R sum du document EasyWebMaker est un logiciel de cr ation de sites Internet dynamiques pour n ophytes Ce manuel d utilisation vous permettra de prendre connaissance de toutes les fonctionnalit s du logiciel ainsi que les proc dures associ es leur utilisation Il d crit les tapes d installation du logiciel sa configuration et vous guide pas pas travers les diff rentes tapes vous permettant de cr er votre propre site web Chaque partie est illustr e avec des captures d crans pour vous aider vous rep rer dans le logiciel Manuel d utilisation EasyWebMaker RM ngama INNOVATIVE PROJECTS Description du document Titre Documentation Utilisateur Date 24 02 2014 Promotion 2015 Groupe EasyWebMaker Chef de groupe Nicolas Couet couet_n Membres couet_n sabre_j flageu_l petit_d fayet_q dechel_q E Mail easywebmaker 2015 labeip epitech eu Version du mod le 1 0 Tableau des r visions Date Auteur Section Commentaires 24 02 2014 Quentin Fayet Toutes 1 re version 21 06 2014 Adrien Le widget de A mettre jour D chelette configuration lors de la m j du graphique widget 22 06 2014 Julien Petit Modifier les droits Mettre jour avec de vos pages un screen r el la place du wireframing 24 06 2014 Quentin Fayet Toutes Check amp uniformisation 08 06 2014 Lo c Flageul Toutes Mis jour de toutes les sections Ma
7. M CrIIecn 2210 ICCTS La fen tre de cr ation de projet s affiche 5 Create a new project Infos Project Name MyProject sorte test More Figure 10 Fen tre de cr ation d un nouveau projet Cette fen tre contient plusieurs champs remplir Project Name Nom de votre projet Path Chemin de sauvegarde du projet sur votre ordinateur con Chemin de l ic ne de votre site web Si vous cliquez sur le bouton More la fen tre va s agrandir pour faire appara tre des informations suppl mentaires facultatives Manuel d utilisation EasyWebMaker CrIIecn 2210 ICCTS 5 Create a new project Infos Project Name MyProject Path sorte test FTP Database FTP Adress For example Username Username Password Database Adress For example Username Username Password Figure 11 Fen tre de cr ation d un nouveau projet avanc Plusieurs informations sont disponibles pour vous Les informations concernant le FTP le moyen de mettre votre site en ligne Les informations concernant votre base de donn es L endroit o sont stock es les informations de votre site Les 3 premiers champs FTP Adress Username et Password FTP Adress Addresse FTP fournie par votre h bergeur Username Nom d utilisateur pour vous connecter au FTP fourni par votre h bergeur Password Mot de passe pour vous connecter au FTP fourni par votre h bergeur Ma
8. Tree Dock Widget Ces l ments sont pr sent s dans une liste ordonn e respectant la structure de la page L arborescence est donc visible et permet d acc der directement un l ment en cliquant sur son intitul Pour faciliter votre navigation lors de la cr ation du site deux boutons vous permettent de changer de page et d acc der la pr c dente Prev et la suivante Next Vous pouvez galement d placer ces l ments entre eux les inclure dans d autres afin de cr er une hi rarchie au sein de votre site Pour cela vous devez cliquer sur un l ment pr sent dans l arbre puis le faire glisser sur sous un autre Manuel d utilisation EasyWebMaker M CrIIeLn 2210 ICCTC 6 Modifier vos l ments Dans EasyWebMaker chaque l ment que vous ins rez sur votre site web image lien texte menu est personnalisable de plusieurs mani res Vous pouvez personnaliser bien videmment le contenu mais aussi la forme couleur bordures police d criture 6 1 Le Widget de configuration graphique Le widget CssManagerWidget est un widget permettant de modifier facilement tous les aspects graphiques des divers l ments EasyWebMaker Pour l utiliser il suffit de cliquer sur un l ment une zone sur la page du site que vous tes en train de cr er pour voir apparaitre sur la gauche le widget de CSS Cet l ment se verra associ par d faut des attributs pour la personna
9. ation Cette cinqui me tape r capitule les choix que vous avez effectu s lors des pr c dentes tapes Si toutes les informations vous semblent correctes validez les en cliquant sur le bouton Install Manuel d utilisation EasyWebMaker Creer PN ICCT Setup EasyWebMaker Installing Please wait while Setup installs EasyWebMaker on your computer Extracting files C Program Files x86 EasyWebMaker GULpdb Figure 6 Installation tape 6 Installation Etape 6 Installation Durant cette tape EasyWebMaker est install sur votre syst me La proc dure peut durer quelques minutes en fonction des capacit s de votre ordinateur Manuel d utilisation EasyWebMaker EPITECH gt 20 IECTC Setup EasyWebMaker 0O Completing the Easy WebMaker Setup Wizard Setup has finished installing EasyWebMaker on your computer The application may be launched by selecting the installed icons Click Finish to exit Setup Figure 7 Installation tape 7 Installation termin e Etape 7 Installation termin e L installation d EasyWebMaker est maintenant termin e et le logiciel est pr t tre utilis Cochez la case Launch EasyWebMaker si vous souhaitez commencer d s maintenant travailler avec EasyWebMaker Cliquez sur Finish Manuel d utilisation EasyWebMaker CrIIELn Pen ICOCTE 3 Premier pas 3 1 Lancement d EasyWebMaker
10. de configuration graphique ss 24 6 2 Le Widget de modification de contenu ss 27 6 3 Le Widget de DOSITIONNEME NE 2 2 sein dede sncre sc iseses ansne esse deresssnenuene 28 7 Sauvegarder et ouvrir son projet eesesssssesesesssrcersssrereresssrceressseceressseceeessseeeres 29 8 Biblioth que en BE a ne a am en 0 29 8 1 Exporter des MELON ae a ee et 29 8 2 R cup rer des l ments partir de la biblioth que en ligne 30 9 D 01 12 0 ET 31 Annexe A Table desillustrations ss 31 Manuel d utilisation EasyWebMaker M CrIIELn Pan ICOCTE 1 Pr requis Pour utiliser EasyWebMaker vous devez disposer d un ordinateur fonctionnant sous Windows Vista 7 8 ou Linux Ubuntu La configuration minimale requise est la suivante 1 Go de disque dur disponible 1 Go de m moire vive Une connexion internet Afin d utiliser les fonctions de mise en ligne de votre site web fournies par le logiciel EasyWebMaker vous devez poss der Une connexion internet haut d bit 2 T l chargement et installation d EasyWebMaker 2 1 T l chargement d EasyWebMaker Pour t l charger le logiciel EasyWebMaker il vous faut un compte client sur le site htip www easywebmaker com et vous y connecter Rendez vous dans la section t l chargement ou bien utilisez l adresse suivante pour t l charger votre version digitale du logiciel http www easywebmaker com download Le t l chargemen
11. es Widget du logiciel voir 3 2 Les Widgets Manuel d utilisation EasyWebMaker Creer Pan ICCTEC Vous pouvez placer un autre Dock Widget gauche de la r gion D depuis le menu Fen tre G Vous pouvez d placer le Dock Widget droite ou gauche de la zone D La zone not e sur l illustration est appel e Barre d outils Elle vous permet d acc der rapidement des actions importantes telles que la sauvegarde de votre projet sans passer par les menus La zone not e sur l illustration est appel e Menu D ici vous pouvez acc der toutes les fonctions du logiciel EasyWebMaker Le menu se compose lui m me de plusieurs autres menus accessibles en cliquant dessus Ils sont au nombre de 4 Le menu Fichier vous permet d acc der toutes les fonctions de base du logiciel Voir 3 3 Les menus Le menu Edition vous donne acc s des fonctions d dition de votre site web Le menu Fen tre vous permet de configurer votre interface Le menu Aide vous permet d acc der l aide du logiciel 3 2 Commencer un nouveau projet Pour commencer la cr ation de votre site internet il vous faut cr er un nouveau projet Un Projet EasyWebMaker contient toutes les informations de votre projet Pour cr er un nouveau projet il vous faut aller dans le menu File et cliquer sur New puis New Project Manuel d utilisation EasyWebMaker
12. es de hauteur et de largeur y compris sa position relative aux autres l ments Element Position Widget Display grid Columns number 12 Columns offset 0 Height 0 gt 3 m Minimum height 0 a a ae Margin 0 px LA Top 0 Right 0 Bottom 0 Left 0 Figure 21 Widget de positionnement Element Position Widget Le positionnement des l ments par notre logiciel s effectue travers une grille qui d coupe le site web en 12 colonnes Vous pouvez donc par l interm diaire du champ Columns number indiquer le nombre de colonne que vous souhaitez attribuer votre l ment Par exemple si vous attribuez 6 colonnes un texte puis 6 colonnes une image qui le suit ces deux l ments seront sur la m me ligne et occuperont chacun la moiti de la largeur de la page Manuel d utilisation EasyWebMaker M Creer Pan IOCCTEC Dans ce m me exemple si l on affecte 7 colonnes cette image en laissant 6 colonnes l l ment texte l image sera d plac e sur la ligne suivante Chaque ligne ne pouvant accueil que 12 colonnes il est donc impossible de mettre ces deux l ments c te c te Il est aussi possible de d caler la position d un l ment de plusieurs colonnes en laissant des intervalles vides Pour cela vous devez d finir le nombre de colonnes de d calage qui sera appliqu l l ment dans le champ Columns offset 7 Sauvegarder et ouvrir son projet Pour enreg
13. ion de contenu Macros Widget 27 Figure 22 Widget de positionnement Element Position Widget 28 Figure 23 Biblioth que d l ments en ligne n nnsensnennnennesennnsnnesrrerrrensrrenn 30 Manuel d utilisation EasyWebMaker RM
14. ir du menu D marrer gt Sur le m me principe que l tape pr c dente si le r pertoire par d faut ne vous convient pas vous pouvez le modifier l aide du bouton Browser Une fois ce r pertoire d fini cliquez sur Next gt pour acc der l tape suivante ES Manuel d utilisation EasyWebMaker CrIIecn 2210 ICCTS 5 Setup EasyWebMaker E 0O ES Select Additional Tasks Which additional tasks should be performed Select the additional tasks you would like Setup to perform while installing EasyWebMaker then click Next Additional icons Figure 4 Installation tape 4 Raccourci Bureau Etape 4 Cr ation d un raccourci de bureau Cette tape vous permet d ajouter un raccourci sur votre bureau Cochez la case Create a desktop icon si vous souhaitez que l installeur en ajoute un puis cliquez sur Next gt Manuel d utilisation EasyWebMaker M crier 5 Setup EasyWebMaker Ready to Install Setup is now ready to begin installing EasyWebMaker on your computer Click Install to continue with the installation or click Back if you want to review or change any settings Destination location C Program Files x86 EasyWebMaker Start Menu folder EasyWebMaker Additional tasks Additional icons Create a desktop icon Figure 5 Installation tape 5 R capitulatif de l installation Etape 5 R capitulatif de l install
15. istrer son projet il vous suffit d ouvrir le menu File puis de cliquer sur Save As pour s lectionner le dossier dans lequel vous souhaitez l enregistrer Si votre projet a d j t sauvegard cliquez sur Save pour enregistrer sur l ancienne version de votre projet Pour ouvrir un projet existant vous devez ouvrir ce m me menu File puis cliquer sur Open Un explorateur s ouvrira vous permettant de rechercher le fichier EWM sur votre ordinateur 8 Biblioth que en ligne EasyWebmaker tant un logiciel bas une biblioth que d l ment il est indispensable que celui ci puisse toffer sa biblioth que au cours du temps Ainsi une biblioth que en ligne regroupant l int gralit des l ments con us pour le logiciel par la communaut de d veloppeurs est disposition 8 1 Exporter des m ta l ments Lors de la cr ation de votre site web vous serez sans doute contraint regrouper ou hi rarchiser vos l ments en les incluant les uns dans les autres Lorsque vous faites l une de ces op rations on nomme se regroupement d l ments un m ta l ment Si vous le souhaitez vous pouvez exporter l un de vos m ta l ments pour l utiliser dans un autre projet ou bien pour le mettre en ligne et ainsi le rendre accessible par d autres utilisateurs Manuel d utilisation EasyWebMaker M crier Pour cela s lectionner l l ment parent contenant les autres puis dans le
16. lisation de cet l ment sur les backgrounds bordures textes et autres II vous suffira alors de cliquer sur l onglet des attributs modifier cit s pr c demment et de changer les valeurs pour que les modifications s appliquent directement sur l l ment s lectionn de la page web de l utilisateur CSS Manager Widget LOGS Border Text Others Test Border Background Position Size mT TFET M gt he ineitin Position J px POSITION U 4 Background Type Color Image CI 225067 E Path alala Repeat amp Gradient From Direction Figure 17 Widget de configuration graphique background Manuel d utilisation EasyWebMaker M CrIIecn 22N ICCTS Le premier onglet Figure 18 Widget de configuration graphique boackground vous offre la possibilit de modifier le fond de votre l ment Vous avez le choix de le remplir de 3 fa ons diff rentes une couleur un d grad ou bien une image Il est aussi possible de modifier la position ainsi que les dimensions de ce fond Comme on peut le voir sur l image qui suit Figure 19 Widget de configuration graphique bordures vous pouvez modifier les bordures de l l ment s lectionn l aide du second onglet Border Nous pouvons donc modifier la couleur gr ce une palette ou tout simplement en mettant le code couleur code hexad cimal dans la barre et ceci pour chaque c t des marges a
17. n deux parties En haut se trouvent les onglets qui vous permettent de naviguer entre les pages que vous construisez En dessous la page blanche l endroit o vous construisez r ellement votre site web Un site web est compos de plusieurs pages Ces pages sont les diff rentes sections de votre site web chaque page un nouveau visuel et de nouvelles informations sont affich s On change de pages via les liens qui sont des l ments texte image sur lesquels on peut cliquer Au d but de votre projet votre Widget central ne contient qu une page Index Par convention la page d un site nomm e Index est la page principale de votre site c est l que l utilisateur arrive lorsqu il rentre l adresse de votre site dans son navigateur 4 2 D finir son espace de travail Avant de commencer la r alisation de votre site web il vous faut d finir votre espace de travail Deux informations sont indispensables pour le d finir L espace de travail des projets La biblioth que d l ments L espace de travail des projets est l emplacement utilis lors de la sauvegarde de votre projet le fichier EWM contenant toutes les informations d un projet S y trouvera La biblioth que d l ments install e sur votre ordinateur contient l ensemble des l ments que vous pouvez utiliser il vous faut donc indiquer au logiciel le dossier dans lequel celle ci est stock e Ma
18. nager Widget Background Border rex Others Test Text Configuration Color PA 000000 SESE 1e o GIZ S SIS AB CD 0px SE Policy Andalus Y 75x46 Shadow Configuration Color 000000 Horizontal 0px Vertical 0 px Blur 0 px Figure 19 Widget de configuration graphique texte De mani re g n rale vous avez les m mes possibilit s que sur un diteur de texte basique Vous pouvez donc modifier la police d criture la couleur avec une palette de couleurs et ou code couleur hexad cimal le placement du texte centr sur la gauche centre droite les caract res en gras italique soulign s l espacement entre les lettres etc Manuel d utilisation EasyWebMaker M Creer Pan IOCTE Vous pouvez galement r gler l ombre sa couleur et sa profondeur ainsi que sa hauteur et vous pouvez juger avec un aper u juste en dessous avant de valider vos choix Pour terminer si vous avez des connaissances en CSS vous pouvez galement faire tous les r glages souhait s sur l l ment s lectionn partir du panneau avanc avec lequel vous pouvez utiliser les mots cl s CSS comme un fichier CSS II vous sera galement possible dans la prochaine mise jour du widget de sauvegarder et charger des templates pour un certain type d l ment 6 2 Le Widget de modification de contenu Afin de personnaliser votre site vous devez tre capable de modifier le contenu des l
19. nstallation tape 2 R pertoire d installation 7 Figure 3 Installation tape 3 Raccourci menu D marrer 8 Figure 4 Installation tape 4 Raccourci Bureau 9 Figure 5 Installation tape 5 R capitulatif de l installation 10 Figure 6 Installation tape 6 Installation sssneensenennneennnenrnnnnrnrnnsrrnnnenne 11 Figure 7 Installation tape 7 Installation termin e 12 Figure 8 Interface d EasyWebMaker 13 Figure 9 R gions de l interface VU 14 Figure 10 Fen tre de cr ation d un nouveau projet 16 Figure 11 Fen tre de cr ation d un nouveau projet avanc 0011 17 Figure 13 Widget central vide 18 Figure 14 Fen tre de configuration Espace de travail 20 Figure 15 Widget des l ments 00nn0annnnnnannnannnannnnnnnnnnnrnnnennnennresnrennenne 21 Figure 16 Cr ation d une nouvelle page ss sssssseseressnresrrrernresrrrerrresrrren 22 Figure 17 Widget d arborescence Tree Dock Widget 23 Figure 18 Widget de configuration graphique background 24 Figure 19 Widget de configuration graphique bordures 25 Figure 20 Widget de configuration graphique texte 26 Figure 21 Widget de modificat
20. nuel d utilisation EasyWebMaker Creer Pen ICCT Pour tablir ce lien entre le logiciel et les diff rents dossiers de votre ordinateur s lectionnez le menu Tools dans la barre des menus puis cliquez sur Options E Config Dialog Projects configuraton Workspace directory D wamp www easywebmaker es General options EWM s elements configuration Local path directory D Share asyWebMaker essywebmaker wip ElementsLibrary Save Close Figure 13 Fen tre de configuration Espace de travail Dans la fen tre apparue l cran vous trouvez deux champs de saisie correspondant respectivement aux deux informations cit e plus haut V rifiez que les chemins indiqu s correspondent aux dossiers cibles le cas ch ant remplacez ces chemins l aide des boutons situ droite de ces champs 4 3 Ins rer des l ments sur vos pages Le Widget Element Dock Widget figure 12 vous permet de voir les l ments votre disposition pour construire la page Ainsi pour ins rer un l ment cliquez sur son nom maintenez le bouton de souris enfonc et faites glisser l l ment jusqu sa position sur votre site web Pour afficher le widget Element Dock Widget il vous suffit d ouvrir le menu Window situ en haut de l application puis de cliquer sur Element Dock Widget Le widget apparait donc sur la gauche de l cran Manuel d utilisation
21. nuel d utilisation EasyWebMaker ErliecCh Paen ere Les 4 champs suivants Database Adress Port Username Password gt sont les champs concernant votre base de donn es Database Adress Adresse de votre base de donn es Si aucune adresse sp cifique ne vous est fournie par votre h bergeur mettez localhost Port Port de votre base de donn es Si aucun port sp cifique ne vous est fourni par votre h bergeur laissez la valeur par d faut Username Nom d utilisateur pour vous connecter votre base de donn es fourni par votre h bergeur Password Mot de passe pour vous connecter votre base de donn es fourni par votre h bergeur Une fois les informations remplies cliquez sur Create 4 Commencer la cr ation de votre site web Vous tes maintenant pr t commencer la conception de votre site web 4 1 Le Widget central C est ici que se passe 70 de votre travail Le Widget central est le rendu de votre site web le visuel que vous allez cr er et que vos visiteurs verront sur leur cran Au d but il est vide comme sur la figure 11 D EasyWebMaker MyProject E D Ea File Edit Window Tools Help 3 0 index Figure 12 Widget central vide Manuel d utilisation EasyWebMaker RM Creer 22N ICCTS Votre Widget central ne contient qu une page vide sur laquelle vous allez cr er votre site web Le Widget central se d compose e
22. nuel d utilisation EasyWebMaker crier Sommaire Resume du COCMB AE aa aan de de D cn dde 2 Description du document ssssesssssseesssssresssresssscesssseosssesressecesssetossseeensseeesssesersseeresses 3 D 3 1 de D nn ne 5 2 T l chargement et installation d EasyWebMaker 5 2 1 T l chargement d EasyWebMaker sssssssssssssressrrnserreresrrrrssreresrreresrrressrersserresereresreresse 5 2 2 Installation d EasyWebMakRef end acnnsescessseenrasnenc nets sou sesnmeateesc cn 5 3 I e E a a a a a ceci 13 3 1 Lancement d Easy WeDMAaRSF ni es nsnees teen dati nnnee eco ieemeeuenes 13 3 2 Commencer un nouveau projet ss sssessessessessessessersesserseeseeseesersrrsersresrrsrrsrrserserseeet 15 4 Commencer la cr ation de votre site web ss 18 4 1 EEIE EE N de lee ce 18 4 2 D finir son espace de VA 19 4 3 Ins rer des l ments sur vos pages sssessesrsssrressrresrrrsrressrrrsrtrsstresrrrsrteserrrsrersereeseens 20 4 4 Modifier les elements INSErTES ae iE este 21 4 5 Retirer un l ment d une page ssesssssssssersrrresrrrsrrrrsrresrtensrrrsrteustresrerssteerrnsrteserreseens 21 5 G rer les pages de votre site sense 22 5 1 Cr er et supprimer une page ssesssssssssressrrssrtrssrersrtesstersrrrsrtesstenstrrsrtestersrersrteseereeeeee 22 5 2 Acc der vos pages et ses l ments ssessssrsserrserrrsrrresrresrressrrrsrrrsrrreeeresreesrerese 23 6 Modifier vos l M NES annees 24 6 1 Le Widget
23. supprimer une page Dans la grande majorit des cas votre site web sera compos de plusieurs pages Pour en ajouter une votre projet s lectionnez le menu File puis dans le sous menu New cliquez sur Page 2 Create a new page eoe Infos Page Name Page Url Acces night Vskor J Member J Admin Coma Co Figure 15 Cr ation d une nouvelle page Une fen tre s ouvre et vous propose de d finir les caract ristiques de la page La seule contrainte la cr ation d une page est de lui attribuer un nom dans le champ Page Name vous pouvez aussi d finir le titre qui sera visible sur cette page dans le champ Page Url Avant de valider la cr ation de la page vous pouvez g rer les droits d acc s de celle ci il vous suffit de cocher d cocher les cases correspondantes Pour supprimer une page il suffit de faire un clic droit sur l onglet de la page supprimer du widget central puis de cliquer sur l option Remove Page gt Manuel d utilisation EasyWebMaker M Creer PN ICCT 5 2 Acc der vos pages et ses l ments Votre site web contient des l ments qui doivent vous tre accessibles tout moment Le widget Tree Dock Widget vous affiche les l ments pr sents dans la page en cours Tree Dock Widget Prev Page Next Page elements P auto add Y Test Element Button Image Title1 Image Title2 Figure 16 Widget d arborescence
24. t peut prendre plusieurs minutes en fonction de la rapidit de votre connexion internet 2 2 Installation d EasyWebMaker Pour installer le logiciel il vous faut lancer le fichier ex cutable EasyWebMakerSetU p exe pour Windows ou EasyWebMakerSetUp bin sous linux Manuel d utilisation EasyWebMaker RM rende gs SN ICrTE Veuillez ensuite suivre les tapes d installation ci dessous j Setup EasyWebMaker E 0O Welcome to the EasyWebMaker Setup Wizard This will install EasyWebMaker version 1 0 on your computer E is recommended that you close all other applications before continuing Click Next to continue or Cancel to exit Setup Cancel Figure 1 Installation tape 1 Etape 1 Introduction au logiciel Apr s avoir lu cette tape cliquez sur Next gt Manuel d utilisation EasyWebMaker CrIIELn Pen IOCTE 5 Setup EasyWebMaker 0O Select Destination Location Where should EasyWebMaker be installed amp Setup will install EasyWebMaker into the following folder To continue click Next If you would like to select a different folder click Browse C Program Files x86 EasyWebMaker Browse At least 36 2 MB of free disk space is required ce carcs Figure 2 Installation tape 2 R pertoire d installation Etape 2 S lection du r pertoire d installation Durant cette tape l installeur d EasyWebMaker
25. ttribu es CSS Manager Widget Background Border Text Others Test Border Configuration Genral Border Style Border Proprieties F LLLLLLLLLLRL0eeLL e A A dotted border Color B affo000 A dashed border a Size A solid border A double border Targeted Border AA groove border 100 lem 7 A ridge border SAn inset border J J An outset border A ludden border J Border Configuration Angles 0 002 0 00 lem v a N 0 00 0 002 lem 0 00 0 00 jem w A 0 005 0 00 jem x Figure 18 Widget de configuration graphique bordures Cependant il vous est galement possible de rentrer les attributs et que cela soit appliqu e pour tous les c t s des bordures en m me temps Manuel d utilisation EasyWebMaker M criieun Pen ICCT Il est aussi possible pour vous de choisir le type de bordure souhait e en cliquant sur le menu d roulant pour afficher les diff rents types disponibles vous pouvez modifier la largeur de la bordure choisie en rentrant une valeur unit en pixel alias px dans le champ situ juste c t du choix de la bordure Pour finir vous pouvez galement choisir d arrondir les angles selon une valeur en pixel que vous pr cisez dans un champ ce dernier situ juste c t de l image le caract risant Dans l image suivante Figure 20 Widget de configuration graphique texte vous pouvez voir tous les attributs modifiables au sujet du texte CSS Ma
Download Pdf Manuals
Related Search