项目1 了解网站的概念.

Presentation on theme: "项目1 了解网站的概念."— Presentation transcript:

1 项目1 了解网站的概念

2 任务1 经典网页赏析 任务2 与网站相关的几个概念 项目1 了解网站的概念 任务3 熟悉Dreamweaver CS3 任务4 制作第一个网页 ......

3 任务1 经典网页赏析 任务分析 上网浏览信息已经是很多人日常生活的重要组成部分了。当我们打开不同类型的网站时，你是否对这些网站进行过比较？不同类型的网站在结构布局，内容导航，色彩搭配，信息搜索等诸多方面有什么异同点？

4 任务1 经典网页赏析 一．门户网站 门户网站——腾讯网的主页。这样的网站是由众多子站点组合而成的，网站的信息量非常丰富，信息覆盖面非常广泛，信息分类合理，信息导航准确快捷，同时还有方便好用的搜索引擎。

5 任务1 经典网页赏析 二．学院网站 学院网站——北京大学的主页。整个网页结构清晰，布局简单精练，页面左上方的学校Logo非常醒目，图文配合简约得体，色调宁静大方，体现出这所历史悠久的一流大学庄重的文化气息和宽松的学术氛围。

6 任务1 经典网页赏析 三．商业网站 商业网站——阿里巴巴网站（中文网站）。阿里巴巴网站设计风格简单有个性。首页中企业产品琳琅满目，合理分类和布局。点击产品链接后会有产品详细的图文说明，使用非常方便，界面直观生动。 返回

7 任务2 与网站相关的几个概念 任务分析 我们在网上浏览的信息是浏览器从网站中专门提供信息的服务器中获取的。这个过程中涉及到很专业知识，我们这里学习一些与网页制作有关的基本概念。

8 任务2 与网站相关的几个概念 一．网页与网站 显示在一个窗口里的所有内容就构成一个完整的网页。这些网页其实就是存放在互联网中某处电脑里的一个个文件。网页文件常见的类型有.htm、.html、.asp、.jsp、.php、.aspx等。 用于存放并有效地组织管理网页的文件夹就是网站，它存在于互联网中的网页服务器中。网页是网站中的一页，是构成网站的基本元素。网站中还会存放有图片、音频、视频等多媒体文件，这些文件通过网页的形式显示出来，形成了丰富多彩的视觉和听觉效果。

9 任务2 与网站相关的几个概念 二．服务器与浏览器
任务2 与网站相关的几个概念 二．服务器与浏览器 互联网中的计算机如果安装了服务器软件就成为服务器，可以为他人提供不同类型的信息服务。网页服务器（Web服务器）就是保存有网站文件夹，并能为他人提供网页信息服务的计算机。我们将制作完成的网站上传到Web服务器，他人就可以通过网络来访问这个网站了。 浏览器是用来浏览网页的工具软件，其作用是对网页语法进行解析并将结果显示出来。常用的浏览器有：微软公司的IE、开源基金组织Mozilla的Firefox、苹果公司Safari、Google 公司的Chrome、Opera Software ASA公司的Opera等。

10 任务2 与网站相关的几个概念 三．网站的基本工作原理
任务2 与网站相关的几个概念 三．网站的基本工作原理 网站上传到服务器之后，用户通过浏览器（客户端）的地址栏输入网站的网址，向服务器发送一个请求，服务器根据不同的请求将相应网页文件发送给用户（客户端），由客户端浏览器进行解析，并在浏览器窗口中显示解析的结果。此时电脑显现给用户的就是一页丰富多彩的网页了。

11 任务2 与网站相关的几个概念 四．静态网页与动态网页
任务2 与网站相关的几个概念 四．静态网页与动态网页 静态网页是相对于动态网页而言，它没有后台数据库及数据处理程序、不可交互。静态网页更新起来比较麻烦，适用于显示固定内容或内容更新较少的展示型网站。 动态网页是与静态网页相对应的，文件扩展名有.asp、.aspx、.php.jsp等。动态网页除了包含静态网页的所有内容外，同时还包含服务器端脚本(只能被服务器执行的脚本)。它通过与后台数据库相连，在功能上实现了与用户之间的数据交互，如用户注册、登录、在线调查、论坛、聊天室、订单管理等等。动态网页的信息在不同的情况下访问，会呈现不同的内容。

