Макет страницы

Эта статья требует дополнительных ссылок для проверки . Пожалуйста, помогите улучшить эту статью , добавив цитаты из надежных источников . Материал, не полученный от источника, может быть оспорен и удален. Поиск источников:  «Макет страницы»  -  новости  · газеты  · книги  · ученый  · JSTOR ( май 2014 г. ) ( Узнайте, как и когда удалить это сообщение-шаблон )

Потребительские журналы спонсируют рекламу и обложки в значительной степени полагаются на профессиональные навыки верстки страниц, чтобы конкурировать за визуальное внимание.

В графическом дизайне , макет страницы является расположение визуальных элементов на странице . Обычно он включает организационные принципы композиции для достижения конкретных коммуникационных целей. ^[1]

Макет страницы высокого уровня включает выбор общего расположения текста и изображений и, возможно, размера или формы носителя. Это требует интеллекта, сообразительности и творчества, и основывается на культуре, психологии и на том, что авторы и редакторы документов хотят донести и подчеркнуть. Пагинация на нижнем уровне и набор текста - это более механические процессы. С учетом определенных параметров, таких как границы текстовых областей, гарнитура и размер шрифта, предпочтение выравнивания может быть выполнено простым способом. До тех пор, пока настольные издательские системы не стали доминировать, эти процессы все еще выполнялись людьми, но в современных издательских системах они почти всегда автоматизированы . Результат может быть опубликован как есть (как для домашней телефонной книги интерьер) или может быть изменен графическим дизайнером (как в случае изысканной дорогой публикации).

Начиная с ранних иллюминированных страниц в переписанных вручную книгах Средневековья и кончая замысловатыми современными макетами журналов и каталогов, правильный дизайн страниц долгое время считался важным в печатных материалах. С печатных средств массовой информации, элементы , как правило , состоят из типа (текст), изображения (картинки), а иногда и место-держатель для графических элементов , которые не печатаются с чернилами , такой как матрица / лазерной резки , тиснение фольгой или блинтовым тиснением .

История и технологии верстки [ править ]

Прямая настройка физической страницы [ править ]

В рукописях все элементы добавляются вручную, поэтому создатель может определять макет непосредственно в процессе создания работы, возможно, с предварительным эскизом в качестве руководства.

При древней печати на ксилографиях все элементы страницы были вырезаны непосредственно на дереве, хотя более поздние решения по макету могут потребоваться, если печать будет перенесена на более крупную работу, такую ​​как большой кусок ткани, потенциально с множественными оттисками блоков.

With the Renaissance invention of letterpress printing and cold-metal moveable type, typesetting was accomplished by physically assembling characters using a composing stick into a galley—a long tray. Any images would be created by engraving.

The original document would be a hand-written manuscript; if the typesetting was performed by someone other than the layout artist, markup would be added to the manuscript with instructions as to typeface, font size, and so on. (Even after authors began to use typewriters in the 1860s, originals were still called "manuscripts" and the markup process was the same.)

After the first round of typesetting, a galley proof might be printed in order for proofreading to be performed, either to correct errors in the original, or to make sure that the typesetter had copied the manuscript properly, and correctly interpreted the markup. The final layout would be constructed in a "form" or "forme" using pieces of wood or metal ("furniture") to space out the text and images as desired, a frame known as a chase, and objects which lock down the frame known as quoins. This process is called imposition, и потенциально включает размещение нескольких страниц для печати на одном листе бумаги, который позже будет сложен и, возможно, обрезан. «Доказательство наложения» (по сути, короткий тираж печати) может быть создано для проверки окончательного размещения.

Изобретение горячего металла наборного в 1884 году ускорило процесс наборного, позволяя рабочие , чтобы произвести слизень -entire строк текста- с помощью клавиатуры. Заготовки возникли в результате заливки расплавленного металла в формы, временно собираемые наборной машиной. Однако процесс компоновки остался таким же, как и в случае с холодным металлом: сборка в физические камбузы.

Вставка эры [ править ]

Офсетная литография позволяет ярким и темным областям изображения (сначала снятого на пленку) контролировать нанесение краски на печатный станок. Это означает, что если одну копию страницы можно создать на бумаге и сфотографировать, то можно будет распечатать любое количество копий. Печатать можно на пишущей машинке или на специализированной наборной машине для достижения профессиональных результатов, сопоставимых с высокой печатью. Композитор IBM Selectric , например, может производить тип различного размера, различные шрифтов ( в том числе пропорциональных шрифтов ), а также с выравниванием текста . С фотогравировкой и полутонамифизические фотографии могут быть перенесены в печать напрямую, вместо того, чтобы полагаться на гравюры, сделанные вручную.

