ECS Template Using Dreamweaver

Version 1.0 May 18, 2011

i

Table of Contents 1

Getting Started........................................................................................................................ 4

2

The Banner .............................................................................................................................. 5

3

Site Navigation ........................................................................................................................ 6

4

Main Body Editing ................................................................................................................... 7

5

Miscellaneous Items for Code View ....................................................................................... 8

6

5.1

Links .................................................................................................................................. 8

5.2

Pictures ............................................................................................................................. 8

FTP ........................................................................................................................................... 9 6.1

WinSCP ............................................................................................................................. 9

6.2

My Web Space On Gaia .................................................................................................. 13

Contact Information...................................................................................................................... 14

ii

List of Tables Table 1: Revision history ............................................................................................................... 14 Table 2: Contact information ........................................................................................................ 14

iii

List of Figures Figure 1: Dreamweaver Interface ................................................................................................... 4 Figure 2: Buttons ............................................................................................................................. 4 Figure 3: My Department Banner ................................................................................................... 6 Figure 4: Navigation Code ............................................................................................................... 6 Figure 5: Main Body ........................................................................................................................ 7 Figure 6: WinSCP Login ................................................................................................................... 9 Figure 7: WinSCP Window ............................................................................................................ 10 Figure 8: Transfer Settings ............................................................................................................ 10 Figure 9: Set Permissions .............................................................................................................. 11 Figure 10: Permissions .................................................................................................................. 12 Figure 11: My Web Space On Gaia ............................................................................................... 13

ECS Template Using Dreamweaver

1 Getting Started When you receive the file for the template, the first thing you’re going to need to do is to unzip the file. After unzipping the file, you’re free to open it. You’ll open the file named Index.dwt and Dreamweaver should start and open the file. Once it is open you should see a screenshot like the one below (Figure 1).

Figure 1: Dreamweaver Interface

You’ll notice that there are four views to choose from: the design view, the code view, a split of both, or a live view of what the website should look like. To switch between the four views simply click between the tabs at the top of the screen, shown above and below (Figure 1 & Figure 2). Figure 2: Buttons

As you work on your website, navigating between the views is going to be crucial in the editing process as you will find that some things are easier to do with certain views. Most of the editing will take place in the code portion of the view, but clicking on something in the design view will take you to that part of the code view, so it can be easier to find the codes. Live view

5/18/2011

Page 4

ECS Template Using Dreamweaver shows you what the website should look like with the given code. I use mostly split view when I am editing the website.

2 The Banner One of the first things you’re going to need to address is the Department Banner at the very top of the screen. Whether you want the banner or not is entirely up to you. Editing the banner is one of the more difficult tasks since it’s not something you can do in Dreamweaver. You are going to need some sort of picture editing software in order to either modify or create a new banner. Paint is a free program used for picture editing and will do just fine for this purpose. The only difficulty with Paint is that it doesn’t deal with gradients very well. So, in order to erase the words “Department Banner” in paint, you will need to use the dropper tool

to

acquire colors from other colors that have already been laid down. Use the dropper tool on the dark green side of the banner to acquire the correct shade of green, and use the brush tool to paint the green over the words “Department Banner.” Be very careful because there is a gradient behind the words, so if you cover too much it will be noticeable on the gradient. Once that is done you can go ahead and use the Text tool

to place whatever you’d like for

the banner. If you’d like a smoother banner, then I would suggest using a different picture-editing program such as Adobe Photoshop. Adobe Photoshop can’t edit the gradient or the words directly, but you can make your own banner rather quickly. Simply open the banner in Photoshop and use the dropper tool to acquire the correct shade of green, then delete the banner and use the gradient tool

with the green to edit the preexisting default gradient to one that looks

similar to the gradient on the template banner. After you have your gradient, then create a new layer for the text. Lay your text down, and in Photoshop there is much more text editing options available to you than Paint. For my banner I put a white text in Times New Roman with a simple pillow bevel. My gradient was green fading to white like the one on the template (Figure 3).

5/18/2011

Page 5

ECS Template Using Dreamweaver

Figure 3: My Department Banner

3 Site Navigation

Fold out menu

Pound symbols

Link text

