表格惠恒公司网站制作

惠恒公司网站制作

项目任务书

任务一 网页素材收集与处理

任务目标

根据已选定的网站主题“杭州惠恒网络科技有限公司网站”完成网页素材的收集与处理工作其中所需素材的类型包括文本、图像、动画从而为后续的页面设计与制作做好准备。

教学目标

熟悉页面制作的工作流程及常规操作方法。学会依据网站主题进行网页素材的收集与处理。

任务二 网站首页制作

任务目标

完成“杭州惠恒网络科技有限公司网站”首页的设计与制作。效果如图1所示。

教学目标

掌握使用表格进行网站首页的布局与制作学会通过鼠标经过图像制作首页导航栏。

任务三 网站子页制作

任务目标

基于模板完成“杭州惠恒网络科技有限公司网站”的五个二级栏目页面的设计与制作。效果如图2至图6所示。

教学目标掌握基于模板创建网站二级栏目页面学会使用浮动框架来实现网页“画中画”效果。学会设置图片、文字的超级链接和链接目标属性。

图1 网站首页效果 图2 “关于惠恒”栏目页面效果图 图3 “人才招聘”栏目页面效果图

图4 “产品展示”栏目页面 图5 “工程案例”栏目页面效果图 图6 “联系我们”栏目页面效果图

【操作步骤】

任务一网页素材收集与处理操作步骤

1收集与处理文本

1从客户提供的资料包括公司的商务文件、培训资料、平面的宣传材料以及一些由公司提供的网站进行文字资料的收集然后制作成txt格式的记事本文件。

2通过谷歌或者百度等搜索引擎输入关键字“杭州惠恒网络科技有限公司”在网络上搜索与该公司相关的文本信息最后查找到的资料包括公司在阿里巴巴网站上发布的基本信息以及在一些招聘网站上发布的岗位招聘信息然后把这些文本信息进行筛选和整理后保

存在相应的记事本文件中。

2收集与处理图像

1大部分主体图像由客户提供包括公司的Lo g o、产品以及工程项目的原始照片。

2图标、制作Banner的图像以及原始素材图像可以通过搜索引擎、 网页素材网站以及网页素材光盘获取。

3通过以上途径获取的图像如不符合网站的风格和要求接下来借助于图像处理软件Photoshop来完成图像的处理工作。其中以导航栏图像为例其操作步骤如下。

①打开Photoshop执行“文件/新建”命令在弹出的对话框中做如图7所示的设置然后单击“确定”按钮。

②新建图层1将其更名为“渐变色”使用渐变工具填充一个从上到下为白色到灰色的渐变如图8所示

图7 “新建”对话框 图8填充渐变色

③新建图层将其更名为“底纹”使用“矩形选框工具”在底部绘制矩形选区填充深灰色如图9所示。

④新建图层将其更名为“竖线”使用“单列选框工具”在左侧部绘制单列选区填充深灰色如图10所示。

⑤使用横排文字工具设置字体为“华文中宋”字号为14加粗颜色为黑色输入“首页”保存为“首页.psd”,如图11所示选择“文件/存储为”命令将文件存为“首页.png”.

⑥将文字图层的“首页”颜色改为“红色”存储为“首页1.png”如图12.

⑦按照相同的制作方法完成其他导航栏图像的制作。

图9填充深灰底纹 图10绘制竖线 图11添加文字 图12更改文字颜色

2新建站点“heaven”将所需的网页素材拷贝到站点下。执行“文件新建”命令。新建一个空白的HTML文件在站点根目录下将其保存为“ind ex.html”并将网页标题设为“杭州惠恒网络科技有限公司”。执行“修改页面属性”命令。弹出“页面属性”对话框在对话框中做如图15所示的设置。

3在网页里插入一个1行2列的表格。将光标移至第1行第1列位置将此单元格的

宽度设为184像素如图16所示插入图像“image/lo go.jp g”如图17所示。

将光标置于表格尾部插入一个1行2列的表格表格宽度及对齐方式同上将光标置于第1行第1列单元格中在“属性”面板中将此单元格的宽度设为389像素把图像“image/topbg 1.gif”设为该单元格的背景图片如图18。

4按Tab键将光标切换到第2列将此单元格的宽度设为389像素单击“插入”栏中的“图像”下拉列表按钮在下拉列表中选择“鼠标经过图像”选项在弹出的对话框中设置参数“原始图像”及“鼠标经过图像” 如图19。

