当前位置：文档之家 › 第1章_网页设计基础

第1章_网页设计基础

  • 格式：pptx
  • 大小：1.28 MB
  • 文档页数：47

下载文档原格式

  / 47

合集下载

网页设计与开发入门教程

网页设计与开发入门教程

网页设计与开发入门教程第一章：网页设计基础在开始学习网页设计与开发之前，先要了解一些基础概念。

网页是由HTML（Hypertext Markup Language）语言编写的，并使用CSS（Cascading Style Sheets）来装饰和布局。

网页设计的目标是为用户提供一个美观、易于使用且功能强大的网站。

1.1 HTML基础HTML是一种标记语言，用于描述网页的结构和内容。

了解HTML的基本语法和标签是网页设计的第一步。

常用的HTML标签有标题（h1-h6）、段落（p）、链接（a）、图片（img）等。

1.2 CSS基础CSS用于控制网页的样式和布局。

它可以通过选择器选择网页上的元素，并为其应用样式。

了解CSS的基本语法和常用的样式属性（如颜色、字体、边框、背景等）是进行网页设计的关键。

第二章：网页设计工具为了更高效地进行网页设计与开发，可以借助一些专业的工具。

以下是一些常用的网页设计工具：2.1 Adobe PhotoshopPhotoshop是一个功能强大的图像处理软件，网页设计师常用它来创建和编辑用于网页的图像和图标。

掌握基本的Photoshop技巧，如裁剪、调整颜色和大小等，是进行网页设计的基础。

2.2 Adobe IllustratorIllustrator是用于创建矢量图形的软件，特别适用于设计和制作网页上的矢量图标和图形。

熟悉Illustrator的绘图工具和路径编辑功能可以帮助网页设计师实现更精细的设计。

2.3 Sublime TextSublime Text是一款轻量级的代码编辑器，它支持多种编程语言和自定义插件。

在网页开发过程中，使用Sublime Text可以提高代码编写的效率和舒适度。

第三章：网页布局与排版在进行网页布局时，考虑到用户的使用习惯和视觉效果非常重要。

以下是一些常用的网页布局技巧：3.1 响应式设计随着移动设备的普及，响应式设计成为了一种必不可少的技术。

通过使用CSS媒体查询和流式布局，可以使网页在不同设备上自动适应，并提供更好的用户体验。

网页制作基础

网页制作基础

常见网站由域名（domain name 俗称网址或 域名）、网站源程序和网站空间三部分构成。

域名俗称网址； 网站源程序则放在网站空间里面，表现为网站前 台和网站后台； 网站空间由专门的独立服务器或租用的虚拟主机 承担。

2. 网站分类

根据网站所用编程语言分类：例如asp网站、 php网站、jsp网站、Asp. net网站等； 根据网站的用途分类：例如门户网站（综合网 站）、行业网站、娱乐网站等； 根据网站的功能分类：例如单一网站（企业网 站）、多功能网站（网络商城）等；
常见的Web浏览器软件有：IE、Firefox、 Opera和Netcape等。 不同Web浏览器软件所支持的网页格式有所区 别，所以WWW服务器提供网页信息时，要考虑客 户端软件的支持情况。
1.2.4 W3C
W3C是英文 World Wide Web Consortium 的缩写，中文意思是W3C理事会或万维网联盟。 W3C于1994年10月在麻省理工学院计算机科学实 验室成立。创建者是万维网的发明者Tim BernersLee。 W3C组织是对网络标准制定的一个非赢利组织， 像HTML、XHTML、CSS、XML的标准就是由 W3C来定制。
HTML是一种规范，一种标准，它通过标记符 号来标记要显示的网页中的各个部分。网页文件本 身是一种文本文件，通过在文本文件中添加标记符， 可以告诉浏览器如何显示其中的内容（如：文字如 何处理，画面如何安排，图片如何显示等）。
浏览器按顺序阅读网页文件，然后根据标记符 解释和显示其标记的内容，对书写出错的标记将不 指出其错误，且不停止其解释执行过程，编制者只 能通过显示效果来分析出错原因和出错部位。但需 要注意的是，对于不同的浏览器，对同一标记符可 能会有不完全相同的解释，因而可能会有不同的显 示效果。

网页设计与制作课件第1章

网页设计与制作课件第1章
上一页 返回
1.1.2 Web浏览器基本结构原理
知识点评
中文名称：网络浏览器或网页浏览器，简称浏览器 （Web Browser）。 浏览器是显示网页服务器或文件系统内的HTML文件，并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL（统一资源定位 符）指示，此乃网页的地址，以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML（超文本标记语言）文件格式，并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下，网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中，或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口，可以使用【窗口】菜单进行选择，如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点，如下图所示。
目标案例
下一页 返回
步骤7：系统显示刚对网站的设置内容，如果要对设置不满，可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7．“属性”检查器
用于显示网页中各个元素的相关属性，用户可以设置“属性”面板中的 各选项参数，对网页中的各个属性作设置和修改。如下图所示。

网页学习1-2

