How To Design A Web Page Using PHP

Vishnupriya A
7y
5.6k
0
1

Article

Requirements

Dreamweaver
Xampp
Web browser

Step 1

In this step, open Macromedia Dreamweaver to create a Web page. Macromedia Dreamweaver is one of the tools to create a Web page in PHP.

Step 2

In this step, for selecting Language, Macromedia Dreamweaver is opened. A list of languages are shown, and select PHP.

Step 3

In this step, open PHP coding page. This coding page already has some default code. Thus, there is no need to write <html>,<head>,<title>,<body>.

Step 4

This step is required to save the coding page. Now, go to the file and select save option or CTRL+S.

Step 5

This step is performed to select the location to save that page. Select C drive and select the xampp.

Step 6

In this step also, select the location to save the code. In xampp location, show many files. Select htdocs.

Step 7

In this step, create New File to save the page. In htdocs, create New folder and change the name demo to save the code.

Step 8

In this step, save the page on the demo file. Type file name index.php and click save. Now, save the coding page.

Step 9

In this step, select the title name. Name the untitled document in the code page. Select the name and clear.

Step 10

In this step, declare the document title. Type the document title DESIGNING PHP and save or CTRL+S.

Step 11

This step is for designing the page. This Web page is divided into header, menu and center. This menu declares three menus, which link to home, login and feedback. Now, we need not to create a home page, login page and feedback page, so declare <a href="#">.

Step 12

This step is to view the design page. In this page, click Design. This page shows our page design.

Step 13

This step is to open XAMPP Control Panel Application, which is used for running our web page application. Select XAMPP Control Panel Application.

Step 14

This step is to be followed to run the page. In this XAMPP, start Apache. This is a Server to run the page.

Step 15

In this step, run the Web page. Select any Web Browser and type the link. This link is localhost/demo and press enter. Now, run the Web page.

Step 16

In this step, create stylesheet. In Macromedia Dreamweaver, select CSS. CSS is cascading Stylesheet. This is used to create style for Web page.

Step 17

This step is required to open stylesheet coding page. This page is used to develop the style and designing of the Web page.

Step 18

This step is required to select the location to save the stylesheet. Go to the file and select save option i.e. open save window. Select file name and open demo file.

Step 19

This step is required to save stylesheet. Declare the file name as Style.css. and css is an extension of the stylesheet. Now, save the stylesheet.

Step 20

This step is required to develop the stylesheet coding. First create the header page. Declare the #header and create the Background-color, which shows the colors and select any one color.

Step 21

In this step, create the stylesheet for the header. Declare the width size and height size, color, border size,margin-left and right size. Subsequently, close the header.

Step 22

In this step, connect PHP and stylesheet. Link the stylesheet in PHP coding. In the coding, after </title>, link the stylesheet. Browse the stylesheet.

Step 23

In this step, select the stylesheet location. Select the file name and click OK. Now, the link is connected.

Step 24

This step is required to link to stylesheet. This declares the type and rel. Type is text/css and rel is Sttylesheet. Now, connect PHP and stylesheet.

Step 25

In this step, check the link. Go to the Browser and type localhost/demo. Run DESIGNING PHP. Change the header design.

Step 26

In this step, create style for menu. This menu bar has a background color and select any one color, followed by choosing the size of margin, weight and height. Now, save the file.

Step 27

In this step, check the menu style. Go to the browser and type the link localhost/demo. Now, run the demo document and menu style changes.

Step 28

In this step, change the menu order from horizontal to vertical. Develop unordered list style set to none. List style float is left and declare that padding and margin size. Now, save stylesheet.

Step 29

In this step, check the menu order. Go to the browser and type the link localhost/demo. Run the demo document and change the menu order.

Step 30

In this step, change the alignment and style of menu link. In stylesheet, create background-color, color, height, width, font-size, font-style and display alignment as table cell. Vertical align is middle. Save the style.

Step 31

In this step, check the menu style. Go to the browser and type the link. Now, run the demo document and change the link style on menu bar.

Step 32

In this step, create a hover code for the style. In stylesheet, create hover code for the link. Now, create color, font style and transition. Create size of padding, left, top and position. Now, save the stylesheet.

Step 33

In this step, check the style. Go to the Browser and type the link. Run the demo page. With the cursor's click, move to any link that will be changing the link color.

Step 34

In this step, change the size of the link. In stylesheet, at a link, change the size of width and height. Now, save the stylesheet.

Step 35

In this step, check the size of the link. Go to the browser and type the link. Run the demo page and the link size will be changed on the Web page.

Step 36

In this step, create style for center page. This also creates background color; color, width and height is auto, margin size. Save the stylesheet.

Step 37

In this step, check center page. Go to the browser and type the link. Run the web page demo. Display the center page, using style.

Step 38

In this step, use the image on the header page. In stylesheet, on the header, create an image. Type background image and browse the image.

Step 39

In this step, select the header image. Select demo location and select the header image. The image URL is linked with stylesheet. Now, save the stylesheet.

Step 40

In this step, check header image. Go to the browser and type the link. Run the demo page and display header image.

Step 41

In stylesheet, on center, create background image and browse the image. Select demo location and open demo. Select center image and save the stylesheet.