Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Web Design - Notes
Document related concepts
Transcript
Web Design Notes
Web Design Eve Course – Notes
These notes are designed to help anyone studying web site design. They provide a basic
coverage of a range of related subjects in order to assist with the design and build of web
pages within Dreamweaver.
1. The Big Picture
The Internet
The Internet is a global system of interconnected computer networks that use the standard
Internet protocol suite to serve billions of users worldwide. It is a network of networks
that consists of millions of private, public, academic, business, and government networks,
of local to global scope, that are linked by a broad array of electronic, wireless and
optical networking technologies. The Internet carries an extensive range of information
resources and services, such as the inter-linked hypertext documents of the World Wide
Web (WWW) and the infrastructure to support email.
The World Wide Web
A technical definition of the World Wide Web is: all the resources and users on the
Internet that are using the Hypertext Transfer Protocol, a broader definition comes from
the organization that Web inventor Tim Berners-Lee helped found, the World Wide Web
Consortium (W3C):
"The World Wide Web is the universe of network-accessible information, an
embodiment of human knowledge."
The W3C and Tim Berners-Lee
World Wide Web Consortium or W3C was co-founded by Sir Tim Berners-Lee one of
the main people credited with ‘inventing’ the Internet. This organization oversees the
development of the world wide web and ensures that the companies responsible for
browser development (Internet Explorer, Firefox, Opera etc) maintain a fair, inclusive,
accessible, security conscious approach to the constant improvement of the experience of
using the web.
2.What’s in a web page?
The websites that we visit (on the world wide web) are quite simply based around a series
of coded languages. The content of each site or page may vary to include graphics,
images, animations, movies, sounds, booking forms, downloadable documents etc but
principally they are all the same. Some of the codes used by web pages are:
HTML, CSS, JavaScript, Flash and PHP. As web design students we do not need to learn
how to use every single language but it helps to be able to know what each one does and
where it should be employed and recognize it when we see it on the screen or page.
HTML
HyperText Markup Language (HTML) is the main markup language for web pages.
HTML elements are the basic building-blocks of webpages.
HTML is written in the form of HTML elements consisting of tags enclosed in angle
brackets (for example <html>), within the web page content. HTML tags most commonly
Stuart Lansdowne 2012
Web Design Notes
come in pairs like <h1> and </h1>, although some tags, known as empty elements, are
unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the
end tag (they are also called opening tags and closing tags). In between these tags web
designers can add text, tags, comments and other types of text-based content.
The purpose of a web browser is to read HTML documents and compose them into
visible or audible web pages. The browser does not display the HTML tags, but uses the
tags to interpret the content of the page.
HTML elements form the building blocks of all websites. HTML allows images and
objects to be embedded and can be used to create interactive forms. It provides a means
to create structured documents by denoting structural semantics for text such as headings,
paragraphs, lists, links, quotes and other items. It can embed scripts in languages such as
JavaScript which affect the behavior of HTML webpages.
Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance
and layout of text and other material. The W3C, maintainer of both the HTML and the
CSS standards, encourages the use of CSS over explicitly presentational HTML markup.
CSS
CSS is an Abbreviation - it stands for Cascading Style Sheet.
CSS was first developed in 1997, as a way for Web developers to define the look and feel
of their Web pages. It was intended to allow developers to separate content from design
so that HTML could perform more of the function that it was originally based on - the
markup of content, without worry about the design and layout.
CSS didn't gain in popularity until around 2000, when Web browsers began using more
than the basic font and color aspects of CSS. And now, all modern browsers support all
of CSS Level 1, most of CSS Level 2, and some aspects of CSS Level 3.
Web Designers that don't use CSS for their design and development of Web sites are
rapidly becoming a thing of the past. And it is arguably as important to understand CSS
as it is to know HTML - and some would say it was more important to know CSS.
Style sheet refers to the document itself. Style sheets have been used for document design
for years. They are the technical specifications for a layout, whether print or online. Print
designers use style sheets to insure that their designs are printed exactly to specifications.
A style sheet for a Web page serves the same purpose, but with the added functionality of
also telling the viewing engine (the Web browser) how to render the document being
viewed.
Cascade is the special part. A Web style sheet is intended to cascade through a series of
style sheets, like a river over a waterfall. The water in the river hits all the rocks in the
waterfall, but only the ones at the bottom affect exactly where the water will flow. The
same is true of the cascade in Web style sheets.
Every Web page is affected by at least one style sheet, even if the Web designer doesn't
apply any styles. This style sheet is the user agent style sheet - the default styles that the
Web browser will use to display a page if no other instructions are provided. But if the
designer provides other instructions, the browser needs to know which instructions have
precedence.
For example, in my Web browser, the default font is "Times New Roman" size 16. But
nearly no pages I visit display in that font family and size. This is because the cascade
Stuart Lansdowne 2012
Web Design Notes
defines the second style sheets set by the designers to redefine the font size and family
and override my Web browser's defaults.
Where is CSS Used?
CSS is used to style Web pages. But there is more to it than that. CSS is used to style
HTML and XML markup. This means that anywhere you have HTML, XML markup
(including XHTML) you can use CSS to define how it will look.
CSS is also used to define how Web pages should look when viewed in other media than
a Web browser. For example, you can create a print style sheet that will define how the
Web page should print out and another style sheet to display the Web page on a projector
for a slide show.
Why is CSS Important?
CSS is one of the most powerful tools a Web designer can learn because with it you can
affect the entire mood and tone of a Web site. Well written style sheets can be updated
quickly and allow sites to change what is prioritized or valued without any changes to the
underlying XHTML.
The challenge of CSS is that there is so much to learn, not only understanding how to
correctly define the styles but also how to successfully apply them to the HTML.
But because CSS can cascade, and combine and browsers interpret the directives
differently, CSS is more difficult than plain HTML. But once you start using it, you'll see
that harnessing the power of CSS will give you more options and allow you to do more
and more things with your Web sites.
If you want to be a professional Web designer, you need to learn Cascading Style Sheets.
But luckily, they are fun to learn.
CSS looks like this:
.wrapper{
background-color: #FFFFFF;
width: 931px;
height: auto;
margin-right: auto;
margin-left: auto;
padding-bottom: 40px;
}
JavaScript
JavaScript is used in billions of Web pages to add functionality (including animation),
validate forms, communicate with the server, and much more. Generally speaking you
will not need to edit JavaScript but you should be able to recognize it when you see it - it
looks like this:
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;
i++)
Stuart Lansdowne 2012
Web Design Notes
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
Flash
Adobe Flash (formerly Macromedia Flash) is a multimedia platform used to add
animation, video, and interactivity to web pages. Flash is frequently used for
advertisements, games and flash animations for broadcast. A Flash animation or Flash
cartoon is an animated film which is created using Adobe Flash or similar animation
software and often distributed in the .swf file format. The term Flash animation refers to
the file format but to a certain kind of movement and visual style, which, in many circles
is seen as simplistic or unpolished. However, with dozens of Flash animated television
series, countless more Flash animated television commercials, and award-winning online
shorts in circulation, Flash animation is enjoying a renaissance.
Adding flash content to a website will make the site more interesting for the visitor
however, web designers should be aware that Apple ipads and iphones do not display
flash content and important search engine information such as keywords and relevant
written content that is contained within the flash files can not be interpreted by browsers .
PHP
PHP is a general-purpose server-side scripting language originally designed for Web
development to produce dynamic Web pages. It is used extensively where a database is
employed for example, as well as for accepting information imputed by the web page
visitor such as a form.
It is one of the first developed server-side scripting languages to be embedded into an
HTML source document, rather than calling an external file to process data. Ultimately,
the code is interpreted by a Web server with a PHP processor module which generates the
resulting Web page. It also has evolved to include a command-line interface capability
and can be used in standalone graphical applications. PHP can be deployed on most Web
servers and also as a standalone shell on almost every operating system and platform free
of charge. A competitor to Microsoft's Active Server Pages (ASP) server-side script
engine and similar languages, PHP is installed on more than 20 million Web sites and 1
million Web servers.
Browser
A web browser is a software application for retrieving, presenting, and traversing
information resources on the World Wide Web. An information resource is identified by
a Uniform Resource Identifier (URI) and may be a web page, image, video, or other piece
of content.[1] Hyperlinks present in resources enable users to easily navigate their
browsers to related resources.
Although browsers are primarily intended to access the World Wide Web, they can also
be used to access information provided by web servers in private networks or files in file
systems.
The major web browsers are Windows Internet Explorer, Mozilla Firefox, Apple Safari,
Google Chrome, and Opera
Stuart Lansdowne 2012
Web Design Notes
Search engine
A web search engine is designed to search for information on the World Wide Web and
FTP servers. The search results are generally presented in a list of results and are often
called hits. The information may consist of web pages, images, information and other
types of files. Some search engines also mine data available in databases or open
directories. Unlike web directories, which are maintained by human editors, search
engines operate algorithmically or are a mixture of algorithmic and human input. An
example of a search engine is Google.
Email
Electronic mail, commonly called email or e-mail, is a method of exchanging digital
messages from an author to one or more recipients. Modern email operates across the
Internet or other computer networks.
Social networking
A social networking service is an online service, platform, or site that focuses on building
and reflecting of social networks or social relations among people, e.g., who share
interests and/or activities. A social network service essentially consists of a representation
of each user (often a profile), his/her social links, and a variety of additional services.
Most social network services are web based and provide means for users to interact over
the internet, such as e-mail and instant messaging. Online community services are
sometimes considered as a social network service, though in a broader sense, social
network service usually means an individual-centered service whereas online community
services are group-centered. Social networking sites allow users to share ideas, activities,
events, and interests within their individual networks.
The main types of social networking services are those which contain category places
(such as former school year or classmates), means to connect with friends (usually with
self-description pages) and a recommendation system linked to trust. Popular methods
now combine many of these, with Facebook and Twitter widely used worldwide,
Nexopia (mostly in Canada);[1] Bebo,[2] VKontakte, Hi5, Hyves (mostly in The
Netherlands), Draugiem.lv (mostly in Latvia), StudiVZ (mostly in Germany), iWiW
(mostly in Hungary), Tuenti (mostly in Spain), Nasza-Klasa (mostly in Poland),
Decayenne, Tagged, XING,[3] Badoo[4] and Skyrock in parts of Europe;[5] Orkut and
Hi5 in South America and Central America;[6] and Friendster, Mixi, Multiply, Orkut,
Wretch, renren and Cyworld in Asia and the Pacific Islands and Twitter, Facebook,
LinkedIn and Orkut are very popular in India.
E-commerce
Electronic commerce, commonly known as e-commerce, eCommerce or e-comm,
consists of the buying and selling of products or services over electronic systems such as
the Internet and other computer networks. It is more than just buying and selling products
online. It also includes the entire online process of developing, marketing, selling,
delivering, servicing and paying for products and services. The amount of trade
conducted electronically has grown extraordinarily with widespread Internet usage. The
Stuart Lansdowne 2012
Web Design Notes
use of commerce is conducted in this way, spurring and drawing on innovations in
electronic funds transfer, supply chain management, Internet marketing, online
transaction processing, electronic data interchange (EDI), inventory management
systems, and automated data collection systems. Modern electronic commerce typically
uses the World Wide Web at least at some point in the transaction's lifecycle, although it
can encompass a wider range of technologies such as e-mail, mobile devices and
telephones as well.
Blog
A blog (a blend of the term web log)[1] is a type of website or part of a website. Blogs
are usually maintained by an individual with regular entries of commentary, descriptions
of events, or other material such as graphics or video. Entries are commonly displayed in
reverse-chronological order. Blog can also be used as a verb, meaning to maintain or add
content to a blog.
Most blogs are interactive, allowing visitors to leave comments and even message each
other via widgets on the blogs and it is this interactivity that distinguishes them from
other static websites.
Many blogs provide commentary or news on a particular subject; others function as more
personal online diaries. A typical blog combines text, images, and links to other blogs,
Web pages, and other media related to its topic. The ability of readers to leave comments
in an interactive format is an important part of many blogs. Most blogs are primarily
textual, although some focus on art (art blog), photographs (photoblog), videos (video
blogging), music (MP3 blog), and audio (podcasting). Microblogging is another type of
blogging, featuring very short posts.
SEO
Search engine optimization (SEO) is the process of improving the visibility of a website
or a web page in search engines via the "natural" or un-paid ("organic" or "algorithmic")
search results. Other forms of search engine marketing (SEM) target paid listings. In
general, the earlier (or higher on the page), and more frequently a site appears in the
search results list, the more visitors it will receive from the search engine's users. SEO
may target different kinds of search, including image search, local search, video search,
academic search[1], news search and industry-specific vertical search engines. This gives
a website web presence.
As an Internet marketing strategy, SEO considers how search engines work, what people
search for, the actual search terms typed into search engines and which search engines are
preferred by their targeted audience. Optimizing a website may involve editing its content
and HTML and associated coding to both increase its relevance to specific keywords and
to remove barriers to the indexing activities of search engines. Promoting a site to
increase the number of backlinks, or inbound links, is another SEO tactic
SERPS
A search engine results page (SERP), is the listing of web pages returned by a search
engine in response to a keyword query. The results normally include a list of web pages
Stuart Lansdowne 2012
Web Design Notes
with titles, a link to the page, and a short description showing where the Keywords have
matched content within the page. A SERP may refer to a single page of links returned, or
to the set of all links returned for a search query. A search engine results page (SERP), is
the listing of web pages returned by a search engine in response to a keyword query. The
results normally include a list of web pages with titles, a link to the page, and a short
description showing where the Keywords have matched content within the page. A SERP
may refer to a single page of links returned, or to the set of all links returned for a search
query.
3. Publishing and Hosting
Server
A large computer that houses or stores all of the files belonging to a website. In order to
put your site ‘online’ you will need to place your files on to a server.
Hosting
The service offered by companies owning servers. Hosting plans are generally paid for
monthly or annually. They will vary in cost, depending on a variety of factors such as the
amount of data your site will contain, the amount of traffic going to the site etc. An
average annual cost of hosting a small website is approx £35-£50.
Domains
A name allocated to a website such as www.bbc.co.uk.
Domain names come with a wide range of suffixes (.com, .net, .org etc) and vary in cost
between £3 - £20 per year.
FTP
The process of transferring files from your computer up to the server in order to publish
your website on the net. This very simple task is achievable via the use of the many free
FTP applications available. The user simply logs on to the server with the FTP
programme using the details provided by the hosting company and transfers all of the
files relevant to the website to a root folder on the server.
Sources:
http://www.webopedia.com/DidYouKnow/Internet/2002/Web_vs_Internet.aspportion of the Internet, albeit a
large portion, but the two terms are not synonymous and should not be confused.
http://en.wikipedia.org/wiki/
Stuart Lansdowne 2012