网页学习1-2

3. 网站所有文件所要介绍的全部内容做一个类似书籍目录的索引。主页上 的链接对应到一级页面，一级页面里的链接对应于二级页面，依次类推
4. 加入一些交互功能，如留言本、问卷调查、下载、搜索等 设计主页应注意的问题 主页上可供选择的链接不可太少也不可太多，太少会让访问者觉得没有 意思，太多又会吓倒访问者。 主页文件的大小一般不超过200K，否则打开主页的时间过长，会让浏览 者失去耐心的。 主页的在800*600的普通分辨率下应不出现水平滚动条。 主页的风格应与网站中的其他网页一致。
6.Flash Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是 一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合 在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等 领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。 Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。 7.Fireworks Fireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生 了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的软件，同时 也是专业的网页图形设计及制作的解决方案。 作为一款为网络设计而开发的图像处理软件，Fireworks还能够自动切割图像、 生成光 标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和 一个相当完美的 网络图像生成器。
2.FrontPage FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网 页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法， 简化了大量工作。 FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极 大的方便，Microsoft公司将FrontPage封装入Office之中，成为Office家族的一员， 使之功能更为强大。

网页设计与制作- 第01章_网页设计概述

网页设计与制作- 第01章_网页设计概述
14
网页设计与制作
1.1 网页基本概念
– 7．导航栏：导航栏的作用是引导浏览者准确、 方便地查看当前网站的不同内容并在相关页面之 间自由跳转。实际上，导航栏就是一组相对固定 的超链接，链接的目标就是站点中的主要网页。
– 8．表单：网页中的表单类似于Windows程序的 窗体，主要用来将浏览者输入的信息提交给服务 器端程序进行处理。表单是提供交互功能的基本 元素，例如问卷调查、信息查询、用户注册、网 上订购等，都需要通过表单进行客户端信息的收 集工作。
7
网页设计与制作
1.1 网页基本概念
• 例1.1 打开记事本（notepad.exe），输入如
下内容，将文件保存为ep1_1.html，然后双击
ep1_1.html在浏览器中打开并预览。效果如图
所示。
<html> </html>
<head> </head> <body>
</body>
<title>我的HTML网页</title>
– 9．其他常见元素：网页中除了以上几种最基本 的元素之外，还有一些其他的常见元素，包括悬 停按钮、Java特效和ActiveX特效等。这些元素 使网页更加丰富多彩和生动有趣。
15
网页设计与制作
1.2 网页浏览的基本原理
• 1.2.1 WWW服务器工作模式 • 1．客户机和服务器
– Web服务是建立在客户机/应用服务器/数据 库服务器（Client/ Server/ Database Server，C/S/DS）三层结构模型之上的， 在网络环境中，客户机向服务器发出服务请 求，服务器接收并处理客户的请求，最后将 结果返回到客户机。

第一章网页基础

第一章网页基础

1.1.3静态网页与动态网页 1.1.3静态网页与动态网页
2. 动态网页 动态网页使用ASP、PHP和CGI等程序生成，动态网页中的某些脚本 只能在Web服务器上运行，而静态网页中的任何脚本都不能在Web 服务上运行。当Web服务器接收到对静态网页的请求时，服务器将 Web 该页发送到请求浏览器，而不进一步的处理。当Web服务器接收到 对动态网页的请求时，它将做出不同的反映：服务器根据URL携带 的参数通过应用服务软件（如IIS等）运行服务器端程序，产生的结 果页面再返回客户端。应用服务软件与Web服务器软件一并安装、 运行在同一台计算机上。
1.2 网站的基本结构
• 1.2.2 动态网站的层次结构 • Web服务器上存在许多HTML文件，用户可以使用浏览器通过HTTP 协议来访问并显示这些超文本页面。但是HTML文件仅仅是静态的网 页，不能动态更新，为了能动态访问网上的数据库资源，达到交互式 的访问的目的，Web服务器中包括了CGI（公共网关接口），提供了 与网上数据库资源连接的可能性。中间件可以实现Web服务器与数据 库资源的连接。对于嵌入了数据库访问检索项的网页，中间件可以将 检索项转换成SQL语句访问数据库，并将所需的数据库资源解释成浏 览器可以解释的HTML页面供用户浏览。数据库资源可以经局域网或 广域网与Web服务器连接。 • 另外，从站点的文件目录层次来看，网站内文件组织的第一层是站点 文件夹，可以看成是站点的根目录；将网站内容分类后，放在站点文 件夹下面的子目录，称为第二层；每个分类内容下面还有细节内容可 以放在第二层目录的下面，称为第三层。网站的目录结构设计主要考 虑是否方便浏览者进行浏览，这需要网站的设计者对网站的内容在整 体上进行规划。一般中小型的网站的层次不超过三层，层次过于复杂 容易使浏览者不易查找到想要浏览的内容。

网页设计基础知识1

