Editing other pages of a website from a Template (TIP-2)

Refer ,

• PHP-WAMP Sever
• PHP - Introduction
• PHP-Database connection and
• Creating a PHP web site - Starting from scratch (This is important for creating a website).
• SQL - Quick reference (For understanding database concept)

-------------------------------------------------------------------------------

Balance chapter from 

1. PHP : Downloading a template and editing 
2. Editing a PHP Template using Dreamweaver 
3. Editing TITLE of a template .

Hope you know the 2 STEPS A & B for editing purpose . Or , just go through Editing TITLE of a template once again .

That is , 

• STEP : A -  Open the page in Dreamweaver , to make changes in the code
• STEP : B - Now open the template (From the folder softdreambuilder) in WAMP server.(Whenever any changes u made in code, click"refresh" to view that change.

 ------------------------------------------------------------------------------------------------------------

PART - 4

Two important points you have to keep in mind. 1.      Sometimes , we can directly edit the code by clicking the design part. 2.     But sometimes , we cant edit the design directly.

I am describing this two types here. But the second one goes to the advanced section (Creating a PHP web site - Starting from scratch)

We can see that , there are 4 menus as "About" , "Contacts" ,"Skills" and "Portfolio" .And a Photo while we clicke the symbol in the centre.

We are going to redesign each one of them.

When we clcik "Add menu item" from the pop-up menu on the right side,we can add new menu items.

Now , we are going to each menu items and it editing.

1. " ABOUT " 

In the previous chapters , we downloaded a theme , change the title of the site we are going to redesign .

And selected the term " About" to make changes.

But note that , when we try to change the title of the page (Editing TITLE of a template) , we can type in the code directly , as shown below : 

But , at the same time , when we clicked the "About" page icon , we can't see any portion , which is directly editable . Just like you changed the "Title" , here , you cant change the name "About" icon .Isn't it ?

Instead , you can see , "<i class="icon-user"></i>" ( This will be describe in Introduction to Advanced Designing ).

TIP : 2 

See , I selected the "About" page icon in design view , then the corresponding code is highlighted below (line number 89).And you can understand that ,the icon cant change.

Yet , you can change the "About" field only ". click "about" and be sure that , you are clicking the term "about" only , not the details of the icon.See below : 

If you want to change this to "About us"  , change in the code as given below,

Then ,from Editing TITLE of a template  ,

• STEP : B - Now open the template (From the folder softdreambuilder) in WAMP server.(Whenever any changes u made in code, click"refresh" to view that change.

And note the output as, 

"About" is changed to "About us". 

Contents displayed in "About us" 

When we click "About us" , you can see that some default text is displaying in the right side. Click that one to get  it's code .

From the above code (line number 142,143 and 144) , you can understand that , there is no provision for changing that texts , this also  will be describe in Introduction to Advanced Designing). Remember the "Title" we edited. 

2. " CONTACTS " 

Like the "About" field, next click "Contact" from the design part of Dreamweaver , and see the corresponding code part is displaying (line number 94 to 97).

And , you can see that it also not editable (But , only the "Contact" can change to "Contact me" etc , if you want.

And at the same time , as described above, some default text is displaying in the right side of the design.

What will happen , if we click that portion ?

It is also not editable ..... !!!

Click each one separately (Contact , name, email , message and sent etc ) on the text portion which is displayed when clicking "Contacts" .And find the corresponding code part separately.

And note the difference , if there are any.

3. " SKILLS " 

Do the same as described above.

4. " PORTFOLIO " 

Do the same as described above.

5. " ADD MENU ITEM" 

Here , you can see , when clicking the PLUS (+) symbol on the left of the design portion , will open a new menu item also. 

We can change the "Add menu item" texts only , and note that , the new item name is "Other" by default. 

Too see that , go to WAMP server ,select the "index" page from our folder, and click to add a new menu item ,so that you can see the new menu icon named "other" will be there.

But where to rename this newly created menu ?

This also comes to the advanced part  Introduction to Advanced Designing .

6. " PHOTO" 

You can see the code as ,

"<img class="photo" alt="photo" src="img/photo.jpg">" , when we click on the centre portion to display the photo .

Here also , you can understand that , we cant edit or change the photo from the corresponding code .

But , how to change this pic ?

This also comes to the advanced part Introduction to Advanced Designing.

7. All menu items together  

When we selected the menu " Number 1: About"  , the corresponding code displayed in line number 89, as given below:

Crossly observe the code . You can see there a sentence like ,

"!-- ========  Copy this block for add new menu item: ======== -->"

It means , all the above menus like about us, Contact,Skills,Portfolio etc contains here.

Selecting All menus by clicking TAGS

Below the page , you can see some TAGS (like body,div, content,menuwrapper , mainmenu,menu-items etc) . 

You know already that , in  HTML (Refer HTML - An Introduction) we used tags .

< > is known as TAGS. 

•  <>  is to open the HTML commands . 
• And a slash ( / ) is used to close any commands . 

Select the last one ( <div class="menu-items"> ) , and you can see that the whole menus are selected , as given below :

The selected portion contains all the menus like ,about us, Contact,Skills,Portfolio etc. and after that , you can see , a dummy portion . That code part is creating a new menu.

8. How to create a new menu item  

In the above code , instead of "Demo" , I am giving "My Blog" . Before that note the ! symbol  .Whenever you put that symbol , it will not run by the server. 

Using this symbol " ! "we used to give a comment in the code portion, which is omitted while running the code.

Note that the code is in not in active mode . To remove it from comment section , just delete the  ! symbol . And see below : 

And I changed the menu name to "My Blog".

Click SAVE , Now open the template (From the folder softdreambuilder) in WAMP server .

See , a new menu item is there named "My Blog" , and while clicking it , will go to the blog.

But , where to give the address of the blog  " http://programming-bca-mca.blogspot.in/ " ?

This also comes to the advanced part  Introduction to Advanced Designing

NOTE: 

For a better view , you can select any one of the mode (mobile size, tablet size and desktop size) from the bottom left corner of the page , as given below :

I am giving here the changes we can make in the code , only within the page.

But where to give the link, change the photo etc ?

Ok , lets move to the next chapter ..in which you can understand other portion of the designing.

Goto  Introduction to Advanced Designing 
Back to Creating a PHP web site - Starting from scratch.