网页设计与制作电子课件

《网页设计与制作电子课件》由会员分享，可在线阅读，更多相关《网页设计与制作电子课件（196页珍藏版）》请在金锄头文库上搜索。

1、网页设计与制作项目式教程,任务一：班级主页的界面设计 任务二：班级主页的配色方案设计 任务三：班级主页的界面导出 任务四：班级主页首页制作 任务五：班级主页二级页面制作 任务六：班级主页页面的美化 实现技术：Fireworks+Dreamweaver,项目一 我们的青春年代班级主页的设计与制作,项目划分,项目划分,任务一：企业网站主页的设计 企业网站服务器的配置 企业网站主页的设计 任务二：企业网站新闻的创建 企业网站数据库的创建与连接 企业网站新闻的基本操作 企业网站新闻的显示 企业网站管理员登录页的设计 实现技术：ASP+Dreamweaver,项目二 森兴木材企业网站的创建,项目一 我们

2、的青春年代班级主页制作,网页的制作流程,项目一 我们的青春年代班级主页制作,班级主页网站信息结构,项目一 我们的青春年代班级主页制作,班级主页项目具体划分,任务预备知识 （一）,Fireworks 8 基础 矢量与位图对象 交互式图形 图像的优化与导出 Fireworks 8文档的基本操作 Fireworks 8文档的新建、打开、导入、保存与导出 Fireworks 8的工作环境 工具箱面板 、属性检查器面板 文本的输入与编辑 矢量对象的基本操作 位图的基本操作 层、蒙版和混合模式 滤镜的应用,任务预备知识 （一）,矢量与位图对象 矢量图形使用称为“矢量”的线条和曲线（包含颜色和位置信息）呈现

3、图像。编辑矢量图时修改的是描述其形状的线条和曲线的属性。矢量图形与分辨率无关 。 位图图形由排列成网格的称为“像素”的点组成。图像是由网格中每个像素的位置和颜色值决定。编辑位图图形时修改的不是线条和曲线而是像素。位图图形与分辨率有关。 交互式图形 切片和热点是指定网页图形中交互区域的网页对象。切片将图像切成不同的部分，可以将变换图像行为、动画和统一资源定位器 (URL) 链接应用到这些部分上。,任务预备知识 （一）,Fireworks 8文档的基本操作 新建： 选择【文件】|【新建】 ，设置画布大小、分辨率和颜色的属性值 。 要创建与剪贴板上的对象大小相同的新文档 ，则将需要参照大小的对象复制

4、到剪贴板，然后选择【文件】|【新建】操作 。 打开： 选择【文件】|【打开】操作 。 导入： 选择【文件】|【导入】打开导入对话框，选择需要导入的对象 ，在文档中通过单击操作可以按照图像的实际尺寸导入图像对象，通过单击鼠标左键拖动的方式可以按照虚线尺寸导入图像对象。 保存： 选择【文件】|【保存】 或选择【文件】|【另存为】 。 导出： 选择【文件】|【导出】操作或者直接选择【文件】|【图像预览】操作 。,任务预备知识 （一）,Fireworks 8工作环境,任务预备知识 （一）,Fireworks 8文本编辑 文本的编辑包括文本的字体、字号、字体样式设置、字距（可调范围为-99100）、行距

5、、文本方向、文本对齐方式、文本缩进、段落间距、基线调整（范围为-99100，调整文字垂直方向的位置，负值低于基线，正值高于基线）等,任务预备知识 （一）,Fireworks 8矢量对象的基本操作 直线、矩形和椭圆的绘制与调整 圆角矩形、多边形和星形的绘制与调整 自动形状的绘制 直线和曲线路径段的绘制与调整 自由变形矢量路径的绘制 路径的编辑,任务预备知识 （一）,Fireworks 8位图的基本操作 创建位图对象 位图的选择 位图的修饰 ： 擦除和克隆、模糊、锐化和涂抹像素 、减淡和加深像素 、红眼消除 、替换颜色 、调整位图颜色和色调 层 激活层、添加和删除层 、保护层和对象 、在【层】面板

