Syllabus --------------------- Calendar/Schedule --------------------- Lecture Notes --------------------- Projects --------------------- Resources --------------------- Student Work				Art 444 Lecture Notes Creating a simple web site with Dreamweaver Creating a new site Setting page properties Adding Content Text Images Creating links Testing your pages Uploading to the server In this introductory demo, we will go over basic features of Dreamweaver. Our goal is to make a simple web site, composed of several linked pages that contain images, text, hypertext and image links. You will learn how to load your page to the WWW via Dreamweaver's FTP feature. Begin by creating a folder called "website" or "mysite" on your desktop. This is where you will keep all of your site assets or files. Now start up the Dreamweaver application and follow the steps below to create a new site folder or directory. Before you begin make sure both the Insert and Properties palettes are showing after Dreamweaver initiates. If they are not open them from the Window Menu. The Insert palette allows you to insert images, tables, horizontal rules, layers, plug-ins and etc. There are various states for this palette so make sure common state is showing. The Properties palette is where you make specific changes to your added content. For example, you can create a link or choose a type style from this window. CREATING A NEW SITE: Select Site> Manage Sites... from the top pull-down menu. Select New... and "site" from the buttons on the right. Follow either the Basic or Advanced set up. For Advanced set up select Local Info category and name your site. Then select the Local Root Folder by clicking the folder icon. Navigate to the folder you created earlier and choose this as your Root Folder. Make sure the Enable Cache box is checked and click o.k. Dreamweaver will create a memory cache to store your frequently used site assets making display faster. To create your first page select File> New and save this file to your root folder as home.html or index.html. Return to Site> Manage Sites... and click on your site name in the list to the left and click Edit.... Select the Site Map Layout category and designate the home.html file you created earlier in your site folder as the Home Page. Note: All file names should be 8 characters or less in lower case. Make sure that you do not move your web folder to a different location or move files out of it as the links to files will be broken. SETTING PAGE PROPERTIES: Using the Home Page file you created now edit its page properties for your site. This is the first page your visitors will come to. You will need to define the Page Properties, which include the title of your page (important for bookmarking), the background, text, and link colors as well as a background image that will tile or repeat in the browser window. Page Properties are accessed in Modify> Page Properties. Select colors for your page by clicking on the small boxes left of text, background and etc. Notice the number/letter combinations that are listed after you select a color, these are called hexadecimal colors and reflect the 216 web-safe colors that are available for you to use. When you use hexadecimal colors you can be fairly sure that the color see on your monitor will be the color your audience sees. Take note of the hexadecimal color you are using for your background and use it in your image editing program when creating web graphics. This way any irregular graphic you create will blend into the browser-created background color. ADDING CONTENT: TEXT: Now you will add content to your home page. Text can be typed directly within the document window. You format the style and size of your text in the Properties palette. You should always designate a font face style and size for your text, otherwise the browser will use the face style and size the user specified in their browser preferences with your page looking considerably different from what you intended. This page uses the Verdana, Arial, Helvetica sans-serif grouping and is used on many www pages as it is easy to read. The rule of thumb is to set body copy at size 2. For headlines, etc. use a larger size. Other font style attributes include italicizing and making text bold. The color of the text will be the color you set earlier in Page Properties. You may change the color of individual words or sentences by selecting the line or word and applying a color (use the pull-down field left of the Bold icon). Text can be aligned to the center, right or left (which is the default) of the page. To create a text line break you will need to use return + shift keys. A line break returns the line on text directly underneath the line above. To create a paragraph break, which will create a slightly larger line break simply use the return key. IMAGES: All images for web use must be saved in either in the CompuServe Gif or the JPEG formats. You will need to edit & optimize in a image editor such as Adobe Photoshop. All images must be in grayscale or RGB mode (NO CMYK!) Photographic or art with subtle gradients should be saved in the JPEG format. Flat areas of color or vector graphics should be saved in the Compuserve Gif format. Please note that this is not always the case as a photo or vector graphic can be saved as either a GIF or JPEG. When you save your images remember to keep the file name 8 characters or less and make sure they have the proper extension, either .jpg or .gif (lower case). Place all of your saved web-optimized images in your site folder in a folder called "images." This sub-folder should only contain graphic files. Photo=JPEG .jpg Vector Graphic=Gif .gif Here is a tutorial for creating .gifs and .jpgs in Photoshop. Place images into your page by clicking on the topmost button in the Objects palette (the tree icon). Navigate to your folder to find your image. After your image is placed, you can set the alignment for the image with the align left, center, & right buttons. Note: the pull-down Align List does not align images on your page, it aligns text in relationship to your image. To make text wrap around your image, use either Align=left (image on the left side of the page with text wrapping to the right) or use either Align=right (image on the right side of the page with text wrapping to the left.) CREATING LINKS: You create a link by selecting text or images on your page and typing a url or file name into the Link field in the Properties palette. You can create a local file link (nextpage.html) or a link to a remote site (http://www.site.com). Be sure to start a remote link with http://.... Image links are created the same way. If you do not want to see a colored border around your image type Border=0 in the Properties window. To create a e-mail link, type mailto:yourname@domain.com. You can also click the little mail icon in the Insert common palette to add a mail text link. If you plan to link to a new page in your site you need to create that page for your link to work. Create this page like the one you just made and save to your web folder. Use the name of this file to create the link from your homepage to it. Note: you should always provide a way to get back to your home page via a link. TESTING YOUR PAGES: Dreamweaver generates basic code that will work with most browsers. To test your page, use File>Preview in Browser. Your page will open up in the browser that is specified. Be sure to check your links to see if they are working properly. It is always a good idea to test your pages on both Internet Explorer as well as Netscape before making them available to the public. UPLOADING TO THE SERVER: In order to put your site on the web you will need a service provider (paid space on a remote server) where you will upload files to a remote server. From this server, your site files will be accessed. Many times your dial-up Internet provider gives you at least 5 megs of space on the server. You may also sign up for free site space, though many times you have to put up with obnoxious advertising banners. To upload files you will need a FTP utility like Fetch or can use the one provided by Dreamweaver. To use Dreamweaver's FTP utility you will need to designate a HTTP address for your server in the Site Definition window. Go to Site>Define Site. Now highlight your site by name and click the Edit button. In the Site Definition window choose the Local Info category on the left. Type the address of your server in the HTTP Address box. Note: you need to obtain this info from your web server service provider or you will need set up a paid Domain (a .com or .net, etc.) by purchasing one from the many domain services available. In the Site Definition window choose Web Server Info category on the left. For Server access select FTP and fill out the fields (get these from your web server service provider). Now go to Site>Open Site. Click the Connect button on top nav bar to connect. You now can download your files. Remember to tell your friends about your new site address!

Back to top of page | School of Art, Design and Art History | SDSU Main