Just Enough Web Design.doc.doc


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Just Enough Web Design.doc.doc

  1. 1. Just Enough Web Design By Gerri Sant
  2. 2. Just Enough Web Design Gerri Sant Planning the Web site.........................................................3 Creating the Site.................................................................4 Creating your local site 5 Creating your remote site 6 Structure – Page Layout......................................................8 The table template design: 9 Structure: Using Images....................................................11 Inserting and formatting an image 11 Adding Text to your page...................................................13 Fonts 13 Scanable text 14 Structure: Creating Links..................................................15 Navigation bars 15 Creating links in Dreamweaver 15 Design: Using CSS..............................................................17 CSS in Dreamweaver 17 External Style Sheets 18 Publishing Your Site.........................................................20 Uploading (Putting or Publishing) your site in Dreamweaver 20 Page 2
  3. 3. Just Enough Web Design Gerri Sant Planning the Web site It is the purpose of this book to include instructions for creating a simple web site for the average Web user. I will use Dreamweaver 8 for the step-by-step directions, however, you should be able to adapt the concepts covered to any web authoring software. Many factors will influence the design and content of your Web site. Most important will be the purpose of the site and the intended audience. Are you trying to educate, sell a product, entertain or simply show off your photos? Is your intended audience computer and Web savvy or are they limited users of the Internet? Are they likely to have a relatively new computer system with the latest versions of web browser software? Do they have the plug-ins needed to run a Flash animation or view a video? The answers to these questions will determine the design of your site from the colors you choose to the size of the font and the number of images you include. They will help you decide whether to include music, animations and videos. Once you know the answers to the questions listed above and you have gathered your content information, you can begin to plan the site. Depending on the type of site and amount of information, you may want to lay out the pages so you can visualize your site. Some designers use sticky notes for each page, some use computer software to create the design, others draw squares representing the pages on a large chart or whiteboard. Whatever method of design you choose, the time spent will definitely be worth it. Your finished site will be well organized, easy to navigate and have something to offer to your audience. Page 3
  4. 4. Just Enough Web Design Gerri Sant Creating the Site Before beginning the pages for your site, you should create the site folder and any subfolders you will need. It is very important that all of your Web pages and media (pictures, sounds, movies etc.) be saved in the same site folder. Select a location on your computer’s hard drive or your flash drive and create a new folder. Name the folder appropriately (something like My Tech Classes). Open this folder and create a folder named ‘images’. Look back at your site design. Since you may be planning to take other Tech classes, you are creating a site with distinct sections. You will create additional folders inside the My Tech Classes folder. At this point you should create one folder for your Tech 2150 section of your site with its own images folder located within. Eventually you will also have your opening page for the Tech 2150 section of your site (index2150.html) and your 3 issue pages saved inside the 2150 folder as shown below. As you take other Tech classes, you can create folders for each of them inside the My Tech Classes site folder. The My Tech Classes folder is where you will save all Web pages as you create them and all of the media used in your site. In Dreamweaver you will designate this site folder as your local site. When you are ready though, you will have to Page 4
  5. 5. Just Enough Web Design Gerri Sant upload (publish or put) your pages and media to a Web server, your remote site, for the world to see. Creating your local site You will have to perform the following steps each time you want to work on your web site on a different computer since the site information is stored in Dreamweaver itself rather than in your site folder. Launch Dreamweaver and choose Site > New Site 1. Click the Advanced tab on the top of the window 2. Select Local Info in the Category pane 3. Enter your site name (My Tech Classes) 4. Click the Local root folder icon and navigate to select your Web folder. 5. Click the Default images folder icon and navigate to select your images folder. 6. Enter your http address: www.nova.edu/~username (enter your NSU username) 7. Other settings can remain as shown. Page 5
  6. 6. Just Enough Web Design Gerri Sant Creating your remote site Now you will set up the information Dreamweaver will use when you are ready to upload (publish, put) your web site to the NSU web server. If you create a web site some other time that is to be published to a different web server, the web server company will give you the appropriate information to fill in for FTP host and Host directory. The information given below will only work for the NSU server. 1. Select Remote Info in the Category pane. 2. Select Access > FTP (not shown below) 3. For NSU enter the information for FTP host: ftp://polaris.nova.edu 4. Enter the folder information: public_html 5. Enter your login username and your password. 6. Click Test. If the connection fails, try selecting Use passive FTP or contact your hosting service for more specific information. 7. Deselect Save if you are working on a shared computer. Page 6
  7. 7. Just Enough Web Design Gerri Sant The Files panel (Window > Files) will now display your site folders. Once you have uploaded your site to your hosting service, you can switch between your local site (the one on your computer or flash drive) and your remote site (the one on your Web server) using the dropdown menu on the right. The image on the left below shows a simple site in which all Web pages will be located in the root site folder. The image on the right shows a more complex site with sub folders for each section of the main site. Only the home page (index.html) is saved in the Site folder. Home page images are saved in the images folder. All other pages and their images are saved in appropriately named sub folders. Dreamweaver allows you to set up multiple sites and switch between the folder lists for each site. To create additional sites, remove sites no longer needed or edit details of a site, select the Site menu and Manage Sites. Page 7
  8. 8. Just Enough Web Design Gerri Sant Structure – Page Layout Well-designed pages are a must for an effective web site. They should have audience appeal yet be simple to read, easy to navigate and inviting. Repetition of page layout(s) throughout your site is an important element of design. Using templates can minimize much of the work of creating web pages. A template is a pattern for the basic layout of your page. Web authoring software like Dreamweaver includes options for creating and using templates. You can also create them yourself using tables or layers. First though you should design your page(s) on paper and decide where common elements such as a banner and navigation links will be placed. You may have several templates for your site, one for the home page and one for each other type of page, content information, photo gallery, links page. For each page type, create a new html file and save it with a distinctive name, tmplt_hm_pg, tmplt_content, tmplt_photo. Each time you begin a new html page for your site, open the appropriate template file and save it with the specific page’s name. Fill in your text, images and links. When you are ready to create another page, you still have the template file to use again. More advanced users will learn to use Dreamweaver’s template options. Once created, all changes to the templates automatically update all pages to which they are linked. Page 8
  9. 9. Just Enough Web Design Gerri Sant The table template design: 1. Select the insert table icon 2. Enter the number of columns and rows. These can be changed later. 3. Enter a table width of 750. Your page design should be 800 pixels wide to prevent horizontal scrolling. 4. Enter the number of pixels for the border, cell spacing and cell padding. Enter 0 for all three if you do not want to see the table lines on your page. 5. Click OK Adjust the cells as needed to create your page layout design. 1. To combine 2 or more cells into 1, select adjacent cells and right click. 2. Select Table > Merge. 3. To create multiple cells from a single cell, select the cell and right click. 4. Select Table > Split cell 5. Drag the cell spacing lines to a suitable position on the page. Complete the template design by inserting any elements that should appear on all of the pages that will follow its design. This might include a banner graphic, text or graphic links, contact information and background color or image. (See the section Structure: Using Images) Page 9
  10. 10. Just Enough Web Design Gerri Sant Select the table and use the Property Inspector to center it on the page. Since you set the table width to 750, you will have 25 pixels of margin on both the left and right of your page content when a viewer’s monitor is set to 800 by 600. This allows for browser chrome (scroll bars, rulers, etc. Save your page. It will be listed in your files panel. Page 10
  11. 11. Just Enough Web Design Gerri Sant Structure: Using Images Images of course make your web site stand out from the crowd. You may choose to create your own images, find them on the Web (and use them with permission) or hire someone to create them for you. The image formats you will be using are JPEG and GIF. Most simply put, the JPEG format is used for images with many colors (as many as 16.7 million), and blends, gradients and shades of colors. This means it is the format for photographs and any other images that do not have flat blocks of solid color. The GIF format is used with limited colors, up to 256. It is used when an image has areas of flat color. The GIF format is also used if you want a transparent background or animation. No matter which format you are using the main rule for images is OPTIMIZE! Most graphic editing software, (think Photoshop or Fireworks), includes the option to preview your image with different compression settings. Choose a setting to export your image as the smallest file possible (memory size, not inches) with acceptable quality. While you can change the physical size of your image once you insert it on a web page, this will not change its file size. Make sure you export the file into the appropriate images folder in your web site. Inserting and formatting an image 1. From the INSERT menu, select Image 2. Navigate to the images folder of your site folder and select the appropriate file. Note: You can also drag an image file from the file list on to your web page 3. Use the Property Inspector to set the following options: A.Width and height in pixels B.V space – space above and below the image as measured in pixels H space – space to the left and right of the image as measured in pixels C.Alt – an alternate text label that will appear on the page if a web browser’s image option is turned off or while an image is loading D.Align – alignment of the image with text that is on the same line Page 11
  12. 12. Just Enough Web Design Gerri Sant The properties inspector also includes tools for cropping and resampling your image. You can even click a button to open your image in Fireworks, the image editing software that is part of the software suite Macromedia Studio. Page 12
  13. 13. Just Enough Web Design Gerri Sant Adding Text to your page Thanks to word processor software, most people are comfortable working with text. Writing for the Web though is different from writing for print. Differences in computer systems, fonts, screen resolution and viewers reading styles all influence how you write and how it looks. Fonts When writing for print distribution, you are free to choose from any of the fonts you have on your computer. I will see it exactly as you intended once it is printed on paper. This is not true on the Web. If you write your web page using a font on your computer that I don’t have on mine, my browser will choose a font from my computer to display your page. It may look considerably different in my font. For this reason, choose from fonts that appear on most everyone’s computer. You should also consider when to use serif and sans serif fonts. Serif fonts are those that have small decorative lines on the ends of letters. Sans serif fonts are plain. Serif fonts help a viewer’s eye track across a page. For this reason they are often used for paragraphs, especially in print. Sans serif fonts stand out as headings. On a computer monitor however, some sans serif fonts are better for paragraphs. The common fonts of each type include Font type Windows fonts Macintosh fonts Serif Times New Roman, Georgia Times Sans Serif Arial, Verdana Helvetica, Geneva Dreamweaver offers the option of specifying a list of fonts. This way a viewer’s web browser can choose from a preferred list of fonts. These lists usually end with a general choice of either serif or sans serif in case none of the other choices is on the viewer’s computer. Page 13
  14. 14. Just Enough Web Design Gerri Sant The choice of fonts and most text styling should be specified either in an attached style sheet or on the individual web page in a CSS style section. (See the section on CSS styles). Scanable text By its very nature the Web encourages readers to jump from page to page or from the top to the middle or bottom of a single page. With thousands of hits in response to a Web search, viewers want to know if your page contains the information they need. The use of headlines and chunked information will help them. Break your information into logical pieces with summary titles in larger text before each section. If your page is long, include a linked list of topics covered at the top of the page. Page 14
  15. 15. Just Enough Web Design Gerri Sant Structure: Creating Links Web users navigate from page to page or place to place within a page by clicking on linked text or images. There are three types of links used on web pages; internal, external and mail. Internal or local links: These links connect to other pages within the same web site. Anchors can be used to connect to a location other than the default top of the page when a link in clicked. External or remote links: These links connect to web pages in other web sites. Mail links: These links open a users email client with an address already completed in the To section. Navigation bars Web pages often feature the same table of text or image links along the top, side or bottom of every page. Using a navigation bar as a standard feature on every page helps viewers easily move from page to page in your site. Creating links in Dreamweaver 1. Select the text or image that will become the link. 2. Internal link: drag the ‘point to file’ marker to the target file listed in the file list. Page 15
  16. 16. Just Enough Web Design Gerri Sant Internal link with an anchor: Name the anchor site: Set the insertion point at the link destination. Click the Name Anchor button In the Named anchor text box, enter the name and click OK. Set the link: Enter the number sign # and anchor name in the link text box of the Property Inspector for a same page link. Example: #week Enter the filename followed by the number sign # and anchor name in the link text box of the Property Inspector for a link to an anchor on a different page. Example: page2#week External link: enter the URL in the Link section of the Property Inspector. Make sure to include the ‘http://’. Example: http://www.nova.edu Mail link: enter the address following the code ‘mailto:’ in the Link section of the Property Inspector. Example: mailto:username@yahoo.com Page 16
  17. 17. Just Enough Web Design Gerri Sant Design: Using CSS Separating the design from the underlying structure of your web site will help you control and modify elements such as font, weight (bold, normal), size, color, background, spacing and indents. Cascading style sheets, CSS, are used to name and specify formatting. These styles can apply to individual html tags. For example you can declare all H1 (heading 1) text to be written in Arial font, 18 point, and red. You can also create class and ID styles that can apply to any text or selected section on your page. If the same styles will be used on multiple pages in your site, you can store them in one or more external style sheets. These sheets are then linked to the specific pages that will use them. Once the style sheets are created and linked to your web pages, you can change the background image, font color or any other declared element on all linked pages by changing the definition in the external style sheet. CSS in Dreamweaver CSS rules are made up of two parts: selector and properties. h1{ h1 is the selector – parentheses are required color: red; color is a property font-size: 18px; font size is another property } parentheses are required Once the previous rule has been declared, any text that is set to a heading 1 (h1) will automatically be size 18 and colored red. To change all heading 1 text to green, just edit the rule to read color:green; . To define a style for an html tag: 1. Open the CSS styles panel ( Window > CSS styles) and click the New CSS rule button at the bottom of the panel. 2. In the New CSS Rule dialog box, select Tag as the type and enter h1 as the Tag. 3. In the Define in section, select This document only. (Your style can be exported to an external style sheet and Page 17
  18. 18. Just Enough Web Design Gerri Sant linked to multiple pages later.) 4. In the CSS Rule Definition dialog box, select Type from the Category list. 5. Select from the dropdown menus to set the properties for font, size and color. 6. Other properties can also be defined such as a background color or image in the background category or border lines, padding and margins in the Box and Border categories. 7. Click OK to complete the definition and the new style is automatically applied to any <h1> tag on your page. If your style will be applied to text or sections of your page that are not defined by an html tag, create a class or ID. Class styles can be used multiple times on a page while ID styles are limited to one use per page. When creating a Class style, select Class in the New CSS Rule dialog box and enter a name for the class. Class names must begin with a period (example .grnTxt). When creating an ID style, select Advanced in the New CSS Rule dialog box and enter a name starting with the number symbol. (example #footer). To apply a Class or ID style: 1. Select some text or a section of the page, for example a table cell. 2. Right click the tag selector. (<p> or <td>). 3. Select the Class or ID from the pop-up menu. External Style Sheets To apply the styles you have created to other pages, you can export them to an external style sheet and link that sheet to multiple pages. A change to a style definition in the style sheet will automatically show up in all linked pages. In this way all the heading 1 text in your whole web site can be changed from red to Page 18
  19. 19. Just Enough Web Design Gerri Sant green with one word change. To export styles to an external style sheet: 1. In the CSS Styles Panel, right click the word <style>. 2. Select Export from the pop-up menu. 3. Name your style sheet and add the extension .css (example columns.css). 4. Navigate to your site folder and click Save. After exporting your styles, delete them from the page on which they were created and link the external style sheet to the page. 5. In the CSS Styles Panel, right click the word <style>. 6. Select Delete from the pop-up menu. To link an external style sheet to a web page: 1. Click the link button on the bottom of the CSS Styles Panel. 2. Click the Browse button and select the css stylesheet to be linked. 3. In the Add as section of the dialog box, select Link. 4. Click OK. Tag styles will automatically be applied. All Class and ID definitions will now be available for use on the linked page. Page 19
  20. 20. Just Enough Web Design Gerri Sant Publishing Your Site When you have finished your site, or at least enough of it to be useful to your audience since most sites are never totally finished, you will want to publish it to a remote server to make it available for viewing. If you set up your site correctly in the beginning (see Creating the Site), your uploaded site will look just like the local one. That is to say the folders, subfolders and images will all be recreated on the remote server with the same names and relative locations. Uploading (Putting or Publishing) your site in Dreamweaver Dreamweaver offers several options for uploading your site to your remote server. The easiest method for uploading the entire site, a single folder or file is to right click the folder or file and select Put from the pop-up menu. Page 20