Domain Names and Web Site Hosting Companies

Resources for this Workshop http://www.regent.edu/acad/schcom/webcourse/ Research and reserve domains names. Chose a domain name that is descriptive of your site • http://www.networksolutions.com • http://www.register.com Info on purchasing DOMAIN and HOSTING http://www.regent.edu/acad/schcom/webcourse/webhosting/generalhostinginfo.htm

Host your website Chose a company based on your needs. • http://www.1and1.com • http://www.godaddy.com To design or not do design? • Consider purchasing a pre-designed website,

also called a template. • Cost: $30-$200 • pixelmill.com | templateworld.com

The Tools of the Trade

Basic Software needed to design a website • Web Editors Dreamweaver (Adobe) Expression Web (Microsoft) Graphic Design/Photo Editors Photo Shop (Adobe) Paint Shop Pro (Corel) Fireworks (Adobe) Illustrator (Adobe)

Advanced Software Applications • Flash • Swish • Windows Media Encoder • Real Encoder • FTP (Ipswitch)

Basic Elements of a Website

• Home page • Second / third level pages • Text • Hyperlinks • Navigation • Images Advanced Elements: • Interactive Forms • Flash Animations • Audio/Video • CSS • Java / Java Script for web programming

homepage

3rd level content

2nd level content

• Plan FIRST and develop a flowchart of your site

<REGENT UNIVERSITY> <CENTER FOR STUDENT DEVELOPMENT > <INTRODUCTION TO WEB DESIGN> <MARKUS PFEIFFER> <MARKPFE@REGENT.EDU>

RECOMMENDATION: For a new site, purchase domain name and hosting space from the same company! I generally use 1and1 for all web hosting projects (Link to 1and1)

Book Resources The Non-Designer's Web Book, Robin Williams and John Tollett (3rd edition) ISBN: 0321303377. Format: Paperback, September 2005, Publisher: Peachpit Press The Principles of Beautiful Webdesign, Jason Beaird, 2007, Sitepoint Pty. Ltd. ISBN: 0-9758419-6-3 Teach Yourself VISUALLY Adobe Dreamweaver CS3 (Teach Yourself Visually), Janine Warner, 2007, ISBN: 9780470144756 Teach Yourself Visually Adobe Photoshop CS3 (Teach Yourself Visually) by Lynette Kent , 2007, ISBN: 9780470114520

Page Layout

• Draw a sketch of your basic layout • Use Tables and Cells to create the layout • Use good color contrast • Create an easy navigation flow • Resize and optimize all images on your website • Update your site with new content often • Redesign about every 2 - 3 years • Include interactive and multimedia elements

Header Banner

Navigation

Photo/Collage

Text

Text

Footer, date, copyright

<REGENT UNIVERSITY> <CENTER FOR STUDENT DEVELOPMENT > <INTRODUCTION TO WEB DESIGN> <MARKUS PFEIFFER> <MARKPFE@REGENT.EDU>

• Type text like in a Word Processor, HIGHLIGHT text and use the PROPERTY toolbar to change fonts, text size and other formatting options.

• Use the PAGE PROPERTIES to change background colors, page titles, link colors, etc.

Type and format text in DW

Hyperlink Text in DW

• 3 Types of Links: INTERNAL, EXTERNAL, SAME PAGE

• Highlight text to be hyperlinked and enter the link in the PROPERTY menu.

• Recommendation: COPY and PASTE links Sample link for external link: http://www.regent.edu Sample link for internal link: foyer.htm

• Hyperlinked text will generally turn blue and underlined. CNN News

Import Images to DW

• Images (Photos and graphic) come from different sources: Digital Cameras, Scanners, CD’s, Stockphoto websites, Free Photo Websites, Google Images. Always consider copyright issues.

• Import IMAGES that have been edited in Photoshop to DW. Use the image import icon to select photos and graphics.

• IMPORTANT: All images used for a website need to be stored in the same folders (local and remote)

• Recommendation: Do not edit images in DW. Do all edit-ing in Photoshop, or similar application first.

• Resources: Free Photo management tool: www.picasa.com (has limited editing options) Free Stock Photos: http://yotophoto.com/ http://commons.wikimedia.org/wiki/Main_Page http://www.freepixels.com/ http://www.christianphotos.net/

<REGENT UNIVERSITY> <CENTER FOR STUDENT DEVELOPMENT > <INTRODUCTION TO WEB DESIGN> <MARKUS PFEIFFER> <MARKPFE@REGENT.EDU>

Upload your page(s) to a Webserver

• Required: Domain name and web hosting space, FTP username and password.

• Work on your pages in “local” mode (in a folder on your computer)

• Create a NEW SITE and SITE DEFINITION in DW • Upload (PUT) new pages and images on the web server • Download (GET) pages and images to edit them and

afterwards upload (PUT) them again.

Resize Images in Adobe Photoshop

• Insert photos/graphic by FILE - OPEN • Resize images to fit your layout • To RESIZE: IMAGE - IMAGE SIZE

• All images placed on websites should be OPTIMIZED

• File - Save for Web • Set quality properties:

GIF for clipart / logos and JPG for photographs. • Challenge: Good image quality AND small file

size! • Save all webfiles in lowercase and with no

spaces • Example: littledogs.jpg (not: Little Dogs.jpg)

Save for Web Images

<REGENT UNIVERSITY> <CENTER FOR STUDENT DEVELOPMENT > <INTRODUCTION TO WEB DESIGN> <MARKUS PFEIFFER> <MARKPFE@REGENT.EDU>

Use Fill Tools and Brushes for Design

• Photoshop contains a variety of design and edit-ing tools such a brushes, pens, cloning, etc.

• Explore these tools for usage in the design process.

Crop Images in Adobe Photoshop

• Use the CROP, MARQUEE and LASSO tool to eliminate unwanted image content

• Use the TEXT tool to write on top of photographs and other graphics.

Add Text to Images

Apply Special Effects and Filters

• Get Creative! • Use filters to create special effects • Enhance Text with Styles

<REGENT UNIVERSITY> <CENTER FOR STUDENT DEVELOPMENT > <INTRODUCTION TO WEB DESIGN> <MARKUS PFEIFFER> <MARKPFE@REGENT.EDU>

Beginner’s Webpage Design

Please give us your feedback.