Natick High Web Design
|
|
|
- Peter Sims
- 5 years ago
- Views:
Transcription
1 C S 5 INTRODUCTION TO WEB DESIGN DREAMWEAVER Natick High Web Design S h a r L e a r n Explore e Creating a Page in Dreamweaver A D O B E C R E AT I V E Dreamweaver SUITE CS5 Adobe Dreamweaver is primarily a HTML and CSS editor program but can also be used for other languages. Dre a mw ea ve r f e a t u r e s Create compelling website for more platforms and devices. Manage your files from within the files panel. s t n e t n o e of C Tabl Section 1 Misc. Before you Begin - Folder Structure - Dreamweaver Preferences - Page Breakdown Section 2 Creating the Container - Body tag - Insert Div Tag - Compound - CSS Rules Section 3 Formatting the Body - Background Learn the latest and greatest with Adobe Dreamweaver through watching tutorials on Adobe TV Section 4 Connect to Photoshop from within Dreamweaver to edit the photos on your site. - HTML and CSS Checking out the code Section 5 Building the Web one site at a time. Collaborate with co-workers within Dreamweaver Spice up your site with sprys and library items. Publish your files to the Web in seconds! Filling in the Container Run site reports in a matter of seconds. HTML tags and broken links can be fixed with the aid of DW. Work with divs to place your elements in layers. - Understanding what is Inside the Container. - Steps to Fill in the Container - Understanding the Code Section 6 Formatting Text - Default font - Links - Headings
2 Misc. Before You Est, Begin Quam Leo Mauris Turpis Vulputate Section 1 Lacus Gravida Suspendisse Site Folder Structure Folder structure is very important when creating a Website. Create an organized folder structure locally so that when you publish your files they can be easily found remotely. A suggested organization system is recommended below. The structure below is suggested if you are using internal CSS. If you use external CSS it is recommended you set up a css folder which you place any.css files. - All the folders and files are located in the root folder. - Inside the root folder (on level 1) you save all.html files which will be linked on your site - Inside the root folder are two folders: images and sources - Inside the images folder: you save all the images which you will place on your site - Inside the sources folder: you save all the files which will not be placed on the actual site but are used as references (example: site map, wire frame,.psd files)
3 Misc. Before You Est, Begin Quam Leo Mauris Turpis Vulputate Section 1 Lacus Gravida Suspendisse Dreamweaver Preferences Before starting to build any page or site in Dreamweaver you want to check the preset Dreamweaver preferences. To check these settings click on Dreamweaver --> Preferences. - Top priority preference: go to the AP Elements tabs on the left hand side. In that preference make sure Nest when created within an AP div is checked on. This preference will allow AP divs be placed within the container div. - Your choice preference: One preference I like to change is the Font --> Code View. Changing this preference will increase the font size of the text in code view.
4 Misc. Before You Est, Begin Quam Leo Mauris Turpis Vulputate Section 1 Lacus Gravida Suspendisse Understanding Page Breakdown Think of a setting up a Web page as setting up a stage with actors. You can find the comparison to the two below. - Curtain/Body: This area is established with the <body> tag. You set up the preferences for the body tag in the page properties. The main attributes which are set up for the body tag are: background color and/or image (which is shown in the gray above), link color, default text color and size. Like a curtain it surrounds the stage/container - Stage/Container: The container is established with Insert Div Tag and you name the div container (think of div as a box.) The entire site is made up of divs but the container div is the most important because all the other divs/boxes sit inside this div. In the end you have a result of <container> tag. There are certain rules which must be set up for the container for all the other divs/boxes to sit in the container correctly. Like a stage it is was all the accessories are placed on. - Actors/Text & Images: These elements get placed inside the container/stage. Like actors they each have their own roles and rules.
5 Creating the Container Vulputate Section 2 Lacus Gravida Suspendisse Creating the Container 1. Select the body tag located on the bottom left hand corner of the screen (this will select the entire body for you) 2. In the layout panel (may say common but in the drop down menu choose layout) choose insert div tag. Because we are creating the most important div the container we insert div tag all future divs will be created using draw ap div 3. In the box which will pop up make sure in the insert section it automatically says wrap around selection. If this does not appear in that box cancel out the action and do it over again (you can not type or select this option.) This option will make the body wrap around the container just like a curtain wraps around a stage. Also, in the id section type the word container (all lower case) 2 1 3
6 Creating the Container Vulputate Section 2 Lacus Gravida Suspendisse Creating the Container 4. Select the new div called container which now appears in the design section of the workspace. At this time this div also known as the container has no rules/style that is what we are going to be doing next. 5. Once you have selected the div click on the new css rule icon which is placed on the css panel. 1 Select the div by clicking on the dotted border. Once the div is selected that border will turn into a solid line. 2 New CSS Rule icon on the css panel
7 Creating the Container Vulputate Section 2 Lacus Gravida Suspendisse Creating the Container 6. A window will pop up which will allow you to start creating the rules for the div which we named container. Since we are creating rules/styles for a div/box which we are currently selected on we call those rules compound. Choose compound from the drop down list under: choose a centextual selector type for your CSS rule. The selector name should be by default called #container. The # sign represents a div. If that section does not say #container start the process over - you can not type that text in that area. Finally, Choose where your rule will be defined: keep that as this document only. We choose this because we are going to create internal css which will apply to this document only. External CSS would apply to more than one page. --> Select Ok!
8 Creating the Container Vulputate Section 2 Lacus Gravida Suspendisse Creating the Container 7. The rules which you must set up in this box are: Tab Background Rule Color or Image, your preference Box Wide= 1000 ( ) Height= 1000 ( ) Margin = right: auto, left: auto Positioning Relative 8. When you are done setting the rules hit apply and then ok and then your container has been created.
9 Formatting the Est, Body Quam Leo Mauris Turpis Vulputate Section 3 Lacus Gravida Suspendisse Customizing the Body Background (curtain) 1. Once you have the container/stage set up you probably want to spice up around the container/ stage by formatting the body/curtain tag. You can do so by clicking on the page properties button on the properties panel. 2. Once in the page properties section click on Appearance (css) and choose your background color from the middle of the screen. Click apply and then ok 1 Page Properties button located on the properties panel. The white body/curtain has now turned to the color which you choose as the background color (I chose gray)
10 Checking out Est, the Code Quam Leo Mauris Turpis Vulputate Section 4 Lacus Gravida Suspendisse HTML and CSS 1. Before adding any more divs into the file check out the code which has been created from inserting the div and applying rules/css.
11 Filling in the Container Vulputate Section 5 Lacus Gravida Suspendisse Understanding What is Inside the Container The container is a div with the name container. A div is basically a box. Everything you place into an.html file in Dreamweaver should be placed in a box. The most important box on the page is the container and all other boxes/divs sit in the container. The container box is the only box that must follow a certain name and rules. All the other boxes/divs only need to follow one certain rule to work correctly and that is for them to be placed as absolute. A break down of the boxes/ divs is featured below. The directions to fill in your container are posted on the following page. The larger div/box is the container which sits on the body/curtain Any element which is placed in the container is placed in a div/box so that the element can be picked up and moved. Page Breakdown Container: qty. = 1 All other divs: qty. = 10
12 Filling in the Container Vulputate Section 5 Lacus Gravida Suspendisse Steps to Fill in the Container 1. In Design view click anywhere inside the container (you will not see anything happen) 2. In the Insert Panel (under layout) click on Draw AP div. If you move your cursor back into the design area it will be a cross, click and drag the cursor to make a box. You can make the box/div any size because you can re-size it later. 3. Once the box is drawn select it by clicking on the small box in the top left hand corner of the box/div When the box is selected the properties panel at the bottom of the screen provides you with a box called CSS-P Element. In this box give your div/box a name. Name it something relative to what is being placed inside the div/box. The name must be all lowercase and no spaces. Hit enter once you are done typing in the name. **Important do not type the name in the ID space it must be typed in the CSS-P element space. 4
13 Filling in the Container Vulputate Section 5 Lacus Gravida Suspendisse Steps to Fill in the Container 5. Now that the div/box has a name you need to provide it with rules/style, you do so by clicking on the new the css rule icon located on the css panel. 6. A new rule pop-up will appear. Set the rules up as shown below and then click ok. Rule Breakdown: - Rule type is compound: We are creating a rule for the box which we are currently selected on - Name for your selector: #container #maintext. This information should automatically fill itself in and if it does not cancel the operation and start over again. To understand the name read it backwards, the maintext sits inside the container. The this box will follow the container rules and then the maintext rules. - Rules to be defined: This document only, implies that the CSS will be placed internally (between the head tags) The other option is to place it externally which we will do when creating sites in the future. 5 6
14 Filling in the Container Vulputate Section 5 Lacus Gravida Suspendisse Steps to Fill in the Container 7. When the rule box pops up the only rule you must set up for the box/div to function properly is: (and click ok ) Tab Positioning Rule Absolute - This rules makes the div/box sit absolutely where you tell it to be placed. This allows you to pick up the div/box and move it around the container. - You may set up other rules for the div/box but it is not necessary (example: background color) 8. You now have a div/box which you can place anywhere inside the container. You can place text or an image inside this box. Enjoy!!!
15 Filling in the Container Vulputate Section 6 Lacus Gravida Suspendisse Understanding the Code Code reference: All the divs which sit in the container will be placed in between the container tag. What you name the div is what will appear in the code. - In this picture I created the div/box called maintext - Notice: The rules set up for maintext in lines The most important rule is position: absolute. The other rules set themselves up as you place the box where you need it on the page. - Notice: That in the body section the div maintext sits between the open and close body tag and open and close container tag.
16 Formatting Text Vulputate Section 6 Lacus Gravida Suspendisse The Options Fours basic ways in which you can format text are: 1. Default Font, <p></p> 2. Headings, <h1></h1> 3. Link, <a href...> 4. Class, <class= classname...> You can format each one in your own way. Below you will see an example of each tag. Heading 1 tag Link Heading 2 tag Link again Default Font, <p> Class
17 Formatting Text Vulputate Section 6 Lacus Gravida Suspendisse Default Font The default font in Dreamweaver is the font which appears as paragraph text. Anything in between <p> and </p>. If you do not format the default font in Dreamweaver it will automatically be Times New Roman 12 or whatever you have it set up to be in the Dreamweaver preferences. To Format the Default Font 1. Click on Page Properties on the properties panel at the bottom of the screen 2. Be selected in Appearance (CSS) on the left hand side. This will make it so that any rules you set up through Page Properties will be written into the file as CSS. 3. Set up all the default properties as shown below (font type, size, color.) Click ok Default Font, <p> - Notice: The rules I set up for default text: type = Arial, size = 12, color = #F06 - Notice: Three types are listed as one option because the browser will look for the first font type listed and if it is not familiar with that font it will jump to the second option and then third. - Notice: They cut the hex code down to three digits. Example: #F06 is really #FF0066
18 Formatting Text Vulputate Section 6 Lacus Gravida Suspendisse Headings Headings help search engines index your site and format important content. There are six headings. Heading 1 is considered the important and heading 6 is considered least important. I usually set up three headings. By default the heading font is black and the same font type as the default font type (Times New Roman) and heading 1 is always set to be the largest. To Format the Heading 1. Click on Page Properties on the properties panel at the bottom of the screen 2. Be selected in Heading (CSS) on the left hand side. This will make it so that any rules you set up for the heading tags will be written into the file as CSS. 3. You can set up the headings to your preference. Just keep in mind that heading 1 should always be the largest. Click ok. 4. Highlight the text you want to be heading 1 and choose heading 1 from the format menu on the properties panel. Heading, <h1> Heading, <h2> Apply the tag to the text here - Notice: The rules I set up for the headings: each tag rule can be completely difference from each other - Notice: Three types are listed as one option because the browser will look for the first font type listed and if it is not familiar with that font it will jump to the second option and then third. - Notice: They cut the hex code down to three digits. Example: #F06 is really #FF0066
19 Formatting Text Vulputate Section 6 Lacus Gravida Suspendisse Links Text links can be set up to external sites or other files within the site. Depending on your Dreamweaver preferences by default links are usually the same font type as the default font, the color is blue and they are underlined. To Format Links 1. Click on Page Properties on the properties panel at the bottom of the screen 2. Be selected in Link (CSS) on the left hand side. This will make it so that any rules you set up for the heading tags will be written into the file as CSS. 3. You can set up the links to your preference. Notice you have different states of the link which you can set up. Click ok 4. Highlight the text you want to be a link and type in the link destination in the link box located in the properties panel (in the address for an external link you must include Link, <a href=> Apply the link destination here - Notice: If you want to apply different link rules to different sections of the page you can do so but it is not shown in this tutorial. (Adv. Text Link Tutorial: ) - Notice: Three types are listed as one option because the browser will look for the first font type listed and if it is not familiar with that font it will jump to the second option and then third. - Notice: They cut the hex code down to three digits. Example: #F06 is really #FF0066
20 Formatting Text Vulputate Section 6 Lacus Gravida Suspendisse Class Creating a class in Dreamweaver allows you to create any rule and apply it to any element. With text you can name the rule any thing you want and provide any font rules. To Format Links 1. Click on the New CSS Rule icon on the CSS panel at the right of the screen 2. In the pop up window, Choose the following...rule type= Class and then type in the any name you would like to give this rule, apply this rule to this document only (for internal CSS). When naming the rule no spaces or capital are allowed. Click ok 3. Apply any rules you want this class to follow. Example: I made it so this rule turns my text green. (In step two I named my rule, greentext, get it)? 4. Highlight the text you want to apply this rule and choose the rule name from the class list in the Properties Panel. 1 Create New CSS Rule Set up the rules you want to apply - Notice: You can apply more than rule to a class. I can tell the text to be green and bold! - Notice: Three types are listed as one option because the browser will look for the first font type listed and if it is not familiar with that font it will jump to the second option and then third. - Notice: They cut the hex code down to three digits. Example: #F06 is really #FF Class - Name the rule! - This document only (internal CSS) 4 Highlight the text you want to change and choose the rule name from the Class drop down list.
Figure 1 Properties panel, HTML mode
How to add text Adding text to a document To add text to a Dreamweaver document, you can type text directly in the Document window, or you can cut and paste text. You modify text by using the Properties
COMSC-031 Web Site Development- Part 2
COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create
Title and Modify Page Properties
Dreamweaver After cropping out all of the pieces from Photoshop we are ready to begin putting the pieces back together in Dreamweaver. If we were to layout all of the pieces on a table we would have graphics
Table Basics. The structure of an table
TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that
How to lay out a web page with CSS
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
Dreamweaver: Web Forms
Dreamweaver: Web Forms Introduction Web forms allow your users to type information into form fields on a web page and send it to you. Dreamweaver makes it easy to create them. This workshop is a follow-up
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide MS-Expression Web Quickstart Guide Page 1 of 24 Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program,
Introduction to Dreamweaver CS3
TUTORIAL 2 Introduction to Dreamweaver CS3 In Tutorial 2 you will create a sample site while you practice the following skills with Adobe Dreamweaver CS3: Creating pages based on a built-in CSS page layout
ADOBE DREAMWEAVER CS4 BASICS
ADOBE DREAMWEAVER CS4 BASICS Dreamweaver CS4 2 This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.
![This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.](/thumbs/89/98497436.jpg "This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.")
This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Get Organized... 1 Create the Home Page... 1 Save the Home Page as a Word Document...
To illustrate how to set TAG styles the <body> and <h1> tags (for the BODY and the HEADING 1 styles) will be adjusted.
Chapter The formatting of CSS pages is carried out by setting the required styles. There are four different types of styles: Class which are custom styles that you create. You did this in Chapter 12. Tag
How to lay out a web page with CSS
How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).
Objective % Select and utilize tools to design and develop websites.
Objective 207.02 8% Select and utilize tools to design and develop websites. Hypertext Markup Language (HTML) Basic framework for all web design. Written using tags that a web browser uses to interpret
Using Dreamweaver CS6
Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
ADOBE 9A Adobe Dreamweaver CS4 ACE.
ADOBE 9A0-090 Adobe Dreamweaver CS4 ACE http://killexams.com/exam-detail/9a0-090 ,D QUESTION: 74 You use an image throughout your Web site. You want to be able to add this image to various Web pages without
Dreamweaver Basics Workshop
Dreamweaver Basics Workshop Robert Rector idesign Lab - Fall 2013 What is Dreamweaver? o Dreamweaver is a web development tool o Dreamweaver is an HTML and CSS editor o Dreamweaver features a WYSIWIG (What
CS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3)
CS 1033 Multimedia and Communications Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Table Properties Reference Guide The Property
Creating Forms. Starting the Page. another way of applying a template to a page.
Creating Forms Chapter 9 Forms allow information to be obtained from users of a web site. The ability for someone to purchase items over the internet or receive information from internet users has become
ORB Education Quality Teaching Resources
These basic resources aim to keep things simple and avoid HTML and CSS completely, whilst helping familiarise students with what can be a daunting interface. The final websites will not demonstrate best
Dreamweaver 101. Here s the desktop icon for Dreamweaver CS5: Click it open. From the top menu options, choose Site and New Site
Dreamweaver 101 First step: For your first time out, create a folder on your desktop to contain all of your DW pages and assets (images, audio files, etc.). Name it. For demonstration, I ll name mine dw_magic.
How to set up a local root folder and site structure
Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where
Lesson 1 using Dreamweaver CS3. To get started on your web page select the link below and copy (Save Picture As) the images to your image folder.
Lesson 1 using Dreamweaver CS3 To get started on your web page select the link below and copy (Save Picture As) the images to your image folder. Click here to get images for your web page project. (Note:
Taking Fireworks Template and Applying it to Dreamweaver
Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate
CSS worksheet. JMC 105 Drake University
CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html
Creating Web Pages with SeaMonkey Composer
1 of 26 6/13/2011 11:26 PM Creating Web Pages with SeaMonkey Composer SeaMonkey Composer lets you create your own web pages and publish them on the web. You don't have to know HTML to use Composer; it
Title and Modify Page Properties
Dreamweaver After cropping out all of the pieces from Photoshop we are ready to begin putting the pieces back together in Dreamweaver. If we were to layout all of the pieces on a table we would have graphics
Chapter 1 Introduction to Dreamweaver CS3 1. About Dreamweaver CS3 Interface...4. Creating New Webpages...10
CONTENTS Chapter 1 Introduction to Dreamweaver CS3 1 About Dreamweaver CS3 Interface...4 Title Bar... 4 Menu Bar... 4 Insert Bar... 5 Document Toolbar... 5 Coding Toolbar... 6 Document Window... 7 Properties
Word 2007 Basic Formatting Objectives
Word 2007 Basic Formatting Objectives Customize Word 2007 document view. Learn basic page layout changes. Learn to change page background Basic Character Formatting Contents Page Word Document View...
Welcome Please sit on alternating rows. powered by lucid & no.dots.nl/student
Welcome Please sit on alternating rows powered by lucid & no.dots.nl/student HTML && CSS Workshop Day Day two, November January 276 powered by lucid & no.dots.nl/student About the Workshop Day two: CSS
Chapter 5 Making Life Easier with Templates and Styles
Chapter 5: Making Life Easier with Templates and Styles 53 Chapter 5 Making Life Easier with Templates and Styles For most users, uniformity within and across documents is important. OpenOffice.org supports
Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets
Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually
Reading 2.2 Cascading Style Sheets
Reading 2.2 Cascading Style Sheets By Multiple authors, see citation after each section What is Cascading Style Sheets (CSS)? Cascading Style Sheets (CSS) is a style sheet language used for describing
This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.
![This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.](/thumbs/72/67280806.jpg "This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.")
This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Just so you know: Things You Can t Do with Word... 1 Get Organized... 1 Create the
Eng 110, Spring Week 03 Lab02- Dreamwaver Session
Eng 110, Spring 2008 Week 03 Lab02- Dreamwaver Session Assignment Recreate the 3-page website you did last week by using Dreamweaver. You should use tables to control your layout. You should modify fonts,
OU EDUCATE TRAINING MANUAL
OU EDUCATE TRAINING MANUAL OmniUpdate Web Content Management System El Camino College Staff Development 310-660-3868 Course Topics: Section 1: OU Educate Overview and Login Section 2: The OmniUpdate Interface
Advanced Dreamweaver CS6
Advanced Dreamweaver CS6 Overview This advanced Dreamweaver CS6 training class teaches you to become more efficient with Dreamweaver by taking advantage of Dreamweaver's more advanced features. After this
Introducing Cascading Style Sheets. Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS
Introducing Cascading Style Sheets Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS Cascading Style Sheet Basics CSS has many benefits: The pages look
Dreamweaver Basics Outline
Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working
Photoshop tutorial: Final Product in Photoshop:
Disclaimer: There are many, many ways to approach web design. This tutorial is neither the most cutting-edge nor most efficient. Instead, this tutorial is set-up to show you as many functions in Photoshop
FrontPage 2000 Tutorial -- Advanced
FrontPage 2000 Tutorial -- Advanced Shared Borders Shared Borders are parts of the web page that share content with the other pages in the web. They are located at the top, bottom, left side, or right
Layout with Layers and CSS
Layout with Layers and CSS Today we're going to make a Web site layout. Preparatory Step 1. Inside your folder create a new folder and name it layout. 2. Inside the layout folder create a new folder and
Document Formatting with Word
This activity will introduce you to some common tasks that you ll be doing throughout the semester. Specifically, it will show you how to format your documents in the standard document format. By learning
Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100
Introduction to Multimedia MMP100 Spring 2016 profehagan@gmail.com thiserichagan.com/mmp100 Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax!
HTML/CSS Lesson Plans
HTML/CSS Lesson Plans Course Outline 8 lessons x 1 hour Class size: 15-25 students Age: 10-12 years Requirements Computer for each student (or pair) and a classroom projector Pencil and paper Internet
Adobe Dreamweaver CS5 Tutorial
Adobe Dreamweaver CS5 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout,
GoLive will first ask you if your new site will be for one individual or a work group; select for a Single User, and click Next.
Getting Started From the Start menu, located the Adobe folder which should contain the Adobe GoLive 6.0 folder. Inside this folder, click Adobe GoLive 6.0. GoLive will open to its initial project selection
AgWare ClickFORMS 7.0 Introductory Tutorial
AgWare ClickFORMS 7.0 Introductory Tutorial MAIN WINDOW If you have used Office 2007, our new layout will look familiar. Here is a screenshot of the new and improved AgWare ClickFORMS window: The Forms
Building TPS Web Pages with Dreamweaver
Building TPS Web Pages with Dreamweaver Title Pages 1. Folder Management 7 2. Defining Your Site 8-11 3. Overview of Design Features 12-22 4. Working with Templates 23-25 5. Publishing Your Site to the
Adobe Dreamweaver CS3 English 510 Fall 2007
Adobe Dreamweaver CS3 English 510 Fall 2007 Important: Before going through this handout, you should create a WWW directory on your ISU e-mail account. Otherwise, you will not be able to upload and view
Adobe Dreamweaver CS5/6: Learning the Tools
Adobe Dreamweaver CS5/6: Learning the Tools Dreamweaver is an HTML (Hypertext Markup Language) editor, authoring tool, and Web site management tool. Dreamweaver is a WYSIWYG (what you see is what you get)
Introduction to Microsoft Word
Chapter Microsoft Word is a powerful word processing program that allows you to enter text, make changes to it, format it, record and print it. You can use it to produce professional business letters,
Getting Started with CSS Sculptor 3
Getting Started with CSS Sculptor 3 With CSS Sculptor, you can quickly create a cross-browser compatible layout with custom widths, margins, padding, background images and more. Additionally, you can use
CAL 9-2: Café Soylent Green Chapter 12
CAL 9-2: Café Soylent Green Chapter 12 This version is for those students who are using Dreamweaver CC. You will be completing the Forms Tutorial from your textbook, Chapter 12 however, you will be skipping
Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links
Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.
Adobe Dreamweaver CC 17 Tutorial
Adobe Dreamweaver CC 17 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site
Authoring World Wide Web Pages with Dreamweaver
Authoring World Wide Web Pages with Dreamweaver Overview: Now that you have read a little bit about HTML in the textbook, we turn our attention to creating basic web pages using HTML and a WYSIWYG Web
Adobe Fireworks CS Essential Techniques
Adobe Fireworks CS4 HOW-TOs 100 Essential Techniques Jim Babbage 140 64 Creating Graphic Symbols Resizing Symbols When you resize any bitmap to a smaller size, pixel information is discarded. This is normally
Creating Simple Links
Creating Simple Links Linking to another place is one of the most used features on web pages. Some links are internal within a page. Some links are to pages within the same web site, and yet other links
Dreamweaver CS5 Lab 4: Sprys
Dreamweaver CS5 Lab 4: Sprys 1. Create a new html web page. a. Select file->new, and then Blank Page: HTML: 2 column liquid, left sidebar, header and footer b. DocType: XHTML 1.0 Strict c. Layout CSS:
Website Management with the CMS
Website Management with the CMS In Class Step-by-Step Guidebook Updated 12/22/2010 Quick Reference Links CMS Login http://staging.montgomerycollege.edu/cmslogin.aspx Sample Department Site URLs (staging
Creating a Template in WordPerfect
1. File a. New From Project Creating a Template in WordPerfect b. Go to Options 2. Create A Category 1 3. Name it Family History (or a title of your choice) 4. Find Family History in the Drop down list
**Method 3** By attaching a style sheet to your web page, and then placing all your styles in that new style sheet.
CSS Tutorial Part 1: Introduction: CSS adds style to tags in your html page. With HTML you told the browser what things were (e.g., this is a paragraph). Now you are telling the browser how things look
Styles, Style Sheets, the Box Model and Liquid Layout
Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of
Section 6: Dreamweaver
Section 6: Dreamweaver 1 Building TPS Web Pages with Dreamweaver Title Pages 1. Dreamweaver Storyboard Pages 3 2. Folder Management 4 3. Defining Your Site 5-8 4. Overview of Design Features 9-19 5. Working
The Official E-Portfolio Tutorial Guide
School of Education Last Updated: January 2009 The Official E-Portfolio Tutorial Guide Includes Instructions For: -Setting Up Dreamweaver -Editing Images Using Photoshop -Creating & Inserting Evidence
Lesson 4 - Creating a Text Document Using WordPad
Lesson 4 - Creating a Text Document Using WordPad OBJECTIVES: To learn the basics of word processing programs and to create a document in WordPad from Microsoft Windows. A word processing program is the
Orchard Book Maker. From the main menu you may select one of the following options:
Book Maker is a versatile program for making books of different sizes. Designed to assist children in adding the finishing touches to their writing, this program provides an effortless and creative way
Let's take a look at what CSS looks like in Dreamweaver using the "Embedded" coding which is the styles are within the html code and not separate.
Creating web pages using CSS and Dreamweaver CS3 Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in a markup language. Its most common application
Dreamweaver Template Tutorial - How to create a website from a template
Dreamweaver Template Tutorial - How to create a website from a template In this tutorial you will create a website using Dreamweaver s premade templates. You are going to learn how to style them using
Dreamweaver CS4: Layout Guide. Převzato z
Dreamweaver CS4: Layout Guide Převzato z www.bewebmaster.com Intro This tutorial will help you: 1. Define a new Dreamweaver web site 2. Create a new HTML file 3. Create a new CSS file and attach it to
The first time you open Word
Microsoft Word 2010 The first time you open Word When you open Word, you see two things, or main parts: The ribbon, which sits above the document, and includes a set of buttons and commands that you use
SETTING UP A. chapter
1-4283-1960-3_03_Rev2.qxd 5/18/07 8:24 PM Page 1 chapter 3 SETTING UP A DOCUMENT 1. Create a new document. 2. Create master pages. 3. Apply master pages to document pages. 4. Place text and thread text.
Dreamweaver Tutorial #2
Dreamweaver Tutorial #2 My web page II In this tutorial you will learn: how to use more advanced features for your web pages in Dreamweaver what Cascading Style Sheets (CSS) are and how to use these in
Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1
Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web
Interactive Tourist Map
Adobe Edge Animate Tutorial Mouse Events Interactive Tourist Map Lesson 1 Set up your project This lesson aims to teach you how to: Import images Set up the stage Place and size images Draw shapes Make
Adobe Dreamweaver CS4
Adobe Dreamweaver CS4 About Dreamweaver Whether creating simple blog pages complex web sites, Dreamweaver provides users with a powerful set of web-design tools necessary f the task. Its userfriendly interface
Microsoft Word 2010 Tutorial
1 Microsoft Word 2010 Tutorial Microsoft Word 2010 is a word-processing program, designed to help you create professional-quality documents. With the finest documentformatting tools, Word helps you organize
Overview of the Adobe Dreamweaver CS5 workspace
Adobe Dreamweaver CS5 Activity 2.1 guide Overview of the Adobe Dreamweaver CS5 workspace You can access Adobe Dreamweaver CS5 tools, commands, and features by using menus or by selecting options from one
Dreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5
Dreamweaver Domain 5: Organizing Content by Using Dreamweaver CS5 Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Set and modify document
Creating Postcards in Microsoft Publisher
Creating Postcards in Microsoft Publisher Open Publisher either from the desktop or through the Start menu. Once Publisher opens, select Postcards from the menu on the right hand side of the screen. Scroll
Using Dreamweaver to Create Page Layouts
Using Dreamweaver to Create Page Layouts with Cascading Style Sheets (CSS) What are Cascading Style Sheets? Each cascading style sheet is a set of rules that provides consistent formatting or a single
How to Prepare Your Cards for Press Using InDesign
How to Prepare Your Cards for Press Using InDesign This Tutorial is Divided into Sections: 1. What do I Need? What is InDesign? 2. How to start a new document with InDesign (the template explained) 3.
How to lay out a web page with CSS
How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block
FRONTPAGE STEP BY STEP GUIDE
IGCSE ICT SECTION 15 WEB AUTHORING FRONTPAGE STEP BY STEP GUIDE Mark Nicholls ICT lounge P a g e 1 Contents Introduction to this unit.... Page 4 How to open FrontPage..... Page 4 The FrontPage Menu Bar...Page
< building websites with dreamweaver mx >
< building websites with dreamweaver mx > < plano isd instructional technology department > < copyright = 2002 > < building websites with dreamweaver mx > Dreamweaver MX is a powerful Web authoring tool.
Creating a Website Using Weebly.com (July 2012 Update)
Creating a Website Using Weebly.com (July 2012 Update) Weebly.com is a website where anyone with basic word processing skills can create a website at no cost. No special software is required and there
Web Publishing Basics II
Web Publishing Basics II Jeff Pankin Information Services and Technology Table of Contents Course Objectives... 2 Create a Site Definition... 3 The Dreamweaver CS4 Interface... 4 Panels are groups of icons
The Newsletter will contain a Title for the newsletter, a regular border, columns, Page numbers, Header and Footer and two images.
Creating the Newsletter Overview: You will be creating a cover page and a newsletter. The Cover page will include Your Name, Your Teacher's Name, the Title of the Newsletter, the Date, Period Number, an
Grade: 7 Lesson name: Creating a School News Letter Microsoft Word 2007
Grade: 7 Lesson name: Creating a School News Letter Microsoft Word 2007 1. Open Microsoft Word 2007. Word will start up as a blank document. 2. Change the margins by clicking the Page Layout tab and clicking
HOW TO USE THE CONTENT MANAGEMENT SYSTEM (CMS) TABLE OF CONTENTS
HOW TO USE THE CONTENT MANAGEMENT SYSTEM (CMS) TABLE OF CONTENTS GETTING STARTED (LOGIN) 2 SITE MAP (ORGANIZE WEBPAGES) 2 CREATE NEW PAGE 3 REMOVE PAGE 6 SORT PAGES IN CHANNEL 7 MOVE PAGE 8 PAGE PROPERTIES
FACULTY AND STAFF COMPUTER FOOTHILL-DE ANZA. Office Graphics
FACULTY AND STAFF COMPUTER TRAINING @ FOOTHILL-DE ANZA Office 2001 Graphics Microsoft Clip Art Introduction Office 2001 wants to be the application that does everything, including Windows! When it comes
MICROSOFT WORD 2010 Quick Reference Guide
MICROSOFT WORD 2010 Quick Reference Guide Word Processing What is Word Processing? How is Word 2010 different from previous versions? Using a computer program, such as Microsoft Word, to create and edit
Managing Your Schoolwires Web Site
Managing Your Schoolwires Web Site 1. Sign in at the district web site. 2. Select the school where your teacher or organization s web site is located as shown below. 3. Select the Teacher or Departments
Academic Word Processing with Word 2003
Academic Word Processing with Word 2003 Doc 5.133 Ver 1 John Matthews May 2005 Central Computing Services Prerequisites This document assumes that you are familiar with the use of a computer keyboard and
Payne s Dreamweaver CS5 Tutorials
Payne s Dreamweaver CS5 Tutorials CONTENTS Lesson I: Making simple pages and links 4 20+ minutes. Introduction to Dreamweaver and how it works. Making simple pages. Lesson 2: Structure, images, and text,
COMSC-031 Web We S ite Site Development Development- Part 2 Part-Time Instructor: Joenil Mistal November 7, 2013
COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal November 7, 2013 Chapter 12 12 Creating and Applying Cascading Style Sheets This chapter shows you how to use Cascading Style
Exploring the Interface
2 Exploring the Interface Touring the Interface 13 Setting a Default Workspace 26 Saving Workspace Layouts 26 Defining a Default Browser 27 Using Shortcut Keys 28 One of the most daunting aspects of working
TABLE OF CONTENTS TABLE OF CONTENTS... 1 INTRODUCTION... 2 USING WORD S MENUS... 3 USING WORD S TOOLBARS... 5 TASK PANE... 9
TABLE OF CONTENTS TABLE OF CONTENTS... 1 INTRODUCTION... 2 USING WORD S MENUS... 3 DEFINITIONS... 3 WHY WOULD YOU USE THIS?... 3 STEP BY STEP... 3 USING WORD S TOOLBARS... 5 DEFINITIONS... 5 WHY WOULD
Adobe InDesign CS6 Tutorial
Adobe InDesign CS6 Tutorial Adobe InDesign CS6 is a page-layout software that takes print publishing and page design beyond current boundaries. InDesign is a desktop publishing program that incorporates
Dear Candidate, Thank you, Adobe Education
Dear Candidate, In preparation for the Web Communication certification exam, we ve put together a set of practice materials and example exam items for you to review. What you ll find in this packet are: