Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.)

Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.) In this project, you will learn the web publishing skills you need to: Plan a website Define a website Create a basic website Work with text and text formats Work with images Work with hyperlinks Manage your website Lesson 1: Planning the Website In this lesson you decide the structure of your website. PLANNING THE SITE LAYOUT Planning and organizing your site carefully from the start can save you time later. The first step is to design a flowchart that shows the number of pages in the site and how the pages are linked. PLANNING THE HOME PAGE The home page is the entrance to your website. It introduces the site, with information and navigation links to the other pages in the site. PLANNING THE OTHER PAGES Think about how you want to organize the content you have for the other pages. Are there paragraphs of text? lists? tables of information? Decide the best way to organize your content. Lesson 2: Getting Acquainted with Dreamweaver This lesson briefly introduces the key parts of Dreamweaver. The Dreamweaver workspace consists of the main Document window and three smaller areas: the Insert bar, the Property inspector, & panels. 1

The Dreamweaver workspace accommodates different work styles and levels of expertise. Here are some of the most commonly used components: The Document window displays the current document as you create and edit it. This is where you make the pages for your site. The Insert bar contains buttons for creating and inserting objects such as images, tables, layers, and frames you might want to add to your web page. The Property inspector displays properties for the selected object or text and lets you modify those properties. On the right side of the Dreamweaver workspace are panels you can expand or collapse as needed. USING THE DOCUMENT WINDOW You do most of your design work in the Dreamweaver Document window. You can add and manipulate text, images, menus, tables, and numerous other elements in the Document window. The insertion point (a short vertical segment) indicates where your text will appear, just as in a word processor. Click anywhere in text you have typed to re-position the insertion point. The document status bar, provides information about the document you are creating, including the size of the Document window, the document file size and estimated download time. The left side of the status bar is the HTML tag selector; you can click a tag to select an element in the window. The Document toolbar, found at the top of the Document window, contains an area for you to enter the title of your document. The title you enter will display in the Document title bar. The toolbar also contains buttons that let you toggle between the Design view and the Code view. Design view shows what the page will look like in a web browser. Code view shows the HTML code for the page. For this project, use the Design view. Other buttons give quick access to file management and navigation features. USING THE INSERT BAR The Dreamweaver Insert bar contains several categories of buttons for creating and inserting objects such as tables, layers, and images. (You can also insert each object by choosing the object from the Insert menu.) Let s look at the Insert bar categories you ll use in this project. 2

To view the Insert bar: 1. Click the Common tab on the Insert bar. The Insert bar defaults to the Common category when you start Dreamweaver. The Common category contains buttons for creating and inserting the most commonly used objects, such as images, tables, and layers. You will use the Common category most often in this project. 2. To insert an object from the Insert bar, click the object s icon. USING THE PROPERTY INSPECTOR The Property inspector (the panel below the Document window, labeled Properties) lets you examine and edit properties of the currently selected object or text in the Document window. The Property inspector is context sensitive it changes based on what you have selected in the Document window. For example, when you work on text, the Property inspector shows the attributes of that text, such as size, color, and font. When you work on a table, the Property inspector shows table attributes. To expand or collapse the Property inspector: 1. If the Property inspector is not already displayed, choose the menu Window > Properties. 2. Click the expander arrow in the lower right corner of the Property inspector. This expands (or collapses) the Property inspector to show (or hide) additional properties. USING THE PANELS The Dreamweaver workspace displays panels you can expand or collapse, as you need them. You can reconfigure the number and type of panels visible. (By default, the panels appear on the right side of the screen.) To show or hide all panels, including the Property inspector, choose View > Hide Panels or View > Show Panels from the menu bar. Lesson 3: Setting up the Local Site and Root Folder A website consists of folders containing files such as documents, images, and other media. When you create a website, you need to establish the location of the website and all its related folders and files. In this lesson, you create the folder structure on your computer to store all the files for your website. You then use Dreamweaver to define your local site and identify the root folder that will contain all the files for your site. (Note that before you can place your site on a web server, you first need to create it locally on your computer.) PLANNING THE LOCAL SITE FOLDER By creating and editing your pages on a local site on your computer before you copy the files to a web server, you can test your website to make sure it works properly before you make it available for public viewing. Every site is contained in a main folder, called the root folder. Most designers create subfolders inside the root folder to organize the site contents. 3