Затем процесс макета превратился в задачу создания пасты , названной так потому, что резиновый клей или другой клей будет использоваться для физической вставки изображений и столбцов текста на жесткий лист бумаги. Завершенные страницы становятся известны как готовые к съемке , «механические» или «механические».

Фотонабор был изобретен в 1945 году; после ввода с клавиатуры символы по одному снимались на фотонегатив, который затем можно было отправить в типографию напрямую или перенести на фотобумагу для наклеивания. Эти машины становились все более изощренными, с компьютерными моделями, способными хранить текст на магнитной ленте.

Автоматизированная публикация [ править ]

По мере развития графических возможностей компьютеров их начали использовать для непосредственного рендеринга символов, столбцов, страниц и даже многостраничных подписей , а не для простого вызова фотографического шаблона из заранее предоставленного набора. Электронно-лучевые трубки использовались не только в качестве устройств отображения для операторов компьютеров, но и для визуализации текста для фотонабора. Однако изогнутая природа ЭЛТ-дисплея привела к искажению текста и изображений на экране по направлению к внешним краям экранов. Появление в начале 2010 года мониторов с «плоским экраном» (LCD, LED и, в последнее время, OLED) устранило проблемы искажения, вызванные старыми ЭЛТ-дисплеями. По состоянию на 2016 год плоские дисплеи почти полностью заменили ЭЛТ-дисплеи. ^{[2] [ циркулярная ссылка]}

Принтеры, подключенные непосредственно к компьютерам, позволяли им печатать документы напрямую, в нескольких копиях или в виде оригинала, который можно было скопировать на аналогичную машину или копировальный аппарат . Текстовые процессоры WYSIWYG позволили обычным офисным пользователям и потребителям создавать более сложные макеты страниц, использовать выравнивание текста и использовать больше шрифтов, чем это было возможно на пишущих машинках. Ранней точечной матричной печати было достаточно для офисных документов, но ее качество было слишком низким для профессионального набора. Струйная печать и лазерная печать производили шрифты достаточного качества, поэтому компьютеры с этими типами принтеров быстро заменили фотонаборные машины.

С помощью современного программного обеспечения для настольных издательских систем, такого как флагманское программное обеспечение Adobe InDesign ^[3] и облачный Lucidpress , ^[4]процесс макета может происходить полностью на экране. (Аналогичные варианты макета, которые были бы доступны в профессиональной типографии, делающей макет, поддерживаются программным обеспечением для настольных издательских систем; напротив, программное обеспечение для обработки текстов обычно имеет гораздо более ограниченный набор доступных вариантов макета и типографики, жертвуя гибкостью для простоты использования для более распространенных приложений.) Готовый документ можно напрямую распечатать как готовую для камеры версию, без физической сборки (при наличии достаточно большого принтера). Полутоновые изображения должны быть либо полутоновыми в цифровом виде при отправке на офсетную печатную машину, либо отправлены отдельно в типографию для вставки в отмеченные области. Завершенные работы также могут быть переданы в цифровом виде в типографию, где они могут распечатать их сами, снять прямо на пленку или использовать компьютер для печати.технология, позволяющая полностью пропустить физический оригинал. PostScript и формат переносимых документов (PDF) стали стандартными форматами файлов для цифровой передачи.

Цифровые носители (не бумажные) [ править ]

С появлением персональных компьютеров навыки верстки страниц распространились на электронные носители, а также на печатные носители. Электронные книги , документы PDF и статические веб-страницы относительно близко отражают бумажные документы, но компьютеры также могут добавлять мультимедийную анимацию и интерактивность. Разметка страницы для интерактивных средств массовой информации совпадает с дизайном интерфейса и пользовательского опыта проектирования; интерактивная «страница» более известна как графический интерфейс пользователя (GUI).

Современные веб-страницы обычно создаются с использованием HTML для содержимого и общей структуры, каскадных таблиц стилей для управления деталями презентации, такими как типографика и интервалы, и JavaScript для интерактивности. Поскольку все эти языки основаны на тексте, эту работу можно выполнить в текстовом редакторе или в специальном редакторе HTML, который может иметь функции WYSIWYG или другие вспомогательные средства. Для мультимедийного контента могут использоваться дополнительные технологии, такие как Macromedia Flash . Веб-разработчики несут ответственность за фактическое создание готового документа с использованием этих технологий, но отдельный веб-дизайнер may be responsible for establishing the layout. A given web designer might be a fluent web developer as well, or may merely be familiar with the general capabilities of the technologies and merely visualize the desired result for the development team.

Projected pages[edit]

Projected slides used in presentations or entertainment often have similar layout considerations to printed pages.

The magic lantern and opaque projector were used during lectures in the 1800s, using printed, typed, photographed, or hand-drawn originals. Two sets of photographic film (one negative and one positive) or one reversal film can be used to create positive images that can be projected with light passing through. Intertitles were used extensively in the earliest motion pictures when sound was not available; they are still used occasionally in addition to the ubiquitous vanity cards and credits.

