任务二网站主页面布局设计与制作.pptVIP

任务二：网站主页面布局设计与制作 任务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初识Dreamweaver 1．网页 （1）动态网页 （2）交互式网页 （3）静态网页 2．网站 （1）本地站点 （2）远程站点 （3）Web站点 任务2-3: 主页布局设计 网页界面的基本元素 网页页面的基本元素由页眉、导航条、文本、图像、页脚等组成，如图2-1所示。 1．页眉 2．导航条 3．文本 4．图像 5．多媒体 6．页脚 HTML简介 HTML是英文Hyper Text Markup Language的缩写，中文意为超文本标记语言，是目前经常采用的一种建立网页的脚本语言。 HTML文件是纯文本的文件格式，可以直接用诸如记事本等任何文本编辑器来进行编辑。 文件中的任何HTML元素（如文字、字体、字体大小、段落、图片、表格、超级链接等）都用不同的标签来描述，由此给出文件的结构和相互间的逻辑关系。 为了对网页制作能够更好地把握，应该了解HTML。 初识HTML 1．用HTML编写一个简单的页面 2．使用浏览器预览网页 HTML基本结构 1．页面整体标签 一个完整页面，其标签大体可以是如图3-9所示的结构。 HTML文件以标签html开始以标签/html为结尾，其中包括头部（head）和主体（body）。头部是说明页面名称和页面相关信息的，即是以标签head开始、以标签/head结束的部分。主体是以标签 body 开始、以标签 /body 结束的部分。 2．头部标签 头部文件一般放置页面标题、创建网站的信息说明等，头部文件中的内容一般不在浏览器中显示，标题则在标题栏中显示。 我们要养成制作标题的好习惯，因为当很多页面被打开在浏览者的屏幕中时，通常只能看到下面工具栏中显示的网页标题。此外，有哪些信誉好的足球投注网站引擎显示有哪些信誉好的足球投注网站的结果也是显示页面的标题。 标题的标签是： title 标题名 /title 3．主体标签 body标签有很多属性，它定义了网页在浏览器中显示的内容。主体标签可以定义背景图像、背景颜色、文字颜色、超级链接的颜色等。 主题标签的格式： body background=“图片文件名”、text=“颜色值”、link=“颜色值”、vlink=“颜色值”、alink=“颜色值”/ body 常用HTML 标签的含义 1．文本标签 表3-1列出了文本标签的说明。 2．排版格式标签 表3-2列出了排版格式标签的说明。 3．链接标签 表3-3给出了链接标签的说明。 4．图像标签 表3-4列出了图像标签的说明。 5．表格标签 表3-5列出了表格标签的说明。 添加超级链接 1．什么是超级链接 （1）绝对链接 绝对链接是一种指向某个页面精确位置的超级链接。 （2）相对链接 相对链接是从当前页面位置出发指向目的页面位置的路径。 2．超级链接的实现 （1）文字或图像链接 （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、设置前景色，使用渐变工具 4、使用标尺和参考线 5、绘制矩形、保存图片 练习 步骤： 1、打开已有的图片文件tigao.psd 2、设置前景色为蓝