《网页设计-个人网站的建设1》由会员分享，可在线阅读，更多相关《网页设计-个人网站的建设1（42页珍藏版）》请在金锄头文库上搜索。
1、项目1 个人网站的建设模板和特效网页的制作项目1 个人网站的建设模板和特效网页的制作 任务1 .个人网站的设计规划 任务2 .创建本地站点任务 任务3 .制作网页模板 任务1 .个人网站的设计规划 任务2 .创建本地站点任务 任务3 .制作网页模板 任务4.利用模板制作“我的简历”页面 任务5 .网页添加特效 任务4.利用模板制作“我的简历”页面 任务5 .网页添加特效 任务1 . 个人网站的设计规划任务1 . 个人网站的设计规划 任务1 .1 确定网站主题 任务1.2 确定网站的目录结构 任务1.3 确定网站的整体风格 任务1 .1 确定网站主题 任务1.2 确定网站的目录结构 任务1.3
2、确定网站的整体风格 任务1.4 确定网站主要栏目和布局任务1.4 确定网站主要栏目和布局 任务1.1 确定网站主题任务1.1 确定网站主题 对于主题的选择主要按下列3个条件去考虑，本例所讲的是一个个 人介绍性质的网站，主题就是介绍个人的相关信息。 如果主题已经确定，就可以围绕主题给该网站起一个名字，网站 对于主题的选择主要按下列3个条件去考虑，本例所讲的是一个个 人介绍性质的网站，主题就是介绍个人的相关信息。 如果主题已经确定，就可以围绕主题给该网站起一个名字，网站 名称也是网站设计的一部分，而且是很关键的要素。名称也是网站设计的一部分，而且是很关键的要素。 任务1.2 确定网站的目录结构任务
3、1.2 确定网站的目录结构 网站的目录是指建立网站时创建的目录，目录结构的好坏，对浏 览者来说并没有什么太大的感觉，但是对站点本身的上传维护以及以 后内容的扩充和移植有着重要的影响。 建立目录结构的建议： a.不要将所有文件都存放在根目录下。 网站的目录是指建立网站时创建的目录，目录结构的好坏，对浏 览者来说并没有什么太大的感觉，但是对站点本身的上传维护以及以 后内容的扩充和移植有着重要的影响。 建立目录结构的建议： a.不要将所有文件都存放在根目录下。 b.按栏目内容建立子目录。 c.个主目录下都建立独立的images目录。 d.目录的层次不要太深 b.按栏目内容建立子目录。 c.个主目录下
4、都建立独立的images目录。 d.目录的层次不要太深 任务1.3 确定网站的整体风格任务1.3 确定网站的整体风格 在动手建立网站之前，对网页进行完整、详尽的整体设计是至关 重要的。风格是指站点的整体形象想给浏览者的综合感受，包括站点 的标志、色彩、字体、标语、版面布局、内容价值、存在意义、站点 荣誉等诸多因素。本例的页面采用绿色为主的色调，绿色具有清爽、 理想、希望、生长的含义，采用这种大面积明亮的绿色块，营造了一 个清晰明快、充满无限希望与活力的氛围。 在动手建立网站之前，对网页进行完整、详尽的整体设计是至关 重要的。风格是指站点的整体形象想给浏览者的综合感受，包括站点 的标志、色彩、字
5、体、标语、版面布局、内容价值、存在意义、站点 荣誉等诸多因素。本例的页面采用绿色为主的色调，绿色具有清爽、 理想、希望、生长的含义，采用这种大面积明亮的绿色块，营造了一 个清晰明快、充满无限希望与活力的氛围。 任务1.4 确定网站主要栏目和布局任务1.4 确定网站主要栏目和布局 通常版面布局是按照如下步骤进行的。 步骤1.设计草案。 新建页面就像一张白纸，没有任何表格、框架和约定俗成的东西，设计者 可以尽可能发挥想象力，用一张白纸和一支铅笔勾画出页面的大致布局， 当然永续哦图软件photoshopFirewoeks等也可以。 通常版面布局是按照如下步骤进行的。 步骤1.设计草案。 新建页面就像
6、一张白纸，没有任何表格、框架和约定俗成的东西，设计者 可以尽可能发挥想象力，用一张白纸和一支铅笔勾画出页面的大致布局， 当然永续哦图软件photoshopFirewoeks等也可以。 步骤2.进行粗略布局 在草案的基础上，将确定需要放置的功能模块安排到页面上。必须遵循6突 出重点、平衡协调的原则，将网站标志、主 要栏目等最重要的模块放在最 显眼，最突出的位置，然后再考虑次要模块的排放。 步骤2.进行粗略布局 在草案的基础上，将确定需要放置的功能模块安排到页面上。必须遵循6突 出重点、平衡协调的原则，将网站标志、主 要栏目等最重要的模块放在最 显眼，最突出的位置，然后再考虑次要模块的排放。 任务
7、2 . 创建本地站点任务2 . 创建本地站点 步骤1.选择【站点】|【管理站点】命令，弹出【管理站点】对话框，在【管理 站点】对话框中，单击【新建】按钮，然后从弹出的菜单中选择【站点】选项。 步骤1.选择【站点】|【管理站点】命令，弹出【管理站点】对话框，在【管理 站点】对话框中，单击【新建】按钮，然后从弹出的菜单中选择【站点】选项。 任务2 . 创建本地站点任务2 . 创建本地站点 步骤2.弹出【站点定义】对话框，如果对话框显示的是【高级】选项卡，则切 换到【基本】选项卡，弹出【站点定义向导】的第一个界面，要求为站点输入 名称。 步骤2.弹出【站点定义】对话框，如果对话框显示的是【高级】选项
8、卡，则切 换到【基本】选项卡，弹出【站点定义向导】的第一个界面，要求为站点输入 名称。 任务2 . 创建本地站点任务2 . 创建本地站点 步骤3.单击【下一步】按钮，出现向导的下一个界面，询问是否要使用服务器 技术。选择【否我不想使用服务器技术】选项，指示目前该站点是一个静态 站点没有动态页面。 步骤3.单击【下一步】按钮，出现向导的下一个界面，询问是否要使用服务器 技术。选择【否我不想使用服务器技术】选项，指示目前该站点是一个静态 站点没有动态页面。 步骤4.单击【下一步】按钮，打开 如图4.5所示的对话框，在文本框中输入站点 路经。 步骤4.单击【下一步】按钮，打开 如图4.5所示的对话框
9、，在文本框中输入站点 路经。 任务2 . 创建本地站点任务2 . 创建本地站点 步骤5.单击【下一步】按钮，询问如何连接到远程服务器，这里选择【无】， 因为将整个站点制作完成以后再上传。 步骤6.单击【下一步】按钮， 将显示设置概要。 步骤5.单击【下一步】按钮，询问如何连接到远程服务器，这里选择【无】， 因为将整个站点制作完成以后再上传。 步骤6.单击【下一步】按钮， 将显示设置概要。 任务2 . 创建本地站点任务2 . 创建本地站点 步骤7.单击【完成】按钮，即出现【管理站点】对话框，其中显示了新建的 站点。 步骤8.单击【完成】按钮，关闭【管理站点】对话框，现在，已经为站点 定义了一个本
10、地根文件夹，就可以在站点中制作网页了，当制作完成以后， 步骤7.单击【完成】按钮，即出现【管理站点】对话框，其中显示了新建的 站点。 步骤8.单击【完成】按钮，关闭【管理站点】对话框，现在，已经为站点 定义了一个本地根文件夹，就可以在站点中制作网页了，当制作完成以后， 就可以上传到服务器上供大家浏览了。就可以上传到服务器上供大家浏览了。 任务3 . 制作网页模板任务3 . 制作网页模板 使用模板创建文档可使站点具有统一的结构和外观。具体操作步骤如下： 步骤1.选择【文件】|【新建】命令，弹出【新建文档】对话框，选择【空白 页】选项，在【页面类型】选项卡中选择【模板】选择。 步骤.单击【创建】按
11、钮，创建一空白模板网页。选择【修改】【页面元 素】命令，打开【页面属性】对话框，在【页面属性】对话框中将【背景颜色】 设置，【左边距】、【右边距】、【上边距】和【下边距】分 使用模板创建文档可使站点具有统一的结构和外观。具体操作步骤如下： 步骤1.选择【文件】|【新建】命令，弹出【新建文档】对话框，选择【空白 页】选项，在【页面类型】选项卡中选择【模板】选择。 步骤.单击【创建】按钮，创建一空白模板网页。选择【修改】【页面元 素】命令，打开【页面属性】对话框，在【页面属性】对话框中将【背景颜色】 设置，【左边距】、【右边距】、【上边距】和【下边距】分 别设置为。 步骤.单击【确定】按钮。 步骤
12、.将光标放置在页面中，选择【窗口】【资源】命令，打开【资源】 面板。 别设置为。 步骤.单击【确定】按钮。 步骤.将光标放置在页面中，选择【窗口】【资源】命令，打开【资源】 面板。 任务3 . 制作网页模板任务3 . 制作网页模板 步骤.在面板中单击新建建按钮，显示以创建的库文件，单击并选择要插入的 库文件，单击【资源】面板底部的【插入】按钮，即可插入库文件。 步骤.将光标放置在库文件的右边，选择【插入记录】【表格】命令，插入 行列的表格，此表格记为表格。 步骤.将光标放置在表格的第列，选择【插入记录】【表格】命令，插 步骤.在面板中单击新建建按钮，显示以创建的库文件，单击并选择要插入的 库文
13、件，单击【资源】面板底部的【插入】按钮，即可插入库文件。 步骤.将光标放置在库文件的右边，选择【插入记录】【表格】命令，插入 行列的表格，此表格记为表格。 步骤.将光标放置在表格的第列，选择【插入记录】【表格】命令，插 入行列的表格，此表格记为表格。 步骤.将光标放置在表格的第行单元格中，选择【插入记录】【图像】 命令，插入图像images/left_top.jpg。 入行列的表格，此表格记为表格。 步骤.将光标放置在表格的第行单元格中，选择【插入记录】【图像】 命令，插入图像images/left_top.jpg。 任务3 . 制作网页模板任务3 . 制作网页模板 步骤9.将光标放置在表格2
14、的第2行单元格中，单击属性面板中【背景】文本 框右边的【浏览】按钮，插入背景图像images/left_di.gif。 步骤9.将光标放置在表格2的第2行单元格中，单击属性面板中【背景】文本 框右边的【浏览】按钮，插入背景图像images/left_di.gif。 任务3 . 制作网页模板任务3 . 制作网页模板 步骤10.将光标放置在背景图像上，选择【插入记录】|【表格】命令，插入 10行1列的表格，此表格记为表格3，在属性面板中，将【对齐】设置为【居 中对齐】。 步骤10.将光标放置在背景图像上，选择【插入记录】|【表格】命令，插入 10行1列的表格，此表格记为表格3，在属性面板中，将【对
15、齐】设置为【居 中对齐】。 任务3 . 制作网页模板任务3 . 制作网页模板 步骤11.将光标放置在表格3的第2行单元格中，选择【插入记录】|【图像】 命令，插入图像images/geren.gif。 步骤11.将光标放置在表格3的第2行单元格中，选择【插入记录】|【图像】 命令，插入图像images/geren.gif。 步骤12.在表格3的其他单元格中再插入相应的图像。步骤12.在表格3的其他单元格中再插入相应的图像。 步骤步骤13.将光标放置在表格将光标放置在表格2的第的第3行中，选择【插入记录】行中，选择【插入记录】|【图像】命令， 插入 【图像】命令， 插入images/left-b
16、otton.jpg。 任务3 . 制作网页模板任务3 . 制作网页模板 步骤步骤14.将表格将表格1的第的第2列【宽】设置我列【宽】设置我10。 步骤15.将光标放置在表格1的第3列中，选择【插入记录】|【表格】命令， 插入4行1列的表格，此表格记为表格4。 。 步骤15.将光标放置在表格1的第3列中，选择【插入记录】|【表格】命令， 插入4行1列的表格，此表格记为表格4。 任务3 . 制作网页模板任务3 . 制作网页模板 步骤16.将光标放置在表格4的第1行中，选择【插入记录】|【图像】命令， 插入图片hua-1.jpg。 步骤16.将光标放置在表格4的第1行中，选择【插入记录】|【图像】命令， 插入图片hua-1.jpg。 步骤17.将光标放置在表格4的第2行中，选择【插入记录】|【图像】命令， 插入图像hua-2.jpg。 步骤17.将光标放置在表格4的第2行中，选择【插入记录】|【图像】命令
