Copyright © Texas Education Agency, 2011. All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

Slides:

Advertisements

Similar presentations

DREAMWEAVER Welcome to our website!

Advertisements

This Presentation Contains Narration and Notes To hear the narration, turn on your speakers or plug in headphones. If you would like to view this slideshow.

Chapter 3 – Web Design Tables & Page Layout

Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.

Using Dreamweaver MX. Slide 1 Standard toolbars and menus Time indicator: gives an approximation of download time of the page Properties panel.

Learning the Basics – Lesson 1

KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.

Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.

Dreamweaver Cheat Sheet CSCI 100 – JW Ryder. CSCI 1002JW Ryder - Dreamweaver Notes Initial Site Set Up Goto W:\ drive – This is your web root directory.

EXCEL Spreadsheet Basics

Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.

Site Modules > Page Builder Access the Page Builder module through the Site Modules top navigation link. Access Page Builder from the Site Modules navigation.

 Steps how to design a web page using Microsoft Frontage Steps how to design a web page using Microsoft Frontage  Video related to the topic Video related.

Chapter 3 Tables and Page Layout

Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.

INSTRUCTIONAL SUPPORT SERVICES (ISS) SHORT COURSE, FALL 2012 UMSL Introduction to Web Page Design.

With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)

Designing a Classroom Web Site Using NVU Beginning Level.

 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.

Web Design HTML, Frontpage, DreamWeaver μέρος β ΠΡΥ019 - Πληροφορική Δρ.Βάσος Βασιλείου.

Tutorial 6 Creating Tables and CSS Layouts. Objectives Session 6.1 – Create a data table to display and organize data – Modify table properties and layout.

© 2010 Delmar, Cengage Learning Chapter 7 Using Styles and Style Sheets for Design.

Dreamweaver MX. 2 Creating External Style Sheets-1 (p. 400) n A style is a group of formatting attributes identified by a single name. n An ________ style.

Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.

HTML, Third Edition--Illustrated Introductory 1 HTML, Third Edition Illustrated Introductory Unit F Working with Tables.

Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.

Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.

© Ms. Masihi.  The Dreamweaver Welcome Screen first opens when you start Dreamweaver.  This screen gives you quick access to previously opened files,

Web Technologies Website Development Trade & Industrial Education

Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.

Using FrontPage Express. Slide 1 Standard toolbars and menus Time indicator: gives an approximation of download time of the page.

1 Macromedia Dreamweaver Outline Introduction Macromedia Dreamweaver Text Styles Images and Links Symbols and Lines Tables Forms Scripting in Dreamweaver.

Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.

Website Development with Dreamweaver

Copyright © 2013 MyGraphicsLab / Pearson Education STRUCTURE AND HTML TAGS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication.

Microsoft Expression Web-Illustrated Unit I: Working with Tables.

JAOIT 8.  Dreamweaver is a program for creating web pages and managing websites without having to type HTML code.  WYSIWYG – What you see is what you.

Session 1 SESSION 1 Working with Dreamweaver 8.0.

Fall 2005 Using FrontPage to Enhance Blackboard - Darek Sady1 Using FrontPage to Enhance Blackboard 1.Introduction 2.Starting FrontPage 3.Creating Documents.

Domain 3 Understanding the Adobe Dreamweaver CS5 Interface.

Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit D Formatting Text and Using Cascading Style Sheets.

Chapter 1 Creating a Dreamweaver Web Page and Local Site

Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.

IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Designing Web Site Layout Using.

Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.

Chapter 1 Getting Started With Dreamweaver. Exploring the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.

Updated on: September 4, 2010 CIS67 Foundations for Creating Web Pages Professor Al Fichera.

HTML Concepts and Techniques Fifth Edition Chapter 4 Creating Tables in a Web Site.

Project 1 Dreamweaver Provides. Automatic Web Page Design Develop your own webpage without having to spend hours writing HTML code Web site management.

Adobe Dreamweaver CS3 Developing a Web Page. Planning the Page Layout Use White SpaceUse White Space Limit media objectsLimit media objects KISSKISS Use.

Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.