It became popular to use transparent film for presentations (with opaque text and images) using overhead projectors in the 1940s, and slide projectors in the 1950s. Transparencies for overhead projectors could be printed by some photocopiers. Computer presentation programs became available in the 1980s, making it possible to lay out a presentation digitally. Computer-developed presentations could be printed to a transparency with some laser printers, transferred to slides, or projected directly using LCD overhead projectors. Modern presentations are often displayed digitally using a video projector, computer monitor, or large-screen television.

Laying out a presentation presents slightly different challenges than a print document, especially because a person will typically be speaking and referring to the projected pages. Consideration might be given to:

• Sizing text and graphics so they can be seen from the back of the room, which limits the amount of information that can be presented on a single slide
• Using headers, footers, or repeated elements to make all pages similar so they feel cohesive, or indicate progress
• Using titles to introduce new topics or segments
• Pacing, so slides are changed at comfortable intervals, fit the length of the talk, and content order matches the speaker's expectation
• Providing a way for the speaker to refer to specific items on the page, such as with color, verbal labels, or a laser pointer
• Editing the information presented so it either repeats what the speaker is saying (so the audience can pay attention to either) or only presents information that cannot be conveyed verbally (to avoid dividing audience attention or simply reading slides directly)
• Use of animation to add emphasis, introduce information slowly, or be entertaining
• Making the slides useful for later reference if printed as handouts or posted online

Grids versus templates[edit]

Grids and templates are page layout design patterns used in advertising campaigns and multiple-page publications, including websites.

A grid is a set of guidelines, able to be seen in the design process and invisible to the end-user/audience, for aligning and repeating elements on a page. A page layout may or may not stay within those guidelines, depending on how much repetition or variety the design style in the series calls for. Grids are meant to be flexible. Using a grid to lay out elements on the page may require just as much or more graphic design skill than that which was required to design the grid.

In contrast, a template is more rigid. A template involves repeated elements mostly visible to the end-user/audience. Using a template to lay out elements usually involves less graphic design skill than that which was required to design the template. Templates are used for minimal modification of background elements and frequent modification (or swapping) of foreground content.

Most desktop publishing software allows for grids in the form of a page filled with coloured lines or dots placed at a specified equal horizontal and vertical distance apart. Automatic margins and booklet spine (gutter) lines may be specified for global use throughout the document. Multiple additional horizontal and vertical lines may be placed at any point on the page. Invisible to the end-user/audience shapes may be placed on the page as guidelines for page layout and print processing as well. Software templates are achieved by duplicating a template data file, or with master page features in a multiple-page document. Master pages may include both grid elements and template elements such as header and footer elements, automatic page numbering, and automatic table of contents features.

Static versus dynamic layouts[edit]

Static layouts allow for more control over the aesthetics, and thorough optimization of space around and overlapping irregular-shaped content than dynamic layouts. In web design, this is sometimes referred to as a fixed width layout; but the entire layout may be scalable in size while still maintaining the original proportions, static placement, and style of the content. All raster image formats are static layouts in effect; but a static layout may include searchable text by separating the text from the graphics.

In contrast, electronic pages allow for dynamic layouts with swapping content, personalization of styles, text scaling, image scaling, or reflowable content with variable page sizes often referred to as fluid or liquid layout. Dynamic layouts are more likely to separate presentation from content, which comes with its own advantages. A dynamic layout lays out all text and images into rectangular areas of rows and columns. As these areas' widths and heights are defined to be percentages of the available screen, they are responsive to varying screen dimensions. They'll automatically ensure maximized use of available space while always staying adapted optimally both on screen resizes and hardware-given restrictions. Text may freely be resized to provide users' individual needs on legibility while never disturbing a given layout's proportions. The content's overall arrangement on screen this way may always remain as it was originally designed.

Static layout design may involve more graphic design and visual art skills, whereas dynamic layout design may involve more interactive design and content management skills to thoroughly anticipate content variation.

Motion graphics don't fit neatly into either category, but may involve layout skills or careful consideration of how the motion may affect the layout. In either case, the element of motion makes it a dynamic layout, but one that warrants motion graphic design more than static graphic design or interactive design.

Electronic pages may utilize both static and dynamic layout features by dividing the pages or by combining the effects. For example, a section of the page such as a web banner may contain static or motion graphics contained within a swapping content area. Dynamic or live text may be wrapped around irregular shaped images by using invisible spacers to push the text away from the edges. Some computer algorithms can detect the edges of an object that contain transparency and flow content around contours.

Front-end versus back-end[edit]