网页设计基础知识1
1.ftp:///软件/设计工具/ 也可以下载8/CS3/CS4的绿色版本
2.使用老师提供的Adobe_CS3_LJF_3in1.iso 虚拟光驱加载ISO文件进行安装，序列号任意填写
3.确保“FLEXnet Licensing Service”服务开启 （即确保“FNPLicensingService”这一服eaver CS3
➢ Dreamweaver操作界面 1.菜单栏 2.文档窗口 3.属性面板:PS、office属性在上方，DW在下方 4.插入栏：对象面板，快速插入各种网页元素 可以设定该工具条界面为制表符模式或者菜单模式 5.文档工具栏 6.面板组：浮动面板，实现特定的功能 设计面板、代码面板、应用程序面板、文件面板等
（插件）支持。
－－动态效果
常见的客户端动态技术：Javascript、JavaApplet、 DHTML、ActiveX、Flash、VRML
多媒体网页，但并不是真正的动态网页
a
6
1.网页设计概述
➢ 服务器端动态技术需要服务器和客户端的共同参 与，客户通过浏览器发出页面请求后，服务器根 据请求的参数运行服务器端程序产生结果页面再 返回给客户端。一般涉及到数据库。 典型的服务器端动态技术：ASP、、PHP、 JSP、CGI
DW和Frontpage为“所见即所得”工具，不懂HTML语言也 可以制作专业的网页,图形化界面操作，自动生成相应代码。
a
12
2.网页制作相关工具
➢ 本课程主要讲解使用Adobe Dreamweaver CS3 制作静态网站。
➢ DW最新版本为Dreamweaver CS4，其基本功能 跟Dreamweaver 8/CS3类似，CS3/CS4跟8的最 大区别主要为：界面“色调”不一样、多了Ajax 框架、CS3/4和Photoshop的整合、CSS样式表 的增强。

网页艺术设计课件(第一章)

网页艺术设计课件(第一章)
数字化和网络化。
5、交流平台类
6、网络社区类
1.5 课后思考
1、查阅有关互联网发展的资料，了解网页界面发展的概况。 2、下载三个不同类型的网页，分析其设计构成元素及主要设计特征。
【内容提要】
作为数字时代新艺术形式之一，网页艺术具有媒体相关性、技术性和艺术性三大基本内涵以 及若干与传统艺术形式不同的新艺术特征。它的要素包括形态要素和构成要素两个方面； 在设计网页时我们要遵循定位准确、技术合理、个性突出、形象统一等主要设计原则。
信息。
5、多媒体 将多媒体元素引入网页界面，可以更大程度上增强对浏览者的吸引力。 主要指音频、视频、动画等。 （1）、音频 主要有：MIDI、MAV、AIF、MP3、.ram等。 （2）、视频 信息丰富、传达便捷 A、形象生动、吸引力更强；B、传达信息的层次更深入。 常用格式：Avi、Rm、Flv等。
文章的题目。
（2）、文字信息 文字信息是标题内容的展开，是传达信息的主体部分。 文字信息虽然简单，但内容要符合标题。 对文字的字体、字形、大小、颜色和编排要进行精心的设置，以达到较好的浏览效果。
（3）、文字链接 最常见的超链接，它能直观的呈现链接的相关主题信息，使浏览者对所包含信息一目了然。
好的版式首先能以清晰的视觉导向是浏览者对网页内容一目了然，其次又以巧妙的图文配置使浏览 者获得悦目的视觉效果。
4、色彩 色彩在网页设计中的重要作用： 首先，彩色网页较单色网页更具吸引力； 其次，彩色网页可以通过色彩传达信息，是增强课理解性和易识别性的有效手段； 第三，色彩具有象征作用，通过带有主题倾向的色彩语言，可以更加有效地与浏览者进行情感交流； 第四，彩色网页具有悦目、装饰性强的特点，可以使浏览者愿意花更多的时间注目于此并了解相关

网页设计基础

网页设计基础

第1章进入UI的世界1.1什么是UI？1【单选题】UI设计是什么意思？A、User Interface的缩写，是指用户界面设计B、User Identity的缩写，是指用户识别设计C、User Ideal的缩写，是指用户目标设计D、UserIntention的缩写，是指用户意图设计正确答案：A2【单选题】下列哪一种不属于UI的设计范畴？A、网页设计B、手机界面设计C、户外海报设计D、软件界面设计正确答案：C3【单选题】以下说法正确的是？A、我们要学习的UI，英文全称为User Identity，即用户身份识别设计的简称B、UI设计是指对互联网、移动互联网、软件等产品的人机交互、操作逻辑、界面美观的整体设计C、UI设计师就是做程序开发的人D、UI设计师不用了解和研究用户群体及群体使用习惯，只需要按自己的喜好进行设计就可以正确答案：B4【单选题】UI设计不包括？A、视觉设计B、建筑设计C、交互设计D、用户体验正确答案：B5【多选题】UI设计的细分研究方向包含以下哪几项？A、交互设计B、数据库设计C、视觉设计D、用户研究正确答案：ACD6【多选题】视觉设计研究范围包含以下哪几项A、创建可识别的图像B、精美的外观C、产品整体视觉统一性D、布局构图合理性及美观度正确答案：ABCD1.2UI界面布局与设计规范1【单选题】在分模块布局方式中，如何避免操作点击区域多的问题？A、扩大区域B、色块和留白C、丰富的字体颜色D、丰富的图片颜色正确答案：B2【多选题】UI设计的原则论述正确的是哪些？A、界面是为了促进交互而存在的。

