Creating A Site Using A Template In Dreamweaver CS6 Cakes R Us!

Slides:



Advertisements
Similar presentations
DREAMWEAVER Welcome to our website!
Advertisements

Microsoft FrontPage Monday January 28, The Basic FrontPage Setup.
Create your site in the folder Rosary in your My Documents Folder.
MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard
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.
 Share assignments and files  Student and parent home access  Announcements  Classroom information.
© 2010 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
Web Design Professor Pepper. Site vs. Page  Create a folder for your site  all pages and pictures  Default page will be index.html (some servers are.
Art 128 Interface Programming 1 In-class Presentation Week 11B.
Creating & Attaching CSS An CSS Primer Tutorial. A New CSS Document Create a new CSS Document in Dreamweaver using the “New” option under the File Menu.
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)
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
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.
Web Design Dreamweaver Semester 2 ATBs. ATB #1 What is a web site?
Macromedia Dreamweaver CS4 Tutorial. Example of the website1 folder & images folder inside Create a folder on your computer called website1 to hold all.
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.
MIS 201 Web Design. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.
PowerPoint Tutorial Your Logo Here It’s easier than you think!
DREAMWEAVER Adding photos and other tips!. Making photo gallery  Gather ALL the photos you need into your images folder. (remember to copy the URL so.
Website Development with Dreamweaver
Interface.  Menu  Document  Insert  Panel Management.
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.
Importing/Exporting between Fireworks and Dreamweaver For Buttons, Navigation Bar and Animated Banners.
Formatting TEXT AND Using CSS. Adobe Dreamweaver CS3 - Illustrated.
Open Dreamweaver Start All programs Adobe design and web premium Adobe Dreamweaver.
Updating the Laboratory Website. Useful Info Address: Everything is saved in the desktop.
Start Dreamweaver program From file menu click new Blank page appears.
MIS 201 Web Design 1. Website Planning Before even considering the practical aspects of creating a website, there are some important fundamental questions.
Bike and Hike Skills: Graphics, Image Maps, Photo Galleries, Layers.
Things we’ve covered so far  Basic HTML  Some advanced tags i.e.  Styling using CSS  Background-color  Text  Changing the font on your site  Inserting.
Creating a Web Site Review of Concepts. Templates Templates are special HTML files that are used to quickly create pages on a web site. They contain the.
Teacher Web Page Creation Eileen Musselman. Log on to Muhlenberg’s Intranet Click Submit button.
Chapter 1 Getting Started With Dreamweaver. Exploring the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Adobe Dreamweaver CS3 Developing a Web Page. Planning the Page Layout Use White SpaceUse White Space Limit media objectsLimit media objects KISSKISS Use.
Photoshop Image Slicing. Reasons to Image Slide To create links out of sliced images To optimise different areas. (flat areas of colour, such as logos,
MY-CLUB © 2010 Doxess. All Rights Reserved. Website Designer 2.0 Coming Soon Press or left-click on mouse to advance to the next slide ClubRunner.
Double –Click on the Netscape Icon on your desktop The following are a series of steps to help you get started with Netscape Composer.
How to create & use Dreamweaver Templates. Creating a Dreamweaver Template o A template is a common structure or layout of a web site that most of your.
Designing a Web Page Layout Using a Professional Bitmap & Vector Graphic Editing Suite 1IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas.
Home page Web page link 1 Web page link 2Web page link 3Web page link 4.
Open the index.html Open this PowerPoint from the S Drive IDT folder Chapman Images.ppt.
1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.
Action Buttons Link to another place in your presentation Link to web pages, videos, etc. Interactivity – gives the viewer a choice of what happens next,
Page 1 of 15 1) Launch Dreamweaver. 2)Under Site, choose Manage Sites Click New, then Site. Continuing Studies CS 22 ·Stanford University EXERCISE 3: IMAGEMAPS.
Creating a Google Site For a Digital Portfolio Purpose.
Before We Begin Please download the files from as we will be using them in our walkthroughs.
Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”
Unit 15 – Web Authoring Web Authoring Project.
Unit 15 – Web Authoring Web Authoring Project.
Getting Started with Dreamweaver
Pre-Production Meet with the client to create a project plan:
With Microsoft FrontPage 2000
USING DREAMWEAVER Contents: Assigning a Root Folder
How to make a website in dreamweaver a website
MIS 201 Web Design.
Cheat Sheet CSCI 100 JW Ryder
Create and edit web pages 2
Starting to develop a website
USING DREAMWEAVER MX 2004 Contents: Assigning a Root Folder
Click on Adobe dreamweaver
Cheat Sheet CSCI 100 JW Ryder
Getting Started with Dreamweaver
How to add a page… You will need to add new pages to your website depending on the brief. You do this by: Click on the Add new page button Write the new.
Wheelers clubs Your site will consist of 3 pages:
Presentation transcript:

Creating A Site Using A Template In Dreamweaver CS6 Cakes R Us!

Step 1- File New, HTML Template, Choose Type

Step 2a- Save CSS file to a new folder for your website

Step 2b- Create A New Site (Manage Sites)

Step 3- Find Your Website Folder, Create An Images Folder & Place All Graphics In There Banner, Logo & Animated Banner

Step 4- Adjust This Page To Your Requirements & Scale As A Template Width & Size- Change CSS Of.container to requirements Menu- Add A New Menu Option (Code- Divclass sidebar) Logo- add & re-size in Code view Banner- add & re-size in Code view Colours / Fonts- add & re-size in CSS Footer- Add Text & Links

Step 5- Save This Page As A Template “main”

Step 6- Preview This Page In Chrome or IE. Look Ok?

Step 7- Save Page As index.html (your home page!)

Step 8- Now Create All The Pages (File, New Page, From Template, choose “main”

Step 9-You will end up with 4 pages!

Step 10- Go to main.dwt (template page) and on the Home link insert a hyperlink to the index.html page

Step 11- Once you have done hyperlinks for each menu option it will now update all the pages with the navigation changes

Step 12- View In IE. Check Now That All The Pages Check The Links Work Now In IE or Chrome