With modern media content retrieval and output technology, there is much overlap between visual communications (front-end) and information technology (back-end). Large print publications (thick books, especially instructional in nature) and electronic pages (web pages) require meta data for automatic indexing, automatic reformatting, database publishing, dynamic page display and end-user interactivity. Much of the meta data (meta tags) must be hand coded or specified during the page layout process. This divides the task of page layout between artists and engineers, or tasks the artist/engineer to do both.

More complex projects may require two separate designs: page layout design as the front-end, and function coding as the back-end. In this case, the front-end may be designed using an alternative page layout technology such as image editing software or on paper with hand rendering methods. Most image editing software includes features for converting a page layout for use in a "What You See Is What You Get" (WYSIWYG) editor or features to export graphics for desktop publishing software. WYSIWYG editors and desktop publishing software allow front-end design prior to back-end coding in most cases. Interface design and database publishing may involve more technical knowledge or collaboration with information technology engineering in the front-end. Sometimes, a function on the back-end is to automate the retrieval and arrangement of content on the front-end.

Design elements and choices[edit]

Page layout might be prescribed to a greater or lesser degree by a house style which might be implemented in a specific desktop publishing template. There might also be relatively little layout to do in comparison to the amount of pagination (as in novels and other books with no figures).

Typical page layout decisions include:

• Size of page margins
• Size and position of images and figures
• Deciding on the number and size of columns and gutters (gaps between columns)
• Placement of intentional whitespace
• Use of special effects like overlaying text on an image, runaround and intrusions, or bleeding an image over the page margin
• Use of color printing or spot color for emphasis

Specific elements to be laid out might include:

• Chapter or section titles, or headlines and subheads
• Image captions
• Pull quotes and nut graphs which might be added out of course or to make a short story fit the layout
• Boxouts and sidebars, which present information as asides from the main text flow
• Page headers and page footers, the contents of which are usually uniform across content pages and thus automatically duplicated by layout software. The page number is usually included in the header or footer, and software automatically increments it for each page.
• Table of contents
• Notes like footnotes and end notes; bibliography, for example in academic journals or textbooks

In newspaper production, final selection and cropping of photographs accompanying stories might be left to the layout editor (since the choice of photo could affect the shape of the area needed, and thus the rest of the layout), or there might be a separate photo editor. Likewise, headlines might be written by the layout editor, a copy editor, or the original author.

To make stories fit the final layout, relatively inconsequential copy tweaks might be made (for example, rephrasing for brevity), or the layout editor might make slight adjustments to typography elements like font size or leading.

Floating block[edit]

A floating block in writing and publishing is any graphic, text, table, or other representation that is unaligned from the main flow of text. Use of floating blocks to present pictures and tables is a typical feature of academic writing and technical writing, including scientific articles and books. Floating blocks are normally labeled with a caption or title that describes its contents and a number that is used to refer to the figure from the main text. A common system divides floating block into two separately numbered series, labeled figure (for pictures, diagrams, plots, etc.) and table. An alternative name for figure is image or graphic.

Floating blocks are said to be floating because they are not fixed in position on the page at the place, but rather drift to the side of the page. By placing pictures or other large items on the sides of pages^[5] rather than embedding them in the middle of the main flow of text, typesetting is more flexible and interruption to the flow of the narrative is avoided.

For example, an article on geography might have "Figure 1: Map of the world", "Figure 2: Map of Europe", "Table 1: Population of continents", "Table 2: Population of European countries", and so on. Some books will have a table of figures—in addition to the table of contents—that lists centrally all the figures appearing in the work.

Other kinds of floating blocks may be differentiated as well, for example:

Sidebar:^[6] For digressions from the main narrative. For example, a technical manual on usage of a product might include examples of how various people have employed the product in their work in sidebars. Also called an intermezzo. See sidebar (publishing).

Program: Articles and books on computer programming often place code and algorithms in a figure.

Equation: Writing on mathematics may place large blocks of mathematical notation in numbered blocks set apart from the main text.

Presenting layouts under development[edit]

A mockup of a layout might be created to get early feedback, usually before all the content is actually ready. Whether for paper or electronic media, the first draft of a layout might be simply a rough paper and pencil sketch. A comprehensive layout for a new magazine might show placeholders for text and images, but demonstrate placement, typographic style, and other idioms intended to set the pattern for actual issues, or a particular unfinished issue. A website wireframe is a low-cost way to show layout without doing all the work of creating the final HTML and CSS, and without writing the copy or creating any images.

Lorem ipsum text is often used to avoid the embarrassment any improvised sample copy might cause if accidentally published. Likewise, placeholder images are often labelled "for position only".

See also[edit]

References[edit]

External links[edit]

Look up page layout or typesetting in Wiktionary, the free dictionary.

• TeX Users Group
• XML page at www.W3C.org
• SGML page at www.xml.org
• Symbols – All articles categorized as relating to typographical symbols