网页设计基础.ppt

,Dreamweaver网页设计与制作,第1章 网页设计基础,第2章 制作简单网页,第3章 表格的应用,第5章 图像与多媒体,第6章 使用CSS样式表,第7章 交互式表单的应用,第8章 网页的布局设计,第4章 超级链接的应用,课程概述,1.1 网页设计概述1.2 网站的策划和设计1.3 Dreamweaver 8介绍1.4 习题与上机操作,教学进程,第9章 行为和图层的行为,第10章 模板、库及框架,第11章 制作动态网页留言板,第12章 应用扩展,第13章 站点的测试与发布,第1章 网页设计基础,第2章 制作简单网页,第3章 表格的应用,第5章 图像与多媒体,第6章 使用CSS样式表,第7章 交互式表单的应用,第8章 网页的布局设计,第4章 超级链接的应用,课程概述,2.1 网页的基本操作2.2 使用表格2.3 Flash动画的使用2.4 使用文本2.5 习题与上机操作,教学进程,第9章 行为和图层的行为,第10章 模板、库及框架,第11章 制作动态网页留言板,第12章 应用扩展,第13章 站点的测试与发布,第1章 网页设计基础,第2章 制作简单网页,第3章 表格的应用,第5章 图像与多媒体,第6章 使用CSS样式表,第7章 交互式表单的应用,第8章 网页的布局设计,第4章 超级链接的应用,课程概述,3.1 创建及编辑表格3.2 表格的应用3.3 表格应用综合实例3.4 习题与上机操作,教学进程,第9章 行为和图层的行为,第10章 模板、库及框架,第11章 制作动态网页留言板,第12章 应用扩展,第13章 站点的测试与发布,第1章 网页设计基础,第2章 制作简单网页,第3章 表格的应用,第5章 图像与多媒体,第6章 使用CSS样式表,第7章 交互式表单的应用,第8章 网页的布局设计,第4章 超级链接的应用,课程概述,4.1 超级链接基础4.2 超级链接的基本操作4.3 超级链接应用实例4.4 习题与上机操作,教学进程,第9章 行为和图层的行为,第10章 模板、库及框架,第11章 制作动态网页留言板,第12章 应用扩展,第13章 站点的测试与发布,第1章 网页设计基础,第2章 制作简单网页,第3章 表格的应用,第5章 图像与多媒体,第6章 使用CSS样式表,第7章 交互式表单的应用,第8章 网页的布局设计,第4章 超级链接的应用,课程概述,5.1 网页中的图像格式5.2 设置图像效果5.3 编辑图像5.4 添加多媒体5.5 图像和多媒体应用技巧,教学进程,第9章 行为和图层的行为,第10章 模板、库及框架,第11章 制作动态网页留言板,第12章 应用扩展,第13章 站点的测试与发布,第1章 网页设计基础,第2章 制作简单网页,第3章 表格的应用,第5章 图像与多媒体,第6章 使用CSS样式表,第7章 交互式表单的应用,第8章 网页的布局设计,第4章 超级链接的应用,课程概述,6.1 CSS样式表概述6.2 创建新样式6.3 内部CSS样式表的应用6.4 外部CSS样式表的应用6.5 习题与上机操作,教学进程,第9章 行为和图层的行为,第10章 模板、库及框架,第11章 制作动态网页留言板,第12章 应用扩展,第13章 站点的测试与发布,第1章 网页设计基础,第2章 制作简单网页,第3章 表格的应用,第5章 图像与多媒体,第6章 使用CSS样式表,第7章 交互式表单的应用,第8章 网页的布局设计,第4章 超级链接的应用,课程概述,7.1 表单概述7.2 规划页面布局7.3 表单域的使用7.4 创建文本字段7.5 创建复选框7.6 创建单选按钮和单选按钮组7.7 创建菜单和列表7.8 创建其他常用表单域7.9 创建跳转菜单7.10 表单的检查7.11 习题与上机操作,教学进程,第9章 行为和图层的行为,第10章 模板、库及框架,第11章 制作动态网页留言板,第12章 应用扩展,第13章 站点的测试与发布,第1章 网页设计基础,第2章 制作简单网页,第3章 表格的应用,第5章 图像与多媒体,第6章 使用CSS样式表,第7章 交互式表单的应用,第8章 网页的布局设计,第4章 超级链接的应用,课程概述,8.1 网页的版式设计8.2 布局的应用8.3 层的应用8.4 层与表格的相互转换8.5 布局与层应用实例8.6 习题与上机操作,教学进程,第9章 行为和图层的行为,第10章 模板、库及框架,第11章 制作动态网页留言板,第12章 应用扩展,第13章 站点的测试与发布,第1章 网页设计基础,第2章 制作简单网页,第3章 表格的应用,第5章 图像与多媒体,第6章 使用CSS样式表,第7章 交互式表单的应用,第8章 网页的布局设计,第4章 超级链接的应用,课程概述,9.1 行为概述9.2 行为的基本应用9.3 利用行为创建菜单9.4 行为和层的综合实例9.5 习题与上机操作,教学进程,第9章 行为和图层的行为,第10章 模板、库及框架,第11章 制作动态网页留言板,第12章 应用扩展,第13章 站点的测试与发布,第1章 网页设计基础,第2章 制作简单网页,第3章 表格的应用,第5章 图像与多媒体,第6章 使用CSS样式表,第7章 交互式表单的应用,第8章 网页的布局设计,第4章 超级链接的应用,课程概述,10.1 使用模板10.2 使用库项目10.3 使用框架10.4 习题与上机操作,教学进程,第9章 行为和图层的行为,第10章 模板、库及框架,第11章 制作动态网页留言板,第12章 应用扩展,第13章 站点的测试与发布,第1章 网页设计基础,第2章 制作简单网页,第3章 表格的应用,第5章 图像与多媒体,第6章 使用CSS样式表,第7章 交互式表单的应用,第8章 网页的布局设计,第4章 超级链接的应用,课程概述,11.1 动态网站概述11.2 配置服务器11.3 制作留言板的主页面11.4 创建Access数据库11.5 逐步实现留言板功能11.6 完善和扩充留言板功能11.7 习题与上机操作,教学进程,第9章 行为和图层的行为,第10章 模板、库及框架,第11章 制作动态网页留言板,第12章 应用扩展,第13章 站点的测试与发布,第1章 网页设计基础,第2章 制作简单网页,第3章 表格的应用,第5章 图像与多媒体,第6章 使用CSS样式表,第7章 交互式表单的应用,第8章 网页的布局设计,第4章 超级链接的应用,课程概述,12.1 Dreamweaver与JavaScript的结合12.2 Dreamweaver与Fireworks的结合12.3 Dreamweaver、Flash和Fireworks的结合12.4 习题与上机操作,教学进程,第9章 行为和图层的行为,第10章 模板、库及框架,第11章 制作动态网页留言板,第12章 应用扩展,第13章 站点的测试与发布,第1章 网页设计基础,第2章 制作简单网页,第3章 表格的应用,第5章 图像与多媒体,第6章 使用CSS样式表,第7章 交互式表单的应用,第8章 网页的布局设计,第4章 超级链接的应用,课程概述,13.1 测试站点13.2 发布站点13.3 管理站点13.4 习题与上机操作,教学进程,第9章 行为和图层的行为,第10章 模板、库及框架,第11章 制作动态网页留言板,第12章 应用扩展,第13章 站点的测试与发布,网页设计基础,第1章,本章要点：网页设计基本理念 确定网页整体风格 网页色彩的搭配 绘制设计草图 建立站点,1.1 网页设计概述,1.1.1,网页设计理念,教学进程,1.1 网页设计概述,1.1.1,网页设计理念,Basic Concept,教学进程,1.1.2,网页设计常用的工具,FrontPage是Microsoft公司推出的Web站点创建和管理工具，它是微软Office成员之一。FrontPage是一个所见即所得的“傻瓜”型网页制作软件，你可以在对HTML毫不了解的情况下轻松地制作出自己的网页来，你需要做的只是用鼠标以及键盘的简单操作。,教学进程,Dreamweaver是Macromedia公司推出的，是目前国内公认的最佳的网页制作工具，最近版本为Dreamweaver 8,FrontPage,Dreamweaver,1.2 网站的策划和设计,教学进程,1.2.1 网站的风格,色彩,版面布局,浏览方式,网站标志的设计,交互性,文字,价值,1.2 网站的策划和设计,教学进程,1.2.1 网站的风格,网站欣赏,新浪网,1.2 网站的策划和设计,教学进程,1.2.1 网站的风格,网站欣赏,洪恩在线,1.2 网站的策划和设计,教学进程,1.2.1 网站的风格,网站欣赏,IBM的网站,1.2 网站的策划和设计,教学进程,1.2.1 网站的风格,网站标志,网站标志要放在醒目位置，如左上角，而且要保持不变。,网站标语,最好能够有一句反映网站精髓的标语，并能动态显示。,导航部分,导航部分应该放在每一张网页的相同位置，便于访问者浏览网站的全部内容。,1.2.1 网站的风格,教学进程,主体颜色,确定主体颜色，并注意颜色搭配要让人感觉舒服，不要太刺眼，也不能不突出需要强调的内容。,页面布局,页面的布局是风格的一个重要标志。不要忘记考虑主页的可扩充性，以方便将来再添加栏目,内容结构,内容结构越简单越好，分类要简而精。一切都为访问者能够最快地找到访问的资料而考虑。,1.2.2 网页的色彩搭配,教学进程,红色：有力量、喜庆的色彩。具有刺激效果，容易使人产生冲动，是一种雄壮的精神体现，有愤怒、热情、活力的感觉。,橙色：也是一种激奋的色彩，有轻快、欢欣、热烈、温馨、时尚的效果。黄色：亮度最高，有温暖感，具有快乐、希望、智慧和轻快的个性，让人感觉灿烂辉煌。黑色：给人深沉、神秘、寂静、悲哀、压抑的感觉。绿色：介于冷暖色中间，显得和睦、宁静，给人健康、安全的感觉。与金黄、淡白搭配，产生优雅、舒适的气氛。,红色,黑色,橙色,黄色,绿色,1.2.2 网页的色彩搭配,教学进程,蓝色：代表永恒、博大，最具凉爽、清新、专业的色彩。与白色混合，能体现柔顺、淡雅、浪漫的气氛，给人感觉平静、理智。紫色：给人神秘、压迫的感觉。白色：具有洁白、明快、纯真、清洁的个性。灰色：具有中庸、平凡、温和、谦让、中立和高雅的个性。,蓝色,白色,紫色,灰色,1.2.3 设计草图,教学进程,根据实际需要，画出网站的设计草图,教学进程,1.3 Dreamweaver 8介绍,1.3.1 Dreamweaver简介,Dreamweaver 8 是一款专业的HTML编辑器,用于对Web站点、Web页和Web应用程序进行设计、编码和开发。,可以查看所有的站点元素或资源，并且可以直接将它们从一个易用面板中拖动到文档。可以程序化开发流程。,Dreamweaver 8中的可视化编辑功能可以为页面快速添加各种设计和功能。,1.选择工具界面,教学进程,1.3 Dreamweaver 8介绍,1.3.2 Dreamweaver 8的工作界面,2.主窗口介绍,3.主菜单介绍,4.视图方式,1.选择工具界面,教学进程,1.3 Dreamweaver 8介绍,1.3.2 Dreamweaver 8的工作界面,2.主窗口介绍,3.主菜单介绍,4.视图方式,1.选择工具界面,教学进程,1.3 Dreamweaver 8介绍,1.3.2 Dreamweaver 8的工作界面,2.主窗口介绍,3.主菜单介绍,4.视图方式,【文件】菜单用于查看当前文档或对当前文档执行操作。【编辑】菜单包含常用的命令。还提供了【首选参数】，可以对Dreamweaver做一些细致的调整。【查看】菜单查看文档的各种视图，可以显示和隐藏不同类型的页面元素、工具和工具栏。【插入】菜单提供【插入】栏的替代项，用于将对象插入到文档中。【修改】菜单使你可以更改选定页面元素或项的属性。,1.选择工具界面,教学进程,1.3 Dreamweaver 8介绍,1.3.2 Dreamweaver 8的工作界面,2.主窗口介绍,3.主菜单介绍,4.视图方式,【文本】菜单使你可以轻松地设置文本的格式。【命令】菜单提供对各种命令的访问，包括设置代码格式的命令、创建相册的命令等【站点】菜单提供用于管理站点以及上传和下载文件的菜单项。【窗口】菜单提供对面板、检查器和窗口的访问。【帮助】菜单提供帮助系统，还包括各种语言的参考材料。,1.选择工具界面,教学进程,1.3 Dreamweaver 8介绍,1.3.2 Dreamweaver 8的工作界面,2.主窗口介绍,3.主菜单介绍,4.视图方式,代码视图：可以直接编辑网页的源代码。设计视图：能更好地美化网页，更合理地布局网页。同时显示代码视图和设计视图：让我们能够更好地理解源代码，提高编程能力。,教学进程,1.3.3 建立站点,执行【管理站点】命令新建站点输入站点的名称根据提示建立站点创建“images”文件夹新建网页文件“index.htm”,教学进程,1.4 习题与上机操作,1.选择题,（1）一般来说，网站设计所需遵循的理念有哪些。（）,（2）网页设计常用的工具有哪些。（）,AFrontPage BDreamweaver CFlash DFrontPage,A带宽问题 B版面布局C色彩搭配 D网站内容,（3）Dreamweaver中有三种视图方式，它们是哪些。（）,A显示代码视图 B显示设计视图C显示代码视图和设计视图 D预览视图,教学进程,1.4 习题与上机操作,2.问答题,（1）在制作网页之前，先要确定网站的整体风格，这时需要注意哪些问题？,（3）访问一些大型的网站，试着分析一下网站使用的网页元素有哪些，它们分别有哪些特点。,（2）Dreamweaver有三种视图方式，分别叙述这三种视图的用途。,教学进程,1.4 习题与上机操作,3.上机操作题,（1）启动Dreamweaver，并熟悉其工作界面的各个组成部分。,（3）在创建好的站点中创建以下一级目录：img，sound，flash。,（2）在本地硬盘上创建一个名为“myweb”文件夹，然后使用Dreamweaver将其定义为一个本地站点。,（4）将准备好的素材复制到硬盘站点中对应的目录中。,