![]() ![]() So obviously, the first thing you’ll need to do is create a layout in Photoshop. Part 1: Designing Your Page ‘n Slicin’ it Up The following sections describe how to take a created layout, slice it up in Photoshop, save it out, and then pull the whole thing into Dreamweaver to finish it off. It’s a very cool process, and one of the most popular methods for building web pages. Sounds awesome, huh?įinally, once everything’s saved out, you can pull everything into Dreamweaver and finish off your layouts with any necessary tweaks. Then, when you save everything out, Photoshop saves each slice as an individual graphic, and (and this is the icing on the cake for the code-leary) all the necessary code will automatically be written as well. Then you cut out all the page components-title bars, buttons, navigation menus, and so on-using Photoshop’s Slice tool. Well, you’d first design a page in Photohsop exactly as you want it to look when it goes live on the web. The footer will mark up the closing elementsNo doubt you’ve heard about image slicing, but do you know what it is and how it works? Image slicing is a technique for creating a web page (or a component of a web page, like a header or navigation menu) visually in Photoshop (Fireworks and Illustrator also allow you to slice images, too). In this case the header will mark up the introductory elements of the section or article. When the containing element is an article or section The footer would be used to mark up content at the end of the page: copyright information, navigation links, or other content. In this case the header is typically used to indicate the website branding and main navigation elements. The most common form is when the containing element is the body element. ![]() The header and footer elements are both used within the context of their containing element. However, this element should be reserved for primary navigational areas rather than simply lists of links. There can be multiple nav elements on a page. The nav element is used to indicate areas of the page used for primary navigation. An aside could show in a variety of contexts and visual treatments. However, don't consider it only a sidebar since that implies the content will appear on the side. The aside element represents content that is tangentially related to the parent element. Note: Both article and section elements can also contain article and section elements. Marking up the recipe with articles and sections would look like this: The two sub sections of the recipe do not stand on their own and therefore should each be a section. This indicates it should be marked up as an article. The recipe as a whole can stand on its own. Spread jelly over the peanut button on one slice of bread. Spread peanut butter on one side of both slices. This indicates and article.Ī section on the other hand, is only a part of a greater whole and does not stand on its own.Ĭonsider the following example of a simple recipe: PB&J Sandwiches When deciding between an article or section, consider whether the content would still make sense if taken out of its current page. The primary difference between the two is that articles are meant to encapsulate content that is self-contained. The article and section elements are both used similarly to represent thematic parts of a document. Several of these structural elements fall into the category of "sectioning content". The main element is wrapped around the recipe parts: In the example below, the chile recipe is the unique content. The main element is used to designate the unique content of each page. This includes branding, navigation, advertisements and copyright information. Most webpages contain a lot of information that is repeated across the site. This typically encompasses everything except the meta element and its sub elements. The body element contains all of the content of our document. ![]() You've already used the first section element: body. There are a group of HTML elements that are created to broadly give our documents more structure. Back to Week 3 page » HTML5 Structural Elements ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |