规划系部网站并熟悉网站开发环境课件.ppt

1、1学习情境一：网站初建任务二:规划系部网站并熟悉网站开发环境知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评2知识能力目标知识能力目标 知识能力目标：知识能力目标：了解网站开发流程、网站规划的要求、网了解网站开发流程、网站规划的要求、网页设计的原则页设计的原则了解常用网页制作工具了解常用网页制作工具认识认识Adobe Dreamweaver CS4Adobe Dreamweaver CS4开发环境开发环境能够规划网站能够规划网站能够创建、管理、操作本地站点能够创建、管理、

2、操作本地站点能够制作简单网页并会保存、打开、预览能够制作简单网页并会保存、打开、预览网页网页知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评3项目效果展示项目效果展示 项目效果图项目效果图知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评4任务描述任务描述任务描述任务描述1规划电子系网站规划电子系网站从网站的需求分析、主题和内容、整体风格、结构等方面对

3、网站项目进行整体规划，同时设计出网站Logo和主要网页的版式。2熟悉网站开发环境熟悉网站开发环境启动Adobe Dreamweaver CS4后熟悉工作界面上的菜单栏、文档工具栏、文档选项卡式面板栏、文档编辑区、状态栏、功能面板等。3本地站点创建、管理与操作本地站点创建、管理与操作创建名为“电子系网站”的站点，站点根文件夹为本地磁盘的myweb文件夹。先在myweb中创建若干子文件夹和文件，再对站点进行管理和操作。4制作站长简介网页制作站长简介网页根据自身具体情况制作站长简介网页。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任

4、务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评5知识讲解知识讲解1.1 1.1 网站和网页概述网站和网页概述 1.1.基本术语基本术语 WWW WWW（World Wide WebWorld Wide Web）建立在建立在InternetInternet上的全球性的图形信息系统，上的全球性的图形信息系统，是超文本文是超文本文档的集合档的集合。URL(URL(统一资源定位器统一资源定位器)是是WebWeb服务器的地址，也称网址。它是一种访问服务器的地址，也称网址。它是一种访问InternetInternet上上信息资源的方法。信息资源的方法。HTMLHTML（HyperTextHyp

5、erText Markup Language Markup Language）H HTMLTML是一种用于编写网页的主要标记语言是一种用于编写网页的主要标记语言，是纯文本文件。是纯文本文件。但存在的缺点，使它不能适应越来越多的网络设备和应用但存在的缺点，使它不能适应越来越多的网络设备和应用的需要，于是的需要，于是W3CW3C又制定了又制定了XHTMLXHTML（Extensible Extensible HyperTextHyperText Markup LanguageMarkup Language）。）。XHTMLXHTML是一种增强的是一种增强的HTMLHTML。HTTPHTTP（Hyp

6、ertext Transfer ProtocolHypertext Transfer Protocol）HTTPHTTP是一种在网络上传输数据的协议，是用于从是一种在网络上传输数据的协议，是用于从WebWeb服务器服务器传输超文本到本地浏览器的传输协议。传输超文本到本地浏览器的传输协议。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评6知识讲解知识讲解网站与网页网站与网页 网站（站点）是若干个相关网页的集合，各个网页网站（站点）是若干个相关网页的集合，各个网页通过超级链接

7、相联系。通过超级链接相联系。网页是指由文本、图像、动画、音频、视频等内容网页是指由文本、图像、动画、音频、视频等内容组成的超文本文档。其中，文本或图像等网页元素组成的超文本文档。其中，文本或图像等网页元素还可以指向其他文档，这种功能称为超级链接。还可以指向其他文档，这种功能称为超级链接。CSSCSS（Cascading Style SheetCascading Style Sheet）CSSCSS是一组格式设置规则，用于控制页面内容的外观，是一组格式设置规则，用于控制页面内容的外观，如特定字体和字大小、表格的边框、文本颜色和背如特定字体和字大小、表格的边框、文本颜色和背景颜色、链接颜色和链接下

8、划线等，并可确保在多景颜色、链接颜色和链接下划线等，并可确保在多个浏览器中以更一致的方式显示。个浏览器中以更一致的方式显示。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评7知识讲解知识讲解2.2.网站建立方式网站建立方式使用自己的使用自己的WebWeb服务器。服务器。采用托管服务器。采用托管服务器。采用虚拟主机，即租用采用虚拟主机，即租用ISPISP硬盘空间，有独立的域名和共享或独立的硬盘空间，有独立的域名和共享或独立的IPIP地址，按空间大小和网络宽带资源收费。地址，

9、按空间大小和网络宽带资源收费。3.3.中小型网站开发的一般流程中小型网站开发的一般流程网站规划与网页设计阶段：网站规划与网页设计阶段：网站需求分析网站需求分析确定网站主题和内容确定网站主题和内容规划网站的整体风格规划网站的整体风格规划网站结构规划网站结构设计页面版式和效果设计页面版式和效果网页制作阶段：网页制作阶段：页面布局页面布局页面内容编排页面内容编排各个网页相链接各个网页相链接根据需要实现动态功能根据需要实现动态功能测试发布与管理维护阶段：测试发布与管理维护阶段：网站测试与完善网站测试与完善网站空间申请、发布、推广网站空间申请、发布、推广网站维护、更新网站维护、更新知识能力目标知识能力目

10、标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评8知识讲解知识讲解1.2 1.2 开发工具概述开发工具概述 1.1.与网页设计与制作相关的常用工具与网页设计与制作相关的常用工具 常用的网页制作软件工具有：Frontpage（所见即所得）Dreamweaver系列 Homesite（所见即所得）Hotdog HomePage（制作含多个分栏的页面)Golive（类似于Dreamweaver）常用的网页素材处理工具有:Photoshop、Fireworks Flash、LiveMotion（类似于

