Web Design All-in-One For Dummies, 2nd Edition book cover

Web Design All-in-One For Dummies, 2nd Edition

By: Sue Jenkins Published: 01-11-2013

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.

Articles From Web Design All-in-One For Dummies, 2nd Edition

page 1
page 2
page 3
page 4
page 5
page 6
56 results
56 results
Web Design All-in-One For Dummies Cheat Sheet

Cheat Sheet / Updated 03-27-2016

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
How to Add a DOCTYPE in Dreamweaver

Step by Step / Updated 03-27-2016

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. No matter which DTD you select, Dreamweaver automatically writes the appropriate DTD-specific code. For example, if you choose to build pages using the XHTML 1.0 transitional DTD, Dreamweaver’s code editor automatically writes XHTML-compliant code. Likewise, when you choose HTML5, Dreamweaver writes HTML5-compliant code. To select the appropriate DTD for your new documents in Dreamweaver, follow these steps:

View Step by Step
How to Remove Unwanted Formatting from Your Website

Step by Step / Updated 03-27-2016

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. Unfortunately, on the web, all this extra Microsoft HTML code is unnecessary. Therefore, you must use a tool like this to strip that extra markup out of your pages to ensure that your code — not Microsoft’s — dictates the look of the site within the browser. To access the Clean Up Word feature in any open document in Dreamweaver, follow these steps:

View Step by Step
How to Transfer Files to Your Website with Dreamweaver

Step by Step / Updated 03-27-2016

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. To transfer files to the remote server with Dreamweaver’s expanded Files panel, follow these steps:

View Step by Step
Nine Basic CSS Categories to Use in Web Design

Article / Updated 03-26-2016

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 alignment, block display BOX: Width, height, padding, and margin of an element, float, clear BORDER: Border style, width, color for up to four sides of an element LIST: List styles, custom bullets, bullet position POSITIONING: Position, size, visibility, z-index, placement, and clip of elements EXTENSIONS: Special cursor and filter effects, page break options TRANSITION: Animate objects using properties, duration, delay, and timing

View Article
The Anatomy of Cascading Style Sheets (CSS)

