Web Design All-in-One For Dummies, 2nd Edition
Overview
If you want just one complete reference on web design, this book is it. The newest edition of this essential guide features 650+ pages on the latest tools and new web design standards, such as HTML5, CSS 3, and other core technologies and page-building strategies. Five minibooks provide deep coverage: essential pre-design considerations, how to establish the look of your site, building a site, how to test your site, and taking your site public. Design professional and author Sue Jenkins understands what designers need and gives you the answers.
Read More
About The Author
Sue Jenkins is a working designer as well as a design trainer and author. Her design firm, Luckychair, provides design services for web, logo, and print. Jenkins has also created a series of courses on popular Adobe design tools including Photoshop and Illustrator.
Sample Chapters
web design all-in-one for dummies, 2nd edition
CHEAT SHEET
Whether you're looking to design your own website or are a new web designer who plans to make a career of this exciting profession, you might be feeling overwhelmed. This handy guide to HTML/HTML5 and Cascading Style Sheets (CSS) gets you started on the right path.
View Cheat Sheet
View Cheat Sheet
HAVE THIS BOOK?
View Book Companion Site
Access practice tests
Additional Book Resources
Articles from
the book
General Programming & Web Design
Though DOCTYPEs have been around in the web world since about 1999, only in the past few years have they started getting the kind of respect and attention they were intended to have.
A DOCTYPE — also often referred to as a Document Type Definition, or DTD, or sometimes even a Document Type Declaration (again, DTD) — is a set of instructions in the top code of an HTML page that tells a browser how to identify the type of code that the page was written in as either HTML, XHTML, HTML5, or Frames.
General Programming & Web Design
In 1994, Tim Berners-Lee founded the World Wide Web Consortium (W3C) in order to make all software and hardware web accessible. The W3C is international vendor-neutral group dedicated to bringing standards to the web.
The W3C’s mission is “to lead the World Wide web to its full potential by developing protocols and guidelines that ensure long-term growth for the web.
General Programming & Web Design
With cascading style sheets (CSS), you can apply background properties to a number of different objects on a web page, including the whole page, a particular layer, a table, a table cell, and even text.
background-color: A background color can be applied to most objects on a page, including text, tables, table cells, layers, and the body of a page using a hexadecimal value.
General Programming & Web Design
Block properties control the alignment and spacing of objects on a page through their tags and attributes. Blocks include text, content inside tags (both with and without positions specified), tags using the display:block style, and images or paragraphs set with absolute or relative positions.
word-spacing: To adjust the spacing between individual words, use any positive or negative number in px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage), such as word-spacing: 2px;.
General Programming & Web Design
With the box properties, you can position styled objects anywhere in a browser window, position objects relative to the other objects on the page, and apply the padding and margin box style rules selectively to any of or all the four sides of the styled object, such as left and bottom or top, left, and right.
When styling less than all four sides, be sure to add 0 values to the sides that should not contain values, rather than leaving them blank.
General Programming & Web Design
If you're designing websites, you're probably going to want to use standards-compliant HTML5 markup — after all, you need to use some type of markup language so that your websites can communicate, right? The table here gives you a rundown of the most popular HTML5 tags and tells you what each does.
Tag Description
Defines a comment in the HTML code
Defines the document type
Defines an anchor
Defines an article
Defines content that sides next to other content
Defines a sound
Defines a long quotation
Defines the body element
Inserts a single line break
Defines an area where graphics can be drawn with JavaScript
Defines a table caption
Defines a citation
Defines computer code text
Defines a details section that can be shown or hidden
Defines a section in a document
Defines emphasized (italic) text
Defines a space to insert media files like plug-ins or applications
Defines content like photos, illustrations, and diagrams, etc.
General Programming & Web Design
You can use many different FTP applications to transfer your files to your website. Although their interfaces may be somewhat different, most FTP applications allow you to do the same things with your files, such as viewing a listing of files by name, date, and size, creating directories, and allowing you to transfer, copy, rename, and delete files and directories on the remote server.
General Programming & Web Design
Cascading Style Sheets (CSS) fall into four different types (or styles). When you understand how these four different types work, you'll be styling your web pages more efficiently.
To keep your CSS organized, use CSS comment tags to identify the different sections of CSS within your style sheet. For instance, you may have a section for the header styles, for the sidebar styles, for the navigation styles and for the footer styles.
General Programming & Web Design
Several fantastic free online website code validation tools are at your disposal. The W3C provides multiple tools that conform to and validate against the W3C’s latest recommended standards for CSS, HTML, XHTML, HTML5, and 508 accessibility.
W3C Markup Validator
W3C Link Checker
W3C CSS Validator
W3C Log Validator
W3C Unicorn Unified Validator
CSS Portal CSS Validator
XHTML-CSS Validator
Validator.
General Programming & Web Design
With CSS3, you can easily add as many background images to any one element as you please. You can also rotate images. The illustration shows an example of a container with three background images, a pattern, and two PNG files with transparency.
The simplest way to add multiple images is to separate each by a comma, making sure to place the image you want to be in the topmost position first and any additional images below it in the desired stacking order:
.
General Programming & Web Design
If you’re a Dreamweaver user, you almost don’t have to think about the document type definition (DTD) when creating a web page because the program automatically inserts the selected DOCTYPE and DTD into the code each time you create a new document through the New Document dialog box.
Of course, you have other ways to create a new file in Dreamweaver, and in those cases, the program’s default DTD, as specified in the program’s preferences, will be automatically inserted.
General Programming & Web Design
Class styles, which are also sometimes called custom class styles, custom styles, or custom classes, in Cascading Style Sheets (CSS) are for those times when you want to create a special style and then selectively apply it to an unlimited number of elements or objects on a web page.
For example, in the sentence “Our Daily Deals newsletter brings you the hottest sales, promotions, and special offers at the most popular stores in one easy-to-read daily e-mail,” you could create a custom class style to modify the words Daily Deals and then apply that style to those words in the HTML.
General Programming & Web Design
After you’ve mastered working with custom class, tag redefines, and ID styles in Cascading Style Sheets (CSS), you can step into the big leagues of compound styles. To understand how to work with compound styles, you must first have an understanding of HTML/CSS document trees, which define the relationships between objects within the document.
General Programming & Web Design
One of the biggest issues with building web pages is ensuring that those pages are cross-browser and device compatible. This means that they should look good and function properly in as many browsers and on as many devices as possible.
Many code editors include some kind of browser compatibility tool that takes a look at all the tags in your files and determines whether those tags and any attending attributes are compliant with the latest W3C recommendations for your selected DTD in the most popular current browsers.
Whether you’re hand-coding your website or working with a code/WYSIWYG editor, you must always make a practice of checking the hierarchical order, syntax, and spelling of your HTML, CSS, JavaScript, jQuery, and other programming code. Even when you use the best programs available, at some point your code could include errors because you are human.
General Programming & Web Design
When most web designers select a document type definition (DTD) for their web docs, they have all the intention in the world of writing code that’s compliant with that DTD’s syntactical rules.
Sometimes, however, with all the cutting and pasting and inserting and hand-coding, the syntax gets out of whack here and there, and when the time comes to test and validate pages, you might find errors that cause the pages to not display exactly as you intended.
General Programming & Web Design
When a web server receives a request from a browser that it doesn’t know how to process, it typically returns one of several error messages to the visitor’s browser window. Two of the most common errors are
401 Unauthorized Access: This message gets displayed when people attempt without permission to access web pages that are password protected.
General Programming & Web Design
One of the most common usages of the compound styles of Cascading Style Sheets (CSS) is to create custom hyperlinks with pseudo-classes, which can be used to modify the default color and attributes of hyperlinks.
The hyperlink compound pseudo-class style can be written as a two-part selector where the anchor tag is separated by a colon followed by the name of the link state, as in a:link, a:visited, a:hover, and a:active.
General Programming & Web Design
An ID style is a kind of hybrid Cascading Style Sheet (CSS) style rule that combines certain elements of both custom class and tag redefine styles. With an ID style, the declarations defined in that style are automatically applied to any object on the page that has an id attribute that matches the id name in the ID style.
Many designers create their own version of a master CSS file of HTML codes, which they then adapt to the needs of each individual site, to help speed the process of building a website from scratch.
As you build more and more websites, some styles will become a regular part of your standard design practice. For instance, you might always want to set your page margins to 0, specify a page background color, choose a default font for all text, create redefine styles for paragraphs and headings, specify style attributes for at least two (link and visited) hyperlink states, and make a custom bullet style.
General Programming & Web Design
When you create a visual site map, you create a diagram of all the pages on a website, including the interconnectivity of the main pages through navigation and sub-navigation. You then use that information to help gather and define site content, as well as serve as a useful guide when generating the mock-up of the site’s design.
General Programming & Web Design
Groups of images can be presented on the web in a variety of different ways. There are galleries, sliders, and Lightbox image viewers, all of which can be constructed in an unlimited number of ways. For instance, image viewers can be built using some combination of HTML, CSS, JavaScript, jQuery, or even Flash.
General Programming & Web Design
A placeholder page is exactly what it sounds like: It’s the default home page that visitors see at a particular web address — your domain name — when you (or your client) have both registered the domain and set up a hosting plan, but have not yet published the new website or any of your own pages there.
To create your own custom placeholder page, you need access to the following things:
A text, HTML, or WYSIWYG code editor to build the placeholder page such as Dreamweaver, CoffeeCup, Amaya, Kompozer, TextWrangler, or even TextEdit or Notepad
The site owner’s company name/logo in GIF, PNG, or JPG format
The descriptive statement about the site that will be included on the placeholder page
The site owner’s e-mail address, which should use the new domain name such as info@mysite.
General Programming & Web Design
Next, you need to edit the existing .htaccess file on your web server (if one already exists) or create a new one. An .htaccess file is a hypertext file that provides directives to the server, such as password protection and serving error pages.
This file needs to sit at the root level of your host directory to provide instructions to the server on how to serve up your new custom documents should either of these errors occur.
General Programming & Web Design
Although each web code editor may have slightly different reporting tools to help you find common code mistakes, most should have certain features in common. For example, Dreamweaver’s reports can identify the following issues:
Combinable nested font tags such as Hello, which could be either rewritten as Hello or, better yet, stripped of font tags so that you can style the page with CSS.
General Programming & Web Design
Dreamweaver users can easily insert a link tag to an external Cascading Style Sheet (CSS) without having to commit to memory all the required code or the proper syntax. Moreover, when creating links to an external CSS file in Dreamweaver, you can also use that opportunity to select a CSS media type, if desired.
General Programming & Web Design
To link an HTML page to an external Cascading Style Sheet (CSS), just insert a single line of code into the head of your page that references the name and location of the external CSS file relative to the root level of the server on which the site resides.
The line of code for the link must be placed somewhere between the opening and closing tags of every HTML page on your site that you want to be styled with it.
General Programming & Web Design
By default, all HTML tags in Cascading Style Sheets (CSS), are structurally preformatted to look a particular way and perform specific functions. Take the tag, for example. This tag is preformatted to be big, black, and bold, and it is intended to identify the main heading within the text, as opposed to the regular text, which is marked up with tags in the content.
Talk about powerful new features in cascading style sheets (CSS): By pairing the :hover pseudo-class with the CSS3 transition property, you can add slick interactive features to your objects without the use of Flash, JavaScript, or jQuery!
The transition property actually has four settings, which should be written in the CSS in the following order: property, duration, timing-function, delay.
General Programming & Web Design
The first thing you can do to improve a website’s search engine friendliness (search engine optimization) is to maximize the keywords you use in your content.
One of the things that search engine robots and spiders do is search for meaningful content within the text on pages that they crawl. This means that the sites you design need to help those bots find that content by including site-specific keywords that identify a company’s products and services, especially on the home page.
General Programming & Web Design
Most web code editors have a command that automatically cleans up the common errors in your code. For instance, the Clean Up Word HTML/XHTML command in Dreamweaver is a must for any webpage that includes content that was copied from Word or any other Microsoft documents.
This is important because Microsoft files often embed extra markup when pasted into a web page to make the file’s content retain its formatting.
General Programming & Web Design
You can do literally hundreds of tricks on your website with CSS3. Among the key tricks are resizing elements of your webpage and creating gradients for your background.
How to resize elements with CSS3
You’ve no doubt heard of resizing a browser window. With CSS3, you can now give visitors the ability to resize any tag or form textarea element by using the resize property.
General Programming & Web Design
Instead of having to use up to four separate images to give the illusion of a curved shape on your website, with CSS3 you can now create containers with curved corners! Here’s the code, which has the fully supported CSS3 declaration at the top followed by prefixed duplicates for other browsers:
#box {
border-radius: 20px;
/* for Mozilla Firefox */
-moz-border-radius: 20px;
/* for Safari & Google Chrome */
-webkit-border-radius: 20px;
}
You can use the border-radius style on any object including rectangular images.
General Programming & Web Design
After you have chosen your method of FTP for your website (which may include purchasing, downloading, and installing a standalone application), your next step is to set up the remote connection to the host server. This process involves configuring the FTP client with a session profile for the connection to your domain.
General Programming & Web Design
Though you’re undoubtedly very excited about publishing your website, you have one more task to perform beforehand: Set up a test directory where you can upload your site to the hosting server for one final round of quick testing.
A test directory is a folder you create that sits at the root level of the remote server.
General Programming & Web Design
Images need not just sit on your web page exactly where you stick them. Instead, use CSS with your images to position them relative to other content, and add padding and border attributes to one or more sides.
To style an image, you have three options:
Create a tag redefine style for the tag to create a style that applies to all images on your page(s).
General Programming & Web Design
Styling lists and tables is a bit different from styling content out in the body of the page, because both lists and tables have specific tags that can be redefined to control how content sits within those structures.
How to style lists with CSS3
With lists, you can select type attributes, such as font, size, and alignment, and apply a background color and border to each list item.
General Programming & Web Design
When you are styling paragraphs, headings, and footers, most of the work can be automatically accomplished by creating tag redefine styles for the tag and however many heading tags you intend to use, such as , , and :
p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #039;
background-color: #FCEBB6;
}
In some circumstances, you may want to create a custom style and apply that selectively to individual words or phrases throughout your text by using the class=”stylename” attribute as part of the opening tag that surrounds the content, whether that be a paragraph, heading, or span tag:
.
General Programming & Web Design
As soon as a new website is 100 percent complete and published on its domain, the URL can be submitted to search engines for indexing and listing. You do this by submitting the site’s URL to the search tools that the target audience is likely to use.
These tools include search engines, which use robots and spiders to crawl the web in search of new listings, and search directories, which are essentially categorized lists of sites that are sometimes compiled or edited by people instead of bots.
General Programming & Web Design
If you chose to use Dreamweaver to create your website, you have a number of ways to transfer files to your webpage through the Files panel. The smartest way to transfer files is to use the expanded Files panel so that you can view both the local and remote files at the same time, much like a standalone FTP client.
General Programming & Web Design
When a custom placeholder page is created for a client’s webpage, be sure you get your client’s approval on the page before publishing it. This gives the client the opportunity to review your work and suggest any changes that may need to be made. After all, this page represents the client’s company, and she will want to put her best face forward.
General Programming & Web Design
No matter what code editor you happen to use for your website, you absolutely must use a built-in or standalone validation tool to check the accuracy of your code.
Most code editors have some kind of feature that allows you to validate code in the currently open file, a series of selected files, or the specified managed site, and you should be able to use this tool to validate a number of different markup languages, including HTML, XHTML, HTML5, JSP, CFML, XML, and WML.
General Programming & Web Design
A link checking tool can help you to check your webpages for broken internal links (for example, you misspelled index.html as indez.html). It can even display a list of all the page’s external links and help you to identify any orphaned files (unused or unlinked-to files) that you can remove from the site to help save room on the server.
For simplicity, the CSS3 modules can be separated into into ten categories: borders, backgrounds, fonts, text effects, multiple columns, transitions, 2D transitions, 3D transitions, animations, and user interface. Take a brief look at each module to see what it can do.
Borders: The border module extends the capabilities of the borders category by adding options for setting the border radius to make curved corners, the box shadow for adding drop shadows, and the border image for using graphics to style borders rather than using a single color per edge.
In mid-2010, web designers and developers rejoiced as CSS3 began to make its way into the mainstream. Since that time, browser support for CSS3 has steadily increased and improved, even though CSS3 isn’t officially a W3C standard yet.
In fact, the only drawback (if you even want to call it that) to using these selectors today is that you may occasionally still need to add some browser-specific prefixes to your CSS to ensure that all the CSS3 styles appear correctly in the older versions of the most popular browsers.
Most of the best code editors these days — whether you’re using a code-only editor or one with a WYSIWYG (“what you see is what you get”) view — automatically write web code for that conforms to HTML 4.01, XHTML 1.0, or HTML5 standards based on the document type definition (DTD) you select when creating your pages.
General Programming & Web Design
Lists styled with cascading style sheets (CSS) are much more robust than lists styled with standard list HTML formatting. With CSS, you can easily select the list type for both numbered and bulleted lists, set the position of the bullets relative to the contents within the list, and even choose to use your own graphic for the bullet image.
General Programming & Web Design
Most CSS styles fall into nine basic style and positioning categories. This list can help you keep track of all the cool things you can do with CSS:
TYPE: Font family, size, style, weight, color, decoration
BACKGROUND: Background color, image position, and repeat
BLOCK: Word and letter spacing, text ali
You can use Cascading Style Sheets (CSS) in your web pages in three ways: external, internal, and inline. Which you use is dependent on how you want your design to work.
External CSS
External is the preferred way of using CSS. Ideally, you place all your CSS styles into an external CSS file, and then add a link to it in all of your site’s pages.
General Programming & Web Design
The positioning attributes of CSS are used primarily to style layers using the tag, though you can also use them to style the position of an image, container, or block-level element within the browser. For layers, both the contents as well as the container can be styled with attributes in this category.
position: Determines how a styled element should be positioned in a browser window.
General Programming & Web Design
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics — the style and positioning — of elements within a web document written in a simple markup language.
CSS syntax is made up of two parts: the selector and the declaration block inside curly brackets. Inside the declaration block you can have multiple declarations.
General Programming & Web Design
Simply put, a domain name is a name that is used to identify an address on the Internet for a particular website and any e-mail addresses configured for that site. For instance, if your company is called Clean For Dreams, your domain name might be http://www.cleanfordreams.com, and your e-mail address could be info@cleanfordreams.
General Programming & Web Design
First and foremost, designing websites that follow web standards helps ensure that anyone using the web — regardless of their browser, device, or operating system — can view the content on a web page. Additionally, following web standards also makes sites easier to maintain and thus makes them an even more cost-effective method for communicating with site visitors than traditional methods of marketing and communication.
General Programming & Web Design
Load More Articles
Related Books
0:00
0:00
https://cdn.prod.website-files.com/6630d85d73068bc09c7c436c/69195ee32d5c606051d9f433_4.%20All%20For%20You.mp3
Frequently Asked Questions
No items found.
