Cela commence par une planification minutieuse. Pour créer un site Web, vous devez décider de son thème et choisir un design qui reflétera ce thème. Créer un site Web sur uCoz est plus facile, car le système lui-même contient déjà de nombreuses conceptions intéressantes, que vous pouvez simplement modifier en fonction de vos besoins.

Modèle de site- un ensemble de pages, de fichiers graphiques et de services conçus et mis en page en HTML, permettant de créer un site Internet standard de tout type. En règle générale, les modèles de sites Web sont constitués de fichiers de conception graphique aux formats courants (PNG, JPEG, GIF), placés dans un dossier séparé ; pages HTML statiques et fichiers de feuilles de style (CSS), et dans certains cas également Flash.

En termes simples, un modèle est l’apparence (conception) de votre site Web, qui est la même sur les pages du même type. Grâce à l'existence de modèles, vous n'avez pas besoin d'écrire le même code sur chaque page : insérer le logo du site, donner aux titres la même couleur, etc.

Un modèle de site Web se compose généralement d’un cadre et d’une conception proprement dite. Le cadre est la base, comme un squelette : des blocs, des lignes, des tableaux dans lesquels le dessin sera enfilé. Et le design est la beauté de votre site Web (couleurs du texte, police, arrière-plan, images, etc.). Aujourd'hui, afin de ne pas réinventer la roue, vous pouvez télécharger de nombreux modèles prêts à l'emploi pour n'importe quel site Web.

Sites Web uCoz – Gestion de la conception

Tout d'abord, je tiens à souligner qu'après avoir créé un site Internet, vous avez la possibilité de choisir un design parmi un grand nombre de ceux proposés.

Au sommet, le tout premier situé Blocage global. C'est la base de votre conception. Ce bloc est constitué de conteneurs, et leur nombre dépend de la conception de votre site.

Haut du site— l'en-tête du site, les graphiques, les dessins, etc. sont édités.

En bas du site— la partie inférieure du site est éditée, des compteurs peuvent être placés ici.

Premier conteneur (à gauche)— les blocs qui se trouvent à gauche sont édités.

Deuxième conteneur (à droite)— les blocs qui se trouvent à droite sont édités.

Il ne sert à rien d'interférer avec les premier et deuxième conteneurs, car ils sont beaucoup plus pratiques à modifier à l'aide du constructeur dans la barre d'administration à partir du site lui-même. (Dans l'article « Gestion du site. Première édition »)

Modèles de pages de sites Web Ucoz

Presque tous les Module site Web uCoz se compose des modèles de pages suivants :

Page principale du module— une page sur laquelle sont affichés les matériaux de toutes les sections et catégories (liste générale des matériaux)

Page avec une liste du matériel de la section- une page sur laquelle sont affichés les éléments d'une section (combien de sections - autant de pages, il peut ne pas y avoir une seule section sur le site uCoz)

Page de liste des matériaux de catégorie— une page sur laquelle sont affichés les matériaux d'une catégorie (le site doit avoir au moins une catégorie)

Toutes les pages répertoriées ci-dessus ont presque la même apparence.

Page du matériel et commentaires sur celui-ci— la page sur laquelle se trouve directement le matériel que vous avez ajouté (article, dossier, photo, etc.)

Type de matériel - à quoi ressembleront les matériaux dans la liste des matériaux sur les trois premières pages répertoriées : page principale du module, page avec une liste de matériaux de section et page avec une liste de matériaux de catégorie.

Page d'ajout/modification de matériaux— forme d'ajout de matière.

Toutes ces pages correspondent à des modèles du même nom. Vous comprenez immédiatement ce que vous souhaitez changer exactement et où. Et même si vous ne savez toujours pas quoi faire de tout cela. Faites une sauvegarde du modèle et n'hésitez pas à expérimenter.

Très bientôt, vous comprendrez ce que c'est !

En voici un simple exemple: Disons que vous souhaitez que votre nom soit écrit sur TOUTES les pages de votre site. Pour ce faire, il vous suffit d'écrire votre nom dans le modèle « Page Editor » et votre nom apparaîtra automatiquement sur toutes les pages.

