第一讲-网页设计与网站开发(48).ppt

网页设计与制作网页设计与制作愿大家开心学习、学习开心！愿大家开心学习、学习开心！1.自我介绍自我介绍任课教师：任课教师：乐乐小小燕燕电子邮箱：电子邮箱：zhbit_网络综合平台：网络综合平台：http:/ 北京理工大学珠海学院北京理工大学珠海学院5.如何学？如何学？希望和要求：希望和要求：上课要认真，上机要投入。上课要认真，上机要投入。课后要勤思考、勤动手，多多上机实践。课后要勤思考、勤动手，多多上机实践。要带着任务、目的的学。要带着任务、目的的学。要多看书、多交流，会自学。要多看书、多交流，会自学。上课要积极主动。上课要积极主动。6.课程安排课程安排一共一共48学时，包括学时，包括32学时理论教学和学时理论教学和16学时学时的上机实践。的上机实践。最终期末成绩最终期末成绩40的平时成绩的平时成绩60的笔的笔试成绩试成绩40的平时成绩的平时成绩11（考勤和课堂表现）（考勤和课堂表现）14上机练习上机练习15大作业大作业7.总作业安排总作业安排每每次次上上机机必必须须在在指指定定时时间间结结束束之之前前提提交交当当次次上上机机布布置置的的上机练习，不允许迟交。上机练习，不允许迟交。大作业：大作业：1.设计一份网站的策划书。设计一份网站的策划书。2.运运用用Dreamweaver及及其其他他技技术术和和工工具具设设计计开开发发网网站站。（要要求求有有动动态态网网页页和和数数据据库库设设计计，如如论论坛坛、用用户户登登录录、留言板等）留言板等）3.网网站站完完成成后后，编编写写一一份份说说明明书书（说说明明网网站站的的主主题题、特特点点、功能、主要技术等）。功能、主要技术等）。4.以个人或兴趣小组（以个人或兴趣小组（3人以下）的形式完成。人以下）的形式完成。8.第一讲第一讲 网页设计与网站开发基础网页设计与网站开发基础 网页设计与网站开发网页设计与网站开发9.10.11.12.13.了解有关网络基础知识了解有关网络基础知识了解网页中的基本元素了解网页中的基本元素了解网站的基本结构和网页布局了解网站的基本结构和网页布局了解网页的开发语言、制作工具及美化工具了解网页的开发语言、制作工具及美化工具熟悉网站制作的基本流程熟悉网站制作的基本流程学习目标学习目标14.1.1 网络基础知识网络基础知识网页网页（又称页面）（又称页面）万维网（万维网（WorldWideWeb）浏览器（一种工具）浏览器（一种工具）常用的浏览器有：常用的浏览器有：IE、MozillaFireFox、傲、傲游（游（Maxthon）、）、NetScapeNavigator网景网景浏览器、腾讯浏览器、腾讯TT、GreenBrowser、Opera、360安全浏览器等安全浏览器等15.IP地址地址IP地址（地址（Net-IDHost-ID）：由）：由32个二进制组成个二进制组成，分四组，每组间用小数点分开。，分四组，每组间用小数点分开。主机号主机号网络号网络号001主机号主机号网络号网络号01主机号主机号网络号网络号011组播地址组播地址0111保留地址保留地址11118162431ABCDE16.IP地址的分类地址的分类可表示可表示的网络的网络号数号数可有的最可有的最多主机号多主机号编址范围编址范围A126167772141.0.0.1126.255.255.254B1638466534128.0.0.1191.255.255.254C 2097152254192.0.0.1223.255.255.25417.1.1 网络基础知识网络基础知识Internet域名：域名：（计算机名（计算机名.网络名网络名.机构号机构号.最高域名）最高域名）DNS（域名解析系统）（域名解析系统）域名域名DNSIP地址地址202.108.33.3218.域名的结构域名的结构国际顶级域名分为三类国际顶级域名分为三类:国家域国家域国际性的通用域国际性的通用域:.edu.mil.gov国际域：真正具有国际特性的实体国际域：真正具有国际特性的实体,如国际联盟、如国际联盟、国际组织等。国际组织等。e.g.int中国中国 瑞典瑞典英国英国法国法国德国德国日本日本加拿大加拿大cnseukfrDeJpca19.域名的结构域名的结构我国域名体系分类别域名和行政域名两套：我国域名体系分类别域名和行政域名两套：类别域名：类别域名：.org行政域名：按各个行政区划分，行政域名：按各个行政区划分，如如.BJ.SH.CQ20.1.1 网络基础知识网络基础知识统一资源定位器（统一资源定位器（UniversalResourceLocator，简称，简称URL）协议名协议名Web服务器地址文件在服务器中的路径服务器地址文件在服务器中的路径和文件名和文件名http:/ 网络基础知识网络基础知识HTML（HyperTextMarkupLanguage，超，超文本标记语言）文本标记语言）表单表单超级链接超级链接导航条导航条发布，也称为上传或上载。发布，也称为上传或上载。22.表单实例表单实例23.导航条实例导航条实例24.1.2 网页中的基本元素网页中的基本元素文本文本字体，字号，颜色，底纹和边框等格式字体，字号，颜色，底纹和边框等格式表格表格图像和动画图像和动画声音和视频声音和视频链接标志链接标志表单表单导航栏导航栏25.实例实例1网站网站Logo导航栏导航栏文本文本26.实例实例2网站网站Logo导航栏导航栏动画广动画广告告动画超链接动画超链接按钮链按钮链接接文本链文本链接接简单表简单表单单27.实例实例3图像按钮图像按钮背景图像背景图像28.1.3 网站的基本结构和网页布局网站的基本结构和网页布局网站的目录结构网站的目录结构网站的链接结构网站的链接结构网站布局网站布局29.1.3.1 网站的目录结构网站的目录结构建立目录结构的一些建议：建立目录结构的一些建议：1不要将所有文件都存放在根目录下。不要将所有文件都存放在根目录下。2按栏目内容建立子目录。按栏目内容建立子目录。3.不要使用中文名字的目录名。不要使用中文名字的目录名。4.不要使用过长的目录名。不要使用过长的目录名。5.尽尽量量使使用用意意义义明明确确的的目目录录名名，尽尽量量做做到到“见见名名知意知意”。6.目录的层次不要太多，建议不要超过目录的层次不要太多，建议不要超过3层。层。30.1.3.2 网站的链接结构网站的链接结构树树状状链链接接结结构构31.1.3.2 网站的链接结构网站的链接结构星星状状链链接接结结构构32.1.3.2 网站的链接结构网站的链接结构混混合合结结构构33.1.4 网站布局基本元素网站布局基本元素网网页页尺尺寸寸34.1.4 网站布局基本元素网站布局基本元素整整体体造造型型35.1.4 网站布局基本元素网站布局基本元素页头页头文本文本图片图片36.1.4 网站布局基本元素网站布局基本元素页脚页脚37.1.4 网站布局基本元素网站布局基本元素多多媒媒体体视频视频38.1.4 网站布局基本元素网站布局基本元素1.页面尺寸页面尺寸2.整体造型整体造型3.文本文本4.图片图片5.页头页头6.页脚页脚7.多媒体多媒体39.1.4 网站布局方法网站布局方法1.纸上布局法纸上布局法2.软件布局法软件布局法40.1.4 网站布局技术网站布局技术1.层叠样式表的应用层叠样式表的应用2.表格布局表格布局3.框架布局框架布局41.1.4 网站布局色彩搭配网站布局色彩搭配主要内容文字用非彩色（黑色），边框、主要内容文字用非彩色（黑色），边框、背景、图片用彩色。背景、图片用彩色。不要将所有颜色都用到，尽最控制在三种不要将所有颜色都用到，尽最控制在三种色彩以内。色彩以内。背景和前文的对比尽量要大，绝对不要用背景和前文的对比尽量要大，绝对不要用花纹繁复的图案作背景。花纹繁复的图案作背景。42.1.4 网站布局色彩搭配网站布局色彩搭配注意色彩比例。注意色彩比例。越是鲜艳的色彩越少用，所占比例一定要少。越是鲜艳的色彩越少用，所占比例一定要少。高亮度不合适大面积出现，最好以很少的比例高亮度不合适大面积出现，最好以很少的比例出现。出现。注意对比色的选择。注意对比色的选择。要避开要避开“灰灰”、“邪邪”的配色，要寻求色彩、明暗、的配色，要寻求色彩、明暗、饱和度三者间至少有一个是统一的。饱和度三者间至少有一个是统一的。43.色彩比例44.45.46.47.对比色对比色不和谐不和谐48.对比色对比色不和谐不和谐49.对比色对比色和谐和谐50.1.4 网站布局版面结构网站布局版面结构“同同”字形结构字形结构“国国”字形结构字形结构“匡匡”字形结构字形结构“川川”字形结构字形结构“三三”字形结构字形结构51.“同同”字形结构实例字形结构实例52.“国国”字形结构实例字形结构实例53.“匡匡”字形结构实例字形结构实例54.“川川”字形结构实例字形结构实例55.“三三”字形结构实例字形结构实例56.1.5 网站的开发技术和语言网站的开发技术和语言1.超文本标识语言（超文本标识语言（HTML）可扩展标记语言（可扩展标记语言（XML）2.动态网站开发技术和语言动态网站开发技术和语言PHPASP（VBScript、JavaScript)JSP（Java）ASP.net（C）57.CGIASPPHPJSPASP.NETJ2EE58.ASP（Active Server Pages）微软公司推出微软公司推出服务器端：服务器端：Windows2000+IIS、Windows98+PWS；客户端：普通浏览器即可客户端：普通浏览器即可特点：将特点：将VBscript、或、或JavaScript嵌入到嵌入到HTML中。中。优点：简单易学、容易上手；优点：简单易学、容易上手；缺点：不能跨平台缺点：不能跨平台59.ASP简单示例简单示例60.PHPRasmusLerdorf1994年提出，经过其他年提出，经过其他人参与，共同开发而成。人参与，共同开发而成。服务器端：服务器端：Unix，Linux，或者，或者Windows操作系统下；客户端：普通浏览器。操作系统下；客户端：普通浏览器。优点：免费、开放源代码；缺点：缺乏优点：免费、开放源代码；缺点：缺乏大公司的支持。大公司的支持。61.JSP（Java Server Pages）它是由它是由SUN提出，多家公司合作建立的提出，多家公司合作建立的一种动态网页技术。该技术的目的是为一种动态网页技术。该技术的目的是为了整合已经存在的了整合已经存在的Java编程环境（例如编程环境（例如JavaServlet等），结果产生了一个全新等），结果产生了一个全新的足以和的足以和ASP抗衡的网络程序语言。抗衡的网络程序语言。JSP是将是将Java程序片段（程序片段（Scriptlet）和）和JSP标记嵌入普通的标记嵌入普通的HTML文档中。文档中。优点：跨平台；缺点：复杂难学优点：跨平台；缺点：复杂难学62.1.6 网页制作工具网页制作工具1.FrontPage2.Dreamweaver3.VisualS4.MyEclipse63.1.7 网页美化工具网页美化工具图像处理软件图像处理软件1.Photoshop2.Fireworks动画制作软件动画制作软件1.FLASH2.UleadGIFAnimator3.UleadCool3D64.1.8 网站制作的基本流程网站制作的基本流程网站定位网站定位1.网站的主题网站的主题2.网站的名称网站的名称搜集和整理资料搜集和整理资料网站的整体规划网站的整体规划1.总体设计总体设计2.网站的栏目设计网站的栏目设计3.网站的目录及链接的设计网站的目录及链接的设计4.数据库设计数据库设计65.1.8 网站制作的基本流程网站制作的基本流程选择合适的制作工具选择合适的制作工具制作网页制作网页1.首页的制作首页的制作2.其他页面的制作其他页面的制作测试网页测试网页上传发布网页上传发布网页网站的宣传与推广网站的宣传与推广网站的反馈与评价网站的反馈与评价网站的更新与维护网站的更新与维护66.综合实例七彩靓衣网站制作流程综合实例七彩靓衣网站制作流程1.网站的定位网站的定位主题：受先进的交互软件与高性能的硬件主题：受先进的交互软件与高性能的硬件服务设施支持的、运行于服务设施支持的、运行于INTERNET中中的反映服装行业的、的反映服装行业的、BtoB型大规模电子型大规模电子商务平台，是具有权威性的大型服装专商务平台，是具有权威性的大型服装专业网站。业网站。名称：七彩靓衣名称：七彩靓衣2.搜集和整理资料搜集和整理资料67.综合实例七彩靓衣网站制作流程综合实例七彩靓衣网站制作流程3.网站的整体规划网站的整体规划制作中文、英文两种版本制作中文、英文两种版本实现实现BtoB电子商务功能电子商务功能网站实行会员制，注册成为会员才能享受服务。网站实行会员制，注册成为会员才能享受服务。在网站中建立社区，能娱乐、购物和交朋友的地方，在网站中建立社区，能娱乐、购物和交朋友的地方，吸引更多的人浏览吸引更多的人浏览加入一些知名的友情链接，如加入一些知名的友情链接，如PECC（中国太平洋（中国太平洋经济合作组织全国委员会）经济合作组织全国委员会）68.综合实例七彩靓衣网站制作流程综合实例七彩靓衣网站制作流程4.栏目设计栏目设计服装栏目、服饰栏目、面料栏目、辅料栏目、服装栏目、服饰栏目、面料栏目、辅料栏目、模特栏目、社区栏目、网上学校、信息栏目、模特栏目、社区栏目、网上学校、信息栏目、管理栏目、电子商务、代理服务、网上超市、管理栏目、电子商务、代理服务、网上超市、网上办公室、合作项目和集团介绍网上办公室、合作项目和集团介绍5.数据库设计数据库设计采用采用ADO技术和技术和SQLServer来设计数据库来设计数据库69.综合实例七彩靓衣网站制作流程综合实例七彩靓衣网站制作流程6.选择工具选择工具选择选择Dreamweaver8、Fireworks8和和Flash8采用采用asp技术，技术，html和和VBScript语言语言7.制作网页制作网页8.测试测试9.上传和发布上传和发布10.更新和维护更新和维护70.此课件下载可自行编辑修改，此课件供参考！此课件下载可自行编辑修改，此课件供参考！部分内容来源于网络，如有侵权请与我联系删除！部分内容来源于网络，如有侵权请与我联系删除！