企业宣传网站设计实验实例_第1页
企业宣传网站设计实验实例_第2页
企业宣传网站设计实验实例_第3页
企业宣传网站设计实验实例_第4页
企业宣传网站设计实验实例_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、实验实例：企业宣传设计一、引导页结构制作1、在“Dreamweaver MX 2004”快捷面板中选择“创建新项目>HTML”选项，创建新HTML 文档单击属性面板中的“页面属性”按钮，在弹出的“页面属性”对话框中设置字体大小为9pt，文本颜色为白色（#FFFFFF），背景颜色为黑色（#000000），背景图像为bg.gif（图像名称前需要加入路径），左、右、上、下边距均为0 像素；2、在“分类”区域选择“”选项，右侧则显示相关选项，在其中设置颜色和已访问为白色（#FFFFFF），变换图像为黄色（#FFFF00），设置下划线样式为“仅在变换图像时显示下划线”；3、设置完成单击“确定”按钮

2、，按下“文档”面板上的“拆分”按钮，在代码显示窗口可以看到刚才在“页面属性”面板中的设置项，已经转换为CSS 样式表显示在源代码中，代码显示为：<style type="text/css"><!-body,td,th font-size: 9pt;color: #FFFFFF;body background-color: #000000;background-image: url(images/bg.gif);margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;a:li

3、nk color: #FFFFFF;text-decoration: none;a:visited text-decoration: none;color: #FFFFFF;a:hover text-decoration: underline;color: #FFFF00;a:active text-decoration: none;-></style>4、在“文档”面板的标题文本框中输入文字“悟嘉琥珀”，按Enter 键后标题会自动显示在标题栏；5、执行“文件>保存”命令，保存文件为index.htm；6、根据网页的容，使用表格来布局网页。单击“常用”面板上“表格”按

4、钮，插入7 行1 列，宽度为100%，边框粗细为0 像素，单元格边距和单元格间距均为0 的表格，设置完成后单击“确定”按钮，在网页中插入表格；7、在第1 行单元格插入1 行2 列，宽度为300 像素，边框粗细为0 的嵌套表格。在嵌套表格的左侧单元格单击鼠标左键，使光标定位单元格。单击“常用”面板上的“图像”按钮，在“选择图像源文件”对话框中“查找围”下拉列表下选择根目录下的images 文件夹，并选中图像“coffee.gif”单击“确定”按钮插入图像。在右侧单元格输入英文广告语“Enjoy life, enjoy yourself”；8、把光标定位在第2 行单元格，在单元格属性面板中设置单元

5、格容居中对齐，在“垂直”列表中选择“底部”选项，使单元格容位于单元格底部，高为360 像素；9、设置完单元格属性，单击“常用”面板上的“Flash”按钮，在“选择Flash文件”对话框中选择“logo.swf”文件，单击“确定”按钮插入Flash 制作的标识文件；10、空出第3 行，把光标定位在第4 行单元格，设置单元格居中对齐、底部垂直、高为50，在单元格插入图像“woja.gif”。11、把光标定位在第5 行单元格，设置单元格居中对齐、底部垂直。按Shift+Enter键回行，再按步骤11 插入Flash 文件“bottom.swf”；12、选中第6 行单元格，在属性面板中选择“拆分单元格

6、为行或列”按钮，在弹出的“拆分单元格”对话框中，选择“列”单选框并在“列数”文本框中输入3单击“确定”按钮把单元格分为3 列。13、同样方法拆分第7 行单元格为3 列。选中第6 行、第7 行左侧两个单元格，单击属性面板中的“合并所选单元格”按钮；14、选择左侧单元格，在属性面板中设置宽为57%，高为130，右对齐，垂直列表选择“顶端”。在单元格输入文字“进入网页”，在此属性面板中的文本框输入下级网页的路径与名称，并以此做为的入口。虽然在制作Flash 企业标识时已做了进入下级网页的，但为了使浏览者更容易找到入口，还需要加注一个明显提示。15、选中第7 行中间的单元格，在属性面板中设置宽为42%

7、，右对齐，垂直列表选择“底部”。在单元格输入的信息和制作单位；16、为了使网页在1024×768 分辨率浏览网页时，全屏显示，需要再次选中表格，在属性面板中设置表格高为100%。通常网页容比较少且不能充满一屏时则会用到高度的设置。到此，引导页的基本结构就完成了，按Ctrl+S 保存网页并按F12 在浏览器中浏览。二、引导页鼠标跟随效果1、单击“文档”面板中的“代码”按钮，切换到代码视图模式下。在<body>标签插入如下代码：<body onload="makesnake()" style="overflow-x: hidden; ove