B、内容和形式统一C、具有循序展现D、每个屏幕需要一个主题E、注意字体的使用正确答案：ABCDE3【多选题】对称布局的方式内容多为？A、数字和字体B、名称C、分类说明D、分类图片正确答案：BCD4【多选题】分模块布局的有点？A、每个屏幕都显示一个题目B、非常清晰并且有扩展性强C、给设计师广阔的设计空间D、适合种类分类较多的布局结构正确答案：BCD5【简答题】什么是对称布局方式？正确答案：对称布局是以画面中轴对称为基准左右对等的方式。

《网页设计与制作》笔记_学习笔记

《网页设计与制作》笔记_学习笔记

《网页设计与制作》笔记第一章：网页设计基础1.1网页设计的定义与重要性1.2网页设计的历史与发展1.3设计原则与最佳实践1.4用户体验的基本概念第二章：网页设计工具与技术2.1设计软件介绍（如Photoshop、Sketch）2.2前端开发工具（如HTML、CSS、JavaScript）2.3响应式设计与框架（如Bootstrap、Foundation）2.4版本控制与协作工具（如Git、GitHub）第三章：网页布局与结构3.1网页布局的基本概念3.2网格系统与布局设计3.3导航设计与信息架构3.4模块化设计与组件化开发第四章：色彩与字体选择4.1色彩理论与配色技巧4.2字体的选择与排版4.3色彩与品牌形象4.4可访问性与色彩使用第五章：网页内容与互动5.1内容策略与信息呈现5.2图像与多媒体的使用5.3互动设计与用户反馈5.4SEO基础与内容优化第六章：网页测试与上线6.1测试类型与测试工具6.2性能优化与加载速度6.3上线流程与维护建议6.4数据分析与用户行为追踪第1章：网页设计基础网页设计的定义与重要性网页设计是指为网站创建和布局视觉内容的过程。

这包括网页的整体外观、结构和交互功能。

网页设计不仅涉及视觉元素的排版和配色，还包括用户如何与网页互动。

一个好的网页设计能够提升用户的体验，增加网站的访问量和转化率。

重要性：1.吸引用户：优秀的网页设计能够第一时间吸引用户的注意，提高用户的留存率。

2.增加可用性：良好的设计帮助用户更容易找到他们所需的信息，减少用户的挫败感。

3.提升品牌形象：专业的网页设计能够增强品牌的可信度和专业形象。

4.搜索引擎优化：设计良好的网页更容易被搜索引擎抓取，从而提升网站在搜索结果中的排名。

考试要点：网页设计的定义及其组成部分网页设计对用户体验和品牌形象的影响网页设计在市场营销中的作用网页设计的历史与发展网页设计的起源可以追溯到20世纪90年代初。

当时网页主要是以文本为主，简单的超链接连接不同的信息。

第1章-网页UI设计入门

第1章-网页UI设计入门

产品调研
UI视觉设计
产品技术开发

Bug测试
产品上线
产品迭代
网页UI设计入门
产品调研阶段
Sketch网站UI设计
产品定位
架构分析
市场分析
原型设计
网页UI设计入门
视觉设计
Sketch网站UI设计
素材灵 感搜集
确定界面 整体色调
确定页面风格布 局以及设计风格
界面风格
网页UI设计入门
产品技术开发
Sketch网站UI设计
Sketch 网站UI设计
主讲老师：
（微课版）
01 网页UI设计入门
网页UI设计入门
目录
Sketch网站UI设计
01 UI设计发展史 02 网页UI设计制作流程 03 UI设计的注意事项 03 配色对于UI设计的影响
网页UI设计入门
Sketch网站UI设计
UI设计发展史
网页UI设计入门
早期UI设计发展史
网页UI设计入门
Sketch网站UI设计
UI设计注意事项
网页UI设计入门
5大原则
Sketch网站UI设计
图稿一致性
图稿准确性
布局合理化
操作合理化
系统响应时间
网页UI设计入门
Sketch网站UI设计
配色设计队UI的影响
网页UI设计入门
网页配色方法
网页主色 网页背景色
网页辅色 网页点缀色
Sketch网站UI设计
邻色系
指在色相环中相距90度，或 者在色相环上相隔五六个数 位的两色，为邻近色关系。
网页UI设计入门
网页色彩搭配技巧
Sketch网站UI设计
对比色

第1章网页设计基础

第1章网页设计基础