11、Flash）、Shockwave FreeHand（矢量绘图）、Illustrator（矢量绘图）CorelDraw（矢量绘图，创建印刷或Web广告或附属物，如工艺品、徽标、海报）GIF Animator Cool3D（3D特效文字）Anfy(Java特效生成工具，如树状菜单、3D效果、图像处理特效，为共享软件)知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评9知识讲解知识讲解2 2Adobe Dreamweaver CS4Adobe Dreamweaver CS4简介简

12、介 代表了网页设计领域最先进的设计理念与技术是一款可视化的网页设计和网站管理工具，是网页设计人员、网页开发人员与视觉设计人员的理想工具。是建立Web站点和应用程序的专业工具。具体应用 大型综合网站企业内部经营管理系统交互式的网上教学网站企业网站、个人网站知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评10技能操作示范技能操作示范 1网站赏析 知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳

13、总结课堂作业课堂作业演示与点评演示与点评11首页色彩运用大面积首页色彩运用大面积的蓝色渐变为底色，的蓝色渐变为底色，以蓝色和绿色为主进以蓝色和绿色为主进行搭配，和谐统一，行搭配，和谐统一，文字内容不多。文字内容不多。模块划分清晰。模块划分清晰。正文区采用了动画，正文区采用了动画，从静态中突出灵动感。从静态中突出灵动感。整体给人温馨、和谐整体给人温馨、和谐梦幻的感觉。梦幻的感觉。页头页头图片简单清晰，显示图片简单清晰，显示出清新、大气、和谐出清新、大气、和谐的简单之美。的简单之美。（1）班级网站班级网站知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技

14、能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评12以黄、绿色调为主，以黄、绿色调为主，采用了类似色的搭配，采用了类似色的搭配，给人以清新、和谐的给人以清新、和谐的视觉美感。视觉美感。正文区中间部分的各正文区中间部分的各个板块标题颜色和形个板块标题颜色和形式统一式统一,下面部分的下面部分的各个板块标题颜色不各个板块标题颜色不同。总体感觉是清晰，同。总体感觉是清晰，和谐统一中又有变化。和谐统一中又有变化。首页列出了导航菜单首页列出了导航菜单和网站地图，一目了和网站地图，一目了然。正文区采用了然。正文区采用了“左、中、右左、中、右”三个三个板块。板块。导航菜单中各个小