8、rflow-y: hidden">2、在<body>代码后面按Enter 键回车，输入如下代码：<STYLE>.spanstyle COLOR: #FF9966; FONT-FAMILY: 宋体; FONT-SIZE: 9pt; POSITION: absolute; TOP:-50px; VISIBILITY: visible</STYLE>可以从此段代码中修改文本颜色（color）、字体（font-family）、字体大小（font-size）等项；3、最后在<body></body>标签的任何位置插入JavaSc

9、ript 代码来显示跟随文字的容、速度等，代码如下：<SCRIPT><!-var x,yvar step=20var flag=0var message="悟嘉琥珀美丽智慧兼得！"message=message.split("")var xpos=new Array()for (i=0;i<=message.length;i+) xposi=-50var ypos=new Array()for (i=0;i<=message.length;i+) yposi=-50function handlerMM(e)x = (docu

10、ment.layers) ? e.pageX : document.body.scrollLeft+event.clientXy = (document.layers) ? e.pageY : document.body.scrollTop+event.clientYflag=1function makesnake() if (flag=1 && document.all) for (i=message.length; i>=1; i-) xposi=xposi-1+stepyposi=yposi-1xpos0=x+stepypos0=yfor (i=0; i<me

11、ssage.length; i+) var thisspan = eval("span"+(i)+".style")thisspan.posLeft=xposithisspan.posTop=yposielse if (flag=1 && document.layers) for (i=message.length; i>=1; i-) xposi=xposi-1+stepyposi=yposi-1xpos0=x+stepypos0=yfor (i=0; i<message.length; i+) var thisspan =

12、 eval("document.span"+i)thisspan.left=xposithisspan.top=yposivar timer=setTimeout("makesnake()",30)for (i=0;i<=message.length;i+) document.write("<span id=span"+i+" class=spanstyle>")document.write(messagei)document.write("</span>")if

13、(document.layers)document.captureEvents(Event.MOUSEMOVE);document.onmousemove = handlerMM;</SCRIPT>在var message="悟嘉琥珀美丽智慧兼得！"语句引号可以输入所需的跟随文字，在var timer=setTimeout("makesnake()",30)语句中“30”表示跟随文字的速度，数值越大跟随的速度越慢，也可以试着修改此处数值查看效果有何不同。4、保存网页，按F12 浏览网页效果以上提到的三段代码相互关联，缺一不可，读者需要确保将它

14、们输入到正确的位置。“悟嘉琥珀”引导页到此就全部完成了。接着，开始制作的栏目页。三、制作模板页结构1、在制作模板页前，需要建立站点，模板页和其他应用模板创建的页面路径才能正确显示。执行“站点>管理站点”命令，打开“管理站点”对话框。单击“新建”按钮，在弹出的“站点定义”对话框中输入站点名称“悟嘉琥珀”、本地根文件夹为放置的文件夹路径，单击“确定”完成返回“管理站点”对话框，新建的“悟嘉琥珀”站点即会显示在对话框中；2、单击“完成”按钮，站点建立完成。打开引导页“index.htm”，执行“文件>另存为模板”菜单命令，在“另存模板”对话框中，选择站点“悟嘉琥珀”，另存为命名为“two

15、”，“保存”按钮返回编辑窗口。3、按Ctrl+A 选中模板页的所有容，按Delete 键删除。由于栏目页的背景图像与引导页不同，所以需要修改网页背景图像。单击属性面板中的“页面属性”按钮，在“页面属性”对话框中“背景图像”文本框输入栏目页的背景图像路径与名称，也可以单击“浏览”按钮在“选择图像源文件”对话框中选择背景图像，其他页面属性不用修改，单击“确定”按钮完成背景图像的设置；4、单击“常用”面板中的“表格”按钮，插入1 行2 列，宽为778 像素，单元格边距和单元格间距均为0 的表格，在属性面板中设置左侧单元格宽度为759 像素，右侧单元格宽度为19 像素；5、在左侧单元格插入2 行2 列

16、，宽度为759 像素的嵌套表格。分别设置左、右单元格宽度为170 和589 像素。在第1 行左侧单元格中插入“悟嘉琥珀”标识图像“logo_two.gif”，这两幅图均可以从images 文件夹中找到。6、合并第2 行左右两个单元格，在属性面板中设置单元格高度为24，并单击“背景”文件夹，在images 文件夹中找到图像“bg_menu.gif”作为栏目导航的背景图像。在单元格中输入栏目名称，并用竖线进行分隔；7、在导航栏表格下制作网页容表格。单击“常用”面板中的“表格”按钮，插入3 行2 列，宽度为759 像素的表格。选中右侧三个单元格，在属性面板中单击“合并所选单元格”按钮。分别在属性面板

