第一课：深入网页设计与制作-CSDN博客

本文链接：https://blog.csdn.net/weixin_67473238/article/details/145940180

我们学习如何创建一个简单的网页，并了解了HTML、CSS和JavaScript的基本概念。在这一课中，我们深入探讨网页设计与制作的各个方面，创建更加专业和功能丰富的网页。
一、创建一个新的站点（有很多同学会会问我为什么就要创建一个站点呢，他的作用是什么？）

这里用用大白话来解释大家就会明白就像是你在互联网上买了一块地，然后在这块地上盖房子。这个“房子”就是你的网站，人们可以通过一个特定的地址（就是网址）来访问你的网站，看到你放在上面的内容，比如文章、图片、视频等等，比如好多同学遇到的比如代码引入图片这些会发现就是不出来，那么原因就是你不设置这个站点，电脑也不知道你这个图片具体要在哪里，比如你的电脑上是正常显示这个图片的，但是就发给老师老师电脑上没有，这就是站点的重要性
在开始网页设计与制作之前，首先要创建一个新的站点。如果你还没有创建过站点，现在是时候了。站点是用来管理你的网页文件和资源的地方。通过创建一个站点，你可以更好地组织和管理项目中的所有文件。
打开你的网页编辑工具：比如Dreamweaver、VS Code等。
创建新站点：在Dreamweaver中，选择“站点”菜单，然后选择“新建站点”。输入站点的名称和本地站点文件夹的路径。
设置站点属性：配置服务器信息（如果需要），以便你可以直接在服务器上发布和测试你的网页。
设置页面属性
在新建的HTML文件中，设置页面属性是非常重要的，它能帮助你定义页面的一些基本信息和行为。
1、设置页面标题：在标签中，使用标签来设置页面的标题。标题将显示在浏览器的标签栏中。

<head><title>

2、设置字符编码：为了确保网页能够正确显示各种语言的字符，在标签中添加。

<head><meta charset="UTF-8">

3、设置缩放比例：为了使你的网页在移动设备上有良好的显示效果，添加以下代码：。

<head><meta charset="UTF-8">

4、编写网页代码
现在，我们将开始编写网页的HTML代码。HTML是网页的基础，用于定义网页的结构和内容。
结构化网页内容：使用HTML标签（如，，等）来结构化你的网页内容。<html><head><body>
添加元数据：在标签内，添加描述（）和关键词（）。这些信息有助于搜索引擎了解你的网页内容，从而提高网页的搜索引擎优化（SEO）效果。

<head><meta name="description"><meta name="keywords">

编写主体内容：在标签内，添加网页的主要内容。使用段落（）、标题（到）、列表（, , ）等标签来组织内容。

<body>: 这个标签包含了网页的所有内容，比如文本、图片、链接、表格等。它是网页的主体部分，用户看到的所有内容都放在<body>标签内。
<p>: 这个标签用于定义段落。在<p>标签内的文本会被浏览器显示为一个段落，通常段落之间会有一定的间距。
<h1> 到 <h6>: 这些标签用于定义标题。<h1>是最高级别的标题，通常用于页面的主标题，而<h6>是最低级别的标题。数字越小，标题的级别越高，字体通常也越大。
<ul>: 这个标签用于定义一个无序列表。无序列表的项目通常用项目符号（如圆点）来标记。
<ol>: 这个标签用于定义一个有序列表。有序列表的项目通常用数字或字母来标记，表示项目的顺序。

<li>: 这个标签用于定义列表中的一个项目。它必须嵌套在<ul>或<ol>标签内，表示无序列表或有序列表中的单个项目。

<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个段落。</p>
  <h2>这是一个子标题</h2>
  <p>这是另一个段落。</p>
  <ul>
    <li>无序列表项目1</li>
    <li>无序列表项目2</li>
  </ul>
  <ol>
    <li>有序列表项目1</li>
    <li>有序列表项目2</li>
  </ol>
</body>

