Outline for Dreamweaver Worksheet:
- Activating Your Wake Forest Home Page
- Managing Your Site
- Inserting Text, Images, and Links onto your site
- Using Tables and Layers
- Creating Second Pages
- Publishing Pages
Activating your WFU Home Page
Before using Dreamweaver to edit your Wake Forest web page, it is necessary to activate your WFU home page.
- Go to http://users.wfu.edu/update.html
- Login with your WFU login and password
- Click the radio button for Create a Wake Forest Home Page
- Click Continue
On the next page you will see a link to your new home page or a link to your existing home page.
Once your WFU web page is activated you are ready to begin using Dreamweaver CS4 to edit the site.
To begin, open Adobe Dreamweaver CS4 from the Start Menu either in Programs or in WFU Internet Tools.
Site Management
The site management tool in Dreamweaver has been preconfigured for editing a WFU home page. It allows the user to store and edit a web site on the local hard drive in the Userdata folder, then publish it up to the web once it is complete. In the Designer view, the site management tool can be found on the right side of the workspace in the Files Panel.
The Remote view shows the files on the WFU web server. The Local view shows the files on your hard drive:
C:\\Users\WFUT4002009\Documents\HTML\www-home)
***Note, this destination is for Windows Vista users only!!!***
To begin editing, make sure your folder is set on WFU (acfiles) on campus, click on the Remote View, select the entire \\acfiles\www-home\ folder, and select the DOWN arrow to “get” the files – This action will put your website in the Local View. Double-Click on the index.html and your blank web page will appear.
Inserting and Formatting Text
The Properties Inspector at the bottom of the workspace allows for the formatting of text. Changes to font, font size, color, etc. can all be made using the Properties Inspector.
Issues when Formatting Text
- Format styles appear in six sizes, listed as Heading 1 through 6 from large to small, the opposite of font size. Additionally options for preformatted text and paragraph style are here.
- Click the Page Properties button to reveal more formatting options
- Font size is either numerical or Web Relative as shown below.
- Remember fonts on your computer may not be on the computer of the person viewing your page, so stick to the basic fonts such as Helvetica and Times New Roman.
Cascading Style Sheets (CSS)
Cascading style sheets give Web site developers more control over how pages are displayed and allow for the separation of presentation and content. Ideally cascading style sheets are used as the primary method of formatting web pages. The style sheet containing all the formatting information is linked to the web page containing the content. Cascading style sheets are covered in more advanced Dreamweaver classes. Dreamweaver contains many predefined styles.
Inserting a Hyperlink to an external site on your web page
- To insert a link to a website, open a browser and navigate to the web page.
- Highlight and copy the URL.
- In the Link field on the Properties toolbar paste the URL. (or type the URL if you prefer.)
- Remember to include the http:// before the link.
Inserting Images on your web page
Various issues regarding the use of images on a web page are discussed below. Before inserting an image into a web page, the user must store that image file in the HTML folder in Userdata.
Saving an Image from the web
- Right-click on the image and select Save Image As
- Save the image in C:\\Users\WFUT4002009\Documents\HTML\www-home\images (for Windows Vista Users Only)
- Avoid spaces, special characters and capitalization in file names.
Supported File Types
- Files need to be in the .gif, .jpg, or .png file formats
- Other file formats such as .tif, and .bmp can be converted using Microsoft Photo Editor.
- To convert an image, open the image in Microsoft Office Picture Manager, go to the File menu and select Save As
- Click the pulldown for Save File as Type and pick the appropriate file format.(.gif-best for line drawings, icons, .jpg-best for photos, or .png-a replacement for .gif)
How to Insert Image
- Click on the Insert menu and select Image.
- Navigate to the location where the image is stored on your computer
- Click OK
- Be sure to insert text in the Alternative Text field. The Alternative Text field will be at the top of the box that appears when the image is selected. “ALT tags,” as they are sometimes called, make your site more accessible to visually impaired people using text readers.
Testing your web page
To see what your web page will look like and to test links and images before publishing, click the F12 button on the keyboard to preview the page in a web browser and test the images and links.
Copyright Concerns
- Images and content found on the web are copyrighted unless otherwise specified.
- Permission should be sought from the copyright holder prior to using copyrighted content.
WFU home page requirements
- Personal web pages should not contain images, logos, graphics or text from the Wake Forest University home page or other official pages. Students, faculty and staff maintaining personal web pages, including student organization sites, should refer to the guide on Maintaining Personal Web Pages http://www.wfu.edu/help/web-guide/users.html
- As a non-profit institution, WFU web pages cannot be used for commercial use or link to the sales pages of other sites.
Resources for scanning, digital photography, and digital video
The Information Technology Center on the second floor of the Wilson wing of the ZSR Library offers flatbed scanners to scan photos in the multimedia lab and digital cameras for checkout on a first come first serve basis to students, faculty and staff.
Page Properties
Click the Page Properties button in the Property Inspector to access the Title and Encoding option.
Title/Encoding
An HTML Title describes the contents of your web page in one phrase. It’s likely to appear in search engines’ results and in bookmarks. It’s also the first thing a search engine’s spider sees on your page.
Inserting and Editing a Menu Bar
-
To Insert the Spry Menu Bar, click on Insert>Spry>Spry Menu Bar
-
A menu will appear asking whether you prefer a Horizontal or Vertical Menu Bar on your web page
-
The Menu Bar will now appear on your screen. To Edit the Menu Bar, click on the blue-colored tab at the top of the table and the Properties menu will appear at the bottom of your screen
Using Table and Layers
Tables are used to arrange cells and data into columns and rows and for design layout. Layers are another option for design layout. In Dreamweaver, layers are used to position other objects such as images, text, and tables.
Inserting a Table
- Click on the Insert menu and select Table
- Insert the number of rows and columns and the width and border size. (These settings can all be changed later). Header rows and columns can also be selected and text in the header appears as bold and centered.
- Click OK
Inserting a Layer
- Click on the Insert menu and select Layer Objects > AP Div
- Click, hold and drag the cursor across the area on the screen where you want the layer to appear.
- Add content inside the layer.
Creating a Second Page
At some point, users have more content than will fit on a page, or they begin to wish to organize content on individual pages. For example, one can create a resumé page called resume.htm and link to that page from a hyperlink on index.html. (NOTE: Web pages can end in either .html or .htm).
To create a new page:
- Click on the File menu and click New
- In the window that appears, click the category Blank Page and HTML
- Add content to this page, including the title field!
- Save this page in C:\\Users\WFUT4002009\Documents\HTML\www-home (for Windows Vista users only) or where the local copy of your web page is stored.
To create a link to a new page from the index.html
- Highlight the text for the link in the index.html page
- Click on the Point to File button in the Property Inspector.
- Drag the arrow to the file in the File panel in the Panel groups.
Publishing Pages
Before your changes can be seen on the web, all the files must be published to the web server. Every time a file is changed it must again be published to the web server.
To publish a page
- Click on the name of the page/file under Local Files
- Click the Up arrow in the button bar.
- Once this is complete, use a web browser to go to http://www.wfu.edu/~yourlogin and see the changes.