To create the site folder structure: To set up a site similar to the sample site illustrated in this project, create a root folder that will contain the web pages. Then create subfolders for images and text files. 1. Create a root folder on the hard drive. Name it [your last name]-site. 2. Create a subfolder in the root folder: named images. Find an image from the internet to use in your site and save it to your images folder. (Note: You should always attempt to get permission to use someone else s property such as an image. It is good practice to provide proper citation for borrowed images.) When you create a larger website (ten or more pages), it is helpful to group each set of related pages in a separate subfolder inside the root folder. For example, if your site had several pages related to your history, you could put them all in a subfolder named history. To define the website: The purpose of defining your website is to communicate to Dreamweaver the name and location of the root folder. 1. From the main bar at the top of the screen, choose Site > New Site. The Site Definition dialogue box opens. Click the Advanced tab. Note: If you click the Basic tab, Dreamweaver will lead you step by step through the complete process of defining a website, including the use of server technology. 2. From the Category list, select Local Info (if it s not already selected). 3. In the Site Name text box, type [your last name]-site. 4. Beside the Local Root Folder box, click the Folder icon. Navigate to the location on the hard drive where you stored your root folder. 5. Make sure you re viewing the contents of the [your last name]-site folder in the Choose Local Root Folder for Site dialogue box. Then click Select (Windows) or Choose (Macintosh). 4

6. Click OK to define your local site and folders. The initial cache message alerts you that the initial site cache is being created. Click OK. Lesson 4: Creating the Homepage In this lesson, you build the home page for your website. BUILDING THE HOMEPAGE There are many considerations when designing web pages. In this project, you focus on just the basic design elements needed to build this website. To save your document as the homepage: 1. Choose File > Save from the menu bar. The Save As dialogue box appears. It displays the folders in the site root folder. You will save the file in the root folder. 2. Type index.htm in the Filename box. When you use the filename index, the file is automatically specified as the homepage. 3. Click Save. To set a page title for your document: 1. In the Title text box (located in the Document tool bar), type [your name s] Website. 2. Press Enter (Windows) or Return (Macintosh). When this page is opened in a web browser, this title will appear on the title bar of the browser window. It is also the title used when the page is added to a browser s Favorites or Bookmarks list. Note: There are several ways to delete an element or action in Dreamweaver. You can use the Backspace and Delete keys. Alternatively, you can use the Edit commands: Cut, Clear, and Undo. The Undo command can undo the last 50 steps. The History Window is another method to allow you to undo previous actions. To insert text: 1. Position the insertion point at the top of the Document window. 2. Type Welcome to my website. 3. To start a new paragraph, press Enter (Windows) or Return (Macintosh). To start a new line (without the normal space provided between paragraphs), press Shift+Enter (Windows) or Shift+Return (Macintosh). To insert images: 1. Position the insertion point below the heading. 2. On the Common tab of the Insert bar, click Image (the tree button). The Select Image Source dialogue box opens. The dialogue box displays any folders and files stored in the site root folder. 3. Select the images folder, then click OK (Windows) or Open (Macintosh) to open it. Select the 5

image file and click OK (Windows) or Open (Macintosh). The image is inserted at the position of the insertion point. 4. If necessary, click the image to select it and display the image Property inspector. 5. Position the insertion point to the right of the image and add a smaller paragraph break by pressing Shift+Enter (Windows) or Shift+Return (Macintosh). Lesson 5: Creating the Other Web Pages In this lesson, you create the CV, and Research Interest pages for your website. BUILDING THE CV WEB PAGE First, create a new Document window in which you will build the History page. 1. In Dreamweaver, choose File > New from the menu bar. 2. In the New Document dialogue box, select Basic Page and click Create. A new untitled Document window opens. Note: It is very easy to include previously created text on web pages. You do not need to retype information from documents you already have. All you need to use are the Copy and Paste commands. Keep in mind that depending on the sophistication of the formatting of the original document and the type of paste command you use within Dreamweaver you may need to reformat the text using the formatting options within Dreamweaver. Alternatively, you can also create a direct link (Or a Print-friendly link) to a PDF version of your CV. This will ensure the version that is viewed has the exact text and page formatting as the original. To save the CV page: You should save your work on a page as you build it, but always save a page when you are ready to work on another page. 1. Add a title to this page. On the Document toolbar, select Untitled Document in the Title text box and type a title. 2. Make any other changes to the page properties according to your design plan. 3. From the menu bar, choose File > Save. 4. Navigate to the root folder. 5. Type cv.htm in the Filename text box. 6. Click Save. BUILDING THE RESEARCH INTERESTS PAGE On this web page, you use a table to communicate contact information about items relating to your research interests. First, create a new Document window in which you will build the Research Interests page. 1. In Dreamweaver, choose File > New from the menu bar. 6