二、给你的网页做美化
网页的美化主要是通过CSS来实现的。CSS（层叠样式表）用于控制网页的布局和样式，使网页更加美观和易读。
编写CSS规则：你可以在标签内编写CSS规则，或者创建一个外部CSS文件并在HTML文件中引入它。<style>
使用类和ID选择器：通过类选择器（）和ID选择器（）来指定特定元素的样式。

.classname#idname

利用CSS预处理器：使用Sass或Less等CSS预处理器可以让你编写更复杂和可维护的样式。Dreamweaver也内置了一些CSS功能，方便你创建和管理样式。
设计页面布局
良好的页面布局是用户体验的关键。通过合理的布局设计，你可以使网页内容更加清晰和易于导航。
切换到“设计”视图：在Dreamweaver中，你可以切换到“设计”视图，直观地看到网页的布局效果。
使用布局工具:D reamweaver提供了多种布局工具，比如表格、弹性盒模型（Flexbox）、网格系统（Grid）等。你可以使用这些工具来设计页面的布局。
创建响应式布局：为了使网页在不同屏幕尺寸的设备上都有良好的显示效果，可以创建响应式布局。使用媒体查询（Media Query）来调整不同屏幕尺寸下的布局和样式。
交互性
为了提升用户体验，可以在网页中添加一些交互元素，比如按钮、表单和动画等。
使用HTML5和CSS3：HTML5和CSS3提供了许多新的标签和属性，用于创建更加丰富的交互元素。比如，使用标签创建按钮，使用CSS3的和属性添加动画效果。<button>transitionanimation
编写JavaScript代码：JavaScript是一种强大的脚本语言，用于实现网页的动态效果和用户交互。你可以编写JavaScript代码来处理用户输入、验证表单、控制动画等。
使用JavaScript库：jQuery是一个流行的JavaScript库，提供了许多简便的函数和插件，帮助你快速实现复杂的交互效果。你可以在HTML文件中引入jQuery库，然后编写相应的代码。

这个同学们前期不建议接触，等到后面再进行学习
预览和测试
在完成网页设计和制作后，需要对网页进行预览和测试，以确保它在不同浏览器和设备上的显示效果和功能正常。
使用内置预览功能:D reamweaver提供了内置的预览功能，你可以在不同浏览器中查看网页的显示效果。
测试交互功能：测试表单提交、链接跳转等交互功能，确保它们能够正常工作。
适配不同设备：使用开发者工具（如Chrome的DevTools）模拟不同设备，检查网页在各种屏幕尺寸下的显示效果。
优化和调试
在网页发布之前，还需要进行优化和调试，以提高网页的性能和用户体验。

查找和修复错误：使用Dreamweaver的代码检查功能，查找并修复HTML和CSS中的错误。
优化图片大小：为了减少网页加载时间，可以优化图片的大小和格式。使用工具（如PhotoShop、TinyPNG）压缩图片，确保在不影响质量的前提下减小文件体积。有些网页里因为有些图片有些大，同学们可以自己用ps修改大小或者的电脑自带的也可以，下面我给大家提供一个示例HTML网页代码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是我的个人网站</title>
<link href="CSS/bootstrap-4.3.1.css" rel="stylesheet" type="text/css">
<link href="CSS/Styles.css" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/abel:n4:default;actor:n4:default;source-sans-pro:n4,n3,n2,n7,n9:default;kristi:n4:default;mr-dafoe:n4:default;pacifico:n4:default;sofia:n4:default.js"></script>
</head>
<body style="padding-top: 70px">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: #4A90E2;"><a class="navbar-brand" href="#">个人网站</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
	  <div class="collapse navbar-collapse" id="navbarSupportedContent1">
	    <ul class="navbar-nav mr-auto">
			
	      <li class="nav-item active"> <a class="nav-link" href="index.html">首页<span class="sr-only"></span></a> </li>
	      <li class="nav-item"> <a class="nav-link" href="about.html">关于</a> </li>
			<li class="nav-item"> <a class="nav-link" href="portfolio.html">简介</a> </li>
			<li class="nav-item"> <a class="nav-link" href="contact.html">联系我</a> </li>
        </ul>
	    
  </div>
