任务二网站主页面布局设计与制作.ppt
《任务二网站主页面布局设计与制作.ppt》由会员分享,可在线阅读,更多相关《任务二网站主页面布局设计与制作.ppt(83页珍藏版)》请在三一文库上搜索。
1、任务二:网站主页面布局设计与制作,任务2-1 网站用户体验,1依服务类型区分 2依主体性质区分 3各种网站类型在网络中所占的比重,网页设计的基本规律,商业、企业和政府机关类网站 1商业、企业类网站 2经济类网站 3社会和政府机关类网站,信息、网络服务、教育类网站,1信息类网站 2网络服务类网站 3教育类网站,休闲、时尚类网站,1时尚网站 2购物网站 3医学健康网站 4饮食网站 5宠物和儿童网站 6运动网站,卡通和游戏类网站,1卡通网站 2娱乐和游戏网站 3娱乐圈人物网站,电影、音乐、艺术类网站,1电影网站 2音乐网站 3艺术网站,图 各种网站类型在网络中所占的大致比重,任务2-1 网站用户体验
2、,欣赏典型网站 资讯类 如新浪、搜狐等 资讯和形象类 如淘宝等 形象类 如宝马等,任务2-2初识Dreamweaver,1网页 (1)动态网页 (2)交互式网页 (3)静态网页 2网站 (1)本地站点 (2)远程站点 (3)Web站点,任务2-3: 主页布局设计,网页界面的基本元素 网页页面的基本元素由页眉、导航条、文本、图像、页脚等组成,如图2-1所示。,图2-1 网页的基本元素 http:/ 2导航条 3文本 4图像 5多媒体 6页脚,HTML简介,HTML是英文Hyper Text Markup Language的缩写,中文意为超文本标记语言,是目前经常采用的一种建立网页的脚本语言。 H
3、TML文件是纯文本的文件格式,可以直接用诸如记事本等任何文本编辑器来进行编辑。,文件中的任何HTML元素(如文字、字体、字体大小、段落、图片、表格、超级链接等)都用不同的标签来描述,由此给出文件的结构和相互间的逻辑关系。 为了对网页制作能够更好地把握,应该了解HTML。,初识HTML,1用HTML编写一个简单的页面 2使用浏览器预览网页,HTML基本结构,1页面整体标签 一个完整页面,其标签大体可以是如图3-9所示的结构。,图3-9 HTML页面的标签结构,HTML文件以标签开始以标签为结尾,其中包括头部(head)和主体(body)。头部是说明页面名称和页面相关信息的,即是以标签开始、以标签
4、结束的部分。主体是以标签开始、以标签结束的部分。,2头部标签,头部文件一般放置页面标题、创建网站的信息说明等,头部文件中的内容一般不在浏览器中显示,标题则在标题栏中显示。,我们要养成制作标题的好习惯,因为当很多页面被打开在浏览者的屏幕中时,通常只能看到下面工具栏中显示的网页标题。此外,搜索引擎显示搜索的结果也是显示页面的标题。 标题的标签是:标题名,3主体标签,标签有很多属性,它定义了网页在浏览器中显示的内容。主体标签可以定义背景图像、背景颜色、文字颜色、超级链接的颜色等。,主题标签的格式: background=“图片文件名”、text=“颜色值”、link=“颜色值”、vlink=“颜色值
5、”、alink=“颜色值”,常用HTML 标签的含义,1文本标签 表3-1列出了文本标签的说明。,表3-1 文本标签说明,2排版格式标签,表3-2列出了排版格式标签的说明。,表3-2 排版格式标签说明,3链接标签,表3-3给出了链接标签的说明。,表3-3 链接标签说明,4图像标签,表3-4列出了图像标签的说明。,表3-4 图像标签说明,5表格标签,表3-5列出了表格标签的说明。,表3-5 表格标签说明,添加超级链接,1什么是超级链接 (1)绝对链接 绝对链接是一种指向某个页面精确位置的超级链接。 (2)相对链接 相对链接是从当前页面位置出发指向目的页面位置的路径。,2超级链接的实现,(1)文字
6、或图像链接 (2)热区链接 (3)锚链接 (4)E-mail链接 (5)空链接,任务2-4:用photoshop或进行主页效果图的制作,网页图片基础知识 编辑图片文件 辅助绘图工具 设置颜色,网页图片基础知识,1、矢量图和位图 2、颜色模式,编辑图片文件,1、新建网页图片文件 2、保存网页图片文件 3、打开网页图片,辅助绘图工具,1、使用标尺 2、使用参考线 3、使用矩形工具 4、使用直线工具 5、使用单行(列)选框工具,设置颜色,1、设置前景色和背景色 2、使用油漆桶工具 3、使用渐变工具,实例-设置网页图片,步骤: 1、启动photoshop 2、打开“新建”对话框 3、设置前景色,使用渐
7、变工具 4、使用标尺和参考线 5、绘制矩形、保存图片,练习,步骤: 1、打开已有的图片文件tigao.psd 2、设置前景色为蓝色 3、绘制矩形 4、设置前景色为黄色 5、绘制4个矩形 6、保存图片文件,任务2-5:网页内容排版,表格的一般应用,表格在网页设计中的地位非常重要,主要表现在网页定位上。 先介绍一下表格的标记。当我们在页面中插入一个表格后,可以在下面的标签提示区看到等标签,如图4-1所示。,图 表格的标签,表格的标签是table,一个表格由开始到结束;说明表格的单元行,表有多少行就有多少个;说明表格的列数和相应栏目的名称,有多少个栏就有多少个;是单元格,它是组成表格的最根本元素。,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 任务 网站 主页 布局 设计 制作
链接地址:https://www.31doc.com/p-3229723.html