12 任务2 与网站相关的几个概念 静态网页与动态网页的区别
任务2 与网站相关的几个概念 静态网页与动态网页的区别 静态网页与动态网页的主要区别在于服务器对它们的处理方式不同：当服务器接收到静态网页的请求时，会直接将该页发送给客户端浏览器，不进行任何处理；如果接收到动态网页的请求，则先从服务器中找到该文件，将它传递给一个称为应用程序服务器的特殊软件扩展，由它负责解释和执行网页，最后将执行后的结果作为网页文件传递给客户端浏览器。

13 任务2 与网站相关的几个概念 五．网页设计工具 Fireworks CS3是一款图像处理软件，可以绘制矢量图，也可以处理位图。用它设计出
任务2 与网站相关的几个概念 五．网页设计工具 Fireworks CS3是一款图像处理软件，可以绘制矢量图，也可以处理位图。用它设计出 合适的图像来配合网页，能够更好地体现网页所要表达的意思。可以输出.png、.jpg、 .gif类型的文件。 Flash CS3是一款交互式二维动画设计软件，可以将文本、图像、音频、视频等巧妙地 融合在一起，制作出高品质的动画效果。它输出的.swf文件就是网页中广泛使用的动画。 Dreamweaver CS3是一款专业的可视化网页设计软件，利用它可以轻而易举地制作 出跨平台、跨浏览器的动态网页。本教材就是以Dreamweaver CS3软件为基础介绍 如何进行网页制作的。 返回

14 任务3 熟悉Dreamweaver CS3 任务分析

15 任务3 熟悉Dreamweaver CS3 一．运行Dreamweaver CS3 1．在计算机中正确安装Dreamweaver CS3
后，可通过[开始]按钮→“所有程序”→ “Adobe Dreamweaver CS3”来启动。 也可在桌面建立Dreamweaver CS3的快捷 方式图标，以后每次运行时双击该图标即可。 2．启动后，屏幕会弹出Dreamweaver CS3 欢迎界面。 3．选择“新建”栏中的“HTML”即可进入 Dreamweaver CS3的工作界面。

16 二．熟悉Dreamweaver CS3的工作界面
标题栏 菜单栏 插入栏 浮动面板组 文档工具栏 文档编辑区 标签选择器 状态栏 属性面板 Dreamweaver CS3的工作界面主要由以下几部分组成：标题栏、菜单栏、插入栏、文档工具栏、文档编辑区、标签选择器、状态栏、属性面板和浮动面板组。

17 二．熟悉Dreamweaver CS3的工作界面
1．标题栏和菜单栏 标题栏位于窗口的最上端，显示Dreamweaver的版本和打开的文件名称。 菜单栏位于标题栏的下方，Dreamweaver CS3工作界面中几乎所有的操作都能在菜单栏的菜单选项中找到对应的命令。 2．插入栏 插入栏中的选项，可以在编辑区中插人相应的各类元素，如超链接、图像、动画、表单、表表格、APDiv等。

18 二．熟悉Dreamweaver CS3的工作界面
在代码视图中可以通过书写HTML代码的方式制作网页； 在拆分视图中能同时使用代码视图和可视化视图。 在设计视图中实现可视化的设计方式，设计视图是默认方式。 3．文档编辑区 文档编辑区是制作网页的区域，网页元素可以通过各种方式插入到编辑区中。在编辑区的左上角，显示网页文件的名称，默认的是untitled-1，如果名称后有“*”，表明该网页文件发生了修改却没有保存，保存后“*”会消失。 “标题”文本框，用于输入网页标题栏的信息。 按钮用来设置浏览器信息，单击后弹出 相应菜单，在菜单中可以选择网页用 何种浏览器浏览。 视图选项按钮 可以控制视图状态， 标尺、网格和辅助线都可以在弹出的 菜单中选择。

19 二．熟悉Dreamweaver CS3的工作界面
4．状态栏 文档编辑区的下端是状态栏。状态栏左侧为标签选择器，通过选择标签选择器能方便地选中文档编辑区的内容。 例：编辑区有一个表格，标签选择器如图 要想选中某个单元格，单击标签选择器中的<td>标签即可。 状态栏右侧的按钮 依次为 选取工具、手型工具、缩放工具、设置缩放比例、窗口大小 及网页的下载速率

