Maison interface Web tutoriel HTML 网站的制作流程

网站的制作流程

Sep 11, 2016 am 11:19 AM

众所周知,一个网站的制作过程,是需要按步就班的,当然,小编在这里说的是纯定制型网站而不是套模版。那么,小编下面就简单说一下,一个定制型网站制作过程。

首先,既然是定制型的网站,也就是从设计到制作到开发,都是一步一步来的,无论是设计还是功能开发,都需要了解客户的需求是什么。那么第一要说的就是设计之初应该做些什么。

1、设计之初应该做些什么

既然是从设计开始,那么就需要知道客户的需求,例如,客户所在的公司什么类型的公司,企业集团类型?电子商务类型,还是政府机关学校类型或者是其他?然后还要看公司规模,根据公司规模来策划公司网站的栏目。然后还要特别注意客户喜欢什么风格,什么色调,页面上有什么需要特别突出的地方,有没有特殊的功能开发等等,然后设计师根据客户所提出的需求开始编写策划方案。方案中主要针对客户所在的公司类型,公司规模,栏目架构,网站风格,整站色调,功能开发作进一步的诠释。

策划方案通过之后,设计师将着手开始按照客户所要求的风格,色调和页面上需要特别突出的地方进行网站首页的设计,首页设计完成之后,会将首页的JPG文件发送给客户查看,并让客户确认之后开始着手子页面的设计。子页面完成之后,也会将设计稿发给客户看,以便按客户要求修改设计稿以及确认设计稿。当设计稿全部确认之后,就要移交到下一步页面制作了。

2、页面制作之初需要注意些什么

当然设计稿完成并已由客户确认之后,那么网站制作流程就该进入到下一步页面制作了。负责页面制作的是前端,也就是将设计稿的PSD文件切片,然后写HTML代码,将设计稿的图片写成网站上的页面。并处理好页面上的JS效果以及调试好浏览器的兼容性,并以和设计稿99%以上的相似度完成页面。这些是前端需要做的部分,那么前端又需要注意什么呢。

首先,在拿到设计稿之后就直接开始制作,这个流程是错误的。直接开始做的话,对于当然的网站肯定是一问三不知,什么东西都不知道,只顾着敲代码做页面,做完之后难免会暴露出一些问题。所以这样是不对的,那么应该怎么做了,小编个人的想法是,在拿到设计稿之后,先不要急着开始制作,先跟设计师将所有页面都过一遍,先了解网站的栏目架构,然后就是页面上需要注意的地方,需要用到效果的地方。全部页面过完一遍之后,再做页面的话,就会轻松很多。

了解了在制作之初需要注意的事项之后,那么在制作页面的过程中又需要注意什么呢。首先,在制作的过程中,将设计稿还原成网站页面是肯定要的,然后按照设计师的设计思路,给页面上需要加JS效果的地方,加上JS效果,例如轮播,选项卡等常用的JS效果之类,最后的重点就是在HTML代码里面需要注意的几个地方,首先是图片的title和alt属性,这样利于SEO优化,有表单提交的页面需要做表单验证等。

3、开发方面需要注意的地方

程序方面的功能开发,一般情况下跟页面制作影响的地方不是很大,如有某些页面上需要开发功能,而设计稿上有这个页面的话,可以跟前端沟通,优先做有功能开发的页面,这样的话,页面制作和功能开发可以同时进行。而程序在开发的过程中需要注意的地方就是,首先也需要了解一下设计稿,在页面制作的过程中,会有需要程序配合的地方,配合部分简单讲解一下就能理解,如果不清楚设计稿,在配合的时候可能就会有诸多问题。这个是跟前端和程序之前的配合默契度也有挂勾的。

以上就是在一个定制型网站项目制作的过程中设计,前端,程序需要注意的地方。当然,这仅仅是在小编的日常生活中所遇到过的,加以整理,写了这么一篇短文,后续还有其他的问题出现,小编会继续更新相关文章。

本文转自:http://www.0731pgy.com/a/news/Industry%20News/382.html

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Vous avez un jeu croisé?
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Quel est le but du & lt; Progress & gt; élément? Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Quel est le but du & lt; datalist & gt; élément? Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quel est le but du & lt; mètre & gt; élément? Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Mar 20, 2025 pm 05:56 PM

L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.

HTML est-il facile à apprendre pour les débutants? HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Quel est un exemple d'une balise de départ dans HTML? Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

See all articles