15、图导航菜单中各个小图片的选用别具一格。片的选用别具一格。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评13首页清新、爽朗。首页清新、爽朗。颜色对比较为强烈，重颜色对比较为强烈，重点突出。采用灰色和玫点突出。采用灰色和玫瑰红为主，灰色清爽、瑰红为主，灰色清爽、雅致，玫瑰红温馨、浪雅致，玫瑰红温馨、浪漫。漫。分分“上、中、下上、中、下”三个三个版块，中间分为版块，中间分为“左、左、中、右中、右”三个版块。三个版块。二级导航采用横式排列，二级导航采用横式排列，别具一格。别具一

16、格。页头动画体现了海尔集页头动画体现了海尔集团的理念和品质，让人团的理念和品质，让人既想到家的感觉又能记既想到家的感觉又能记住该品牌。导航栏引人住该品牌。导航栏引人注目。注目。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评14首页给人的视觉效果是一首页给人的视觉效果是一种古朴的气息迎面扑来。种古朴的气息迎面扑来。整体色彩、图文搭配协调，整体色彩、图文搭配协调，咖啡色的运用和图片的搭咖啡色的运用和图片的搭配和谐。配和谐。板块划分清晰。板块划分清晰。页头凤凰古城图片恰到好页

17、头凤凰古城图片恰到好处，突出了主题，也起了处，突出了主题，也起了广告作用。广告作用。导航栏的文字颇具特色。导航栏的文字颇具特色。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评15 引导页简洁、现代感较强。引导页简洁、现代感较强。背景用大块的深绿色，给人背景用大块的深绿色，给人安静、稳重的感觉。安静、稳重的感觉。在字体的运用上有大有小，在字体的运用上有大有小，有长有短，显得有对比，文有长有短，显得有对比，文字居中对齐，显得庄重。字居中对齐，显得庄重。图片的动态效果突出主题

18、，图片的动态效果突出主题，产生运动的视觉感受。产生运动的视觉感受。首页整体视觉感受清晰、和首页整体视觉感受清晰、和谐。谐。整体颜色采用绿色，既统一整体颜色采用绿色，既统一又有变化，主题突出。又有变化，主题突出。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评16技能操作示范技能操作示范.网站规划步骤 网站需求分析网站需求分析 确定网站主题和内容确定网站主题和内容 规划网站的整体风格规划网站的整体风格 规划网站结构规划网站结构 网站网站LogoLogo设计设计 主要页面设计

19、主要页面设计知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评17技能操作示范技能操作示范（1）网站需求分析）网站需求分析知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评18技能操作示范技能操作示范（2）确定网站主题和内容确定网站主题和内容知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任

20、务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评19技能操作示范技能操作示范（3）规划网站的整体风格）规划网站的整体风格 知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评20技能操作示范技能操作示范说明说明页面布局类型（版式类型）：上下型、左右型、杂合型、封页面布局类型（版式类型）：上下型、左右型、杂合型、封面型、面型、FlashFlash动画型等。动画型等。网页色彩设计知识：网页色彩设计知识：计算机屏幕的色彩是由红、绿、蓝三种原色组成。计算机屏幕的色彩是由红、

21、绿、蓝三种原色组成。色彩三要素：色彩三要素：色相：是色彩的相貌，即区分各类色彩的名称，如色相：是色彩的相貌，即区分各类色彩的名称，如红色、绿色、橙色等。色相由波长决定，如蓝色、红色、绿色、橙色等。色相由波长决定，如蓝色、天蓝、靛蓝是同一色相。天蓝、靛蓝是同一色相。饱和度：又叫纯度，是指色彩的纯净程度，即色相饱和度：又叫纯度，是指色彩的纯净程度，即色相感觉鲜艳或灰暗的程度。感觉鲜艳或灰暗的程度。明度：是指色彩的明暗程度，体现颜色的深浅。明度：是指色彩的明暗程度，体现颜色的深浅。黑色、白色和灰色只有明度特征，没有色相和饱和度的区黑色、白色和灰色只有明度特征，没有色相和饱和度的区别。别。知识能力目标

