《网页设计》完整课件 网页设计2

1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作 流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage

《网页设计》完整课件
目录
• 网页设计概述 • 网页设计基础 • 网页设计技巧 • 网页设计实战 • 网页设计工具 • 网页设计发展趋势
01
网页设计概述
定义与特点
定义
网页设计是使用HTML、CSS和 JavaScript等技术，对网页进行布局 、配色、排版和交互设计的艺术。
特点
网页设计具有跨平台、跨设备的特性 ，能够通过互联网快速传播信息，提 供良好的用户体验。
色彩搭配
色彩理论
掌握基本的色彩理论，了解颜色搭配的原则和技巧，如对比、调 和等。
品牌色彩
根据品牌形象和定位，选择合适的色彩搭配，以传达品牌价值和特 点。
色彩心理学
了解不同颜色给人的心理感受，根据目标用户的需求和喜好进行色 彩搭配。
排版与布局
字体选择
01
根据内容和风格，选择合适的字体，以提升页面可读性和视觉
3
丰富的符号库
提供各种符号库，方便设计师快速创建重复元素 。
Sketch
矢量设计
Sketch是一款专注于网页设计的矢量图形软件，支持多种 平台。
插件生态
Sketch拥有丰富的插件生态，可扩展其功能，满ch支持实时预览功能，方便设计师在多种设备上查看 设计效果。
可访问性
确保网站对所有用户都易于访问和使用，满 足不同用户的需求。
一致性
保持设计风格的一致性，有助于提高网站的 辨识度和专业度。
响应式设计
根据不同设备和屏幕大小自适应布局，提供 良好的跨平台体验。
02
网页设计基础
HTML基础
HTML标签
标题、段落、列表、链接、图片等常用标签的用法。
HTML语义化标签
Figma

相对定位在 CSS 中的写法是“position:relative；”。其表达的意思是以 父级（它所在的容器）的坐标原点为坐标原点。无父级则以 body 的坐标原 点为坐标原点，配合上、右、下、左（TRBL）进行定位，当父级内有 padding 等 CSS 属性时，当前级的坐标原点则参照父级内容区的坐标原点进 行定位，如图所示。
一、Web 标准的含义
Web 标准是由 W3C 和其他标准化组织制定的一套规范，包括 XHTML、 JavaScript及 CSS 等一系列标准，其目的在于创建一个统一的用于 Web 表 现层的技术标准，以便于通过不同浏览器或终端设备（计算机、手机等）向 最终用户展示信息内容。
从狭义上讲，Web 标准就是采用 Div+CSS 代码进行网站建设，现在 Div+CSS 俨然成了标准化的代名词。
任务 制作网站首页和子页——使用 Div+CSS 技术制作网页
2. 缺点
对于 CSS 的高度依赖， 使得网页设计变得比较复杂。 CSS 文件异常将会影响整个网站的正常显示。 对于用 Div+CSS 技术制作的网站，非常容易出现浏览器兼容性问题。 Div+CSS 技术对搜索引擎的优化效果，取决于网页设计者的专业水平而 不是Div+CSS 技术本身。
任务
制作网站首页和子页——使用 Div+CSS 技术制作网页
LOGO
任务 制作网站首页和子页 ——使用 Div+CSS 技术制作网页
2
任务 制作网站首页和子页——使用 Div+CSS 技术制作网页
◆了解 Web 标准的含义、构成，认识 Div ◆熟练掌握使用 Div+CSS 技术构建网页的方法
任务 制作网站首页和子页——使用 Div+CSS 技术制作网页

3 排版规范
学习字体大小、层次和对齐的规范，使你的文本易读且美观。
网页元素构成与布局
1
视觉平衡
2
通过布局元素创建视觉平衡，使设计更
加吸引人。
3
网格系统
了解网页的网格系统，实现页元素的 有序布局。
R es p o n siv en es s
设计响应式网页布局，让你的网页在不 同设备上都展现出色。
美术设计与图片处理
网页平面设计基础教程
在这个《网页平面设计基础教程》中，我们将介绍设计原则、颜色搭配、字 体排版、网页布局、美术设计、图片处理以及交互设计基础与实践。
设计原则与思路
简洁而有力
通过设计原则的运用，创造 简洁而有力的网页视觉效果。
平衡与对比
掌握平衡和对比原则，让你 的设计更吸引人。
重点突出
学会通过设计手法突出重点 内容，吸引用户的注意力。
创意平面设计
掌握创意平面设计技巧，为你的 网页增添视觉冲击力。
图片处理
学习图片处理技术，提升网页中 的视觉效果。
素材资源
发现丰富的图形资源库，为你的 网页增色添彩。
交互设计基础与实践
1
用户体验
注重用户体验，通过交互设计增强用户对网页的参与感。
2
动效设计
学习动效设计原则，为你的网页增添生动的交互效果。
网页颜色搭配与运用
色彩心理学
通过了解色彩心理学，掌握正确 的网页颜色运用。
配色方案
学习如何选择合适的配色方案， 打造吸引人的网页。
对比与鲜明
运用对比和鲜明的色彩，让你的 网页脱颖而出。
字体排版要点与技巧
1 字体选择
掌握字体选择的要点，让你 的设计看起来更专业。

网页设计理论
色彩的色调变化
配色决定印象的三要素 1、色调 2、色相 3、对比
网页设计理论
1、主色 2、背景色 3、融合色 4、强调色
色彩的分类
网页设计理论
特点： 1、内容多，功能多。 2、以点盖面为主。 3、首页一般突出教育文化
布局： 横向布局较多 色彩： 以绿色、蓝色较多 ……
教育类网站
网页设计理论
特点： 1、布局简单，学问多。 2、用户体验很重要。 3、精神感受和粘合度高。
布局： 布局简单，速度快。 色论
CMY （CMYK） -- 减色混合色彩模型 青（Cyan）、品红（Magenta）、黄（Yellow）分别是红（R）、绿（G）、蓝（B）三色的互补色，是硬拷贝设备上输出图形的颜色，如彩 色打印、印刷等。它们与荧光粉组合光颜色的显示器不同，是通过打印彩墨（ink）、彩色涂料的反射光来显现颜色的，是一种减色组合。 由青、品红和黄三色组成的色彩模型，使用时相当于从白色光中减去某种颜色，因此又叫减色系统。 在笛卡儿坐标系中，CMY色彩模型与RGB色彩模型外观相似（如图），但原点和顶点刚好相反，CMY模型的原点是白色，相对的顶点是黑色。 CMY模型中的颜色是从白色光中减去某种颜色，而不是象RGB模型那样，是在黑色光中增加某种颜色。 因此，CMY三种被打印在纸上的颜色，我们可以理解为： 青（C）= 白色光 — 红色光 品红（M）= 白色光 — 绿色光 黄（Y）= 白色光 — 蓝色光 由于白色光是由红、绿、蓝三色光相加得到的，上面的等式可以还原为我们常用的加色等式： 青（C）=（红色光+绿色光+蓝色光）—红色光=绿色+蓝色 品红（M）=（红色光+绿色光+蓝色光）—绿色光=红色+蓝色 黄（Y）=（红色光+绿色光+蓝色光）—蓝色光=红色+绿色

提高网站流量，吸引更多 潜在客户，提高品牌知名 度和销售额。
SEO基本原则
关键词研究、内容质量、 网站结构、外部链接和内 部链接等。
网站优化技巧
页面加载速度
优化图片、压缩代码、使 用CDN等方式提高页面加 载速度。
移动端优化
确保网站在移动设备上显 示良好，提高用户体验。
响应式设计
使网站能够适应不同设备 和屏幕尺寸，提供一致的 用户体验。
网站推广策略
关键词广告 社交媒体营销
内容营销 合作与交换链接
利用搜索引擎关键词广告推广网站。
通过社交媒体平台发布有价值的内容，吸引目标受众。 创建高质量、有价值的文章、视频等，吸引潜在客户并提高品
牌知名度。 与其他网站合作，互相推广，增加网站流量。
06 网页制作实例教 程
制作个人网站
总结词
展示个人风格和兴趣
字体选择
选择清晰易读的字体，确保文字内容 在各种设备和屏幕分辨率上都能清晰 显示。
03 网页布局与设计
网页布局的基本原则
保持简洁
避免页面过于拥挤，突出核心内容，使用户 能够快速找到所需信息。
导航清晰
提供易于理解的导航菜单，使用户能够方便 地浏览不同页面。
层次分明
合理划分页面区域，使内容按照重要程度进 行排序，提高用户体验。
制作电商网站
总结词
商品展示与销售
详细描述
电商网站是商品展示和销售的重要平台，需要展示丰 富的商品信息和购物体验。在制作电商网站时，需要 考虑如何设计出美观、实用的商品展示页面，以及如 何提供便捷的购物流程和支付方式。
制作电商网站
总结词
用户友好性
详细描述
电商网站应该具有用户友好性，提供良好的 用户体验和购物体验。在制作电商网站时， 需要考虑如何设计出易于操作和使用的界面 和功能，以及如何提供个性化的服务和支持

