建站知识
首页 > 网站建设 > 建站知识 > 网站设计思路及构建网站模板设计的基本页面设计方法

网站设计思路及构建网站模板设计的基本页面设计方法

发布时间:2021-02-13    来源:广州网站优化公司     浏览次数:

一、网站设计思路

在每个网页开始之前,基本页面设计通常是在Firworks或图像设计软件(例如Photoshop)中设计的。图4-1-1是在Photoshop中设计的基本页面设计。

图4-1-1 Doking的BLOG基本页面设计图

在图4-1-1中,序列号①是网页的左列,并用红色标记。当前为空,其列将在后面的章节中一一添加。序列号②涂成红色正方形圆圈部分是网站的导航栏,它是根据第3章中建立的dkblog.mdb数据库中的LM表动态生成的。基本概念明确后,开始构建一个网站模板。

二、构建网站模板

设计思路:构建网站模板并统一网站网页设计。网站栏菜单的内容是通过数据表的动态LM生成的,也方便了网站栏菜单内容的修改。

(1)打开[文件]→[新建],打开[新建文档]对话框,选择“类别:”作为“模板页面”,选择“模板页面:”作为“ ASP.NET VB模板” “,结果如图4-1-2所示。

图4-1-2新建模板对话框

css仿网页步骤_网页制作步骤_手工飞机制作大全图片步骤

(2)单击“创建”按钮以将图层插入,在其属性窗口中,将ID设置为“ main”,并将“左(L)”和“上(T)”设置为0px,将“宽度(W)”设置为100%,并将对齐方式居中对齐。这将使页面居中。

([3)插入表格,将ID设置为“ bodyT”网页制作步骤,将宽度设置为780像素(这是根据基本页面设计的宽度设计的),并设置单位单元格的边距和间距设置为0,则边框粗细设置为0。

(4)将“ bodyT”表的第二行的垂直对齐方式设置为顶部,然后将其分成两列。第一列的宽度设置为220px,第一列的宽度设置为列设置为560px(分配列的宽度也根据您的基本页面设计分配),将列1的背景色设置为RGB(236,236,23 6)。

([5)将相应的背景图像插入“ bodyT”表的第三行一、,并将第一行的垂直对齐方式设置为底部,水平对齐方式设置为右侧。

([6)您还可以根据需要设计标题,字体大小,连接字体颜色或配色方案。

([7)创建网站导航栏。

①启动Access2003,打开dkblog.mdb数据库,并在LM表的LM字段中依次输入图形设计,3D设计,Web设计和网络编程的4条记录,如图4-1-3所示。

图4-1-3 LM表数据输入

css仿网页步骤_手工飞机制作大全图片步骤_网页制作步骤

②返回Dreamweaver,切换到[服务器行为]面板,单击“ +”按钮,然后从下拉菜单中选择“数据集”,如图4-1-4所示。

图4-1-4添加数据集

③在弹出的[数据集]对话框中广州网站优化,输入数据集名称为“ menuda”,在连接下拉菜单中选择“ dkconn”,在表下拉菜单中选择LM表,然后选择列为“所有”选项,在排序下拉菜单中选择字段“ LMID”,将排序设置为升序,结果如图4-1-5所示:

图4-1-5数据集对话框

④单击“测试”按钮,出现如图4-1-6所示的对话框,说明数据集创建成功,然后单击“确定”按钮完成。

图4-1-6数据集测试对话框

⑤切换到[Binding]选项卡,并展开数据集(菜单)的字段,如图4-1-7所示:

图4-1-7绑定选项卡

网页制作步骤_css仿网页步骤_手工飞机制作大全图片步骤

⑥将LM字段拖到bodyT表单的第一行网页制作步骤,如图4-1-8所示:

图4-1-8拖动LM字段

⑦释放鼠标,然后将阴影字符添加到第一行:{menuda.LM},输入“主页|”。之前,然后输入符号“ | Contact Us”,结果如图4所示。显示于-1-9:

图4-1-9将数据绑定到bodyT表

⑧选择阴影字符{menuda.LM}和以下字符“ |”网页制作步骤,选择[插入]菜单→[应用程序对象]→[重复区域],然后在[重复区域]的弹出对话框中选择数据]设置为“菜单”,选择显示记录为“所有记录”,如图4-1-10所示,单击“确定”按钮完成网站导航菜单。

图4-1-10重复区域对话框

(7)将鼠标移到表bodyT的第二行和第二列,选择[插入]菜单→[模板对象]→[可编辑区域],在[新建可编辑区域]对话框中输入名称对于“主体”,请按“确定”按钮,如图4-1-11所示:

图4-1-11新的可编辑区域

这完成了网站模板的初始工作,将模板另存为bkblog.dwt.aspx。

上一篇:企业网站需要划分哪些部分的内容是什么呢??

下一篇:我们从网络上常见到的企业网站是用什么软件制作?

返回顶部

售前客服QQ

售后客服QQ

加微信交谈

加微信交谈

x