1.2 Web设计基础
3. 网页设计一致性 一致性的网页设计原则使得访问者容易理解站点的结构，否则可能导致访问者陷入困惑。对优秀的 Web站点分析可以发现，优秀的网页虽然各有特色，但都遵守最基本的原则，即保持站点内部页 面之间的一致性。 要保持一致性，可以从页面的结构排版入手：
通过定义一致的页面模板，各个页面使用相同的页边距。 文本和图形之间保持相同的间距。 主要图形、标题或符号旁边留下相同的空白。 如果在第一页的顶部放置了公司标志，那么在其他各页面都放上这一标志，如果使用图标导航，
1.3 网页布局
1.3.2 布局设计类型 网页布局大致可分为“国”字型、“匡”字形型、标题正文型、框架型、封面型、Flash型、变化型等。
思考：1. 网易网站的布局设计属于哪种类型？ 2. 网络传播学院的网站首页布局设计属于哪种类型？
1.3 网页布局
1.3.3 布局设计元素 在网页文件中，会涉及很多的页面元素。如何将这些页面元素有机地组合起来，达到满意的视觉效
随着浏览器版本的标准化和制作工具的完善，该布局技术原来的缺点已经逐渐被克服，建议使用。
1.3 网页布局
3. 框架布局 框架由于不能进行精确的元素定位，因此不能独立完成页面的布局，它常常和表格配合使用。先用
框架将页面划分为几个区域，然后再用表格实现各区域的精确局部。常用在网站系统的后台页面设计 中。由于在HTML 5标准中已经不被推荐，所以该布局不建议使用。
1.3 网页布局
1.3.1 布局设计原则 通常可以从以下几个大的方面考虑布局的基本设计原则。 （1）网页布局的内容应来源于需求，栏目的重要程度决定了网页布局的形式。网页中要展示的内容必 须是依据站点的主要栏目进行规划的。同时可以将所要表达的相近的栏目集中在一个区域显现，构成 一种群体效应。 （2）网页布局应区分栏目模块的重要程度。分开栏目的主次性，重要栏目以顶部、左侧排列，次要的 栏目以底部、右侧排列。即重要信息、重要功能模块“靠上靠左”原则。 （3）网页布局必须尊重用户习惯。不仅要考虑不同类型用户的使用习惯差异，还要考虑中、英文等不 同语种用户的浏览习惯。

网页设计的基础-网页设计制作概述

网页设计的基础-网页设计制作概述

1.1 网页、网站的概念
1.1.2 静态网页和动态网页
动态网页是指必须经过应用程序服务器处理后才能交给Web 服务器送到客户端进行显示的网页文件。这类网页根据所采 用的应用程序服务器不一样，其文件名的扩展名也不一样。 可以是 hph，jsp，asp等等。
动态网页技术根据程序运行的区域不同，分为客户端动态技 术与服务器端动态技术。
2021/8/17
8
1.2 Web标准
1.2.3 采用Web标准的优点 2．服务器端的优点 •更少的代码和组件，容易维护； •带宽要求降低（代码更简洁），成本降低； •更容易被搜寻引擎搜索到； •改版方便； •提供打印版本不需要复制内容。
2021/8/17
9
1.3 网站的规划与设计
在建设网站之前，需要对网站进行一系列的分析和设计， 然后根据分析的结果提出合理的建设方案，这就是网站的规 划与设计。
网站的规划与设计一般应遵循以下三个原则： • 最大限度地满足用户需要； • 最有效地进行资源利用； • 使用方便，界面友好，运行高效；
常规的规划与设计方法一般有以下三种：自顶向下、自 底向上、不断增补的设计方法。
2021/8/17
10
1.4 网站开发工作流程
典型的Web开发工作流程包括以下几个阶段。
4）创建内容资源：包括使用Fireworks、Photoshop和 Flash创建图像、视频等。
5）组合、测试和部署站点：包括使用Dreamweaver设置 文本格式、编译资源，测试代码将站点发布到服务器上。
6）维护站点：包括使用Dreamweaver保持内容的更新。
2021/8/17
11
1.4 网站开发工作流程
1.2.2 建立Web标准的目的 简单地说，建立Web标准的目的是：

《网页设计与制作》教案

《网页设计与制作》教案