Ou bien, vous souhaitez que tous les fichiers soient téléchargés en appuyant sur un certain bouton, il vous suffit de l'enregistrer une fois à l'endroit approprié (Répertoire de fichiers - Type de matériel et commentaires) et de ne jamais revenir sur ce problème.

Mais ce ne sont que des exemples simples ; en fait, ces possibilités sont bien plus larges. De plus, il existe déjà de nombreux exemples prêts à l'emploi sur Internet, où il vous suffit de copier le code et de le coller dans votre modèle, et votre site peut acquérir les fonctions que vous souhaitez.

C'est en fait très pratique. Et dès que vous essayez de changer quelque chose et que vous commencez à réussir, je pense que bientôt votre site changera rapidement au-delà de toute reconnaissance, par exemple, ce site est une conception standard retravaillée de l'uCoz n° 839.

Si vous voulez être les premiers informés des nouveaux articles du site !!!

Minimaliste et sophistiqué, coloré et uni, sombre et clair - modèles pour uCoz, une large sélection de designs de sites Web. Le constructeur de sites Web uCoz est devenu populaire en raison de sa simplicité, de son accessibilité et de sa polyvalence. En règle générale, les utilisateurs de ce moteur sont des débutants qui ne souhaitent pas apprendre toutes sortes de langages de programmation, mais souhaitent simplement créer un portail simple. Les sites Web créés dans le système uCoz sont généralement des portails de jeux, des cinémas en ligne et Varez. La plupart des modèles du site sont dédiés à leurs sujets. Certes, récemment, avec le développement des smartphones, beaucoup ont commencé à accorder une attention particulière aux versions mobiles des sites. Modèles de PDA- ne passera pas non plus inaperçu.

Les modèles pour uCoz peuvent être divisés non seulement par « genres » : jeux, films, programmes, magasins, etc. Mais aussi dans des rubriques plus globales, à savoir : Gratuit, Payant, Unique, Adaptations. Je voudrais souligner les adaptations séparément, car il s'agit d'un sujet très populaire, car beaucoup aimeraient voir des modèles créés pour certains moteurs sur uCoz, voire des modèles pour certains sites. En particulier, je suis en train d'adapter des modèles, des éléments individuels et des scripts provenant de moteurs et de sites tiers - pour uCoz.

Tous (sauf le mien) les modèles pour uCoz ne sont pas équipés d'instructions d'installation, je vais donc vous expliquer ici brièvement et en termes généraux comment cela se fait. Certains modèles n'ont pas non plus de concepteur, c'est-à-dire qu'ils sont installés non pas en installant le modèle principal - qui définit la conception des pages de tous les modules à la fois, mais en installant le modèle pour chaque page spécifique séparément. Pour tous les autres, cette instruction sera pertinente.

Comment installer des modèles sur uCoz ?

1. Téléchargez l'archive avec le modèle et extrayez-en tous les fichiers. Accédez au panneau de configuration et téléchargez les fichiers nécessaires à la racine du site, via un gestionnaire de fichiers ou FTP.

2. Installation du cadre. Copiez le code filaire et collez-le dans le générateur de modèles.

3. Définition des styles. Si les fichiers de style CSS se trouvent dans le gestionnaire de fichiers, vous n'avez pas besoin d'insérer quoi que ce soit dans le modèle CSS. C'est ce que je fais, par exemple, car lors de l'utilisation d'un modèle de style spécial, il est possible qu'uCoz « casse » quelque chose dans le cadre, par exemple un tel montant système. Toutefois, si le modèle téléchargé utilise toujours le modèle « Feuille de style CSS », alors recherchez le document correspondant dans votre archive, copiez son contenu et collez-le dans ce modèle de style.

Bien que dans ce cas, je recommanderais quand même de créer, par exemple, un fichier style.css et collez-y tous les styles et téléchargez le fichier lui-même dans le gestionnaire de fichiers dans le dossier css, puis écrivez ce fichier avec des styles dans le ou les modèles entre les balises Ainsi .

À propos du système uCoz

