《网页设计与制作项目教程》项目四 企业官网网页制作.pptxVIP

网页设计与制作项目教程项目四企业官网网页制作项目四 企业官网网页制作项目目标： 能力目标(1)能快速有效地收集所需的素材(2)能制作完整信息的网页文件知识目标(1)网站的图文混排方式(2)网页信息的整合方法 网页设计与制作项目教程任务1 收集整理网站素材【任务目标】【任务实施】本任务的目标是收集整理网页素材一、文本素材收集与整理 文本素材的主要来源：键盘输入、扫描印刷品、从网络电子资源中获取。如果文字数量多，也可在一些电子书籍或网页中获取，像百科全书、上下五千年等电子书籍及相关的网站的网页中，就可以方便地找到许多文本素材，一般采用复制粘贴的方法获取。。项目四企业官网网页制作 网页设计与制作项目教程项目四企业官网网页制作1：打开百度搜索页面，在搜索栏键入“网页文本素材”，如图4-1-1所示：2：进入到第一个超级链接，可以看到搜索的结果页面(当然也可以进入到其他的超链接中寻找)。 网页设计与制作项目教程项目四企业官网网页制作 3：上面找到的是一些艺术字体，编辑后可在网页中使用，如果单纯找文本，只要键入需要寻找内容的关键字即可，比如“招聘启事”，如图4-1-3所示。图4-1-3招聘启事页面 网页设计与制作项目教程项目四企业官网网页制作 4：进入到“招聘启事范文”链接，可以找到需要的文本内容，如图4-1-4所示，如果可以直接下载，就下载即可，如果不可以，可先复制粘贴到记事本中，在网页中需要用到时，复制粘贴到网页中即可。图4-1-4招聘启事范文式 在网站文件夹下建立一个新的text文件夹，将收集到的文本类素材专门放入到网站web文件夹的text文件夹中，以便日后的使用和查找。 网页设计与制作项目教程项目四企业官网网页制作二、图片类素材收集与整理1：打开百度搜索页面，在搜索栏键入“网页图片素材”，如图4-1-5所示：图4-1-5网页图片素材搜索 网页设计与制作项目教程项目四企业官网网页制作二、图片类素材收集与整理 2：单击进入到任意一个搜索链接页面。比如“百度图库”，在要保存的图片上单击右键选择“图片另存为”命令，如图4-1-6所示，并将下载的图片存放在我们网站文件夹中已经建立好了的image文件夹中。图4-1-6图片另存为方式素材搜索3：或者直接在打开的网页上选择保存网页，保存下来的网页文件夹中可以找到该网页相关的图片，再将需要的图片命名，放入到网站文件夹的image文件夹中。除了通过搜集也可以自己原创素材，通过PS制图等软件来创作自己的素材 网页设计与制作项目教程项目四企业官网网页制作任务2 制作网站首页【任务目标】【任务实施】 本任务主要是根据项目三任务4中已经制作好的首页版式，通过在网页版式中添加文字和图片等对象，并对对象进行相应的属性设置来完成首页的制作1．在以红色为背景在第二行的嵌套表格中输入文字，将光标定位到第一列中，并依次输入文字，如图4-2-1。图4-2-1 输入导航条文字 网页设计与制作项目教程项目四企业官网网页制作 2．设置表格属性，调整文字在表格中的位置：将光标定位到第一列中，设置每一列的列宽为143像素，并设置各列的水平对齐方式为“居中对齐”，如图4-2-2 所示。图4-2-2 调整文字在表格中的位置 网页设计与制作项目教程项目四企业官网网页制作 3．设置文字属性：选中第一列中的“首页”二字，在下方的属性栏中点击“大小”后面的下拉箭头，选择“14”，将弹出如图4-2-3所示对话框，这是对文字进行CSS样式设置，详细的知识点见后面章节介绍，请参照图片中所示输入样式名称，点击“确定”按钮后则下方的属性栏如图4-2-4所示。图4-2-3 新建CSS规则 网页设计与制作项目教程项目四企业官网网页制作图4-2-4 文字属性栏4．在属性栏中再进行各项设置：选择文字颜色为“白色”，点击按钮，设置为粗体。 网页设计与制作项目教程项目四企业官网网页制作5．点击字体后的下拉菜单，设置字体为“宋体”，最终的属性栏如图4-2-5所示。。 图4-2-5最终文字属性栏6．选取其余列中的文字，在属性栏中的目标规则后的下拉菜单中选择已新建好的“dh_txt”样式名称，如图4-2-6所示，导航条中文字最终效果如图4-2-7所示。图4-2-6 选取目标规则图4-2-7 最终效果 网页设计与制作项目教程项目四企业官网网页制作7．如图4-2-8所示，在页面相对位置依次输入文字。 图4-2-8输入页面文字8．如图4-2-9所示，设置相对位置中文字的格式，文字属性栏如图4-2-10所示。图4-2-9 页面部分文字设置 网页设计与制作项目教程项目四企业官网网页制作图4-2-10 页面部分文字属性9．对右侧的“客户留言”、“下载中心”、“在线调查”设置文字属性，属