CHAPTER 16. Building Interactive Web Pages In the previous chapter, we explored the Ext Core library. The abundance of objects, properties, methods and events makes your head spin ... How to apply all this wealth in practice This chapter will be entirely devoted to this. We will learn

Creating page sequences: What is Page Sequence? It is a series of pages with the same characteristics (for example, a chapter in a book) that can be formatted in the same way if desired. Pages in the resulting document in

Creating page numbers: Built-in formatting object creates an inline area that displays the current page number. For instance: You are now reading page .With element the following can be applied

Creating, opening and saving web pages Using the program, you can create new web pages, as well as edit previously created ones. To create a new web page, you need to execute the main menu command File?

Chapter 1 The modern world. The era of information technology One of the paradoxes of the development of mankind is that throughout his entire development, man has used, accumulated, transmitted information without understanding or even thinking about it.

Chapter 6 Creating Data Access Pages A data access page is a special type of file designed for viewing and working via the Internet or intranet with data stored in Microsoft Access or Microsoft SQL Server databases. The data access page is loaded into an Access 2002 database

The manual can be used for stationary and distance learning in the study of the following disciplines: Programming in a high-level language. Human-machine interaction. Object Oriented Programming.
The main attention in the manual is paid to the HTML programming language, CSS technology, JavaScript programming language, graphics editor Adobe Photoshop, multimedia technology.
The manual is accompanied by an electronic textbook on a CD-ROM, which contains theoretical material, examples of the implementation of various tasks (training site) and a practical part (tasks, control questions and guidelines for laboratory work). In addition, there is a testing program on the disk, with the help of which the teacher can quickly and objectively assess the degree of mastery of the material.
An interesting feature of the electronic textbook is that each section is accompanied by calm instrumental music that creates a good mood.
This textbook is intended for students of the specialty 220400 (230105) - Software for computer technology and automated systems. The presence of an electronic textbook allows teachers to simply solve the problem of replicating guidelines.
The book is indispensable for all beginners to study Web-design.

1. Global computer networks.

Global networks (like local ones) consist of computers connected by communication channels. Global computer networks (WANs) around the world are connected to each other via the Internet.
To work in the hot water supply, the user must have the appropriate hardware and software. In the simplest case of hardware, you need to additionally install a modem, with the help of which communication is carried out via a telephone line (for example, from an apartment). Note that modern computers are equipped with network cards, and when connected to a network but a dedicated channel, additional hardware is not needed.
The software is divided into two classes:
server programs located on the network node that serves the user's computer;
client programs that are located on the user's computer and use the server's services.
Global networks provide users with a variety of services. WAN allows you to work with distributed databases, exchange letters via e-mail, messages via teleconferences, chat in real time, send files, etc. Each service (sometimes they say: service, service) works according to certain rules (protocols) ...

Introduction
1. Global Area Networks
2. Ways to connect to the Internet
3. Switching channels, messages and packets
4. Protocols, services, services
5. Browsers
6. Search engines and directories
7. Basic Web Design Concepts
8. Web page structure
9. Network technologies of web-design
10. HTML language
10.1. Text formatting
10.2. Tables
10.3. Graphics
10.4. Hyperlinks
10.5. Meta tags
10.6. Link maps
10.7. Multimedia
10.8. Frames
10.9. Cascading CSS style sheets
11. JavaScript language
11.1. Script run order
11.2. Information entry methods
11.2.1. Entering information using the cop-firm () method
11.2.2. Entering Information Using the Promt () Method
11.2.3. Entering Information Using a Text Box
11.2.4. Input and output information using tcxtarca text area
11.2.5. Interactive forms
11.3. Information display methods
11.3.1. Displaying information using the alert () method
11.3.2. Displaying information using the write () method
11.3.3. Displaying information using a text box
11.3.4 Displaying information using the created windows
11.4. Events
11.5. Arithmetic operations
11.6. Boolean and shift operations
11.7. Operations with string variables
11.7.1. Converting numbers from one number system to another.
11.8. Mathematical functions and constants
11.9. Regular cycles
11.10 Conditional Control Transfer Operators if-else (cond) and switch (x)
11.11 Sample scripts
11.11.1 Animation in the browser title bar
11.11.2 Illuminated button
11.11.3 Implementing iterative loops
Appendix 1: List of laboratory works and tasks located on the optical disk
Appendix 2: Procedure for starting the test program
Appendix 3: Site "Samara and this is Russia itself"
Conclusion
Bibliography

