Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
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> <[email protected]>
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> <[email protected]>
• 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> <[email protected]>
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> <[email protected]>
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> <[email protected]>