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

模块一 :初识网页设计


文章目录

  • 模块一 :初识网页设计
    • 任务1:网页设计相关概念
      • 一、网页与网站
        • 什么是网页 (web page)?
        • 什么是网站(web site)?
      • 二、网页的构成元素
        • 1、构成网页的元素,主要包括:文字、图像、音频视频、动画、样式、各类脚本等
        • 2、HTML、CSS、JavaScript三者的关系
      • 三、静态网页与动态网页
        • 1、按网页的表现形式,网页主要分为两种类型
          • (1)静态网页
          • (2)动态网页
      • 四、网站开发流程
        • 1、需求分析
        • 2、网站规划
        • 3、网站制作
        • 4、网站测试
        • 5、网站发布
        • 6、更新维护
    • 任务2:认识并操作Dreamweaver
      • 1、认识Dreamweaver
        • (1)【插入】工具面板
        • (2)【文档】工具栏
        • (3)【文件】工具栏
      • 2、使用记事本创建网页
        • (1)使用记事本创建网页的步骤:
        • (2)案例
          • ①案例:在Dreamweaver中创建网站及网页
          • ②案例:修饰网页


任务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三者的关系

《DW学习笔记》 模块一 :初识网页设计_第1张图片

三、静态网页与动态网页

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

(1)静态网页

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

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

《DW学习笔记》 模块一 :初识网页设计_第2张图片

(2)动态网页

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

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

《DW学习笔记》 模块一 :初识网页设计_第3张图片

四、网站开发流程

1、需求分析

建站目标、网站需求

2、网站规划

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

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

3、网站制作

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

4、网站测试

本地测试、远程测试

5、网站发布

空间域名、网站上传

6、更新维护

网站管理

任务2:认识并操作Dreamweaver

1、认识Dreamweaver

《DW学习笔记》 模块一 :初识网页设计_第4张图片

(1)【插入】工具面板

在这里插入图片描述

(2)【文档】工具栏

《DW学习笔记》 模块一 :初识网页设计_第5张图片

(3)【文件】工具栏

《DW学习笔记》 模块一 :初识网页设计_第6张图片

2、使用记事本创建网页

(1)使用记事本创建网页的步骤:

  • 打开记事本

  • 输入HTML代码

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

  • 打开网页预览效果

(2)案例

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

《DW学习笔记》 模块一 :初识网页设计_第7张图片




	
	 我的第一个网页


欢迎来到我的第一个网页!

	
②案例:修饰网页

《DW学习笔记》 模块一 :初识网页设计_第8张图片


<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>我的第一个网页title>
	
    <script type="text/javascript">
		document.write("hello");
    script>
	
    <style type="text/css">
		p{
			color:red;
		}
	style>
head>
<body>
	<p>欢迎访问我的第一个网页!p>
body>
html>	

你可能感兴趣的:(css,html,javascript)