5按照同样的制作方法先后插入关于惠恒、产品展示、工程案例、人才招聘及联系我们5个导航按钮效果如图20所示。

6将光标置于表格尾部插入一个1行1列的表格表格宽度设为749像素居中对齐在表格中插入Flash动画。单击“插入”栏中的“媒体”下拉列表按钮在“媒体”下拉列表中选择Flash选项在弹出的“选择文件”对话框中选择“flash/banner.sw f”文件单击“确定”即可。

7将光标置于表格尾部插入一个1行2列的表格表格宽度及对齐方式同上。将光标移至第1行第1列宽度设为190像素。执行“窗口CSS样式”命令打开“CSS样式”面板。单击面板中的“新建CSS规则”按钮在弹出的对话框中新建样式.line点击确定将新建的CSS样式文件命名为style.css并将其保存在站点根目录下的CSS文件夹中。

8保存之后弹出自定义类.line的CSS规则定义窗口如图21所示。

9选中第1行第1列所在的单元格在其属性面板中设置参数“样式”的值为line应用之后的效果如图22所示。

10将光标重新定位在当前单元格插入一个3行1列宽度设置为100%高度设置为200像素的表格。将光标移至新表格的第1行第1列高度设为28像素并插入图像“im ag e/zyyw.jp g” 将光标移至第3行的单元格位置 在该单元格中插入图像“im ag e/zyyw 1.jp g” 如图23所示。

 11将光标移至表格的第2行位置更改单元格宽度为185像素设置“背景图片”属性为“image/bg2.jpg”并设置单元格“水平”属性为“居中对齐”然后插入一个1行1列、宽度为85%的表格并选中该表格在“属性”面板中设置表格的高度为170像素。如图24所示。

12将表格移至新创建的表格中在单元格中输入相应的公司主营业务的内容如图25所示。转换到代码视图为文本加入滚动效果如图26所示。

 13将光标移至上一级表格的尾部插入一个1行1列、宽度为100%的表格并将表格的高度设置为10像素。

 14将光标置于表格尾部插入一个3行3列、宽度为95%的表格并将表格的对齐方式设为居中对齐。将光标移至第1行第1列位置在“属性”面板中根据待插入图片的大小设置所在单元格的宽度和高度均为8像素并在该单元格中插入图像“image/501.gif”通过“Ctr l+鼠标左键”同时选中第1行第3列、第3行第1列、第3行第3列所在的单元格将单元格的宽度和高度均设为8像素然后按顺序在单元格中分别插入图像“image/501.gif”、“image/501.g if”和“image/501.gif” 如图27所示。

图15页面属性对话框 图16表格属性设置

图17 插入表格并插入Logo图片

图19插入鼠标经过图像对话框设置

图21设置“CSS规则定义”对话框

图22应用样式 图23插入图像

图24设置表格 图25 在表格中输入文本

图26文本滚动效果代码

 15将光标置于第1行第2列单元格中在“拆分”视图中将图像“image/505.gif”设为单元格的背景图片。

16根据上述步骤分别在第2行第1列、第3行第2列和第2行第3列单元格中插入图像“imag e/506.gif”、 “imag e/507.gif”和“imag e/506.gif”作为背景图片。然后单击“文档”工具栏中的按钮在代码视图中将插入背景图像的所有<td></td>中的空格符号“&nbsp;”删除删除空格后形成一个圆角方框效果如图28所示。

图27插入图像 图28删除代码中的空格符号

 17将光标置于第2行第2列的单元格中插入一个3行2列、宽度为100%的表格并将第1列单元格的宽度设置为34%。将光标置于新表格的第1行第1列单元格中插入图像“image/s s.gif”并将其设为居中对齐。按Tab键移至下一个单元格输入文字“产品搜索”设置字体大小为14像素粗体显示如图29所示。

18将第2行的2个单元格合并成一个单元格然后设置单元格的高度为10像素。

 19将第3行的两个单元格进行合并。将光标移置单元格中在“插入”工具栏中选择“表单”选项卡单击“表单”按钮页面中出现红色虚线框然后将光标定位在红色虚线框中插入1个1行2列、宽度为100%的表格。将光标移置新表格的第1行第1列单元格在“表单”插入栏中单击“文本字段”按钮插入一个单行文本框按Tab键移置下一个单元格单击按钮并在按钮的属性面板中设置按钮的标签为“搜索”产品搜索版块的预览效果如图30所示。

