What are the commonly used software for website production?

Abstract: Website production, in layman’s terms, is the sum of a series of tasks such as page structure positioning, reasonable layout, image and text processing, program design, database design, etc. It is also the use of pictures by website designers. Displayed in HTML (an application under Standard Universal Markup Language). How to make and design a website? The editor below will introduce the basic steps and design of website production. What are the website production software? 1. Dreamweaver Currently, the most used static website production tool is Dreamweaver. The software can be found and downloaded directly from Baidu.

The redesigned uidreamweaver is more user-friendly.

It supports code mode and design mode by default, and can also be opened in both modes at the same time to facilitate instant viewing of web page effects.

Because of its high degree of integration, it is very convenient to use it to write static web pages.

2. WebStorm There is no doubt that webstorm is very easy to use for front-end development of web pages.

It is suitable for the development of dynamic web pages.

3. Frontpage is an earlier Microsoft product and has stopped updating. However, it is relatively simple and lightweight. If you don't know much about web pages, and your computer can still install this software. You can try using it to create web pages.

Of course, like Dreamweaver, it is suitable for static web pages.

Note: It is said that frontpage does not support win10 system.

4. HBuilderHBuilder is a very easy-to-use html5ide. Using it to write JavaScript is a breeze. The most important thing is that it is free for personal use, unlike the above software that requires licensing fees.

It can automatically adjust the screen color for you to protect your eyes.

Multiple language support: php, jsp, ruby, python, nodejs and other web languages

5. WampServerWampServer is used to start various PHP back-end servers, Mysql database and other services with one click .

You do not need to reinstall these software, nor do you need too complicated configuration.

If you are creating dynamic web pages in PHP, this software is essential.

6. Visual Studio Visual Studio is a software developed by Microsoft and used by programmers. It can be used for the development of C/C++, C# and other software.

If you want to write asp.net dynamic web pages, you can also use this software for development.

7. eclipseeclipse is a program IDE written based on Java. Before installation, you need to install jdk and configure environment variables.

If you think that eclipse can only write java, c, c++, then you are wrong.

Similarly, it supports the development of scripting languages ??such as python and php, and supports binding browser debugging.

Again: eclipse is free to use.

Excellent web design templates and free web page mockups

In the reference stage, free web page mockups are often the first choice for beginners. Without hesitation, we present a batch of free web page model cases to you, take them away without any thanks!

1. Amcharts-tool web page model

Reference point: login interface design

Download address: /wp-content/uploads/2018/04/Amcharts .zip

The prototype of this website model is JavaScriptCharts developed by Amcharts. It is a JavaScript and HTML5 chart development tool with good compatibility and can meet most development needs.

This template has 5 pages including Products, Download, Support, Buy, and Demos. The website design adopts the effect of floating navigation bar and footer, which can be used for order purchase, login, icon display and other web interface designs. refer to.

2. Dribbble-design web design model

Reference point: multi-resource and multi-link page layout

Download address: /wp-content/uploads/2018 /04/Dribbble.zip

Dribbble is a community website for creators, artists, designers and other creative people. As a leader in the design platform category, this web design template is a good demonstration of how to handle multiple resources and multiple links, combine graphics and text, and web page layout mode of graphic and text links. It is an excellent template that is very worthy of learning and reference. Pages you can refer to include: home page, designer page, job search page, etc.

3. BBC-news webpage design model

Reference point: information layout

Download address: /wp-content/uploads/2018/04/ BBC.zip

BBC is the largest news broadcasting organization in the UK. It is a news website, so the website does not have too much fancy content, and the website layout is mainly based on information layout. Pages that can be referenced include: homepage, news page, weather page, video page, etc.

4. Shopify-e-commerce web design template

Reference point: e-commerce information layout

Download address: /wp-content/uploads/2016/ 12/Shopify.zip

As a typical online e-commerce platform, Shopify not only provides professional e-commerce website construction services, but also carries out e-commerce based on social networks, that is, sellers use Shopify on Facebook You can open a store on several mainstream social network platforms such as , Pinterest, and Twitter.

This web page model mainly displays the login page, home page, sales method page, price page, blog page, etc. It is one of the must-see templates for making e-commerce websites.

5. edX-educational web design template

Reference point: list view layout

Download address: /wp-content/uploads/2017/01/ edX1.zip

edX is an online course provider that provides online university courses in various subjects to students around the world, including some free courses. The design elements of the entire web page template are mainly picture components and text components, with clear logic, conciseness and intuitiveness.