《网页设计与制作》教案第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讨论网页设计的标准和原则1.2 网页设计流程讲解网页设计的基本流程，包括需求分析、设计稿、切片、编码和测试等步骤1.3 网页设计工具介绍常用的网页设计工具，如Photoshop、Dreamweaver、Fireworks等第二章：HTML与CSS基础2.1 HTML概述介绍HTML的概念、作用和基本结构2.2 HTML标签讲解常用的HTML标签，如、段落、图像、、列表等2.3 CSS概述介绍CSS的概念、作用和基本语法2.4 CSS选择器讲解常用的CSS选择器，如类选择器、ID选择器、属性选择器等第三章：网页布局与排版3.1 网页布局概述介绍网页布局的概念和重要性3.2 常用的网页布局方法讲解常用的网页布局方法，如固定布局、百分比布局、弹性布局等3.3 排版与字体介绍排版和字体的概念、作用和常用属性3.4 响应式网页设计讲解响应式网页设计的概念、方法和实现方式第四章：网页特效与交互4.1 网页特效概述介绍网页特效的概念和作用4.2 JavaScript基础讲解JavaScript的概念、作用和基本语法4.3 常用的网页特效与实例讲解常用的网页特效，如鼠标悬停效果、下拉菜单、滚动动画等，并提供实例进行演示4.4 交互式网页设计讲解交互式网页设计的概念、方法和实现方式第五章：网页设计与制作实践5.1 实践项目概述介绍实践项目的需求和目标5.2 网页设计稿制作根据实践项目需求，使用设计工具制作网页设计稿5.3 网页编码与测试使用HTML和CSS编写网页代码，并进行测试和调试讲解网页发布的步骤和注意事项，以及常用的网页推广方法第六章：网页图像与多媒体6.1 图像格式与优化介绍常见的网页图像格式，如JPG、PNG、GIF等，以及图像优化方法6.2 音频与视频讲解如何在网页中嵌入音频和视频，以及常用的媒体格式6.3 Flash动画介绍Flash动画的概念、制作方法和在网页中的应用6.4 动态效果与动画讲解如何在网页中实现动态效果和动画，包括使用CSS动画和JavaScript实现第七章：网页服务器与数据库7.1 服务器概述介绍网页服务器的概念、作用和常用服务器软件7.2 数据库概述介绍数据库的概念、作用和常用数据库管理系统7.3 动态网页制作基础讲解动态网页制作的基本原理，如服务器端编程和数据库连接7.4 实践项目：搭建简易的个人博客系统讲解如何使用服务器和数据库搭建一个简易的个人博客系统，包括前端设计和后端编程第八章：网页安全与SEO介绍网页安全的概念和重要性，以及常见的网络安全威胁8.2 网页安全措施讲解如何防范网络攻击和提高网页安全性，如使用SSL证书、X-Frame-Options 等8.3 SEO概述介绍搜索引擎优化（SEO）的概念、作用和方法8.4 SEO实践技巧讲解如何优化网页内容、结构和，以提高搜索引擎排名第九章：网页设计与制作的进阶技巧9.1 响应式网页设计深入讲解响应式网页设计的原理和实践方法，包括媒体查询和弹性布局9.2 前端框架与库介绍常用的前端框架和库，如Bootstrap、jQuery、React等，以及如何使用它们提高网页制作效率9.3 网页性能优化讲解如何提高网页加载速度和性能，包括图片优化、代码压缩和缓存策略9.4 实践项目：制作一个响应式商务网站讲解如何使用响应式设计和前端框架制作一个商务网站，包括布局、样式和交互设计第十章：网页设计与制作的拓展与趋势10.1 网页设计与制作的未来趋势探讨网页设计与制作的发展方向，如虚拟现实（VR）、增强现实（AR）等技术的应用10.2 网页设计规范与最佳实践介绍网页设计规范和最佳实践，以提高网页质量和用户体验10.3 跨平台网页设计与制作讲解如何使用跨平台技术，如PWA（Progressive Web Apps）、Node.js等，实现网页在不同平台和设备的兼容性和性能10.4 实践项目：制作一个跨平台的网页应用重点和难点解析重点环节1：网页设计基础和流程网页设计的标准和原则是设计的基石，需要重点掌握。

第一~三章网页设计基础知识

第一~三章网页设计基础知识

1.1.2 Internet 1.什么是Internet Internet即“因特网”，它是目前全球 最大的、开放的计算机互联网络。是一个 基于TCP/IP的网络，由分布在各个国家的 数以万计的网络互联设备组成。

1.1.2 Internet 1.什么是Internet （1） Internet起源于美国国防部的高级 研究计划局，最初主要用于军事。 20世纪70年代迅速壮大，发展成科研和 教育机构服务的网络。 （2） Internet提供的服务：WWW服务 （网页浏览服务）、电子邮件、文件传输 （FTP）、在线聊天、网上购物、网络炒股、 联网游戏等等。

WWW服务器采用客户机/服务器的工作模式。
1.1.4 统一资源定位器URL 1.URL：是对Internet上资源的一种准确定位 机制，它以一种全世界统一的、唯一标识 来确定某个网络资源，可以访问Internet 任何一台主机或者主机上的文件。
1.1.4 统一资源定位器URL
2.URL的组成：检索资源所使用的协议类型、存放 资源的主机域名、资源所在的路径名与文件名。 3.URL的地址格式：应用协议类型://主机域名/路径/ 文件名
2.1 页面的构成元素
2. 页面的构成元素
设计是一个思考过程，制作是将思考表现出来。也就 是说设计是网页的核心和灵魂。 结合网页设计的过程，按照网页页面所包含的各个构 成元素分类阐述： 表现主题 网站名称和CI形象 设计风格 版式设计 色彩运用 网页导航 视听元素

2.2 主题设计
1. 网页制作工具 （1）文本编辑器---网页制作通常使用HTML语言， HTML文档可以使用多种文件编辑器进行编辑。 例如记事本、word、写字板等。 （2）FrontPage---是由微软公司推出的网页制作工 具。其界面与word极为相似。 （3）Dreamweaver---具有可视化编辑界面，用户 不必编写HTML源代码就可生成跨平台、跨浏览 器的网页，即使是初学者也能制作出专业水准的 网页，是网页设计者的首选工具。

