网页设计PPT

学习网站设计制作的意义？宣传窗口沟通信息个性展示工作需要Havealook网站设计要素让大家会用一些标准去衡量一个网站设计的优劣、好坏MainPoint网站设计大概流程方便日后我们自我学习更有目的性核心技术大家日后重点克服和学习的方向通过这次讲座我们要了解…Havealook设计环节内容和形式的完美结合MainPoint技术环节兼顾最多可能受众；尽量采用低端技术网站设计最重要的理念网站设计制作流程维护更新发布调试修改网页制作勾画草案收集素材网站构划网页制作勾画草案收集素材网站构划15%5%10%70%需要把握的其他原则•保持网站结构的完整统一目录层次、文件素材的安排要统一•保持整体风格的一致性字体、颜色、导航、网页样式一致•注意链接导航的正确•保持网站的可维护性文件名称要便于记忆多人开发要有维护日记细节决定成败精确到1像素网站设计元素颜色搭配页面布局功能安排主题特点交互内容实例：大医新版主页设计校园网主页设计定位•大医校园网隶属教育网，校园网主页做为学校官方网页，是重要的宣传平台和窗口，从这个角度出发，主页的设计和风格定位应该是“严谨、严肃同时兼顾美观”•严谨严肃就意味着主页的色彩搭配、美工设计不宜太过前卫或者太过新鲜、风格体现要尽量做到不花哨、功能菜单等设计要实用、凝练、厚重•我们不能把一个高校网站做成好莱坞网站，也不适合做成新浪网。校园网主页设计元素•一个高校的校园网主页必定要有体现自身特点的元素，比如校徽、名人题写的校名、校园的主要表现色调、文笺的统一设计的LOGO等等，这些都是重要的主页设计需要加入的元素，当然新版设计也可加入新的有时代特征和校园特征的元素。校园网新版主页设计色调•从主色调来看，大医以往的设计主要采用了蓝色调，这是因为大医是在大连这样一个海洋城市，又是如此接近大海•海洋一样的蓝色表明了大医人有大海一样宽阔的心胸；蓝色本身是沉静的颜色、不张扬、稳重•新版色调建议以蓝色为主，适当加入其他鲜亮的辅助颜色。校园网首页的内容取舍•这个问题直接决定了网站设计表现风格的繁或简•必须要放入的主页内容主要包括：重要新闻、主栏目菜单、重要接口和专题的链接•其他可选择放入的内容依次是：面向校外的重要通知、重要的需要展示的栏目内容，如学术活动等等首页内容取舍利弊•选择除新闻、通知以外的其他内容在首页展示是一些高校主页常用手段，一般是选择有对外宣传意义的内容,而且应该是经常更新的,从实际情况看，大医主页如果不能做到更新及时，会导致首页信息陈旧，反而造成问题•另外，首页展示内容过多，导航、链接就会相对显的不够突出，浏览者找到合适内容需花费更多精力几个高校主页样本范例清华主页特点：简约简洁首页内容：重要新闻+栏目导航+重点内容链接几个高校主页样本范例上海财经大学主页特点：简洁，突出导航和栏目链接及各种应用链接首页内容：（图片新闻）重要新闻+栏目导航+重点内容链接几个高校主页样本范例第二军医大学主页特点：综合门户，和我校主页设计情况类似首页内容：（图片新闻）重要新闻+栏目导航+重点内容链接+通知公告+学术动态几个高校主页样本范例上海电力学院主页特点：综合门户，首页内容较多，突出了文字和各种图片链接，丰富但稍显繁杂首页内容：（图片新闻）重要新闻+栏目导航+网站地图+通知公告+小栏目图片链接北京师范大学主页特点：综合型首页内容较多，突出了文字链接，文字量大但图片少首页内容：重要新闻+栏目导航+学术活动+各种文字链接首页设计其他技术要点•页面宽度，从适应更多受众的需求出发，建议设定成800*600，如果只考虑国内的网络访问用户，也可设定为1024*768实战设计（1）问题:校园网新版首页设计,要求,以南京大学为范例实战设计（2）实战中参考的其他网站实战设计（3）新版主页现在样式最现实的战法模仿BECDA从头自己看书找美术专业师兄弟帮忙从头找辅导班网上找教材让老师辅导实战设计成品欣赏(1)基础医学院实战设计成品欣赏(2)教务处漫谈大学网站国外注重品牌设计，更人性化，人文化；国内精品罕见韩国大学网站大量运用flash，颜色清新，活泼朝气美国大学网站大气、个性名校风采商业网站浅谈主页技术设计维护调试动态网站技术•了解掌握一种以上的编程语言Asp,Php,Jsp,ASPx•了解数据库技术mdb,SQLserver,Oracle•其他如Xml,flash静态网站技术•HTML•CSS•JSscript图形处理文案编辑DIV+CSSw3c内容与表现相分离优点：方便进行模块化管理，加快加载，方便搜索引擎命中，格式统一，修改效率缺点：上手难，CSS文件异常后果严重，浏览器兼容性问题MainPointTABLE传统排版符合低端设计原则，能解决所有页面排版问题DIV+CSSVSTable1、、、、、、、、、、、、、、、、2、、、、、、、、、、、、、、、3、、、、、、、、HTML、、、、、、、、普通网页的特点和工作原理动态网页的工作原理1、、、、、、、、、、、ASP、、3、、、、、、、、、、、、、、、4、、、、、、、、HTML、、、、、、、、2、、、、、、、、、ASP、、、、、、、、、HTML、、动态网页（ASP）特点•ASP程序只在服务器运行。浏览器收到的是HTML文件•例子：1、程序源代码%@LANGUAGE=VBSCRIPTCODEPAGE=936%htmlbody现在时间是%=time()%/body/html动态网页（ASP）特点(2)2、浏览结果3、浏览器查看源文件浏览器收到的HTML文件不包含ASP程序源代码，这样浏览者无法查看或复制我们的ASP程序代码动态网页的特点（3）•对比静态网页的优势：动态网页能实现交互，因而能大大提高网站功能；方便用户管理；便于内容检索。•存在危险：安全隐患多。如程序后门问题、挂马问题、容错乃至防黑问题等。•修改动态网页核心程序是由专业网页设计者或者是程序员来完成的。•日常维护主要是通过后台直接利用现成的程序简单实现文件发布和网页修改等内容。•网址解析：服务器名称+域名大医域名：dlmedu.edu.cn学校内主页服务器有:•IP地址：IP地址是Internet上主机的数字式标识符。它具有唯一性。联网客户机有IP地址，服务器也有IP地址•连接网站有两种方式：域名方式，IP方式补充网络知识完