Anatomy of a Website Adobe Dreamweaver

Overview When you look at a web page, you might wonder how it is made. To display a web page, your Internet browser reads and interprets a special set of instructions. These instructions are written primarily in two languages: HTML and CSS Dreamweaver includes features that allow you to build web pages based on the latest web standards. Let's look at how HTML and CSS work together to make a web page.

What is HTML? Web pages display content and have an underlying structure defined by HTML. The content can include text, images, links, or even audio and video. Most HTML elements are written using opening and closing tags that tell the browser what type of content to display. The tags are written in a specific order to define the structure of the page. The example on the right shows three common HTML tags. specifies heading text, good for page titles specifies paragraph text, good for body text displays an image specified by a src (source file

What is CSS? With HTML you've given a basic structure to your web page, but there's not much customization to the style or layout. Eventually you want to add colors, format text and images, and reposition elements on your page. CSS is a language that works with HTML to apply this style and formatting to your web page. Use CSS to find one or more HTML elements, and then provide additional instructions for what to do with that element (such as change its color or center it on the page). The example on the right shows how CSS is used to change the appearance of the three HTML elements. h1 The heading text is center-aligned. p The paragraph text is red, bold, and center-aligned. img The image is resized to 150px by 100px

Stages of Web Design Plan your content Audience?Color SchemeGraphicsContent Wireframe your design Draw diagramsWrite content Create webpage HTMLCSS Publish your site Web address

Plan your content Which project are you going to choose?

Business Website You will be coming up with your own business and starting it from scratch. You will need to come up with the following to create your online store: Business Name What will your business do or sell? Mission Statement Location Phone Number address Motto Items and Services Cost of items and services PLUS MORE!!!

Career Website You will be researching a career – What do you want to be when you get older? You will need to research the following: What they do? Work Environment How to become one? Pay Job Outlook Interview 4 people in that field PLUS MORE!!

Plan Your Content Audience – who will be your audience? Bakery – people who like sweets Lawyer – other lawyers or students who want to become a lawyer Graphics – pictures Bakery – desserts, cupcakes, brownies Lawyer – books, lawyer, glasses Color Scheme Bakery – bright colorful colors Lawyer – neutral colors (brown, cream, black) Content – words Bakery – About your company, items selling, prices Lawyer – facts about being a lawyer

Homework Plan your content on paper You will need to have this to move on