Free download an e-book in a convenient format, watch and read:
Download the book Introduction to Web-design, a tutorial, Alekseev A.P., 2008 - fileskachat.com, fast and free download.

Introduction to Web Design

• What is web design?
• Why is this needed?
• Necessary tools
• The main "postulates" of web-design

• Web design technologies
• Logical and physical structure of the site
• Home page
• Dynamic and static site layout
• Static page layout
• Dynamic page layout

• Web page elements
• Where to begin?

What is web design?

Any resource published on the World Wide Web, from a global information portal with tens of thousands of visitors a day to a modest home page, which is visited by only two people a month, including its author, is primarily a work of art, a complex set of engineering and design solutions. The process of creating such a piece is called web design.

Web design is creativity, and creativity is strong. It is in the field of web design that you can fully demonstrate all your abilities, because here you yourself and the visitors of your page are the censor of the results of your work. Nobody limits you either in volume, or in the content, or in the layout of the resource you are developing, no one drives you into any rigid framework. Be creative, and sooner or later your project will find the well-deserved recognition of the multi-million audience of Internet users.

Section start page; my family

A story about my wife

A story about my little son

My photo on the beach in Sochi

From all that has been said, it becomes obvious that the physical structure of the site is hidden from visitors to your resource: they can only observe the logical structure, and exactly as it is presented with the help of navigation elements. From here follows a completely logical conclusion: the structure of the navigation system should, if not completely repeat, then at least correspond as much as possible to the logical structure of the site developed by you.

Home page

One of the criteria by which different websites can be divided into two main categories is whether or not they have a splash page.

The header page is an html document that does not include any substantial information and navigation elements. The title page file is named index.html, while the start page is called differently and is called by organizing a hyperlink from the home page, which is loaded first when the site is accessed. The main page contains, as a rule, the logo of the company that owns this resource, a counter of visits and a proposal to choose the Cyrillic encoding, or a choice between the English and Russian versions of the site. An example of a web resource equipped with such a page is shown in Fig. 3.2.

When accessing sites that are not equipped with a home page, the start document is displayed first, which includes some kind of content, navigation elements and sometimes announcements of the thematic headings that make up this resource. In fig. 3.3 shows an example of a site without a home page.

Whether or not to use the home page when creating your own project on the Internet is a matter of taste for every webmaster. It is difficult to give any exhaustive recommendations in this regard, since the final decision depends primarily on your artistic preferences and sometimes on the desire of the customer who pays for your work.

Dynamic and static site layout

Modern video cards support several arbitrarily set video modes, characterized by screen resolution and the number of colors used when displaying information on a computer screen. Using the built-in functions of the operating system, the user can set several standard screen resolutions, such as 640x480, 800x600, 1024x768, 1152x864, 1280x1024 or 1600x1200 pixels. Of course, when opening a web page in the same browser, it may not be displayed in the same way, depending on the screen resolution used by the site visitor.

In order to avoid moving the elements of the html document relative to each other and, as a result, deformation of the web page as a whole when changing the screen parameters, a fairly simple and effective technique is used: all components of the web page are enclosed in the corresponding cells of an invisible table, with each the object is assigned one, strictly defined position. Thus, a second criterion appears, according to which all existing websites can be divided into two conditional categories. This table can be assigned a strictly defined width in pixels, for example, 640 pixels, and then rigidly positioned in the center of the screen or pressed to its left edge. This type of site layout can be called static because the width of the table does not change depending on the screen resolution. Of course, when you change the screen parameters, not the slightest displacement of the elements of the page design occurs.

Another approach is when the width of an invisible table containing fragments of a web page is set as a percentage of the current screen width. When the screen resolution is increased, the table is stretched horizontally, and all elements placed in its cells, positioned either in the center or along the edges of the columns, are displaced according to the established algorithm. Due to the fact that the table parameters change depending on the screen settings, this principle of the layout of an html document can be called dynamic. Both approaches have both advantages and disadvantages, which are listed below.