《网页设计与制作》第一章：网页制作基础

《网页设计与制作》第一章：网页制作基础

【例】给网页设置 “励志学社”的文档标 题，可在头部输入以下代码： <TITLE>励志学社</TITLE>
（4）主体标记 网页的主体是“<BODY>……</BODY>”标记
对作用的范围
<BODY>标记用于定义HTML文档主体的开始， 它能够设置网页的背景图像、背景颜色、链接颜色 和网页边距等属性，其基本用法如下所示： <BODY Background="URL" Bgclolr=Color Bgpropeties=Fixed Leftmargin=n Link=Color Alink=Color Text=Color Topmargin=n Vlink=Color>
2.个人网站
❖ 个人网站具有较强个性化，是以个人名 义开发创建的网站，其内容、样式、风 格等都是非常有个性的。
3.专业网站
❖ 这类网站具有很强的专业性，通常只涉 及某一个领域，内容专业。如榕树下网 站（）即是一个专业文学网站。
4.职能网站
❖ 职能网站具有专门的功能，如政府职能 网站等。目前逐渐兴起的电子商务网站 也属于这类网站，较有名的电子商务网 站有阿里巴巴（）、 卓越网（）和当当网上书店（）等。
Fireworks通过自动变形，用动的效果，图片编 辑工具和拖拽工具能传送较精彩的 Fireworks 图片。
Macromedia Flash 工具可较快的制作 SWF 文件。
思考题
1.1 什么是WWW？什么是网页？ 1.2 一个完整的URL由哪几部分组成？举
出几个URL的例子。 1.3 如何设置IE的主页？如何用IE收藏一
➢ 浏览器
❖概述 ❖分类 ▪Internet Explorer ▪Netscape Navigator ▪Mosaic等专业浏览器以及一些以上述浏览器 为内核的专用浏览器。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

IP地址 一种地址格式。是Internet上的每一个网络和 每一台主机的唯一标识。
XXX.XXX.XXX.XXX
全球IP地址分配表 根据IP地址查出主机所处位置 （具体到区、县）
0~255

域名 IP地址是一个32位二进制数，不便于记忆，于 是提出采用域名代表IP地址。 域名采用分层次结构，入网的每台主机都可以 有一个类似下面的域名：
网站的系统规划

网站目标； 网站开发使用软件环境、硬件环境情况； 网站美术设计说明； 网站的交互性和用户友好界面设计； 网站实现哪些功能； 网站的栏目安排和结构； 网站内容的相互链接关系；
网站的目录及结构要求

所有文件不要都存放在根目录下 按栏目内容建立子目录 – 整个网站为一个文件夹 – 图片放在images子文件夹下 网页命名规则 – 首页文件名：index.html – 其他文件/文件夹名：不能出现中文
主机名.单位名.机构名.国家名
www . sina . com . cn
提供万维网 主页服务的 服务器 中国 新浪 公司 商业类
域名管理机构

CNNIC是“中国互联网络信息中心”
（China Internet Network Information Center）
/
RGB色彩模式和Web安全色

网页制作中使用最广泛的是RGB色彩模式的十六 进制显示模式。即用3个00~FF的十六进制数来 表示组成颜色的红、绿、蓝色的数值。例如：00 0000表示黑色， FFFFFF表示白色，00FF00表 示红色，0000FF表示蓝色，总共有224种颜色。 我们把在不同的操作系统和浏览器中显示效果一 致的216种颜色称为网络安全色。颜色拾取框中 可以直接选取的颜色都是 Web安全色
HTML标t;”所围住，如 <P> 标记名与小于号之间不能留有空白字符。 参数只可加于起始标记中,多个参数以空格分隔 如 <font size=“+2”>Hello</font> 。 标记名前加上“/”便是其终结标记，如 </font> 标记字母大小写皆可。

整份文件处于标记<HTML>与</HTML>之间 <HTML>用以声明这是 HTML 文件，让浏览器认出并正 确处理此HTML 文件。 文件分两部分，由<HEAD>至</HEAD>称为开头 <BODY>至</BODY>称本文。 开头部分用以存载重要资讯，只有本文部分会被显示。 所以大部分标记会运用于本文部分。 <TITLE>所标示的是文件的标题。 会出现于浏览器顶部，所以每页有不同而明确的标题。 上述标记中只有<BODY>具参数设定
图1-1 网页的超文本结构
WWW服务中的客户机与服务器

WWW服务器上的主要内容 – 静态网页文件 – 交互式网页文件 – 与网页相连接的各种媒体文件 – 支持交互式网页的数据文件 客户机的工作 – 请求网页 – 上传数据 – 显示结果
IP地址和域名

HTML基本元素-图片

标记&参数描述： <img src= #> # =图象的 URL 注意： 图象URL的地址描述方法： 相对路径描述方法对齐

