Creating the client site. Create a master page for client  Start Dreamweaver and select your site.  Browse to your Client folder  Use Dreamweaver to.

Slides:



Advertisements
Similar presentations
DREAMWEAVER Welcome to our website!
Advertisements

Tutorial 1: Developing a Basic Web site
UNIT 12 LO4 BE ABLE TO CREATE WEBSITES Cambridge Technicals.
Ch. 5 Web Page Design – Templates and Style Sheets Mr. Ursone.
© 2010 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
CSS Demo. Questions How many of you –knows how to code html? –have used dreamweaver or some other graphical html editor? –have used css styles?
Art 128 Interface Programming 1 In-class Presentation Week 11B.
Start -> All Programs -> Classes -> Web Expressions -> Dreamweaver.
Introduction to Nvu Jing Fu. What is nVu? Free web design and development tool WYSIWYG (/wiziwig/) software Other similar tools: Dreamweaver, Googlepages.
Creating Tables in a Web Site.  Define table elements  Describe the steps used to plan, design, and code a table  Create a borderless table to organize.
CIT 256 Organizing Large Websites: Divs, DW Templates Dr. Beryl Hoffman.
Dreamweaver Learning to be a web design master! By: Mr. Brunton.
Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.
Creating a Website. Unit Objectives Plan a website Create a folder for website management Set up a website Add a folder to a website Save a web page Copy.
Macromedia Dreamweaver CS4 Tutorial. Example of the website1 folder & images folder inside Create a folder on your computer called website1 to hold all.
Creating Tables in a Web Site
Web Design Using HTML Codes. WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE? 1.YOU NEED A FOLDER (also called a DIRECTORY) You should set up a folder or.
INTRODUCTION TO DREAMWEAVER 8. What we already know…  Design basics  Contrast  Repetition  Alignment  Repetition  HTML.
Planning a Web Site Unit Two Planning Steps 1. Determine the audience & objectives. 2. Sketch a storyboard or flowchart of the pages. 3. Create a folder.
HTML, Third Edition--Illustrated1 HTML – Illustrated Introductory, Third Edition Unit H Controlling Page Layout with Frames and Tables.
Creating A Site Using A Template In Dreamweaver CS6 Cakes R Us!
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
The Nav Bar. Nav is short for Navigation. Having a Navigation Bar makes searching for information easier on those accessing your page. Here are some common.
 HTML stands for Hyper Text Mark-up Language. The coding language used to create documents for the World Wide Web  HTML is composed of tags. HTML tags.
Project 5 Templates and Style Sheets Dreamweaver MX 2004 Concepts and Techniques.
HTML, Third Edition--Illustrated Introductory 1 HTML, Third Edition Illustrated Introductory Unit E Formatting with Cascading Style Sheets.
HTML, Third Edition--Illustrated Brief 1 HTML, Third Edition Illustrated Brief Unit D Adding Graphics and Multimedia.
Dreamweaver MX Unit B CIS 205—Web Site Design and Development.
Dreamweaver Unit A. Project Files l Download files from l Search using l Download the data disk.
Formatting TEXT AND Using CSS. Adobe Dreamweaver CS3 - Illustrated.
Challenge One Walkthrough. Summary Open dreamweaver Open index Add and Add form Open controller.js add function Link controller to index.
HTML Hyper Text Markup Language. What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup.
Dreamweaver Edulaunch Project 1 EQ: What are the key concepts when building the first page of a web site?
Templates and Style Sheets
CSS Class 2 -Add margins to elements on a page. -Set width and height of elements. - CSS shorthand properties for box model. -Style links. -Style tables.
Week 8 – Part 2 Page Layout Basics Key Concepts 1.
Principles of Web Design 6 th Edition Chapter 9 – Site Navigation.
Saving PowerPoint Presentations as Web Pages Your Logo Here Open the PowerPoint Presentation. To convert to a format compatible with web browsers, launch.
Web Development & Design Foundations with HTML5 7th Edition
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Images. Intro What is it? Getting your image Inserting Moving Resizing Cropping.
Configuring Shortcuts C: Drive D: Drive F:Drive Z: Drive.
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.
Goal See below /tables, Html-2-1.pptx rev 01/19/2016.
1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.
Microsoft FrontPage 2003 Illustrated Complete Creating a Frames Page.
Using Text Edit. Create Folders to Organize a Site  Identify the location where you are storing your Web sites. Ask your teacher for help if needed.
Creating Web Pages with Links, Images, and Embedded Style Sheets
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
 Add one element at a time  If it doesn’t do what you want, › Delete it › DON’T just keep piling on more items.
Lists Ordered Unordered. List Components  OR  Plus Star Wars Avatar Vacation.
Links All CSS properties can be applied on links (i.e. change colors, fonts, underline, etc). The new thing is that CSS allows you to define these properties.
Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”
Microsoft Expression Web-Illustrated Unit G: Designing Site Navigation.
Creating HTML Content Files for ANGEL File Structure, Using Dreamweaver, Exporting with CASE, and Uploading to ANGEL.
NAVIGATION USING HTML TO SET UP THE BASIC STRUCTURE OF A NAV BAR.
Lab Styling Tabs with CSS Scott Lydiard
Advanced CSS Layout Lesson 5.
Dreamweaver – Project #1
Cascading Style Sheets (Layout)
HTML Basics and CSS style
Basics of Web Design Chapter 7 Page Layout Basics Key Concepts
Shortcuts C: Drive D: Drive F:Drive Z: Drive
To view your master work in a browser you do this:
Page plans A01 Design.
Links.
Creating Tables in a Web Site
Advanced CSS Layout Lesson 5.
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Presentation transcript:

Creating the client site

Create a master page for client  Start Dreamweaver and select your site.  Browse to your Client folder  Use Dreamweaver to create and save a new blank page inside Client named master.htm  Save it

The client site

Add the banner to master.htm :  Open master.htm (or just select it)  Select Insert>Image  Browse, or point to, ClientBaner.png ( Or, whatever you called it )  Add these (soon to be) links below the banner : Home, Logo, FAQ, Brochure, Business Cards, Contact Us, Video, Index Separate each with a space, a vertical bar and a space We now have a master. htm page that doesn’t do anything Should look this way:

Pseudo classes  Where does the code for the classes go?

Copy and Paste pseudo classes into master.htm, Code View a:link {color : #666; text-decoration : none;} a:visited {color : #087368; text-decoration : none;} a:hover {color : #000; border-bottom : 1px solid #625252; text-decoration : none; background-color : #cccccc;} a:active {color : #625252; text-decoration : none;}

Make links We’ll now link each link-word to an HTML page (that doesn’t exist yet) Start with Home. Home will link to the client index.htm page…guess what…we don’t have one (yet) Just type index.htm in the Link text box

Finish Links  Logo next: select the word Logo. In link box enter logo.htm  For contact us, type contactus.htm …  Business Cards as buscards.htm etc  For the index link word at the end of the list, browse or point, to your main JMA260 index.htm page, the one in the jma260 root  You should now have a banner, and 8 active link, all of which function.

Create the pages  You should have master open. Will use it as a blueprint  Save it 8 times!  File>Save as>index.htm  Close  File>Save as> logo.htm  Close. .

Add content Add content to each page. For example. Consider logo.htm Select the page Insert>Image> and navigate to your logo.png For pages you have no content, find a graphic of someone digging and say “Under Construction”

Final Configuration To run locally (Ie NOT in a browser), switch to Live View Works if you don’t have a site set up

Penalty  What if I want to add a new link labeled Directions  I want it on every page  What would I have to do? END