How to start to create a web page

Community Beginner ,
Jul 20, 2022 Jul 20, 2022

Copy link to clipboard

Copied

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. 

 

Views

232

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 20, 2022 Jul 20, 2022

Copy link to clipboard

Copied

In what program and How to save CSS settings to use it later in dreamwever? 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 20, 2022 Jul 20, 2022

Copy link to clipboard

Copied

What kind of files I can use to create a web page? 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 20, 2022 Jul 20, 2022

Copy link to clipboard

Copied

Have a look at

https://developer.mozilla.org/en-US/docs/Web/Tutorials

 

Use any code editor to get started. Being a Dreamweaver forum, I would suggest Dreamweaver, but a better option would be Visual Studio.

 

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 20, 2022 Jul 20, 2022

Copy link to clipboard

Copied

As a note with the link to the above.

You would be looking at Visual Studio Code. Which is more driven to the lightweight IDE solution rather than the beast of Visual Studio OP.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jul 20, 2022 Jul 20, 2022

Copy link to clipboard

Copied

Hi @Konrad22082256ltl8,

 

Thanks for writing to us. You can refer Dw tutorials for getting started.

Link: https://helpx.adobe.com/dreamweaver/tutorials.html

 

Please let us know if you looking for any additional info while going through the tutorials.

 

Have a pleasant day!

 

Regards,

Nayan

Dreamweaver Team

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 21, 2022 Jul 21, 2022

Copy link to clipboard

Copied

@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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 23, 2022 Jul 23, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 23, 2022 Jul 23, 2022

Copy link to clipboard

Copied

To create a background, use the CSS background property. 

 

Below is a working example.  No tables required.

 

image.png

 

<!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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 23, 2022 Jul 23, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 24, 2022 Jul 24, 2022

Copy link to clipboard

Copied

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. 

  1. File > New > Starter Templates > Bootstrap Templates.
  2. 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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 24, 2022 Jul 24, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 24, 2022 Jul 24, 2022

Copy link to clipboard

Copied

And I fully agree with you that a strong coding foundation is essential for building websites. Many people try to use Dreamweaver thinking it can shield them from code, but if someone doesn't understand how code works they'll struggle a lot.


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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 24, 2022 Jul 24, 2022

Copy link to clipboard

Copied

quote

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. 

 

 


By @Nancy OShea

 

 

Its not bad for a beginner level developer. At least it doesnt go straight for the cancerous css/front-end frameworks, command line npm install of bloated node modules, bundlers etc. 

 

Not sure about Sketch being more popular than Figma though. I've never seen anyone use Sketch.

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 24, 2022 Jul 24, 2022

Copy link to clipboard

Copied

I see nothing "cancerous" about Bootstrap.  It's just HTML with a good supply of built-in CSS classes for whatever extras users might want.   The only prerequisite is code fundamentals and familiarity with Bootstrap's 12-box grid system.   With just 3 steps in DW, I can't think of any less complicated way to get started that still affords users the freedom to design what they want and host on any server they choose. 

 

DIY site builders like Wix & Webflow are predators by comparison. One must use their templates, their hosting platforms, their widgets and pay premium prices for them.  "Ease of use" comes at a cost which is fine if you have the budget for it; not so fine when you don't.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 24, 2022 Jul 24, 2022

Copy link to clipboard

Copied

quote

With just 3 steps in DW, I can't think of any less complicated way to get started that still affords users the freedom to design what they want and host on any server they choose. 

 

By @Nancy OShea

 

 

Apart from nothing much is learnt by just dumping something in the code editor. I call it 'cancerous' because its been spreading a lot and eventually kills the ability to do anything for ones self, apart from adding a few css styles from a list which is readily available.

 

I've got absolutely nothing good to say about Wix, thats for sure. Webflow well I think thats a little different because you do need to know html and css to get that to work. But its not something that I would use because of what you mention regarding, hosting (although I believe you can aquire the code and host it elsewhere), pricing, its not a stand-alone desktop application, etc 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 24, 2022 Jul 24, 2022

Copy link to clipboard

Copied

quote

Apart from nothing much is learnt by just dumping something in the code editor. I call it 'cancerous' because its been spreading a lot and eventually kills the ability to do anything for ones self...

By @osgood_

=====

No worse than copying & pasting random bits of code from CodePen.  There's no cause/effect between using frameworks and human ignorance.  People have a willingness to learn or they don't.  You can't make people smarter by telling them not to use frameworks.  Offering them a red pill or blue pill, perhaps.  But as yet, that's only in movies. 🙂

 

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 25, 2022 Jul 25, 2022

Copy link to clipboard

Copied

LATEST
quote

No worse than copying & pasting random bits of code from CodePen.  There's no cause/effect between using frameworks and human ignorance.  People have a willingness to learn or they don't.  You can't make people smarter by telling them not to use frameworks.  Offering them a red pill or blue pill, perhaps.  But as yet, that's only in movies. 🙂

 

By @Nancy OShea

 

I agree and I don't advise anyone should just copy and paste from anywhere if they dont have at least some knowledge of what it is and what it does. It's far better to have an understand of a workflow you are using rather than just copying/pasting, that wont get you anywhere if you want to learn the process of development.

 

Of course you can make people smarter by telling them to avoid frameworks, they actually get to learn, which will assist them in the future when a framework doesnt actually do what they require. This is all very subjective because many poeple, especially in this forum, are just building out a one off website, with no intention of extending their journey beyond that, in which case just use anything to get the job done, usually pretty badly, but if you want to extend your journey its advisable to learn what you are doing rather than just relying on copying/pasting, at some point, sooner rather than later I would suggest, that isnt going to be enough.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 24, 2022 Jul 24, 2022

Copy link to clipboard

Copied

quote

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


By @Nancy OShea

 This is an official Adobe announcement

 

BenPleysier_0-1658709934964.png

No mention of Dreamweaver.

 

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines