网页设计PPT
合集下载
《网页设计基础》PPT课件
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
网页设计与网站建设课件3(PPT)
优化图片
合理使用图片，添加alt属性，提高网站的可读性和SEO效果。
响应式设计
确保网站在不同设备和屏幕尺寸上的良好显示效果。
网站推广策略
社交媒体营销
利用社交媒体平台进行品牌宣传和内容推广。
搜索引擎广告
投放搜索引擎广告，提高网站的曝光率和点 击率。
电子邮件营销
利用电子邮件向用户发送定制的内容和优惠 信息，提高用户忠诚度。
度。
响应式设计
确保网站在各种设备和 屏幕尺寸上都能良好地
显示和操作。
内容为王
重视内容的价值和质量， 以提供有价值的信息吸
引用户。
网页布局与排版
01
02
03
04
布局类型
选择合适的布局类型，如固定 布局、流体布局或响应式布局
。
页面层次
合理安排页面元素的层次，突 出重要内容，引导用户视线。
文字排版
选择合适的字体、字号、行距 和字重，提高文本的可读性。
感谢您的观看
使用CSS媒体查询技术，为不同设备屏幕设 置不同的样式。
流式布局
弹性图片
使用百分比宽度代替固定宽度，使元素在 不同屏幕尺寸下保持相对位置。
ห้องสมุดไป่ตู้
使用相对单位（如百分比）设置图片宽度 ，使其在不同屏幕尺寸下保持比例。
04 网站优化与推广
网站SEO优化
01
关键词优化
合理选择和布局关键词，提高网站 在搜索引擎中的排名。
图片和多媒体
合理使用图片、视频等多媒体 元素，增强视觉效果。
色彩与字体设计
色彩搭配
选择与品牌或主题相符的颜色 ，并注意色彩的对比度和和谐
度。
字体选择
根据内容和设计风格选择合适 的字体，考虑字体的可读性和 文化含义。
合理使用图片，添加alt属性，提高网站的可读性和SEO效果。
响应式设计
确保网站在不同设备和屏幕尺寸上的良好显示效果。
网站推广策略
社交媒体营销
利用社交媒体平台进行品牌宣传和内容推广。
搜索引擎广告
投放搜索引擎广告，提高网站的曝光率和点 击率。
电子邮件营销
利用电子邮件向用户发送定制的内容和优惠 信息，提高用户忠诚度。
度。
响应式设计
确保网站在各种设备和 屏幕尺寸上都能良好地
显示和操作。
内容为王
重视内容的价值和质量， 以提供有价值的信息吸
引用户。
网页布局与排版
01
02
03
04
布局类型
选择合适的布局类型，如固定 布局、流体布局或响应式布局
。
页面层次
合理安排页面元素的层次，突 出重要内容，引导用户视线。
文字排版
选择合适的字体、字号、行距 和字重，提高文本的可读性。
感谢您的观看
使用CSS媒体查询技术，为不同设备屏幕设 置不同的样式。
流式布局
弹性图片
使用百分比宽度代替固定宽度，使元素在 不同屏幕尺寸下保持相对位置。
ห้องสมุดไป่ตู้
使用相对单位（如百分比）设置图片宽度 ，使其在不同屏幕尺寸下保持比例。
04 网站优化与推广
网站SEO优化
01
关键词优化
合理选择和布局关键词，提高网站 在搜索引擎中的排名。
图片和多媒体
合理使用图片、视频等多媒体 元素，增强视觉效果。
色彩与字体设计
色彩搭配
选择与品牌或主题相符的颜色 ，并注意色彩的对比度和和谐
度。
字体选择
根据内容和设计风格选择合适 的字体，考虑字体的可读性和 文化含义。
网页制作PPT课件
CSS历史
CSS最早在1996年由W3C发布，经过多个版本的发展，目前最新的版本是CSS3，增加了许多新的特性和 功能。
CSS选择器
元素选择器
通过HTML元素名称来选择并应用样式，例如`p { color: red; }`会将所有段落的文本颜色设置为红 色。
ID选择器
通过ID来选择并应用样式，以`#`开头，例如 `#myID { font-size: 20px; }`会将ID为myID的元 素的字体大小设置为20像素。
类选择器
通过类名来选择并应用样式，以`.`开头，例如 `.myClass { background-color: yellow; }`会将 所有class属性为myClass的元素的背景色设置为 黄色。
属性选择器
通过元素的属性和值来选择并应用样式，例如 `[href] { text-decoration: none; }`会将所有带有 href属性的元素的文本装饰去除。
表单验证
为了提高用户体验和确保数据准确性，需要对表单进行验证，如检 查输入格式、验证必填项等。
交互设计
通过合理的布局和美观的设计，使表单易于填写和提交，同时提供 友好的用户反馈，如错误提示、成功提示等。
导航菜单设计
1 2
导航类型
根据网页结构和内容，可以选择合适的导航类型， 如水平导航、垂直导航、面包屑导航等。
React框架介绍及使用
JSX语法
React 使用 JSX 语法，允许在 JavaScript 中编写 HTML 结构， 提高了开发效率。
组件化开发
React 同样支持组件化开发，可以将页面拆分成多个独立的组件。
状态管理
React 提供了状态管理功能，可以方便地管理组件的状态和数据。
CSS最早在1996年由W3C发布，经过多个版本的发展，目前最新的版本是CSS3，增加了许多新的特性和 功能。
CSS选择器
元素选择器
通过HTML元素名称来选择并应用样式，例如`p { color: red; }`会将所有段落的文本颜色设置为红 色。
ID选择器
通过ID来选择并应用样式，以`#`开头，例如 `#myID { font-size: 20px; }`会将ID为myID的元 素的字体大小设置为20像素。
类选择器
通过类名来选择并应用样式，以`.`开头，例如 `.myClass { background-color: yellow; }`会将 所有class属性为myClass的元素的背景色设置为 黄色。
属性选择器
通过元素的属性和值来选择并应用样式，例如 `[href] { text-decoration: none; }`会将所有带有 href属性的元素的文本装饰去除。
表单验证
为了提高用户体验和确保数据准确性，需要对表单进行验证，如检 查输入格式、验证必填项等。
交互设计
通过合理的布局和美观的设计，使表单易于填写和提交，同时提供 友好的用户反馈，如错误提示、成功提示等。
导航菜单设计
1 2
导航类型
根据网页结构和内容，可以选择合适的导航类型， 如水平导航、垂直导航、面包屑导航等。
React框架介绍及使用
JSX语法
React 使用 JSX 语法，允许在 JavaScript 中编写 HTML 结构， 提高了开发效率。
组件化开发
React 同样支持组件化开发，可以将页面拆分成多个独立的组件。
状态管理
React 提供了状态管理功能，可以方便地管理组件的状态和数据。
网站设计WebDesign01精品PPT课件
网站程序设计语言
• JavaScript和VBScript脚本语言 • Java • CGI • ASP • • PHP • JSP
1.4 常用网站管理与制作软件
HTML和XHTML
HTML HTML（Hyper Text Markup Language）是网页制作 的主要标记语言。可用任何文本编辑器进行编写。 XHTML XHTML（Extensible HTML），是更严谨、更纯净的 HTML，符合Web设计标准，是未来发展的方向软件
Fireworks 主要用于制作网页图像、标志、GIF动画、图像按钮与 导航栏等。 Flash 主要用于制作矢量动画，如广告、网站片头动画、动画 短片、MTV等。
Photoshop 具有的强大功能完全涵盖了网页设计所涉及到的各种需 求（除了多媒体）。
1.4 常用网站管理与制作软件
页面左侧
➢是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网 站的主要内容。
➢如果导航栏内容不多，不超过两排，可以根据网站风格灵活摆放， 上方或左侧等。
➢如果网站栏目很多，可以将导航栏分为多排放置在Logo右侧或下 方。
页面上方
•如果导航栏内容较多的话，尽量使用文字超链接而不 用图片。不过，如果导航栏内容不多，或者网页内容 比较活泼的话，多采用图片或Flash制作导航栏。
图片导航栏
Flash导航栏
1.3 从功能角度分析网页
3.广告条
➢广告条又称Banner，其功能是宣传网站或替其他企业做广告，以 赚取广告费。 ➢Banner的尺寸是有国际标准的，按照标准制作可以使网站更显专 业
• 468*60 • 120*60 • 88*31 • 120*240
1.3 从功能角度分析网页
• JavaScript和VBScript脚本语言 • Java • CGI • ASP • • PHP • JSP
1.4 常用网站管理与制作软件
HTML和XHTML
HTML HTML（Hyper Text Markup Language）是网页制作 的主要标记语言。可用任何文本编辑器进行编写。 XHTML XHTML（Extensible HTML），是更严谨、更纯净的 HTML，符合Web设计标准，是未来发展的方向软件
Fireworks 主要用于制作网页图像、标志、GIF动画、图像按钮与 导航栏等。 Flash 主要用于制作矢量动画，如广告、网站片头动画、动画 短片、MTV等。
Photoshop 具有的强大功能完全涵盖了网页设计所涉及到的各种需 求（除了多媒体）。
1.4 常用网站管理与制作软件
页面左侧
➢是网站中所有重要内容的概括，可以让浏览者在最短时间内了解网 站的主要内容。
➢如果导航栏内容不多，不超过两排，可以根据网站风格灵活摆放， 上方或左侧等。
➢如果网站栏目很多，可以将导航栏分为多排放置在Logo右侧或下 方。
页面上方
•如果导航栏内容较多的话，尽量使用文字超链接而不 用图片。不过，如果导航栏内容不多，或者网页内容 比较活泼的话，多采用图片或Flash制作导航栏。
图片导航栏
Flash导航栏
1.3 从功能角度分析网页
3.广告条
➢广告条又称Banner，其功能是宣传网站或替其他企业做广告，以 赚取广告费。 ➢Banner的尺寸是有国际标准的，按照标准制作可以使网站更显专 业
• 468*60 • 120*60 • 88*31 • 120*240
1.3 从功能角度分析网页
《dw网页设计基础》课件
代码优化
精简代码，减少冗余，提 高网页加载速度。
SEO优化技巧
关键词优化
合理设置关键词，提高网站在搜索引擎 中的排名。
链接优化
建立内外链接，提高网站的权重和信 任度。
内容优化
提供有价值的内容，吸引用户点击和 停留。
移动端优化
适配移动设备，提高用户体验和搜索 引擎友好度。
网站发布与推广
发布流程
介绍网站发布的基本流程， 包括测试、上线、备份等环
固定布局
网页的宽度和位置固定，适合设计有固定框 架的网站。
响应式布局
根据不同设备屏幕大小自适应调整，实现跨 平台访问。
流动布局
网页宽度自适应，适合设计灵活多变的网站 。
混合布局
结合固定、流动和响应式布局的特点，满足 多种需求。
文字排版技巧
选择合适的字体
根据网站风格选择合适的字体，如宋 体、微软雅黑等。
对比色方案
使用对比强烈的颜色，突出重点内容，增加 视觉冲击力。
字体在网页设计中的应用
信息传达
选择合适的字体，能够清晰地传达信息，提高用户体 验。
品牌识别
独特的字体可以成为品牌的标志，增强品牌识别度。
可读性
选择易读的字体，确保用户在浏览网页时能够快速获 取信息。
04
网页交互与动画
常见网页交互效果
传达品牌形象
通过色彩的选择，传达网站的品牌形象和风格 。
引导视觉流程Biblioteka 色彩可以引导用户的视线，突出重点内容，使 页面更加有序。
营造氛围
色彩可以营造出不同的氛围，如温馨、活力、科技等，影响用户情感。
常见网页配色方案
单色方案
使用单一颜色，通过调整透明度或饱和度来 创造层次感。
精简代码，减少冗余，提 高网页加载速度。
SEO优化技巧
关键词优化
合理设置关键词，提高网站在搜索引擎 中的排名。
链接优化
建立内外链接，提高网站的权重和信 任度。
内容优化
提供有价值的内容，吸引用户点击和 停留。
移动端优化
适配移动设备，提高用户体验和搜索 引擎友好度。
网站发布与推广
发布流程
介绍网站发布的基本流程， 包括测试、上线、备份等环
固定布局
网页的宽度和位置固定，适合设计有固定框 架的网站。
响应式布局
根据不同设备屏幕大小自适应调整，实现跨 平台访问。
流动布局
网页宽度自适应，适合设计灵活多变的网站 。
混合布局
结合固定、流动和响应式布局的特点，满足 多种需求。
文字排版技巧
选择合适的字体
根据网站风格选择合适的字体，如宋 体、微软雅黑等。
对比色方案
使用对比强烈的颜色，突出重点内容，增加 视觉冲击力。
字体在网页设计中的应用
信息传达
选择合适的字体，能够清晰地传达信息，提高用户体 验。
品牌识别
独特的字体可以成为品牌的标志，增强品牌识别度。
可读性
选择易读的字体，确保用户在浏览网页时能够快速获 取信息。
04
网页交互与动画
常见网页交互效果
传达品牌形象
通过色彩的选择，传达网站的品牌形象和风格 。
引导视觉流程Biblioteka 色彩可以引导用户的视线，突出重点内容，使 页面更加有序。
营造氛围
色彩可以营造出不同的氛围，如温馨、活力、科技等，影响用户情感。
常见网页配色方案
单色方案
使用单一颜色，通过调整透明度或饱和度来 创造层次感。
《网页设计》完整课件网页设计
《网页设计》完整课件
目录
• 网页设计概述 • 网页设计基础 • 网页设计技巧 • 网页设计实战 • 网页设计工具 • 网页设计发展趋势
01
网页设计概述
定义与特点
定义
网页设计是使用HTML、CSS和 JavaScript等技术，对网页进行布局 、配色、排版和交互设计的艺术。
特点
网页设计具有跨平台、跨设备的特性 ，能够通过互联网快速传播信息，提 供良好的用户体验。
色彩搭配
色彩理论
掌握基本的色彩理论，了解颜色搭配的原则和技巧，如对比、调 和等。
品牌色彩
根据品牌形象和定位，选择合适的色彩搭配，以传达品牌价值和特 点。
色彩心理学
了解不同颜色给人的心理感受，根据目标用户的需求和喜好进行色 彩搭配。
排版与布局
字体选择
01
根据内容和风格，选择合适的字体，以提升页面可读性和视觉
3
丰富的符号库
提供各种符号库，方便设计师快速创建重复元素 。
Sketch
矢量设计
Sketch是一款专注于网页设计的矢量图形软件，支持多种 平台。
插件生态
Sketch拥有丰富的插件生态，可扩展其功能，满ch支持实时预览功能，方便设计师在多种设备上查看 设计效果。
可访问性
确保网站对所有用户都易于访问和使用，满 足不同用户的需求。
一致性
保持设计风格的一致性，有助于提高网站的 辨识度和专业度。
响应式设计
根据不同设备和屏幕大小自适应布局，提供 良好的跨平台体验。
02
网页设计基础
HTML基础
HTML标签
标题、段落、列表、链接、图片等常用标签的用法。
HTML语义化标签
Figma
目录
• 网页设计概述 • 网页设计基础 • 网页设计技巧 • 网页设计实战 • 网页设计工具 • 网页设计发展趋势
01
网页设计概述
定义与特点
定义
网页设计是使用HTML、CSS和 JavaScript等技术，对网页进行布局 、配色、排版和交互设计的艺术。
特点
网页设计具有跨平台、跨设备的特性 ，能够通过互联网快速传播信息，提 供良好的用户体验。
色彩搭配
色彩理论
掌握基本的色彩理论，了解颜色搭配的原则和技巧，如对比、调 和等。
品牌色彩
根据品牌形象和定位，选择合适的色彩搭配，以传达品牌价值和特 点。
色彩心理学
了解不同颜色给人的心理感受，根据目标用户的需求和喜好进行色 彩搭配。
排版与布局
字体选择
01
根据内容和风格，选择合适的字体，以提升页面可读性和视觉
3
丰富的符号库
提供各种符号库，方便设计师快速创建重复元素 。
Sketch
矢量设计
Sketch是一款专注于网页设计的矢量图形软件，支持多种 平台。
插件生态
Sketch拥有丰富的插件生态，可扩展其功能，满ch支持实时预览功能，方便设计师在多种设备上查看 设计效果。
可访问性
确保网站对所有用户都易于访问和使用，满 足不同用户的需求。
一致性
保持设计风格的一致性，有助于提高网站的 辨识度和专业度。
响应式设计
根据不同设备和屏幕大小自适应布局，提供 良好的跨平台体验。
02
网页设计基础
HTML基础
HTML标签
标题、段落、列表、链接、图片等常用标签的用法。
HTML语义化标签
Figma
《网页设计课件PPT》
T》！本课程将介绍网页设计的基础知识、工具 软件、HTML语言、CSS样式表、JavaScript脚本语言，以及网页布局设计原 则。快来加入我们吧！
基础知识
本节介绍网页设计的基础知识，包括网页设计的定义和发展历程。了解这些 基础知识将帮助您更好地理解网页设计的重要性和影响。
图片和颜色的运用技巧
图片和颜色是网页设计中的重要元素，能够吸引用户的注意力并传达信息。 在本节中，我们将分享一些图片和颜色的运用技巧，帮助您创建视觉上吸引 人的网页设计。
网导航设计与实现
一个清晰且易于使用的网站导航对于提供良好的用户体验至关重要。在本节中，我们将介绍一些网站导 航设计的原则以及使用HTML和CSS实现网站导航的方法。
网站安全问题与解决方案
网站安全问题是网页设计中需要重视和解决的一个方面。在本节中，我们将 介绍一些常见的网站安全问题和相应的解决方案，以保护网站和用户的信息 安全。
网页布局设计原则
一个好的网页布局设计能够提升用户体验和视觉效果。本节将介绍一些网页 布局设计原则，包括对齐、比例、重复和对比等，帮助您创建出吸引人的网 页设计。
整站规划与页面设计风格
一个成功的网站需要良好的整站规划和一致的页面设计风格。本节将讲解如 何规划整个网站的结构，并选择合适的页面设计风格以增加用户体验和品牌 形象。
工具软件介绍
在本节中，我们将介绍一些常用的网页设计工具软件，如Adobe Photoshop、Adobe Illustrator和 Sketch等。这些工具软件能够帮助您创建精美的网页设计作品。
HTML语言的基础语法
学习HTML语言的基础语法对于网页设计至关重要。本节将详细讲解HTML标 签、元素和属性的使用方法，以及如何创建基本的网页结构。
基础知识
本节介绍网页设计的基础知识，包括网页设计的定义和发展历程。了解这些 基础知识将帮助您更好地理解网页设计的重要性和影响。
图片和颜色的运用技巧
图片和颜色是网页设计中的重要元素，能够吸引用户的注意力并传达信息。 在本节中，我们将分享一些图片和颜色的运用技巧，帮助您创建视觉上吸引 人的网页设计。
网导航设计与实现
一个清晰且易于使用的网站导航对于提供良好的用户体验至关重要。在本节中，我们将介绍一些网站导 航设计的原则以及使用HTML和CSS实现网站导航的方法。
网站安全问题与解决方案
网站安全问题是网页设计中需要重视和解决的一个方面。在本节中，我们将 介绍一些常见的网站安全问题和相应的解决方案，以保护网站和用户的信息 安全。
网页布局设计原则
一个好的网页布局设计能够提升用户体验和视觉效果。本节将介绍一些网页 布局设计原则，包括对齐、比例、重复和对比等，帮助您创建出吸引人的网 页设计。
整站规划与页面设计风格
一个成功的网站需要良好的整站规划和一致的页面设计风格。本节将讲解如 何规划整个网站的结构，并选择合适的页面设计风格以增加用户体验和品牌 形象。
工具软件介绍
在本节中，我们将介绍一些常用的网页设计工具软件，如Adobe Photoshop、Adobe Illustrator和 Sketch等。这些工具软件能够帮助您创建精美的网页设计作品。
HTML语言的基础语法
学习HTML语言的基础语法对于网页设计至关重要。本节将详细讲解HTML标 签、元素和属性的使用方法，以及如何创建基本的网页结构。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2、服务器将网页文件传送给浏览器
动态网页的工作原理
1、用户向服务器请求运行ASP程序
4、浏览器将收到的HTML 文件显示到屏幕上
2、服务器读取并运行ASP程 序并将结果转化成HTML文件
3、服务器将网页文件传送给浏览器
动态网页（ASP）特点
• ASP程序只在服务器运行。浏览器收到的是 HTML文件 • 例子： 1、程序源代码
网站设计最重要的理念
Main Point
设计环节
内容和形式的完美结 合
技术环节
兼顾最多可能受众； 尽量采用低端技术
网站设计制作流程
维护更新 发布 调试修改 网页制作 勾画草案 收集素材 网站构划
网页制作
15%
勾画站构划 70%
需要把握的其他原则
• 保持网站结构的完整统一 目录层次、文件素材的安排要统一 • 保持整体风格的一致性 字体、颜色、导航、网页样式一致 • 注意链接导航的正确 • 保持网站的可维护性 文件名称要便于记忆 多人开发要有维护日记
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> <html> <body> 现在时间是<%=time()%> </body> </html>
动态网页（ASP）特点(2)
2、浏览结果
3、浏览器查看源文件
浏览器收到的HTML文件不包含 ASP程序源代码，这样浏览者无 法查看或复制我们的ASP程序代 码
完
B
从头自己看书
A 模仿
C
从头找辅导班
让老师辅导
E
D
网上找教材
实战设计成品欣赏(1)
基础医学院
实战设计成品欣赏(2)
教务处
漫谈大学网站
国外注重品牌设计，更人性化，人文化；国内精品罕见
韩国大学网站大量运用flash，颜色清新，活泼朝气
美国大学网站大气、个性
名校风采
商业网站
浅谈主页技术
图形处理 动态网站技术 • 了解掌握一种
首页设计其他技术要点
• 页面宽度，从适应更多受众的需求出发， 建议设定成800*600，如果只考虑国内的网 络访问用户，也可设定为1024*768
实战设计（1）
问题: 校园网新版首页设计,要求,以南京大学为范例
实战设计（2）
实战中参考的其他网站
实战设计（3）
新版主页现在样式
最现实的战法
找美术专业师兄弟帮忙
优点：方便进行模块 化管理，加快加载， 方便搜索引擎命中， 格式统一，修改效率 缺点：上手难，CSS 文件异常后果严重， 浏览器兼容性问题
TABLE传统排版
符合低端设计原则，能 解决所有页面排版问题
普通网页的特点和工作原理
1、用户向服务器提交网页浏览的请求
3、浏览器将收到的HTML 文件显示到屏幕上
几个高校主页样本范例
上海电力学院主页 特点：综合门户， 首页内容较多，突出了文字和各种图 片链接，丰富但稍显繁杂 首页内容：（图片新闻）重要新闻+ 栏目导航+网站地图+通知公告+小栏 目图片链接
北京师范大学主页 特点：综合型 首页内容较多，突出了文字链接，文 字量大但图片少 首页内容：重要新闻+栏目导航+学术 活动+各种文字链接
动态网页的特点（3）
• 对比静态网页的优势：动态网页能实现交 互，因而能大大提高网站功能；方便用户 管理；便于内容检索。 • 存在危险：安全隐患多。如程序后门问题、 挂马问题、容错乃至防黑问题等。 • 修改动态网页核心程序是由专业网页设计 者或者是程序员来完成的。
• 日常维护主要是通过后台直接利用现成的 程序简单实现文件发布和网页修改等内容。
几个高校主页样本范例
清华主页 特点：简约简洁 首页内容：重要新闻+栏目导航+重点内容链接
几个高校主页样本范例
上海财经大学主页 特点：简洁，突出导航和栏目链接及各种应用链接 首页内容：（图片新闻）重要新闻+栏目导航+重点内容链接
几个高校主页样本范例
第二军医大学主页 特点：综合门户，和我校主页设计情况类似 首页内容：（图片新闻）重要新闻+栏目导航+重点内容链接+通知公告+学术动态
补充网络知识
• 网址解析：服务器名称+域名 大医域名： 学校内主页服务器有: www, home, inner • IP地址：IP地址是Internet上主机的数字式标识符。 它具有唯一性。联网客户机有IP地址，服务器也 有IP地址 • 连接网站有两种方式：域名方式，IP方式 VS 210.47.244.10
细节决定成败
精确到 1 像素
网站设计元素
页面布局 功能安排
颜色搭配 主题特点 交互内容
实例：大医新版主页设计
校园网主页设计定位
• 大医校园网隶属教育网，校园网主页做为学校 官方网页，是重要的宣传平台和窗口，从这个 角度出发，主页的设计和风格定位应该是“严 谨、严肃同时兼顾美观” • 严谨严肃就意味着主页的色彩搭配、美工设计 不宜太过前卫或者太过新鲜、风格体现要尽量 做到不花哨、功能菜单等设计要实用、凝练、 厚重 • 我们不能把一个高校网站做成好莱坞网站，也 不适合做成新浪网。
校园网首页的内容取舍
• 这个问题直接决定了网站设计表现风格的 繁或简 • 必须要放入的主页内容主要包括：重要新 闻、主栏目菜单、重要接口和专题的链接 • 其他可选择放入的内容依次是：面向校外 的重要通知、重要的需要展示的栏目内容， 如学术活动等等
首页内容取舍利弊
• 选择除新闻、通知以外的其他内容在首页 展示是一些高校主页常用手段，一般是选 择有对外宣传意义的内容,而且应该是经常 更新的,从实际情况看，大医主页如果不能 做到更新及时，会导致首页信息陈旧，反 而造成问题 • 另外，首页展示内容过多，导航、链接就 会相对显的不够突出，浏览者找到合适内 容需花费更多精力
校园网主页设计元素
• 一个高校的校园网主页必定要有体现自身 特点的元素，比如校徽、名人题写的校名、 校园的主要表现色调、文笺的统一设计的 LOGO等等，这些都是重要的主页设计需要 加入的元素，当然新版设计也可加入新的 有时代特征和校园特征的元素。
校园网新版主页设计色调
• 从主色调来看，大医以往的设计主要采用 了蓝色调，这是因为大医是在大连这样一 个海洋城市，又是如此接近大海 • 海洋一样的蓝色表明了大医人有大海一样 宽阔的心胸；蓝色本身是沉静的颜色、不 张扬、稳重 • 新版色调建议以蓝色为主，适当加入其他 鲜亮的辅助颜色。
学习网站设计制作的意义？
沟通信息
宣传窗口
个性展示
工作需要
Have a look
通过这次讲座我们要了解…
Main Point
网站设计要素
让大家会用一些标准 去衡量一个网站设计 的优劣、好坏
网站设计大概流程
方便日后我们自我学 习更有目的性
核心技术
大家日后重点 克服和学习的 方向
Have a look
以上的编程语言 Asp,Php,Jsp,A SPx • 了解数据库技 术 mdb,SQL server, Oracle • 其他如 Xml,flash
静态网站技术
•
设计 维护 调试
• •
HTML CSS JS script
文案编辑
DIV+CSS VS Table
Main Point
DIV+CSS w3c内 容与表现相分离