Static page layout

Dignity. Simplicity of the document layout algorithm. By optimizing the page for display at an on-screen resolution of 640x480 pixels, you can be sure that design elements will not float when you change custom screen settings. In addition, this option of site layout in most cases (subject to a number of additional conditions) allows you to achieve the identical display of the html document in the Microsoft Internet Explorer and Netscape Navigator browsers.

Flaws. When you display a document on a computer at a high screen resolution, there is a noticeable blank margin around the edges of the screen or on the right side of the screen.

Dynamic page layout

Dignity. The document stretches across the entire width of the screen, leaving no unused blank margins.

Flaws. The complexity of the layout and debugging of the page, very often the inadequacy of the display of such documents in the Microsoft Internet Explorer and Netscape Navigator browsers is manifested.

NOTE Pixel (dot) values ​​used in HTML commands assume the physical size of a user's screen dot and depend on the type of monitor.

Examples of the implementation of sites with static and dynamic page layout are shown in Fig. 3.4 and 3.5. These images are taken with a fixed screen resolution of 800x600 pixels.

Web page elements

Any web page contains a certain set of standard elements that are required components of every Internet resource. Of course, the assortment and number of such objects may vary depending on the thematic focus of the site, the volume of materials published on it, as well as on the goals and objectives of the creator of this resource. The arrangement of such elements, the design of their relative position is one of the main tasks of the web-master.

The first element of a web page that we will look at is its title. It can be made both in text and in graphic form, however, in either case, it should be located at the top of the document. Sometimes a menu for selecting the Cyrillic encoding and buttons for switching from the Russian-language to the English-language version of the site are combined with the title, if this web-resource is presented in two languages. Directly the subtitle of the document, as a rule, is the space allotted for placing an advertising banner. In most cases, the inclusion of a banner in the upper part of a web page is a prerequisite for registering a site in banner exchange services - systems that advertise a resource you have created in exchange for displaying advertisements of other members of the banner exchange network on the pages of your site. The standard size of banners published under the title of the document is usually 468x60 pixels. If you are using a static page layout, the width of your document's heading will be approximately 640 pixels, primarily due to the need to ensure that the document is displayed correctly on monitors with a 640x480 pixel screen resolution and to avoid the appearance of a horizontal scroll bar that makes it difficult to view. Obviously, the width of the banner in this case will be much less than the width of the heading, due to which in the part of the page where you plan to allocate space for advertising, an unoccupied space will be formed, which can be filled with the logo of the company that owns this site or a link to a server that implements the web. hosting. Of course, a logo is not always necessary: ​​as a rule, it is included in a web page only if the site has a commercial focus.

The main part of the document is occupied by the so-called text field - the area where the semantic content of the page is located: informative information text and illustrations. The listed elements are also called content (from English, content - content). The location of the text box depends primarily on how the web designer places the rest of the document.

The next mandatory part of the web page is navigation elements - hyperlinks linking this document with other sections of the site. Navigation elements can be executed in the form of text strings, graphic objects, that is, buttons, or active components, for example, Java applets. The latter are the same buttons that, unlike their traditional sisters, are able to react to mouse movements, performing some simple actions when the cursor is hovering over them (turning on the backlight, creating a pressing effect, changing the shape, etc.). As I already mentioned in the section Basic "postulates" of web-design, the navigation elements should be arranged in such a way that they are always in sight, at hand, that is, so that the user does not have to rewind the page if the text field is several physical screens, and then look for links to other sections for a long time. The most established approach is to place navigation elements on the left side of the page.

At the bottom of the document, it is customary to publish information about the developers of the site and an e-mail address where visitors to the resource can send their responses, suggestions and wishes to the owners of the page. If the web page is a starting document, a hit counter is also placed at the bottom of it - a small script that calls a CGI script installed on the server, which records each opening of the document in the user's browser, changing the value of the counter indicator. Thanks to this, the web-master can easily determine the number of visitors who have visited his page during any period of time. Note that the counter of visits is set only on the first page that is called when accessing the site; it is absent in the rest of the resource documents. It is also not recommended to place several different counters on one page.

