New Participant

Question

How to start to create a web page

Forum|Forum|3 years ago
July 21, 2022
6 replies
1282 views

hello!

I want to create a web page, but I don't know how to start. Maybe someone can help me?

in what program schould I make a template or layout of the web page?

Can I use ready elements of a template which I make in dreamweaver?

How to make a CSS elements on my web page?

What is Javascript and when I schould use it?

Sorry, my english is not very well.

This topic has been closed for replies.

Dan Rodney

Community Expert

Here's a video I made to help people get started in web design. I hope it may be helpful in getting you started understanding the general process. https://www.youtube.com/watch?v=yarjJxYys6c

— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Nancy OShea

Community Expert

Given that this is the Dreamweaver product forum, it's interesting that your tutorial features XD and VS Code (or Sublime) instead of Dreamweaver.

This space rarely gets asked about XD. It might be helpful for prototyping complex apps but it seems like overkill for basic web page layouts.

On the other hand, one CAN create a fully responsive site layout with just 3 steps in Dreamweaver.

File > New > Starter Templates > Bootstrap Templates.
Pick a layout & hit CREATE button.

3. File > SaveAs > index.html

Easy peasy.

Beginners can (and should) learn code basics at their own pace from online resources like MDN and W3Schools. A good grasp of coding fundamentals, CSS Flexbox and Grids are invaluable skills to have.

- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/
- https://www.w3schools.com/bootstrap/

Nancy O'Shea— Product User & Community Expert

Dan Rodney

Community Expert

The original poster asked some very general questions about creating webpages, which my tutorial touches on. It's not a direct answer to all their questions, but I thought they may find it useful. Dreamweaver is a code editor, so any HTML, CSS, or JavaScript code still applies to using Dreamweaver as a code editor.... so it shouldn't matter that I was showing code in a different code editor... the code still translates regardless of where you write it. I also think it's useful for people to know there are various workflows, and they can find the one that works for them. While you may not find XD (or similar design apps) useful (that's fine if you have a workflow that works for you), others do find it useful.

The websites you list can be good reference (and some people can start learning from them), but not everyone can get started building websites by reading those websites. I've had students who tried and couldn't.

— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

K

Konrad22082256ltl8Author

New Participant

how to paint the background of the <table> ??

Nancy OShea

Community Expert

To create a background, use the CSS background property.

Below is a working example. No tables required.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Centering with CSS Grids</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body, html {
margin: 0;
width:100%;
height: 100%;
display: grid;
background: #333 url(https://placeimg.com/1200/900/nature) no-repeat center center;
background-size: cover;
}
.container {
padding: 2%;
width: 75%;
text-align: center;
margin: auto;
background-color: rgba(0,0,0,0.5);
color: #FFF;
font-size: calc(16px + 1vw);
line-height: calc(1.75em + 0.5vw);
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to CSS Grids!</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>I'm vertically &amp; horizontally centered.</p>
</div>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

@Konrad22082256ltl8

Software doesn't build websites, people do.

Get some paper and pencils or crayons and make a rough sketch of your page layout as you wish it to appear on mobile, tablet and desktop devices. It need not be fancy or accurate. Just some basic boxes will do.

Once you have the basic layouts, go back and make notes about how many elements each box should hold and number them in sequential order. These are your design mockups.

On a separate page, briefly describe what the user experience should be. For example, when item #1 is tapped/clicked, what should happen? Repeat for other elements. This will be your Developer's road map. You will refer to this often during the coding phase.

See link below for basic design ideas and starter code.

https://www.w3schools.com/css/css_templates.asp

Hope that helps. If not, post back with further questions.

Nancy O'Shea— Product User & Community Expert