2. In the New Document dialogue box, select Basic Page and click Create. A new untitled Document window opens. To save the Research Interests page: You should save your work on a page as you build it, but always save a page when you are ready to create another page. 1. Add a title to this page. On the Document toolbar, type a title such as My Favorite Links in the Title text box. 2. Make any other changes to the page properties according to your design plan. 3. From the menu bar, choose File > Save. 4. Navigate to the root folder. 5. Type research.htm in the Filename text box. 6. Click Save. To create an unordered bulleted list: Lists are usually easier to read and understand if they are set off from the surrounding text. An unordered list (with square, round, or no bullets) An ordered list (with numbers, letters, or roman numerals) 1. On the Property inspector, click Unordered List (bullets button) or choose Text > List > Unordered List from the menu bar. The paragraphs in the list are indented and set off with bullets. To add hyperlinks: A simple way to link your web page to information on other websites is to change one word or a phrase into a hyperlink. A hyperlink is text or a graphic that links to a different web page or to another section of the same page. 1. Select the words you want to make into a hyperlink. 2. On the Property inspector, type the full URL address for your external website link in the Link text box. Note: When you enter URLs in the Link text box, you must include http:// for the link to work. 3. Type a few links in the list. Create hyperlinks by referring to the add hyperlinks instructions described above. To move from one cell to the next, press the Tab key or click in a cell. Links UB website http://buffalo.edu UB Library http://ublib.buffalo.edu Teaching & Learning Center http://ubtlc.buffalo.edu Descriptions This site provides information about UB to prospective students and visitors. This site is the UB Library system This is the website for the UB Teaching & Learning Center. 7

Lesson 6: Applying a Template and Connecting the Web Pages In this lesson, you will apply a pre-designed template to your webpages and create navigation on the template page to link between the pages of your website. Designing custom templates is an advanced topic and is not covered in this lesson. Modify the previously created template: 1. Open the template page in Dreamweaver. Choose File > Open, navigate to the root folder, and double-click the filename template.dwt. 2. Revise the title text on the template to reflect the title you d like to use for your website. To insert a navigation link: 1. Position the insertion point in the right column of the page, type Personal Profile. 2. Highlight the phrase Personal Profile. Click the Browse button in the properties pallet. Navigate to the root folder and select the home page, for example index.htm. 3. Repeat this step to create the remaining navigation (Curriculum Vitae, and Research Interests). 4. Save and close the document. To apply the modified template to your webpages: You need to apply the template to each page of your website separately. Templates are applied to each page when a page open and is the main working document. 1. Open the Assets panel. Choose Window > Assets, and then select the Template icon. 2. Select the desired template file listed within the Assets Panel. 3. Hit the Apply button located on the bottom of the Assets Panel. 4. You will then be prompted to match the content from the original webpage to specific areas on the template (i.e., Document body/content, header/title). To preview your website: 1. From the menu bar, choose File > Preview in Browser and then choose the browser you want to use to preview your newly created web page. Lesson 7: Managing the Website In this lesson, you learn how to view the site structure and post your website to a server. To view the site structure: Dreamweaver helps you organize the files of your site by maintaining parallel file and folder structures at the local and remote sites. 1. Choose Window > Site to display the Site panel (Windows) or the Site window (Macintosh). To set up the remote site and post to a server: After you have checked all links and saved your work, you are ready to post your site to a server. 1. On the Site panel, click Connects to Remote Host (the button with the two computer connectors). 8

The Site Definition for [your last name]-site dialogue box opens. 2. In the Category list, select Remote Info. 3. Click the arrow beside the Access box and select FTP. 4. Check with the systems administrator to get the information you need to define the website: the FTP host, host directory, and so on. 5. You are now able to transfer your files to the Internet using either the synchronize function, put option, or by using the two column view you can drag your files. 9