《（中职）多媒体应用技术任务8.1网站的规划与设计教学课件（）.pptx》由会员分享，可在线阅读，更多相关《（中职）多媒体应用技术任务8.1网站的规划与设计教学课件（）.pptx（18页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、（中职）多媒体应用技术任务8.1 网站的规划与设计教学课件（工信版）任务8.1 网站的规划与设计【任务描述】【任务目标】【任务分析】郭迪要想建一个个人求职网站，首先得对网站有一个明确的定位、分析和思考，郭迪该怎样从第一步开始做起呢？先根据郭迪建立站点的需求（做一个个人求职网站）对郭迪个人的各项信息进行收集整理。确定网站的结构。并对网站风格进行设计。确定网站首页的设计。1.会根据信息确定网站的结构。2.会根据网站目的对网站风格进行设计。3.能根据网站风格对首页进行设计。4.会在Dreamweaver中创建站点。5.会新建首页文件index.html。任务8.1 网站的规划与设计【任务实施】1.根
2、据郭迪的网站建设目的（个人求职网站），搜集到的信息包括有个人基本信息（文字、图片）、自我介绍（文字）、照片（图片）和联系方式（表单）等。2.根据信息确定栏目有：自我介绍、我的照片、我的简历、联系我四个栏目。3.郭迪是一个阳光、生动、活泼的男孩子，根据色彩赋予的情感内容，橙色更适合郭迪，再搭配蓝色。由于内容不是很多，更需要体现的是网页版面的设计，郭迪决定使用“T型结构”的网页版面任务8.1 网站的规划与设计【任务实施】4.创建站点文件夹。在E盘新建文件夹“guodiWeb”，在文件夹中创建子文件夹“images”。即在E盘单击鼠标右键，选则“新建|文件夹”，文件夹改名为“guodiWeb”，打开
3、“guodiWeb”文件夹，再新建一个名为“images”的子文件夹用于图片的保存。如图8-1-1所示。图8-1-1 创建站点文件夹任务8.1 网站的规划与设计【任务实施】5.启动Dreamweaver CS6,建立本地站点。选择“开始”菜单下的Dreamweaver CS6，启动它。选择“站点|新建站点”，在弹出的对话框中，设置站点名称为“我的个人网站”，设置本地站点文件夹为：“E:guodiWeb”，点击“保存”按钮。如图8-1-2所示。图8-1-2 在Dreamweaver中新建“我的个人网站”站点任务8.1 网站的规划与设计【任务实施】6.在站点中新建index.html网页文件。在“
4、文件”浮动面板空白处单击鼠标右键，选择“新建文件”，将新建的网页文件改名为“index.html”，如图8-1-3所示。图8-1-3 在文件面板新建index.html首页任务8.1 网站的规划与设计【相关知识】一、网站设计的基本知识（一）网页1.网页是通过WWW发布的包含有文本、图片、声音、动画等多媒体信息的页面，是WWW的基本单位。2.超文本标记语言HTMLHTML（Hyper Text Markup Language）：HTML文件是WWW中使用的主要文件类型。它是一种用于描述超文本内容的标签系统，是最基本的网页编写语言。3.网站是一组具有共享属性（如相关主体题、类似的设计或共同目的）的
5、链接文档。网站由众多的网页组成的，它们存储在某一个Web服务器上。4.首页网站的默认页面，也称为主页。Web服务器都有自己默认的主页名称，输入地址时仅指定WWW服务器域名或IP地址时打开的页面就是首页。任务8.1 网站的规划与设计【相关知识】5.在网站文件夹中常见文件夹如下：html：存放网站中的网页，如果网站的结构比较复杂，网页数量较多页存放在以其专题类型命名的文件夹中。template：存放网页模板，这些模板可作为各网页的设计基础。css：存放网页中设置文本的css样式文件。library：存放网页中图像库之类的组件的文件夹。image：存放图片的文件夹。由于网站中通常有大量的图片，可以在
6、该文件夹下拉栏目建立于文件夹。temp：存放网页制作时可能使用的一些临时文件。任务8.1 网站的规划与设计【相关知识】二、网页基本构成元素1.文本：最基本的构成元素，表现信息内容的主体。占用空间小，信息量大。2.超链接：相关网页及其他网络资源之间联系的纽带。3.图片、动画：静态和动态的图形文件。4.声音和视频：音乐，在线广播，在线影视5.信息提交表单：提供网上交互功能的基本元素，用来收集浏览者提供的信息并提交给Web服务器进行处理。任务8.1 网站的规划与设计【相关知识】三、网站分类与设计风格可分为新闻门户类、工商企业类、文化教育类、运动休闲类、游戏娱乐类、生活时尚类、兴趣爱好类，如图8-1-
7、4至8-1-10所示。图8-1-4 新闻门户类 图8-1-5 工商企业类 图8-1-6文化教育类 图8-1-7运动休闲类任务8.1 网站的规划与设计【相关知识】图8-1-8 游戏娱乐类图8-1-10 兴趣爱好类图8-1-9 生活时尚类三、网站分类与设计风格任务8.1 网站的规划与设计【相关知识】四、网站结构设计要求1.栏目标题让人一目了然。2.将所有文件都放在站点根目录下的相应目录中。3.按栏目内容建立子目录。每个主要的目录下都建立独立的“images”目录4.不要使用中文为目录或文件的名字，命名的名称不能过长，应简单明了。任务8.1 网站的规划与设计【相关知识】五、网站风格设计(一)确定网站
8、的版面设计1.“T”结构布局所谓“T”结构：就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母“T”，所以称之为“T”形布局。这是网页设计中用的最广泛的一种布局方式。优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人“看之无味”。图8-1-11 T形布局任务8.1 网站的规划与设计【相关知识】五、网站风格设计(一)确定网站的版面设计2.“国”型布局“国”字型布局由“同”字型布局进化而来，因布局结构与汉字“国”相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Bann
9、er广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。图8-1-12“国”字形布局任务8.1 网站的规划与设计【相关知识】五、网站风格设计(一)确定网站的版面设计3.对称对比布局所谓“对称对比”结构：顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机结合比较困难。图8-1-12 对称对比布局任务8.1 网站的规划与设计【相关知识】五、网站风格设计(一)确定网站的版面设计4.POP布局（自由布局）所谓“POP布局”结构：POP引自广告术语，就是页面布局象一张宣传海报，以一张精美图片作为页面的设计中心
10、。常用于时尚类站点。优点是漂亮吸引人，缺点就是速度慢。图8-1-12 POP布局任务8.1 网站的规划与设计【相关知识】五、网站风格设计(二)确定网站首页的创意设计首页的制作风格也决定了整个网站将要延续的风格。一般首页设计和制作占整个制作时间相当大的比重。（1）书籍封面式首页有些大型网站往往有一个书籍封面式的首页，上面只有一个“进入”的链接，点击之后才可进入到网站。这种首页设计精美、考究。（2）期刊杂志式首页与书刊封面式首页相似，但在首页上有网站全部内容的目录索引，图文并茂，看上去就像期刊杂志的封面。这种首页漂亮，又使网站的主要内容一目了然，是一种值得推荐的形式。（3）报纸式首页采用报纸式的首页设计，将栏目索引、功能模块、具体内容一并显示在首页，看上去就像报纸的头版一样。这种首页，多用于电子商务网站，搜索引擎网站和新闻信息网站，速度快，操作简便。谢 谢！