Building a Website: Site Management Fall 2013. Introduction Web page consists of a collection of varied files – HTML – images – CSS – Flash movies – Etc.

Slides:



Advertisements
Similar presentations
Managing Your Site – Lesson 61 Managing Your Site Lesson 6.
Advertisements

© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
How to Organize a Website Using Front Page to Manage Your Growing Needs By Cristiana and Fred Baggio
Dreamweaver MX 2004 “Viewing the Workspace” Mrs. Wilson.
HOW TO BUILD A WEBSITE In 5 easy steps. Overview ◦ Decide on the Website’s Purpose ◦ Sketch a Rough Draft ◦ Create Content ◦ Code and Assemble Assets.
© 2010 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
About Links in Dreamweaver. Creating Links A link has 2 parts: –The URL (Uniform Resource Locator)= the name and path of the file you want to link –The.
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
. Website and file organization. How websites work.
Macromedia Dreamweaver 4 Foundation Level Course.
Explore the Dreamweaver Workspace View a Web page and use Help Plan and Define a Web site Add a Folder and Pages, and set the Home page Create and View.
Introduction to: Web Site Development. Terminology HTML Hypertext Markup Language HTML File A web page built from HTML Index File The home or main page.
Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Introduction to Web Lingo
Introduction to Web Creation iMet Tool Training. Basic Principles Have a plan Focus on the content and communication Make navigation logical and consistent.
Navigation Design. From the Brookfield Zoo, IL  (from Zoo)
THE BASICS OF THE WEB Davison Web Design. Introduction to the Web Main Ideas The Internet is a worldwide network of hardware. The World Wide Web is part.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 2: Working with Webpage Files.
Getting Started with Dreamweaver
Internal and External Links Web Design – Section 3-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Adobe Dreamweaver CS3 Revealed CHAPTER ONE: GETTING STARTED WITH DREAMWEAVER.
Microsoft Expression Web - Illustrated Unit B: Creating a Web Site.
INTRODUCTION TO DREAMWEAVER 8. What we already know…  Design basics  Contrast  Repetition  Alignment  Repetition  HTML.
Creating A Site Using A Template In Dreamweaver CS6 Cakes R Us!
1 Web Basics Section 1.1 Compare the Internet and the Web Compare Web sites and Web pages Identify Web browser components Describe types of Web sites Section.
Dreamweaver MX Unit A CIS 205—Web Site Design & Development.
The Internet and the World Wide Web. The Internet A Network is a collection of computers and devices that are connected together. The Internet is a worldwide.
CIS 205—Web Design & Development Dreamweaver Chapter 1.
The format is text files, with.htm or.html extension. Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file names. File names ARE.
Web Design (2) Brackets - introduction. Brackets Brackets is a web design code editor It is an open-source project initiated by Adobe (creator of Dreamweaver)
Macromedia Dreamweaver 8 Revealed DREAMWEAVER GETTING STARTED WITH.
 The World Wide Web is a collection of electronic documents linked together like a spider web.  These documents are stored on computers called servers.
Dreamweaver Edulaunch Project 1 EQ: What are the key concepts when building the first page of a web site?
How to upload files to Altervista Overview:
Dreamweaver: Introduction and Basics. Introduction 4 Dreamweaver is a WYSIWYG HTML editor 4 WYSIWYG = What You See Is What You Get. 4 BUT..
Macromedia Dreamweaver MX 2004 Design Professional Links WORKING WITH.
Web Design (8) Images (2). My Holiday Photos An exercise in adding and linking images. Create a new website folder calling it ‘My Holiday Photos’. In.
Chapter 1 Getting Started With Dreamweaver. Exploring the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Internal and External Links Web Design – Section 3-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,
Web Site Development - Process of planning and creating a website.
Creating Websites With Macromedia Dreamweaver MX 2004 By Heidi Lee.
Understanding Web-Based Digital Media Production Methods, Software, and Hardware Objective
COMP 143 Web Development with Adobe Dreamweaver CC.
Web Page Design The Basics. The Web Page A document (file) created using the HTML scripting language. A document (file) created using the HTML scripting.
Making the website. Get your folders sorted first Create a new folder in “N” called “My hockey website” Create folders inside called “Documents”, “images”
Finally getting to html and CSS… Tim Berners-Lee, the writer of the software program that makes him the inventor of the WWW, defines the Internet as a.
Getting Started with Dreamweaver
4.01 How Web Pages Work.
Dreamweaver – Setting up a Site and Page Layouts
Objective % Select and utilize tools to design and develop websites.
Project Objectives Publish to a remote server
Chapter A - Getting Started with Dreamweaver MX 2004
بسم الله الرحمن الرحيم.
Objective % Select and utilize tools to design and develop websites.
Getting Started with Dreamweaver
Copyright © 2013 MyGraphicsLab / Pearson Education
ITI 133 HTML5 Desktop and Mobile Level I
Page plans A01 Design.
HTML5 Level I Session II Chapter 3 - How to Use HTML to Structure a Web Page
How files are organized
Lesson Objectives Lesson Outcomes
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Starting to develop a website
Getting Started with Dreamweaver
Website Testing Checklist
Dreamweaver.
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
4.01 How Web Pages Work.
Presentation transcript:

Building a Website: Site Management Fall 2013

Introduction Web page consists of a collection of varied files – HTML – images – CSS – Flash movies – Etc. Must all work together – Broken link or missing graphic can interfere with the operation of entire site A good site has – Eash to understand structure – Content is divided into logical sections with a prominent navigation bar

Organize via Folders One primary folder – the root folder – Holds all the site’s web pages, graphics, and other files used in the ssite – Root folder is subdivided into subfolders for better organization

Typical Folder Structure Site Folder -- home Index.html contacts.html css global.css classified Index.html images horoscopes features img home global nav nav_store-f3.gif nav_store-f2.gif nav_horoscope_f3.gif.gif

Guidelines for Effective site Organization Plan for future growth Follow the site’s architecture Organize files by types – Create folders for each section of web site Add folders for storing other types of files – Graphics, css, external JavaScript files, PDF files, etc Create folder for graphics that appear on home page – Usually home page is visually distinct from other pages Create folder for graphics that appear on other pages For example – images_home folder – images_global that appear on other pages

Guidelines for Effective site Organization Use understandable names Don’t use names such as 1a.gif, zDS.html, or f.css Use names like site_logo.gif or directions.html Be reasonable with the names this_is_the_image_that_goes_in_the_upper_right_corner_of_the_home _page.gif is probably not a good name Be consistent

FAQ Why so many files named index.html? – If you type into a web browser, the browser goes to that location and looks for a file named index.htm, index.html, index.php. One of those files are not in that location you will get an error message. Otherwise you would have to type – For example, my web page is at To get to it you only need to type

Site Map Local View: shows the files in your local root folder Map View: shows a map of your site Remote View: Shows files on the Web server in the remote root folder Testing Server: used when creating dynamic database driven site

Local View Move or rename a file – Do this within Dreamweaver’s files panel, Dreamweaver will try to update all files that reference that name or location.