17、中设置左侧第1, 2 行单元格高度为150 和30；8、在容表格下制作联系方式和信息表格，由于“联系方式和信息”，通常每个页面都是统一的，因此在此处可以直接完成表格容的制作，以后新建的网页就都可能显示此块区域。在容表格下插入4 行4 列，宽度为759，单元格边距为2 的表格，合并第1 行和第4 行的单元格。四、设置模板中可编辑区域1、本实例中顶部的“宣传容”每个栏目页是不同的，因此在此处也设置成可编辑区域。首先，插入1 行1 列，宽度为80%，其他设置为0 的表格，用来控制容的围。选中插入的表格，在属性面板中设置成“居中对齐”；2、使光标定位在表格，选择“常用”面板下的“模板”按钮，在其下拉列

18、表中单击“可编辑区域”选项；3、在“新建可编辑区域”对话框中“名称”文本框输入文字“宣传容”单击“确定”按钮完成，表格就插入了“宣传容”可编辑区域；4、使用步骤2, 3 的方法，在容表格分别设置“栏目标题”、“栏目容”、“栏目容2”三个可编辑区域；5、执行“文件>保存”命令，保存模板页。“悟嘉琥珀”网页模板就制作完成了。五、制作栏目页1、执行“文件>新建”菜单命令，在“新建文档”对话框中，选择“模板”标签项，在“模板用于”区，选择“站点悟嘉琥珀”，右侧会出现站点的所有模板，单击上一节中制作的模板“two”如图4-31。在“预览”窗口可以看到模板页的效果，单击“创建”按钮完成网页的创

19、建；2、执行“文件>保存”菜单命令，保存网页为“wenhua.htm”。选中“宣传容”文字，按Delete 键删除所选文字。此时，光标已定位在“宣传容”可编辑区域，单击“常用”面板上的“Flash”按钮，在“选择文件”对话框中选择“images”文件夹下的“banner.swf”文件，单击“确定”按钮，将Flash 文件插入到网页中。选中Flash 文件，单击属性面板中的“播放”按钮，可以查看Flash 文件播放的效果，击属性面板中的“停止”按钮，即可停止Flash 文件的播放。这两个按钮为查看Flash 的浏览效果提供了方便；3、删除“栏目标题”可编辑区域的文字，单击“常用”面板的“图

20、像”按钮，插入在图像制作软件中制作好的栏目标题图像；4、删除“栏目容”可编辑区域的文字，插入1 行1 列，宽度为95%，其中项目为0 的表格。并在属性面板中设置表格“居中对齐”。在表格再插入2 行1 列，宽度为90%的嵌套表格，来布局栏目小标题和栏目容。使光标定位在第1 行单元格中，在属性面板中设置单元格高度为25，背景图像为“bg_titel.gif”，在表格输入栏目小标题“琥珀*文件”；5、把光标定位在第2 行单元格，设置背景图像为“bg_table.gif”。在“样式”下拉列表中选择“管理样式”命令；6、在“编辑样式表”对话框中，显示出已存在的CSS 样式表或样式，如图4-37所示。这里

21、双击“css.css”样式表进行编辑。单击“编辑”按钮，然后在“css.css”对话框中单击“新建”按钮；7、在“新建CSS 样式”对话框中输入名称为“.blueline”，如图4-39 所示。“确定”后进入“CSS 样式定义”对话框，在“分类>边框”区域进行如图4-40 的设置；8、设置完成后“确定”所有弹出窗口。在属性面板“样式”下拉列表中出现刚刚设置的“blueline”选项（如图4-41 所示），选择此项，会发现单元格左侧出现1 个像素的蓝色线条，这就是所要制作的效果；9、在单元格插入5 行1 列，宽度为100%，单元格间距为6 的嵌套表格，然后在每个单元格分别输入“琥珀文化”的相关容与分隔线。并选中文字，在属性面板“样式”列表中选择已设置好的“black”项，使文本颜色变成黑色；10、“栏目容2”可编辑区域容为“琥珀*物语”，制作方法与“琥珀*文化”基本一样。如为了简便可复制“琥珀*文化”的外层表格，粘贴到“栏目容2”区域，然后修改此版块的背景图像，文本容，表格尺寸等不同的项目即可；11、在“琥珀*物语”容下，再插入1 行1 列，宽度为356 像素，其他项为0 的表格，在表格中将插入一图片，增添网页效

人人文库> 全部分类> 应用文书 > 产品手册

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论