Веб-страницы
<<  Разработка веб-редактора формализованных электронных документов на основе технологии GWT Разработка web-приложений на платформе ASP  >>
Introduction to Web Page Design
Introduction to Web Page Design
Web Design Information
Web Design Information
In the beginning…
In the beginning…
And…
And…
Later…
Later…
Even later…
Even later…
Introduction to Terminology
Introduction to Terminology
What’s in a name (URLs)
What’s in a name (URLs)
The Basics of Web Design
The Basics of Web Design
Principles of Graphical Design
Principles of Graphical Design
Site Navigation Principles
Site Navigation Principles
Text Organization Principles
Text Organization Principles
Links
Links
Information (content)
Information (content)
Editing and Maintaining
Editing and Maintaining
Site Design Templates
Site Design Templates
More Templates
More Templates
Summary of Templates
Summary of Templates
Files on the Web
Files on the Web
File Types on the Web
File Types on the Web
More about files
More about files
Theoretical Considerations
Theoretical Considerations
Scenarios
Scenarios
Effective Web Page Elements
Effective Web Page Elements
Further Advice
Further Advice

Презентация: «Шаблоны на зимнюю тематику». Автор: Kris Green. Файл: «Шаблоны на зимнюю тематику.ppt». Размер zip-архива: 166 КБ.

Шаблоны на зимнюю тематику

содержание презентации «Шаблоны на зимнюю тематику.ppt»
СлайдТекст
1 Introduction to Web Page Design

Introduction to Web Page Design

GMST 511

2 Web Design Information

Web Design Information

Background on the web Terminology Web design principles Files on the web Some theoretical considerations Further advice

3 In the beginning…

In the beginning…

The WWW used straight HTML (Hyper Text Markup Language). And it was good… A little plain, an absolute pain, and completely unformatted, but it was good.

<html> <title> Kris Green's Home Page</title> <body bgcolor=#e47833> <img src="gifs/dragon.gif" align=left> <h1> Welcome to the Source of all Information! </h1> Well, information about me or information I find important, at least. I would first like to introduce myself, and then provide a brief overview of my home page, so that you'll know whether or not what you're looking for is here.<br> <br> <p>I'm currently in my fifth (and hopefully final) year graduate student at the University of Arizona, studying Applied Mathematics. My research interests center around large scale matter composed of tachyons as a cosmological source of structure. I also teach here in the math department, and if you're interested in some materials related to the course I'm currently teaching, follow the link above marked "Current Teaching".<p>Second, I enjoy martial arts. While I was an undergraduate at the University of Tennessee, I studied Isshinryu Karate under Bill Rader, a fourth generation student via Mr. Wheeler. I achieved the rank of First Kyu (or brown belt). </body> <hr> <address>Kris Green/<a href="http://www.math.arizona.edu"> Department of Mathematics</a> /<a href="http://www.arizona.edu">The University of Arizona</a> /last revised November 7, 1998</address> </html>

4 And…

And…

You couldn’t just “post the web page”; you had to use FTP (File Transfer Protocol) to get it into place You had to type all the code into a text editor, then load it into the browser to view the results, then change the code, then reload, then… Plus, all the browsers did stuff differently

5 Later…

Later…

We got new features: Tables Frames Image maps CGI Scripting These gave users a way to control formatting, make navigation easier, and provide some interactivity (like forms...)

6 Even later…

Even later…

We got WYSIWYG Interfaces (Frontpage and other packages)* We got Java, Javascript, XML, DHTML, CSS, Flash, Swish, Pop-up adds, P2P downloads…

* Now called GUI (Graphical User Interfaces).

7 Introduction to Terminology

Introduction to Terminology

Pages -- single HTML or HTM file (Hyper Text Markup) all information related to a single theme usually small (in physical file size) requires planning for layout

Sites -- consist of multiple pages integrates several different themes can be immense requires more careful planning for design and navigation

8 What’s in a name (URLs)

What’s in a name (URLs)

URL = Uniform Resource Locator Contains three parts: Protocol (http, ftp, etc.) Server name File name, including path http://keep2.sjfc.edu/faculty/green/default.htm

File name and path*

Protocol for reading

Server name – extension tells type of server

9 The Basics of Web Design

The Basics of Web Design

Principles of graphic design for the web Navigation concepts for the web Organization of text on the web Links from one page to another Content and information Editing and maintaining Site design plans (graphical presentation)

10 Principles of Graphical Design

