网设计与制作

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

1、第1章制作一种完整的网站一、知识要点1、制作一种完整网站的过程2、结合Fiewos、FAS制作网页图片和动画3、S样式4、使用模板制作与更新大量网页二、例题分析例10.1:5Dmei环节一:定义站点：设立本地站点1、在D或E盘上新建一种文献夹“5nm”，在该文献夹中再建一种文献夹“ptu”。（注意:文献夹名、文献名(不管是图片还是网页）必须为英文字母或数字，不能为中文）2、 在“站点”菜单中选择“新建站点”,即会浮现“站点定义”对话框。如果对话框显示的是“高档”选项卡,则单击“基本”。 浮现“站点定义向导”的第一种屏幕，规定您为站点输入一种站点名称“5D多媒体”。3、单击“下一步”进入下一种环

2、节。浮现向导的下一种屏幕,询问您与否要使用服务器技术。选择“否,我不想使用服务器技术”选项批示目前该站点是一种静态站点,没有动态页。4、单击“下一步”进入下一种环节。 浮现向导的下一种屏幕,询问要如何使用文献。选择标有“编辑我的计算机上的本地拷贝，完毕后再上传到服务器(推荐)”的选项。在“您将把文献存储在计算机中的什么位置?”文本框中输入“D:5dn”,或者通过浏览指定。5、单击“下一步”进入下一种环节。 浮现向导的下一种屏幕，询问如何连接到远程服务器。目前，从弹出菜单中选择“无”。单击“下一步”进入下一种环节。 该向导的下一种屏幕将浮现，其中显示您的设立概要。单击“完毕”完毕设立。6、单击“

3、拟定”,“站点”面板目前显示目前站点的新本地根文献夹,同步显示一种图标容许您以分层树视图查看所有本地磁盘。、点击菜单“站点/编辑站点” 或点击站点面板的站点选项卡上“站点编辑站点”。都会浮现编辑站点对话框,选中“D多媒体”站点,再点击“编辑”按钮,即会浮现“站点定义”对话框，单击“高档”选项卡,在“默认图像文献夹”的对话框中输入“D:5dapctue”或者通过浏览指定,先点击“确认”按钮后再点击“完毕”按钮。环节二:制作首页1、右键单击“站点”面板中的根目录,在弹出的菜单中选择“新建文献”命令,把新建的文献名称改为“inex.hm”。2、双击“iex.htm”,进入页面编辑状态。、启动REWO

4、KS,新建一种宽和高都为6像素,背景色为白色的文献；在状态栏上将视图缩放比率设为00%，（或点击菜单命令“视图缩放比率”,再或用快捷键Ctr+8);用工具栏上的矩形工具,画一种宽和高都为5像素的矩形,X和Y（起始点坐标）都为0，在属性面板上能看到宽和高、X和Y,将矩形的填充颜色设为#EFFE,边框颜色设为没有(一根红色的斜线）;最后点击菜单命令“文献/导出”，选择导出地址为你站点文献夹下的图片文献夹,如：本例“D:/5dnae/itrue”,文献名如:bg.gif（注意扩展名为gf）。、切换到mweaver,在页面空白处单击鼠标右键,选择“页面属性”命令，在弹出的页面属性对话框中定义左边界、顶

5、部边界都为0，将刚刚制作的图片设立为背景图像,在页面属性对话框中的背景图像文本框中输入“pitrue/bg.gif”,或者点击其后的“浏览”按钮，选择“D:/5dnam/pictru”文献夹中的bg.gif。、下面的操作从环节三到环节六是对整个网页进行布局和排版，通过插入4个边框为的表格对页面各元素进行定位。注：网页的布局可以使用表格的原则模式和布局模式,读者可以自行选择;下面环节用的是原则模式。下面图示只是为了阐明各表格的宽高，各表格中单元格的宽高及合并状况;个表格边框粗细都为0；表格与表格之间没有间隙,在Dramwever中应当是紧挨在一起。环节三:制作网页顶部横标题的基本元素1、插入一种