1 Creating Links Lesson 2. 2 In the center column type : Home | Order Now | Contact Us This is the navigation button which will link to the other pages.

Web Site Development - Process of planning and creating a website.

Positioning Objects with CSS and Tables

Building a Website: Layout Fall Overall Structure: Home Page Title Section Title Frame Picture UNCP Math Menu Content Footer Contact Information.

Chapter 28. Copyright 2003, Paradigm Publishing Inc. CHAPTER 28 BACKNEXTEND 28-2 LINKS TO OBJECTIVES Table Calculations Table Properties Fields in a Table.

Web and Multimedia Development Copyright © Genetic Computer School 2007WM LESSON OVERVIEW  Use of Tables  Creating Tables  Try It – 1  Creating.

Creating Web Pages with Links, Images, and Embedded Style Sheets

Creating a Google Site For a Digital Portfolio Purpose.

Learning the Basics – Lesson 1

ASP.NET Web Controls.

Your First & Last Name (Make sure you capitalize your first and last name!) Follow these instructions: 1. Center your name on the slide (use the “Centered”

DreamWeaver CS4.

Unit I: Collecting Data with Forms

Cheat Sheet CSCI 100 JW Ryder

Cheat Sheet CSCI 100 JW Ryder

5.00 Apply procedures to organize content by using Dreamweaver. (22%)

Step 1:. Open Microsoft FrontPage application.

Designing Web Site Layout Using Fireworks

4.00 Apply procedures to add content by using Dreamweaver. (22%)

Presentation transcript:

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver

Website Planning Before beginning any web development project: A Needs Assessment should be completed. A Story Board should be created. The Layout and Style of the site should be planned. IT: Web Technologies – Website Development with Dreamweaver2Copyright © Texas Education Agency, All rights reserved.

Gathering Information When meeting with the client, a Needs Assessment should be completed. A written document stating: What is the client’s purpose for the site? Who is the site being designed for / target audience? What Information should be included on the site? What are the client’s design preferences? The Needs Assessment is the plan of action for developing the site design. IT: Web Technologies – Website Development with Dreamweaver3Copyright © Texas Education Agency, All rights reserved.

Storyboarding The Storyboard is a diagram of the website’s structure. Should show all required pages of the site. Should show how each page is related to the others. Should take into consideration: Is the structure logical? Can the user find their information quickly? How many links are on each page/ IT: Web Technologies – Website Development with Dreamweaver4Copyright © Texas Education Agency, All rights reserved.

Sample Storyboard IT: Web Technologies – Website Development with Dreamweaver5Copyright © Texas Education Agency, All rights reserved.

Layout & Design Once the site structure has been determined, the layout and design of the individual pages can be considered. Layout Considerations: Consistency: Each page should have the same layout and design. Also includes the pages’ style. The same design style should be used on each page of the site. IT: Web Technologies – Website Development with Dreamweaver6Copyright © Texas Education Agency, All rights reserved.

Layout & Design Navigation: The navigation should be in a standard position (top or left side) Balance: The page should be balanced. Fonts: The selected font should be easy to read and generally should be a generic font. Colors: A color scheme should be selected, with the client. The color scheme should be applied the same on each page. IT: Web Technologies – Website Development with Dreamweaver7Copyright © Texas Education Agency, All rights reserved.

Dreamweaver Web pages are created using HTML, a code for specifying how content should be formatted. Web pages are interpreted by the web browser. The web pages can be created using a text editor or a program that can create HTML code. IT: Web Technologies – Website Development with Dreamweaver8Copyright © Texas Education Agency, All rights reserved.

Dreamweaver Work Area IT: Web Technologies – Website Development with Dreamweaver9Copyright © Texas Education Agency, All rights reserved.

Dreamweaver Work Area FTP Toolbar Manages the uploading and downloading of files. IT: Web Technologies – Website Development with Dreamweaver10Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Creating a New Document To open a blank document in Dreamweaver, press CTRL+N or click on the File menu at the top left and select New. IT: Web Technologies – Website Development with Dreamweaver11Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver IT: Web Technologies – Website Development with Dreamweaver12Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver IT: Web Technologies – Website Development with Dreamweaver13 Make sure you are in Design View. The Design button highlighted above should be selected. Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Editing Page Properties Click on the Page Properties button on the Properties Panel at the bottom of the screen. IT: Web Technologies – Website Development with Dreamweaver14Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Editing Page Properties IT: Web Technologies – Website Development with Dreamweaver15 From the Page Properties screen you can edit the default text, link, and background properties of the page. Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Formatting Text Default text formatting should be defined on the Page Properties window described in the previous slide. If you want to format specific sections of text on the page, you should select the text you to format with your mouse. IT: Web Technologies – Website Development with Dreamweaver16Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Formatting Text For basic formatting select the HTML button. The CSS button will provide additional advanced formatting options through Style Sheets. We set the selected text to a Heading 1 IT: Web Technologies – Website Development with Dreamweaver17Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Formatting Text The text has been formatted to a Heading Level 1 IT: Web Technologies – Website Development with Dreamweaver18Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Creating a Table Tables allow you to layout content and display content in a grid structure. From the Insert menu select Table. IT: Web Technologies – Website Development with Dreamweaver19Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Creating a Table The Table window will appear. Settings: Rows – 2 Columns – 2 Table width IT: Web Technologies – Website Development with Dreamweaver20Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Creating Tables The table structure should be displayed below the heading. IT: Web Technologies – Website Development with Dreamweaver21Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver IT: Web Technologies – Website Development with Dreamweaver22Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Inserting an Image Before the image can be added, the page needs to be saved. Save the page to your Student Files folder as dreamweaverPractice.htm IT: Web Technologies – Website Development with Dreamweaver23Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Inserting Images Place your cursor into the bottom left cell of the table. IT: Web Technologies – Website Development with Dreamweaver24Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Inserting Images From the Insert menu, select Image. Select the differenceEngine.jpg from your Student Files folder. Click Ok. IT: Web Technologies – Website Development with Dreamweaver25Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Inserting Images From the Image Tag Accessibility Attributes Enter Difference Engine into the Alternate text field. Click Ok IT: Web Technologies – Website Development with Dreamweaver26Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Inserting Images The image will be placed where the cursor was located. When you click on the image, the Properties Panel will display the properties for the image. IT: Web Technologies – Website Development with Dreamweaver27Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Inserting Images Follow the same procedures to insert the analyticalEngine.jpg image into the bottom right cell. IT: Web Technologies – Website Development with Dreamweaver28Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Creating Links The text Charles Babbage Web Site was added below the table. Select the text your want to make into a link. IT: Web Technologies – Website Development with Dreamweaver29Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Creating Links Locate the Insert panel on the right. Select the Hyperlink button. IT: Web Technologies – Website Development with Dreamweaver30Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Creating Links The Hyperlink window will appear. Text: The text shown on the screen. Link: where you want to go The remaining fields can be left blank on basic links. IT: Web Technologies – Website Development with Dreamweaver31Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Additional Formatting Changing Link Colors Click the Page Properties button on the bottom of the Properties panel at the bottom of the screen. IT: Web Technologies – Website Development with Dreamweaver32Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Change Link Colors Select the Links (CSS) category. Link color and style properties can be modified here. IT: Web Technologies – Website Development with Dreamweaver33Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Aligning Objects The following alignments can be applied to most objects. Left Right Center Justify (text only) IT: Web Technologies – Website Development with Dreamweaver34Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver Select the CSS button on the properties panel. The alignment tools are on the right side of the panel IT: Web Technologies – Website Development with Dreamweaver35Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver We have selected the title to be centered on the screen. IT: Web Technologies – Website Development with Dreamweaver36Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver The New CSS Rule window will appear. From the Selector Type, choose Tag. Click Ok to apply the center style. IT: Web Technologies – Website Development with Dreamweaver37Copyright © Texas Education Agency, All rights reserved.

Using Dreamweaver The title should then be centered on the page. IT: Web Technologies – Website Development with Dreamweaver38Copyright © Texas Education Agency, All rights reserved.