20 二．熟悉Dreamweaver CS3的工作界面
属性面板和文档窗口之间的按钮 用于显示或隐藏属性面板。 5．面板 文档编辑区的下方是属性面板，当选中编辑区中的某个网页元素时，通过属性面板可以定义该元素的属性。 单击属性面板左上角的按钮 收起属性面板， 此时该按钮为 ，单击它则会展开属性面板。 窗口右侧还有多个面板，称为浮动面板组。 通过“窗口”菜单栏可以选择显示或隐藏那些 面板。当鼠标放到面板标题左侧时，会变成 形状，按住鼠标左键拖拽它，能调整 浮动面板的位置。

21 三．Dreamweaver CS3的帮助功能
选择“Dreamweaver帮助”，或在编辑状态下按“F1”键，均可打开Dreamweaver帮助窗口。 返回

22 任务4 制作第一个网页 任务分析 本任务要求使用Dreamweaver CS3软件制作一个简单的网页。

23 任务4 制作第一个网页 一．新建一个网页 1．启动Dreamweaver CS3，在欢迎 界面中选择“新建”栏中的“HTML”，窗口
任务4 制作第一个网页 一．新建一个网页 1．启动Dreamweaver CS3，在欢迎 界面中选择“新建”栏中的“HTML”，窗口 中就出现一个新的空白网页。 2．输入网页内容如图。 文中每段开头应输入4个半角空格（占2个汉字位）。由于默认情况下Dreamweaver不允许连续输入多个空格，我们可以用以下两种方式之一进行连续多个空格的输入： Ctrl+Shift+空格键。 “编辑”菜单→“首选参数”，打开“首选参数”对话框，在“常规”项中选中“允许多个连续空格”。

24 任务4 制作第一个网页 二．设置文本字体 1．Ctrl+A选中全部文字。 2．单击“属性”面板中的“字体”工具， 选择“宋体”。
任务4 制作第一个网页 二．设置文本字体 1．Ctrl+A选中全部文字。 2．单击“属性”面板中的“字体”工具， 选择“宋体”。 如果列表中没有“宋体”字体，可在列表中选择“编辑字体列表”，打开“编辑字体列表”对话框，如右图，在“可用字体”中选择“宋体”，再单击“”按钮，“确定”，即可添加字体到“属性”面板中。

25 任务4 制作第一个网页 三．设置文本标题的格式 1．选中标题文本，在“属性”面板中设置 文本字体大小为36。
任务4 制作第一个网页 三．设置文本标题的格式 1．选中标题文本，在“属性”面板中设置 文本字体大小为36。 2．单击面板中的加粗按钮 给标题 文本加粗。

26 任务4 制作第一个网页 四．插入图片 1．单击“插入”工具栏中的“图像”按钮 ，选择“ ”，
任务4 制作第一个网页 四．插入图片 1．单击“插入”工具栏中的“图像”按钮 ，选择“ ”， 打开“选择图像源文件”对话框，如图，定位到素材文件夹 （images）中的01.jpg文件，单击“确定”按钮。 2．选中图片，单击“属性”面板中的“居中”按钮 。

27 任务4 制作第一个网页 五．设置网页标题 在文档工具栏“标题”框中输入网页标题——“我的第一个网页”。

28 任务4 制作第一个网页 六．保存网页 保存网页文件的方法有多种： Ctrl+S。 单击“文件”菜单→“保存”。
任务4 制作第一个网页 六．保存网页 保存网页文件的方法有多种： Ctrl+S。 单击“文件”菜单→“保存”。 关闭网页文件时，软件提示是否保存。 此时会打开的“另存为…”对话框，输入文件名（如index.htm），定位好文件位置后，再单击“保存”即可。

29 任务4 制作第一个网页 七．浏览网页 单击文档工具栏中的“在浏览器中预览/调试”按钮，选择
任务4 制作第一个网页 七．浏览网页 单击文档工具栏中的“在浏览器中预览/调试”按钮，选择 “预览在IExplore”，或在编辑状态直接按F12键，即可进行预览。 浏览网页前应保存网页，如果没有保存，Dreamweaver会弹出保存提示框，如图所示。单击“是”按钮。

30 任务4 制作第一个网页 网页的预览效果 返回

31 Thank You !