6、中合并对象 、共享层 蒙版 矢量蒙版 、位图蒙版 、组合对象以构成蒙版 、蒙版的应用方式、蒙版的替换、禁用和删除 混合模式 不透明模式、暗化模式、亮化模式、光照效果模式、反转模式、添色模式、热模式、数字模式和色调模式 滤镜的应用,混合模式,不透明模式效果,混合模式,暗化模式效果,混合模式,亮化模式效果,混合模式,光照效果,混合模式,反转模式效果,混合模式,添色模式效果,混合模式,热模式效果,混合模式,数学模式效果,混合模式,色调模式效果,滤镜的应用,亮度/对比度滤镜,修改图像中所有像素的明亮度和对比度，生成高亮、阴影或中间色调的图像。,滤镜的应用,色相/饱和度滤镜,改变图像的色调（颜色）、颜色

7、的纯度、和亮度。,滤镜的应用,色阶滤镜,通过调整图像中亮区与暗区的分布情况，从而合理应用图像中的像素来 表达图像各方面的细节。,滤镜的应用,曲线滤镜,【曲线】滤镜与色阶基本相似，曲线与色阶的区别在于曲线可以在不影响 其他颜色的基础上来改变图像的色调。,滤镜的应用,模糊滤镜,【模糊】滤镜使图像产生柔化、模糊朦胧的效果。,滤镜的应用,锐化滤镜,通过【锐化】滤镜可以细化图像来吸引注意力，是增大图像边缘两侧的像素 对比度。,模块二 班级主页的界面框架设计,任务描述 利用素材完成如右图所示的首页界面框架设计。页面尺寸要求在1024*768分辨率下满屏显示。 主色调采用高远博大的蓝色。 任务解析 操作方法

8、,界面设计效果图,任务解析,框架设计解析 在IE6.0下，满屏显示的页面宽度为显示器分辨率减21，1024分辨率下的宽度为1003 px（像素）。在Firefox下，宽度用分率辨1024减19，为1005 px。在Opear下，宽度用分率辨1024减23，为1001 px。所以如果在1024*768的分辨率下，网页宽度的值小于或等于1000px比较安全。在800*600的分辨率下宽度小于或等于770px。,任务解析,界面配色设计解析 配色表,操作方法,文本的输入： 选择【文本】工具； 在文档中单击希望文本开始的位置，输入文本； 或者拖动鼠标绘制文本块，然后再输入文本。 文本的编辑： 使用【指针

9、】工具选择需要修改的文本； 在【属性】检查器面板中编辑文本的字体、字号、字体样式等属性； 或者选择【文本】|【编辑器】，打开文本编辑器进行编辑。 矩形 / 圆角矩形的绘制： 在工具箱的【矩形】工具弹出菜单中选择【矩形】工具 / 【圆角矩形】； 在【属性】检查器面板中设置笔触与填充属性； 在画布上拖动鼠标绘制以形状。,操作方法,【钢笔】工具绘制直线路径： 在工具箱中选择【钢笔】工具； 在【属性】检查器面板中设置笔触属性； 在画布上单击以放置第一个角点； 移动到下一个位置，单击放置第二个角点； 双击最后一个点结束路径并使其成为开口路径。 【刀子】工具剪切路径： 使用【部分选定】工具选定需要剪切的路

10、径； 在工具箱中选择【刀子】工具，跨越路径拖动指针进行剪切； 若需要选择剪切后的路径对象，则选择【部分选定】工具进行选择。,操作方法,渐变填充设置： 使用【指针】工具选中需要设置渐变填充的对象； 在【属性】检查器面板的【填充选项】中选择渐变填充，在弹出菜单中选择一种渐变形式； 单击【填充颜色】框以打开【编辑渐变】弹出窗口； 单击或拖动颜色滑块调整渐变颜色，单击或拖动不透明度滑块调整不透明度。 选中应用渐变填充的对象，调整渐变填充 动态滤镜设置： 使用【指针】工具选中需要应用动态滤镜的对象； 在【属性】检查器中，单击【添加动态滤镜】按钮，从弹出菜单中选择一种滤镜； 在打开的效果设置对话框中编辑相

11、应效果； 同一个对象可以添加多个 【动态滤镜】，若需要删除所应用的滤镜，可以单击【添加动态滤镜】按钮旁的减号进行删除。,举一反三,矢量图形的特殊绘制 ： 1直线、矩形和椭圆的特殊绘制 （1）若要绘制只能按 45的倾角增量的直线，按住 Shift 键并拖动【直线】工具。 若要绘制正方形或正圆，按住 Shift 键并拖动【矩形】或【椭圆】工具。 （2）若要从特定中心点绘制直线、矩形或椭圆，将指针放在预期的中心点，然后按 Alt 键并拖动【直线】、【矩形】或者【椭圆】工具。 （3）若要既限制形状又要从中心点绘制， 将指针放在预期的中心点，按 Shift+Alt 键并拖动绘制工具。 （4）若要在绘制时