The main pages are: homepage, course list page, course details page, program page, and about page. This template is suitable for educational institution websites or online course websites. The design ideas for the course introduction page are particularly worth learning.

6. Pexels-picture material web design template

Reference point: Picture waterfall flow design

Download address: /wp-content/uploads/2018/ 04/Pexels.zip

Pexels is a high-definition picture download service site that provides users with a large number of free picture materials and is updated quantitatively every week. The homepage of the website adopts a floating design, with the menu bar and bottom bar suspended in fixed positions, and the content area scrolls. The pictures on the homepage are arranged in a waterfall flow manner, with multiple pictures scrolling. The pages included are: browsing page, download page, registration page, and login page.

PSD perspective website mockup

Website design mockup with perspective effect allows you to show your design layout from different angles, making your design look more like a real product. It is not a static model.

7. PerspectiveWebsiteMockup

Reference point: isometric angle switching

Download address: /shots/1507002-Perspective-Website-Mockup

The perspective website mockup is a simple mockup that can showcase your work in a perspective presentation. This PSD mockup allows you to switch designs at an isometric angle. Whether you need one page or more, you can change the number of views in your template.

8. PerspectiveWebsitePSDMockup

Reference point: smart objects change side appearance and background

Download address:

/shots/4034063-Freebie -The-Screens-Perspective-PSD-Mockups

TheScreens is a free PSD mockup template used by designers on Behance and Dribbble to showcase their projects. High-resolution visuals give it a modern look. As a smart PSD website perspective, you can easily add your own designs to smart layers for easy shadow, size adjustment, screen editing, and custom backgrounds.

10. Misocial_FreeWebsitePSDMockupTemplate

Reference point: smart elements + Google fonts

Download address: /shots/3400116-MISOCIAL-Free-PSD-Template

MISocial is a free music website PSD template that has been well received on Behance and received a large number of shares. It helps a lot of people create new websites easier and faster.

“We have carefully crafted 7 web pages containing elements essential for the development of a new website. The images are free and included in smart objects. The fonts we use are free Google font.

”

11. FreeIsometricWebsiteMockup

Reference point: Isometric perspective

Download address: /shots/2819112-Free-isometric-mock-up-for-website -1280x720px

This website mockup is designed to showcase your web screenshots in an elegant, unique and attractive way. This mockup is composed of isometric Smartobjects so that you can incorporate your unique design into it. 2 models. This model has a perspective, and the file is layered through smart objects, which means you can use the template by customizing the elements of the page.

12. PerspectivePresentationWebMockup

Reference point: theme customization

Download address:

/product/mockups/perspective/superb-free-perspective-website-mockup/

This mockup provides a close-up view of your website design. The template comes in a resolution of 3000×2000px and is fully layerable with smart objects and changeable backgrounds so you can customize it with different themes. A pre-designed template to help you get started quickly.

This part of the website model design tool mainly answers the question of how to design an excellent web page model, which mainly depends on the web page model design. Selection of tools. As a preliminary work, web page mockup design can be low-fidelity or high-fidelity, fast or slow. Here are some useful web page mockup design tools for you.

1. Mockplus - a simple and fast web mockup design tool

As a desktop web design tool, Mockplus also has excellent performance in prototype/wireframe design compared to other online web pages. As far as model design tools are concerned, Mockplus is not only good at making static models, but also has unique and incomparable advantages in interactive design.

Its newly released grid and data automatic filling functions are targeted at multiple images. It is very convenient for text web layout examples, such as Dribbble. Designers can quickly fill in: text types such as name, date, text (sentence or paragraph), and email address, commonly used avatars (realistic/cartoon), office, food, and High-definition pictures of a variety of other themes. It saves designers a lot of time in searching for materials.

2. Moqups-online web model design tool

Moqups is a very good tool. is a free HTML5 application that allows you to create simple wireframes, mockups, and UI concept maps. The program is very simple to use, and the built-in templates are ready to use (templates include radio buttons, links, image placeholders, text boxes, sliders, etc.). The disadvantage is that it can only produce static web page displays and cannot perform dynamic operations in actual demonstrations.

3. Mockingbird - Online web mockup design tool

Mockingbird is another popular web-based wireframing application that includes some powerful features for linking and Share your web mockup. Mockingbird allows you to quickly create interfaces using a drag-and-drop editor.