2. 最好不要使用汉字命名文件和文件夹。 3. 文件名中不要使用大写英文字母。
任务 2 创建“fuligong”站点——新建和管理站点
4. 运算符号不能用在文件名的开头。 5. 比较长的文件名可以使用下划线“_”隔开多个单词或关键 字。 6. 在大型网站中，分支页面的文件应存放在单独的文件夹中。 7. 在动态网站中，用来存放数据库的文件夹一般命名为“data” 或者“database”。
任务 3 为首页设置头信息和页面属性——页面总体设置
“编辑字体列表”对话框
任务 3 为首页设置头信息和页面属性——页面总体设置
设置链接样式
任务 3 为首页设置头信息和页面属性——页面总体设置
设置网页标题和编码
五、“属性”面板
“属性”面板用于对网页中元素属性进行设置，“属性”面板中的属性项 动态关联至鼠标选定的网页元素。如图所示，分别展示的是网页中文本的属 性面板和图像元素的属性面板。
“属性”面板（文本属性）
“属性”面板（图像属性）
任务 1 面板基本操作——初识 Dreamweaver CS3
六、“结果”面板
任务 2 创建“fuligong”站点——新建和管理站点
二、在 Dreamweaver 中定义站点
为便于管理和编辑站点，在创建网页之前，首先要在 Dreamweaver 中定 义站点。定义站点可以将本地磁盘中的站点文件夹同 Dreamweaver 建立一定 的关联，可以使用 Dreamweaver 上传或下载站点内容。
◆掌握设置网页头信息的方法 ◆熟悉页面属性的设置方法
任务 3 为首页设置头信息和页面属性——页面总体设置
一、设置头信息
头信息包括网页关检索网页的所有内容，而是只检索网页的关键字。 如果想要自己的网页能够被搜索引擎检索到，最好把关键字设置为人们经常 使用的词语。

一种简单滚动图片制作方法1：

将下面代码放在<body>和</body>之间就可以了： <p> <marquee width="495" height="150"> 滚动图片 图片地址和名称 <img src="鸽.gif" > <img border="0" src="旗.gif" > <img border="0" src="猪.gif" > </marquee> </p>
二、编辑网页
1、输入汉字：在新建的“new_page_1.htm” 页面上输入汉字信息，并进行字体、字号、 颜色等相关修饰。 2、插入图片：在当前页面上“插入”图片， 请单击“命令菜单”下的“插入”/“图 片”/“来自文件（或剪贴画）”，选择一张 图片，单击“确定”。 教学网站： /qjbok
的 “插入 /层”
2、输入数据：单击层，便可以向其中输入文字，
插入图片、动画等等信息。 3、移动：拖动层的左上角控制柄，就可以任意移 动层到任何位置。 4、重叠层：可以将多个层重叠，以达到一定的效 果。 5、改变层次：双击“层控制柄”，可以用鼠标 拖动相应的层到任何位置，到达改变层的次序。
二、编辑网页
3、预览：单击屏幕左下角的“预览”按钮，于是新 网页在浏览器下的显示效果就出现了。再单击“设 计”返回页面设计状态，可以继续修改。也可以单 击菜单栏“文件”下的“在浏览器中预览/ Microsoft Internet Explorer”或直接按<F12>键可 以在IE下预览制作的网页。 4、保存：单击 “文件”/“保存”，为文件起个名字， 并修改“保存位置”为D盘上“座号姓名”文件夹， 然后单击“确定”。这样所有网页使用的文件都放 在这个文件夹中，便于使用和管理。例如：888张 三 思考题：1、怎样找到你的文件夹？ 2、如何修改已经存盘后的网页文件？

8
Spry选项卡式面板
3．设置默认的打开面板
① 在“文档”窗口中单击选项卡左上角的
蓝色区域选择该“Spry选项卡式面板”。
② 在“属性”面板中，从“默认面板”下 拉列表中选择默认情况下要打开的面板。
9
Spry选项卡式面板
4．编辑面板
① 将鼠标定位在选项卡标题所在区域即可
对该标题进行编辑操作。
② 对于插入到页面中各“Spry选项卡式面 板”所对应的内容，鼠标移动到相应的“Spry 选项卡”标题时，会显示“单击以显示面板内 容”按钮，单击该按钮即可显示面板内容。
JavaScript文件和相关图
像文件到站点目录的 SpryAssets文件夹内。单 击“确定”按钮进行复制， 否则将不能保证“Spry菜 单栏”的正确运行。
6
Spry选项卡式面板
1．插入选项卡式面板
① “插入”栏|“Spry”类型|“Spry选项卡面板 ” 按钮
或
板 ”
菜单栏“插入”|“布局对象”|“Spry选项卡面
4
Spry菜单栏
3．设置Spry菜单栏样式
设置方法：先选中要设置的菜单（单击选中）。然后在“属性
”面板中选择“样式”就可以进行设置
5
Spry菜单栏
4．保存含有“Spry菜单栏”的页面
在保存含有“Spry菜单栏”的 页面文件时，会弹出“复 制相关文件”对话框。表 示软件将自动复制Spry菜 单栏所需要到的CSS文件、
21
完
22
百叶窗来隐藏或显示元素。
上滑/下滑 ：上下移动元素。 增大/收缩 ：使元素变大或变小。 晃动 ：模拟从左向右晃动元素。 挤压 ：使元素从页面的左上角消失。
20

《网页设计与制作》 19
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。