</nav>
	
<header> <img src="Images/Logo.svg" width="80" height="80" alt=""/> </header>
<aside>
  <h1>正文标题 </h1>
</aside>
<section>
  <h2> 小题目 </h2>
  <p>这里的文字部分可以随便添加<a href="http://www.twitter.com/paultrani" target="_blank"></a></p>
</section>
<footer>页脚部分</footer>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.3.1.js"></script>
</body>
</html>

.css源代码

@charset "UTF-8";
body {
    background-color: #202022;
    background-image: url(../Images/bkgd.jpg);
    color: #FBFBFB;
    background-size: cover;
    background-attachment: fixed;
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 300;
    font-size: small;
}
h1 {
    font-family: kristi;
    font-style: normal;
    font-weight: 400;
    font-size: 6.5em;
    text-align: center;
}
h2 {
    font-family: source-sans-pro;
    font-style: normal;
    font-weight: 700;
    font-size: 1.5em;
}
footer {
    font-size: x-small;
    text-align: center;
    clear: both;
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,1.00) 100%);
    height: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
}
section {
    background-color: #FFFFFF;
    color: #000000;
    border-radius: 10px;
    width: 40%;
    margin-left: 1%;
    margin-right: 5%;
    padding-top: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    padding-left: 2%;
    float: right;
}
aside  {
    float: left;
    width: 50%;
}
header {
    text-align: center;
    margin-top: 80px;
    margin-right: 80px;
    margin-bottom: 80px;
    margin-left: 80px;
}
body nav a {
    color: #FC00FF;
    text-decoration: none;
}
main {
	background-color:#243170;
}
.navlist {
    list-style-type: none;
    background-color: #FFFFFF;
    overflow-x: hidden;
}
.navlistitem {
    float: left;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
}
.navbar.navbar-expand-lg.navbar-light.bg-light .navbar-brand {
    color: #F500FF;
}
.navbar-nav.mr-auto .nav-item .nav-link:hover {
    color: #FF00EE;
}
h3 {
    font-size: medium;
    font-weight: 800;
    color: #7C7C7C;
}
a {
    color: #FF00EE;
}
@media (max-width: 700px){
section {
    background-color: #FFFFFF;
    color: #000000;
    border-radius: 10px;
    width: 90%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    padding-top: 2.5%;
    padding-right: 2.5%;
    padding-bottom: 2.5%;
    padding-left: 2.5%;
    float: none;
}
aside {
    float: none;
    width: 100%;
}
header {
    text-align: center;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
h1 {
    font-family: kristi;
    font-style: normal;
    font-weight: 400;
    font-size: 3.8em;
    text-align: center;
}
}

@media (max-height:650px){
header {
    text-align: center;
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
}
}

🥇 告别盲目学习，让编程之路清晰可见！
很多编程新手在学习完基础语法后，常常会陷入迷茫：这些语法有什么用？该怎么运用？如何才能提升自己的编程能力？
其实，答案很简单：实践出真知！
就像学习游泳，光看教程是不够的，你需要跳入水中，亲自感受水的浮力，才能掌握游泳的技巧。编程也是如此，你需要通过不断的练习，将理论知识转化为实际应用，才能真正理解和掌握编程的精髓。
LeetCode 上的“初级算法”题库，就是你开启编程实践的绝佳起点！
海量题目，由浅入深：题目涵盖各种编程语言，从简单的变量操作到复杂的算法设计，帮助你循序渐进地提升编程能力。
在线编程，即时反馈：直接在网页上编写代码，系统会自动运行并给出结果，帮助你快速发现错误，提高代码质量。
社区互动，共同进步：你可以查看其他用户的解题思路和代码，学习不同的编程技巧，并与全球的编程爱好者交流经验。
不要再犹豫了，从现在开始，每天刷几道题，你将发现：
编程语法不再枯燥，它们是你解决问题的利器！
编程思路越来越清晰，解决问题的能力不断提升！
对编程的热爱与日俱增，未来的编程之路更加清晰可见！