So, we have analyzed all the main components of a web page and their possible location relative to each other.

In practice, it is common to find web sites in the design of which navigation elements are positioned along the right edge of the screen. In this case, the text field is shifted to the left, the rest of the document components are arranged based on the principle of maximum aesthetics of their combination.

As you can see from the figure, the logo in this case is placed on the same level with the title of the document, and the advertising banner is positioned relative to the center of the page. With this approach, it is recommended to maintain the graphic design of the title, logo and advertising field in a single color and artistic style - then the asymmetry of the position of these objects will not be so obvious and will not cut the eyes of supporters of a strict, tabular design aesthetics.

Navigation elements can be placed not only near the right and left borders of the page, but also at the top of the document. This layout option is most suitable, in my opinion, when creating home pages: in this case, all page objects harmoniously fit into the specified width of the invisible table, while preparing the table itself is greatly simplified. The only drawback of this approach is the need to duplicate navigation elements at the bottom of the document, since when vertically scrolling the page, they disappear off the top of the screen, and to get to them, the user will have to rewind the screen, which, you see, is very inconvenient.

Of course, everything that was said in this section is not a panacea, but a guide to action. I am trying to outline only the general principles that are applied when assembling the structure of the site, the final decision always remains with the webmaster. Ultimately, no matter what design you put into the basis of your future project, the result of your work will still be correct: there is no censorship on the Internet, or any regulations that force the site creator into certain rigid frames. An example of a design solution that does not fall into any of the above categories is the so-called mixed layout.

As you can see from the figure, in this example, some of the control elements are built directly into the page title - we are talking about buttons for switching between the Russian and English versions of the site, as well as navigation buttons: this can be a link to the e-mail address of the resource creators, duplicated at the bottom document, and a link to one of the thematic sections, for example, a news page. The main block of navigation elements is positioned relative to the left border of the document, but the Cyrillic encoding selection menu is located directly below the advertising banner at the top of the page. The text field is divided into two asymmetrical columns, and the right one contains brief announcements of the thematic headings that make up the resource, including links to these sections.

Obviously, there can be a great variety of options for a mixed layout of a web page: specific decisions depend on the number of sections that make up the resource, the amount of text prepared for placement on the site, and, finally, on the imagination of the designer himself. It is only important that the appearance of the site does not cause complaints from visitors. After all, only you as a developer, you and no one else, have the right to show all your abilities and talents and build the page to your liking. The creators of some home pages, not tormented by doubts, place a hit counter in the upper right corner of the document, write the name of the site in small, small print and publish it under an advertising banner, and for some reason, navigation elements unexpectedly appear right in the middle of the text block, between the story about yourself and photographs of the beloved dog of the author of the project. For taste and color, as they say, there are no comrades. But to me personally, this disease seems incurable.

Where to begin?

Now is the time to move on to the practical aspects of web design. And the most pressing question that usually arises when creating the first independent project is in the heading of this section. So where do you start? From the beginning, of course.

The first thing to do before taking on the development of any website is to brew a cup of strong aromatic coffee or tea, sit down at the table and think carefully. I am not kidding. You should think about the goals that you set for yourself when creating a new project. The methods of achieving them, including the design itself, will depend on the choice of goals. The success of the entire enterprise will depend on the correct setting of tasks. Do you want a home page? Wonderful. Take a pen, a piece of paper and think about what thematic sections your future creation should include, what exactly you would like to tell the progressive public with its help. Have you decided to create a non-profit information site? Wonderful. Decide what it will be dedicated to. If this is an entertainment project, after you come up with a list of relevant headings (for example, anecdotes, cartoons or humorous stories), you need to choose a suitable design solution for it, more or less corresponding to the content. Visitors are likely to be slightly bewildered by an entertainment project made in the style of a serious information or news portal. Perhaps you want to publish a resource dedicated to making homemade wines? Take a walk on the Internet, see what your colleagues have already created, what sections are on similar sites, evaluate what information they lack, and what is, on the contrary, an overabundance, how this information is presented to the consumer, is it boring to read it or, conversely, interesting and fascinatingly.

