《企业宣传网站设计实验实例》由会员分享，可在线阅读，更多相关《企业宣传网站设计实验实例（8页珍藏版）》请在金锄头文库上搜索。
1、实验实例：企业宣传网站设计一、引导页结构制作1、在“Dreamweaver MX 2004”快捷面板中选择“创建新项目HTML”选项，创建新HTML 文档单击属性面板中的“页面属性”按钮，在弹出的“页面属性”对话框中设置字体大小为9pt，文本颜色为白色（#FFFFFF），背景颜色为黑色（#000000），背景图像为bg.gif（图像名称前需要加入路径），左、右、上、下边距均为0 像素；2、在“分类”区域选择“链接”选项，右侧则显示链接相关选项，在其中设置链接颜色和已访问链接为白色（#FFFFFF），变换图像链接为黄色（#FFFF00），设置下划线样式为“仅在变换图像时显示下划线”；3、设置完成
2、单击“确定”按钮，按下“文档”面板上的“拆分”按钮，在代码显示窗口可以看到刚才在“页面属性”面板中的设置项，已经转换为CSS 样式表显示在源代码中，代码显示为：4、在“文档”面板的标题文本框中输入文字“悟嘉琥珀”，按Enter 键后标题会自动显示在标题栏；5、执行“文件保存”命令，保存文件为index.htm；6、根据网页的内容，使用表格来布局网页。单击“常用”面板上“表格”按钮，插入7 行1 列，宽度为100%，边框粗细为0 像素，单元格边距和单元格间距均为0 的表格，设置完成后单击“确定”按钮，在网页中插入表格；7、在第1 行单元格内插入1 行2 列，宽度为300 像素，边框粗细为0 的嵌
3、套表格。在嵌套表格的左侧单元格内单击鼠标左键，使光标定位单元格内。单击“常用”面板上的“图像”按钮，在“选择图像源文件”对话框中“查找范围”下拉列表下选择网站根目录下的images 文件夹，并选中图像“coffee.gif”单击“确定”按钮插入图像。在右侧单元格内输入网站英文广告语“Enjoy life, enjoy yourself”； 8、把光标定位在第2 行单元格内，在单元格属性面板中设置单元格内容居中对齐，在“垂直”列表中选择“底部”选项，使单元格内容位于单元格底部，高为360 像素；9、设置完单元格属性，单击“常用”面板上的“Flash”按钮，在“选择Flash文件”对话框中选择“l
4、ogo.swf”文件，单击“确定”按钮插入Flash 制作的标识文件；10、空出第3 行，把光标定位在第4 行单元格内，设置单元格居中对齐、底部垂直、高为50，在单元格内插入图像“woja.gif”。11、把光标定位在第5 行单元格内，设置单元格居中对齐、底部垂直。按Shift+Enter键回行，再按步骤11 插入Flash 文件“bottom.swf”；12、选中第6 行单元格，在属性面板中选择“拆分单元格为行或列”按钮，在弹出的“拆分单元格”对话框中，选择“列”单选框并在“列数”文本框中输入3单击“确定”按钮把单元格分为3 列。13、同样方法拆分第7 行单元格为3 列。选中第6 行、第7
5、行左侧两个单元格，单击属性面板中的“合并所选单元格”按钮；14、选择左侧单元格，在属性面板中设置宽为57%，高为130，右对齐，垂直列表选择“顶端”。在单元格内输入文字“进入网页”，在此属性面板中的链接文本框内输入链接下级网页的路径及名称，并以此做为网站的入口。虽然在制作Flash 企业标识时已做了进入下级网页的链接，但为了使浏览者更容易找到网站入口，还需要加注一个明显提示。15、选中第7 行中间的单元格，在属性面板中设置宽为42%，右对齐，垂直列表选择“底部”。在单元格内输入网站的版权信息和制作单位；16、为了使网页在1024768 分辨率浏览网页时，全屏显示，需要再次选中表格，在属性面板中
6、设置表格高为100%。通常网页内容比较少且不能充满一屏时则会用到高度的设置。到此，引导页的基本结构就完成了，按Ctrl+S 保存网页并按F12 在浏览器中浏览。二、引导页鼠标跟随效果1、单击“文档”面板中的“代码”按钮，切换到代码视图模式下。在标签内插入如下代码：2、在代码后面按Enter 键回车，输入如下代码：.spanstyle COLOR: #FF9966; FONT-FAMILY: 宋体; FONT-SIZE: 9pt; POSITION: absolute; TOP:-50px; VISIBILITY: visible可以从此段代码中修改文本颜色（color）、字体（font-fam
7、ily）、字体大小（font-size）等项；3、最后在标签内的任何位置插入JavaScript 代码来显示跟随文字的内容、速度等，代码如下：!-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=1; i-) xposi=xposi-1+stepyposi=yposi-1xpos0=x+stepypos0=yfor (i
8、=0; i=1; i-) xposi=xposi-1+stepyposi=yposi-1xpos0=x+stepypos0=yfor (i=0; imessage.length; i+) var thisspan = eval(document.span+i)thisspan.left=xposithisspan.top=yposivar timer=setTimeout(makesnake(),30)for (i=0;i=message.length;i+) document.write()document.write(messagei)document.write()if (documen
9、t.layers)document.captureEvents(Event.MOUSEMOVE);document.onmousemove = handlerMM;在var message=悟嘉琥珀美丽智慧兼得！语句引号内可以输入所需的跟随文字，在var timer=setTimeout(makesnake(),30)语句中“30”表示跟随文字的速度，数值越大跟随的速度越慢，也可以试着修改此处数值查看效果有何不同。4、保存网页，按F12 浏览网页效果以上提到的三段代码相互关联，缺一不可，读者需要确保将它们输入到正确的位置。“悟嘉琥珀”引导页到此就全部完成了。接着，开始制作网站的栏目页。三、制作
10、模板页结构1、在制作模板页前，需要建立站点，模板页和其他应用模板创建的页面路径才能正确显示。执行“站点管理站点”命令，打开“管理站点”对话框。单击“新建”按钮，在弹出的“站点定义”对话框中输入站点名称“悟嘉琥珀”、本地根文件夹为网站放置的文件夹路径，单击“确定”完成返回“管理站点”对话框，新建的“悟嘉琥珀”站点即会显示在对话框中； 2、单击“完成”按钮，站点建立完成。打开网站引导页“index.htm”，执行“文件另存为模板”菜单命令，在“另存模板”对话框中，选择站点“悟嘉琥珀”，另存为命名为“two”，“保存”按钮返回编辑窗口。3、按Ctrl+A 选中模板页的所有内容，按Delete 键删除
11、。由于栏目页的背景图像与引导页不同，所以需要修改网页背景图像。单击属性面板中的“页面属性”按钮，在“页面属性”对话框中“背景图像”文本框内输入栏目页的背景图像路径及名称，也可以单击“浏览”按钮在“选择图像源文件”对话框中选择背景图像，其他页面属性不用修改，单击“确定”按钮完成背景图像的设置；4、单击“常用”面板中的“表格”按钮，插入1 行2 列，宽为778 像素，单元格边距和单元格间距均为0 的表格，在属性面板中设置左侧单元格宽度为759 像素，右侧单元格宽度为19 像素；5、在左侧单元格内插入2 行2 列，宽度为759 像素的嵌套表格。分别设置左、右单元格宽度为170 和589 像素。在第1
12、 行左侧单元格中插入“悟嘉琥珀”标识图像“logo_two.gif”，这两幅图均可以从images 文件夹中找到。6、合并第2 行左右两个单元格，在属性面板中设置单元格高度为24，并单击“背景”文件夹，在images 文件夹中找到图像“bg_menu.gif”作为栏目导航的背景图像。在单元格中输入栏目名称，并用竖线进行分隔；7、在导航栏表格下制作网页内容表格。单击“常用”面板中的“表格”按钮，插入3 行2 列，宽度为759 像素的表格。选中右侧三个单元格，在属性面板中单击“合并所选单元格”按钮。分别在属性面板中设置左侧第1, 2 行单元格高度为150 和30；8、在内容表格下制作联系方式和版权信
