惠恒公司网站制作

《惠恒公司网站制作》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、惠恒公司网站制作项目任务书任务一网页素材收集与处理任务目标：根据已选定的网站主题“杭州惠恒网络科技有限公司网站”完成网页素材的收集与处理工作，其中所需素材的类型包括文本、图像、动画，从而为后续的页面设计与制作做好准备。教学目标：熟悉页面制作的工作流程及常规操作方法。学会依据网站主题进行网页素材的收集与处理。任务二网站首页制作任务目标：完成“杭州惠恒网络科技有限公司网站”首页的设计与制作。效果如图1所示。教学目标：掌握使用表格进行网站首页的布局与制作，学会通过鼠标经过图像制作首页导航栏。任务三网站子页制作任务目标：基于模板完成“杭州惠恒网络科技有限公司网站”的五个二级栏目页面的

2、设计与制作。效果如图2至图6所示。教学目标：掌握基于模板创建网站二级栏目页面，学会使用浮动框架来实现网页“画中画”效果。学会设置图片、文字的超级链接和链接目标属性。图1网站首页效果图2“关于惠恒”栏目页面效果图图3“人才招聘”栏目页面效果图图4“产品展示”栏目页面图5“工程案例”栏目页面效果图图6“联系我们”栏目页面效果图【操作步骤】任务一网页素材收集与处理操作步骤1．收集与处理文本（1）从客户提供的资料包括公司的商务文件、培训资料、平面的宣传材料以及一些由公司提供的网站进行文字资料的收集，然后制作成txt格式的记事本文件。（2）通过谷歌或者百度等搜索引擎，输入关键字“杭州惠

3、恒网络科技有限公司”，在网络上搜索与该公司相关的文本信息，最后查找到的资料包括公司在阿里巴巴网站上发布的基本信息以及在一些招聘网站上发布的岗位招聘信息，然后把这些文本信息进行筛选和整理后保存在相应的记事本文件中。2．收集与处理图像（1）大部分主体图像由客户提供，包括公司的Logo、产品以及工程项目的原始照片。（2）图标、制作Banner的图像以及原始素材图像可以通过搜索引擎、网页素材网站以及网页素材光盘获取。（3）通过以上途径获取的图像如不符合网站的风格和要求，接下来借助于图像处理软件Photoshop来完成图像的处理工作。其中以导航栏图像为例，其操作步骤如下。①打开Phot

4、oshop，执行“文件/新建”命令，在弹出的对话框中做如图7所示的设置，然后单击“确定”按钮。②新建图层1，将其更名为“渐变色”，使用渐变工具填充一个从上到下为白色到灰色的渐变，如图8所示图7“新建”对话框图8填充渐变色③新建图层，将其更名为“底纹”，使用“矩形选框工具”在底部绘制矩形选区，填充深灰色，如图9所示。④新建图层，将其更名为“竖线”，使用“单列选框工具”在左侧部绘制单列选区，填充深灰色，如图10所示。⑤使用横排文字工具，设置字体为“华文中宋”，字号为14，加粗，颜色为黑色，输入“首页”保存为“首页.psd”,如图11所示，选择“文件/存储为”命令将文件存为“首页.

5、png”.⑥将文字图层的“首页”颜色改为“红色”，存储为“首页1.png”，如图12.⑦按照相同的制作方法完成其他导航栏图像的制作。图9填充深灰底纹图10绘制竖线图11添加文字图12更改文字颜色任务二网站首页制作操作步骤：（1）为了突出简洁大方的特点，首页的版式结构采用典型的“拐角型结构”，如图13。操作流程，并制作流程图14.图13首页布局（2）新建站点“heaven”，将所需的网页素材拷贝到站点下。执行“文件｜新建”命令。新建一个空白的HTML文件，在站点根目录下将其保存为“index.html”，并将网页标题设为“杭州惠恒网络科技有限公司”。执行“修改｜页面属性”命令。

6、弹出“页面属性”对话框，在对话框中做如图15所示的设置。（3）在网页里插入一个1行2列的表格。将光标移至第1行第1列位置，将此单元格的宽度设为184像素，如图16所示，插入图像“image/logo.jpg”，如图17所示。将光标置于表格尾部，插入一个1行2列的表格，表格宽度及对齐方式同上，将光标置于第1行第1列单元格中，在“属性”面板中将此单元格的宽度设为389像素，把图像“image/topbg1.gif”设为该单元格的背景图片，如图18。图14制作流程图（4）按Tab键将光标切换到第2列，将此单元格的宽度设为389像素，单击“插入”栏中的“图像”下拉列表按钮，在下拉列表

7、中选择“鼠标经过图像”选项，在弹出的对话框中设置参数“原始图像”及“鼠标经过图像”，如图19。（5）按照同样的制作方法，先后插入关于惠恒、产品展示、工程案例、人才招聘及联系我们5个导航按钮，效果如图20所示。（6）将光标置于表格尾部，插入一个1行1列的表格，表格宽度设为749像素，居中对齐，在表格中插入Flash动画。单击“插入”栏中的“媒体”下拉列表按钮，在“媒体”下拉列表中选择Flash选项，在弹出的“选择文件”对话框中，选择“flash/banner.swf”文件，单击“确定”即可。（7）将光标置