Principles of Graphical Design

Keep the file size for the graphics small on the main page (use thumbnails with links to larger pictures, include file size information with link.)* Use colors from the “standard color palette” to reduce file sizes and increase flexibility. Keep backgrounds simple and not “busy”. Keep the viewable size of the page in mind so you can avoid scrolling as much as possible.

* This is less important now with the large bandwidth Internet connections (RR and DSL).

11 Site Navigation Principles

Site Navigation Principles

Use a simple, consistent navigation interface. Organize the pages so that there is less need for many confusing navigation buttons. Remember, It’s the World Wide Web, NOT the World Wide Bowl of Spaghetti. Carefully plan the site organization FIRST. Site design should be based on function and content. Remember, “Three Clicks to Information”.

12 Text Organization Principles

Text Organization Principles

Do not rely on spacing, tabs, or line breaks. Use tables (with border=0) to space the information on the page. Use horizontal lines to separate content, not for visual organization. Use headings (H1 through H6) rather than fonts and font sizes to organize information. Maintain a good, consistent visual hierarchy. Lists are good for organization.

13 Links

Links

Provide the user with information about the link (title of site, file size and format, etc.) rather than just a URL. Don’t change the link colors, the followed link colors, or the basic text colors, if possible. People have learned to interpret the standard colors. Use a simple, consistent navigation throughout the site.

14 Information (content)

Information (content)

Include author information and contact information to the author and site manager. Focus the content of each page. Provide a list of links to other web sites that support or “fill out” your material. Vertical stratification of information is important to maintain consistency. Be concise and factual.

15 Editing and Maintaining

Editing and Maintaining

By all means, spell check! Frequently check active vs. dead links. Show, on the page, the date of the last modifications to the site/page. If you have to “take the site down” temporarily, provide an “under construction page” for the user with an estimated date of return. Plan a naming convention for files FIRST so that updating and maintaining is less of a hassle.

16 Site Design Templates

Site Design Templates

Basic Grid Format

Hierarchical Format

Home Page

A1

B1

C1

D1

A2

B2

C2

D2

A3

B3

C3

D3

17 More Templates

More Templates

Sequential

Web Layout

18 Summary of Templates

Summary of Templates

Complex Educated Audiences

Simple Basic content, Training sites

Linear narrative Predictable structure

Nonlinear, hyperlinked Flexible, may be confusing

19 Files on the Web

Files on the Web

HTML files = text document plus code Browser interprets code Code contained in tags (<h1> Stuff </h1>) Each image, sound, video, etc. is a separate file – all must be placed in location for access to outside world. However, images can be re-used.

20 File Types on the Web

File Types on the Web

IMAGES MOVIES SOUND FLASH MOVIE STYLE SHEETS DATA TEXT DOCUMENTS Other files

.gif, .jpg others exist, but are not supported* .rm, .avi, .mpeg, .mov .wav, .mp3 .fla ? .swf .css .xml .doc, .pdf .xls, .ppt, etc.

* Applies to most clip art (.wmf or anything).

21 More about files

More about files

Everything on your site must be in a publicly accessible folder – usually called public_html Folders and file organization are critical Paths to files are important Tree structure on the file server Relative or absolute paths

22 Theoretical Considerations

Theoretical Considerations

(Un)Intended consequences (see handout) Scenarios for online classrooms (taken from a presentation by Gerald Boerner at the Syllabus Conference, 2002) Effective web page elements for classroom support (taken from a presentation by G. Boerner at the Syllabus Conference, 2002)

23 Scenarios

Scenarios

Low-Tech traditional classroom Technology-supported classroom Web-aware hybrid classroom Web-supported classroom Web-based online classroom

All material in this section is copyright Gerald Boerner (2000) and is used without express written permission.

24 Effective Web Page Elements

Effective Web Page Elements

25 Further Advice

Further Advice

Look to web sites that catch your attention for more hints. Check out Dave Siegel’s book Creating Killer Web Sites and his web site at www.killersites.com/core.html Try Web Style Guide by P. Lynch and S. Horton (available at SJFC Library).

«Шаблоны на зимнюю тематику»
http://900igr.net/prezentacija/informatika/shablony-na-zimnjuju-tematiku-194586.html
cсылка на страницу

Веб-страницы

13 презентаций о веб-страницах
Урок

Информатика

130 тем
Слайды
900igr.net > Презентации по информатике > Веб-страницы > Шаблоны на зимнюю тематику