UCoz est un hébergement gratuit et un constructeur de sites Web créé en 2005. À l'heure actuelle, le système dispose de plus de 20 modules qui vous permettent de créer un site Web à part entière pour une grande variété d'objectifs. uCoz a rapidement gagné en popularité en raison de sa simplicité et de son accessibilité, même si beaucoup ne l'apprécient pas pour cela, mais les inconvénients n'écartent pas les avantages. Quelques statistiques : uCoz est l'une des 20 ressources Internet les plus populaires en Russie, et plus d'un million de sites Web y ont déjà été créés !

Aujourd'hui, j'aimerais partager avec vous mon expérience de mise en œuvre d'un constructeur de conception sur un site Web. Comme j'utilise un design non standard, je dois apporter des modifications pour pouvoir travailler avec le site à l'aide du concepteur.

Qu'est-ce que cela va me donner ?
Premièrement- un moyen pratique de gérer la conception et les blocages du site sans accéder au panneau de configuration.
Deuxièmement- ajout rapide des blocs dont j'ai besoin, qui seront déjà conçus dans le design dont j'ai besoin.
Troisième- la possibilité d'utiliser les capacités fournies par le système en blocs - par exemple, des gadgets et des widgets.
Quatrième- l'avantage le plus important. Lors de la création d'un framework, le système lui-même générera tous les modèles pour tous les modules - et je n'aurai pas besoin de les modifier manuellement pour chaque module que j'utilise. L'utilité est évidente : armez-vous de patience et commencez à apporter des changements.

Tout d'abord, vous devez vous assurer que le concepteur est activé - vous pouvez le vérifier en allant dans Panneau de configuration, Accueil » Paramètres généraux. Si vous avez besoin d’activer l’option, procédez à la configuration de la conception. Pour ce faire, accédez au Panneau de configuration, Design Management » Template Builder et utilisez les invites pour concevoir correctement le futur cadre. Le principe de création de cadres est simple : la structure de page existante est divisée en certaines zones selon leur signification et leur objectif. Par exemple, ma conception à trois colonnes, divisées en zones similaires pour créer un cadre, ressemblerait schématiquement à ceci :

Ainsi, comme vous pouvez le voir sur la figure, le cadre se compose des parties principales suivantes :
- dans ce bloc je placerai la partie supérieure (en-tête) du site.
- ici se trouvera toute la partie médiane du site, y compris les colonnes de gauche et de droite et la partie médiane, dans laquelle le contenu principal sera affiché. - ici sera la partie inférieure du site - compteurs, droits d'auteur, etc. Séparément, je voudrais m'attarder sur la description du code
Il y a certaines nuances dans l'utilisation de ce code que vous devez connaître. Cela est notamment dû à l'utilisation du module Forum. Dans mon cas, si je dois utiliser ce module, la structure de mon framework suppose que le module sera situé sur toute la largeur de la page, puisque mes blocs conteneurs sont inclus dans le bloc du milieu. Lors de la génération d'un modèle pour le module « Forum », le système examine l'emplacement du bloc central et alloue toute la zone qu'il occupe pour la sortie du forum. Si je déplace le code conteneur de la colonne de droite en dehors des limites du bloc du milieu, alors le forum remplacera les colonnes de gauche et du centre, et celle de droite restera en place. Si je n'utilise pas du tout le code du milieu, alors le forum sera placé au même endroit où le reste du contenu est affiché.

Résultat : le design est divisé en trois grandes parties, chacune ayant sa propre signification. Mais pour pouvoir gérer les blocs et générer des modèles pour tous les modules, je dois indiquer au système à quoi ressembleront les blocs et où ils seront situés.
Puisque la partie principale du site (colonnes) est située dans un bloc
- ajoutez-y les codes nécessaires.
Utiliser du code Je définis une zone dans ma conception qui contiendra des blocs tels que les sondages, le calendrier, la recherche et autres. Avec ces codes, j'indique au système exactement où les nouveaux blocs peuvent être placés. Dans mon cas, il s'agit des colonnes gauche et droite de la partie médiane de la page. Nous écrivons des codes dans la conception, par exemple comme ceci :
Maintenant, je dois en quelque sorte dire au système à quoi ressemblera mon futur bloc. Lors de la génération de modèles, le système générera des modèles en tenant compte de ces informations, et tous les nouveaux blocs seront immédiatement ajoutés dans la conception dont j'ai besoin. Ce qui est génial, c'est que je n'ai besoin de décrire la conception du bloc qu'une seule fois : le système fera le reste lui-même. J'ajoute un bloc au conteneur :