6、1行2列的表格，在“插入表格”对话框中设立“宽”为77像素，“填充”、“间距”、“边框”值都设为，将“属性”窗口中表格属性的“高”设立为0像素、“对齐”设立为水平居中,背景颜色设立为白色。、将鼠标定位在表格的左边一列单元格中，将“属性”窗口中单元格属性的“宽”设为20像素，右边一列单元格的宽设为57像素。（一）制作网站徽标1、启动FLAS,新建一种文献,点击菜单命令“修改影片”，修改文档宽200x、高100p，背景色为白色。2、通过矩形工具、选择工具、次级选用工具、文字工具、变形扭曲工具、圆形工具等绘制书上P337的网站徽标。、绘制完毕后,点击菜单命令“文献导出图像”,选择文献类型“GF图像（

7、*.f)”,选择导出文献夹位置“D:/5dnae/pictr”,输入文献名“loo”。4、切换到Dameaver，将鼠标定位在表格的左边单元格中，点击菜单命令“插入/图像”,选择D:/5dneitueogo.gf，或者从站点面板的图像文献夹中将该图像直接拖到单元格中。(二)制作广告条措施一：用FL制作广告条1、切换到FLASH，新建一种文献,点击菜单命令“修改/影片”，修改文档宽470px、高4px,背景色为白色。2、在图层一的第一帧用矩形工具画一种矩形,在属性面板中将宽设为48p、高设为62px、X设为1，设为1，再将矩形的填充设立为没有填充色(一根红色的斜线)，边框线色为黑色、实线、粗细为

8、1。在第40帧插入帧（F5）。3、新建一种图层二，在第一帧里输入文字“建网站 不求人”，设立文字颜色为9626、字体隶书、字号56,选中文字按下8将文字转换为图形元件。4、分别在第20帧和第40帧插入核心帧（6)。5、选中第2帧中的元件实例,trl+弹出变形面板(ansform）将其放大2倍，在属性面板中的颜色选项中选择Alpha（透明度）设为0%。6、分别选中第1帧和第帧,点击鼠标右键,创立补间动画。(Cret Motion Tween）7、点击菜单命令“文献/导出影片”,选择文献类型“FLAH影片(*.swf）”,选择导出文献夹位置“D：/5dnamepctu”,输入文献名“banner”

9、。(ane.sw）8、切换到ramweaver,将鼠标定位在表格的右边单元格中,点击菜单命令“插入媒体/FSH”，选择D:5dnam/pitrue/bner.wf，或者从站点面板的图像文献夹中将该FLH影片直接拖到单元格中。措施二：用Firework制作广告条1、切换到Fieors,新建一种文献宽470p、高64px，背景色为白色。 2、输入文字“建网站 不求人”,设立文字颜色为#6262、字体隶书、字号6。 3、点击“窗口帧”，打开帧面板，点击右上角的三角形按钮弹出下拉菜单,“添加帧”,在该帧之后添加帧，输入文字“5D多媒体 来帮忙”，设立文字颜色为黑色、字体华文楷体、字号6，描边颜色为白色

10、，在效果面板中选择“阴影和光晕”，“投影”。 4、回到帧面板,双击帧右边“7”，将其改为00（100/100秒，相称于1秒)。将帧2改为20即2秒。 、点击菜单命令“文献/导出预览”，在“格式”中选择“GF动画”,“导出”,选择导出文献夹位置“D：/5dnae/pctue”，输入文献名“banne”。（banr.gi) 6、切换到Dreamwaver，将鼠标定位在表格的右边单元格中,点击菜单命令“插入/图像”,选择D:/5daeitru/bnngif，或者从站点面板的图像文献夹中将该图片直接拖到单元格中。环节四：制作网页上面地址栏的基本元素1、插入一种2行列的表格，在“插入表格”对话框中设立“

11、宽”为778像素,“填充”、“间距”、“边框”值都设为0,将“属性”窗口中表格属性的“高”设立为5像素、“对齐”设立为水平居中，背景颜色设立为白色。、将鼠标定位在表格的上边一行单元格中,将“属性”窗口中单元格属性的“高”设为25像素，下边一行单元格的宽设为5像素。（一)制作第幅图片1、切换到FIREWORS,新建一种宽为778、高为像素、背景色为白色的文献。2、在状态栏上将视图缩放比率设为100%，（或点击菜单命令“视图/缩放比率”,再或用快捷键Ctl8）。、用直线工具画一根直线,颜色为黑色,粗细为1，线条类型为“铅笔/1像素”,宽为120px、高(粗细)为、为1、为4（在属性面板上修改）;再

12、画一根直线,颜色、粗细、线条类型同样,宽为618px、高(粗细)为1p、X为10、Y为1，再用直线工具将两条直线连起来。4、用矩形工具,画一种宽、高为18像素的矩形、为200、为3(在属性面板上修改)，制作按钮，将矩形的填充颜色设为88E6,边框颜色设为没有（一根红色的斜线),将属性面板上的矩形圆度设为10。5、选中矩形,调节属性面板上的效果选项，执行其中的“斜角和浮雕/内斜角”，设立“斜角边沿形状”为“平滑”、宽度为6、对比度为、柔化为2、角度为135；选择“阴影与晕光”中的“投影”，颜色为黑色、距离为3、不透明度为65%、柔化，角度为3。6、选中矩形,按下CtrlShift，克隆一种矩形，