Do you need to develop a commercial website? In this case, both the list of thematic sections and the final decision regarding the design techniques you apply, such as the use of corporate colors, special fonts or buttons stylized to match the general concept of the project, will most likely be made by the site customer. However, in any case, you will have to provide him with several trial options, the so-called design projects, showing possible implementations of the future resource. Refer to the websites of competing organizations, domestic and foreign, see what headings make up their website, what data is offered in each thematic section.

After you have decided on the number, names and content of all sections of your project, you can proceed to the next stage of creating a site - designing its logical and physical structure. It must be remembered that both the list of headings and the number of materials presented in them, and the content of the documents themselves, will most likely be repeatedly changed and supplemented. Some sections will be removed over time as unnecessary, some - on the contrary, added, some web pages you will consider already irrelevant, and some document, on the contrary, will need to be reworked. The logical and physical structures of your project must meet such mobility requirements, you should not have the slightest problem with organizing or reorganizing hyperlinks within the project if any document that composes it suddenly ceases to exist. You should also not need to redesign all web pages when adding a new category to the project, just because existing hyperlinks do not allow you to make such changes, and the new navigation button has nowhere to cram. Think in detail about all the hyperlinks between the pages of the resource, develop the structure of directories and subdirectories in which you will place documents. Only after that you can turn directly to design issues.

Consider and sketch the layout of your future web pages. With a pencil. On the paper. Please note that if the logical structure of your site implies the presence of section start pages, or, as they are also called, index files, the design of these pages, as well as the start document of the site itself, will most likely differ slightly from the design of the information pages that make up the heading. Index files usually contain links to documents that make up a given heading, sometimes - brief announcements of these documents. The main content of the information pages themselves is informative text and, as appropriate, illustrations.

Having presented the general layout of web pages, think about the structure of the invisible table, which will then include their components. When designing a table, it is necessary to take into account that between its columns containing various elements of the document, it is advisable to leave empty columns with a width of one or two pixels. This is done in order to avoid the effect of columns sticking to each other, which is observed when there is no horizontal indentation between the elements of a web page, which noticeably spoils the appearance of the document.

Creating a layout table is perhaps one of the most difficult procedures when developing a new project. It is almost impossible to draw a table accurately on the first try. The skill, thanks to which the web-master draws all the necessary rows and columns by eye in a few seconds, comes only with experience. It is difficult to give any specific advice here to help a budding designer. There is only one way to learn how to quickly design a layout table for a new site: load several web pages created by other authors into FrontPage Express, see what tables they use to display these documents, study them carefully, and then try to create a couple of your own. ...

To build complex tables, you can use nesting of one table into another: for example, a primary 640-point table specifies a horizontal page break, and another invisible table, equal in width, is nested into each of its cells, providing vertical splitting. This approach allows you to split different parts of a web page independently of each other, creating, for example, in one of its fields four vertical columns of different widths, and in the other - two, while operating with different parameters of nested tables within the same document - the size of the space between columns, the thickness of the borders, etc.

After the main elements of the document are arranged and the invisible table is marked up, you should have a rough sketch of the future site. Now it's the turn of the content preparation.

First, I recommend that you type in any editor all the necessary texts, and it is best to save them in plain text format, that is, in a file with the .txt extension. Then you need to draw the necessary graphic elements in a vector editor (for example, in Corel-Draw), export them to a raster format, process them in a raster graphics editor (in our case, we are talking about Adobe Photoshop), giving the pictures the required size and resolution, after which, as the need to optimize them using special compressors or other similar means. A detailed story about the preparation of graphic images will go in the fifth lesson, for now we are talking only about the sequence of actions.

Only after all the procedures described above can you start directly assembling the page: creating its layout in an HTML editor, writing and final debugging the code.

