Dreamweaver – Setting up a Site and Page Layouts Web Design Section 7-2 Part or all of this lesson was adapted from the University of Washington’s “Web.

Slides:



Advertisements
Similar presentations
Dreamweaver Dr. Kristen Landreville Wed. 09/29/10 – Fri. 10/08/10.
Advertisements

DREAMWEAVER Welcome to our website!
Chapter 3 – Web Design Tables & Page Layout
Layouts Using Tables Web Design – Section 4-5 Part or all of this lesson was adapted from the University of Washingtons Web Design & Development I Course.
Working with Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4.
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.
UNIT 12 LO4 BE ABLE TO CREATE WEBSITES Cambridge Technicals.
Click your mouse for next slide Dreamweaver – Merging, Coloring, Fonts Now it’s time to fill your page with some more interesting stuff The first thing.
Chapter 3 Tables and Page Layout
Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Start -> All Programs -> Classes -> Web Expressions -> Dreamweaver.
PowerPoint: Tables Computer Information Technology Section 5-11 Some text and examples used with permission from: Note: We are.
Using Frames in a Web Site
Creating a Web Page HTML, FrontPage, Word, Composer.
Introduction to Nvu Jing Fu. What is nVu? Free web design and development tool WYSIWYG (/wiziwig/) software Other similar tools: Dreamweaver, Googlepages.
Using Dreamweaver getting started 1)Start in your “My Documents” folder 2)Create a new folder called “website” 3)Create a sub folder called “images” 4)Start.
Getting Started with Dreamweaver
Website Designing Using Ms FrontPage FrontPage 2003 Create a Web site with FrontPage.
Web Design HTML, Frontpage, DreamWeaver μέρος β ΠΡΥ019 - Πληροφορική Δρ.Βάσος Βασιλείου.
Dreamweaver Learning to be a web design master! By: Mr. Brunton.
© 2012 Boise State University1 WordPress Training February 14, 2013.
Advanced CSS - Page Layout. Advanced CSS  Compound Selectors:  Is a Dreamweaver term, not a CSS term.  Describes more advanced types of selectors such.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.
Website Design CLA – Transportation. Defining a Site Select: Site – New - Site Click Next.
Creating an Expression Web Site
Dreamweaver – Setting up a Site and Page Layouts Web Design Section 7-2 Part or all of this lesson was adapted from the University of Washington’s “Web.
MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.
Web Technologies Website Development Trade & Industrial Education
© 2012 Boise State University1 WordPress Training February 14, 2013.
Dreamweaver – Dreamweaver Extras Web Design Section 8-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.
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
Open Dreamweaver Start All programs Adobe design and web premium Adobe Dreamweaver.
Fall 2005 Using FrontPage to Enhance Blackboard - Darek Sady1 Using FrontPage to Enhance Blackboard 1.Introduction 2.Starting FrontPage 3.Creating Documents.
Click your mouse for next slide Dreamweaver – Setting up your Page The first way to ensure that you have a consistent design is to use table to set up.
Domain 3 Understanding the Adobe Dreamweaver CS5 Interface.
Working With Text Web Design Section 5-9 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
Linking to an External Style Sheet Web Design Section 4-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Computer Information Technology – Section 4-12 Some text and examples used with permission from: Note: We not endorsing or promoting.
Sports Website Creation. In this project you will design and produce your own website.
Learning How to Make a PowerPoint Presentation A tutorial for novice users.
Using an HTML image (img) element’s onclick event to change the source (src) of an iframe to an embedded youtube video.
MIS 201 Web Design 1. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.
Web Design Part I. Click Menu Site to create a new site root.
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.
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
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.
Creating a Google Site For a Digital Portfolio Purpose.
Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”
Getting Started with Dreamweaver
Dreamweaver – Setting up a Site and Page Layouts
Create and edit web pages 4
Intro to Dreamweaver Web Design Section 8-1
Positioning Objects with CSS and Tables
PowerPoint: Tables and Charts
Microsoft Word: Tables
Dreamweaver – Setting up a Site and Page Layouts
Lesson 6: Working with Layout and Graphics
Lesson 6: Working with Layout and Graphics
Lesson 6: Working with Layout and Graphics
Lesson 6: Working with Layout and Graphics
Getting Started with Dreamweaver
Consult America Technology Consulting Services
Positioning Objects with CSS and Tables
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Presentation transcript:

Dreamweaver – Setting up a Site and Page Layouts Web Design Section 7-2 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

Objectives  The Student will:  Create a site definition  Establish local folder  Add pages to the site  Using the file panel to organize files  Create page layout using different methods  Freestyle  Dreamweaver templates  Tables

Setting Up a New Site  In Dreamweaver the term site refers to the local and remote storage where the files that make up a site are stored.  To use all Dreamweaver’s features you always start by defining a site

Creating a Site  Over the next few lessons we will be using videos...  It’s an easier way to demonstrate the features of Dreamweaver  Pay attention to videos!  dreamweaver-cs4/getting-started-02- defining-sites/ dreamweaver-cs4/getting-started-02- defining-sites/ dreamweaver-cs4/getting-started-02- defining-sites/

Dreamweaver Sites Summary  Using a site in Dreamweaver allows you to manage all the files and the links between them.  Sites also allow you to link your working copies to the “official” web site and upload your files  We will not be doing that in this class.

Page Layout Options  There are a number of ways to layout a page in Dreamweaver. We will cover 3 of them: 1.Freestyle – Do the page layout as you build your page.  Difficult for complex layouts! 2.Dreamweaver templates 3.By using a table

“Freestyle”  Freestyle is what you have been doing in your index.htm file  Use to separate the content and use CSS commands (float: left, etc) to position the content on the page.  Complicated CSS code!

Using Built in Templates  Dreamweaver has a number of built in templates to rapidly layout the page.  dreamweaver-cs4/getting-started-03-rapidly- building-layouts/ dreamweaver-cs4/getting-started-03-rapidly- building-layouts/ dreamweaver-cs4/getting-started-03-rapidly- building-layouts/  Creates the CSS code for you  Once created you can alter the CSS code to change the appearance to what you want

Using a Table to Define the Layout   Tables help you divide the space on your page.   Tables give you the option of making your page a fixed size or making it fit to the user's window the best it can.   Tables also guarantee that the location of your text and images does not change when seen on screen with different resolutions or in different Web browsers.

Example  To create a web page with a layout like this:

Example  Create a table with 3 row and 3 columns that takes up 100% of the screen

Example   Highlight the first row of cells by placing your cursor in either far left or far right cell and dragging to the other side.   Click on the merge cells button in properties panel  Do the same with the bottom row

Example   Highlight and merge the middle and right cells in the middle row. This section will be used for your main content, and the leftover cell will be used for links.

Example   Now you can adjust the table by clicking and dragging on the handles to make the table look more like a familiar webpage  From here you can insert additional tables into any of the cells you want. This will let you place your text and images exactly where you want them within each section.

Summary - Layouts  There are different ways to create a page layout in Dreamweaver  Choose the 1 that works the best for your application

Rest of Today  Download the instructions for Homework 7-2.  Complete the assignment and show me the result.  You have 2 days to complete this assignment.  All questions and answers must be added to your unit6 page.