图片位于网页文件当前文件夹下 <img src= 图片文件名> 图片位于网页文件下一级文件夹下 <img src= 文件夹名/图片文件名> 图片位于网页文件上一级文件夹下 <img src= ../文件夹名/图片文件名>
本章内容

1. 互联网基础
2. 网页设计知识
3. 网页标准化技术 4. 网站设计软件
5. 网站制作流程
6. HTML语言
1.1 Internet基础

什么是Internet?
客户机与服务器

Internet连接着难以计数的计算机，按照功能它们 大致可分为服务器和客户机两类。 – 服务器是提供资源和服务的计算机。 – 客户机是供用户使用资源和享受服务的计算机。
课程安排

教学目的
教学内容 考核方式
平时（10%）： 考勤+课堂练习+上机作业 笔试（40%）： 考核基本概念，基本操作 综合实验（50%）： 考核综合能力
学习方法

第1章 网页设计基础
计算机信息中心
授课教师：邵熹雯
jsjsxw@
第 1 章 网页设计基础（补充内容） 第 2 章 Dreamweaver CS6基础
第 3 章 页面与文本
第 4 章 图像与多媒体 第 5 章 超链接
第 6 章 表格
第 7 章 CSS样式 第 8 章 CSS+DIV布局层 第 9 章 框架 第 10 章 AP DIV和Spry 第 11 章 行为 第 12 章 模板和库 第 13 章 表单
HTML页面文件标记

<HTML> ； <HEAD> ； <TITLE> ； <BODY> HTML文件的基本架构
<HTML> <HEAD> <TITLE> 网页的标题 </TITLE> </HEAD> <BODY> 网页的内容，很多标记都作用于此 </BODY> </HTML>
图像元素在网页中的应用

LOGO(标志) 标题 照片和插图 广告横幅（Banner） 背景 导航栏
网页制作软件的主要功能和特点

PhotoShop是网络图形的处理软件 Flash是制作适合网络传输的流媒体动画的专用 软件。 Dreamweaver是集网页制作和网站管理于一身 的网页编辑软件
HTML基本元素-字体

标记描述：<font > 具体文字 </font> 参数描述： <font size= ... color= ... > ... </font> 字体大小，字体颜色 rrggbb 16 进制数码，或者是下列预定义色彩： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gr ay, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
图 1-2 客户机和服务器
Internet提供的服务

万维网WWW服务：(超文本传输服务) http协议。客户端软件：IE浏览器等 http的主要作用就是请求由超级连接引用的页面 FTP服务：(文件传输服务) ftp协议。客户端软件： IE浏览器、flashfxp等 Telnet服务：(远程登陆服务) telnet协议。客户端软件： Pcanywhere等 Email服务：(电子邮件服务) pop3和smtp协议。 客户端软件： IE浏览器、outlook等
课程安排

教学目的 教学内容
考核方式
课程安排

教学目的
教学内容 考核方式
掌握网站基础知识和 工作原理，熟练使用网页 制作工具Dreameaver CS6 制作简单的完整网站。
课程安排

教学目的
教学内容 考核方式

标记<BODY>的参数设定
例子： <BODY text="#000000” link="#0000FF" alink="#FF0000” vlink="#0000FF“background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2>
中文域名280/年

域名管理机构

ICANN:国际互联网名称和地址分配组织

（The Internet Corporation for Assigned Name s and Numbers）

URL

统一资源定位器 （Uniform Resource Locator简称URL）。URL 是全球WWW网服务器资源的标准寻址定位编码， 它被用来确定资源的相应位置。 URL结构 资源类型、存放资源的主机域名和资源文件路径 及名称
http: // /lx/index.htm
HTML标记的分类

围堵标记：成对出现 它以起始标记及终结标记将文字围住，令其达到 预期显示效果。 <b>Creation of Webpage</b> is my favourite. 空标记：单独出现 只有起始标记没有终结标记。 I love Creation of Webpage. <br>It's a wonderful place. 其中换行标记<br>便属空标记。
资源类型 主机域名/IP 网页文件
URL是WEB资源的唯一标识！
超级链接

超级链接 – 链接源:网页中各种元素对象 – 链接目标:通过相对路径方式指定,反映成URL
网页图像基础-位图和矢量图

位图是由分配了特定位置和颜色值的点(象素)的 排列组成。位图的色彩和色调变化丰富，但占用 空间较多。 矢量图用一组绘图指令来描述图像的内容，这些 指令根据图形的几何特性定义图形的轮廓，并用 颜色进行描边和填充。矢量图主要用于表示线框 型的图画、工程制图、艺术字等。矢量图文件的 容量较小。

将位图和矢量图像放大前后的实际效果
常用图像格式及其特点

BMP格式：Windows最早的图像格式 GIF格式：透明背景，动画，256色 JPEG格式：文件大小和效果的完美平衡 PNG格式：gif的拓展， 28到232种颜色 PSD格式：PhotoShop，非位图。 PCW格式：不压缩的位图。专业摄影。