网页设计与网站开发

1,网页设计与制作,愿大家开心学习、学习开心！,2,自我介绍,任课教师：乐小燕电子邮箱：zhbit_jsj网络综合平台：网页设计与制作注：以登录教务系统的用户名和密码登录。,3,思考,网页设计网页制作网站设计网站开发Web开发,4,课程特点,“信息技术水平考试”的指定教材。涵盖的内容广泛，知识实用性强。可参加“网页设计技术证书（中级）”的认证考试。远程考试网站：,课程结构,第1章网页设计与网站开发基础（第23章网页制作的流程）第2章HTML基础第1722章DreamweaverMX2004第4章ASP动态网页制作基础（第3章JavaScript在网页中的应用）第5章数据库在网页中的应用第6章PhotoshopCS2基础知识第711章FireworksMX2004第1216章FlashMX2004,乐小燕北京理工大学珠海学院,6,如何学？,希望和要求：上课要认真，上机要投入。课后要勤思考、勤动手，多多上机实践。要带着任务、目的的学。要多看书、多交流，会自学。上课要积极主动。,7,课程安排,一共48学时，包括32学时理论教学和16学时的上机实践。最终期末成绩40的平时成绩60的笔试成绩40的平时成绩11（考勤和课堂表现）14上机练习15大作业,8,总作业安排,每次上机必须在指定时间结束之前提交当次上机布置的上机练习，不允许迟交。大作业：1.设计一份网站的策划书。2.运用Dreamweaver及其他技术和工具设计开发网站。（要求有动态网页和数据库设计，如论坛、用户登录、留言板等）3.网站完成后，编写一份说明书（说明网站的主题、特点、功能、主要技术等）。4.以个人或兴趣小组（3人以下）的形式完成。,9,第一讲网页设计与网站开发基础,网页设计与网站开发,10,11,12,13,14,了解有关网络基础知识了解网页中的基本元素了解网站的基本结构和网页布局了解网页的开发语言、制作工具及美化工具熟悉网站制作的基本流程,学习目标,15,1.1网络基础知识,网页（又称页面）万维网（WorldWideWeb）浏览器（一种工具）,常用的浏览器有：IE、MozillaFireFox、傲游（Maxthon）、NetScapeNavigator网景浏览器、腾讯TT、GreenBrowser、Opera、360安全浏览器等,16,IP地址,IP地址（Net-IDHost-ID）：由32个二进制组成，分四组，每组间用小数点分开。,17,IP地址的分类,18,1.1网络基础知识,Internet域名：（计算机名.网络名.机构号.最高域名）DNS（域名解析系统）域名DNSIP地址2,19,域名的结构,国际顶级域名分为三类:国家域国际性的通用域:.国际域：真正具有国际特性的实体,如国际联盟、国际组织等。,20,域名的结构,我国域名体系分类别域名和行政域名两套：类别域名：.org行政域名：按各个行政区划分，如.BJ.SH.CQ,21,1.1网络基础知识,统一资源定位器（UniversalResourceLocator，简称URL）协议名Web服务器地址文件在服务器中的路径和文件名,22,1.1网络基础知识,HTML（HyperTextMarkupLanguage，超文本标记语言）表单超级链接导航条发布，也称为上传或上载。,23,表单实例,24,导航条实例,25,1.2网页中的基本元素,文本字体，字号，颜色，底纹和边框等格式表格图像和动画声音和视频链接标志表单导航栏,26,实例1,网站Logo,导航栏,文本,27,实例2,网站Logo,导航栏,动画广告,动画超链接,按钮链接,文本链接,简单表单,28,实例3,图像按钮,背景图像,29,1.3网站的基本结构和网页布局,网站的目录结构网站的链接结构网站布局,30,1.3.1网站的目录结构,建立目录结构的一些建议：1不要将所有文件都存放在根目录下。2按栏目内容建立子目录。3.不要使用中文名字的目录名。4.不要使用过长的目录名。5.尽量使用意义明确的目录名，尽量做到“见名知意”。6.目录的层次不要太多，建议不要超过3层。,31,1.3.2网站的链接结构,树状链接结构,32,1.3.2网站的链接结构,星状链接结构,33,1.3.2网站的链接结构,混合结构,34,1.4网站布局基本元素,网页尺寸,35,1.4网站布局基本元素,整体造型,36,1.4网站布局基本元素,页头,文本,图片,37,1.4网站布局基本元素,页脚,38,1.4网站布局基本元素,多媒体,39,1.4网站布局基本元素,1.页面尺寸2.整体造型3.文本4.图片5.页头6.页脚7.多媒体,40,1.4网站布局方法,1.纸上布局法2.软件布局法,41,1.4网站布局技术,1.层叠样式表的应用2.表格布局3.框架布局,42,1.4网站布局色彩搭配,主要内容文字用非彩色（黑色），边框、背景、图片用彩色。不要将所有颜色都用到，尽最控制在三种色彩以内。背景和前文的对比尽量要大，绝对不要用花纹繁复的图案作背景。,43,1.4网站布局色彩搭配,注意色彩比例。越是鲜艳的色彩越少用，所占比例一定要少。高亮度不合适大面积出现，最好以很少的比例出现。注意对比色的选择。要避开“灰”、“邪”的配色，要寻求色彩、明暗、饱和度三者间至少有一个是统一的。,44,色彩比例,45,46,47,48,对比色不和谐,49,对比色不和谐,50,对比色和谐,51,1.4网站布局版面结构,“同”字形结构“国”字形结构“匡”字形结构“川”字形结构“三”字形结构,52,“同”字形结构实例,53,“国”字形结构实例,54,“匡”字形结构实例,55,“川”字形结构实例,56,“三”字形结构实例,57,1.5网站的开发技术和语言,1.超文本标识语言（HTML）可扩展标记语言（XML）2.动态网站开发技术和语言PHPASP（VBScript、JavaScript)JSP（Java）ASP.net（C）,58,59,ASP（ActiveServerPages）,微软公司推出服务器端：Windows2000+IIS、Windows98+PWS；客户端：普通浏览器即可特点：将VBscript、或JavaScript嵌入到HTML中。优点：简单易学、容易上手；缺点：不能跨平台,60,ASP简单示例,61,PHP,RasmusLerdorf1994年提出，经过其他人参与，共同开发而成。服务器端：Unix，Linux，或者Windows操作系统下；客户端：普通浏览器。优点：免费、开放源代码；缺点：缺乏大公司的支持。,62,JSP（JavaServerPages）,它是由SUN提出，多家公司合作建立的一种动态网页技术。该技术的目的是为了整合已经存在的Java编程环境（例如JavaServlet等），结果产生了一个全新的足以和ASP抗衡的网络程序语言。JSP是将Java程序片段（Scriptlet）和JSP标记嵌入普通的HTML文档中。优点：跨平台；缺点：复杂难学,63,1.6网页制作工具,1.FrontPage2.Dreamweaver3.VisualS4.MyEclipse,64,1.7网页美化工具,图像处理软件1.Photoshop2.Fireworks动画制作软件1.FLASH2.UleadGIFAnimator3.UleadCool3D,65,1.8网站制作的基本流程,网站定位1.网站的主题2.网站的名称搜集和整理资料网站的整体规划1.总体设计2.网站的栏目设计3.网站的目录及链接的设计4.数据库设计,66,1.8网站制作的基本流程,选择合适的制作工具制作网页1.首页的制作2.其他页面的制作测试网页上传发布网页网站的宣传与推广网站的反馈与评价网站的更新与维护,67,综合实例七彩靓衣网站制作流程,1.网站的定位主题：受先进的交互软件与高性能的硬件服务设施支持的、运行于INTERNET中的反映服装行业的、BtoB型大规模电子商务平台，是具有权威性的大型服装专业网站。名称：七彩靓衣2.搜集和整理资料,68,综合实例七彩靓衣网站制作流程,3.网站的整体规划制作中文、英文两种版本实现BtoB电子商务功能网站实行会员制，注册成为会员才能享受服务。在网站中建立社区，能娱乐、购物和交朋友的地方，吸引更多的人浏览加入一些知名的友情链接，如PECC（中国太平洋经济合作组织全国委员会）,69,综合实例七彩靓衣网站制作流程,4.栏目设计服装栏目、服饰栏目、面料栏目、辅料栏目、模特栏目、