Shulou(Shulou.com)06/02 Report--

This article is about how Dreamweaver designs the demo prototype of the website. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Download and install Dreamweaver

Download Dreamweavercs6, this article provides software download, download and installation.

2. Open Dreamweaver and start prototyping

After opening Dreamweaver, there is a window where you can quickly select previously edited files or create new files of different types. If you don't want such a window to appear next time, you can check "not displayed" at the bottom left. To make the prototype of the website, we usually use HTML with css and JavaScript files to do. So let's start by creating a new HTML page.

3. Create a new HTML page

Dreamweaver's new HTML page already has these basic tags, and we can edit on this basis, and put the css file and JavaScript file to be introduced into the tag.

4. Association

Dreamweaver automatically associates tags, attributes, keywords, etc., so just enter the first few words and the selection drop-down box will pop up automatically. It is convenient for programmers to code quickly.

5. Several views of Dreamweaver

Dreamweaver has four views, namely "Code", "split", "Design" and "Real-time View". Mastering the switching of these views can speed up the coding efficiency.

The first view: code

Is pure code, open the file is the default is the "code" view. There is no screenshot to show here.

The second view: split

It is the code on the left, the view of the page effect on the right, the source code on the left, and the effect diagram on the right changes in real time.

The third kind of view: design

Show the effect of the page, but the tag block in this page can be dragged, dragged to the appropriate location can be saved, this method of designing the web page is simple and convenient.

The fourth view: real-time view

What is shown is the rendering of the page.

6. File tree

Write a website prototype, there are many files, how to manage so many files?

Click the files panel in the right panel and pop up the file tree window. Here you can manage the files used by the website demo.

For example: the file tree in my example, the common folder holds the plug-ins to be used, css and JavaScript files, and images and other resources. The login folder puts the login-related html files, the register folder puts the registration-related html files, and the success.html,error.html files in the root directory are frequently used files in the system.

7. Preview

Demo is almost finished, you can click the preview button in the menu to preview it first. Dreamweaver provides 360 Internet Explorer, Google, Firefox and other browsers for preview.

8. Save

The written page must be saved. It is best to write and save it at the same time.

Click File on the menu-choose Save, or press the shortcut key ctrl+s to save.

Thank you for reading! This is the end of the article on "how Dreamweaver designs the demo prototype of the website". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.