by Penny Angeles-Tan | Sep 20, 2016 | Health Tips
A healthy mind is an essential component of a healthy lifestyle. It affects how you perceive the world and how you react to your environment and the people around you. In order to function normally and accomplish your daily tasks and goals in life, it’s important to keep your brain and mental well-being healthy.
“Healthy brain and mental functioning can be cultivated. In the same way that eating nutritious food and exercising can make your body stronger and more fit, certain habits and activities can also boost your brain power and mental well-being,” says Dr. Nicky Montoya, president and CEO of MediCard Philippines.
To improve brain and mental health, Dr. Montoya offers some tips:
Get enough sleep.
Sleep helps your brain and body work properly. While you’re sleeping, your brain is forming new pathways to help you learn and remember information.
Deep sleep also promotes normal growth in children and teens. It also boosts muscle mass and helps repair cells and tissues in children, teens and adults.
Drink plenty of water.
It is important for the brain to be adequately hydrated to function properly. Your brain cells require a delicate balance of water and various elements to operate efficiently. When you’re dehydrated, your brain has to work a lot harder to perform at the same level.
Drinking water also helps you feel refreshed, which may improve your state of mind. It can also prevent headaches and hangovers.
Get moving.
Exercise releases endorphins, which are essential for producing good moods. Working out also keeps your brain and vital organs healthy. It also improves your body image and keeps you motivated to conquer challenges and pursue your goals.
Learn a new skill and play brainteasers.
Learning a new skill and playing brainteasers can keep your brain sharp. When you learn a new skill, your brain creates new neural pathways that help you process and remember information better. Meanwhile, brainteasers and games that require you to decipher codes and pattern series, remember events and rationalize your answers can also enhance your problem-solving skills, logical reasoning, creativity, and imagination.
Communicate with other people.
Regularly talking and socializing with other people can boost your communication skills and improve your decision-making and problem-solving abilities. It is also a way to avoid depression and negative thoughts, which can interfere with your daily activities.
Practice meditation.
Meditation, which involves focusing your thoughts on the present moment, provides cognitive and psychological benefits. Aside from giving a sense of peacefulness and physical relaxation, it can also improve memory, empathy and sense of self. Harvard researchers discovered that practicing mindfulness increases the amount of grey matter in the hippocampus, which helps with self-awareness, compassion, and introspection, and lowers grey matter density in the amygdala, which helps manage anxiety and stress.
Since meditation is a big component of Ashtanga yoga, attending yoga classes can also be good for your mental well-being.

Dr. Nicky Montoya
President of Medicard Philippines
“The best thing about the human brain is that it adapts and re-wires itself as a result of behavioral changes. There are a lot of ways you can do to get the best out of your brain cells. One of the most effective ways is, of course, letting go of unhealthy habits and embracing a healthy lifestyle,” says Dr. Montoya.
The MediCard Lifestyle Center in Makati offers quality medical and specialty services, including nutrition counseling, diet management, and yoga classes. For more information, call (02) 878-5101or visit http://mlc.medicardphils.com.
by Penny Angeles-Tan | Sep 2, 2016 | Health Tips
As we get older it becomes more and more difficult to lose weight. It often feels as if we are constantly losing the battle of the bulge – especially once we hit our 40s and our metabolisms become slower and slower and slower. More than a few just give up and accept their “more curvaceous” selves.
Despite our best intentions we just can’t seem to lose weight. Perhaps at this point it is our mindset that is holding us back. In this day and age, when there’s a plethora of unhealthy food to consume and unhealthy lifestyle choices to make, it can be difficult to follow a diet program. But if we have the right attitude to lose weight and maintain our ideal weight, nothing is impossible.


Sheryl Garcia, who weighed 152 lbs., reached her healthy weight of 112 lbs. in just six months.