20重复步骤13-16。将光标置于第2行第2列的单元格中插入图像“imag e/mai l.jp g” 效果如图31所示。

图29在表格中插入图片和文字 图30产品搜索部分完整效果 图31插入图片

21单击“CSS样式”面板的“新建CSS规则”按钮新建一个定义在style.css中名为linelr的样式表在“边框”分类中做如图32所示的设置。

图32设置“CSS规则定义”对话框

22将光标置于最上级表格的第1行第2列单元格在“属性”面板中设置“样式”值为“linelr”。

23在单元格中插入一个3行3列、宽度为100%的表格 同时选中第1行第1列、第1行第2列单元格设置图像“imag e/602.gif”作为背景图片将光标置于第1行第3列单

元格中插入图像“image/603.gif”如图33所示。

24将第2行的三个单元格合并成一个单元格然后插入一个5行3列、宽度为100%的表格设置这3列的单元格宽度分别为2%、 76%、 22%高度设为20像素并从第2行开始分别插入图像及公司动态相关文字如图34所示。

图34插入表格并输入文字

25将光标置于上一级表格的尾部插入一个2行3列、宽度为100%的表格然后重复步骤23完成工程案例标题栏的制作如图35所示。

26将第2行的三个单元格合并成一个单元格然后插入一个6行2列、宽度为100%的表格分别将第1行以及第4行的两个单元格进行合并设置高度为10像素。将光标置于第2行第1列单元格中设置宽度为50%插入图像“image/en 1.gif”并设为居中对齐。 以此类推依次在后面单元格中插入另外三张工程图像。将光标置于第3行第1列、第3行第2列、第5行第1列以及第5行第2列单元格中设置高度为20像素并输入工程名称如图36所示。

27将光标置于上一级表格的尾部插入一个1行1列、宽度为100%的表格在表格中插入图片“image/607.gif”如图37所示。

28将光标置于表格的尾部插入一个4行1列、宽度为749像素的表格在表格中输入版权相关的文字如图38所示。

29保存页面预览效果。

任务三 网页子页制作

操作步骤

1打开网站主页index.html执行“文件另存为模板”命令在弹出的对话框中单击“保存”按钮将网页保存为模板文件“index.dwt”。

2删除模板文件主体部分的嵌套表格及网页元素。

图39 “另存为模板”对话框 图40 模板文件页面内容

3选中Flash所在区域下方的表格在“常用”插入栏中点击“可编辑区域”按钮在弹出的对话框中单击“确定”按钮 即可插入可编辑区域名称为EditReg ion3执行“文件保存”命令如图41所示。

4执行“文件新建”命令在弹出的对话框中选择“模板”选项然后在站点列表中选择站点“heaven”接着选择模板文件“index”单击“创建”按钮即可基于模板创建网页并将页面保存为“gyhh.htm l”如图42。

5执行快捷键“Ctr l+J”打开页面属性窗口并将页面文字大小设为“12像素”、颜色值设为“#”。将光标定位在当前表格的起始处在其上方插入一个1行2列、宽度为749像素的表格表格属性设置如图43。然后在两个单元格中分别输入文字并将字体加粗显示如图44所示。

6将光标置于下方空白表格的第1列单元格中单元格的属性设置如图45。

7在单元格中插入一个1行1列、宽度为100%的表格并将单元格高度设为“20”背景颜色设为“#”然后在单元格中插入图片以及输入文字如图46。

图45 单元格属性设置 图46插入及设置表格

8按Tab键将光标切换到第2列单元格中新建一个定义在style.c ss中名为linea的样式表在“边框”分类中作出设置如图47。 .然后将单元格的样式设为“linea”给当前单元格的右、下、左三条边框分别设置了颜色为银灰色的细线边框效果。

图47设置“CSS规则定义”对话框

9在单元格中插入一个1行2列、宽度为100%的表格并在单元格中插入图片及输入文字如图48。

10将光标置于表格尾部插入一个1行1列、宽度100%的表格新建一个定义在style.c ss中名为bgfg的样式表在“背景”分类中做如图49所示的设置然后将样式应用于表格。

图49设置“CSS规则定义”对话框

11将光标置于表格尾部插入一个1行1列、宽度99%的表格并将表格居中对齐然后在表格中输入与公司简介相关的文字。新建一个定义在s tyle.css中名为fontn的样式表在“类型”和“区块”分类中做如图50设置然后将样式应用于单元格如图51所示。

图50设置“CSS规则定义”对话框 图51页面效果