Figure 4: Navigation Code

There are a few things to notice about the code for the site navigation in Figure 4. First there are blue pound symbols, #, where the links should be. This makes editing the navigation menu much easier as the code has already been typed out for you. Start by replacing the pound symbol, with the full address of the website you would like that link on the navigation menu to go to. Next to the link after the greater than sign, >, is the text that the link will have on the website. On the template they are given generic names like Form or Sub menu. Notice that certain parts of the menu have fold out menu items that you can click to open or close. “Link,” is the code for the fold out menu. If you put a link instead of that pound symbol, clicking on it will open to the new page rather than folding out the sub menu, so you might want to leave those ones as pound symbols. You can delete menu items if there are more than your website needs, or if you don’t want the drop 5/18/2011

Page 6

ECS Template Using Dreamweaver down menus then you can create the links above the ones that fold out. You can see how they fold out in the live view.

4 Main Body Editing Now that you have a Department Banner and Navigation for your site, you can begin editing the main body of your website, as shown in Figure 5.

Figure 5: Main Body The main body of the template is split into three sections and each of those sections are surrounded by a blue line, and topped with a little blue box that has the title of the section on it. If you click the little blue box, it will select the entire section in both the design and the code. This is useful if there are more sections than you need, because it makes it really easy to delete entire sections. As for actually editing the body of text on your website I would suggest editing the code rather than trying to mess with design, because Dreamweaver ends up adding a lot of unnecessary code when you do that. You can see in the code where the words that go on your page are. Headings start their code with an h and then the number of type of heading it is, and the bigger number counter intuitively means a smaller header. is the biggest, is a little smaller, etc. Directly after the opening tag, you will see the text that goes up onto your website. You can change this text or remove it at your leisure. Regular text paragraphs begin with a and you can bold certain words if you like with a , but don’t forget to close 5/18/2011

Page 7

ECS Template Using Dreamweaver the tag with a at the end of the words. All code has opening tags, such as , and closing tags, such as . Don’t forget your closing tags!

5 Miscellaneous Items for Code View 5.1 Links To start a link from scratch you will start with “”. Then follow that with the clickable name of your link. Finish the code with a closing tag “” to complete the link. A link that goes to the ecs homepage called ECS Hompage would look like this: ECS Homepage

5.2 Pictures To put a picture on your website, you will start the code with “”. Pictures are a little different than other things in code because the closing tag is part of the opening tag. The code for the picture stands alone so you don’t need a . The default image code for the template banner is:

5/18/2011

Page 8

ECS Template Using Dreamweaver

6 FTP Once you have your finished website, there are a few different ways to go about putting it online. If you are working from a laptop then you are going to need to use an FTP program to transfer the files to your account. FTP stands for file transfer protocol, and just like its name, it’s a way of transferring files from your computer to another computer or server. However the campus requires that you use a secure FTP or SFTP. In the labs we use WinSCP, which is easy to use and can be downloaded for free at: http://winscp.net/eng/index.php.

6.1 WinSCP If you built your website from a home computer or laptop you are going to need to SFTP your files to the ECS server. When you open WinSCP it will ask you for the host name, username, and password. The host name is “gaia.ecs.csus.edu” and your ECS account username and password that is used when you log into the portal on the ECS website will be necessary to continue. As shown below in Figure 6.

Figure 6: WinSCP Login

5/18/2011

Page 9

ECS Template Using Dreamweaver Once you are logged in, you will see your ECS account on the right, and the computer you are on to your left. As shown below in Figure 7.

Figure 7: WinSCP Window

In your account you should see a folder named html. This folder has all your website information contained in it. All ECS accounts come with a default website stored in the html directory. A simple drag and drop will initiate the transfer process and ask if you would like to copy the selected file to the selected destination. Before you click copy you will need to click on the Transfer settings button. It will drop another menu down and you will need to click Configure. As shown below in Figure 8.

Figure 8: Transfer Settings

5/18/2011

Page 10

ECS Template Using Dreamweaver This will open the preferences menu for the transfer settings, click on the word Transfer on the column of menu items on the left. There should be a check box titled Set permissions; check that box, and click the small button to configure permissions. As shown below in Figure 9.