Francis Salazar started the program in 2011 weighing 325 lbs., and in eight months, he lost 153 lbs.
Sheryl Ehmene Uy-Garcia and Francis Salazar, two Cohen’s Lifestyle Program graduates who have maintained their healthy weight for more than three years, can attest to the effectiveness of conditioning one’s mind to lose weight.
Before adapting their new mindset, Uy-Garcia, an advertising sales unit head in her mid-30s, and Francis Salazar, a technology consultant, both suffered from asthma and obesity.
They turned to the Cohen Lifestyle Program, a rapid weight-loss, and wellness program through nutrition. Salazar started the program in 2011 weighing 325 lbs., and in eight months, he lost 153 lbs. Garcia, who weighed 152 lbs., reached her healthy weight of 112 lbs. in just six months.
Salazar and Garcia share the following “mental diet” tips that they learned from joining the program:
Assess your relationship with food.
Before you can effectively lose weight, you have to understand and deal with the root cause of your problem first –your relationship with food. The two Cohen clients reveal that they were emotional eaters before trying the program. Salazar shares, “I ate when I was happy; I ate when I was sad.” It’s important to be aware of why you may overeat and to stop feeding your emotion in order to successfully maintain your ideal weight.
Always remember your weight-loss motivation.
Losing weight can be difficult, but it doesn’t have to be, especially when you focus on why you want to lose weight. “During one of my monthly ER visits, the doctor warned me that my asthma was fatal and I would expire early if I didn’t take care of myself. I enrolled in the Cohen’s Lifestyle Program because their approach is very personal. They made me focus on my ‘why’ – to live longer for my husband and kids,” shares Garcia.
As for Salazar, his family’s medical history compelled him to finally say goodbye to obesity. “A couple of my uncles died due to diabetes and stroke, and my mom knows that my current situation is a ‘ticking time bomb.’”
Have a support system.
There may have been times when you wanted to give up, but with the help and support of your family, you can push through with your weight-loss journey and reach your goal.
Garcia and Salazar stayed committed to the Cohen Lifestyle Program with the help of their families. “A key factor that helped me stay committed to the program is my supportive husband who encouraged and cooked for me whenever he could,” shares Garcia.
In addition to family support, it is also important to have the support of others who understand what you are going through and are supportive of your desire to lose weight and be healthier. Cohen Consultants often meet with their clients, such as Francis and Sheryl, to help them on their weight-loss journey.
Set realistic expectations.
Weight loss doesn’t happen overnight. You have to work for it, including sacrificing some indulgences. “Before Cohen, I only ate pork, rice and soda, no vegetables and fruits, but now, my plate always has salad with protein,” Garcia shares.
Sometimes no matter how hard you try to stick to your diet program, setbacks happen which can slow down your weight-loss progress or even increase your weight. The most important thing is you do not completely let go of your goal and you get back on track with your weight-loss program as soon as possible. Before you know it, you can reach your goal.
Salazar says, “Now that I no longer need to lose more weight, it is okay to indulge once in a while, but not overindulge. It’s okay to enjoy food. We eat to live, not live to eat.”
Change your perspective on food and diet.
Your mindset on food and diet is an essential factor in losing and maintaining weight safely and effectively. Salazar shares, “I learned that food is not supposed to run my life. That food is there for nourishment, but not to control me. I learned to be a more moderate and responsible eater.”
Garcia reveals, “It’s time to think of my family, not just my comfort. I eat to survive and only occasionally, eat to enjoy. Cohen teaches the discipline and the tools on how to make the right food choices, and I haven’t had any asthma attacks from the first day I started the program!”
To know more about Cohen’s Lifestyle Program, visit www.CohenLifestyle.com.ph, or visit http://www.facebook.com/CohenLifestylePhil on Facebook and http://instagram.com/cohenlifestyleph on Instagram.
If cooking is not your thing and you are more of a delivery kinda guy or gal then check out this post on Cohen’s Meals on Wheels … healthy food delivered right at your doorstep.
by Penny Angeles-Tan | Aug 8, 2016 | Tech Tutorials
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.
by Penny Angeles-Tan | Jul 30, 2016 | Tech Tutorials
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:
[pastacode lang=”css” manual=”%2F*%20GRID%20LAYOUT%20*%2F%0A.col1%2C%20.col2%2C%20.col3%2C%20.col4%2C%20.col5%2C%20.col6%2C%20.col7%2C%20.col8%2C%20.col9%2C%20.col10%2C%20.col11%2C%20.col12%20%7B%0A%20%20%09margin%3A%20%201.0416666667%25%3B%0A%7D%0A.col1%20%7B%0A%20%20%09width%3A%206.25%25%3B%0A%7D%0A.col2%20%7B%0A%20%20%09width%3A%2014.5833333333%25%3B%0A%7D%0A.col3%20%7B%0A%20%20%09width%3A%2022.9166666667%25%3B%0A%7D%0A.col4%20%7B%0A%20%20%09width%3A%2031.25%25%3B%0A%7D%0A.col5%20%7B%0A%20%20%09width%3A%2039.5833333333%25%3B%0A%7D%0A.col6%20%7B%0A%20%20%09width%3A%2047.9166666667%25%3B%0A%7D%0A.col7%20%7B%0A%20%20%09width%3A%2056.25%25%3B%0A%7D%0A.col8%20%7B%0A%20%20%09width%3A%2064.5833333333%25%3B%0A%7D%0A.col9%20%7B%0A%20%20%09width%3A%2072.9166666667%25%3B%0A%7D%0A.col10%20%7B%0A%20%20%09width%3A%2081.25%25%3B%0A%7D%0A.col11%20%7B%0A%20%20%09width%3A%2089.5833333333%25%3B%0A%7D%0A.col12%20%7B%0A%20%20%09width%3A%2097.9166666667%25%3B%0A%7D%0A” message=”fluid-css” highlight=”” provider=”manual”/]
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:
[pastacode lang=”markup” manual=”%3Chead%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col1%22%3ESPAN1%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col2%22%3ESPAN2%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col3%22%3ESPAN3%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col4%22%3ESPAN4%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col5%22%3ESPAN5%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%3Cdiv%20class%3D%22col6%22%3ESPAN6%3E%3C%2Fdiv%3E%0A%3C%2Fbody%3E” message=”” highlight=”” provider=”manual”/]
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.
Simple, right?
As for the CSS, it will look like this:
[pastacode lang=”css” manual=”.offset1%20%7B%0A%09margin-left%3A%208.3333333%25%3B%0A%7D%0A.offset2%20%7B%0A%09margin-left%3A%2016.6666667%25%3B%0A%7D%0A.offset3%20%7B%0A%09margin-left%3A%2025%25%3B%0A%7D%0A.offset4%20%7B%0A%09margin-left%3A%2033.3333333%25%3B%0A%7D%0A.offset5%20%7B%0A%09margin-left%3A%2041.6666667%25%3B%0A%7D%0A.offset6%20%7B%0A%09margin-left%3A%2050%25%3B%0A%7D%0A.offset7%20%7B%0A%09margin-left%3A%2058.3333333%25%3B%0A%7D%0A.offset8%20%7B%0A%09margin-left%3A%2066.6666667%25%3B%0A%7D%0A.offset9%20%7B%0A%09margin-left%3A%2075%25%3B%0A%7D%0A.offset10%20%7B%0A%09margin-left%3A%2083.3333333%25%3B%0A%7D%0A.offset11%20%7B%0A%09margin-left%3A%2091.6666667%25%3B%0A%7D%0A.offset12%20%7B%0A%09margin-left%3A%20100%25%3B%0A%7D” message=”offset” highlight=”” provider=”manual”/]
Just as with the grid layout we designated these as classes because the premise is, we will most likely be using them several times on a page.
Is it possible to use the grid layout and the offset at the same time?
Absolutely! It all depends on your design needs. In the meantime, have fun experimenting with your web layout while using these. 🙂
by Penny Angeles-Tan | Jul 24, 2016 | Tech Tutorials
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. 🙂
by Penny Angeles-Tan | Jul 23, 2016 | Tech Tutorials

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.