Article / Updated 03-26-2016

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. Each declaration is made of two parts — the property and the value: p {font-face: Georgia, Tahoma; color: #ffcc00; } In this example: p is the selector. {font-face: Georgia, Tahoma; color: #ffcc00; } is the declaration block. font-face: Georgia, Tahoma; and color: #ffcc00; are separate declarations. font-face is a property and Georgia, Tahoma is its value. color is a second property and #ffcc00; is its value.

View Article
Designing Your Website with HTML/HTML5

Article / Updated 03-26-2016

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. Defines the caption for a figure Defines a footer for a section or the entire document Defines a form to Defines header 1 to header 6 Defines information about the document Defines a header for a section or the entire document Defines a horizontal rule Defines an HTML document </span></td> <td>Defines an inline subwindow (frame)</td> </tr> <tr> <td><span class="code"><img></span></td> <td>Defines an image</td> </tr> <tr> <td><span class="code"><input></span></td> <td>Defines an input field</td> </tr> <tr> <td><span class="code"><label></span></td> <td>Defines a label for a form control</td> </tr> <tr> <td><span class="code"><li></span></td> <td>Defines a list item</td> </tr> <tr> <td><span class="code"><link></span></td> <td>Defines a resource reference</td> </tr> <tr> <td><span class="code"><map></span></td> <td>Defines an image map</td> </tr> <tr> <td><span class="code"><meta></span></td> <td>Defines meta information</td> </tr> <tr> <td><span class="code"><nav></span></td> <td>Defines a set of navigation links</td> </tr> <tr> <td><span class="code"><noscript></span></td> <td>Defines a noscript section</td> </tr> <tr> <td><span class="code"><ol></span></td> <td>Defines an ordered list</td> </tr> <tr> <td><span class="code"><p></span></td> <td>Defines a paragraph</td> </tr> <tr> <td><span class="code"><pre></span></td> <td>Defines preformatted text</td> </tr> <tr> <td><span class="code"><script></span></td> <td>Defines a script</td> </tr> <tr> <td><span class="code"><section></span></td> <td>Defines a section within a document</td> </tr> <tr> <td><span class="code"><select></span></td> <td>Defines a selectable list</td> </tr> <tr> <td><span class="code"><source></span></td> <td>Defines a media resource for audio or video</td> </tr> <tr> <td><span class="code"><span></span></td> <td>Defines a section in a document</td> </tr> <tr> <td><span class="code"><strong></span></td> <td>Defines strong (bold) text</td> </tr> <tr> <td><span class="code"><style></span></td> <td>Defines a style definition</td> </tr> <tr> <td><span class="code"><sub></span></td> <td>Defines subscripted text</td> </tr> <tr> <td><span class="code"><summary></span></td> <td>Defines a heading for a <details> element</td> </tr> <tr> <td><span class="code"><sup></span></td> <td>Defines superscripted text</td> </tr> <tr> <td><span class="code"><table></span></td> <td>Defines a table</td> </tr> <tr> <td><span class="code"><td></span></td> <td>Defines a table cell</td> </tr> <tr> <td><span class="code"><textarea></span></td> <td>Defines a text area</td> </tr> <tr> <td><span class="code"><th></span></td> <td>Defines a table header</td> </tr> <tr> <td><span class="code"><time></span></td> <td>Defines the date or time</td> </tr> <tr> <td><span class="code"><title></span></td> <td>Defines the document title</td> </tr> <tr> <td><span class="code"><tr></span></td> <td>Defines a table row</td> </tr> <tr> <td><span class="code"><track></span></td> <td>Defines the text tracks for audio or video</td> </tr> <tr> <td><span class="code"><ul></span></td> <td>Defines an unordered list</td> </tr> <tr> <td><span class="code"><video></span></td> <td>Defines a movie file or video</td> </tr> </tbody> </table>

View Article
Placing CSS in Your Web Design

Article / Updated 03-26-2016

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. This is the most efficient way to work, as all the pages will rely upon a single CSS file, which makes your job easier when it comes to editing your styles across an entire website. A link to an external CSS file is added to the code on each page before the closing tag: To import an external style sheet instead of linking to one, insert style and comment tags before the closing tag: <!-- <strong>@import url("stylesheet.css");</strong> --> Internal CSS Internal is good for single-page use and during development, but not for finished websites. Sometimes designers include internal CSS on a single page to override any links to external CSS files. To add CSS internally to a single page, place your CSS styles between a pair of </span> tags before the closing <span class="code"></head></span> tag on your page:</p> <pre class="code"><strong><style type="text/css"></strong> body { background-image: url("images/pattern.gif"); } p { font-family: verdana, arial, sans-serif; } <strong> Inline CSS Occasionally, you may need to override both external and internal CSS styles using inline CSS. Inline is not advised unless it is the best or only way to apply a style to an object or element in the HTML. To add CSS inline with your code, add the style definition to your opening HTML tag: style="color: #3399CC; font-size: 18px;">The Solar System

View Article
Four Types of Cascading Style Sheets in Web Design

Article / Updated 03-26-2016

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. CSS comments use the /* … */ syntax: /* This is a comment */ Class style (aka custom style) Class styles can be selectively applied to any HTML element using the class="customname" syntax. For example, you could create a class style called highlight that has a bright yellow background color: .highlight { background-color: #FFFF33; } To apply this style to any content, you'd simply use the class attribute: class="highlight">This is really important ID ID styles are automatically applied to one HTML element on the page with the same ID. For example, if you want to add a tag to hold your sidebar content, you'd give that container a semantic ID such as sidebar: #sidebar { background-color:#66CCFF; } Your code might then look something like this: id="sidebar"> Custom Web Design Services … Tag Tag styles let you automatically redefine the style and positioning of any existing HTML tag, such as body, p, h1, or li. For instance, you could set the font styles for all your tags throughout your entire site or within a particular section: h1 { font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; font-weight: bold; color: #8c9292; text-transform: uppercase; } Compound Compound styles are also automatically applied to an element based on its location within the page, such as all tags inside the with the ID of sidebar, which sits inside a parent container with the ID of wrapper: #wrapper #sidebar h1 { color: # CC3300; font-family: "Times New Roman",Georgia,Serif; }

View Article
Background Properties of Cascading Style Sheets (CSS)

Article / Updated 03-26-2016

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. When specifying hexadecimal color for any style, remember to add the number symbol (#) before the hex value, as in #cc9900, for best browser display results. p { background-color: #33ff00; } background-image: You can apply images, such as a background color, to the background of many different objects on a web page, including the body of a page, tables, table cells, and layers. You can control how the image tiles (repeats) by using the repeat attribute. .mylayer { background-image: url(images/car.gif); } background-repeat: The repeat attribute tells a browser how the background image should be repeated in the area it’s filling. By default, and unless otherwise specified, all backgrounds will tile vertically and horizontally to fill the entire background space of the styled tag or object. body { background-image: url(images/zigzag.gif); background-repeat: repeat-x; } The repeat attribute has four variables: repeat: This option is the same as the default setting for background images and tiles the background image both horizontally and vertically. repeat-x: Use this option when you want the background image to tile only along the horizontal axis. If desired, use it in conjunction with the horizontal and/or vertical background-position attribute. repeat-y: Use this option when you want the background image to tile only along the vertical axis. If desired, use it in conjunction with the horizontal and/or vertical background-position attribute. no-repeat: This setting displays the background image as a single static image with no repeating in either direction. background-attachment: This attribute refers to how the background image interacts with the content above it. The background image can behave in three different ways — scroll, fixed, and inherit — but not all three are consistently supported by all browsers, so be sure to test whichever option you select in a variety of browsers and browser versions on both Mac and PC platforms. body { background-image: url(images/biodiesel.gif); background-attachment: fixed; background-repeat: repeat-y; } Here is an explanation of the different background attachment styles: scroll: This is the default option for how the background image is attached to the page, which works the same whether the attribute is specified or unspecified in the CSS. With this option, the background image scrolls along with any text and other objects on the page. fixed: The fixed attribute keeps the background image fixed to the browser window while text and other objects on the page scroll past it. inherit: When you specify this option, the background image inherits the attachment rule, whether scroll or fixed, from its parent container, as with a table cell inside a table. background-position (X): Set the horizontal background-position attribute to control where in the browser window the background image displays and repeats. Choose left, center, or right or type any value in px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage). p { background-image: url(images/recycle.gif); background-repeat: repeat-x; background-position: left; } background-position (Y): Set the vertical background-position attribute to control where in the browser window the background image displays and repeats. Choose top, center, or bottom or type any value in px (pixels), pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), em (ems), ex (exs), or % (percentage). p { background-image: url(images/gogreen.png); background-repeat: repeat-y; background-position: center; } When both the horizontal and vertical background positions need to be specified in the CSS, list them together separated by a space: p { background-image: url(images/earthsafe.jpg); background-repeat: repeat-x; background-position: left center; } The horizontal position always goes before the vertical position when the two are combined. If this order is not followed, the element may not render properly, resulting in unexpected display issues when viewed in different browsers.

View Article
page 1
page 2
page 3
page 4
page 5
page 6