22、知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评21技能操作示范技能操作示范说明说明颜色的计算机表示：以颜色的计算机表示：以#开头的开头的6 6位或位或3 3位十六进位十六进制数，或使用预设的颜色名称（如制数，或使用预设的颜色名称（如blackblack、redred、blueblue、graygray、greengreen、yellowyellow、whitewhite、purplepurple、silver silver、oliveolive等）。等）。颜色与心里感觉：当看到不同

23、的颜色时，会产颜色与心里感觉：当看到不同的颜色时，会产生不同的心里感觉生不同的心里感觉:知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评22技能操作示范技能操作示范知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评23技能操作示范技能操作示范说明说明页面色彩的搭配技巧页面色彩的搭配技巧 色彩要鲜明、独特色彩要鲜明、独特 注意色彩联想注意色彩联想 色彩要

24、搭配合理色彩要搭配合理 讲究艺术性讲究艺术性 合理使用邻近色合理使用邻近色 合理使用对比色合理使用对比色 巧妙使用背景色巧妙使用背景色 严格控制色彩的数量严格控制色彩的数量 页面中图像和动画使用：页面中图像和动画使用：要有良好的视觉吸引要有良好的视觉吸引力。力。要简洁明确地传达网要简洁明确地传达网站信息。站信息。要有强而有力的诱导要有强而有力的诱导作用，造成鲜明的视作用，造成鲜明的视觉感受效果，从观看觉感受效果，从观看过程中产生愿望和欲过程中产生愿望和欲求。求。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总

25、结课堂作业课堂作业演示与点评演示与点评24技能操作示范技能操作示范（4 4）规划网站结构）规划网站结构知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评25技能操作示范技能操作示范说明说明栏目结构的规划：将网站中所要涉及的信息进行细栏目结构的规划：将网站中所要涉及的信息进行细分和合理组织，可分为三种子类型：分和合理组织，可分为三种子类型：层次结构层次结构 线性结构线性结构 网状结构网状结构链接结构的规划：链接结构的规划：导航样式：横排导航、竖排导航、多排导航、导航样式：横排

26、导航、竖排导航、多排导航、图片式导航、下拉菜单导航等。图片式导航、下拉菜单导航等。导航的表现形式：菜单、站内搜索引擎、当前导航的表现形式：菜单、站内搜索引擎、当前浏览位置等。浏览位置等。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评26技能操作示范技能操作示范说明说明目录结构的规划：目录结构的规划：各个栏目对应的网页分别存放到建立的对应的各个栏目对应的网页分别存放到建立的对应的子文件夹中。子文件夹中。主页使用的或公共的图像、动画、脚本、主页使用的或公共的图像、动画、脚本

27、、CSSCSS样样式、下载的内容、数据库也分别存放到对应的式、下载的内容、数据库也分别存放到对应的子文件夹中。子文件夹中。需要经常更新的内容可单独存放到一个子文件需要经常更新的内容可单独存放到一个子文件夹中。夹中。在各个栏目对应的子文件夹中还可再创建一些在各个栏目对应的子文件夹中还可再创建一些子文件夹，以便存放其独有的图像、动画、脚子文件夹，以便存放其独有的图像、动画、脚本、更深层次的网页等文件，但目录的层次不本、更深层次的网页等文件，但目录的层次不宜过深，最好不要超过宜过深，最好不要超过4 4层。层。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范

28、技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评27技能操作示范技能操作示范说明说明文件夹、文件命名：文件夹、文件命名：文件夹、文件命名：采用英文单词、汉语拼音或缩文件夹、文件命名：采用英文单词、汉语拼音或缩写，并尽量用小写，命名时可以包括数字和下划线写，并尽量用小写，命名时可以包括数字和下划线（不能以数字开头）。（不能以数字开头）。主页命名：主页命名：index.htmlindex.html、index.aspindex.asp、index.jspindex.jsp等。等。多个单词或汉语拼音的连接：多个单词或汉语拼音的连接：骆驼命名法：首字母小写，随后的每个单