12、调整基本形状的位置，在按住鼠标按钮的同时，按住空格键，然后将对象拖动到画布上的另一个位置（【直线】工具例外），释放空格键可继续绘制对象。,举一反三,矢量图形的特殊绘制 ： 2圆角矩形、多边形和星形的特殊绘制 （1）若要使所选矩形转为圆角矩形，则在【属性】检查器面板的【矩形圆度】框内输入一个从 0 到 100 的值并按 Enter 键，或者拖动弹出滑块来调整角度。 （2）若要将多边形的方向限制为按 45的增量变化，请在绘制时按住 Shift 键。【多边形】工具总是从中心点开始绘制。 （3）若要将星形方向限制为按 45的倾角增量变化，请在拖动时按住 Shift 键。【多边形】工具总是从中心点开始绘

13、制。,模块三 班级主页网站Logo与banner设计,任务描述 打开各章节完成文档ch1-1-2界面框架设计.png，在此基础上完成网站网站Logo与banner的设计。完成后效果如右图所示。 任务解析 操作方法,添加Logo与banner后效果图,任务解析,网站Logo设计 网站标志的设计创意来自网站的名称和内容。设计时一般放置在网站所有页面的上方，是网站给人的第一印象。Logo设计时一般与图案、文字组合，展示网站的主题与名称。Logo常见的表现形式有简洁的文字符号，繁复的图案纹饰，卡通动画或人物等。 班级主页网站主题是展现学生的 青青校园生活，是放飞梦想的年 代，网站Logo设计为一只飞舞

14、 的蝴蝶图案和中文字“我们的青 春年代”的组合，与蓝色渐变和 白云图案的背景相结合，表达主 题寓意。,任务解析,网站banner设计 网站广告条（banner）主要存放网站主题内容、网页中需要推广的内容或者强调性内容。Banner也可用以页面布局。网页布局设计时，banner可以放置在网页的顶部、中部或者底部，尺寸设计为横向贯穿整个或者大半个页面。Banner中的文字设计要求简洁明了，一般用粗壮的字体形式来突出显示；考虑与文字的搭配，背景图像需要避免复杂。 网站Banner背景图像选取了绚烂绽放的黄色小花，与班级主页的用户群体特征相符，表达美好青春的寓意。Banner文字体现主题内容。,操作方

15、法,位图的导入： 选择【文件】|【导入】，打开【导入】对话框； 选择需要导入的位图对象，点击【打开】按钮； 此时鼠标指针变成导入箭头，在画布上单击鼠标，以位图对象的实际尺寸导入位图到画布； 或者按住鼠标左键拖动鼠标，则以拖出的虚线框大小导入位图对象。 文本附加到路径： 输入并编辑文本； 使用【钢笔】工具绘制并调整好路径； 选中文本块和路径； 选择【文本】|【附加到路径】。,操作方法,曲线路径的绘制与调整： 选择【工具】面板中的【钢笔】工具，在画布上单击鼠标左键放置第一个角点； 移动鼠标到下一个点的位置，单击并拖动以产生一个曲线点； 重复上一步操作绘制其他曲线点； 双击最后一个点或选择其他工具，

16、结束路径并使其成为开口路径。 若要调整曲线路径，选择【部分选定】工具单击某个点以选中，选定的角点显示为实心的蓝色方形； 选中角度将该点拖动到一个新位置； 选中点手柄拖动调整曲线形状，【钢笔】工具也能完成曲线路径的调整。,举一反三,文本效果设置 ： 1修改文本属性 对文本的编辑除了常见的字体、字号、字体样式设置外，还可以调整字距、行距、文本方向、文本对齐方式、文本缩进、段落间距、基线调整等。 2设置文字填充和动态滤镜效果 可以将笔触、填充和滤镜应用到所选文本块中的文本，就像应用到其它对象一样。也可以将【样式】面板中的任何样式（即使它不是文本样式）应用于文本。,举一反三,将文本附加到路径： 通过将文本附加到路径的操作，使得输入的文本不受矩形文本块的限制。绘制路径并将文本附加到该路径后，文本将顺着路径的形状排列并且保持可编辑性。 将文本转换为路径： 可以先将文本转换为路径，然后就像对待矢量对象那样，编辑字母的形状。将文本转换为路径后，原来的文本转为路径组，即可使用所有的矢量编辑工具。然而，无法再将它作为文本编辑。,任务预备知识 （二）,