TITRE

CONTENU

Si la conception des blocs dans tous les conteneurs est la même, il suffit alors de former un seul bloc et de créer le deuxième conteneur vide. Le bloc a deux codes réservés" TITRE" Et " CONTENU", qui désignent respectivement le "Titre" et le "Contenu" du bloc.

Par ailleurs, je voudrais m'attarder sur les codes de trame réservés. Il y en a plusieurs, les voici :
- : titre de la page
- : chemin d'accès au fichier avec les styles CSS
- : partie principale de la page
- : copyright du système uCoz

Mes fenêtres pop-up auront le même style que les blocs - j'ajoute donc le code suivant :

Il est conseillé de placer ce code tout à la fin du code, par exemple après la balise fermante- cela permettra d'éviter toute confusion inutile lors de la création du cadre.
Notez également que dans le code contextuel est écrit entre crochets, alors que dans le code du bloc TITREécrit sans parenthèses. Cela a été fait exprès pour pouvoir distinguer ces deux codes.
Une fois que tout sera prêt, je regarderai le résultat du travail. Tout semble bien, je vais donc sauvegarder ce que j'ai fait en cliquant sur le bouton « Créer des modèles ». Le système générera des modèles pour tous les modules actuellement actifs.
Laissez-moi résumer. Affiner votre conception unique pour que le mode conception fonctionne sur le site est une tâche assez simple et rapide, qui peut cependant apporter beaucoup de commodité à l'avenir. Déjà, créer mon propre framework m'a fait gagner beaucoup de temps dans la configuration de tous les modules dont j'ai besoin.

Permettez-moi de vous rappeler que cet article concernait des conceptions non standard (créées par vous). Le mode conception est pris en charge par toutes les normes

Installation d'un modèle personnalisé

La meilleure façon d'installer un modèle personnalisé consiste à utiliser les instructions d'installation fournies avec le modèle. Si ce n'est pas le cas, utilisez nos instructions universelles.

L'installation d'un modèle comprend plusieurs étapes :

Téléchargement de fichiers sur le site

La première étape consiste à télécharger les fichiers fournis avec le modèle sur le site. Il est important d'observer l'imbrication des fichiers dans des dossiers. Ainsi, toutes les images peuvent être dans le dossier img, et scripts - dans js.

Pour créer un dossier, utilisez le bouton « Ajouter un dossier » :

Faites glisser et déposez les fichiers dans la zone de téléchargement et attendez la fin. Lorsque tous les fichiers de modèle ont été téléchargés sur le site, vous pouvez passer à l'étape suivante.

Installer un framework de site Web

Permet de générer une structure uniforme pour toutes les sections du site. Il est généralement fourni sous forme de fichiers .txt et peut avoir un nom arbitraire ("Framework.txt", "Template Builder.txt", etc.).

Dans certains cas, le modèle peut ne pas avoir de framework de site Web, vous pouvez alors passer à l'étape suivante.

Le framework du site possède ses propres variables uniques qui aideront à le distinguer des autres fichiers modèles :

Essayez de rechercher la chaîne ou . S'ils se trouvent dans le texte, il s'agit probablement d'un fichier filaire.

Pour installer le cadre, rendez-vous dans la rubrique « Conception », sélectionnez « Framework » dans le menu de gauche, collez le code du fichier texte, cliquez sur le bouton « Installer » et confirmez l'action :

Vous verrez un message indiquant que l'opération a réussi. Vous pouvez donc passer à l'étape suivante.

Installation de modèles de site

Chaque module de site contient ses propres modèles uniques, responsables de l'affichage des pages. En fonction de l'ensemble des modules connectés, le nombre de modèles requis pour l'installation peut varier.