Figure 9: Set Permissions

This is where you will set the permissions for the files that you will be putting up on your website. Permissions are important because it sets limitations on the files. There are three different possible permissions that can be set on a file, and there are three different entities for which you can set different permissions. First there are read permissions which determines if it can be opened, then there are write permissions which determines if it can be edited, and finally there are execute permissions which determines if it can be accessed. Execute permissions typically only affect folders and whether or not they may be opened. There are three different types of entities that will be accessing your site, and you will need to set the permissions accordingly. First there is owner, then group, and then others. The owner entity is limited to only yourself, and you will most often want to have full permissions to your files. The group entity is a collection of user accounts that are put in a group. If you are in the group, then everyone else in the group is the group entity. Groups can range from just you to a student group that has everyone in your major in it. Sometimes you can be in more groups than you 5/18/2011

Page 11

ECS Template Using Dreamweaver know about so it can be better to be cautious when setting this permission. The others entity is everyone else that accesses your website. When setting permissions you can set read, write, or execute for any of the three entities mentioned above. The default permission for files is read, write, and execute for owner only. You will want to add read and execute permissions to group and other. The octal is a short form of writing the permissions. Read is 4, write is 2, and execute is 1, and you add up the numbers of the permissions you set. For the owner: 4+2+1=7, and for others: 4+1=5. The values are displayed in order: owner, group, and other: 755. If you added write permission to group, it would then be 775. The standard for most web files is 755, as shown below in Figure 10.

Figure 10: Permissions

It is important to transfer the files and folders that consist of the website. Make sure your files are organized the same on the web server as they are on your home computer or hyperlinks may not work and images may not display properly. Once you transfer your html file with its accompanying files, then your website should be complete and online for you to view. Most ECS websites follow the same pattern. Your website is likely 5/18/2011

Page 12

ECS Template Using Dreamweaver “http://gaia.ecs.csus.edu/~” just replace with your ECS account username.

6.2 My Web Space On Gaia FTP is a great way to transfer files from one location to another, and if you are loading your website onto your own personal account folder then there is another way to change permissions and transfer files to your account at the same time. You will notice on every ECS user account desktop there are two folders, one says My Home Space on Gaia and the other says My Web Space on Gaia. On Gaia, everyone has their personal folder to store information, and within that folder is an html folder for your website files. If you copy something to My Home Space on Gaia, then that file will be copied to your account folder with regular permissions for yourself, and no one else. However, if you copy something to My Web Space on Gaia then the file will be copied to your html folder within your account folder and all files copied through this path will be set with 755 permissions. This is useful if you built your website from an ECS lab computer. You can just click and drag into the web folder and have your permissions set for you. This can also be useful at home if you don’t want to go through the hassle of FTP, you can just put your website in a folder on a flash drive and then bring it into the lab, click and drag into the web space, and you’re done, as shown below in Figure 11.

Figure 11: My Web Space On Gaia

5/18/2011

Page 13

ECS Template Using Dreamweaver Revision History Table 1: Revision history

Version No.

Author

Date

Revision Comments

Reviewer

0.1

Dishon Johnson

3-9-2011

Getting started…

Derek Cuffe

0.2

Dishon Johnson

3-14-2011

added information

Tou Xiong

0.3

Dishon Johnson

3-16-2011

Updated information

Lynne Onitsuka

0.31

Lynne Onitsuka

3-22-2011

Added Comments

0.4

Dishon Johnson

3-30-2011

Fixed Errors

0.5

Dishon Johnson

4-13-2011

Added FTP Section

0.6

Dishon Johnson

4-20-2011

Edited FTP

0.7

Dishon Johnson

4-22-2011

Rewrote FTP Section

0.8

Dishon Johnson

4-27-2011

Added Pictures

0.9

Dishon Johnson

5-4-2011

Cross referenced, and added 6.2

.10

Dishon Johnson

5-13-2011

Fixed Errors

.11

Dishon Johnson

5-16-2011

Final touches

1.0

Dishon Johnson

5-18-2011

Finished

Contact Information Table 2: Contact information

Name

Role

Email

Dishon Johnson

Creator

[email protected]

5/18/2011

Page 14