29、词或汉骆驼命名法：首字母小写，随后的每个单词或汉语拼音的第一个字母大写，如语拼音的第一个字母大写，如subTitlesubTitle、jiXuJiaoYujiXuJiaoYu。PascalPascal命名法：与骆驼命名法类似，但首字母大命名法：与骆驼命名法类似，但首字母大写如写如JiXuJiaoYuJiXuJiaoYu。下划线命名法：在命名中加入下划线，如下划线命名法：在命名中加入下划线，如news_listnews_list。连字符命名法：使用连字符连接，如连字符命名法：使用连字符连接，如sidebar-sidebar-menumenu。知识能力目标知识能力目标项目效果展示项目效果展示知识讲

30、解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评28技能操作示范技能操作示范（5 5）网站）网站LogoLogo设计设计设计创意来自网站的名称和内容：设计创意来自网站的名称和内容：网站有代表性的人物、动物、植物、物品网站有代表性的人物、动物、植物、物品等，可以用它们作为标志，必要时可以以等，可以用它们作为标志，必要时可以以其作为设计蓝本加以卡通化和艺术化。如其作为设计蓝本加以卡通化和艺术化。如皮皮网的调皮的小狗标志、中国银行的铜皮皮网的调皮的小狗标志、中国银行的铜板标志等。板标志等。用自己网站的中文、英文名称或相关的典用自己

31、网站的中文、英文名称或相关的典型字母，采用不同的字体、字母的变形制型字母，采用不同的字体、字母的变形制作标志。如海尔、中国联通等公司网站的作标志。如海尔、中国联通等公司网站的LogoLogo。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评29技能操作示范技能操作示范电子系网站电子系网站的的LogoLogo设计可以有多种，教学网站中使用设计可以有多种，教学网站中使用了第二种设计方法，用了第二种设计方法，用C C和和E E分别代表系部由两大专业分别代表系部由两大专业类组成，

32、即电子（类组成，即电子（ElectronicsElectronics）和计算机）和计算机（ComputerComputer），），A A寓意飞速发展，圆环表示系部是一个寓意飞速发展，圆环表示系部是一个和谐的大家庭。和谐的大家庭。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评30技能操作示范技能操作示范。（6 6）主要页面设计）主要页面设计网页设计的基本原则：网页设计的基本原则：用户至上原则用户至上原则易用性原则易用性原则实用性原则实用性原则 知识能力目标知识能力目标项目

33、效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评31技能操作示范技能操作示范知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评32技能操作示范技能操作示范说明说明网页版面尺寸规范网页版面尺寸规范:网页的的总宽度（含边距、边框宽度、补白、内网页的的总宽度（含边距、边框宽度、补白、内容宽度）：容宽度）：800800600600分辨率时不超过分辨率时不超过770px770px，1024

34、1024768768分辨率时不宜超过分辨率时不宜超过1000px1000px。网页的长度：不宜超过网页的长度：不宜超过3 3屏屏(最佳长度最佳长度1.81.82.52.5屏屏 )。网页文件大小：主页不宜超过网页文件大小：主页不宜超过60KB60KB，二级页面文，二级页面文件不宜超过件不宜超过90KB90KB。广告尺寸：应为标准尺寸，全尺寸广告尺寸：应为标准尺寸，全尺寸bannerbanner不宜超不宜超过过30KB30KB。网页元素设计网页元素设计:页头：定义页面主题，常放置页面标题、公司标页头：定义页面主题，常放置页面标题、公司标志以及旗帜广告。志以及旗帜广告。页脚：与页头相呼应，放置副标题

35、、公司信息、页脚：与页头相呼应，放置副标题、公司信息、制作者版权信息、浏览器分辨率要求等。制作者版权信息、浏览器分辨率要求等。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评33技能操作示范技能操作示范说明说明页面内容编排页面内容编排:主次分明、重点突出主次分明、重点突出 大小搭配、错落有致大小搭配、错落有致 图文并茂、相得益彰图文并茂、相得益彰 适当分块、清晰易读适当分块、清晰易读 页面内容分块方法：页面内容分块方法：利用留空和划线进行分块利用留空和划线进行分块 利用色

36、块进行分块利用色块进行分块 利用线框分块利用线框分块 知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评34技能操作示范技能操作示范说明说明文字设计：文字设计：用默认字体（宋、黑、用默认字体（宋、黑、Times New RomanTimes New Roman、ArialArial）。特殊字体用图片。正文文本常使用）。特殊字体用图片。正文文本常使用带有衬线的宋体（英文使用带有衬线的宋体（英文使用Times New Times New RomanRoman），标题字体常使用不

