项目了解网站的概念.ppt
项目1 了解网站的概念,2,.,任务4 制作第一个网页,任务3 熟悉Dreamweaver CS3,任务2 与网站相关的几个概念,任务1 经典网页赏析,项目1了解网站的概念,3,任务分析 上网浏览信息已经是很多人日常生活的重要组成部分了。当我们打开不同类型的网站时，你是否对这些网站进行过比较？不同类型的网站在结构布局，内容导航，色彩搭配，信息搜索等诸多方面有什么异同点？,任务1 经典网页赏析,4,一门户网站,门户网站腾讯网的主页。这样的网站是由众多子站点组合而成的，网站的信息量非常丰富，信息覆盖面非常广泛，信息分类合理，信息导航准确快捷，同时还有方便好用的搜索引擎。,任务1 经典网页赏析,5,二学院网站,学院网站北京大学的主页。整个网页结构清晰，布局简单精练，页面左上方的学校Logo非常醒目，图文配合简约得体，色调宁静大方，体现出这所历史悠久的一流大学庄重的文化气息和宽松的学术氛围。,任务1 经典网页赏析,6,三商业网站,商业网站阿里巴巴网站（中文网站）。阿里巴巴网站设计风格简单有个性。首页中企业产品琳琅满目，合理分类和布局。点击产品链接后会有产品详细的图文说明，使用非常方便，界面直观生动。,任务1 经典网页赏析,返回,7,任务分析 我们在网上浏览的信息是浏览器从网站中专门提供信息的服务器中获取的。这个过程中涉及到很专业知识，我们这里学习一些与网页制作有关的基本概念。,任务2 与网站相关的几个概念,8,一网页与网站,任务2 与网站相关的几个概念,9,二服务器与浏览器,任务2 与网站相关的几个概念,10,三网站的基本工作原理,任务2 与网站相关的几个概念,11,四静态网页与动态网页,任务2 与网站相关的几个概念,12,任务2 与网站相关的几个概念,静态网页与动态网页的区别,13,五网页设计工具,任务2 与网站相关的几个概念,Fireworks CS3是一款图像处理软件，可以绘制矢量图，也可以处理位图。用它设计出合适的图像来配合网页，能够更好地体现网页所要表达的意思。可以输出.png、.jpg、.gif类型的文件。,Flash CS3是一款交互式二维动画设计软件，可以将文本、图像、音频、视频等巧妙地融合在一起，制作出高品质的动画效果。它输出的.swf文件就是网页中广泛使用的动画。,Dreamweaver CS3是一款专业的可视化网页设计软件，利用它可以轻而易举地制作出跨平台、跨浏览器的动态网页。本教材就是以Dreamweaver CS3软件为基础介绍如何进行网页制作的。,返回,14,任务分析 采用可视化编程方式，具有“所见即所得”效果。它不仅具有操作便捷的网页设计功能，还支持各种编程功能，是众多网页设计人员的首选软件。本任务是运行Dreamweaver CS3，认真观察，熟悉其工作界面。,任务3 熟悉Dreamweaver CS3,15,一运行Dreamweaver CS3,任务3 熟悉Dreamweaver CS3,1在计算机中正确安装Dreamweaver CS3后，可通过开始按钮“所有程序”“Adobe Dreamweaver CS3”来启动。也可在桌面建立Dreamweaver CS3的快捷方式图标，以后每次运行时双击该图标即可。,2启动后，屏幕会弹出Dreamweaver CS3欢迎界面。,3选择“新建”栏中的“HTML”即可进入Dreamweaver CS3的工作界面。,16,二熟悉Dreamweaver CS3的工作界面,任务3 熟悉Dreamweaver CS3,17,二熟悉Dreamweaver CS3的工作界面,任务3 熟悉Dreamweaver CS3,18,二熟悉Dreamweaver CS3的工作界面,任务3 熟悉Dreamweaver CS3,在代码视图中可以通过书写HTML代码的方式制作网页；在拆分视图中能同时使用代码视图和可视化视图。在设计视图中实现可视化的设计方式，设计视图是默认方式。,“标题”文本框，用于输入网页标题栏的信息。,按钮用来设置浏览器信息，单击后弹出相应菜单，在菜单中可以选择网页用何种浏览器浏览。,视图选项按钮 可以控制视图状态，标尺、网格和辅助线都可以在弹出的菜单中选择。,19,二熟悉Dreamweaver CS3的工作界面,任务3 熟悉Dreamweaver CS3,例：编辑区有一个表格，标签选择器如图要想选中某个单元格，单击标签选择器中的标签即可。,状态栏右侧的按钮 依次为选取工具、手型工具、缩放工具、设置缩放比例、窗口大小及网页的下载速率,20,二熟悉Dreamweaver CS3的工作界面,任务3 熟悉Dreamweaver CS3,属性面板和文档窗口之间的按钮 用于显示或隐藏属性面板。,单击属性面板左上角的按钮 收起属性面板，此时该按钮为，单击它则会展开属性面板。,窗口右侧还有多个面板，称为浮动面板组。通过“窗口”菜单栏可以选择显示或隐藏那些面板。当鼠标放到面板标题左侧时，会变成 形状，按住鼠标左键拖拽它，能调整浮动面板的位置。,21,三Dreamweaver CS3的帮助功能,任务3 熟悉Dreamweaver CS3,返回,22,任务4 制作第一个网页,任务分析 本任务要求使用Dreamweaver CS3软件制作一个简单的网页。,23,一新建一个网页,任务4 制作第一个网页,1启动Dreamweaver CS3，在欢迎界面中选择“新建”栏中的“HTML”，窗口中就出现一个新的空白网页。,2输入网页内容如图。,24,二设置文本字体,任务4 制作第一个网页,1Ctrl+A选中全部文字。,2单击“属性”面板中的“字体”工具，选择“宋体”。,25,三设置文本标题的格式,任务4 制作第一个网页,1选中标题文本，在“属性”面板中设置文本字体大小为36。,2单击面板中的加粗按钮 给标题文本加粗。,26,四插入图片,任务4 制作第一个网页,1单击“插入”工具栏中的“图像”按钮，选择“”，打开“选择图像源文件”对话框，如图，定位到素材文件夹（images）中的01.jpg文件，单击“确定”按钮。,2选中图片，单击“属性”面板中的“居中”按钮。,27,五设置网页标题,任务4 制作第一个网页,在文档工具栏“标题”框中输入网页标题“我的第一个网页”。,28,六保存网页,任务4 制作第一个网页,保存网页文件的方法有多种：Ctrl+S。单击“文件”菜单“保存”。关闭网页文件时，软件提示是否保存。,29,七浏览网页,任务4 制作第一个网页,单击文档工具栏中的“在浏览器中预览/调试”按钮，选择“预览在IExplore”，或在编辑状态直接按F12键，即可进行预览。,30,任务4 制作第一个网页,网页的预览效果,返回,31,Thank You!,