13、选中克隆的这个矩形,将颜色设立为#FFF00,选中属性面板中效果项,点击“”按钮将其删除，再将其宽设为46、高为6px、X为203、Y为2，在属性面板中选择边沿选项中的羽化，羽化度设为25。7、点击工具栏中文字工具输入文字“域名注册”,字号,字体宋体、颜色白色,放在绿色矩形的中间位置,选择“填充选项”中的边沿设立为“实边”，调节属性面板上的效果选项,执行其中“阴影与晕光”中的“投影”，颜色为黑色、距离为1、不透明度为65%、柔化0，角度为315,再执行其中“阴影与晕光”中的“发光”,颜色为黑色、宽度为1、不透明度为8%、柔化0，位移为0。、将绿色矩形黄色矩形与文字用黑色箭头工具同步选中按下Ct

14、lG,将其群组。9、选中群组对象,将其克隆次,分别向右边拖动,Y都为3,最右边的组合对象的X为70,将7个组合对象同步选中，执行菜单命令“修改对齐/均分宽度”，对象就排列整洁。10、用白色箭头(部分选择工具)选中文字，再用文字工具将后6个组合对象的文字改成网页需要的。1、最后点击菜单命令“文献/导出”，选择导出地址为你站点文献夹下的图片文献夹，如：本例“D:/5nae/ptrue”,文献名如：addessif(注意扩展名为gf）。12、切换到Demwvr，将鼠标定位在第1行的单元格中，点击菜单命令“插入/图像”，选择D:5dname/pictrue/ads.gif,或者从站点面板的图像文献夹中

15、将该图像直接拖到单元格中。13、选中上一步中插入的图片,在地图属性面板中选择“矩形热点工具”，在图片上要建超链接的区域绘制矩形，共绘制7个矩形，选中矩形，在热点面板中“链接”文本框中输入或通过浏览按钮设立超链接地址,或通过“指向文献”按钮向站点面板拖动并指向你所要链接的网页文献。（二）制作第2幅图片1、切换到IREWORK，新建一种宽为78、高为5像素、背景色为白色的文献。、在状态栏上将视图缩放比率设为10%，（或点击菜单命令“视图/缩放比率”，再或用快捷键trl8）。、用工具栏上的矩形工具,画一种宽7、高为像素的矩形、X为0、Y为（在属性面板上修改）,边框颜色设为没有(一根红色的斜线）,点击填充选项设立为线型渐变，渐变色为#8E6#FFFF,选中矩形会显示出填充调节柄，调节调节柄，使矩形的填充渐变色变成从下到上渐变填充，调节