网页设计PPT
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内 容与表现相分离
