There are two easy ways to upload web files to your hosting server: via FTP (which I discussed in a previous post) and via cpanel. From personal experience, FTP is still the most efficient way but there are times when FTP fails (such as when the internet servers where you are at have blocked FTP). This leaves us with one alternative … CPANEL.
Note: With both FTP and cPanel you need to be online to be able to access your hosting server.
Here are the steps to uploading web files via cpanel
Go to your File Explorer (on Windows) or Finder (on Mac) and make sure you are at the folder containing your web files.
Select the files you want to upload and compress them into a zip file.
If you are only uploading one file then there is no need to compress.
If you are uploading a folder then you need to compress the entire folder, not just its content.
Open your web browser.
Go to yourdomain/cpanel (ex. www.slvrdlphn.com/cpanel) or, alternately you can go to yourdomain:2083 (ex. www.slvrdlphn.com:2083). This may lead you to a page that will ask you if you are behind a firewall or not. In most cases you can just wait and it will bring you to the login page.
In the boxes provided input your username and password. These credentials should have been emailed to you by your hosting provider.
Click on Log In. If your credentials are correct you will see LOGIN SUCCESSFUL appear on top of the cPanel word in the screen and it will open your cPanel.
Click on File Manager.
Once File Manager is open double click on public_html. This is where ALL web files are supposed to go.
If you are opening this for the first time it will look like this:
Click on UPLOAD on the menu bar on top. Select the file you want to upload to “/home/name of server/public_html” (ex. /home/slvrdlphn/public_html).
Once the upload reaches 100% you can click on GO BACK located at the bottom and public_html will look like this:
Click ONCE on the zipped file. Note, you are just want to select the file, not open it. Once selected the file will turn blue to indicate it is selected.
Click on EXTRACT on the toolbar. In the box, make sure that the path says public_html. If you extract your files here it will place the web files in the root folder. If your web content is supposed to be in a subfolder then type that path. For example, if your project is called “hotel” and it is supposed to be in a subfolder then your path should be public_html/hotel. Click on EXTRACT FILE.
Once successful it will display the extraction results. Click on CLOSE.
All that is left is to delete the zipped file and you’re done!
Filezilla is a very useful web tool that I have found is often taken for granted. Filezilla is an FTP software used generally for uploading and downloading web files. It uses the same credentials as cPanel to login and, in my personal opinion, is easier to use and just takes a moment to set up.
When you are on a public terminal such as at an internet cafe it is always best to just use the QUICKCONNECT option. Quickconnect does not save usernames and passwords which makes it ideal in this scenario.
Fill it in as follows:
HOST: ftp.yourdomain.extension (type FTP followed by your domain)
USERNAME: type in the username provided by your hosting provider.
PASSWORD: type in the password provided by your hosting provider
Your username and password are the same as those you use to login to your hosting site’s cPanel. Now Click CONNECT.
Look at the transfer window and wait for it to say STATUS: DIRECTORY LISTING SUCCESSFUL.
Setting up Filezilla on a private computer
If you are working from your own computer it is advisable to just set it up so that you don’t have to type everything again each time you need to access your server. What do you need to do?
Click on the SITE MANAGER icon on the toolbar or go to File > Site Manager or … just press CTRL+S. This will open the Site Manager.
Once there click on NEW SITE and customize it.
In the GENERAL tab:
input your host
change logon type to normal
type in your username
type in your password.
Go to he ADVANCED tab:
In default local directory point it to the folder of your website
In the default remote directory point it to public_html
CONNECT.
Look at the transfer window and wait for it to say STATUS: DIRECTORY LISTING SUCCESSFUL.
Uploading your site or part of your site to your server
On the left you will see the window for the local site, clickthrough until you reach the folder that contains your web project.
Click on the file/s or folder/s you want to upload.
On the right go to PUBLIC_HTML … this is where you will upload your website.
When uploading for the first time simply right-click the folder of your website then click on UPLOAD SITE.
And you’re done!
Downloading your site or part of your site to your server
When downloading from your server do it in reverse.
On the remote server on your right make sure you are in PUBLIC_HTML.
On the left (the local site) make sure you are in the folder containing the folder of your website (if you want to download the entire site) or within the website folder (if you want to download parts of the site only).
And that’s it! It’s that easy! The only thing left to do is monitor the transfers window in case there are any failed transfers so you could process them again.
The favicon is, perhaps, one of the most neglected web element by most students learning how to design/develop websites. I guess the first thing we need to do is define what a favicon is. When there is no favicon all we see on the browser tab is a file icon.
What is a favicon?
In simple terms it is that tiny icon you see on the tab of your browser when you visit a website. It is the logo of your site but in a very small format. Here on my site it looks like this. See how tiny it is? But how do we make such a tiny image?
What is the file extension of a favicon?
Once upon a time the only extension to identify a graphic as a favicon was .ico. Nowadays, though, we can also use .png.
How do we make/create a favicon?
There are many online apps available that you could use to make a favicon but you don’t really need any of them so long as you have a graphic software installed in your computer such as Adobe Photoshop.
Here are my recommendations on how to make/create a favicon:
Make sure your image is a square.
Start with a large image. Even though your final output is small there is no need to design small. It is easy enough to make it small later. At the very least I would say 100×100. Personally I usually start at 144×144 or 300×300.
Keep in mind that the favicon includes the ENTIRE image, including the space you put between the icon itself and the edges. Therefore, maximize the space. To illustrate, I have placed a border around my image. In actual execution there is no border.
Once you’ve completed the design for your favicon go to FILE > EXPORT > Save for Web (legacy).
On the upper right choose PNG-24.
On the dimensions below change your height or width to either 16×16 or 25×25. Click on SAVE.
Save the file to the root folder of your website with the filename favicon.png. If you prefer to use a .ico file then you can just change the file extension from the Finder (on Mac) or File Explorer (on Windows).
It’s that simple! So simple you really shouldn’t forget to do it. 🙂 If you have any further questions on the topic feel free to leave me a message below.
In the 90s we designed websites with tables. It was chunky but as web layout tools go it worked. It helped in making sure that all the elements of the website were organized. Today tables are still in use but not as a layout tool for websites. Tables are usually used for organizing tabular data instead … which is what it was created for in the first place.
The trend now, in web design, is to create web layouts with the use of a GRID.
Grid layout
A grid supports arranging views into rows and columns. Rows and columns can be set to have proportional sizes or absolute sizes. The Grid layout should not be confused with traditional tables and is not intended to present tabular data. The grid does not have the concept of the row, column, or cell formatting. Unlike HTML tables, Grid is purely intended for laying out content. (original source: Xamarin.com)
Think of a web page as a pie and each slice of a pie is the specific content of your website. It could be an image, a video, or text content. It could be a map or even an ad. Whatever it is, at the end of the day, we assign a size to this element and we also assign a place for it on our page.
How do we create a grid?
There are two ways to create a grid … fixed measurements like pixels (px) and variable measurements like percent (%). Let’s take a look at the table below.
Col or span
Width (px)
Width (%)
Gutter (px)
Gutter (%)
Offset
Margin-left
1
30
6.25%
10
1.0416666667%
1
8.3333333%
2
140
14.5833333333%
10
1.0416666667%
2
16.6666667%
3
220
22.9166666667%
10
1.0416666667%
3
25%
4
300
31.25%
10
1.0416666667%
4
33.3333333%
5
380
39.5833333333%
10
1.0416666667%
5
41.6666667%
6
460
47.9166666667%
10
1.0416666667%
6
50%
7
540
56.25%
10
1.0416666667%
7
58.3333333%
8
620
64.5833333333%
10
1.0416666667%
8
66.6666667%
9
700
72.9166666667%
10
1.0416666667%
9
75%
10
780
81.25%
10
1.0416666667%
10
83.3333333%
11
860
89.5833333333%
10
1.0416666667%
11
91.6666667%
12
940
97.9166666667%
10
1.0416666667%
12
100%
The left part illustrates the widths, the middle part, the gutter, and the part on the right the offset or indent.
Don’t let the math scare you! After all, we’ve already done all the computations for you. 🙂 But if you are curious about how we came up with those numbers, here is how each one was computed.
What is the basis for the maximum width? Shouldn’t it just be 100%?
It starts off with the premise that we are designing for a standard resolution of 1024×768 and that we will not be utilizing the entire screen. Therefore, 100% of the container will be 960.
Why 960?
It is the biggest number closest to 1024 which is divisible by 12.
Why is the gutter 10px (or 1.0416666667% in percent)?
In my opinion, the reason is that 10px has been an industry standard for minimum measurement since the beginning, whether it is font size or margins, or padding. Another reason though had to do with the equal distribution of elements. 🙂
Why are there 2 kinds of measurements – in pixels and percent?
Widths defined in pixels (px) are what we call fixed widths. This means that no matter what size screen (or device) is used the size will remain constant. Therefore, there may be times when an element would be too big or too small for the screen.
Widths defined in percent (%) are called variable widths. This means that the width of the element will adjust to the size of the screen or device when viewed.
How wide can an element be?
Visualize your webpage in your head. Now let’s focus on just one straight horizontal line. Now divide that line into 12 parts but put some space in between each part. Do you see it yet?
12 columns in a row
In the picture above take note of the blue border. That is what we refer to as the GUTTER. It is the designated space separating each element of your website that you will use. In the table above the gutter is equivalent to 10px (1.0416666667%).
Let’s do some math
How did we come up with those numbers? Here’s how it was computed
the grid layout
col1 (or span1)
(960/12)=80-20 (this is the gutter on the left and right side)=60;
therefore, (60/960)x100=6.25%
col2 (or span2)
col1 (or span1)x2=160-20=140;
therefore, (140/960)x100=14.5833333333%
col3 (or span3)
col1 (or span1)x3=240-20=220;
therefore, (220/960)x100=22.9166666667%
col4 (or span4)
col1 (or span1)x4=320-20=300;
therefore, (300/960)x100=31.25%
col5 (or span5)
col1 (or span1)x5=400-20=380;
therefore, (380/960)x100=39.5833333333%
col6 (or span6)
col1 (or span1)x6=480-20=460;
therefore, (460/960)x100=47.9166666667%
col7 (or span7)
col1 (or span1)x7=560-20=540;
therefore, (540/960)x100=56.25%
col8 (or span8)
col1 (or span1)x8=640-20=620;
therefore, (620/960)x100=64.5833333333%
col9 (or span9)
col1 (or span1)x9=720-20=700;
therefore, (700/960)x100=72.9166666667%
col10 (or span10)
col1 (or span1)x10=800-20=780;
therefore, (780/960)x100=81.25%
col11 (or span11)
col1 (or span1)x11=880-20=860;
therefore, (860/960)x100=89.5833333333%
col12 (or span12)
960-20=940;
therefore, (940/960)x100=97.9166666667%
The same principle applies to the gutter … (10/960)x100=1.0416666667%
Oh, headache! So much math!
Keep calm. We already did the math for you, all you need to do is apply the widths to your elements as classes. 🙂 Since these measurements are most likely to be used over and over, we will use them as classes in our CSS and will be written down like this:
In the code above I applied float: left on all the classes since float: left is usually applied to elements using this selector anyway. You can always delete it from your code or use float: none selectively.
How do we use it?
Just keep in mind one thing … the total width of 1 line (in parts). Therefore, you can keep adding div classes of different sizes (widths) until you reach 12 without going over. If you do, the last element will go to the next line. For example:
Given the sample above your HTML will look something like this:
Since 1, 2, 3, and 4 are short of making up 12, they were able to stand side by side. But with the addition of 5, it already exceeded 12, therefore, the div went to the next line.
Offset layout
Many get confused by this. What is offset in web design? Simply put, let’s call it an INDENT. According to the Oxford Dictionary indent means to … “Start (a line of text) or position (a block of text, table, etc.) further from the margin than the main part of the text.”
In other words, it is like saying you push an element in from the left side to a position you designate.
So how far can we push it? Just like in the grid layout, we can also divide this into 12 equal parts. This time, though, there is no gutter to think about and the only thing we need to think about it is the value in percent, not in pixels.
Time for some math again, just to show you how it was computed.
offset1: (1/12)*100=8.3333333%
offset2: (2/12)*100=16.6666667%
offset3: (3/12)*100=25%
offset4: (4/12)*100=33.3333333%
offset5: (5/12)*100=41.6666667%
offset6: (6/12)*100=50%
offset7: (7/12)*100=58.3333333%
offset8: (8/12)*100=66.6666667%
offset9: (9/12)*100=75%
offset10: (10/12)*100=83.3333333%
offset11: (11/12)*100=91.6666667%
offset12: (12/12)*100=100%
In plain English it means … if you want to indent an element by 8.33% then apply offset1, if you want to indent an element by 16.67% you apply offset2, if you want to indent an element by 25% then apply offset3, etc.
One of the advantages of using Adobe Dreamweaver is its template creation. While it is true that web templates could be made from scratch on notepad (on Windows), textedit (on Mac), notepad++, sublime text(which happens to be my favorite open source code editor. :D) etc. it does not offer the same ease of use that Dreamweaver does.
How are they different?
On other applications you create the code for the web template on one page then you copy and paste the code on all the pages you want the code to appear, in effect creating clones.
In Dreamweaver you create a web template file and then apply the template to all the pages you want the code to appear.
When you need to make any changes to a code that needs to appear in all pages you need to make the change on all the documents you want the code to appear in.
In Dreamweaver you make the change on the template file (*.dwt) and once you save the file it will ask you if you want to update all affected pages. You simply say YES or OK and the change is applied to all the affected pages.
But this can only happen if you edit the web template in Dreamweaver. While the dwt file is editable outside of dreamweaver any changes you make then will not affect the connected files because, well, they were not connected when you made the update.
How to create a web template on Adobe Dreamweaver CC
To be quite honest, creating a web template on Dreamweaver is simplicity itself. In my experience, the main reason why people mess it up is because:
they don’t pay attention and just click, click, click.
they’re in a hurry to get to the code, they forget about setting up the template first.
Truly, there is no need to rush because creating the template is actually a very fast process in itself. Let’s go through it now.
Set up your website first. This is a VERY IMPORTANT STEP. Not setting up your site first means compromising the integrity of your links. Once you have done so your screen will look like this. Note how the files tab now displays your website (web) in the dropdown and the local files also displays site – web. Note: On your file explorer/finder you will locate this in the my documents/documents folder
Go to File > New. This will open the New Document window. Again, allow me to reiterate that while my screencaps are those of a MacOS and the interface looks slightly different, I promise you the functions are basically the same.
Here is where there might be some difference in appearance between Mac and Windows.
On a MacOS it is as simple as making sure you are at NEW DOCUMENT then selecting HTML template then clicking CREATE.
On Windows there are more choices on the left, which could get confusing. Nevertheless, just make sure to select HTML template, also, then click on CREATE.
Note that in both cases you chose an HTML TEMPLATE. That is completely different from a regular HTML file. And you will see why and how in the succeeding screens.
Once you’ve clicked on CREATE Dreamweaver will now look something like this. If the window looks different, like it is a different color, for example, not to worry. You can change the appearance in preferences.
The next step will be to define the basic layout elements of your site in the body tag. We don’t need to put any content in, just define the elements – header, logo, nav, container, and footer.
Next we put in the editable region. This is what makes the HTML template a template. Make sure your cursor (that blinking thing that happens on the screen when you point your mouse to a specific spot) is located between the open and close div of the container. Then go to your menu bar and go to INSERT > TEMPLATES > EDITABLE REGION.
In the next dialogue box replace EDITREGION3 with the word content.
When you look at your code now it will look like this. Hey, look! You now have an editable region! 😀
Now press CTRL+S (on Windows) or COMMAND+S (on a MacOS) to save. This will open the SAVE AS TEMPLATE window. Change UNTITLED to the name of the template you want. For this exercise I will call mine template(all lowercase, please) then click on SAVE or simply press ENTER or RETURN.
In the Files tab you will notice that Dreamweaver created a Templates folder (yes, with a capital T … DO NOT RENAME IT!) and inside it is the file you just saved.
To all intents and purposes your template is complete! You just need to attach your CSS and customize it. 🙂
Setting up a website before actually starting one is a step that many people not familiar with Adobe Dreamweaver forget to do. This is also called site management.
Because I am using a Mac the screenshots I will be showing you hear are all for a Mac but, trust me, there is very little difference between the interface for Windows or Mac OS. When you open Dreamweaver for the first time it will look something like this.
If you haven’t set up your site yet then you need to set it up now. Note the Manage Sites link at the right side of the dropdown in the Files tab. This will only appear if the dropdown is in Computer or Desktop.
If you don’t see it there, no to worry, you can also click on the link found within the dropdown. Let’s click it now. This will open the Manage Sites window.
Click on NEW SITE. This will open the SITE SETUP window.
In this window you will be required to enter your sitename and the local site folder (where you will save your website on your computer).
For the purpose of this exercise let us call your site web and set your local site folder to match your sitename. By default Dreamweaver will try to save your website in your Documents folder. You should allow it to save there. At this point, you can just click on SAVE. This will bring you back to the manage sites window and will display the site you just set up. Technically your site is already ready to be used.
choose your site
But let’s go back and double click on web. This will open the site setup window again.
Setting up FTP via Adobe Dreamweaver CC
In the site setup window go to the servers tab. Click on the + sign to add a new server. This will open the BASIC SERVER SETTINGS.
How do you know what settings to put in? Check the email that your web host sent you.
SERVER NAME – this is usually the name of your site
FTP address – for most servers it is ftp.yourdomain.com(meaning ftp followed by your domain name) but you still need to check the email your web host sent you. Zoom.ph, for example, has a different FTP address
USERNAME – again, check the email your web host sent. It will be there and usually labeled cpanel/FTP username
PASSWORD – same as with the username
ROOT DIRECTORY – for most it will be public_html. For some it will be just /. Just as I mentioned above, please check the email your web host sent.
WEB URL – you can just ignore this, it doesn’t really matter.
To check if you put in the right settings click on TEST. If successful you will see this window. Only thing left is just to click on SAVE.
On the SERVER window you will now see your server. Click on SAVE again.
This will bring us back to the Manage Sites window and the cache for your site will be created.
Make sure the name of your site is highlighted in the list and just click on DONE. We’re now ready to start on the website itself using Adobe Dreamweaver CC.
You must be logged in to post a comment.