在Dreamweaver中编写HTML,首先需要打开Dreamweaver软件,然后创建一个新的项目,接下来,按照以下步骤编写HTML代码:
1、在项目资源管理器中,右键单击“文件”>“新建”>“文件夹”,创建一个名为“css”的文件夹,用于存放CSS样式表。
2、在项目资源管理器中,右键单击“文件”>“新建”>“文件夹”,创建一个名为“js”的文件夹,用于存放JavaScript脚本。
3、在项目资源管理器中,右键单击“文件”>“新建”>“文件夹”,创建一个名为“images”的文件夹,用于存放图片。
4、在项目资源管理器中,右键单击“文件”>“新建”>“文件夹”,创建一个名为“fonts”的文件夹,用于存放字体文件。
5、在项目资源管理器中,右键单击“文件”>“新建”>“文件夹”,创建一个名为“html”的文件夹,用于存放HTML文件。
6、在“html”文件夹中,右键单击“新建”>“文本文档”,命名为“index.html”。
7、双击“index.html”以打开HTML编辑器。
8、在HTML编辑器中,输入以下基本的HTML结构:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的网站</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>欢迎来到我的网站</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <main> <section> <h2>文章标题</h2> <p>这里是文章内容。</p> </section> </main> <footer> <p>版权所有 © 2022 我的网站</p> </footer> <script src="js/script.js"></script> </body> </html>
9、保存并关闭“index.html”文件。
10、在“css”文件夹中,创建一个新的CSS样式表文件,命名为“style.css”。
11、双击“style.css”以打开CSS编辑器。
12、在CSS编辑器中,输入以下基本的CSS样式:
body { font-family: Arial, sans-serif; line-height: 1.6; } header { background: #333; color: #fff; text-align: center; padding: 1rem; } nav { background: #444; padding: 1rem; } nav ul { list-style: none; padding: 0; } nav ul li { display: inline; margin-right: 1rem; } nav ul li a { color: #fff; text-decoration: none; } main { padding: 2rem; } footer { background: #333; color: #fff; text-align: center; padding: 1rem; margin-top: 2rem; }
13、保存并关闭“style.css”文件。
14、在“js”文件夹中,创建一个新的JavaScript脚本文件,命名为“script.js”。
15、双击“script.js”以打开JavaScript编辑器。
16、在JavaScript编辑器中,输入以下基本的JavaScript代码:
document.addEventListener('DOMContentLoaded', function() { console.log('页面加载完成'); });
17、保存并关闭“script.js”文件。
至此,你已经在Dreamweaver中创建了一个简单的HTML页面,包括基本的HTML结构、CSS样式和JavaScript脚本,你可以根据需要继续添加内容和样式。