《DW学习笔记》模块一：初识网页设计

最新推荐文章于 2025-08-01 10:15:50 发布

风冷晨

最新推荐文章于 2025-08-01 10:15:50 发布

阅读量3.8k

点赞数 15

CC 4.0 BY-SA版权

文章标签： css html javascript

本文链接：https://blog.youkuaiyun.com/weixin_45239751/article/details/115127575

本文介绍了网页设计的基本概念，包括网页与网站的定义，网页的构成元素如文字、图像、音频视频、动画等。同时，阐述了HTML、CSS、JavaScript三者在网页设计中的作用和关系，并简要说明了静态与动态网页的区别。此外，概述了网站开发的基本流程，以及如何使用Dreamweaver和记事本创建网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模块一：初识网页设计

文章目录

模块一：初识网页设计

任务1：网页设计相关概念

一、网页与网站

什么是网页（web page）？

网站中的一页，一个网站中的网页通过“超链接”的方式被组织在一起。

什么是网站（web site）？

互联网上用于展示特定内容的相关网页的集合。

二、网页的构成元素

1、构成网页的元素，主要包括：文字、图像、音频视频、动画、样式、各类脚本等

（1）文字

文字是网页最基本的组成元素之一。文字在网页中的表现形式主要涉及到字体、字号和编码。

（2）图像

图像也是网页中最常见的元素之一，比文字的效果形象、生动。常见的用于网页中的图像的格式主要有jpg、gif 、png等。

（3）音频

主要采用MP3和MIDI格式的音频文件。

（4）视频

在网页中播放视频文件需要视频播放插件的支持，目前网页上常用的视频文件的格式为WMV、FLV、MPEG、RM等。

（5）动画

网页动画主要是指swf文件，swf是Flash的专用格式，是一种支持矢量和点阵图形的动画文件格式，被广泛应用于网页设计、动画制作等领域，swf文件通。常也被称为Flash文件。

（6）HTML

HTML是用来制作网页的标记语言，HTML是Hypertext Markup Language的英文缩写，即超文本标记语言，不需要编译，直接由浏览器执行。

HTML对网页元素有对应的标签和属性，可通过对标签的属性的设置，美化网页的效果。

从语义的角度，描述页面结构。

（7）CSS

CSS层叠样式表，使用CSS对网页中元素的位置进行像素级的精确控制，从审美的角度，美化页面

（8）JavaScript

一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，广泛用于客户端Web开发，在HTML网页中加入JavaScript，能增加网页的客户端的交互效果，从交互的角度，提升用户体验。

2、HTML、CSS、JavaScript三者的关系

在这里插入图片描述

三、静态网页与动态网页

1、按网页的表现形式，网页主要分为两种类型

（1）静态网页

概念：通常指的是文件后缀名为.html、.htm和.shtml等形式呈现的网页。

特点：浏览器端不与服务器端发生交互。

在这里插入图片描述

（2）动态网页

概念：指网页文件里包含了程序代码，通过后台数据库与Web服务器的信息交互，由后台数据库提供实时数据更新和数据查询服务。这种网页的后缀名称一般根据不同的程序设计语言而不同，如常见的有.asp、aspx、jsp、.php等形式为后缀。

特点：浏览器端与服务器端发生交互，数据实时更新。

在这里插入图片描述

四、网站开发流程

1、需求分析

建站目标、网站需求

2、网站规划

网站规划：网站风格、网站布局、网站你内容

资料收集：图片、文字内容、视频等

3、网站制作

网页制作：网页、模板、CSS等

4、网站测试

本地测试、远程测试

5、网站发布

空间域名、网站上传

6、更新维护

网站管理

任务2：认识并操作Dreamweaver

1、认识Dreamweaver

在这里插入图片描述

（1）【插入】工具面板

在这里插入图片描述

（2）【文档】工具栏

在这里插入图片描述

（3）【文件】工具栏

在这里插入图片描述

2、使用记事本创建网页

（1）使用记事本创建网页的步骤：

打开记事本

输入HTML代码

保存为.html或.htm文件，注意格式问题

打开网页预览效果

（2）案例

①案例：在Dreamweaver中创建网站及网页

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> 我的第一个网页</title>
</head>
<body>
欢迎来到我的第一个网页！
</body>
</html>

②案例：修饰网页

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>我的第一个网页</title>
	<!--使用javascript在页面上输出文本“hello”-->
    <script type="text/javascript">
		document.write("hello");
    </script>
	<!--使用css将段落颜色设为红色-->
    <style type="text/css">
		p{
			color:red;
		}
	</style>
</head>
<body>
	<p>欢迎访问我的第一个网页！</p>
</body>
</html>