Les modèles sont fournis sous forme de fichiers texte et pour les placer sur le site, il suffit de copier le contenu du fichier dans l'éditeur de modèles du module correspondant. Allez dans la rubrique « Design », sélectionnez « Editeur » dans le menu de gauche. Recherchez le modèle dont vous souhaitez ajouter le code et copiez-le dans l'éditeur. Enregistrez vos modifications.

Répétez cette étape pour tous les fichiers texte fournis avec le modèle. Lorsque vous avez terminé, passez à l'étape suivante.

Ne vous découragez pas si un fichier n'est pas inclus dans le modèle fourni. Cela peut signifier que le développeur a fourni au modèle un wireframe pour le personnaliser.

Mise en place de modules et d'extensions

Cette étape n'a pas toujours besoin d'être répétée lors de l'installation d'un modèle. Il se peut également qu'à ce stade, le modèle soit complètement installé et que l'installation puisse être terminée.

Cet article a été écrit par moi en 2011. À cette époque, les arbres étaient grands et un dollar coûtait moins de 40 roubles. Beaucoup de temps a passé depuis et beaucoup de choses ont changé. Gardez cela à l’esprit pendant que vous lisez.

J'ai décidé d'écrire une sorte de guide sur la façon de créer propre design sur uCoz. Il sera composé de 2 parties. La deuxième partie parle de la mise en page du modèle lui-même.

Assurez-vous de lire les problèmes que vous pourriez rencontrer lors de la création de votre premier modèle.

Par où commencer lors de la création d’un modèle pour uCoz ?

Qu'est-ce qu'un modèle pour uCoz ? Il s'agit uniquement d'une description de l'emplacement des éléments du site et d'une vue graphique du site.

À quoi devrait ressembler un modèle de site Web ?? Le modèle doit être conçu de manière à « encadrer » le contenu du site et à ne pas interférer avec les utilisateurs. Essayez de créer un modèle unique dans son concept afin que les utilisateurs se souviennent de votre site. Par exemple, il existe un grand nombre de modèles de jeu apparemment différents, mais extérieurement très similaires (tous sombres, rayés). Lorsqu'un utilisateur ouvre un tel site, il lui semblera qu'il est déjà venu ici. Trouvez du piquant.

Il existe des modèles caoutchouc Et fixé. Caoutchouc : le modèle s'étend sur toute la largeur de l'écran. Fixe : la largeur du modèle est définie et reste constante quelle que soit la largeur de l'écran de l'utilisateur. Mon modèle de blog sur lequel vous vous trouvez actuellement est corrigé.

Je vous conseille de faire votre premier modèle fixe car... Ce sera beaucoup plus facile pour vous lors de la mise en page.

Tout d’abord, imaginez à quoi ressemblera votre futur modèle en termes généraux. Prenez ensuite une feuille A4 et dessinez un croquis du futur design avec un crayon. Cela vous facilitera grandement la tâche et, d'ailleurs, de merveilleuses idées vous viennent souvent en dessinant. C'est sur votre croquis que vous devez réfléchir à la conception du gabarit.

Après quoi vous pouvez allumer en toute sécurité Photoshop. Sélectionnez une taille de fichier égale à la résolution de votre écran (la mienne est de 1280 x 1024 pixels). Choisissez judicieusement la palette de couleurs de votre futur modèle. Vous devez prendre 2-3 couleurs comme base, elles doivent être en harmonie les unes avec les autres. Les couleurs doivent être de préférence naturelles. Une photographie est parfaite pour choisir des couleurs naturelles. Ouvrez-le dans Photoshop et utilisez la pipette pour regarder les codes de couleur.

Un service spécial Color Wizard peut vous aider à sélectionner les couleurs. Entrez en spécial champ de code couleur et appuyez sur « set ».

Si vous n'avez pas assez d'idées pour la conception de sites Web, ouvrez simplement le premier site Web avec des leçons Photoshop et regardez tout. Parfois, certaines parties sont très utiles.

N'oubliez pas de bien réfléchir à la navigation. Cela devrait être pratique et intuitif

P.S. Je suis tombé sur un blog intéressant sur l'optimisation/promotion. J'aime le fait que l'auteur expérimente avec les moteurs de recherche.