37、带衬线的黑体），标题字体常使用不带衬线的黑体（英文使用（英文使用ArialArial）。特殊的字体常用于广告、）。特殊的字体常用于广告、装饰等。装饰等。文字粗细：细显得优美，粗显得有力。文字粗细：细显得优美，粗显得有力。文字字号：正文文字字号：正文12px12px14px14px；版权；版权10px10px12px12px；标题；标题14px14px16px 16px。文字字间距和行间距：会改变访问者的阅读文字字间距和行间距：会改变访问者的阅读心理。心理。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂

38、作业课堂作业演示与点评演示与点评35任务任务1-2 1-2 熟悉网站开发环境熟悉网站开发环境1.1.安装安装Adobe Dreamweaver CS4Adobe Dreamweaver CS4安装安装Adobe Dreamweaver CS4Adobe Dreamweaver CS4的方法与安装其他应用的方法与安装其他应用软件的方法类似。软件的方法类似。2.Adobe Dreamweaver CS42.Adobe Dreamweaver CS4的启动的启动在桌面上单击在桌面上单击【开始开始】按钮并打开按钮并打开【程序程序】【Adobe Dreamweaver CS4Adobe Dreamwea

39、ver CS4】菜单，此时将自动打开菜单，此时将自动打开操作界面，可进行相关操作。操作界面，可进行相关操作。在在“我的电脑我的电脑”或或“资源管理器资源管理器”中找到要编辑的中找到要编辑的网页文件后，右击该文件，在快捷菜单中选择网页文件后，右击该文件，在快捷菜单中选择【使使用用Adobe Dreamweaver CS4Adobe Dreamweaver CS4编辑编辑】命令或命令或【打开方式打开方式】【Adobe Dreamweaver CS4Adobe Dreamweaver CS4】命令。命令。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能

40、操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评36技能操作示范技能操作示范知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评37（2 2）修改文档标题为）修改文档标题为“站长简介站长简介”，在文档编辑区输入，在文档编辑区输入“站长个人档案站长个人档案”后回车。再将光标置于文字中间，后回车。再将光标置于文字中间，用标记选择器选择用标记选择器选择以选中该段文本，在属性面板的以选中该段文本，在属性面板的【格式格式】中选择中选择“标题标题1”1”。说明

41、说明：切换到代码视图，查看自动生成的代码：切换到代码视图，查看自动生成的代码：站长简介站长简介 以及以及 站长个人档案站长个人档案 其中：其中：称为（左）标签，称为（左）标签，称为右标称为右标签，而签，而“站长简介站长简介”统称为统称为titletitle元元素。素。技能操作示范技能操作示范知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评38技能操作示范技能操作示范（3）打开【查看】【网格设置】【显示网格】或【查看】【标尺】【显示】菜单，显示网格或标尺。（4）打开【修改】

42、【页面属性】菜单（或单击属性面板上【页面属性】按钮），设置网页编码方式。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评39技能操作示范技能操作示范（5 5）打开）打开【修改修改】【页面属性页面属性】菜单后设置。菜单后设置。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评40技能操作示范技能操作示范说明说明切换到代码视图，查看自动生成的代码：切换到代

43、码视图，查看自动生成的代码：style type=text/!-知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评41技能操作示范技能操作示范说明说明外观（外观（HTMLHTML）：设置后自动产生的表现代码嵌入到）：设置后自动产生的表现代码嵌入到XHTMLXHTML标签中，不符合表现与结构相分离的原则，故不标签中，不符合表现与结构相分离的原则，故不建议采用。建议采用。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务

44、实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评42技能操作示范技能操作示范说明说明链接（链接（CSSCSS）：设置超链接的有关属性）：设置超链接的有关属性。标题（标题（CSSCSS）：设置）：设置6 6级标题的有关属性级标题的有关属性跟踪图像：设置跟踪图像的有关属性，以备制作网页跟踪图像：设置跟踪图像的有关属性，以备制作网页时作为对照用，它不会出现在最终作品中。时作为对照用，它不会出现在最终作品中。（6 6）打开）打开【文件文件】【保存保存】或或【文件文件】【保存全部保存全部】菜单（或按菜单（或按Ctrl+SCtrl+S键）保存网页到桌面上，取名为键）保存网页到桌面上，取名为

