网站设计与开发课件

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,多媒体课件的理论与实践,*,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,*,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,*,Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,网站设计与开发,北京教育学院 秦昆,网站设计与开发北京教育学院 秦昆,网站,建站,流程,设定目标,网站结构,版面草图,搜集资料,版面设计,登录宣传,外部测试,网页上传,内部测试,网页设计,内容更新维护,网站建站流程设定目标网站结构版面草图搜集资料版面设计登录宣传,网站类型,网站服务器,Internet,使用者,应用程序,服务器,数据库,提出需求,响应需求,静态网站,动态网站,动态网站,含数据库,网站类型网站服务器Internet使用者应用程序数据库提出需,静态网页制作流程,PhotoImpact,Photoshop,ImageReady,Fireworks,Dreamweaver,Extension,Flash,Java Script,PhotoImpact,Web Site,版面设计,版面配置,网页设计,多媒体内容,动态网站,静态网页制作流程PhotoImpactPhotoshopIm,动态网页制作流程,ASP,PHP,ASP.NET,ColdFusion,Windows+IIS,Linux+Apache,JSP,IIS,Apache,.NET Framework,ColdFusion,Server,JSP Server,DataBase,ODBC,或,DNSless,网站服务器,动态网页语法,应用程序服务器,数据库,Access,SQL Server,MySQL,动态网页制作流程ASPPHPASP.NETColdFusio,网站设计原则,文件、文件夹名称：请尽量以英文方式命名，,90%,首页一般皆命名为,index.htm(html),、,default.htm(html),页面设计长度以一页为主，避免超过一页,网页架构以一至四层，并注意垂直、水平,link,，方便使用者浏览,注意版权问题,30,秒,40,原则,网站设计原则文件、文件夹名称：请尽量以英文方式命名，90%,网站的基本架构,认识网页（为何我们使用,Dreamweaver,开发网页）,网页和网站之间的关系,制作网页的前置工作,何谓网页,(HTML,语法,),网站的基本架构认识网页（为何我们使用Dreamweaver开,认识,Dreamweaver,开始建立网站、窗口接口的认识,新增网站,(,定义网站,),新建网页和网页储存,页标题,Title,网页基本编辑,段落,与强迫换行,空格符,认识Dreamweaver开始建立网站、窗口接口的认识,开发案例,“,人工智能,-,机器人技术”,开发案例“人工智能-机器人技术”,案例概述,案例开发,要点,案例分析,脚本设计,脚本设计,屏幕界面,设计,案例分析,框架结构,设计,回章目录,开发案例,“,人工智能,-,机器人技术”,案例概述案例开发案例分析脚本设计脚本设计屏幕界面案例分析框架,网站结构设计,回节目录,机器人技术 首页,人工智能,artificial,机器人介绍,robot,机器人动态,active,在线教程,Online,经验交流,communicate,人工智能相关理论知识,机器人相关知识、我校的机器人,机器人发展动态介绍,机器人软、硬件，编程及组装,在线交流讨论、作业提交,网站结构设计回节目录机器人技术 首页人工智能artifici,脚本设计,脚本设计包括：首页脚本设计、,“,人工智能,”,页面脚本设计、,“,机器人介绍,”,页脚本设计、,“,机器人动态,”,页脚本设计、,“,在线教程,”,页脚本设计、在线交流页脚本设计和文章内容页脚本设计。,机器人技术脚本设计,回节目录,脚本设计 脚本设计包括：首页脚本设计、“人工智能”页面,屏幕界面设计,回节目录,屏幕界面设计回节目录,案例开发要点,创建和管理本地站点。,文档的基本操作。,文本内容开发。,图像的设计与处理。,使用表格进行网页排版。,创建超链接。,回节目录,案例开发要点 创建和管理本地站点。回节目录,创建和管理本地站点,任务一：认识,Macromedia Dreamweaver CS3,1.,启动,Macromedia Dreamweaver CS3,2.,进入,Dreamweaver CS3,的标准工作界面,任务二：新建站点,1.,确定网络自主学习型课件主题,2.,规划网络自主学习型课件的结构,3.,设计网站界面,4.,定义本地站点,回节目录,案例开发要点,创建和管理本地站点 任务一：认识Macromedia,创建和管理本地站点,任务三：在站点中添加网页文件及文件夹,1.,方法一：在,Dreamweaver,编辑窗口中的,“,创建新项目,”,中单击，新建,html,文档，选择,“,文件,”,|,“,保存,”,命令，在弹出的,“,另存为,”,对话框中输入文件名,2.,方法二：在右侧的,“,文件,”,面板中，在站点名称上单击鼠标右键，在弹出的下拉菜单中，选择,“,新建文件,”,，修改文件名,3.,本案例站点的文件夹结构,回节目录,案例开发要点,创建和管理本地站点 任务三：在站点中添加网页文件及文件,文档的基本操作,任务一：打开文档,1.,方法一：选择,“,文件,”,|,“,打开,”,命令，在弹出的,“,打开,”,对话框中，选择文档，单击,“,打开,”,按钮。,2.,方法二：在,“,文件,”,面板站点文件列表中直接双击文件。,任务二：设置页面属性,1.,选择,“,修改,”,|,“,页面属性,”,命令，在弹出的,“,页面属性,”,对话框中，选择,“,外观,”,选项卡，设置字体大小为,12px,、背景图像、页边距。,2.,在,“,页面属性,”,对话框中，选择,“,标题,/,编码,”,选项卡，设置网页标题。,回节目录,案例开发要点,文档的基本操作任务一：打开文档1.方法一：选择“文件”|,文本内容开发,任务一：添加与编辑文本内容,1.,打开,index.html,，在文档窗口光标闪烁处直接输入文本即可。,2.,输入的文本默认为宋体、,12,像素。选中文本，在,“,属性面板,”,中修改字体、大小、颜色、对齐方式等选项。,回节目录,案例开发要点,文本内容开发 任务一：添加与编辑文本内容1.打开ind,文本内容开发,任务二：使用,CSS,样式设置文本格式,1.,打开,CSS,样式面板，单击,“,新建,CSS,样式,”,按钮，在弹出的,“,新建,CSS,样式,”,对话框中，选择,“,类,”,，名称为,.content,，定义在,“,新建样式表文件,”,，单击,“,确定,”,按钮。,2.,在弹出的,“,保存样式表文件为,”,对话框中，选择保存位置为,images,文件夹中，名称为,style.css,。单击,“,保存,”,按钮。,3.,设置字体大小、行高、修饰、颜色等内容，单击,“,确定,”,按钮。,4.,应用,CSS,样式,5.,对文本建立其他样式时可以直接定义在,style.css,中。,回节目录,案例开发要点,文本内容开发 任务二：使用CSS样式设置文本格式1.,文本内容开发,任务三：对超链