Since the design of all documents that make up your future site is likely to be almost identical, it is first of all recommended to create a so-called template. A template is an html document containing an invisible table, heading, all graphic objects, navigation elements - in other words, practically everything, except for the immediate content. If you later need to include a new document in the project, you will only need to open a ready-made template in the html editor and import the text and all the necessary illustrations into it. I advise you to design and save to disk two different templates: one for the information page and one for the index file. When the page is ready, it should be checked for identical display in different browsers at different screen resolutions and color palettes. Load the html document you created into Microsoft Internet Explorer, set the screen color palette to 256 colors, and then change the screen resolution to 640x480, 800x600 and, finally, to 1024x768 pixels. See if the layout of the page changes, if its elements slide out relative to each other. Follow the same procedure for Netscape Navigator. If you do not notice any significant changes, you can be sure that other documents created using the same template with a 95% probability will display as correctly.

As a result, the sequence of actions for developing a website is reduced to the following simple algorithm:

• Setting goals and defining key objectives.
• Creation of a list of future thematic sections.
• Development of the logical and physical structure of the resource.
• Preparation of design sketch, site layout, invisible layout table.
• Preparation of text materials.
• Preparation of graphic materials in vector form.
• Export of vector images to raster format, image optimization.
• Creation of templates for web pages.
• Build web pages and debug code.
• Checking the identity of the display of web pages with different screen resolutions and color palette and in different browsers.

M .: SOLON-PRESS, 2008 .-- 192 p. (Student Library Series)

The manual can be used for stationary and distance learning in the study of the following disciplines: Programming in a high-level language, Human-machine interaction, Object-oriented programming.

The main attention in the manual is paid to the HTML programming language, CSS technology, JavaScript programming language, graphics editor Adobe Photoshop, multimedia technology.

The manual is accompanied by an electronic textbook on a CD-ROM, which contains theoretical material, examples of the implementation of various tasks (training site) and a practical part (tasks, control questions and guidelines for laboratory work). In addition, there is a testing program on the disk, with the help of which the teacher can quickly and objectively assess the degree of mastery of the material.
An interesting feature of the electronic textbook is that each section is accompanied by calm instrumental music that creates a good mood.

This textbook is intended for students of the specialty 220400 (230105) - Software for computer technology and automated systems. The presence of an electronic textbook allows teachers to simply solve the problem of replicating guidelines.
The book is indispensable for all beginners to study Web-design.

Format: djvu

The size: 5, 7 Mb

Download: yandex.disk

CONTENT
Introduction 3
1. Global Area Networks 6
2. Ways to connect to Internet 11I
3. Switching channels, messages and packages. thirteen
4. Protocols, services, services 15
5. Browsers 18
6. Search engines and directories. 24
7. Basic Web Design Concepts 31
8. Structure of the Web page 37
9. Network technologies of Web-design 39
10. HTML 46
10.1. Formatting text 51
10.2. Tables .. 55
10.3. Graphics 61
10.4. Hyperlinks 67
10.5. Meta tags 71
10.6. Reference Maps 73
10.7. Multimedia 77
10.8. Frames 81
10.9. CSS 85 Cascading Style Sheets
11. JavaScript 91
11.1. Script run order 95
11.2. Information Entry Methods 98
11.2.1. Entering information using the sop-firmO 99 method
11.2.2. Entering Information Using the Promt () Method .. 101
11.2.3. Entering Information Using a Text Box 103
11.2.4. Entering and outputting information using the text area textarca 106
11.2.5. Interactive forms 108
11.3. Information Display Methods 124
11.3.1. Displaying information using the alert () method
11.3.2. Displaying Information Using the write () Method 126
11.3.3. Displaying information using a text box 127
11.3.4 Displaying Information Using Created Windows 129
11.4. Events 132
11.5. Arithmetic operations., 141
11.6. Logic and shift operations 143
11.7. Operations with string variables. 147
11.7.1. Converting numbers from one number system to another 150
11.8. Math Functions and Constants 152
11.9. Regular cycles 158
11.10 Operators of conditional transfer of control if-else (cond) Hswitch (x) 160
11.11 Sample Scripts 167
11.11.1 Animation in the Browser Title Bar 168
11.11.2 Illuminated pushbutton 169
11.11.3 Implementing Iteration Loops 171
Appendix 1: List of laboratory works and tasks located on the optical disk 174
Appendix 2: Procedure for Running the Testing Program 176
Appendix 3: Site "Samara and this is Russia itself"
Conclusion 180
References 181