45、zhanZhangJianJie.htmlzhanZhangJianJie.html。保存后在文档选项卡式面板。保存后在文档选项卡式面板栏显示出了保存的路径。栏显示出了保存的路径。（7 7）关闭标尺和网格的显示。）关闭标尺和网格的显示。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评43技能操作示范技能操作示范任务任务1-3 1-3 本地站点创建与管理本地站点创建与管理 1.1.本地站点创建本地站点创建1 1）打开）打开【文件文件】面板。面板。2 2）创建本地站点）创建本

46、地站点（1 1）确定本地站点的根目录所在位置，即）确定本地站点的根目录所在位置，即D:D:mywebmyweb（若无先创建之）。（若无先创建之）。（2 2）打开）打开【站点站点】【管理站点管理站点】菜单（或从菜单（或从【文文件件】面板的站点下拉列表框中选择面板的站点下拉列表框中选择“管理站点管理站点”）后后【新建新建】站点。站点。（3 3）选择）选择【基本基本】或或【高级高级】选项卡，按步骤完成选项卡，按步骤完成站点定义的操作，站点取名为站点定义的操作，站点取名为“电子系网站电子系网站”。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任

47、务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评44技能操作示范技能操作示范2 2本地站点创建、管理与操作本地站点创建、管理与操作1 1）站点管理）站点管理（1 1）打开）打开【管理站点管理站点】对话框。对话框。（2 2）选择）选择“电子系网站电子系网站”并单击并单击【编辑编辑】按钮，可以重按钮，可以重新编辑站点定义信息，例如可将站点文件夹更改为新编辑站点定义信息，例如可将站点文件夹更改为D D盘盘中以学号和名字命名的文件夹。中以学号和名字命名的文件夹。（3 3）单击）单击【导出导出】按钮将站点设置信息导出为外部文件按钮将站点设置信息导出为外部文件“电子系网站电子系网站.st

48、este”保存到站点根文件夹中，以备以保存到站点根文件夹中，以备以后导入用。后导入用。说明：说明：【复制复制】：根据现有的某个站点创建结构相同或类似的：根据现有的某个站点创建结构相同或类似的站点。站点。【删除删除】：删除某个站点，而实际的本地文件夹和文件：删除某个站点，而实际的本地文件夹和文件并未删除。并未删除。知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评45技能操作示范技能操作示范 2 2）站点操作）站点操作（1 1）创建文件夹、文件：在）创建文件夹、文件：在【文件

49、文件】面板中选中根文件夹，在面板中选中根文件夹，在其下创建其下创建3 3个子文件夹个子文件夹imageimage、attachmentattachment、xiBuGaiKuangxiBuGaiKuang，再在再在xiBuGaiKuangxiBuGaiKuang文件夹中创建文件夹中创建bxjj.htmlbxjj.html文件。文件。（2 2）复制文件夹）复制文件夹xiBuGaiKuangxiBuGaiKuang，将复制后的文件夹更名为，将复制后的文件夹更名为jiaoXueGuanLijiaoXueGuanLi，再将文件夹，再将文件夹jiaoXueGuanLijiaoXueGuanLi中的中的b

50、xjj.htmlbxjj.html更名为更名为tszy.htmltszy.html。使用使用“我的电脑我的电脑”或或“资源管理器资源管理器”工具将桌面上的工具将桌面上的zhanZhangJianJie.htmlzhanZhangJianJie.html复制到复制到D:D:mywebmyweb下。下。在在【文件文件】面板上将其面板上将其zhanZhangJianJie.htmlzhanZhangJianJie.html拖入到文件夹拖入到文件夹attachmentattachment中。中。在站点根文件夹下新建在站点根文件夹下新建4 4个子文件夹个子文件夹jiXuJiaoYujiXuJiaoYu、