Simple HTML making Web experience of fun

Source: Internet
Author: User
Tags continue html page insert simple html website window dreamweaver javascript array
Web page

As we all know, Web site production involves various aspects of knowledge, including graphic design, HTML page production, CSS style definition, client script (javascrfipt/vbscript), server-side scripting (asp/asp.net/php/jsp) and many other content. The author of this issue from the most basic, focusing on how to make a simple HTML website, the initial experience of the fun.

1. Here the author uses the Web page making tool is Dreamweaver. Run Dreamweaver First, select the "file" → "new" menu, and the window shown in Figure 1 pops up.


Figure 1

2. There are seven options under the Basic Pages tab in this window, and when we click the "Create" button after we select the "HTML" item, the workspace becomes blank, indicating that the HTML page has been created successfully, and clicking Code View appears as shown in Figure 2.


Figure 2

3. Ignore the specific meaning of these HTML page code, we first change "title Untitled Document" to "Web Maiden Show", and then select Design view. Click "menu" → "insert" → "HTML" → "Frame" → "Above", that is, insert a frame above the page. At this point the page is divided into two frames, the top frame and the bottom frame. After we select the next frame, select "Menu" → "insert" → "HTML" → "frame" → "Left" command, that is, a frame is inserted on the left-hand side of the page.

4. Click "Ctrl+s" to save each frame (top.htm,left.htm,right.htm). Then select the left frame and click on the "menu" → "insert" → "HYPERLINK" command, and a dialog box appears as shown in Figure 3. Enter each item in the dialog box, where text is the text that the link displays, and the link is the address of the page to which you clicked and the target is displayed in which frame. Here we select "Target" as mainframe (that is, the left frame) and follow this step to continue inserting the hyperlink. Next go to the code view of the right frame (right.htm), enter <marquee direction= "left" align= "middle" > Welcome to my website in <body></body> </marquee>, this is a text special effect, can let the text move up and down, where the direction replaced (up,down,left,right) can change the direction of text movement.


Figure 3

5. Now that we have a framed HTML page, we'll add a banner to the top frame (top.htm). Banner can do some JavaScript dynamic effect, dynamic Exchange effect specific code can go to the top.htm page of the source view, the author here only give key code:
Bannerad[0]= "Pic173.gif";
Banneradlink[0]= "http://www.sina.com";
Bannerad[1]= "Pic1732.gif";
Banneradlink[1]= "http://www.sohu.com";

Code explanation: As the above is given is a JavaScript array, Bannerad stored is a picture, Banneradlink store is the click of the link after the picture, you can add and subtract pictures according to their own needs.

6. Continue to do for the right frame hyperlinks to do the page, the specific content can be set. Select the File menu, click New, select HTML to create a series of pages, and the name of the page is the same as the name that was written when the link was inserted. The author has done two examples in the original document (the latest news and the popular star), the reader friend can try to add more content on their own. In this way, a prototype of an HTML site is made, as shown in Figure 4 is the final effect of the page.


Figure 4

The dynamic effect in the screenshot, the reader can directly in IE open the source file in the index.htm, open will be prompted, the right button will pop up "allow blocking content" of the prompt menu (see Figure 5).


Figure 5

Summary: This issue is about how to use Dreamweaver to do a simple HTML site, which uses some of the JavaScript, HTML framework, hyperlinks and other techniques. In addition to the above we see the blocking content of the hint, because the page did not publish to the site. In the next period, the author will bring you more wonderful content.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.