Web Design for Beginners
- Understanding of the process of creating Web pages - Ability to add text, images, links, tables to a Web page - Ability to format text, change page properties - Ability to publish Web pages using SFTP software
1. 2. 3. 4. 5. 6. Introduction Process of creating and publishing Web pages Create a Web page using Mozilla SeaMonkey Composer Use table to lay out Web page Upload Web pages to Web server using SFTP software Check your Web pages in Web browsers
1. Process of Creating and Publish Web Pages
SFTP software to upload & download files
Create and edit pages with Web page editor What we will use today: Mozilla Composer
Web Server to store and send data
Check your web pages in a Web browser
Panther @ Adelphi
2. Create a Web Page Using Mozilla SeaMonkey Composer A. Preparing a working folder for your Web site
It is always important to create a separate folder to keep all the files associated with your web page. a. Right click on your desktop b. Select New Folder c. Type the Folder Name you want
B. Start Mozilla SeaMonkey Composer
Start Composer by opening Mozilla SeaMonkey and choosing Composer from the Windows menu or by clicking the composer icon on the desktop.
C. Create a New Page and Save It
a. Click the File menu and hold the mouse arrow over New. Select Composer Page from the menu that appears.
b. Click the File menu again and select Save A window will pop up asking you to give a Title to the current page. This will be the title that appears in the blue bar at the top of the web page. The page title should be as meaningful as possible. Click OK when you finish. c. A new dialog box, prompting you for a file name, will appear. Navigate to the folder created in Part A. Type a name for the page. Naming tradition: • Name the homepage of your Web site "index.html" (without the quotes); Most web hosts expect the main page of your website to be called "index.html". • Do not use capital letters in the name. • Do not use spaces in the name. • Use “-” or “_” between words if needed. • Keep the name simple but meaningful. d. Click Save.
D. Add Text into Web Page and Format Text
a. Add text is easy; just start typing like in Microsoft Word. b. To format text, select the text you want to format, click the Format menu and choose the specific change you’d like to apply from the menu, and sub-menus.
c. You can also use the tools in the text formatting tool bar to format your text.
E. Insert Image into Your Web Page
Note: Before inserting images into your Web page, save or copy the images for your Web site into the folder you created for your Web site. a. On the menu bar, use Insert/Image. The Image Properties Window appears. b. Click on the Choose File button. The Choose Image File window opens. c. At the Look In dropdown box, find the folder created for your Web pages d. Select your image file and click the Open button. e. Click OK in the Image Properties window.
F. Create Links
1. Highlight the text you’d like to turn into a link 2. Click on the Link icon. 3. The highlighted text appears in the top box entitled “Link Text.” 4. Enter the address of the link into the second box entitled “Link Location”
For URLs: Copy the whole link from your Web browser into the box. For a File (Web page or other documents): Click Choose File and select the file in your Web folder. Check the box before “URL is relative to page location.”
G. Create Tables
1. Click the table icon or go to Insert -> Table to create a table with as many rows and columns as you need. 2. Type of the number of rows and columns you want. 3. Set the Table Width and Border. 4. Click Ok. Change Table Properties: 1. Double click in the table, the Table Properties window appears. 2. Click on the Table tab 3. You can change the width, border, rows, columns, table alignment and table background color. Create a Multiple Column Layout for your Web Page 1. Create a table with multiple columns 2. Set Border as 0 3. Double click the cell you want change the width, the Table Properties window appears. Set the Width for the table cell, click Apply to see the change, click OK to complete the change.
3. Publish Web Pages A. Using PuTTY to Set Up Your Adelphi Panther Account
1. Download and install PuTTY: http://infotech.adelphi.edu/pdfs/putty.pdf 2. Enter panther.adelphi.edu into the host name box. The port should be set to 22 Make sure the SSH option is selected under Connection type Hit the “open” button
3. Enter your eCampus universal username and password and then press ENTER
4. When you get to the COMMAND line type in goweb and press ENTER.
5. Now you will see the terms and conditions. You will have to press the space bar to get to the end of the terms. Type in YES and hit ENTER.
6. Your web folder (public_html) and your web address (URL) have been created.
B. Using FileZilla to upload files to Panther
1. If you do not see FileZilla on your desktop you will install it using these instructions: http://infotech.adelphi.edu/pdfs/filezilla.pdf 2. Logging in to Panther with FileZilla Open FileZilla Client. Click OK at the Welcome window. The client window will appear. Type in the information shown in this diagram.
Now click QuickConnect. You will see the home and personal folders.
3. Click on the plus sign next to your personal folder and you will see the public_html folder Select the public_html folder. This is the folder for all of your html files. Save all web page files and images (anything for the website) in this folder. Locate the folder containing your web files on the desktop that you have created. Choose which files you need from the left side (Local site) and drag to the right side (Remote site) in the public_html folder
4. Open your browser and review your web page by typing the URL for example: http://home.adelphi.edu/~name11223
Download Mozilla SeaMonkey http://www.mozilla.org/projects/seamonkey/ Web Style Guide - http://www.webstyleguide.com/ A comprehensive but easy-to-follow guide for Website design.