CIT 256 Dreamweaver Intro. Dr. Beryl Hoffman. Start Dreamweaver Start from Start Menu/Adobe Master Collection CS6/ Adobe Dreamweaver CS6 Choose Create.

Slides:



Advertisements
Similar presentations
Create a Web Site with Publisher 2000 for Marilyn Seguins Class.
Advertisements

DREAMWEAVER Welcome to our website!
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
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.
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.
Web Site Development Test 2 Working in DreamWeaver.
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.
Internet Publishing / Dreamweaver Luke E. Reese ANR Educ. and Communication Systems
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Internet Publishing / Dreamweaver Luke E. Reese CARRS
ETT 429 Spring 2007 Web Design I.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
Creating a Web Page HTML, FrontPage, Word, Composer.
Designing a Classroom Web Site Using NVU Beginning Level.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative.
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.
Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 4 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 4: Adding Content.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
Organizing Content by Using Dreamweaver CS5 Domain 5.
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
Web Design HTML, Frontpage, DreamWeaver μέρος β ΠΡΥ019 - Πληροφορική Δρ.Βάσος Βασιλείου.
CIT 256 Organizing Large Websites: Divs, DW Templates Dr. Beryl Hoffman.
Dreamweaver CS4 Concepts and Techniques Chapter 5 Templates and Style Sheets.
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.
Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.
Dreamweaver CS4 Concepts and Techniques Chapter 7 Page Layout with Frames.
Web Technologies Website Development Trade & Industrial Education
Unit E. Image Measurements The size of an image can be measured 2 ways: Dimensions: the height and width, measured in pixels. File Size: measured in Kilobytes.
.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.
Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.
Chapter 1 Review Images Links Images II Pictures and Extensions.
Chapter 6 Images in Dreamweaver & Fireworks Mrs. Johnson Web Design.
 Scaling an image is resizing the image in a graphic editing software so it is the proper size before adding it to a site.  Important NOTE: If you insert.
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
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
CIT 256 Dreamweaver Sites and Image Maps Dr. Beryl Hoffman.
Domain 3 Understanding the Adobe Dreamweaver CS5 Interface.
Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.
Dreamweaver CS4 Concepts and Techniques Chapter 2 Adding Web Pages, Links, and Images.
Internet Publishing Luke E. Reese ANR Education and Communication Systems
Chapter 5 Quick Links Slide 2 Performance Objectives Understanding Framesets and Frames Creating Framesets and Frames Selecting Framesets and Frames Using.
Working with Graphics – Lesson 21 Working with Graphics Lesson 2.
Microsoft Expression Web-Illustrated Unit E: Working with Pictures.
Adobe Dreamweaver CC: The Professional Portfolio Project 3: Photographer’s Web Site Working with static images Controlling backgrounds with CSS Working.
Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT.
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,
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
Internet Publishing / Dreamweaver Luke E. Reese Biosystems & Ag. Engr. / CARRS
CIT 256 CSS Intro & Dreamweaver Built-in Layouts Dr. Beryl Hoffman.
REEM ALMOTIRI Information Technology Department Majmaah University.
Building a Website: Layout Fall Overall Structure: Home Page Title Section Title Frame Picture UNCP Math Menu Content Footer Contact Information.
Web and Multimedia Development Copyright © Genetic Computer School 2007WM LESSON OVERVIEW  Use of Tables  Creating Tables  Try It – 1  Creating.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Luke E. Reese Biosystems & Ag. Engr
Unit Objectives Insert an image Align an image Enhance an image
With Microsoft FrontPage 2000
Intro to Dreamweaver Web Design Section 8-1
Creating Links – Lesson 3
Chapter 2 Adding Web Pages, Links, and Images
Cheat Sheet CSCI 100 JW Ryder
Create and edit web pages 2
DREAMWEAVER MX 2004 Chapter 4 Working with Images
USING DREAMWEAVER MX 2004 Contents: Assigning a Root Folder
Cheat Sheet CSCI 100 JW Ryder
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Presentation transcript:

CIT 256 Dreamweaver Intro. Dr. Beryl Hoffman

Start Dreamweaver Start from Start Menu/Adobe Master Collection CS6/ Adobe Dreamweaver CS6 Choose Create New HTML. (XHTML 4 default – other options available from File menu).

Code/Split/Design View Click on the Code/Split/Design to see HTML code or WYSIWIG Design or both. Type in a title in this bar too.

Page Properties for Colors/Styles Click on the Page Properties button at the bottom bar to select Background/Text/Link Colors, fonts, background images. Use Appearance (CSS) and Links (CSS) and Links (CSS)

What is CSS? CSS stands for Cascading Style Sheets. Usually the HTML code has the content, and the CSS defines the style for the page or site. For example, this defines the style for any text in h4 tags: h4 { font-family: "Arial"; color: blue }

Link Colors Link color: usually a different color than text. Default blue. Visited color: choose a less bright color. Default purple. Rollover color: changes color when mouse is on it, choose a brighter color. Active color: color when you click on it. Default you click on it. Defaultred. Underline Style.

Formatting Text Type in some text. Drag mouse to select text. Pull down the Format menu at the top and choose Paragraph/headings, Align/center, List, Style, etc. If you choose a different color, you will be prompted to type in a new style name (e.g. type in color name) that you can use again.

Inserting Links Type in the text you want to click on. Select/highlight it with the mouse. From the Insert menu, choose Hyperlink and type in the full URL (e.g. next to Link: or type in URL at the bottom bar next to Link:. Target: _blank will put it in a new window or tab. in a new window or tab. Breaks Back button.

Inserting Images First save your file! Next put your image files in the same directory as your file! Drag and drop in image or choose Insert/Image. Type in an alt (alternative) text that describes image so it can be read to users who cannot see.

Finding Free Images Right click to Save an image from the web, but be aware of copyright laws! Search for free images, royalty-free, public domain, creative commons license, etc. Google images has no controls for this! Free image sites: (Stock exchange) (pulls from other sites) (interesting reverse search and color search)

Image File Formats JPEG/JPG: 24 bit color, use for continuous tone photographs and Photoshop images. Loss-y compression (loses pixels when shrunk, not good for text). Does not support transparency. GIF: 8 bit color, use for logos/text, solid color such as Illustrator illustrations. Lossless compression (no pixels lost in reductions of size). Supports index transparency which can have a halo effect. PNG: supports 8 bit and 24 bit. Lossless compression and better alpha transparency. A better format! SVG: based on vector lines, not pixels, so completely scalable. IE needs separate plug-in to view them.

Relative vs. Absolute Paths Document Relative path: Always looks in the same directory. Easy to move web site. Always looks in the same directory. Easy to move web site. Absolute path: If files are uploaded to another computer or web server, image cannot be found!

Image Re-sizing/Editing Re-sizing: Grab anchors at the side. Hold down Shift key and grab corner to preserve proportions. Use lock next to width & height to type in new height or width. Editing: buttons for crop, re-sample, sharpen, brightness/contrast. Or move to Photoshop. If it is a large image, re-size and then re-sample to save a smaller image for quicker load time. Careful, original changed, no automatic backup!

Image Links Making an image into a clickable button: Insert Image. Click on image. Type in URL in the Link: property in the bottom window.

Lists and Tables Lists: Type in text for list items, highlight, choose Format/List/type of list. Tables: Insert/Table. Choose number of rows and columns, border, etc. Type in or drag in table items.

Test! Click on the world icon to test in different browsers. Always test in multiple browsers.